/* ModernTW — Metin2 oryantal susleme katmani (ozgun SVG/CSS, harici dosya/AI yok).
   Koyu-fantazi + Uzakdogu motifleri: bulut/kafes deseni, altin ayraclar, kose motifleri,
   ejderha-pulu doku. Site geneline atmosfer katar; renkler tokens degiskenlerinden. */

/* --- Genel arka plan: ince oryantal kafes + ust/alt sisli parlaklik --- */
body.tema-altin, body.tema-kirmizi, body.tema-mavi, body.tema-yesil {
  background-color: var(--wm-bg);
  background-image:
    radial-gradient(1200px 500px at 50% -8%, var(--wm-vurgu-yumusak), transparent 70%),
    radial-gradient(900px 400px at 50% 108%, var(--wm-vurgu-yumusak), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z'/%3E%3Cpath d='M30 12 L48 30 L30 48 L12 30 Z'/%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed, fixed, fixed;
}

/* --- Kartlara/panellere ince altin kenar parlamasi + kose motifi ---
   NOT: .absolute/.fixed olan panelleri (orn. mobil menu paneli) ezmemek icin
   :not ile korunur; yoksa position:relative, Tailwind .absolute'u geçersiz kilar. */
.bg-panel:not(.absolute):not(.fixed):not(.sticky),
.bg-panel-2:not(.absolute):not(.fixed):not(.sticky) { position: relative; }
.bg-panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(212,162,76,0.06);
}

/* --- Oryantal altin ayrac (baslik altlari icin: <span class="wm-ayrac"></span>) --- */
.wm-ayrac {
  display: block; height: 18px; margin: 6px auto 2px; width: 180px; max-width: 60%;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='18' viewBox='0 0 200 18'%3E%3Cg fill='none' stroke='%23d4a24c' stroke-width='1.4'%3E%3Cline x1='0' y1='9' x2='78' y2='9'/%3E%3Cline x1='122' y1='9' x2='200' y2='9'/%3E%3Cpath d='M100 2 L108 9 L100 16 L92 9 Z' fill='%23d4a24c' stroke='none'/%3E%3Ccircle cx='84' cy='9' r='2' fill='%23d4a24c' stroke='none'/%3E%3Ccircle cx='116' cy='9' r='2' fill='%23d4a24c' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
/* Renk varyantina gore ayrac rengi (currentColor ile) */
.tema-kirmizi .wm-ayrac, .tema-mavi .wm-ayrac, .tema-yesil .wm-ayrac { filter: hue-rotate(0deg); opacity:.95; }

/* --- Baslik font'una ince oyun-havasi golge --- */
.font-baslik { text-shadow: 0 1px 0 rgba(0,0,0,.5); letter-spacing: .3px; }

/* --- Hero/ust bolgeye ejderha-pulu doku (opsiyonel .wm-hero-doku) --- */
.wm-hero-doku {
  background-image:
    linear-gradient(180deg, transparent, var(--wm-bg)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24' viewBox='0 0 40 24'%3E%3Cg fill='none' stroke='%23d4a24c' stroke-opacity='0.08' stroke-width='1'%3E%3Cpath d='M0 12 A12 12 0 0 1 20 12 A12 12 0 0 1 40 12'/%3E%3Cpath d='M-20 24 A12 12 0 0 1 0 24 A12 12 0 0 1 20 24 A12 12 0 0 1 40 24'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- Susleme kose (kartlarda .wm-suslu ile) --- */
.wm-suslu::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; pointer-events: none;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg fill='none' stroke='%23d4a24c' stroke-opacity='0.5' stroke-width='1.3'%3E%3Cpath d='M21 1 L21 8 M21 1 L14 1'/%3E%3Cpath d='M17 1 L17 5 L21 5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===== Hero savas sahnesi (ozgun SVG silueti, telif-guvenli) ===== */
.wm-savas-hero{
  background:
    radial-gradient(120% 100% at 50% 0%, var(--wm-vurgu-yumusak), transparent 55%),
    linear-gradient(180deg, #0b0f17 0%, #0d1420 60%, var(--wm-panel) 100%);
}
.wm-savas-sahne{position:absolute;inset:0;overflow:hidden;}
.wm-savas-sahne svg{position:absolute;inset:0;opacity:.9;}
/* Savascilar merkeze hamle yapip geri cekilir (carpisma dongusu) */
.wm-savasci{transform-origin:center bottom;}
.wm-sol{animation:wmSol 2.6s ease-in-out infinite;}
.wm-sag{animation:wmSag 2.6s ease-in-out infinite;}
@keyframes wmSol{0%,100%{transform:translateX(0) rotate(0)}45%{transform:translateX(38px) rotate(2deg)}55%{transform:translateX(34px)}}
@keyframes wmSag{0%,100%{transform:translateX(0) rotate(0)}45%{transform:translateX(-38px) rotate(-2deg)}55%{transform:translateX(-34px)}}
/* Kilic carpismasi aninda kivilcim parlar */
.wm-kivilcim{opacity:0;transform-origin:center;animation:wmKivilcim 2.6s ease-in-out infinite;}
@keyframes wmKivilcim{0%,40%{opacity:0;transform:translate(400px,105px) scale(.4)}48%{opacity:1;transform:translate(400px,105px) scale(1.15)}58%{opacity:.5;transform:translate(400px,105px) scale(.9)}66%,100%{opacity:0;transform:translate(400px,105px) scale(.4)}}
/* Yukselen kozler */
.wm-koz{position:absolute;bottom:0;width:4px;height:4px;border-radius:50%;background:var(--wm-vurgu);opacity:0;box-shadow:0 0 6px var(--wm-vurgu);animation:wmKoz 4s linear infinite;}
@keyframes wmKoz{0%{opacity:0;transform:translateY(0) scale(1)}15%{opacity:.9}100%{opacity:0;transform:translateY(-220px) scale(.3)}}
@media (max-width:640px){.wm-savas-sahne svg{opacity:.7}}
@media (prefers-reduced-motion:reduce){.wm-sol,.wm-sag,.wm-kivilcim,.wm-koz{animation:none}.wm-kivilcim{opacity:.6}}

/* ===== Hero arka plan videosu (YouTube, cover) ===== */
.wm-video-bg{position:absolute;inset:0;overflow:hidden;background:#0b0f17;}
.wm-video-bg iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1.5);
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;
  pointer-events:none;border:0;
  /* Kontroller (oynat/duraklat/ileri-geri) YALNIZCA video oynamiyorken cizilir.
     Bu yuzden iframe varsayilan olarak gizli; JS oynatici PLAYING'e gecince
     .oynuyor sinifini ekler. Boylece kontroller hicbir zaman gorunmez. */
  opacity:0; visibility:hidden; transition:opacity .5s ease;
}
.wm-video-bg.oynuyor iframe{ opacity:1; visibility:visible; }