/* ============ KAN & AY — tema ============ */
:root{
  --bg:#0a0810; --panel:#150f22; --panel2:#1d1631; --panel3:#251d3c;
  --line:#2c2442; --line2:#3b3059;
  --text:#ece7f6; --muted:#9a90b8; --dim:#6f668c;
  --crimson:#d43a54; --crimson2:#8c1e30; --violet:#8b4bff; --violet2:#5f27c4;
  --gold:#e8c268; --hp:#e0455f; --en:#43a7e0; --xp:#a970ff; --ap:#38d39c;
  --good:#4fd18a; --bad:#e46060;
  --radius:14px; --radius-sm:10px;
  --shadow:0 14px 40px -18px rgba(0,0,0,.75);
  /* 10 Eyl 2026: yüzey derinliği için ortak sabitler — her panel/kart AYNI ışığı
     alsın diye tek yerden veriliyor (tek tek yazılınca sayfadan sayfaya kayıyordu). */
  --edge:inset 0 1px 0 rgba(255,255,255,.06);        /* üst kenar ışığı */
  --lift:0 18px 34px -24px rgba(0,0,0,.9);           /* üzerine gelince kalkma gölgesi */
  --kan-glow:rgba(212,58,84,.26);                    /* Kan klanı kenar vurgusu */
  --ay-glow:rgba(67,167,224,.24);                    /* Ay klanı kenar vurgusu */
  /* ★ 21 Eyl 2026 — CJK ve Arapça yedekleri eklendi. Cinzel'de Çince/Japonca/
     Korece/Arapça glifi YOK; yedek verilmezse başlıklar kutucuk ya da rastgele
     bir sistem yazı tipiyle çıkıyordu. system-ui zaten doğru diyarı seçer,
     Noto adları yalnız kuruluysa devreye girer — zarar vermez. */
  --font:'Inter',system-ui,Segoe UI,'Noto Sans','Noto Sans Arabic','Noto Sans SC','Noto Sans JP','Noto Sans KR','Noto Sans Devanagari','Noto Sans Bengali','Noto Sans Tamil','Noto Sans Telugu','Noto Sans Gujarati','Noto Sans Kannada','Noto Sans Malayalam','Noto Sans Gurmukhi','Noto Sans Thai','Noto Sans Hebrew','Noto Sans Khmer','Noto Sans Myanmar','Noto Sans Sinhala','Noto Sans Georgian','Noto Sans Armenian','Noto Sans Ethiopic','Noto Sans Lao','Noto Sans TC',Arial,sans-serif;
  --head:'Cinzel','Noto Serif','Noto Naskh Arabic','Noto Serif SC','Noto Serif JP','Noto Serif KR','Noto Serif Devanagari',Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box} /* B19: pseudo-elementler dahil */
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--text);min-height:100vh;
  background:
    radial-gradient(900px 500px at 82% -8%,rgba(210,58,84,.16),transparent 60%),
    radial-gradient(900px 520px at 12% 0%,rgba(122,60,255,.16),transparent 58%),
    linear-gradient(180deg,#0c0912,var(--bg));
  background-attachment:fixed;
  font-size:15px;line-height:1.6;
}
a{color:#cdb4ff;text-decoration:none;transition:color .15s}
a:hover{color:#fff}
h1,h2,h3,h4{line-height:1.2}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.big{font-size:34px;font-weight:800;letter-spacing:-.5px}
.center{text-align:center}
.win{color:var(--good);font-weight:700}
.lose{color:var(--bad);font-weight:700}

/* ---------- Üst bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:22px;
  padding:12px 22px;flex-wrap:wrap;
  background:rgba(14,10,22,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{
  font-family:var(--head);font-size:23px;font-weight:800;letter-spacing:1.5px;color:#fff;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.brand-mark{filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
/* Marka logosu (kan damlası + hilal amblemi) — her alanda tutarlı; boyutu yazıya göre ölçeklenir */
.brand-logo{height:1.25em;width:auto;border-radius:22%;vertical-align:-.26em;margin-right:.12em;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));flex:0 0 auto}
.brandbig .brand-logo{height:1.05em;vertical-align:-.18em;margin-right:.18em}
/* Yeni menü (nm2) sidebar tepesindeki logolu marka başlığı */
.nm2-brand{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  font-family:var(--head);font-weight:800;font-size:18px;letter-spacing:.5px;color:#fff;
  padding:15px 12px 13px;margin-bottom:2px;border-bottom:1px solid var(--line);
  text-shadow:0 2px 8px rgba(210,58,84,.45)}
.nm2-brand .brand-logo{height:28px}
/* Mobil marka şeridi: masaüstünde gizli (sidebar zaten logolu), mobil+yeni menüde üstte görünür */
.nm-brandbar{display:none}
@media(max-width:1023px){
  body.nm-on .nm-brandbar{display:flex;align-items:center;justify-content:center;gap:8px;
    text-decoration:none;color:#fff;font-family:var(--head);font-weight:800;font-size:18px;letter-spacing:1px;
    padding:9px 12px;border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,rgba(36,21,40,.6),transparent);text-shadow:0 2px 8px rgba(210,58,84,.45)}
  body.nm-on .nm-brandbar .brand-logo{height:26px;margin:0}
}
.mainnav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
/* ★ 11 Eyl 2026 — Çıkış artık BAĞLANTI değil, POST düğmesi.
   NEDEN: GET ile çıkış, dış bir sitedeki <img src="…/logout.php"> etiketinin
   oyuncuyu zorla çıkarmasına yetiyordu; POST, functions.php'deki genel CSRF
   kapısından geçer. Menüdeki üç çıkış öğesi artık küçük birer <form>: form
   display:contents ile düzenden çekilir (komşu bağlantılarla aynı hizada kalır),
   düğmenin tarayıcı varsayılanları sıfırlanır — görünüm birebir aynı, JS gerekmez. */
.cikis-f{display:contents}
.cikis-b{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;
  text-align:inherit;-webkit-appearance:none;appearance:none}
