/* =====================================================================
   ModernTW — Metin2 klasik gorunum katmani (AnkSOFT, 2026)
   Koyu fantastik / Uzakdogu: gece sahnesi, sis, Metin tasi, lake paneller,
   bronz-altin islemeli cerceveler, iri metal dugmeler.
   - Yalniz gorunum: PHP/JS/form sozlesmesine dokunmaz.
   - Tum gorseller bu temanin ozgun SVG'leri (assets/img/m2), yazi tipleri
     yerel woff2 (assets/fonts, SIL OFL 1.1).
   - Renk varyantlari: body.tema-altin | tema-kirmizi | tema-mavi | tema-yesil
   ===================================================================== */
@import url("../fonts/fonts.css");

/* ---------- 1) Palet ---------- */
:root, .tema-altin {
  --wm-bg: #09070c;
  --wm-panel: #16101a;
  --wm-panel-2: #201722;
  --wm-line: #3d2b1d;
  --wm-text: #ecdfc6;
  --wm-muted: #ad9c7f;
  --wm-vurgu: #ddb055;
  --wm-vurgu-2: #a4712a;
  --wm-vurgu-ink: #241405;
  --wm-vurgu-yumusak: rgba(221,176,85,.14);
  --wm-basari: #6fcf7c;
  --wm-hata: #f0634f;
  --wm-uyari: #e8b13a;

  --m2-altin: #ddb055;
  --m2-altin-acik: #f6dc8f;
  --m2-altin-koyu: #8a5a21;
  --m2-bronz: #5e3c16;
  --m2-serit: #5e1219;        /* panel basligi seridi */
  --m2-serit-koyu: #2a070c;
  --m2-gok-1: #170e2a;
  --m2-gok-2: #351733;
  --m2-ufuk: rgba(150,62,48,.55);
  --m2-sahne-filtre: none;
  --m2-baslik-font: 'Cinzel', Georgia, serif;
  --m2-sus-font: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --m2-govde-font: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
}
.tema-kirmizi { --m2-serit:#7a1414; --m2-serit-koyu:#300505; --m2-gok-1:#1a0a14; --m2-gok-2:#3f1212; --m2-ufuk:rgba(190,60,30,.6); }
.tema-mavi    { --m2-serit:#132f57; --m2-serit-koyu:#06111f; --m2-gok-1:#08122a; --m2-gok-2:#15284a; --m2-ufuk:rgba(70,120,170,.45); --m2-sahne-filtre: hue-rotate(-38deg) saturate(.9); }
.tema-yesil   { --m2-serit:#12473a; --m2-serit-koyu:#051a14; --m2-gok-1:#07161a; --m2-gok-2:#123030; --m2-ufuk:rgba(80,150,110,.4); --m2-sahne-filtre: hue-rotate(-110deg) saturate(.8); }

/* ---------- 2) Govde, yazi ---------- */
body.tema-altin, body.tema-kirmizi, body.tema-mavi, body.tema-yesil {
  background-color: var(--wm-bg);
  background-image:
    radial-gradient(1200px 520px at 50% 640px, rgba(94,18,25,.20), transparent 70%),
    url("../img/m2/bulut.svg"),
    linear-gradient(180deg, #0b0810 0%, #08060a 100%);
  background-attachment: scroll;
  font-family: var(--m2-govde-font);
  font-size: 16px;
  color: var(--wm-text);
}
.font-sans { font-family: var(--m2-govde-font) !important; }
.font-baslik { font-family: var(--m2-baslik-font) !important; letter-spacing: .02em; text-shadow: 0 1px 0 rgba(0,0,0,.65); }
body .text-sm { font-size: 15px; line-height: 1.45; }
body .text-xs { font-size: 13px; }
body .text-soluk { color: var(--wm-muted); }
a { text-underline-offset: 3px; }
::selection { background: var(--m2-altin); color: var(--wm-vurgu-ink); }
body > img.wm-logo { display: none; }   /* head icine dusen kirik eski logo etiketi */

/* ---------- 3) Ust menu ---------- */
body > header.sticky {
  background: linear-gradient(180deg, #1c1016 0%, #110a0f 100%) !important;
  border-bottom: 0 !important;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.9) !important;
}
body > header.sticky::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 9px; pointer-events: none;
  background: url("../img/m2/kenar.svg") repeat-x left center / auto 9px;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.7));
}
body > header nav > div { height: 72px !important; }
body > header nav ul.font-baslik { gap: 2px; }
body > header nav ul.font-baslik > li > a,
body > header nav ul.font-baslik > li > button {
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #e6d6b4; background: transparent !important; border-radius: 0 !important; position: relative;
}
body > header nav ul.font-baslik > li > a:hover,
body > header nav ul.font-baslik > li > button:hover { color: var(--m2-altin-acik); text-shadow: 0 0 14px rgba(246,220,143,.55); }
body > header nav ul.font-baslik > li > a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--m2-altin), transparent); opacity: 0; transition: opacity .2s;
}
body > header nav ul.font-baslik > li > a:hover::after { opacity: 1; }
body > header nav ul .rounded-xl.border.bg-panel { border-radius: 3px; border-color: var(--m2-bronz); background: #140c11; }
body > header nav ul .rounded-xl.border.bg-panel a { font-family: var(--m2-baslik-font); letter-spacing: .06em; }

/* ---------- 4) Dugmeler ---------- */
.bg-vurgu-gradyan {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--wm-vurgu) 40%, #fff6d0) 0%,
    var(--wm-vurgu) 38%,
    var(--wm-vurgu-2) 64%,
    color-mix(in srgb, var(--wm-vurgu-2) 70%, #000) 100%) !important;
  color: var(--wm-vurgu-ink) !important;
}
a.bg-vurgu-gradyan, button.bg-vurgu-gradyan {
  border: 1px solid color-mix(in srgb, var(--wm-vurgu-2) 55%, #000) !important;
  border-radius: 3px !important;
  box-shadow: inset 0 1px 0 rgba(255,248,215,.75), inset 0 -2px 0 rgba(50,25,4,.45), 0 0 0 1px rgba(0,0,0,.55), 0 8px 18px -8px color-mix(in srgb, var(--wm-vurgu) 60%, transparent) !important;
  text-shadow: 0 1px 0 rgba(255,240,200,.45);
  font-weight: 700; letter-spacing: .05em;
}
a.bg-vurgu-gradyan:hover, button.bg-vurgu-gradyan:hover { filter: brightness(1.1) saturate(1.05); }
/* koyu metal (ikincil) dugmeler */
a.border.border-cizgi:not(.bg-vurgu-gradyan), button.border.border-cizgi:not(.bg-vurgu-gradyan) {
  border-radius: 3px !important;
  border-color: #5a3c1c !important;
  background: linear-gradient(180deg, #2a1d22 0%, #160f14 100%) !important;
  color: #ead9b4;
  box-shadow: inset 0 1px 0 rgba(255,230,180,.08), 0 0 0 1px rgba(0,0,0,.6);
}
a.border.border-cizgi:not(.bg-vurgu-gradyan):hover, button.border.border-cizgi:not(.bg-vurgu-gradyan):hover {
  border-color: var(--m2-altin) !important; color: var(--m2-altin-acik) !important;
  box-shadow: inset 0 1px 0 rgba(255,230,180,.12), 0 0 0 1px rgba(0,0,0,.6), 0 0 14px -2px rgba(221,176,85,.35);
}
input[type=submit], input[type=button], button.wm-btn {
  background: linear-gradient(180deg, #f6dc8f 0%, var(--wm-vurgu) 40%, var(--wm-vurgu-2) 100%);
  border: 1px solid #5e3c16; border-radius: 3px; font-family: var(--m2-baslik-font); letter-spacing: .05em;
}

/* Sol kenardaki iri OYUNU INDIR plakasi */
aside > a[href="oyunu-indir"].bg-vurgu-gradyan {
  position: relative; isolation: isolate; height: 70px; padding: 0 !important;
  font-size: 19px; font-weight: 800 !important; letter-spacing: .16em !important;
  border: 0 !important; border-radius: 0 !important;
  background: linear-gradient(180deg, #a47534, #4a2c0c) !important;
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 20px 100%, 0 50%);
  box-shadow: none !important;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.7));
}
aside > a[href="oyunu-indir"].bg-vurgu-gradyan::before {
  content: ""; position: absolute; inset: 3px; z-index: -1;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);
  background: linear-gradient(180deg, #fff0b8 0%, #f0cd76 20%, #d49f42 48%, #a66d25 52%, #c99033 80%, #f2d27e 100%);
}
aside > a[href="oyunu-indir"].bg-vurgu-gradyan::after {
  content: ""; position: absolute; inset: 3px; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,240,.55) 48%, transparent 60%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0; animation: m2Parilti 5s ease-in-out infinite;
}
aside > a[href="oyunu-indir"].bg-vurgu-gradyan svg { width: 24px; height: 24px; }
@keyframes m2Parilti { 0%, 60% { background-position: 130% 0; } 100% { background-position: -40% 0; } }

/* ---------- 5) Paneller: lake zemin + bronz/altin cerceve ---------- */
:is(section, div).bg-panel.border:not(.absolute):not(.fixed):not(.inline-flex):not(.wm-sade) {
  position: relative;
  border: 1px solid #3a2718 !important;
  border-radius: 4px !important;
  background-color: #150f18 !important;
  background-image:
    url("../img/m2/doku.svg"),
    radial-gradient(130% 70% at 50% 0%, rgba(94,18,25,.22), transparent 62%),
    linear-gradient(180deg, #1b131d 0%, #110b13 100%) !important;
  box-shadow: 0 0 0 1px #040205, 0 16px 34px -14px rgba(0,0,0,.9), inset 0 0 36px rgba(0,0,0,.5) !important;
}
:is(section, div).bg-panel.border:not(.absolute):not(.fixed):not(.inline-flex):not(.wm-sade)::before { display: none; }
:is(section, div).bg-panel.border:not(.absolute):not(.fixed):not(.inline-flex):not(.wm-sade)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  border: 22px solid transparent;
  border-image: url("../img/m2/cerceve.svg") 32 / 22px stretch;
}
/* panel basligi -> lake serit */
:is(section, div).bg-panel.border > .border-b.border-cizgi:first-child {
  position: relative;
  padding-left: 46px !important;
  border-bottom: 1px solid #6b4519 !important;
  background:
    url("../img/m2/baslik-sus.svg") no-repeat 18px center / 22px 14px,
    linear-gradient(180deg, color-mix(in srgb, var(--m2-serit) 92%, #fff 8%) 0%, var(--m2-serit) 45%, var(--m2-serit-koyu) 100%);
  box-shadow: inset 0 1px 0 rgba(255,220,160,.14), inset 0 -1px 0 rgba(0,0,0,.6), 0 1px 0 rgba(221,176,85,.22);
  color: var(--m2-altin-acik) !important;
  font-family: var(--m2-baslik-font);
  font-weight: 700; font-size: 14.5px; letter-spacing: .1em; text-transform: uppercase;
  text-shadow: 0 1px 0 #000, 0 0 14px rgba(221,176,85,.3);
}
aside :is(section, div).bg-panel.border > .border-b.border-cizgi:first-child { font-size: 13px; letter-spacing: .06em; padding-left: 40px !important; background-position: 14px center, 0 0; gap: 8px; }
aside :is(section, div).bg-panel.border > .border-b.border-cizgi:first-child > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  :is(section, div).bg-panel.border > .border-b.border-cizgi:first-child { letter-spacing: .05em; padding-left: 40px !important; background-position: 14px center, 0 0; gap: 10px; }
  body :is(section, div).bg-panel.border > .border-b.border-cizgi:first-child h2 { font-size: 13.5px !important; letter-spacing: .05em !important; }
  body :is(section, div).bg-panel.border > .border-b.border-cizgi:first-child a { white-space: nowrap; letter-spacing: .06em; }
}
:is(section, div).bg-panel.border > .border-b.border-cizgi:first-child h2 {
  font-size: 15px !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--m2-altin-acik) !important;
}
:is(section, div).bg-panel.border > .border-b.border-cizgi:first-child a {
  font-family: var(--m2-baslik-font); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #d9c7a0 !important; text-shadow: 0 1px 0 #000; position: relative; z-index: 5;
}
:is(section, div).bg-panel.border > .border-b.border-cizgi:first-child a:hover { color: var(--m2-altin-acik) !important; }
:is(section, div).bg-panel.border > .border-b.border-cizgi:first-child .text-basari { font-family: var(--m2-govde-font); text-transform: none; letter-spacing: 0; font-size: 13px; text-shadow: none; }

/* panel ici "oyuk" satirlar (sunucu durumu vb.) */
aside .rounded-lg.bg-panel-2 {
  border-radius: 2px !important;
  background: linear-gradient(180deg, #0d090f, #151018) !important;
  border: 1px solid #33241a;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.75), 0 1px 0 rgba(221,176,85,.06);
}
aside .wm-counter { font-size: 20px !important; color: var(--m2-altin-acik) !important; text-shadow: 0 0 12px rgba(221,176,85,.35), 0 1px 0 #000; }

/* mini siralama tablolari */
aside table tr { border-color: rgba(94,60,22,.45) !important; }
aside table tr:hover { background: rgba(221,176,85,.06) !important; }
aside table td a { font-weight: 500; }

/* sira madalyalari (1 altin, 2 gumus, 3 bronz, digerleri demir) */
td > span.inline-flex.rounded-md { border-radius: 50% !important; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.7); }
td > span.inline-flex.rounded-md.bg-vurgu-gradyan { background-image: radial-gradient(circle at 35% 30%, #fff3c4, #e8bd5c 45%, #8f5d1f 100%) !important; color: #2a1606 !important; }
td > span.inline-flex.rounded-md.bg-panel-2.text-metin { background: radial-gradient(circle at 35% 30%, #ffffff, #c7ccd6 45%, #6b717d 100%) !important; color: #1b1d22 !important; }
td > span.inline-flex.rounded-md.bg-panel-2.text-soluk { background: radial-gradient(circle at 35% 30%, #ffd9b0, #c27a3e 45%, #5f3415 100%) !important; color: #24110a !important; }
td > span.inline-flex.rounded-md.text-soluk:not(.bg-panel-2):not(.bg-vurgu-gradyan) { background: radial-gradient(circle at 35% 30%, #4a3d40, #241a1f 70%); color: #cbb994 !important; }

/* ---------- 6) Formlar ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=range]), textarea {
  background: linear-gradient(180deg, #0b080d 0%, #141017 100%) !important;
  border: 1px solid #4a3420 !important;
  border-radius: 2px !important;
  color: var(--wm-text) !important;
  font-family: var(--m2-govde-font);
  font-size: 15.5px !important;
  box-shadow: inset 0 2px 7px rgba(0,0,0,.8), 0 1px 0 rgba(221,176,85,.08) !important;
}
select {
  background-color: #110c13 !important; border: 1px solid #4a3420 !important; border-radius: 2px !important;
  box-shadow: inset 0 2px 7px rgba(0,0,0,.8) !important; color: var(--wm-text) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--m2-altin) !important;
  box-shadow: inset 0 2px 7px rgba(0,0,0,.8), 0 0 0 2px rgba(221,176,85,.22), 0 0 16px -4px rgba(221,176,85,.5) !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}
input::placeholder, textarea::placeholder { color: #7f705a !important; }
label.font-baslik { color: #cdb98f !important; font-size: 13px !important; letter-spacing: .06em; text-transform: uppercase; }
input[type=checkbox] { accent-color: var(--m2-altin); }

/* ---------- 7) Sayfa basliklari ---------- */
main h1.font-baslik {
  font-weight: 700 !important; text-transform: uppercase; letter-spacing: .08em;
  background: linear-gradient(180deg, #fff3cf 0%, #f0cf7f 40%, #c08a3a 75%, #e9c46f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.85)); text-shadow: none !important;
}
main h1.font-baslik { display: table; }
main h1.font-baslik::after {
  content: ""; display: block; height: 22px; margin: 6px auto 0; width: 100%; min-width: 200px; max-width: 320px;
  background: url("../img/m2/ayrac.svg") no-repeat center / contain;
}
main .text-center > h1.font-baslik { margin-left: auto; margin-right: auto; }
main table tbody > tr { border-color: rgba(94,60,22,.45) !important; }

/* ---------- 8) Tablolar (siralama, indir) ---------- */
main section table thead tr, main div.bg-panel table thead tr {
  background: linear-gradient(180deg, color-mix(in srgb, var(--m2-serit) 85%, #fff 6%), var(--m2-serit-koyu)) !important;
  border-bottom: 1px solid #6b4519 !important;
}
main table thead th { color: var(--m2-altin-acik); text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; font-weight: 700 !important; text-shadow: 0 1px 0 #000; }
main table tbody { border-color: rgba(94,60,22,.45) !important; }
main table tbody tr:nth-child(even) { background: rgba(255,240,210,.018); }
main table tbody tr:hover { background: rgba(221,176,85,.07) !important; }
main table td, main table th { position: relative; z-index: 1; }
main .overflow-x-auto { position: relative; z-index: 1; }

/* oyunu indir: iri indir dugmeleri, mobilde kart duzeni */
.wm-indir-tablo td a.bg-vurgu-gradyan { padding: 10px 18px !important; font-size: 13.5px !important; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 640px) {
  main table:not(.wm-indir-tablo) th, main table:not(.wm-indir-tablo) td { padding: 10px 7px !important; }
  main table:not(.wm-indir-tablo) thead th { letter-spacing: .04em; font-size: 11.5px; }
  .wm-indir-tablo thead { display: none; }
  .wm-indir-tablo, .wm-indir-tablo tbody, .wm-indir-tablo tr, .wm-indir-tablo td { display: block; width: 100%; }
  .wm-indir-tablo tr { padding: 18px 18px 20px; text-align: center; }
  .wm-indir-tablo td { padding: 4px 0 !important; }
  .wm-indir-tablo td:first-child strong { font-size: 19px; }
  .wm-indir-tablo td:nth-child(3)::before { content: "Boyut: "; color: #8d7d63; }
  .wm-indir-tablo td:last-child > div { justify-content: center; margin-top: 10px; }
  .wm-indir-tablo td a.bg-vurgu-gradyan { width: 100%; justify-content: center; padding: 14px 18px !important; font-size: 15px !important; }
}

/* sekme grubu (oyuncular / loncalar) */
main .inline-flex.rounded-xl.border.bg-panel { border-radius: 3px !important; border-color: #5a3c1c !important; background: #120c12 !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.7); }
main .inline-flex.rounded-xl.border.bg-panel > a { border-radius: 2px !important; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }

/* sayfalama */
main .flex-wrap > a.sayfalama, main .sayfalama { border-radius: 2px !important; border-color: #5a3c1c !important; background: #160f14; font-family: var(--m2-baslik-font); }
main .sayfalama_aktif { background-image: linear-gradient(180deg, #f6dc8f, var(--wm-vurgu) 45%, var(--wm-vurgu-2)) !important; color: var(--wm-vurgu-ink) !important; }

/* ---------- 9) Kahraman alani (anasayfa) ---------- */
.wm-kahraman { position: relative; width: 100%; }
.wm-kahraman-sahne {
  position: relative; overflow: hidden; isolation: isolate;
  height: clamp(470px, 44vw, 640px);
  display: flex; align-items: center; justify-content: center;
  background: #07050a;
}
.wm-k-gok {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 27% 9%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 41% 22%, rgba(255,240,220,.7), transparent 60%),
    radial-gradient(1px 1px at 58% 12%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 66% 30%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 8%, rgba(255,240,220,.75), transparent 60%),
    radial-gradient(1px 1px at 91% 26%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 6% 34%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 35% 38%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(70% 45% at 50% 78%, var(--m2-ufuk), transparent 72%),
    linear-gradient(180deg, #06050b 0%, var(--m2-gok-1) 38%, var(--m2-gok-2) 72%, #1d0d16 100%);
}
.wm-k-ay {
  position: absolute; z-index: 0; top: 11%; right: 16%;
  width: clamp(64px, 7vw, 116px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 62% 58%, rgba(160,130,90,.16), transparent 16%),
    radial-gradient(circle at 34% 66%, rgba(160,130,90,.13), transparent 12%),
    radial-gradient(circle at 48% 30%, rgba(160,130,90,.12), transparent 13%),
    radial-gradient(circle at 40% 38%, #fffaf0 0%, #f4e2bd 50%, #d9bd8c 80%, #b99a68 100%);
  box-shadow: 0 0 30px 6px rgba(255,226,170,.30), 0 0 120px 50px rgba(255,196,140,.12), 0 0 300px 120px rgba(160,90,120,.10);
  opacity: .92;
}
.wm-k-daglar {
  position: absolute; inset: 0; z-index: 1;
  background: url("../img/m2/sahne.svg") no-repeat center bottom / max(100%, 1100px) auto;
  filter: var(--m2-sahne-filtre);
}
.wm-kahraman .wm-video-bg { z-index: 2; background: transparent !important; }
.wm-kahraman .wm-video-bg.oynuyor iframe { opacity: .55; }
.wm-k-sis {
  position: absolute; left: 0; right: 0; pointer-events: none; z-index: 6;
  background: url("../img/m2/sis.svg") repeat-x 0 0 / 1200px 100%;
}
.wm-k-sis-1 { bottom: 10%; height: 42%; opacity: .85; animation: m2Sis1 80s linear infinite; }
.wm-k-sis-2 { bottom: -6%; height: 36%; opacity: .6; background-size: 1600px 100%; animation: m2Sis2 120s linear infinite; filter: brightness(.75); }
@keyframes m2Sis1 { to { background-position: 1200px 0; } }
@keyframes m2Sis2 { to { background-position: -1600px 0; } }
.wm-k-kivilcim { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.wm-k-kivilcim i {
  position: absolute; left: 0; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: #ffc46b; opacity: 0;
  box-shadow:
    8vw 0 0 0 #ffb45a, 17vw -4vh 0 -.5px #ff9a3c, 26vw 2vh 0 0 #ffd27a, 37vw -6vh 0 -.5px #ffb45a,
    48vw 1vh 0 0 #ffcf7a, 57vw -3vh 0 -.5px #ff9a3c, 66vw 3vh 0 0 #ffbf66, 75vw -5vh 0 -.5px #ffd27a,
    83vw 0 0 0 #ff9a3c, 92vw -2vh 0 -.5px #ffb45a, 79vw -9vh 0 0 #ffc46b, 12vw -8vh 0 -.5px #ffcf7a;
  filter: drop-shadow(0 0 3px #ff8a2a);
  animation: m2Kivilcim 9s linear infinite;
}
.wm-k-kivilcim i:nth-child(2) { left: 4vw; animation-duration: 12s; animation-delay: -4s; transform: scale(.8); }
.wm-k-kivilcim i:nth-child(3) { left: -3vw; animation-duration: 15s; animation-delay: -9s; }
@keyframes m2Kivilcim {
  0% { opacity: 0; transform: translate(0, 0); }
  10% { opacity: .95; }
  70% { opacity: .55; }
  100% { opacity: 0; transform: translate(3vw, -70vh); }
}
.wm-k-karart {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 70% at 50% 46%, transparent 45%, rgba(4,3,6,.6) 100%),
    linear-gradient(180deg, rgba(6,4,9,.45) 0%, transparent 18%, transparent 78%, rgba(9,7,12,.7) 95%, var(--wm-bg) 100%);
}
.wm-kahraman-icerik::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -2; pointer-events: none;
  width: 120%; height: 120%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(6,4,10,.55), rgba(6,4,10,.25) 60%, transparent);
}
.wm-kahraman-icerik {
  position: relative; z-index: 10; text-align: center;
  padding: 28px 16px 44px; width: 100%; max-width: 1040px;
}
.wm-k-arma {
  position: absolute; left: 50%; top: 44%; z-index: -1;
  width: min(500px, 92vw); aspect-ratio: 1;
  background: url("../img/m2/arma.svg") no-repeat center / contain;
  opacity: .5; transform: translate(-50%, -50%);
  animation: m2Don 160s linear infinite;
}
@keyframes m2Don { to { transform: translate(-50%, -50%) rotate(360deg); } }
.wm-k-ust {
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 14px;
  font-family: var(--m2-baslik-font); font-weight: 700; font-size: 13px; letter-spacing: .45em; text-transform: uppercase;
  color: var(--m2-altin-acik); text-shadow: 0 0 10px rgba(0,0,0,.95), 0 0 22px rgba(221,176,85,.35);
}
.wm-k-ust::before, .wm-k-ust::after { content: ""; width: 54px; height: 1px; background: linear-gradient(90deg, transparent, var(--m2-altin)); }
.wm-k-ust::after { transform: scaleX(-1); }
.wm-k-isim {
  margin: 0; padding: 0 .08em;
  font-family: var(--m2-sus-font); font-weight: 700;
  font-size: clamp(44px, 8.2vw, 112px); line-height: 1.04; letter-spacing: .02em;
  background: linear-gradient(180deg, #fff8dc 0%, #f6dc8f 26%, #dcaa4a 50%, #8e5b1e 66%, #d9ad58 84%, #fbe7ad 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #3a1f08) drop-shadow(0 0 1px #1d0f04) drop-shadow(0 10px 22px rgba(0,0,0,.85));
  overflow-wrap: anywhere;
}
.wm-k-isim.wm-k-isim-uzun { font-size: clamp(20px, 5.1vw, 58px); letter-spacing: .01em; }
.wm-k-ayrac { display: block; width: min(440px, 82vw); height: 28px; margin: 16px auto 18px; background: url("../img/m2/ayrac.svg") no-repeat center / contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.9)); }
.wm-k-alt { max-width: 56ch; margin: -4px auto 22px; color: #e4d5b6; font-size: 17px; line-height: 1.55; text-shadow: 0 1px 6px rgba(0,0,0,.95); }
.wm-k-dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 22px; filter: drop-shadow(0 12px 18px rgba(0,0,0,.75)); }
.wm-dugme {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-width: 250px; height: 66px; padding: 0 40px;
  font-family: var(--m2-baslik-font); font-weight: 800; font-size: 18px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 22px 100%, 0 50%);
  transition: transform .16s ease, filter .16s ease;
}
.wm-dugme::before {
  content: ""; position: absolute; inset: 3px; z-index: -1;
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 20px 100%, 0 50%);
}
.wm-dugme::after {
  content: ""; position: absolute; inset: 3px; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,240,.45) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 140% 0; transition: background-position .7s ease;
}
.wm-dugme:hover { transform: translateY(-2px); filter: brightness(1.1); }
.wm-dugme:hover::after { background-position: -40% 0; }
.wm-dugme:focus-visible { outline: none; filter: brightness(1.15) drop-shadow(0 0 6px var(--m2-altin)); }
.wm-dugme svg { width: 22px; height: 22px; flex: 0 0 22px; }
.wm-dugme-altin { color: #2a1505; background: linear-gradient(180deg, #b98a3f, #4a2c0c); text-shadow: 0 1px 0 rgba(255,236,180,.6); }
.wm-dugme-altin::before { background: linear-gradient(180deg, #fff1bf 0%, #f2cf78 20%, #d6a043 48%, #a46b24 52%, #c78f33 80%, #f3d47f 100%); box-shadow: inset 0 1px 0 #fff8dc; }
.wm-dugme-kan { color: #fbe6ae; background: linear-gradient(180deg, #e3b65a, #6e4515); text-shadow: 0 1px 0 #2a0406, 0 0 10px rgba(0,0,0,.6); }
.wm-dugme-kan::before { background: linear-gradient(180deg, #c8463a 0%, #9a2124 42%, #6a0f17 54%, #7f1720 82%, #a83430 100%); }
.wm-k-linkler { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; font-family: var(--m2-baslik-font); font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.wm-k-linkler a { color: #e7d3a6; text-decoration: none; text-shadow: 0 1px 4px #000; }
.wm-k-linkler a:hover { color: var(--m2-altin-acik); text-shadow: 0 0 12px rgba(221,176,85,.6); }
.wm-k-linkler span { color: var(--m2-altin); font-size: 8px; opacity: .8; }
.wm-k-kenar { position: relative; z-index: 11; height: 12px; margin-top: -6px; background: url("../img/m2/kenar.svg") repeat-x left center / auto 12px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.8)); }

@media (max-width: 1023px) {
  .wm-k-ay { right: 10%; top: 9%; }
}
@media (max-width: 640px) {
  .wm-kahraman-sahne { height: auto; min-height: 610px; align-items: flex-start; }
  .wm-k-daglar { background-position: 84% bottom; background-size: auto 58%; }
  .wm-k-ay { right: auto; left: 7%; top: 3%; width: 46px; }
  .wm-k-ust { font-size: 11px; letter-spacing: .32em; gap: 10px; }
  .wm-k-ust::before, .wm-k-ust::after { width: 30px; }
  .wm-kahraman-icerik { padding: 64px 16px 130px; }
  .wm-k-arma { top: 34%; }
  .wm-k-dugmeler { flex-direction: column; align-items: center; gap: 14px; }
  .wm-dugme { width: 100%; max-width: 330px; min-width: 0; height: 60px; font-size: 16px; padding: 0 28px; }
  .wm-k-linkler { font-size: 11.5px; letter-spacing: .12em; }
  .wm-k-sis-1 { height: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-k-sis, .wm-k-kivilcim i, .wm-k-arma, aside > a[href="oyunu-indir"].bg-vurgu-gradyan::after { animation: none !important; }
  .wm-k-kivilcim { display: none; }
}

/* ---------- 10) Orta sutun karsilama fermani ---------- */
.wm-ferman { text-align: center; }
.wm-ferman > .relative { padding: 34px 28px 30px !important; }
.wm-ferman > .relative > span.inline-flex { border-radius: 2px !important; border-color: #5a3c1c !important; background: rgba(10,6,10,.6) !important; letter-spacing: .16em; text-transform: uppercase; font-size: 11px !important; }
.wm-ferman-baslik {
  font-size: clamp(22px, 2.5vw, 30px) !important; font-weight: 700 !important; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff3cf 0%, #f0cf7f 45%, #c08a3a 80%, #e9c46f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.85)); text-shadow: none !important;
}
.wm-ferman-baslik::after { content: ""; display: block; height: 22px; margin: 10px auto 0; width: min(300px, 80%); background: url("../img/m2/ayrac.svg") no-repeat center / contain; }
.wm-ferman p { margin-left: auto; margin-right: auto; }
.wm-ferman p:empty { display: none; }
.wm-ferman .flex-wrap { justify-content: center; }
.wm-ferman > .absolute.rounded-full { display: none; }
.wm-ferman > .pointer-events-none { opacity: 1 !important; background: radial-gradient(90% 90% at 50% 0%, rgba(150,40,40,.28), transparent 65%) !important; }

/* duyuru listesi */
main ul.divide-y > li > a { border-radius: 2px !important; }
main ul.divide-y > li > a > span:first-child.rounded-md { border-radius: 2px !important; background: var(--m2-serit) !important; color: var(--m2-altin-acik) !important; border: 1px solid #6b4519; }
main ul.divide-y { border-color: rgba(94,60,22,.45) !important; }

/* ---------- 11) Alt bilgi ---------- */
body > footer {
  position: relative; margin-top: 40px !important;
  border-top: 0 !important;
  background: url("../img/m2/doku.svg"), linear-gradient(180deg, #120c12 0%, #070508 100%) !important;
  box-shadow: inset 0 30px 40px -30px rgba(0,0,0,.9);
}
body > footer::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 12px; background: url("../img/m2/kenar.svg") repeat-x left center / auto 12px; filter: drop-shadow(0 -3px 5px rgba(0,0,0,.6)); }
body > footer h4.font-baslik { text-transform: uppercase; letter-spacing: .14em; font-size: 14px; color: var(--m2-altin-acik) !important; padding-left: 28px; background: url("../img/m2/baslik-sus.svg") no-repeat left center / 20px 13px; }
body > footer ul a { color: #bfae8e; }
body > footer ul a:hover { color: var(--m2-altin-acik) !important; }
body > footer > div.border-t { border-color: #2e2016 !important; background: rgba(0,0,0,.35); letter-spacing: .03em; }
body > footer img[src*="logonew"] { filter: drop-shadow(0 2px 6px rgba(0,0,0,.8)); margin-bottom: 12px; }

/* ---------- 12) Mobil menu cekmecesi ve modal ---------- */
div.absolute.bg-panel.border-l {
  background: url("../img/m2/doku.svg"), linear-gradient(180deg, #1c1218 0%, #0e090d 100%) !important;
  border-left: 2px solid #6b4519 !important;
  box-shadow: -10px 0 30px rgba(0,0,0,.8);
}
div.absolute.bg-panel.border-l nav a { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; border-radius: 2px !important; border-bottom: 1px solid rgba(94,60,22,.35); }
div.absolute.bg-panel.border-l nav a:hover { background: rgba(221,176,85,.08) !important; }

/* uyarilar */
.alert { border-radius: 3px !important; border-color: #5a3c1c; background: linear-gradient(180deg, #1b131c, #110b12); box-shadow: 0 8px 20px -10px rgba(0,0,0,.8); }
#sonuc .alert { margin-left: auto; margin-right: auto; }

/* SweetAlert koyu/altin (ozgun inline stil degiskenlerini besler) */
.sweet-alert { border-radius: 4px !important; border: 1px solid #6b4519 !important; background: linear-gradient(180deg, #1c141e, #110b13) !important; }
.sweet-alert h2 { font-family: var(--m2-baslik-font) !important; letter-spacing: .06em; }
.sweet-alert button.confirm { border-radius: 3px !important; font-family: var(--m2-baslik-font) !important; letter-spacing: .06em; background: linear-gradient(180deg, #f6dc8f, var(--wm-vurgu) 45%, var(--wm-vurgu-2)) !important; }

/* Ince kaydirma cubugu */
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #6b4519, #3a2510); border-radius: 0; }

/* 04.11.2026 Berke: "arka plan ne alaka mt2 ile, gerçek mt2 görüntüsü kullan" → kahraman alanında gerçek oyun
   görüntüsü: video oynarken tam görünür, başlamadan önce aynı videonun YouTube kapak karesi. Çizilmiş sahne
   (gök, ay, dağlar) yalnız video yoksa yedek olarak kalır. Görüntü YouTube gömme/kapak kuralları içinde gösterilir. */
.wm-kahraman .wm-kahraman-sahne.wm-gercek {
  background-color: #07050a; background-image: var(--m2-gorsel, none);   /* YouTube kapağı kötü (yazılı, düşük çözünürlük): yalnız özel görsel */
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
/* renk seçeneği kuralları (tema-mavi/kirmizi/yesil) sahne katmanlarını yeniden açmasın */
.wm-kahraman .wm-kahraman-sahne.wm-gercek .wm-k-gok,
.wm-kahraman .wm-kahraman-sahne.wm-gercek .wm-k-ay,
.wm-kahraman .wm-kahraman-sahne.wm-gercek .wm-k-daglar { display: none !important; }
.wm-kahraman .wm-kahraman-sahne.wm-gercek .wm-k-sis { opacity: .28 !important; }
.wm-kahraman .wm-kahraman-sahne.wm-gercek .wm-video-bg.oynuyor iframe { opacity: 1 !important; }

/* Video yüklenip görünür olana kadar (~8 sn, her döngü başında 4,6 sn) boş kalmasın: aynı videonun karesi yoğun
   bulanık ve karartılmış (üzerindeki yazı okunmaz), video başlayınca üstüne biner. Özel görsel (--m2-gorsel) varsa o. */
.wm-kahraman .wm-kahraman-sahne.wm-gercek::before {
  content: ""; position: absolute; inset: -60px; z-index: 0; pointer-events: none;
  background-image: var(--m2-poster); background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: blur(26px) brightness(.5) saturate(1.15); transform: scale(1.1);
}

/* 05.11.2026 Berke: kahraman alanı varsayılanı (Kahan2'de onaylandı): video üstte açık kalır, altta altın süslü sunucu
   adı + açıklama + küçük eylem düğmeleri. "Savaş Başlıyor" üst yazısı, arma ve alt bağlantılar gizli. */
.wm-kahraman-icerik.wm-kompakt { min-height: clamp(300px, 42vw, 560px); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 12px 18px; }
.wm-kahraman-icerik.wm-kompakt::before { display: none; }
.wm-kompakt .wm-k-ust, .wm-kompakt .wm-k-linkler { display: none; }
/* mühür halkası (Berke "yuvarlak bir şey vardı logo üstünde"): adın arkasında, alttan konumlu, dönmeye devam eder */
.wm-kompakt .wm-k-arma { top: calc(100% - 168px); width: min(400px, 80vw); opacity: .55; }
.wm-kompakt:has(.wm-k-alt) .wm-k-arma { top: calc(100% - 208px); }
.wm-kompakt .wm-k-isim { font-size: clamp(38px, 5.4vw, 88px); line-height: 1.02; margin: 0 0 4px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.9)) drop-shadow(0 8px 22px rgba(0,0,0,.75)); }
.wm-kompakt .wm-k-ayrac { margin: 2px auto 10px; }
.wm-kompakt .wm-k-alt { margin: 0 auto 16px; max-width: 640px; font-size: clamp(14px, 1.25vw, 18px); color: #f3e6c8; text-shadow: 0 2px 6px #000, 0 0 18px rgba(0,0,0,.8); }
.wm-kompakt .wm-k-dugmeler { gap: 10px; margin: 0; }
.wm-kompakt .wm-dugme { font-size: 13px; padding: 10px 22px; min-height: 0; }
.wm-kompakt .wm-dugme svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .wm-kahraman:has(.wm-kompakt) { position: relative; }
  .wm-kahraman-icerik.wm-kompakt { position: absolute; left: 0; right: 0; bottom: 0; min-height: 0; padding: 0 10px 16px; }
  .wm-kompakt .wm-k-dugmeler { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .wm-kompakt .wm-dugme { width: auto; flex: 0 0 auto; font-size: 12px; padding: 9px 16px; }
  .wm-kompakt .wm-k-arma { top: calc(100% - 124px); width: min(300px, 78vw); }
  .wm-kompakt:has(.wm-k-alt) .wm-k-arma { top: calc(100% - 160px); }
}