.side-nav .cikis-b{width:100%;text-align:left}
.nl{
  padding:8px 13px;border-radius:9px;color:var(--muted);font-weight:600;font-size:14px;
  border:1px solid transparent;transition:.15s;white-space:nowrap;
}
.nl:hover{background:var(--panel2);color:#fff}
.nl.active{background:linear-gradient(180deg,var(--violet),var(--violet2));color:#fff;box-shadow:0 6px 16px -8px var(--violet)}
.nl.premium{color:var(--gold)}
.nl.premium.active{background:linear-gradient(180deg,#e8c268,#a9852b);color:#241800}
.nl.admin{color:#ffcf6b}
.nl.out{color:var(--dim)}
.badge{background:var(--crimson);color:#fff;border-radius:20px;padding:1px 7px;font-size:11px;font-weight:700;margin-left:3px}

/* ---------- Durum çubuğu ---------- */
.statusbar{
  display:flex;align-items:center;gap:16px;padding:12px 22px;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(29,22,49,.6),rgba(21,15,34,.6));
  border-bottom:1px solid var(--line);
}
.ident{display:flex;align-items:center;gap:11px;color:var(--text)}
.ident:hover{color:#fff}
.ident-badge{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:21px;border:2px solid #120306;box-shadow:0 3px 10px rgba(0,0,0,.5)
}
.ident-badge.kan{background:radial-gradient(circle at 38% 30%,#9a2636,#3a0f18)}
.ident-badge.ay{background:radial-gradient(circle at 38% 30%,#28577a,#0e2333)}
.ident-name{display:flex;flex-direction:column;line-height:1.15}
.ident-name b{font-size:15px}
.ident-name small{color:var(--muted);font-size:12px}
/* Üst çubuk kimlik: avatar + isim + seviye + toplam XP */
.tb-id{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);flex:none;padding-right:14px;border-right:1px solid var(--line)}
.tb-id-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.tb-id-txt b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.tb-id-txt small{font-size:11px;color:var(--muted);white-space:nowrap}
.tb-lvl{color:var(--gold);font-weight:800}
.meters{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:260px}
.wallet{display:flex;gap:8px;align-items:center;margin-left:auto}

/* Durum çubukları — 10 Eyl 2026: düz tek katmanlı gradyandan derinlikli çubuğa.
   NEDEN: HUD'un en çok bakılan yeri burası, ama çubuk oyuk mu dolu mu belli olmuyordu.
   Oyuk hissi (iç gölge) + dolgu üstünde hacim + dolgunun ucunda ışık + çubuğun kendi
   rengine uyan yumuşak dış parıltı ile doluluk bir bakışta okunuyor.
   Renk her tür için --bar-tint ile veriliyor; dolgu gradyanları AYRI kalıyor ki
   ritual.php gibi satır içi gradyan basan sayfalar bozulmasın. */
.bar{position:relative;width:150px;height:24px;
  background:linear-gradient(180deg,#08050f,#0e0a17);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.8),inset 0 -1px 0 rgba(255,255,255,.05),
             0 0 11px -4px var(--bar-tint,transparent)}
.bar i{position:absolute;left:0;top:0;bottom:0;display:block;border-radius:20px 0 0 20px;
  transition:width .5s cubic-bezier(.22,.61,.36,1)}
/* Dolgu üstü hacim: tepede ışık, dipte gölge. Dolgunun KENDİ arka planına dokunmaz,
   bu yüzden satır içi gradyan verilen çubuklarda da aynen çalışır. */
.bar i::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.05) 45%,rgba(0,0,0,.26))}
/* Dolgunun ucunda ince ışık — "buraya kadar dolu" sınırını keskinleştirir */
.bar i::after{content:"";position:absolute;top:1px;bottom:1px;right:0;width:2px;
  border-radius:2px;background:rgba(255,255,255,.6)}
/* Etiketin altında yerel karartma lekesi. NEDEN: yazı hem koyu oyuğun hem parlak
   dolgunun üstünden geçiyordu; parlak dolgularda kontrast 1,58 (ap) - 2,21 (en)
   seviyesindeydi, yani WCAG AA'nın çok altında. Merkezde %50 karartma en kötü
   durumu 5,35'e çıkarıyor, koyu oyuk üstünde ise fark edilmiyor (ikisi de neredeyse siyah). */
.bar em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-style:normal;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.9);
  background:radial-gradient(58% 130% at 50% 50%,rgba(4,2,8,.5),rgba(4,2,8,0) 74%)}
.bar-en{--bar-tint:var(--en)}
.bar-xp{--bar-tint:var(--xp)}
.bar-ap{--bar-tint:var(--ap)}
/* Can çubuğunun BOŞ kısmı köz gibi kızarıyor: dolgu azaldıkça daha çoğu görünür,
   yani "tehlike" hissi doluluğa göre kendiliğinden artar — PHP'de eşik/koşul YOK. */
.bar-hp{--bar-tint:var(--hp);background:linear-gradient(180deg,#1b0a11,#0d0409);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.8),inset 0 0 13px rgba(224,69,95,.3),
             0 0 11px -4px var(--hp)}
.bar-hp i{background:linear-gradient(90deg,#7a1626,var(--hp))}
.bar-en i{background:linear-gradient(90deg,#175a80,var(--en))}
.bar-xp i{background:linear-gradient(90deg,#4a1fa0,var(--xp))}
.bar-ap i{background:linear-gradient(90deg,#186b52,var(--ap))}

.chip{background:var(--panel2);border:1px solid var(--line);padding:7px 13px;border-radius:20px;font-size:14px;font-weight:600;white-space:nowrap;
  transition:border-color .16s ease,color .16s ease,transform .16s ease}
.chip.gold{color:var(--gold);border-color:#4a3c1e}
.chip.diamond{color:#7fe3ff;border-color:#1d4a55}
.chip.premium{background:linear-gradient(180deg,#e8c268,#a9852b);color:#241800;border:0;font-weight:800}

/* ---------- İkon seti yerleşimi (ikonların kendisi: functions.php → ikon()) ----------
   11 Eyl 2026: emoji bir HARFTİ, satıra kendiliğinden otururdu; SVG bir KUTU.
   Yerine geçebilmesi için üç şey gerekiyor ve hepsi burada, ikon başına stil
   yazılmasın diye:
   1) yazıyla aynı hizada dursun (vertical-align) ve esnek kaplarda ezilmesin;
   2) çubuk etiketinde ikonla sayı arasına boşluk: emoji'de boşluk KARAKTERİ bu işi
      yapıyordu, esnek kapta iki ayrı öğe arasındaki boşluk yok sayılır — gap gerekli
      (tek metin düğümü olan eski emojili çubuklarda gap'in etkisi yoktur, bozulmaz);
   3) cüzdan rozetleri ikon+yazıyı dikeyde ortalasın. */
.ikon{vertical-align:-.16em;flex:0 0 auto}
/* ★ 12 Eyl 2026 — KADEME TONU (eşya ikonları). esya_ikon() malzeme kademesini
   (Demir→Cehennemi) ikonun rengine yazıyor. Kontur zaten currentColor; dolgular
   ise setin sabit tema renklerinde (--crimson/--violet). Yalnız konturu boyamak
   ikonu iki dilli bırakırdı: dışı kademe rengi, içi bordo. Bu tek satır dolguyu
   da currentColor'a bağlar — fill ÖZELLİĞİ, sunum ÖZNİTELİĞİNİ ezer, fill-opacity
   olduğu gibi kalır. Böylece iki tonluluk korunur (dolu gövde 16 pikselde ikonu
   ayakta tutar), ama iki ton da aynı kademenin tonudur.
   Kapsam dar: yalnız .tonlu taşıyan ikonlar, yani yalnız kademesi okunabilen
   eşyalar. Menü/rozet ikonları etkilenmez. */
.ikon.tonlu [fill]{fill:currentColor}
/* Avatar ikonu oyuncunun seçtiği RENKLİ gradyanın üstünde duruyor; gradyanın açık
   ucunda (ör. dolunayın altın sarısı) açık kontur zayıflıyor. Tek satır gölge her
   zeminde ayırıyor — ikonun rengini değiştirmeden. */
.ikon.ava-ikon{filter:drop-shadow(0 1px 2px rgba(6,4,12,.85))}
.bar em{gap:5px}
.wallet .chip{display:inline-flex;align-items:center;gap:6px}
.tb-id-txt small .ikon{vertical-align:-.22em}   /* 11px yazının içinde biraz daha aşağı */

/* ---------- Yerleşim ---------- */
.container{max-width:1040px;margin:26px auto;padding:0 20px}
.foot{text-align:center;color:var(--dim);padding:34px;font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
/* Admin kullanıcı yönetimi: HER boyutta TEK sütun — kullanıcı listesi tam genişlik
   (sağdaki boş sütun kaldırıldı, "elmas alımları" alta iner). İç yatay kaydırma yok. */
.adm-ug{grid-template-columns:1fr}

/* 10 Eyl 2026: panel yüzeyi düz duruyordu — gölge vardı ama kenarında ışık yoktu,
   bu yüzden zeminden "kesilmiş" değil "yapıştırılmış" görünüyordu. --edge ile üst
   kenara ince ışık geldi; ::before hairline'ı .09'dan .14'e çıkarıldı ki panelin
   tepesi gerçekten aydınlansın. Metin renkleri ve zemin AYNEN duruyor. */
.panel{
  position:relative;
  /* 10 Eyl 2026 — DOKU: panel yüzeyi tamamen düz boyaydı. Kenar menüde zaten
     kullanılan tarama deseninin çok kısık hali (.012) eklendi; aynı görsel dil,
     yeni bir dil değil. Metin kontrastı ölçüldü: 15,43 -> 15,04, AA'nın çok üstü. */
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.012) 0 2px,transparent 2px 4px),
    linear-gradient(180deg,var(--panel),#120d1e);
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:18px;
  box-shadow:var(--shadow),var(--edge);
}
.panel::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
.panel h2{margin:0 0 14px;font-size:21px;font-family:var(--head);font-weight:700;letter-spacing:.5px}
.panel h3{margin:0 0 12px;font-size:16px;font-weight:600;color:#d9d1ee}
.hero-panel{background:
  radial-gradient(600px 200px at 90% -40%,rgba(210,58,84,.22),transparent 60%),
  linear-gradient(135deg,rgba(139,75,255,.16),rgba(140,30,48,.12)),var(--panel);
  border-color:#3a2f56}

.stat-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.stat-row:last-child{border-bottom:0}
.stat-row b{font-size:16px}

/* ---------- Butonlar ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(180deg,var(--violet),var(--violet2));color:#fff;border:0;border-radius:11px;
  padding:11px 19px;font-size:15px;font-weight:700;font-family:var(--font);cursor:pointer;
  box-shadow:0 8px 20px -10px var(--violet),var(--edge);text-decoration:none;
  /* 10 Eyl 2026: "transition:.15s" (hepsi) yerine yalnız gerekenler — düşük
     donanımlı telefonda her özellik için animasyon kurulmasın. */
  transition:transform .12s ease,box-shadow .18s ease,filter .18s ease;
}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px);color:#fff}
.btn.red{background:linear-gradient(180deg,var(--crimson),var(--crimson2));box-shadow:0 8px 20px -10px var(--crimson)}
.btn.gold{background:linear-gradient(180deg,#eccb78,#b0872f);color:#241800;box-shadow:0 8px 20px -10px #b0872f}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:#d7c6ff;box-shadow:none}
.btn.ghost:hover{background:var(--panel2)}
.btn.sm{padding:7px 13px;font-size:13px;border-radius:9px}
.btn.xl{padding:15px 30px;font-size:17px;border-radius:13px}
/* Basma geri bildirimi — buton içeri gömülür. NEDEN: dokunmatikte :hover yok,
   basıldığını gösteren tek kural translateY(0)'a dönmekti, yani hiçbir şey.
   Variant'lardan SONRA duruyor: .btn.ghost/.red/.gold kendi box-shadow'unu
   veriyor ve aynı ağırlıkta olduğu için önce yazılsa bu kuralı ezerdi. */
.btn:active{transform:translateY(1px) scale(.985);filter:brightness(.94);
  box-shadow:0 2px 6px -4px rgba(0,0,0,.9),inset 0 2px 5px rgba(0,0,0,.28)}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none;transform:none;box-shadow:none}

/* ---------- Formlar ---------- */
.field{margin-bottom:15px}
.field label{display:block;margin-bottom:7px;color:var(--muted);font-size:13px;font-weight:600}
.field input,input[type=number],input[type=text],input[type=password],input[type=email]{
  width:100%;padding:12px;background:#0b0812;border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:15px;font-family:var(--font);transition:.15s
}
.field input:focus,input:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,75,255,.22)}
.radio-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.radio-cards label{cursor:pointer;display:block;padding:16px;border:2px solid var(--line);border-radius:12px;background:var(--panel2);text-align:center;transition:.15s}
.radio-cards label:hover{border-color:var(--line2)}
.radio-cards input{display:none}
.radio-cards input:checked + .rc{outline:2px solid var(--violet);border-radius:9px}
.rc{display:block;padding:6px;border-radius:9px}
.rc b{font-size:17px}
.rc small{color:var(--muted)}

/* ---------- Tablolar ---------- */
table{width:100%;border-collapse:collapse}
th,td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
tbody tr:hover td,table tr:hover td{background:rgba(139,75,255,.07)}
.tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}
.tag.kan{background:#3a1420;color:#ff9db0}
.tag.ay{background:#12233a;color:#8ec9ff}

/* ---------- Savaş kaydı ---------- */
.combatlog{background:#0b0812;border:1px solid var(--line);border-radius:11px;padding:15px;max-height:340px;overflow:auto;font-size:14px;line-height:1.75}
.combatlog div{padding:3px 0;border-bottom:1px dashed #221a33}
.combatlog div:last-child{border-bottom:0}

.flash{background:linear-gradient(180deg,rgba(139,75,255,.15),rgba(139,75,255,.05));border:1px solid var(--violet);color:#eaddff;padding:13px 16px;border-radius:11px;margin-bottom:18px}

/* ---------- Giriş / auth ---------- */
.auth{max-width:440px;margin:56px auto}
.brandbig{text-align:center;font-family:var(--head);font-size:42px;font-weight:900;letter-spacing:5px;margin-bottom:6px;
  background:linear-gradient(90deg,#ff7d92,#d0b0ff,#7fe3ff,#ff7d92);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:shine 6s linear infinite}
/* Sidebar/menü markaları — büyük harf tonunu ferahlat */
.side-brand,.nm2-brand,.nm-brandbar{letter-spacing:2px}
/* LOGO: BÜYÜK harf + rengarenk gradient (kullanıcı isteği, kalıcı). Bar arka planı olan
   öğelerde (side-brand/nm-brandbar) efekt İÇ metne uygulanır ki bar bozulmasın. */
.brand,.nm2-brand span,.nm-brandbar span,.side-brand .btxt{
  text-transform:uppercase;
  background:linear-gradient(90deg,#ff7d92,#d0b0ff,#7fe3ff,#ff7d92);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:shine 6s linear infinite}
.tagline{text-align:center;color:var(--muted);margin-bottom:26px}

/* ============ LANDING ============ */
@keyframes floatGlow{0%,100%{transform:translate(-50%,0);opacity:.5}50%{transform:translate(-50%,-26px);opacity:.85}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes shine{to{background-position:200% center}}
/* 10 Eyl 2026 — SİS: gece teması dokusuz duruyordu. Hero'nun arkasında çok yavaş
   süzülen iki renk lekesi. filter:blur YOK (mevcut .aura'da zaten bir tane var,
   ikincisi düşük donanımlı telefonu yorardı); yalnız transform + opacity —
   bileşik katmanda döner, düzen hesabı tetiklemez. */
@keyframes sisSuzul{
  0%,100%{transform:translate3d(-2.5%,0,0) scale(1);opacity:.45}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.07);opacity:.75}
}
.landing{position:relative;overflow:hidden;min-height:100vh}
.landing .aura{position:absolute;top:-160px;left:50%;width:920px;height:920px;border-radius:50%;
  background:radial-gradient(circle,rgba(210,58,84,.32),rgba(122,60,255,.16) 42%,transparent 70%);
  filter:blur(34px);animation:floatGlow 9s ease-in-out infinite;z-index:0;pointer-events:none}
.landing-nav{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:20px 30px;max-width:1120px;margin:0 auto}
.landing-nav .brand{font-size:24px}
.landing-nav .actions{display:flex;gap:10px}
.hero{position:relative;z-index:2;text-align:center;padding:66px 20px 40px;max-width:900px;margin:0 auto;animation:fadeUp .8s ease both}
/* z-index:-1 — .hero'nun kendi yığın bağlamı (z-index:2) içinde kalır, yani
   metnin ARKASINA girer, .aura'nın önüne. Metnin üstüne binmediği için
   başlık/paragraf kontrastı hiç değişmiyor. */
.hero::before{content:"";position:absolute;z-index:-1;inset:-10% -12%;pointer-events:none;
  background:
    radial-gradient(38% 56% at 24% 42%,rgba(168,146,226,.11),transparent 70%),
    radial-gradient(44% 50% at 78% 30%,rgba(212,58,84,.10),transparent 72%);
  animation:sisSuzul 26s ease-in-out infinite}
.eyebrow{display:inline-block;padding:7px 16px;border:1px solid var(--line);border-radius:30px;color:var(--muted);font-size:12px;letter-spacing:2px;text-transform:uppercase;background:rgba(255,255,255,.03)}
.hero h1{font-family:var(--head);font-size:clamp(46px,9vw,88px);font-weight:900;letter-spacing:2px;margin:22px 0 12px;line-height:1;
  background:linear-gradient(90deg,#ff7d92,#d0b0ff,#7fe3ff,#ff7d92);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 6s linear infinite}
.hero p.lead{font-size:19px;color:#cec4e8;max-width:620px;margin:0 auto 30px}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.factions{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:820px;margin:50px auto;padding:0 20px}
/* 10 Eyl 2026: klan kartlarının kimliği yalnız kenarlık renginde duruyordu, kart
   içi ikisinde de aynıydı. Klan parıltısı arka plan katmanı olarak eklendi
   (pseudo-element DEĞİL: konumlanmış katman metnin üstüne biner, rengini bozardı).
   Parıltı kartın ÜST kenarında yoğun, metnin geçtiği alt yarıda sıfıra iniyor —
   .muted açıklama satırının kontrastı ölçüldü, değişmiyor. */
.fcard{position:relative;padding:30px;border-radius:18px;border:1px solid var(--line);text-align:center;overflow:hidden;
  background:radial-gradient(115% 78% at 50% -6%,var(--fac-glow,transparent),transparent 70%),
             linear-gradient(160deg,rgba(31,24,49,.75),rgba(18,13,30,.75));
  box-shadow:var(--edge),var(--lift);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  animation:fadeUp .9s ease both}
.fcard:hover{transform:translateY(-6px)}
.fcard .emoji{font-size:64px;filter:drop-shadow(0 6px 20px rgba(0,0,0,.6))}
.fcard h3{font-family:var(--head);font-size:24px;margin:12px 0 6px}
.fcard.kan{--fac-glow:var(--kan-glow);border-color:#5a1f2c;
  box-shadow:var(--edge),0 0 0 1px rgba(212,58,84,.14),var(--lift)}
.fcard.kan:hover{border-color:#8e3245;box-shadow:var(--edge),0 0 0 1px rgba(212,58,84,.4),0 24px 50px -14px rgba(216,50,74,.5)}
.fcard.ay{--fac-glow:var(--ay-glow);border-color:#1f3550;
  box-shadow:var(--edge),0 0 0 1px rgba(67,167,224,.14),var(--lift)}
.fcard.ay:hover{border-color:#356f9e;box-shadow:var(--edge),0 0 0 1px rgba(67,167,224,.4),0 24px 50px -14px rgba(58,160,216,.5)}
.features{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;max-width:1000px;margin:20px auto 40px;padding:0 20px}
.feat{padding:22px;border-radius:14px;border:1px solid var(--line);background:rgba(23,17,34,.65);
  box-shadow:var(--edge),0 10px 24px -22px rgba(0,0,0,.95);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  animation:fadeUp 1s ease both}
.feat:hover{border-color:var(--violet);transform:translateY(-4px);
  box-shadow:var(--edge),0 20px 36px -22px rgba(139,75,255,.5)}
.feat .fi{font-size:32px;margin-bottom:8px}
/* Tipografi hiyerarşisi: klan kartı başlığı (.fcard h3) Cinzel'di, özellik kartı
   başlığı gövde fontundaydı — aynı ekranda iki farklı başlık dili oluyordu.
   İkisi de artık --head; boyut farkı hiyerarşiyi zaten taşıyor. */
.feat h4{margin:0 0 6px;font-family:var(--head);font-size:17px;font-weight:700;letter-spacing:.3px}
.feat p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.landing-stats{position:relative;z-index:2;display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin:10px auto 60px;padding:26px;max-width:720px;
  border-radius:16px;border:1px solid var(--line);background:rgba(23,17,34,.55);
  box-shadow:var(--edge),var(--lift)}
.landing-stats .s{text-align:center}
.landing-stats .s b{display:block;font-family:var(--head);font-size:34px;font-weight:800;color:#fff}
.landing-stats .s span{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:1px}

/* ---------- İç sayfa yardımcıları ---------- */
.pack{transition:.2s}.pack:hover{transform:translateY(-4px);border-color:var(--violet)}
.welcome{position:relative;overflow:hidden;
  background:radial-gradient(500px 200px at 92% -30%,rgba(210,58,84,.3),transparent 60%),linear-gradient(120deg,rgba(140,30,48,.28),rgba(122,60,255,.22));
  border:1px solid #3a2f56;border-radius:16px;padding:26px 28px;margin-bottom:18px;box-shadow:var(--shadow),var(--edge)}
.welcome h2{margin:0 0 6px;font-size:27px;font-family:var(--head);font-weight:700;position:relative}
.welcome p{margin:0;color:#e0d7f4;position:relative}

/* ---------- Sıralama sekmeleri ---------- */
.rank-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:12px}
.rtab{padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);font-weight:700;font-size:14px;transition:.15s}
.rtab:hover{color:#fff;border-color:var(--violet)}
.rtab.active{background:linear-gradient(180deg,var(--violet),var(--violet2));color:#fff;border-color:transparent}

/* ---------- Sıralama tablosu (tema uyumlu) ---------- */
.bf-rank{border:1px solid var(--line);border-radius:12px;overflow-x:auto;background:linear-gradient(180deg,var(--panel),#120d1e);
  box-shadow:var(--edge),0 10px 26px -22px rgba(0,0,0,.95)}
.bf-rank table{width:100%;border-collapse:collapse;min-width:560px}
.bf-rank th{background:linear-gradient(180deg,var(--panel3),#1a1430);color:#cbc1e8;font-size:11px;text-transform:uppercase;letter-spacing:.6px;padding:12px;text-align:left;border-bottom:1px solid var(--line2);position:sticky;top:0}
.bf-rank th.num,.bf-rank td.num{text-align:right;font-variant-numeric:tabular-nums}
.bf-rank th.act{color:#241800;background:linear-gradient(180deg,#eccb78,#b0872f)}
/* Tıklanır sıralama başlıkları — tüm hücre link, aktif olan altın vurgulu */
.bf-rank th.sortable{padding:0}
.bf-rank th.sortable a{display:block;padding:12px;color:inherit;text-decoration:none;white-space:nowrap;transition:.12s}
.bf-rank th.sortable a:hover{color:#fff;text-decoration:underline}
.bf-rank th.act.sortable a:hover{color:#241800}
.sort-caret{font-size:9px;vertical-align:1px}
.bf-rank td{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--text)}
.bf-rank tr:nth-child(even) td{background:rgba(139,75,255,.05)}
.bf-rank tr:hover td{background:rgba(139,75,255,.14)}
.bf-rank tr.rank-me td{background:rgba(139,75,255,.20);box-shadow:inset 3px 0 0 var(--violet)}
.bf-rank td.rank-no{font-weight:800;color:var(--muted);text-align:center;width:54px}
.race-badge{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;font-size:17px;border:2px solid #120306;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.race-badge.kan{background:radial-gradient(circle at 40% 30%,#9a2636,#3a0f18)}
.race-badge.ay{background:radial-gradient(circle at 40% 30%,#28577a,#0e2333)}
.bf-name{font-weight:800;color:#fff;letter-spacing:.3px}
.bf-tag{color:#b9a6e0;font-weight:700;font-size:12px;margin-right:2px}
.bf-rank td.metric-strong{color:var(--gold);font-weight:800}

/* ---------- Admin paneli ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
.kpi{background:linear-gradient(180deg,var(--panel2),#150f24);border:1px solid var(--line);border-radius:12px;padding:15px 16px;position:relative;overflow:hidden;
  box-shadow:var(--edge),0 8px 20px -18px rgba(0,0,0,.95)}
.kpi .l{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.kpi .v{font-size:25px;font-weight:800;margin-top:4px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.kpi .ic{position:absolute;right:12px;top:13px;font-size:19px;opacity:.45}
.kpi.gold .v{color:var(--gold)} .kpi.dia .v{color:#7fe3ff} .kpi.good .v{color:var(--good)} .kpi.bad .v{color:var(--bad)} .kpi.violet .v{color:#c9b3ff}

.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:700;border:1px solid transparent;white-space:nowrap}
.pill.ok{background:rgba(79,209,138,.14);color:#7fe6b0;border-color:rgba(79,209,138,.3)}
.pill.warn{background:rgba(232,194,104,.14);color:#f0d493;border-color:rgba(232,194,104,.3)}
.pill.bad{background:rgba(228,96,96,.14);color:#f0a0a0;border-color:rgba(228,96,96,.3)}

.adm-user{display:flex;align-items:center;gap:10px}
.adm-user .nm{display:flex;flex-direction:column;line-height:1.25}
.adm-user .nm b{font-size:14px}
.adm-user .nm small{color:var(--dim);font-size:11px}
.avatar-xs{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;border:2px solid #120306;flex:0 0 auto}
.avatar-xs.kan{background:radial-gradient(circle at 40% 30%,#9a2636,#3a0f18)}
.avatar-xs.ay{background:radial-gradient(circle at 40% 30%,#28577a,#0e2333)}
.adm-actions{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.adm-actions form{margin:0}
.mini{width:72px;padding:6px 8px;background:#0b0812;border:1px solid var(--line);border-radius:7px;color:var(--text);font-size:13px}
.mini-sel{padding:6px 8px;background:#0b0812;border:1px solid var(--line);border-radius:7px;color:var(--text);font-size:13px}
.role-tag{padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}
.role-tag.admin{background:rgba(212,58,84,.18);color:#ff9db0}
.role-tag.moderator{background:rgba(67,167,224,.16);color:#8ec9ff}
.role-tag.player{background:var(--panel3);color:var(--muted)}
.pager{display:flex;gap:6px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.pager a,.pager span{padding:7px 12px;border-radius:8px;border:1px solid var(--line);color:var(--muted);font-weight:700;font-size:14px}
.pager a:hover{border-color:var(--violet);color:#fff}
.pager .cur{background:linear-gradient(180deg,var(--violet),var(--violet2));color:#fff;border-color:transparent}
.adm-feed{display:flex;flex-direction:column;gap:8px}
.adm-feed .row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.adm-feed .row:last-child{border-bottom:0}

/* ==================== v13: SOL MENÜ + OYUN TEMASI ==================== */
body{background:
  /* 10 Eyl 2026 — VİNYET: sayfanın sağ/sol kenarı koyulaşır, göz orta sütuna toplanır.
     Kaplama (overlay) DEĞİL, arka plan katmanı. NEDEN: kaplama hem metni hem zemini
     birlikte karartıyor ve kontrastı düşürüyor — ölçüldü, %20 opaklıkta bile
     .muted/panel 6,28'den 4,33'e iniyordu (AA altı). Arka plan katmanı ise
     panellerin ARKASINDA kaldığı için hiçbir metnin kontrastına dokunmuyor. */
  linear-gradient(90deg,rgba(2,1,6,.55),rgba(2,1,6,0) 20%,rgba(2,1,6,0) 80%,rgba(2,1,6,.55)),
  radial-gradient(900px 500px at 82% -8%,rgba(210,58,84,.12),transparent 60%),
  radial-gradient(900px 520px at 12% 0%,rgba(122,60,255,.12),transparent 58%),
  linear-gradient(180deg,#0a0710,#070509);
}
.layout{display:flex;min-height:100vh;align-items:stretch}

/* --- Sol menü --- */
.sidebar{
  flex:0 0 258px;width:258px;position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;
  background:
    linear-gradient(180deg,#171019,#0d0910 60%,#0b0810),
    repeating-linear-gradient(180deg,rgba(255,255,255,.014) 0 2px,transparent 2px 4px);
  border-right:1px solid #000;box-shadow:inset -1px 0 0 #33283f, 6px 0 24px -10px #000;
  z-index:40;scrollbar-width:thin;
}
.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-thumb{background:#2a2136;border-radius:8px}
.side-brand{
  display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  font-family:var(--head);font-weight:800;font-size:19px;letter-spacing:1px;color:#fff;
  padding:18px 12px;border-bottom:1px solid #241a30;
  background:linear-gradient(180deg,#241528,#160e1d);text-shadow:0 2px 8px rgba(210,58,84,.5)
}
.side-me{display:flex;align-items:center;gap:10px;padding:12px 14px;text-decoration:none;color:var(--text);border-bottom:1px solid #241a30;background:rgba(139,75,255,.05)}
.side-me:hover{background:rgba(139,75,255,.1)}
.side-me-nm{display:flex;flex-direction:column;line-height:1.2}
.side-me-nm b{font-size:14px}.side-me-nm small{color:var(--muted);font-size:12px}

.side-nav{padding:8px 8px 30px}
.nav-group{margin:4px 0 12px}
.nav-group-title{
  font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:#7d5aa8;padding:10px 10px 6px;margin-top:6px;position:relative
}
.nav-group-title::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:1px;
  background:linear-gradient(90deg,rgba(139,75,255,.5),transparent)}

.side-nav .nl{
  display:flex;align-items:center;gap:11px;padding:10px 12px;margin:3px 0;border-radius:9px;
  color:#c3b8d8;font-weight:600;font-size:14px;text-decoration:none;position:relative;
  border:1px solid transparent;transition:.14s;
  background:linear-gradient(180deg,#1b1424,#150f1d);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)
}
.side-nav .nl i{font-size:18px;color:#8a7ba8;width:20px;text-align:center;flex:0 0 auto;transition:.14s}
.side-nav .nl span{flex:1}
.side-nav .nl:hover{color:#fff;border-color:#3a2f52;background:linear-gradient(180deg,#241934,#1a1226);transform:translateX(2px)}
.side-nav .nl:hover i{color:#c9a3ff}
.side-nav .nl.active{
  color:#fff;border-color:#7a3cff;
  background:linear-gradient(180deg,#3a1f5e,#241238);
  box-shadow:0 0 0 1px rgba(122,60,255,.3),inset 3px 0 0 var(--crimson),0 6px 16px -8px rgba(122,60,255,.6)
}
.side-nav .nl.active i{color:#ff8fa3}
.side-nav .nl.out{color:#8a7f9c}.side-nav .nl.out:hover{color:#ff9db0;border-color:#5a1f2c}
.side-nav .nl .badge{margin-left:auto;background:var(--crimson);color:#fff;border-radius:20px;padding:1px 7px;font-size:11px;font-weight:700;font-style:normal}

/* --- Ana alan --- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:11px 22px;background:rgba(14,10,22,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)
}
.meters{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:240px}
.wallet{display:flex;gap:8px;align-items:center;margin-left:auto}
.chip.try{color:#8ef0b0;text-decoration:none;border-color:#1d4a35}
.container{max-width:1120px;margin:0 auto;padding:24px;width:100%}
.foot{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;text-align:center;color:var(--dim);padding:20px 24px;font-size:13px;border-top:1px solid var(--line);margin-top:auto}
.foot-links a{color:var(--muted)}.foot-links a:hover{color:#fff}

/* --- Mobil hamburger --- */
.side-toggle{display:none;position:fixed;top:12px;left:12px;z-index:60;width:44px;height:44px;border-radius:10px;
  border:1px solid var(--line2);background:rgba(20,14,26,.95);color:#fff;font-size:22px;cursor:pointer;align-items:center;justify-content:center}

@media(max-width:860px){
  .side-toggle{display:flex}
  .sidebar{position:fixed;left:-280px;top:0;height:100vh;transition:left .25s ease;box-shadow:10px 0 40px -6px #000}
  .sidebar.open{left:0}
  .topbar{padding-left:64px}
  .container{padding:18px 14px}
}
/* Admin işlem alanı (modern, etiketli) */
.btn.xs{padding:5px 10px;font-size:12px;border-radius:7px;box-shadow:none;font-weight:700}
.btn.good-btn{background:linear-gradient(180deg,#2e9b78,#176b52);color:#fff}
.btn.dia-btn{background:linear-gradient(180deg,#2f86a8,#155b73);color:#fff}
.adm-ops{display:flex;flex-direction:column;gap:8px;min-width:320px}
.adm-ops .op{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-bottom:7px;border-bottom:1px dashed #241b33}
.adm-ops .op:last-child{border-bottom:0;padding-bottom:0}
.adm-ops .op-l{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;font-weight:800;width:60px;flex:0 0 60px;text-align:right;padding-right:2px}
.adm-ops .opf{display:flex;gap:4px;align-items:center;margin:0;flex-wrap:wrap}
.adm-ops form{margin:0}

/* Çatı firma imzası (footer + landing) — oyunun üreticisi Zegroni */
.zegroni-imza{display:block;width:100%;text-align:center;margin-top:6px;
  font-size:12px;letter-spacing:.4px;color:var(--dim,#8b81a8)}
.zegroni-imza a{text-decoration:none;transition:filter .15s}
.zegroni-imza a:hover{filter:brightness(1.35)}
.zegroni-imza b{color:#c9a227;font-weight:800;letter-spacing:1px}

/* Rehber sayfaları arası gezinme şeridi (herkese açık içerik sayfaları) */
.rehber-nav{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px}
.rehber-nav .rn-item{display:inline-block;padding:7px 12px;border-radius:999px;
  border:1px solid var(--line);background:#0b0812;color:#c7bde0;
  font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.rehber-nav a.rn-item:hover{border-color:#7a3fe0;color:#fff}
.rehber-nav .rn-item.aktif{background:linear-gradient(180deg,#7a3fe0,#3a1a66);
  border-color:#7a3fe0;color:#fff}
@media(max-width:640px){.rehber-nav{gap:6px;padding:10px}.rehber-nav .rn-item{font-size:12px;padding:6px 10px}}

/* Premium avantaj listesi */
.perks{list-style:none;padding:0;margin:0 0 14px}
.perks li{padding:8px 0;border-bottom:1px solid var(--line);color:#d9d1ee;font-size:14px}
.perks li:last-child{border-bottom:0}

/* Yasal metin sayfaları */
.legal h3{margin:18px 0 8px;font-size:16px;color:#e6ddf5;font-family:var(--head)}
.legal h3:first-child{margin-top:0}
.legal p{color:#c7bde0;margin:0 0 10px;line-height:1.7}
.legal ul{margin:0 0 12px;padding-left:20px;color:#c7bde0;line-height:1.7}
.legal li{margin:4px 0}

@media(max-width:640px){
  .meters{min-width:100%;order:3}
  .wallet{margin-left:0}
  .big{font-size:28px}
}

/* ================= MOBİL & PWA ================= */
/* Yatay kaydırmayı KÖKTEN engelle: html+body clip, hiçbir eleman ekranı aşamaz */
html{-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip;max-width:100%}
body{overflow-x:hidden;overflow-x:clip;max-width:100%;-webkit-tap-highlight-color:transparent}
img,svg,video,canvas{max-width:100%;height:auto}
/* B19: flex/grid çocukları içerikleriyle taşmasın (min-width:auto tuzağı) */
.grid>*,.kpi-grid>*{min-width:0}
/* Landing aura'yı ortala ve ekranı aşmasını engelle (mobilde yatay scroll yapıyordu) */
.landing .aura{transform:translateX(-50%);max-width:100vw}

/* iOS çentik / güvenli alan */
.layout{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.foot{padding-bottom:calc(34px + env(safe-area-inset-bottom))}

/* Mobil menü arka planı */
.side-backdrop{position:fixed;inset:0;background:rgba(4,2,8,.62);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .25s;z-index:55}
.side-backdrop.show{opacity:1;pointer-events:auto}

/* Uygulamayı yükle butonu (PWA) */
.pwa-install{display:none;position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom));z-index:950;border:0;cursor:pointer;
  background:linear-gradient(180deg,#7a3fe0,#3a1a66);color:#fff;border-radius:999px;
  padding:12px 22px;font-weight:700;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.55)}
.pwa-install.show{display:block}

@media(max-width:860px){
  .side-toggle{display:flex;z-index:70;top:calc(12px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left))}
  .sidebar{z-index:65;width:270px;max-width:82vw;padding-top:calc(14px + env(safe-area-inset-top))}
  .topbar{padding-left:66px;padding-top:calc(10px + env(safe-area-inset-top))}
  .container{padding:16px 12px}
  /* dokunma hedefleri en az 44px */
  .btn{min-height:44px}
  .btn.sm{min-height:40px}
  .btn.xs{min-height:32px}
  .nl{padding-top:12px;padding-bottom:12px}
  /* gap ŞART: mobilde .rtab bir flex kutusu; ikon ve yazı ayrı birer öğe olunca
     aradaki boşluk satır başında yutuluyor ve simge yazıya yapışıyordu.
     (.btn ve .pill'de bu boşluk zaten var.) */
  .rtab{min-height:40px;display:inline-flex;align-items:center;gap:6px}
  /* iOS: odaklanınca sayfa zoom yapmasın */
  input,select,textarea{font-size:16px}
}

/* Admin Kullanıcı Yönetimi — KART GÖRÜNÜMÜ ARTIK KOŞULSUZ (26 Tem 2026, ölçümle).
   Eski kural ≤1160px'te karta geçiyordu, üstünde klasik tablo gösteriyordu. Ama
   `.container{max-width:1120px}` yüzünden içerik alanı EKRAN NE KADAR GENİŞ OLURSA
   OLSUN 1120px'de sabit → tablo kapsayıcısı hep 1026px. Klasik tablo ise 1069-1092px
   (İşlemler sütunu min-width:320px + Ad satırı 110+150+buton). Yani tablo HİÇBİR
   ekranda sığmıyordu: 1920px'te bile 43px, 1441px'te 66px taşıyordu (gerçek admin.php
   üzerinde ölçüldü). .adm-uwrap'ta masaüstü overflow kuralı olmadığı için taşan kısmı
   html/body{overflow-x:clip} kesiyordu → İşlemler sütununun sağına kaydırarak bile
   ulaşılamıyordu (kullanıcının 1441px ekranda bildirdiği hata).
   Çözüm: eşiği yükseltmek yetmez, tablo modu tamamen kaldırıldı. Kart her genişlikte
   çalışır, iç yatay kaydırma (kaymalı menü) YOK — kullanıcı talimatına da uygun. */
.adm-ops{min-width:0}
.adm-ops .op-l{width:56px;flex:0 0 56px;text-align:right}
.adm-uwrap{overflow:visible}
.adm-utable thead{display:none}
.adm-utable, .adm-utable tbody{display:block;width:100%}
.adm-utable td{display:block;border:0;min-width:0;white-space:normal!important;overflow-wrap:anywhere}

/* Kart = İKİ SÜTUN: solda kimlik + bilgiler, sağda işlemler (eski tablo hissi,
   ama taşmadan). Tek sütuna yığılınca kart ekran boyu uzuyordu. */
.adm-utable tr{display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr);
  column-gap:24px;row-gap:0;align-items:start;grid-auto-rows:min-content;
  border:1px solid var(--line);border-radius:12px;margin-bottom:10px;
  padding:9px 14px;background:var(--panel2)}
/* 1. hücre (kullanıcı) tam genişlik başlık */
.adm-utable td:first-child{grid-column:1/-1;padding:0 0 6px;margin-bottom:6px;
  border-bottom:1px solid var(--line)}
/* Bilgi hücreleri sol sütunda alt alta, etiket solda sabit sütunda */
.adm-utable td:not(:first-child):not(:last-child){grid-column:1;position:relative;
  padding:1px 0 1px 74px;min-height:18px}
.adm-utable td:not(:first-child):not(:last-child)[data-l]::before{content:attr(data-l);
  position:absolute;left:0;top:3px;width:66px;text-align:right;
  font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--dim)}
/* İşlemler sağ sütunda, bilgi satırlarının hizasında.
   ⚠️ span DEĞERİ = soldaki bilgi hücresi sayısı (şu an 5: Giriş/Son aktif/Rol/Durum/Kaynak).
   Fazla span verme — grid boş örtük satırlar yaratıp kartın altında ölü boşluk bırakır
   (span 20 iken 15 boş satır × 6,14px ≈ 92px boşluk oluşuyordu). */
.adm-utable td:last-child{grid-column:2;grid-row:2/span 5;padding:0;align-self:start}
.adm-utable td:last-child[data-l]::before{content:attr(data-l);display:block;
  font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--dim);margin-bottom:4px}
.adm-utable .adm-ops{min-width:0;width:100%;gap:4px}
.adm-utable .adm-ops .op{padding-bottom:4px}
.adm-utable .adm-ops .opf .mini{min-width:60px}
/* İşlemler satırlarını alçalt (dokunma hedefi mobilde ayrıca korunuyor) */
.adm-utable .adm-ops .btn.xs{padding:4px 9px}
.adm-utable .adm-ops .mini,.adm-utable .adm-ops .mini-sel{padding:4px 7px}

/* Dar ekran: tek sütuna dön (iki sütun sığmaz) */
@media(max-width:900px){
  .adm-utable tr{grid-template-columns:1fr}
  .adm-utable td:not(:first-child):not(:last-child),
  .adm-utable td:last-child{grid-column:1;grid-row:auto}
  .adm-utable td:last-child{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
  .adm-ops .op-l{width:auto;flex:0 0 auto;text-align:left}
}

@media(max-width:640px){
  .grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .meters{min-width:100%;order:3}
  .bar{width:auto;flex:1 1 46%;min-width:140px}
  .wallet{margin-left:0;flex-wrap:wrap}
  .big{font-size:28px}
  .panel{padding:14px}
  .panel h2{font-size:18px}
  .auth{margin:24px auto}
  /* Geniş tablolar panelin içinde yatay kaydırılsın (kırpılmasın).
     table'a display:block VERME — mevcut min-width kurallarıyla çakışıp sütunları gizler. */
  .panel{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{width:100%}
  .rank-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .rank-tabs .rtab{flex:0 0 auto}
  /* Açılış sayfası */
  .landing-nav{flex-wrap:wrap;gap:10px;padding:16px;justify-content:center;text-align:center}
  .landing-nav .brand{font-size:20px}
  .hero{padding:40px 16px 30px}
  .hero h1{font-size:clamp(38px,13vw,64px);letter-spacing:1px}
  .hero p.lead{font-size:16px}
  .hero .cta{flex-direction:column}
  .hero .cta .btn{width:100%}
  .factions{grid-template-columns:1fr;margin:30px auto;padding:0 16px}
  .features{grid-template-columns:1fr;padding:0 16px}
  .feat h4{word-break:break-word}
  .landing-stats{gap:18px;padding:20px}
  .landing-stats .s b{font-size:26px}
  /* Destek balonu + maden kilidi */
  .sup-w{bottom:calc(12px + env(safe-area-inset-bottom))}
  .sup-panel{width:min(300px,calc(100vw - 28px))}
  .mine-lock-card{padding:22px 16px}
  .mine-lock-timer{font-size:36px}
  .mine-lock-actions{flex-direction:column}
  .mine-lock-actions .btn,.mine-lock-actions form{width:100%}
}

/* Uygulama (standalone) modunda */
@media all and (display-mode:standalone){
  .foot .foot-links{opacity:.8}
}

/* ================= B41: YENİ MENÜ (flag_yeni_menu) =================
   Masaüstü: 250px akordeon kenar menüsü. Mobil (<1024px): kenar menü YOK,
   5 sekmeli sabit alt bar + Savaş ızgarası + tam ekran Menü çekmecesi. */
.sidebar.nm{width:250px;padding-top:16px}
.nm-gt{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;cursor:pointer;
  color:var(--dim);font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 12px;border-radius:8px;min-height:38px}
.nm-gt:hover{color:var(--muted);background:rgba(255,255,255,.03)}
.nm-gt i{transition:transform .2s;font-size:14px}
.nm-g .nm-gi{display:none}
.nm-g.open .nm-gi{display:block}
.nm-g.open .nm-gt i{transform:rotate(180deg)}
.nm-g .nl{font-size:14px}
.nm-strip{display:flex;gap:8px;align-items:center;margin-top:14px;padding:12px;border-top:1px solid var(--line)}
.nm-strip a,.nm-strip .cikis-b{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;
  border:1px solid var(--line);color:var(--muted);font-size:17px}
.nm-strip a:hover,.nm-strip .cikis-b:hover{color:#fff;border-color:var(--line2)}
.nm-lang{flex:1;min-width:0;padding:8px;background:#0b0812;border:1px solid var(--line);border-radius:8px;color:var(--text);font-family:inherit;font-size:13px}
/* ===== DİL SEÇİCİ (★ 11 Eyl 2026: GET bağlantısı → POST formu) =====
   Form, eskiden <select>'in durduğu yere aynı ölçülerle oturur. .dil-git
   düğmesi JS KAPALIYKEN tek çalışan yol; JS varsa footer.php forma .dil-jsvar
   sınıfını ekleyip düğmeyi gizler ve seçim değişince formu kendisi gönderir. */
.dil-f{display:flex;align-items:center;gap:6px;min-width:0;margin:0}
.nm-strip .dil-f,.nm-up-strip .dil-f{flex:1}
.dil-git{flex:0 0 auto;min-width:38px;min-height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:9px;background:#0b0812;color:var(--muted);
  font:inherit;font-size:15px;cursor:pointer}
.dil-git:hover{color:#fff;border-color:var(--line2)}
.dil-f.dil-jsvar .dil-git{display:none}
@media(max-width:1023px){ .dil-git{min-width:44px;min-height:44px} }
/* index.php alt şeridi: düğmeler bağlantı gibi görünür (JS yok, footer.php yok) */
.dil-satir{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px;margin:0}
.dil-satir button{background:none;border:0;padding:6px 4px;min-height:44px;cursor:pointer;
  color:inherit;font:inherit;text-decoration:underline}
.dil-satir button:hover{opacity:1}
.dil-satir button.secili{font-weight:700;opacity:1;text-decoration:none}
.nm-bar,.nm-sheet{display:none}

@media(max-width:1023px){
  /* B41: mobilde kenar menü hiç görünmez; alt bar devralır */
  body.nm-on .sidebar,body.nm-on .side-toggle,body.nm-on .side-backdrop{display:none!important}
  body.nm-on .container{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  body.nm-on .foot{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  .nm-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:930;
    background:rgba(14,10,22,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom)}
  .nm-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:58px;min-width:44px;background:none;border:0;cursor:pointer;color:var(--muted);font-family:inherit;font-size:11px}
  .nm-tab i{font-size:21px}
  .nm-tab.on{color:#fff;font-weight:700}
  .nm-tab.on i{color:var(--gold)}
  .nm-sheet{position:fixed;inset:0;z-index:940;background:rgba(6,4,12,.94);backdrop-filter:blur(5px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 14px calc(92px + env(safe-area-inset-bottom))}
  .nm-sheet[hidden]{display:none}
  .nm-sheet:not([hidden]){display:block}
  .nm-sheet-in{max-width:560px;margin:0 auto}
  .nm-sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:18px}
  .nm-x{background:none;border:1px solid var(--line);border-radius:9px;color:var(--muted);width:44px;height:44px;font-size:16px;cursor:pointer}
  .nm-wargrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .nm-warcard{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px 10px;min-height:92px;
    background:var(--panel);border:1px solid var(--line);border-radius:14px;color:var(--text);font-weight:600;text-align:center}
  .nm-warcard i{font-size:26px;color:var(--gold)}
  .nm-warcard.active{border-color:var(--violet)}
  .nm-warcard:hover{border-color:var(--line2);color:#fff}
  .nm-dgroup{margin-bottom:16px}
  .nm-dgroup .nl{min-height:46px}
}
@media(min-width:1024px){
  .nm-bar,.nm-sheet{display:none!important}
}

/* ================= MENÜ v2 (menu-revizyonu) — KAYDIRMASIZ ================= */
/* Masaüstü: grupsuz düz liste + ince ayraçlar; panel iç kaydırma ASLA çıkmaz */
.nm2 .side-nav{display:flex;flex-direction:column;gap:1px;overflow:visible}
.nm2 .nl{min-height:38px;padding-top:7px;padding-bottom:7px;position:relative}
.nm2-hr{border:0;border-top:1px solid var(--line);margin:5px 8px;width:auto}
.nm2-war{width:100%;background:none;border:0;cursor:pointer;font-family:inherit;font-size:inherit;
  color:inherit;text-align:left;display:flex;align-items:center;gap:10px}
/* position:fixed → sidebar'ın overflow:hidden kırpmasından kaçar (konumu JS verir) */
.nm2-flyout{position:fixed;z-index:1200;width:340px;
  display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px;
  background:var(--panel);border:1px solid var(--line2);border-radius:14px;
  box-shadow:0 16px 50px rgba(0,0,0,.6)}
.nm2-flyout[hidden]{display:none}
.nm2-fitem{display:flex;align-items:center;gap:8px;padding:10px;border-radius:9px;
  border:1px solid var(--line);color:var(--text);min-height:44px;font-size:13px}
.nm2-fitem:hover{border-color:var(--line2);background:var(--panel2)}
.nm2-fitem.active{border-color:var(--violet);color:#fff}
.nm2-fitem i{color:var(--gold);font-size:17px}
.nm2-flywrap{position:relative}
/* Sıkı mod: kısa ekranda satır/boşluk küçülür — kaydırma çubuğu HİÇBİR koşulda çıkmaz */
@media(min-width:1024px) and (max-height:719px){
  .nm2 .nl{min-height:31px;padding-top:4px;padding-bottom:4px;font-size:13px}
  .nm2-hr{margin:3px 8px}
  .nm2 .nm-strip{padding:8px 10px;margin-top:8px}
  .nm2 .nm-strip a{width:32px;height:32px;font-size:15px}
}
.nm2{overflow:hidden}   /* son savunma: panel asla kaydırmaz */

/* Üst bant zarf kısayolu */
.tb-mail{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:18px;flex:0 0 auto}
.tb-mail:hover{color:#fff;border-color:var(--line2)}
.tb-mail .badge{position:absolute;top:-6px;right:-6px}

/* Mobil: YUKARI KAYAN paneller (Savaş + Menü) — kaydırmalı çekmece YOK */
.nm-up{display:none}
@media(max-width:1023px){
  .nm-up{position:fixed;left:0;right:0;bottom:0;top:0;z-index:940;display:block;
    background:rgba(6,4,12,.55);backdrop-filter:blur(2px)}
  .nm-up[hidden]{display:none}
  .nm-up-in{position:absolute;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom));
    background:var(--panel);border-top:1px solid var(--line2);border-radius:16px 16px 0 0;
    padding:8px 14px 14px;max-height:60vh;overflow:hidden;   /* kaydırma YASAK */
    animation:nmUp .2s ease-out}
  @keyframes nmUp{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
  .nm-up-grip{width:44px;height:4px;border-radius:2px;background:var(--line2);margin:4px auto 10px}
  .nm-menugrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .nm-mitem{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    min-height:64px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);
    color:var(--text);font-size:12px;text-align:center;padding:6px 2px;min-width:0}
  .nm-mitem i{font-size:20px;color:var(--gold)}
  .nm-mitem.active{border-color:var(--violet)}
  .nm-up-strip{display:flex;gap:8px;align-items:center;justify-content:space-between;
    border-top:1px solid var(--line);margin-top:10px;padding-top:10px;font-size:13px}
  .nm-up-strip a,.nm-up-strip .cikis-b{color:var(--muted);display:flex;align-items:center;gap:4px;min-height:44px}
  .nm-up .nm-wargrid{margin:0}
  .nm-up .nm-warcard{min-height:64px;padding:10px 6px}
}
@media(min-width:1024px){ .nm-up{display:none!important} }

/* ================= ENVANTER (görselli eşya sistemi) ================= */
.inv-top{display:grid;grid-template-columns:1fr 280px;gap:14px;margin-bottom:14px;align-items:start}
.inv-slots{display:flex;gap:10px;flex-wrap:wrap}
.inv-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:86px;height:86px;border:2px solid var(--line);border-radius:12px;background:var(--panel2);cursor:pointer}
.inv-slot.empty{cursor:default;border-style:dashed}
.inv-slot-nm{font-size:10px;max-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px;margin-top:12px}
.inv-cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:86px;border:2px solid var(--line);border-radius:12px;background:var(--panel2);cursor:pointer;
  color:var(--text);font-family:inherit;padding:8px 4px;min-width:0}
.inv-cell:hover{filter:brightness(1.15)}
.inv-rar{font-size:10px;font-weight:700;letter-spacing:.03em}
/* Kart üstü bilgi: isim + stat değerleri + seviye (tıklamadan görünür) */
.inv-cell{gap:2px}
.inv-cell-nm{font-size:11px;font-weight:600;line-height:1.15;text-align:center;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.inv-cell-st{display:flex;flex-wrap:wrap;justify-content:center;gap:0 6px;font-size:11px;
  font-weight:800;line-height:1.2;color:var(--text)}
.inv-cell-lvl{font-size:9px;color:var(--dim,#8b7fa8);letter-spacing:.02em}
.inv-eq{position:absolute;top:4px;right:6px;color:var(--good);font-size:12px}
.inv-sheet{position:fixed;inset:0;z-index:1500;display:flex;align-items:center;justify-content:center;
  background:rgba(6,4,12,.8);backdrop-filter:blur(4px);padding:18px}
.inv-sheet[hidden]{display:none}
.inv-sheet-in{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line2);
  border-radius:16px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
@media(max-width:1023px){
  .inv-top{grid-template-columns:1fr}
  .inv-grid{grid-template-columns:repeat(4,1fr)}   /* mobil: 4 sütun (iş emri 3d) */
  .inv-sheet{align-items:flex-end;padding:0}       /* bottom sheet */
  .inv-sheet-in{max-width:100%;border-radius:16px 16px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}
@media(min-width:1024px){
  .inv-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}   /* 6-8 sütun */
}

/* ================= MESAJ SİSTEMİ ================= */
.msg-wrap{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start}
.msg-conv{display:block;padding:9px 10px;border-radius:9px;border:1px solid transparent;color:var(--text);min-width:0}
.msg-conv:hover{background:rgba(255,255,255,.04)}
.msg-conv.act{border-color:var(--line2);background:var(--panel2)}
.msg-flow{display:flex;flex-direction:column;gap:8px;padding:12px 2px;max-height:420px;overflow-y:auto}
.msg-b{max-width:78%;padding:8px 12px;border-radius:14px;word-wrap:break-word;font-size:14px}
.msg-b.me{align-self:flex-end;background:linear-gradient(180deg,#5f27c4,#3a1a66);border-bottom-right-radius:4px}
.msg-b.them{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg-write{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:10px;position:sticky;bottom:0;background:var(--panel)}
@media(max-width:1023px){
  .msg-wrap{grid-template-columns:1fr}
  .msg-flow{max-height:50vh}
  .msg-write{padding-bottom:calc(env(safe-area-inset-bottom))}
}

/* ================= B20-22: YENİ MARKET ================= */
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:12px}
.mk-card{display:flex;flex-direction:column;gap:6px;padding:14px;min-width:0;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--edge),0 8px 20px -18px rgba(0,0,0,.95)}
.mk-card.prem{border-color:#6a5423;background:linear-gradient(180deg,rgba(232,194,104,.07),var(--panel2))}
.mk-ic{font-size:34px;line-height:1}
.mk-tags{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px}
.mk-bon{font-size:14px;font-weight:600}
.mk-diff{font-size:12px;min-height:18px}
.mkmodal{position:fixed;inset:0;z-index:1500;display:flex;align-items:center;justify-content:center;
  background:rgba(6,4,12,.8);backdrop-filter:blur(4px);padding:18px}
.mkmodal[hidden]{display:none}
.mkmodal-in{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line2);
  border-radius:16px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.6)}

/* ================= SE-5/6/7: SAVAŞ EKRANLARI — kaydırmasız düzen ================= */
/* Masaüstü: sol sabit aksiyon paneli + sağ sonuç; buton hiçbir durumda ekran dışına çıkmaz */
@media(min-width:1024px){
  .sw-wrap{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:start}
  .sw-side{position:sticky;top:76px}
}
/* Mobil: aksiyon formu ekran altında sabit (sticky) çubuk — alt sekme çubuğunun ÜSTÜNDE */
@media(max-width:1023px){
  .sw-wrap{display:flex;flex-direction:column;gap:14px}
  .sw-side{order:0}
  .sw-main{order:1}
  .sw-act{position:fixed;left:10px;right:10px;z-index:920;margin:0!important;
    bottom:calc(10px + env(safe-area-inset-bottom))}
  body.nm-on .sw-act{bottom:calc(70px + env(safe-area-inset-bottom))}   /* nm alt barının üstü */
  .sw-act .btn{width:100%;min-height:52px;box-shadow:0 8px 26px rgba(0,0,0,.55)}
  /* içerik sticky çubuğun altında kalmasın */
  .sw-wrap ~ * {margin-bottom:0}
  body:has(.sw-act) .container{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
  /* FOOTER de sabit aksiyon butonunun altında kalmasın (footer .container DIŞINDA olduğu için
     .container padding'i onu korumuyordu → buton footer yazılarının üstüne biniyordu) */
  body:has(.sw-act) .foot{padding-bottom:calc(170px + env(safe-area-inset-bottom))}
}

/* ===== HALKA 0 — "?" kimlik balonu (S4) ===== */
.scr-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hq{position:relative;width:24px;height:24px;min-width:24px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--muted);
  font-weight:700;font-size:13px;line-height:1;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.hq:hover,.hq:focus{color:var(--text);border-color:var(--acc,#7a3fe0);outline:none}
.hq::before{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)} /* 44px dokunma hedefi */
.hq-back{position:fixed;inset:0;z-index:1399}
.hq-pop{position:fixed;z-index:1400;max-width:300px;background:#160f22;border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;color:var(--text);font-size:.9rem;line-height:1.55;
  box-shadow:0 14px 44px -10px rgba(0,0,0,.75)}
.hq-pop .hq-x{float:right;color:var(--muted);cursor:pointer;font-weight:700;margin:-2px -4px 0 10px;font-size:15px}

/* ===== HALKA 0 — Sabit aksiyon çubuğu (S1) — tekrar kullanılabilir ortak bileşen ===== */
.act-bar{position:sticky;bottom:0;z-index:20;display:flex;gap:10px;padding:12px;
  margin:14px -12px -12px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,var(--bg,#0b0812) 45%)}
.act-bar .btn{flex:1;margin:0}
@media(max-width:1023px){body.nm-on .act-bar{bottom:calc(64px + env(safe-area-inset-bottom))}}

/* ===== HALKA 1 — ekran öğrenme mini ipucu bandı (S1d) ===== */
.tut-hint{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:11px 14px;
  border:1px solid #2b6f9c;background:linear-gradient(180deg,#12293a,#0e2032);border-radius:12px;
  color:#cfe8ff;font-size:.92rem;line-height:1.5}
.tut-hint>span{flex:1;min-width:180px}
/* ★ 11 Eyl 2026: iki bağlantı → tek POST formu (CSRF). Form kendisi flex kutu:
   "Anladım" ile "×" HER ZAMAN yan yana kalır, dar ekranda ikisi birlikte alt
   satıra iner (eskiden ikisi ayrı ayrı kayabiliyordu). */
.tut-hint .th-f{display:flex;align-items:center;gap:8px;margin:0 0 0 auto}
.tut-hint .th-ok,.tut-hint .th-off{border:0;cursor:pointer;font:inherit;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;min-height:44px}
.tut-hint .th-ok{background:#2b6f9c;color:#fff;padding:8px 14px;border-radius:9px;text-decoration:none;white-space:nowrap}
.tut-hint .th-ok:hover{background:#3486ba}
.tut-hint .th-off{background:none;color:#7fa8c8;text-decoration:none;padding:6px 10px;font-size:15px;min-width:44px;justify-content:center}

/* ===== HALKA 2 — görev bildirimi toast (aşama bitti / görev bitti) ===== */
.qt-toast{display:block;margin:0 0 12px;padding:11px 14px;border-radius:12px;font-weight:700;
  font-size:.92rem;line-height:1.45;text-decoration:none;animation:qtIn .28s ease}
.qt-toast.qt-stage{border:1px solid #3f7a3f;background:linear-gradient(180deg,#12341c,#0e2413);color:#c9f0cf}
.qt-toast.qt-done{border:1px solid #b58a1f;background:linear-gradient(180deg,#2e2510,#231b0d);color:#f4e2a6}
a.qt-toast.qt-done:hover{filter:brightness(1.15)}
@keyframes qtIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Ayarlar — görev bildirimi aç/kapa satırı (günlük/haftalık/aylık) */
.notif-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;padding:9px 12px;
  border:1px solid #2b3550;background:#141a2b;border-radius:10px;font-size:.85rem;color:#b9c4de}
.notif-row .nf-t{font-weight:700;margin-right:2px}
.notif-row a{padding:5px 11px;border-radius:8px;text-decoration:none;font-weight:700;border:1px solid #3a4566}
.notif-row a.on{background:#2b6f9c;color:#fff;border-color:#2b6f9c}
.notif-row a.off{background:#20263a;color:#8ea0c2}

/* ===== Görev Takibi (Ekran B) — takip kartları ===== */
.trk{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 11px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);box-shadow:var(--edge)}
.trk.rdy{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(201,162,39,.5)}
.trk-h{display:flex;align-items:center;gap:9px}
.trk-i{font-size:1.35rem}
.trk-ad{font-weight:800;font-size:1rem;flex:1}
.trk-tag{font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:20px;background:rgba(255,255,255,.08);color:var(--muted);white-space:nowrap}
.trk.rdy .trk-tag{background:var(--gold);color:#1a1206}
.trk-desc{font-size:.8rem;color:var(--muted);margin:5px 0 8px}
/* 10 Eyl 2026: görev takip çubuğu da HUD çubuklarıyla aynı dili konuşsun —
   oyuk hissi + dolgunun ucunda ışık. İnce (8px) olduğu için parıltı daha kısık. */
.trk-bar{height:8px;background:linear-gradient(180deg,#08050f,#0e0a17);border:1px solid var(--line);
  border-radius:6px;overflow:hidden;margin:0 0 9px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.8)}
.trk-bar>span{position:relative;display:block;height:100%;background:linear-gradient(90deg,#6a4fd0,#a98bff);
  border-radius:6px;transition:width .5s cubic-bezier(.22,.61,.36,1)}
.trk-bar>span::after{content:"";position:absolute;top:0;bottom:0;right:0;width:2px;
  background:rgba(255,255,255,.55)}
.trk.rdy .trk-bar>span{background:linear-gradient(90deg,#2b8f6f,#57d99f)}
.trk-act{display:block;width:100%}
.trk-act.btn,.trk-act .btn,.trk .btn{width:100%}
.trk-claim{background:linear-gradient(135deg,#c9a227,#8a6a1f)!important;color:#1a1206!important;font-weight:800}
.trk-empty{text-align:center;padding:26px 14px;border:1px dashed var(--line);border-radius:14px;color:var(--muted)}
.btn-ghost-sm{display:inline-block;font-size:.85rem;color:var(--muted);text-decoration:none;font-weight:700}
.btn-ghost-sm:hover{color:var(--text)}
/* Görevler menü rozeti (alınmamış ödül) */
em.badge.q-badge{background:#c9a227;color:#1a1206}

/* ===== HALKA 1 — amaç kartı (ilk oturum) ===== */
.goal-card{max-width:460px;margin:0 auto;text-align:center}
.goal-card .goal-lines{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:10px}
.goal-card .goal-lines li{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:.95rem}

/* ===== Sosyal giriş butonları (Google / Facebook) ===== */
.sosyal-alan{margin-top:20px}
.sosyal-ayrac{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sosyal-ayrac span{flex:1;height:1px;background:var(--line)}
.sosyal-ayrac small{color:var(--muted);font-size:12px;white-space:nowrap}
.sosyal-btn{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;margin-top:10px;
  padding:11px 14px;border:1px solid var(--line);border-radius:11px;background:var(--panel2);
  color:var(--text);font-weight:600;font-size:14px;text-decoration:none;transition:border-color .15s,background .15s}
.sosyal-btn:hover{border-color:var(--sr,var(--violet));background:var(--panel3)}
.sosyal-btn .sosyal-ikon{flex:none;width:26px;height:26px;border-radius:7px;background:var(--sr,#555);
  color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:15px}

/* ================= MİKRO ETKİLEŞİM (10 Eyl 2026) =================
   Hepsi ≤200ms ve sakin. Tamamı CSS: JS kapalıyken de çalışır. */

/* Klavye odağı. NEDEN: input'ların odak halkası vardı ama buton/bağlantıların
   yoktu — klavyeyle gezen oyuncu nerede olduğunu göremiyordu. :focus-visible
   olduğu için fareyle tıklayanda çıkmaz, yalnız klavye/erişilebilirlik yolunda. */
a:focus-visible,button:focus-visible,.btn:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{outline:2px solid #b78dff;outline-offset:2px}

/* Bağlantı olan cipsler (₺ bakiye) tıklanabilir olduklarını belli etsin */
a.chip{position:relative}
a.chip:hover{color:#fff;border-color:var(--line2);transform:translateY(-1px)}
a.chip:active{transform:translateY(0)}
/* Dokunma hedefi 44px'e çıkıyor, DÜZEN DEĞİŞMİYOR: cips 36-38px yüksekliğinde
   kalıyor, yalnız görünmez bir şerit tıklama alanını büyütüyor. Aynı yöntem
   .hq'da (kimlik balonu) zaten kullanılıyor. */
a.chip::before{content:"";position:absolute;top:50%;left:0;right:0;height:44px;transform:translateY(-50%)}

/* Kartlar: üzerine gelince hafif kalkma, basınca hafif çökme */
.mk-card{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.mk-card:hover{transform:translateY(-3px);border-color:var(--line2);
  box-shadow:var(--edge),0 16px 28px -20px rgba(0,0,0,.95)}
.mk-card:active{transform:translateY(0)}
.kpi{transition:border-color .16s ease}
.kpi:hover{border-color:var(--line2)}
.inv-cell,.inv-slot{transition:transform .14s ease,filter .14s ease,border-color .14s ease}
.inv-cell:active,.inv-slot:not(.empty):active{transform:scale(.96)}
.rn-item{transition:border-color .15s ease,color .15s ease,background .15s ease}
.nm-warcard,.nm-mitem,.nm2-fitem{transition:transform .14s ease,border-color .14s ease,background .14s ease}
.nm-warcard:active,.nm-mitem:active,.nm2-fitem:active{transform:scale(.97)}
.nm-tab{transition:color .14s ease,transform .14s ease}
.nm-tab:active{transform:scale(.94)}
.side-nav .nl:active{transform:translateX(2px) scale(.99)}
.rtab,.pager a{transition:border-color .15s ease,color .15s ease,background .15s ease}
.sosyal-btn:active{transform:scale(.99)}

/* ================= ★ 11 Eyl 2026 — MEKÂN & HANEDAN =================
   NEDEN (iki başarısız turun dersi): önce gölge/kenar ışığı/sis eklendi — sahibi
   "hiçbir şey görmedim" dedi. Sonra 176 emoji kendi ikon setimize çevrildi —
   "kırmızı yarasayı gördüm, o kadar" dedi. İkisi de DOĞRU işlerdi ama YANLIŞ
   kaldıraçtı: ikon 24 pikseldir, ekranın %1'idir. Ekrana bakınca görülen şey
   MEKÂN ve HİYERARŞİdir.
   Ölçüm (render edilip bakıldı): Karargâh, Arena, Market, Envanter piksel piksel
   aynı düz koyu sayfaydı — aynı zemin, aynı dikdörtgen panel, aynı çerçeve.
   Arena 1280x900'de ekranın dörtte üçü boş siyahtı. Oyuncunun kendisi 40 piksel
   bir daire + 15 piksellik bir isimdi. Kan ile Ay arasında tek görsel fark
   "Vampir"/"Kurtadam" kelimesiydi.
   ÇÖZÜM üç katman: (1) her ekranın kendi ortamı, (2) oyuncunun hanedan kimliği
   büyük ve baskın, (3) panellerin gotik ağırlığı.
   KURALLAR: tek bir dış kaynak yok — her şey CSS gradyanı ya da satır içi SVG.
   filter:blur() YOK, sürekli dönen animasyon YOK (düşük donanımlı telefon).
   Metin katmanı ortam katmanının ÜSTÜNDE (z-index) durur: hiçbir ortam efekti
   yazının arkasına karışıp kontrastı düşürmez. */

/* ---------- 1) SAHNE: sayfanın arkasındaki sabit ortam ----------
   position:fixed tek katman — kaydırmada yeniden boyanmaz, GPU'da ucuzdur.
   z-index:0'da durur, .layout z-index:1 ile tamamen üstünde kalır.
   Ufuk parıltısı ekranın dibinden yükselir, en altta TEKRAR kararır. O karartma
   zorunlu: footer yazısı (--dim #6f668c) zaten 3,82 ile sınırdaydı; parıltı dibe
   kadar sürseydi 2,74'e düşerdi. Şimdi footer'ın arkası eskisi kadar koyu (3,82
   korunuyor), parıltı onun ÜSTÜNDEKİ boşlukta duruyor. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  --zemin:rgba(139,75,255,.16);          /* ekran başına tek değişken — tek satırla değişir */
  background-image:
    linear-gradient(180deg,transparent 72%,rgba(4,2,9,.9) 96%),
    radial-gradient(1400px 640px at 50% 90%,var(--zemin),transparent 72%);
  background-repeat:no-repeat;
}
.layout{position:relative;z-index:1}
.side-toggle{z-index:60}

/* Klan rengi: oyuncunun tarafı sayfanın zemininde de duruyor. */
body.f-kan::before{--zemin:rgba(212,58,84,.26)}
body.f-ay::before{--zemin:rgba(67,167,224,.24)}

/* ---------- 2) EKRAN BANDI: her ekranın kendi mekânı ----------
   .hero-panel oyunun HER ekranının tepesinde zaten vardı ama yalnız mor-bordo bir
   dikdörtgendi; arenayla marketi ayıran hiçbir şey yoktu. Artık ekranın adı kadar
   MEKÂNI da burada duruyor.
   KATMAN SIRASI (kontrast için kritik): ::before = SAHNE, ::after = PERDE, içerik
   z-index:2. Perde sahnenin ÜSTÜNDE olmak ZORUNDA — sahnedeki meşale/tente gibi
   aydınlık lekeler yazının arkasına düşerse gövde metni AA'nın altına iner.
   Perde yalnız solda koyu, sağa doğru açılıyor: mekân görünüyor, yazı korunuyor. */
.hero-panel{
  position:relative;overflow:hidden;min-height:118px;
  display:flex;flex-direction:column;justify-content:center;
  border-color:#41355f;
}
.hero-panel > *{position:relative;z-index:2}
/* height:auto ŞART: .panel::before ince ışık çizgisi için height:1px veriyor; onu
   geri almazsak sahne katmanı bir piksel yüksekliğinde kalıp görünmez olur. */
.hero-panel::before{content:"";position:absolute;inset:0;height:auto;z-index:1;pointer-events:none;
  border-radius:inherit;background:none;background-repeat:no-repeat;background-position:50% 100%}
.hero-panel::after{content:"";position:absolute;inset:0;z-index:1;height:auto;border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(9,6,15,.82) 0,rgba(9,6,15,.76) 44%,rgba(9,6,15,.34) 66%,rgba(9,6,15,.1) 100%)}
/* Perdenin yetmediği yerde ikinci güvence: başlık ve gövde yazısının kendi gölgesi.
   Sahne katmanı hiçbir koşulda metni AA'nın altına indirmesin diye. */
.hero-panel h2,.hero-panel h3{text-shadow:0 2px 10px rgba(4,2,9,.9),0 0 3px rgba(4,2,9,.7)}
.hero-panel p,.hero-panel .muted{text-shadow:0 1px 7px rgba(4,2,9,.95)}

/* ARENA — kum çukuru: üstte kemerli revak, iki yanda meşale, dipte kum.
   Kemer hilesi: 44x34'lük döşemenin dibine yarım daire "delik" açan bir radial
   gradyan; yan yana dizilince sütun + kemer boşluğu okunuyor. Tek bir SVG path
   yığını yok, tek gradyan var. */
body.s-arena .hero-panel::before,body.s-duello .hero-panel::before,body.s-fetih .hero-panel::before,
body.s-arena-pvp .hero-panel::before{
  background-image:
    radial-gradient(circle at 50% 100%,transparent 0 17px,rgba(4,2,9,.88) 18px),
    radial-gradient(150px 110px at 8% 26%,rgba(232,194,104,.4),transparent 68%),
    radial-gradient(150px 110px at 92% 26%,rgba(232,194,104,.4),transparent 68%),
    radial-gradient(520px 150px at 50% 128%,rgba(232,194,104,.34),transparent 68%),
    linear-gradient(180deg,transparent 46%,rgba(176,132,68,.2) 76%,rgba(220,176,100,.26));
  background-size:44px 34px,100% 100%,100% 100%,100% 100%,100% 100%;
  background-position:0 0,0 0,0 0,0 0,0 0;
  background-repeat:repeat-x,no-repeat,no-repeat,no-repeat,no-repeat}
/* ---------- 2b) SAYFANIN ZEMİNİ de mekâna ait ----------
   Ölçüm: Arena 1280x900'de ekranın dörtte üçü BOŞ SİYAHTI — panelin bittiği yerden
   footer'a kadar hiçbir şey yoktu. Bu boşluk artık ekranın tabanı: arenada kum,
   markette fener, envanterde taş, madende köz. Tek sabit (position:fixed) katman,
   kaydırmada yeniden boyanmaz. */
body.s-arena::before,body.s-duello::before,body.s-fetih::before,body.s-arena-pvp::before{--zemin:rgba(214,164,84,.34)}
body.s-market::before,body.s-pazar::before,body.s-bakiye::before,body.s-premium::before{--zemin:rgba(232,194,104,.28)}
body.s-inventory::before,body.s-clan::before,body.s-clans::before,body.s-ranking::before{--zemin:rgba(139,75,255,.3)}
body.s-maden::before,body.s-kuyu::before{--zemin:rgba(226,120,52,.28)}
body.s-hunt::before,body.s-grotto::before,body.s-baskin::before,body.s-worldboss::before{--zemin:rgba(56,211,156,.22)}
body.s-ritual::before{--zemin:rgba(139,75,255,.34)}

/* Footer artık sahnenin üstünde KENDİ koyu zeminine oturuyor.
   NEDEN: .foot yazısı doğrudan sayfa zeminindeydi ve ölçünce ZATEN sınırın
   altındaydı — #6f668c / #070509 = 3,82 (AA 4,5 ister). Sahne katmanı gelince
   zemin yer yer açılıyor ve oran 2,84'e kadar düşüyordu. Kendi zemini + --muted
   rengi ikisini birden çözüyor: ölçülen yeni oran 6,4 — hem sahneden bağımsız
   hem eskisinden iyi. */
.foot{background:rgba(5,3,10,.82);color:var(--muted)}

/* MARKET / PAZAR — tezgâh: çizgili tente, fistolu etek, asılı fener. */
body.s-market .hero-panel::before,body.s-pazar .hero-panel::before,body.s-bakiye .hero-panel::before{
  background-image:
    radial-gradient(circle at 50% 0,transparent 0 10px,rgba(5,3,11,.86) 10px),
    repeating-linear-gradient(90deg,rgba(212,58,84,.34) 0 24px,rgba(232,194,104,.22) 24px 48px),
    radial-gradient(170px 130px at 88% 22%,rgba(232,194,104,.3),transparent 70%),
    linear-gradient(180deg,transparent 62%,rgba(232,194,104,.1));
  background-size:24px 15px,100% 34px,100% 100%,100% 100%;
  background-position:0 34px,0 0,0 0,0 0;
  background-repeat:repeat-x,repeat-x,no-repeat,no-repeat}

/* ENVANTER — taş kasa.
   ★ 12 Eyl 2026 — GÜÇLENDİRİLDİ. Eski hâli 58x29'luk bir derz ızgarasıydı ve
   MEKÂN değil DOKU okunuyordu: arenanın kemerli revağı, marketin çizgili tentesi
   "burası neresi" diyor, envanterin ızgarası "burada fayans var" diyordu. Üç şey
   eklendi, hepsi mimari:
     1) KORNİŞ — tepede 26 pikselde bir taş diş (mazgal/konsol sırası). Sahnenin
        bir TAVANI olduğunu söyleyen tek satır; arenadaki kemer bandının karşılığı.
     2) KEMERLİ NİŞ — sağ altta yarım daire oyuk: içinde meşale közü, çevresinde
        koyu taş çerçeve. Perdenin AÇIK olduğu yana kondu (sol taraf zaten
        yazının arkası, orada parlak leke olamaz).
     3) TAŞ YÜZÜ DAMASI — 78 ve 26 piksellik iki ayrı ritim, biri taşları sütun
        sütun bir tık açıyor, öteki sıra sıra bir tık koyultuyor. Derzler hizalı
        kaldığı hâlde duvar artık düz ızgara okunmuyor.
   Taş ölçüsü 58x29'dan 78x26'ya çıktı (kesme taş yatık olur, kare değil), üstte
   tavan karanlığı ve altta kaide kuşağı eklendi.

   KONTRAST — sayı vermeden dokunulmadı. Ölçüm: headless Chrome, sahne METİNSİZ
   basılıp yazı kutusunun EN PARLAK pikseli örneklendi (en kötü durum; gerçek yazı
   ayrıca kendi text-shadow'unu taşıyor, bu ölçüme girmiyor). --muted (#9a90b8):
     1024 px: eski envanter 4,23 → YENİ 4,54   (arena 4,55 · market 4,49)
      390 px: eski envanter 3,06 → YENİ 3,71   (arena 2,68 · market 3,71)
   Yani masaüstünde en kötü nokta AA eşiğinin (4,5) ALTINDAN ÜSTÜNE çıktı; 390'da
   hiçbir sahne tek piksel bazında 4,5'e ulaşmıyor (perde orada yukarıdan iniyor,
   bandın dibi açık kalıyor) ama envanter en iyi komşusuyla eşitlendi ve eski
   hâlinden belirgin iyi. Kazanım derz ışığını kısarak (.07/.09 → .05/.07) ve taban
   morunu .26'dan .17'ye çekerek geldi; kabartma kornişten ve nişin çerçevesinden
   geri alındı. Başlık (--text) en kötü noktada 11,2 — geniş pay. */
body.s-inventory .hero-panel::before,body.s-oyuncu .hero-panel::before{
  background-image:
    repeating-linear-gradient(90deg,rgba(4,2,9,.9) 0 13px,transparent 13px 26px),
    radial-gradient(circle at 76% 104%,transparent 0 44px,rgba(4,2,9,.62) 46px 64px,transparent 66px),
    radial-gradient(circle at 76% 104%,rgba(232,194,104,.42) 0 40px,transparent 44px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.82) 0 3px,rgba(255,255,255,.05) 3px 4px,transparent 4px 78px),
    repeating-linear-gradient(180deg,rgba(0,0,0,.82) 0 3px,rgba(255,255,255,.07) 3px 4px,transparent 4px 26px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 78px,transparent 78px 156px),
    repeating-linear-gradient(180deg,rgba(0,0,0,.18) 0 26px,transparent 26px 52px),
    radial-gradient(140px 130px at 6% 40%,rgba(232,194,104,.3),transparent 70%),
    linear-gradient(180deg,rgba(6,4,12,.6),transparent 30%),
    linear-gradient(180deg,transparent 84%,rgba(8,5,14,.62)),
    linear-gradient(180deg,rgba(139,75,255,.17),rgba(52,38,68,.34) 56%,rgba(16,11,26,.5));
  background-size:26px 9px,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto;
  background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0;
  background-repeat:repeat-x,no-repeat,no-repeat,repeat,repeat,repeat,repeat,no-repeat,no-repeat,no-repeat,no-repeat}

/* MADEN — kuyu ağzı: tepeden inen ışık huzmesi + dipte moloz. */
body.s-maden .hero-panel::before,body.s-kuyu .hero-panel::before{
  background-image:
    linear-gradient(196deg,rgba(232,194,104,.22) 0 4%,transparent 16%),
    linear-gradient(164deg,rgba(232,194,104,.16) 0 4%,transparent 16%),
    radial-gradient(300px 90px at 50% 116%,rgba(232,194,104,.2),transparent 72%),
    linear-gradient(180deg,transparent 58%,rgba(58,40,22,.5));
  background-repeat:no-repeat}

/* AVLANMA / KARANLIK İN / BASKIN / DÜNYA BOSSU — orman & mağara: sarkıt silüeti. */
body.s-hunt .hero-panel::before,body.s-grotto .hero-panel::before,body.s-baskin .hero-panel::before,
body.s-baskin_v2 .hero-panel::before,body.s-worldboss .hero-panel::before,body.s-zindanlar .hero-panel::before{
  background-image:
    linear-gradient(-152deg,rgba(5,3,11,.9) 0 42%,transparent 42%),
    linear-gradient(152deg,rgba(5,3,11,.9) 0 42%,transparent 42%),
    radial-gradient(520px 150px at 50% 120%,rgba(56,211,156,.16),transparent 70%),
    radial-gradient(360px 150px at 50% -30%,rgba(139,75,255,.22),transparent 72%);
  background-size:34px 30px,34px 30px,100% 100%,100% 100%;
  background-position:0 0,0 0,0 0,0 0;
  background-repeat:repeat-x,repeat-x,no-repeat,no-repeat}

/* KLAN / SIRALAMA / GÖREVLER — salon: asılı flamalar + mum ışığı. */
body.s-clan .hero-panel::before,body.s-clans .hero-panel::before,body.s-klanlar .hero-panel::before,
body.s-ranking .hero-panel::before,body.s-gorevler .hero-panel::before,body.s-mesajlar .hero-panel::before{
  background-image:
    linear-gradient(180deg,rgba(5,3,11,.85) 0 58%,transparent 58%),
    linear-gradient(-45deg,transparent 0 12px,rgba(5,3,11,.85) 12px),
    radial-gradient(300px 140px at 50% -10%,rgba(232,194,104,.2),transparent 70%);
  background-size:26px 54px,26px 20px,100% 100%;
  background-position:0 0,0 30px,0 0;
  background-repeat:repeat-x,repeat-x,no-repeat}

/* ELMAS / PREMIUM — hazine: altın ışınlar. */
body.s-premium .hero-panel::before{
  background-image:
    repeating-conic-gradient(from 0deg at 82% 120%,rgba(232,194,104,.14) 0 3deg,transparent 3deg 10deg),
    radial-gradient(340px 150px at 82% 120%,rgba(232,194,104,.3),transparent 70%);
  background-repeat:no-repeat}

/* RİTÜEL — sunak: çember + mum halkası. */
body.s-ritual .hero-panel::before{
  background-image:
    radial-gradient(circle at 50% 118%,transparent 0 86px,rgba(139,75,255,.28) 86px 88px,transparent 89px),
    radial-gradient(circle at 50% 118%,transparent 0 56px,rgba(212,58,84,.26) 56px 58px,transparent 59px),
    radial-gradient(320px 140px at 50% 122%,rgba(139,75,255,.26),transparent 70%);
  background-repeat:no-repeat}

/* ---------- 2c) EKRAN ARMASI: bandın sağında duran büyük hanedan nişanı ----------
   Klan, arena ve oyuncu profilinde "hangi taraf" sorusunun cevabı artık ekranda
   büyük duruyor. Mobilde filigran'a döner (küçülür + soluklaşır) ki yazıyla
   çakışmasın — 390 pikselde metnin önüne hiçbir şey geçmiyor. */
.arma{display:block}
.arma-kan{color:var(--crimson)}
.arma-ay{color:var(--en)}
/* Mutlak konumlu arma (arena, oyuncu profili): bandın sağında, bandın yüksekliğine
   göre ölçeklenir — sabit yükseklik verseydik kısa bantta taşıp kırpılırdı. */
.hero-arma{position:absolute;right:20px;top:10px;bottom:10px;z-index:2;
  display:flex;align-items:center;pointer-events:none;filter:drop-shadow(0 6px 16px rgba(0,0,0,.6))}
.hero-arma svg{height:100%;width:auto;max-height:128px}
/* Satır içi arma (klan): panelin içinde başka kartlar varsa mutlak konum onların
   arkasında kalıyor — bu yüzden başlığın yanında gerçek bir öğe olarak durur. */
.hero-bas{display:flex;align-items:center;gap:18px}
.hero-bas-arma{flex:0 0 auto;line-height:0;filter:drop-shadow(0 6px 16px rgba(0,0,0,.6))}
@media(max-width:860px){
  .hero-arma{right:6px;opacity:.4}
  .hero-arma svg{max-height:82px}
  .hero-bas{gap:12px}
  .hero-bas-arma svg{width:58px;height:74px}
}

/* ---------- 3) HANEDAN KAHRAMANI — Karargâh'ın tepesi ----------
   Eskiden: 38 piksellik bir avatar + tek satır "Hoş geldin". Oyuncunun kendisi
   ekranın yüzde üçüydü. Şimdi: klan arması + avatar + ad + rozetler tek blokta,
   sayfanın en ağır öğesi. Metinlerin HİÇBİRİ değişmedi, yalnız ağırlıkları. */
.kv-hane{display:flex;align-items:center;gap:22px;padding:24px 26px;min-height:168px}
.kv-hane .hane-arma{flex:0 0 auto;line-height:0;color:var(--crimson);
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.6))}
body.f-ay .kv-hane .hane-arma{color:var(--en)}
.kv-hane .hane-govde{min-width:0;flex:1}
.kv-hane .hane-ust{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kv-hane h2{font-size:clamp(26px,3.4vw,40px);letter-spacing:.6px;line-height:1.08;margin:0;
  text-shadow:0 2px 14px rgba(0,0,0,.6)}
.kv-hane p{margin:8px 0 0;font-size:15px}
.kv-hane .dh-ava{flex:0 0 auto}
/* Rozet şeridi: yeni HİÇBİR kelime eklenmedi — yalnız ikon + zaten var olan sayı. */
.hane-rozet{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.hane-rozet span{display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;font-size:13px;font-weight:700;color:#f0e9ff;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14)}
.hane-rozet .hz-klan{color:#ffd98f;border-color:rgba(232,194,104,.42);
  background:linear-gradient(180deg,rgba(232,194,104,.2),rgba(232,194,104,.07))}
/* Karargâh bandının kendi mekânı: sur mazgalları + dolunay + hale.
   Mazgal ölçüsü gerçek surdan: diş 16, boşluk 14 piksel; altında 30 piksellik
   kesintisiz sur gövdesi. (İlk denemede diş 28/30'du ve sütun grafiği gibi
   duruyordu — dar diş + sürekli gövde onu silüete çeviriyor.) */
.dh-welcome{position:relative;overflow:hidden;border-radius:16px}
.dh-welcome::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(4,2,9,.93) 0 16px,transparent 16px 30px),
    linear-gradient(rgba(4,2,9,.93),rgba(4,2,9,.93)),
    radial-gradient(circle at 87% 30%,rgba(244,240,255,.62) 0 16px,transparent 17px),
    radial-gradient(circle at 87% 30%,rgba(214,198,255,.22) 0 44px,transparent 62px),
    radial-gradient(620px 240px at 87% 8%,rgba(139,75,255,.34),transparent 74%);
  background-size:100% 13px,100% 30px,100% 100%,100% 100%,100% 100%;
  background-position:0 calc(100% - 30px),0 100%,0 0,0 0,0 0;
  background-repeat:repeat-x,no-repeat,no-repeat,no-repeat,no-repeat}
.dh-welcome > *{position:relative;z-index:1}
body.f-ay .dh-welcome{background:radial-gradient(520px 220px at 92% -30%,rgba(67,167,224,.3),transparent 62%),
  linear-gradient(120deg,rgba(24,58,96,.34),rgba(122,60,255,.2))}

/* ---------- 4) PANEL AĞIRLIĞI — gotik ayraç ve oyulmuş yüzey ----------
   Sayı listeleri (Savaş İstatistiğin / Dövüş Gücü) düz tablo gibi duruyordu:
   üç panel birbirinin aynıydı, göz hiçbir yere çekilmiyordu. */
.panel h2,.panel h3{position:relative}
.panel > h2:first-child::after,.panel > h3:first-child::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;
  background:
    linear-gradient(90deg,rgba(232,194,104,.45),rgba(232,194,104,.06) 38%,transparent 62%)}
.panel > h2:first-child,.panel > h3:first-child{padding-bottom:4px}
.hero-panel h2::after,.welcome h2::after{display:none}
/* Sayı satırları: bantlı zemin + sol kenarda ince altın iz — liste artık okunacak
   bir tablo değil, oyulmuş bir künye gibi duruyor. */
.stat-row{padding:9px 12px;border-radius:8px;border-bottom:1px solid var(--line)}
.stat-row:nth-child(odd){background:rgba(255,255,255,.028)}
.stat-row b{font-size:17px;font-variant-numeric:tabular-nums}

/* ---------- 5) NADİRLİK: eşyanın değeri ÇERÇEVEDEN okunsun ----------
   Efsanevi Cehennem Tırpanı ile Paslı Hançer aynı kartta, aynı gri çerçevede
   duruyordu; tek fark küçük bir rozetti. Renk TEK BAŞINA taşımıyor: nadirlik
   etiketi (Standart/Efsanevi) zaten kartın üstünde yazıyor — çerçeve onu
   güçlendiriyor, yerine geçmiyor (renk körlüğü kuralı). */
.mk-card{position:relative;overflow:hidden}
.mk-card[style*="--nd"]{border-color:color-mix(in srgb,var(--nd) 55%,var(--line));
  box-shadow:var(--edge),0 8px 20px -18px rgba(0,0,0,.95),0 0 0 1px color-mix(in srgb,var(--nd) 18%,transparent)}
.mk-card[style*="--nd"]::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(180deg,var(--nd),transparent 85%)}
.mk-card[style*="--nd"]::after{content:"";position:absolute;inset:-40% -30% auto auto;width:150px;height:110px;
  border-radius:50%;background:radial-gradient(circle,var(--nd),transparent 68%);opacity:.14;pointer-events:none}
/* İkon artık bir levha içinde duruyor: 34 piksellik serbest emoji değil, çerçeveli nişan. */
.mk-ic{display:flex;align-items:center;justify-content:center;width:58px;height:58px;font-size:30px;
  border-radius:12px;border:1px solid var(--line2);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.28));
  box-shadow:var(--edge)}
.mk-card[style*="--nd"] .mk-ic{border-color:color-mix(in srgb,var(--nd) 60%,var(--line2));
  background:radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--nd) 34%,transparent),rgba(0,0,0,.34) 78%)}
.mk-ic img{width:38px;height:38px;display:block}
/* Karargâh'taki "Kuşanılı Ekipman" satırı da aynı dili konuşur: solda nadirlik
   rengi, ikon çerçeveli levhada. Aynı eşya artık iki ekranda aynı görünüyor. */
.stat-row.eq-row{justify-content:flex-start;gap:10px;box-shadow:inset 3px 0 0 var(--nd,var(--line2))}
.stat-row.eq-row .eq-ic{display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;flex:none;border-radius:8px;
  border:1px solid color-mix(in srgb,var(--nd,var(--line2)) 45%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--nd,transparent) 14%,transparent),rgba(0,0,0,.28))}
.stat-row.eq-row .eq-ic img{width:20px;height:20px;display:block}

/* ---------- 6) AVATAR: klan halkası ----------
   Avatar oyunun her ekranında duran tek "oyuncu resmi"ydi ama çerçevesi
   nötr griydi — Kan da Ay da aynı. Halka artık tarafı söylüyor. */
.tb-id > span:first-child,.side-me > span:first-child,.dh-ava > span,.kv-hane .dh-ava > span{
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 14px -2px var(--kan-glow)}
body.f-ay .tb-id > span:first-child,body.f-ay .side-me > span:first-child,body.f-ay .dh-ava > span{
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 14px -2px var(--ay-glow)}
.kv-hane .dh-ava > span{border-color:rgba(232,194,104,.55)!important;
  box-shadow:0 0 0 3px rgba(10,7,17,.75),0 0 0 4px rgba(232,194,104,.3),0 6px 18px -6px #000}

/* ---------- 7) MOBİL ----------
   390 pikselde sahne katmanı sadeleşir: kemer/tente döşemesi küçülür, kahraman
   bandı alt alta diziler. Hiçbir öğe yatayda taşmaz. */
@media(max-width:700px){
  .hero-panel{min-height:98px}
  /* Perde mobilde soldan değil YUKARIDAN iner: dar ekranda yazı bandın tamamını
     kaplıyor, yandan açılan perde hiçbir işe yaramıyordu. */
  .hero-panel::after{background:linear-gradient(180deg,rgba(9,6,15,.8),rgba(9,6,15,.5) 62%,rgba(9,6,15,.2))}
  .kv-hane{gap:12px;padding:16px 14px 44px;min-height:0;align-items:flex-start}
  .kv-hane .hane-arma svg{width:66px;height:84px}
  .kv-hane .hane-ust{flex-wrap:nowrap;gap:10px;min-width:0}
  /* avatar_html() ölçüyü satır içi yazıyor; JS'siz küçültmenin tek yolu !important */
  .kv-hane .dh-ava > span{width:46px!important;height:46px!important;font-size:24px!important}
  .kv-hane h2{font-size:clamp(20px,5.9vw,28px);min-width:0}
  .kv-hane p{font-size:13.5px}
  .hane-rozet{margin-top:10px;gap:6px}
  .hane-rozet span{font-size:12px;padding:4px 9px}
  /* Sur incelir ve dibe iner (390'da geniş diş sütun grafiği gibi duruyordu).
     AY MOBİLDE ÇIKARILDI: premium tacıyla tam aynı noktaya düşüyordu, 390 pikselde
     iki simge üst üste biniyordu. Mekân duygusunu sur zaten taşıyor. */
  .dh-welcome::after{
    background-image:
      repeating-linear-gradient(90deg,rgba(4,2,9,.93) 0 11px,transparent 11px 21px),
      linear-gradient(rgba(4,2,9,.93),rgba(4,2,9,.93)),
      radial-gradient(460px 200px at 88% 0%,rgba(139,75,255,.34),transparent 74%);
    background-size:100% 9px,100% 18px,100% 100%;
    background-position:0 calc(100% - 18px),0 100%,0 0}
}

/* ================= HAREKET DUYARLILIĞI ================= */
/* 10 Eyl 2026: sitede hiç prefers-reduced-motion kuralı yoktu — parlayan logo,
   süzülen aura, kayan paneller işletim sisteminde "hareketi azalt" seçmiş
   oyuncuda da dönüyordu. Süreler sıfırlanıyor, iterasyon 1'e iniyor: her
   animasyon SON karesine sabitleniyor. Bilerek "animation:none" değil —
   none, gradyanlı logoların (shine) ve fadeUp ile gelen kartların bitiş
   durumunu kaybettirebilir; sıfır süre ise bitiş karesini garanti eder. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto}
  /* Atmosfer katmanları hareketsiz ama görünür kalsın — sabit bir duruş alsınlar */
  .landing .aura{animation:none;opacity:.6}
  .hero::before{animation:none;opacity:.6;transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   SAĞDAN SOLA (RTL) — Arapça
   ★ 21 Eyl 2026. <html dir="rtl"> metni ve flex akışını kendiliğinden
   çevirir; burada YALNIZ yönü elle yazılmış kurallar aynalanır. Tüm dosyayı
   logical property'ye çevirmek yerine hedefli düzeltme yapıldı: kural sayısı
   az (50 left/right), hepsini dönüştürmek soldan sağa düzeni bozma riski
   taşıyordu. Yeni yön kuralı yazarsan buraya da aynasını ekle.
   ═══════════════════════════════════════════════════════════════ */
[dir="rtl"] th,
[dir="rtl"] td                       { text-align:right }
[dir="rtl"] .bf-rank th.num,
[dir="rtl"] .bf-rank td.num          { text-align:left }
[dir="rtl"] .side-nav .cikis-b       { text-align:right }
[dir="rtl"] .legal ul                { padding-left:0; padding-right:20px }
[dir="rtl"] .brand-logo              { margin-right:0; margin-left:.12em }
[dir="rtl"] .brandbig .brand-logo    { margin-right:0; margin-left:.18em }
[dir="rtl"] .bf-tag                  { margin-right:0; margin-left:2px }
[dir="rtl"] .notif-row .nf-t         { margin-right:0; margin-left:2px }
[dir="rtl"] .tb-id                   { padding-right:0; padding-left:14px }
[dir="rtl"] .kpi .ic                 { right:auto; left:12px }
[dir="rtl"] .inv-eq                  { right:auto; left:6px }
[dir="rtl"] .tb-mail .badge          { right:auto; left:-6px }
[dir="rtl"] .hero-arma               { right:auto; left:20px }
[dir="rtl"] .hq-pop .hq-x            { float:left; margin:-2px 10px 0 -4px }
[dir="rtl"] .bar i                   { left:auto; right:0; border-radius:0 20px 20px 0 }
[dir="rtl"] .bar i::after            { right:auto; left:0 }
[dir="rtl"] .trk-bar>span::after     { right:auto; left:0 }
[dir="rtl"] .side-toggle             { left:auto; right:12px }
/* Kenar çubuğu: kenarlık ve gölge de aynalanır */
[dir="rtl"] .sidebar                 { border-right:0; border-left:1px solid #000;
                                       box-shadow:inset 1px 0 0 #33283f, -6px 0 24px -10px #000 }
@media (max-width:1000px){
  [dir="rtl"] .sidebar               { left:auto; right:-280px; transition:right .25s ease;
                                       box-shadow:-10px 0 40px -6px #000 }
  [dir="rtl"] .sidebar.open          { right:0 }
  [dir="rtl"] .topbar                { padding-left:0; padding-right:64px }
  [dir="rtl"] .side-toggle           { left:auto; right:calc(12px + env(safe-area-inset-right)) }
}
@media (max-width:760px){
  [dir="rtl"] .adm-ops .op-l         { text-align:left }
  [dir="rtl"] .wallet                { margin-left:0; margin-right:0 }
}