/* At ve Pusat — tam ekran oba, kırık beyaz (griye çalan) kutular, kodla çizilmiş kiriş */
:root{
  --bg:#121009;
  /* açık kutu paleti */
  --kutu:#e8e4da;
  --kutu-2:#f0ede5;
  --kutu-koyu:#dcd6c8;
  --cizgi:#b5ad9b;
  --cizgi-soft:#d6d0c2;
  --murekkep:#2b241a;
  --soluk:#6e6555;
  --bronz:#7c5f16;
  --bronz-acik:#a3831f;
  --kirmizi:#a03325;
  --yesil:#4c7030;
  --gold:#c9a227;
  --gold-koyu:#8a6f1f;
  --hun:#9a4a2b;
  --gokturk:#41628f;
  --cin:#e0b21e;          /* Uygur sarısı */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--murekkep);font:15px/1.5 "Segoe UI",system-ui,sans-serif;overflow:hidden}
h1,h2,h3,.logo{font-family:Georgia,"Times New Roman",serif;letter-spacing:.06em}
.hidden{display:none!important}
img{max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
input{font:inherit;color:var(--murekkep)}

/* ---------- butonlar ---------- */
.btn{
  background:#efece4;border:1px solid #a99f8a;border-radius:4px;
  color:#4a3d22;padding:7px 14px;letter-spacing:.04em;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
  transition:background .15s,border-color .15s;
}
.btn:hover:not(:disabled){background:#e2dccd;border-color:var(--bronz)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.buyuk{font-size:17px;padding:11px 26px}
.btn.kucuk{font-size:12px;padding:4px 10px}
.btn.tehlike{border-color:#c08a7b;color:var(--kirmizi)}
.btn.tehlike:hover:not(:disabled){background:#ecdcd4;border-color:var(--kirmizi)}

/* ---------- kutu (ortak açık panel görünümü) ---------- */
.kutu, .cerceve, #queue-banner, #modal-kutu, .res-kutu, .logo, .oba-bilgi, #kiris{
  background:linear-gradient(#f2efe8,var(--kutu));
  border:1px solid var(--cizgi);
  border-radius:6px;
  box-shadow:0 3px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.6);
}

/* ---------- tam ekran oba ---------- */
#koy-viewport{position:fixed;inset:0;overflow:hidden;background:#0d0b07;z-index:0}
#koy-dunya{position:absolute}
/* ZEMİN AYRI KATMANDA. Binalar da zemin de kahve tonlarındaydı ve doygunlukları
   birbirinin aynıydı (0.30 / 0.30); üst üste gelince binalar zemine gömülüyordu.
   Zemini biraz soldurup karartınca binalar hem ton hem renk olarak öne çıkıyor.
   Süzgeç `#koy-dunya`ya uygulanamaz — slotlar onun çocuğu, binalar da solardı;
   bu yüzden zemin `::before`e alındı. Görsel yolu JS'ten `--zemin` ile gelir. */
#koy-dunya::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  /* Zemin yalnız soldurulunca griye kaçıp ölü toprak gibi duruyordu; üstüne
     çim yeşilini YUMUŞAK IŞIK olarak seriyoruz. İlk denemedeki 122,142,74
     zeytin/haki bir tondu ve kahve zeminde HARDALA dönüyordu; saf yeşil ise
     (86,160,74) fazla "çim" kaçtı. Seçilen ton ikisinin ortası — hardal
     yeşili. Güç alfayla ayarlanır (.40); yükseltirsen çit ve binalar da
     yeşile boyanmaya başlar, ayrışma bozulur. */
  background-image:
    linear-gradient(rgba(104,151,74,.40), rgba(104,151,74,.40)),
    var(--zemin);
  background-size:100% 100%,100% 100%;
  background-repeat:no-repeat,no-repeat;
  background-blend-mode:soft-light,normal;
  filter:saturate(.95) brightness(.97);
}

/* bina yerleri — çizili daire yok, zemindeki lekeler görünür */
.slot{position:absolute;transform:translate(-50%,-50%);padding:0}
.slot:hover{z-index:500!important}
.slot::after{
  content:"";position:absolute;inset:-4%;border-radius:50%;
  border:2px solid rgba(233,220,180,0);
  transition:border-color .15s,box-shadow .15s;
  pointer-events:none;
}
/* Halka YALNIZ boş yerde: "buraya bina kurulur" işareti. Kurulu binanın
   üstünde halka çizmek binayı çerçeveliyordu; orada büyüme + parlaklık
   (.slot.dolu:hover img) zaten yeterli geri bildirim. */
.slot.bos:hover::after{
  border-color:rgba(240,230,200,.85);
  box-shadow:0 0 16px rgba(240,230,200,.35),inset 0 0 16px rgba(240,230,200,.12);
}
/* binanın en alt pikseli dairenin en alt noktasına oturur, yatayda ortalı */
.slot.dolu img{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:114%;max-width:none;
  filter:drop-shadow(0 6px 7px rgba(0,0,0,.55));
  pointer-events:none;
  transition:filter .15s,transform .15s;
}
.slot.dolu:hover img{
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.6)) brightness(1.1);
  transform:translateX(-50%) scale(1.04);
}
.sv-rozet{
  position:absolute;right:2%;bottom:4%;z-index:2;
  background:linear-gradient(#f4f0e6,#d9d2c0);color:var(--murekkep);
  border:1px solid #a99f8a;border-radius:50%;
  min-width:23px;height:23px;padding:0 3px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;
  pointer-events:none;box-shadow:0 2px 5px rgba(0,0,0,.55);
}
/* henüz kurulmamış bina: soluk hayalet önizleme */
.slot.kurulmamis img{opacity:.3;filter:grayscale(.7) brightness(.8)}
.slot.kurulmamis:hover img{opacity:.62;filter:grayscale(.3) brightness(1)}
.slot.kurulmamis .sv-rozet{
  background:linear-gradient(#e6e2d6,#cec7b5);color:#6e6555;
  font-size:15px;line-height:1;
}
.slot.sade .sv-rozet{
  right:auto;bottom:auto;left:50%;top:50%;
  transform:translate(-50%,-50%);
  min-width:26px;height:26px;font-size:13px;
}
.slot.insada::after{
  border-color:rgba(240,230,200,.9);
  animation:nabiz 1.2s ease-in-out infinite;
}
@keyframes nabiz{
  0%,100%{box-shadow:0 0 0 0 rgba(240,230,200,.5)}
  50%{box-shadow:0 0 0 9px rgba(240,230,200,0)}
}

/* ---------- üst bant: kodla çizilmiş kiriş ---------- */
#ust{
  position:fixed;top:8px;left:0;right:0;z-index:40;
  display:flex;align-items:flex-start;justify-content:center;
  padding:0 14px;pointer-events:none;
}
#ust>*{pointer-events:auto}
.logo{
  position:absolute;left:14px;top:0;
  margin-top:12px;padding:0;line-height:0;
}
.logo img{height:34px;width:auto;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
@media (max-width:760px){ .logo img{height:24px} }
#kiris{
  padding:11px 40px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  border-radius:16px;
  background:
    linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,0) 45%,rgba(0,0,0,.05)),
    repeating-linear-gradient(90deg,rgba(90,75,40,.05) 0 2px,transparent 2px 11px),
    linear-gradient(#f4f1e9,#dcd6c8);
  border:1px solid #a99f8a;
  box-shadow:
    0 5px 14px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 0 0 3px rgba(124,95,22,.12),
    inset 0 -3px 5px rgba(0,0,0,.06);
}
#kiris::before,#kiris::after{
  content:"";position:absolute;top:50%;width:12px;height:12px;
  transform:translateY(-50%) rotate(45deg);
  background:linear-gradient(135deg,#d8bd6f,#8a6f1f);
  border:1px solid #6e5714;border-radius:2px;
  box-shadow:0 1px 3px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.4);
}
#kiris::before{left:13px}
#kiris::after{right:13px}
#menu{display:flex;gap:22px;align-items:center}
/* Madalyon + altında adı. Yükseklik sabit DEĞİL: yazı sığsın. */
.menu-btn{
  position:relative;width:64px;padding:0;transition:transform .12s;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.menu-ad{
  font-size:11px;line-height:1;letter-spacing:.01em;font-weight:600;
  /* Kiriş açık parşömen (#f4f1e9→#dcd6c8): yazı KOYU olmalı, krem okunmuyordu */
  color:var(--murekkep);text-shadow:0 1px 0 rgba(255,255,255,.55);
  white-space:nowrap;pointer-events:none;
}
.menu-btn:hover .menu-ad{color:#000}
.menu-btn:hover{transform:translateY(-2px) scale(1.05)}
.menu-btn::before{
  content:"";position:absolute;top:-5px;left:-5px;width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,0,0,.16) 55%,rgba(0,0,0,0) 72%);
  pointer-events:none;
}
/* Madalyonun kendi bronz bordürü var; üstüne CSS'ten ikinci bir halka
   (bronz + beyaz) çizmek kenarı bulandırıyordu. Yalnız derinlik gölgesi. */
.menu-btn img{
  position:relative;width:64px;height:64px;border-radius:50%;
  box-shadow:0 3px 9px rgba(0,0,0,.55);
  filter:saturate(1.20) contrast(1.07);   /* açık kirişte tokluk kazandırır */
  transition:filter .12s;
}
.menu-btn:hover img{  /* üstteki süzgeci ezer, bilerek */
  box-shadow:0 5px 13px rgba(0,0,0,.6);
  filter:brightness(1.12) saturate(1.06);
}
.menu-btn .rozet{
  position:absolute;top:-5px;right:-6px;z-index:2;
  background:var(--kirmizi);color:#f6ece4;border-radius:9px;
  font-size:11px;line-height:1;padding:2px 6px;border:1px solid #7c2418;
}
.oba-bilgi{
  display:flex;align-items:center;gap:9px;font-size:13px;
  margin-top:14px;padding:5px 10px;
}
.irk-rozet{
  border:1px solid var(--irk,var(--bronz));color:var(--irk,var(--bronz));
  border-radius:3px;padding:0 8px;font-size:12px;letter-spacing:.06em;
  background:rgba(255,255,255,.45);
}

/* ---------- kaynaklar: solda dikey liste ---------- */
#resbar{
  position:fixed;left:12px;top:60px;z-index:35;
  display:flex;flex-direction:column;gap:9px;width:200px;
  /* overflow-x:hidden ŞART: overflow-y:auto tek başına x'i de "auto" yapıyor;
     ordu kutusu birkaç piksel taşınca sütunun altında yatay kaydırma çubuğu çıkıyordu. */
  max-height:calc(100vh - 74px);overflow-y:auto;overflow-x:hidden;
}
.res-kutu{
  display:flex;align-items:center;gap:11px;
  padding:7px 11px;
}
/* Kaynak simgeleri AÇIK parşömen kirişte duruyor (zemin ~0.90, simge ~0.24):
   kontrast zaten bol, aydınlatmak ayrımı azaltırdı. Onlara gereken tokluk —
   doygunluk ve biraz kontrast. Binalarda/askerlerde ise tam tersi yapıldı. */
.res-kutu img{
  width:44px;height:44px;object-fit:contain;flex:none;
  filter:saturate(1.24) contrast(1.09) drop-shadow(0 2px 3px rgba(0,0,0,.3));
}
.res-detay{min-width:0}
.res-miktar{font-size:16px;font-weight:700;white-space:nowrap;line-height:1.15;color:var(--murekkep)}
.res-miktar .cap{color:var(--soluk);font-weight:400;font-size:11.5px}
.res-oran{font-size:11.5px;color:var(--yesil);white-space:nowrap;font-weight:600}
.res-oran.eksi{color:var(--kirmizi)}
.res-kutu.dolu .res-miktar{color:var(--kirmizi)}

/* ---------- kuyruk bandı ---------- */
#queue-banner{
  position:fixed;bottom:36px;left:50%;transform:translateX(-50%);   /* sohbet şeridinin üstünde (2026-09-12) */
  width:min(380px,92vw);z-index:34;
  padding:7px 12px;
}
/* Kuyruk bandı YALNIZ oba görünümünde. Harita açıkken karo menüsünün üstüne
   biniyordu: #harita-ekran (z:5) kendi yığın bağlamını kurduğu için menünün
   z:80'i banttan (z:34) yukarı çıkamıyor. */
body.harita-acik #queue-banner{display:none}
.qb-metin{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:4px;color:var(--murekkep)}
.qb-metin span:last-child{color:var(--bronz);font-variant-numeric:tabular-nums;font-weight:600}
.bar{height:5px;background:#cfc8b8;border-radius:3px;overflow:hidden}
.bar-ic{height:100%;width:0;background:linear-gradient(90deg,var(--bronz),var(--bronz-acik));transition:width .25s linear}

/* ---------- sağ sütun ---------- */
#sag-sutun{
  position:fixed;top:104px;right:12px;width:256px;z-index:30;
  max-height:calc(100vh - 118px);overflow-y:auto;
  display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin;
}
.cerceve{padding:9px 12px 11px}
.cerceve h3{
  color:#5d4a17;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--cizgi-soft);padding-bottom:5px;margin-bottom:7px;
}
/* oba listesi */
#oba-sayac{color:var(--soluk);font-size:11.5px;letter-spacing:0;font-variant-numeric:tabular-nums}
.oba-sat{
  display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;
  padding:6px 9px;border-radius:4px;font-size:13px;margin-bottom:5px;text-align:left;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);color:var(--murekkep);
}
.oba-sat:hover{background:#e6e1d3}
.oba-sat.aktif{border-color:var(--bronz);background:#efe9d8;box-shadow:inset 3px 0 0 var(--bronz)}
.oba-sat-ad{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oba-sat.aktif .oba-sat-ad{color:#5d4a17}
.oba-sat-koord{color:var(--soluk);font-size:11.5px;font-variant-numeric:tabular-nums;flex:none}

/* kültür puanı kutusu (Travian'daki ilerleme barı gibi, liste üstünde) */
#kultur-kutu{margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid var(--cizgi-soft)}
.kultur-satir{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:4px}
.kultur-satir b{color:var(--bronz);font-variant-numeric:tabular-nums}
.kultur-alt{font-size:11px;color:var(--soluk);margin-top:4px}

/* sol menüdeki ordu paneli — hardal sarısı, yalnız görsel + sayı */
.ordu-kutu{
  margin-top:6px;padding:6px;border-radius:6px;
  background:linear-gradient(#d9b64e,#c39a33);
  border:1px solid #9a7620;
  box-shadow:0 3px 12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.45);
  /* minmax(0,1fr): "1fr" içeriğin en küçük genişliğinin altına inmiyor —
     uzun sayı rozeti sütunu genişletip kutuyu 200px sütundan taşırıyordu. */
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
}
.ordu-birim{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1;padding:0;border-radius:5px;overflow:hidden;
  background:rgba(255,255,255,.16);border:1px solid rgba(90,67,16,.3);
  transition:background .13s,border-color .13s,transform .13s;
}
.ordu-birim:hover{background:rgba(255,255,255,.34);border-color:#7d5f14;transform:translateY(-1px)}
/* görsel kareye TAM sığar, kırpılmaz */
.ordu-birim img{
  width:100%;height:100%;max-width:none;max-height:none;
  object-fit:contain;padding:3px;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.ordu-sayi{
  position:absolute;right:-4px;bottom:-4px;
  min-width:28px;height:25px;padding:0 7px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(#3d3115,#2a2210);color:#f0dda6;
  border:1px solid #8a6f1f;font-size:14px;font-weight:700;
  font-variant-numeric:tabular-nums;box-shadow:0 2px 6px rgba(0,0,0,.55);
}

.ordu-bos{
  grid-column:1/-1;text-align:center;font-size:11px;color:#6b541a;
  padding:8px 4px;letter-spacing:.04em;
}

/* eğitim: birim seçici jetonlar */
.egit-secici{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.egit-jeton{
  width:58px;height:64px;padding:3px;border-radius:5px;
  background:#fff;border:2px solid var(--cizgi-soft);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .13s,transform .13s;
}
.egit-jeton:hover{transform:translateY(-1px);border-color:var(--cizgi)}
.egit-jeton.secili{border-color:var(--bronz);box-shadow:0 0 0 1px var(--bronz)}
.egit-jeton img{max-width:100%;max-height:100%;object-fit:contain}

.egit-jeton{position:relative}
.egit-jeton.kilitli img{filter:grayscale(1) brightness(.72);opacity:.6}
.egit-kilit{
  position:absolute;right:2px;bottom:2px;font-size:12px;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* akademi: araştırma listesi */
.arastirma-liste{display:flex;flex-direction:column;gap:5px}
.arastirma-sat{
  display:flex;align-items:center;gap:10px;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);border-radius:5px;
  padding:5px 9px;
}
.arastirma-sat.acik{opacity:.72}
.arastirma-bilgi{flex:1;min-width:0;font-size:12.5px}
.arastirma-bilgi b{display:block;color:#3a2c08}
.arastirma-bilgi i{font-style:normal;font-size:11px;color:var(--soluk)}
/* Bina yıkım satırı: ad + süre. İade dökümü satırdan kaldırıldı (2026-09-02),
   oran tek yerde, listenin üstündeki açıklamada. `flex-wrap` artık gereksiz:
   satır tek satıra sığıyor, sarma yalnız dar ekranda düğmeleri alta atsın. */
.yikim-sat{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.yikim-sat.suren{background:rgba(140,47,34,.12);border-radius:5px;padding:4px 7px}
.yikim-bilgi{flex:1;min-width:0;font-size:11px;color:var(--soluk);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.yikim-sayac{font-variant-numeric:tabular-nums;font-size:12px;font-weight:600}
/* Damga İşliğinde araştırma bedeli: dört kaynak + süre, simgeli */
.arastirma-mal{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:11.5px;font-variant-numeric:tabular-nums;
}
.arastirma-mal>span{display:inline-flex;align-items:center;gap:2px}
.arastirma-mal b{font-weight:600;color:#3a2c08}
.arastirma-mal .yetmez b{color:var(--kirmizi)}
.arastirma-mal i{font-style:normal;color:var(--soluk);margin-left:2px}
@media (max-width:760px){
  .arastirma-sat{flex-wrap:wrap}
  .arastirma-mal{width:100%;order:3;gap:9px}
  /* SART METNI KENDI SATIRINA (2026-09-02). "Tamga Ocagi sv 15 · Bozan Isligi
     sv 10" gibi uzun sartlar adin yanina sikisip ortasindan sariyordu; Mancinik
     satirinda "Bozan Isligi" alta dusup birim turuyle ic ice giriyordu.
     `:not()` ile YALNIZ sart metnine uygulaniyor — "Arastirildi" ve geri sayim
     kisa, onlari tam genislige almak bosuna dikey yer yerdi. */
  .arastirma-durum:not(.ok):not(.surecte){
    width:100%;order:3;text-align:left;line-height:1.35;
  }
}
.arastirma-durum{font-size:11.5px;color:var(--soluk);text-align:right}
.arastirma-durum.ok{color:#4c7030;font-weight:600}
/* Kuyrukta "geri çağır": yeni kalkmış ordu için kısa süreli düğme */
/* tek × işareti: sürenin yanında, SATIR İÇİNDE. Ayrı satıra taşımak
   (grid-column) kuyruğu dikeyde büyütüyordu; şimdi metin yüksekliğini aşmaz. */
.kuyruk-geri{
  flex:none;align-self:center;
  width:15px;height:15px;padding:0;border-radius:50%;
  background:rgba(140,47,34,.85);border:1px solid #7c2418;color:#f6ece4;
  font-size:10px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.kuyruk-geri:hover{background:rgba(168,58,42,.95)}
/* Damga İşliğinde portre ve ad tıklanır: birim kutusunu açar */
.birim-ac{background:none;border:0;padding:0;cursor:pointer}
.birim-ac img{transition:transform .12s,filter .12s}
.birim-ac:hover img{transform:scale(1.07);filter:brightness(1.12)}
.birim-ac-yazi{cursor:pointer}
.birim-ac-yazi:hover b{color:var(--bronz)}
.arastirma-durum.surecte{color:var(--bronz);font-weight:600;font-variant-numeric:tabular-nums}

/* pazar: takas */
.pazar-form{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:9px}
.pazar-sec{
  padding:4px 8px;font:inherit;font-size:13px;color:var(--ink);
  background:#fff;border:1px solid var(--cizgi-soft);border-radius:4px;
}

/* seçili birimin büyük görüntüsü — beyaz zemin */
.egit-ust{display:flex;gap:12px;align-items:flex-start;margin-bottom:8px}
.egit-onizleme{
  flex:none;width:132px;height:172px;padding:6px;border-radius:6px;
  background:#fff;border:1px solid var(--cizgi-soft);
  display:flex;align-items:center;justify-content:center;
  cursor:zoom-in;transition:box-shadow .13s;
}
.egit-onizleme:hover{box-shadow:0 0 0 2px var(--bronz)}
.egit-onizleme img{max-width:100%;max-height:100%;object-fit:contain}
.egit-ust .egit-bilgi{flex:1;min-width:0;margin-bottom:0}
@media (max-width:760px){
  .egit-onizleme{width:104px;height:136px}
}
.egit-bilgi{font-size:13px;margin-bottom:6px}
.egit-bilgi b{color:#5d4a17}
.birim-tur-mini{font-size:11px;color:var(--soluk);margin-left:6px}
.egit-statlar{display:flex;gap:12px;margin-top:3px;font-size:11.5px;color:var(--soluk);font-variant-numeric:tabular-nums}

/* kadro seçici (akın) */
.kadro-kap{margin-bottom:10px}
.kadro-satir{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.kadro-birim{
  flex:none;width:38px;height:42px;display:flex;align-items:center;justify-content:center;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);border-radius:4px;padding:2px;
}
.kadro-birim img{max-width:100%;max-height:100%;object-fit:contain}
.kadro-ad{flex:1;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kadro-adet{width:70px}
.kadro-kap.koyu .kadro-ad{color:#ddd9cf}
.kadro-kap.koyu .kadro-birim{background:#2c2b26;border-color:#57544c}
.kadro-kap.koyu .kadro-adet{background:#26251f;border-color:#57544c;color:#e6e0d2}
.kadro-kap.koyu .btn{background:#3d3b35;border-color:#57544c;color:#e6e0d2}

/* tam ekran görsel */
.birim-gorsel.buyutulebilir{cursor:zoom-in}
.birim-gorsel.buyutulebilir:hover{box-shadow:0 0 0 2px var(--bronz)}
.gorsel-tam{
  position:fixed;inset:0;z-index:200;
  background:rgba(8,6,3,.9);
  display:flex;align-items:center;justify-content:center;
  cursor:zoom-out;
}
.gorsel-tam img{
  max-width:88vw;max-height:84vh;object-fit:contain;
  background:#fff;border-radius:8px;padding:14px;
  box-shadow:0 14px 46px rgba(0,0,0,.7);
}
.gt-ad{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  font-family:Georgia,serif;font-size:18px;letter-spacing:.1em;color:#e8d49a;
  text-shadow:0 2px 8px #000;
}
.gt-kapat{
  position:fixed;top:14px;right:16px;width:38px;height:38px;border-radius:50%;
  background:rgba(40,36,28,.85);border:1px solid #6b6455;color:#e6e0d2;font-size:16px;
}
.gt-kapat:hover{background:rgba(60,54,42,.95)}

/* birim detay kutusu */
.birim-kart{display:flex;gap:16px;align-items:flex-start}
.birim-gorsel{
  flex:none;width:150px;
  background:#fff;
  border:1px solid var(--cizgi-soft);border-radius:6px;padding:8px;
  display:flex;align-items:center;justify-content:center;
}
.birim-gorsel img{max-width:100%;max-height:260px;object-fit:contain}
.birim-ic{flex:1;min-width:0}
.birim-ic h2{font-size:21px;color:#5d4a17;line-height:1.15}
.birim-tur{font-size:12px;color:var(--soluk);letter-spacing:.06em;margin-bottom:8px}
.birim-ic .statlar{grid-template-columns:repeat(3,1fr)}
.birim-aciklama{font-size:12.5px;color:var(--soluk);line-height:1.55;margin:8px 0 4px}
@media (max-width:760px){
  .birim-kart{flex-direction:column;align-items:center}
  .birim-gorsel{width:100%;max-width:220px}
  .birim-ic{width:100%}
}

/* oba kartındaki küçük sıfırla bağlantısı */
#btn-reset{
  font-size:10.5px;color:#b08878;letter-spacing:.05em;padding:0 2px;
  border-bottom:1px dotted rgba(176,136,120,.5);
}
#btn-reset:hover{color:var(--kirmizi);border-bottom-color:var(--kirmizi)}

/* oba kartı (Travian tarzı: ad kutusu + kalem, nüfus/sadakat satırı) */
#oba-kart{padding:8px 11px 9px}
.ok-ust{font-size:11.5px;color:var(--soluk);letter-spacing:.04em;margin-bottom:3px}
.ok-ad-satir{display:flex;align-items:center;gap:6px}
#ok-ad{
  flex:1;min-width:0;background:transparent;border:1px solid transparent;border-radius:4px;
  font-family:Georgia,"Times New Roman",serif;font-size:17px;letter-spacing:.09em;
  color:#4a3a12;padding:3px 5px;
}
#ok-ad:hover{border-color:var(--cizgi-soft);background:rgba(255,255,255,.5)}
#ok-ad:focus{outline:none;border-color:var(--bronz);background:#fbf9f3}
#ok-kalem{
  flex:none;width:26px;height:26px;border-radius:4px;font-size:14px;
  color:var(--soluk);border:1px solid transparent;
}
#ok-kalem:hover{color:var(--bronz);border-color:var(--cizgi-soft);background:rgba(255,255,255,.55)}
.ok-alt{
  display:flex;justify-content:space-between;gap:8px;
  font-size:11.5px;color:var(--soluk);
  border-top:1px solid var(--cizgi-soft);margin-top:6px;padding-top:5px;
}
.ok-alt b{color:var(--murekkep)}

/* kirişteki ⋯ butonu (yalnız mobil) */
#btn-oba-menu{
  display:none;flex:none;margin-top:12px;
  width:34px;height:34px;border-radius:50%;font-size:17px;line-height:1;
  background:linear-gradient(#f2efe8,var(--kutu));border:1px solid var(--cizgi);
  color:#5d4a17;box-shadow:0 2px 7px rgba(0,0,0,.4);
}
.kuyruk-satir{
  display:flex;justify-content:space-between;gap:8px;
  font-size:12px;padding:5px 2px;border-bottom:1px solid var(--cizgi-soft);
}
.kuyruk-satir:last-child{border-bottom:none}
.kuyruk-satir .ne{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kuyruk-satir .sure{color:var(--bronz);font-variant-numeric:tabular-nums;flex:none;font-weight:600}
.kuyruk-satir .tur{color:var(--soluk);flex:none;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.bos-mesaj{color:var(--soluk);font-size:12.5px;padding:12px 4px;text-align:center}

/* ---------- cihan haritası ---------- */
/* harita açıkken oba arkada kalır — çok hafif karartma, sağ sütun yerinde durur */
#harita-ekran{
  position:fixed;inset:0;z-index:5;
  background:rgba(10,8,5,.22);
  display:flex;gap:12px;padding:104px 280px 32px 226px;   /* alt: sohbet şeridi payı (2026-09-12) */
  pointer-events:none;
}
#harita-ekran>*{pointer-events:auto}
body.harita-acik #koy-viewport{filter:brightness(.82) saturate(.94)}
/* min-height:0 ŞART. Esnek/ızgara öğelerinin örtük en küçük boyu `auto`dur:
   öğe İÇERİĞİNİN altına inemez. Harita katmanı 26 sıra karo (≈1270px) olduğu
   için #harita-izgara kırpmak yerine ona SIĞMAK üzere büyüyordu. Sonucu:
   dikey kenar payı sıfıra düşüyor (sürüklerken SİYAH boşluk) ve ızgaranın
   merkezi — yani oyuncunun obası — ekranın altında kalıyordu; bu yüzden
   "Obama Git" hiçbir şey yapmıyormuş gibi görünüyordu. Zincirin tamamında
   gerekli: sol sütun → alan → ızgara. */
#harita-sol{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}
#harita-ust{display:flex;gap:10px;align-items:center;color:#e2d8c2}
#harita-koord{
  font-variant-numeric:tabular-nums;font-weight:700;font-size:14px;
  background:rgba(255,255,255,.09);padding:3px 12px;border-radius:4px;
}
.harita-ipucu{font-size:11.5px;color:#8d8267;margin-left:auto}
/* harita alanı: sol/üst eksen şeritleri + ızgara */
#harita-alan{
  flex:1;display:grid;min-height:0;
  grid-template-columns:26px 1fr;grid-template-rows:18px 1fr;
}
#harita-eksen-kose{grid-area:1/1}
#harita-eksen-x{
  grid-area:1/2;display:grid;justify-content:center;
  overflow:hidden;font-variant-numeric:tabular-nums;
}
#harita-eksen-y{
  grid-area:2/1;display:grid;align-content:center;
  overflow:hidden;font-variant-numeric:tabular-nums;
}
#harita-eksen-x span,#harita-eksen-y span{
  display:flex;align-items:center;justify-content:center;
  font-size:9.5px;color:#8a7f6b;letter-spacing:.02em;
}
/* ÇERÇEVE SABİT: kenarlık ve zemin dış kutuda kalır, yalnız içteki karo
   katmanı kayar. Eskiden transform doğrudan #harita-izgara'ya uygulanıyordu —
   kenarlık da içerikle birlikte kayıp titriyordu. */
#harita-izgara{
  grid-area:2/2;position:relative;min-height:0;min-width:0;
  overflow:hidden;background:#100d0a;border:1px solid #3a322a;border-radius:6px;
  cursor:grab;user-select:none;touch-action:none;
  display:flex;align-items:center;justify-content:center;
}
/* karoların durduğu iç katman — kaydırılan tek şey bu */
#harita-katman{
  display:grid;gap:0;
  will-change:transform;
  backface-visibility:hidden;      /* alt piksel titremesini keser */
}

/* karo ipucu (hover) ve eylem menüsü (tıklama) — koyu gri zemin */
#karo-ipucu, #karo-menu{
  position:fixed;z-index:80;pointer-events:none;
  background:linear-gradient(#33322e,#232220);
  border:1px solid #55534c;border-radius:7px;
  box-shadow:0 8px 24px rgba(0,0,0,.65);
  color:#ddd9cf;font-size:12px;
}
#karo-ipucu{padding:8px 11px;min-width:172px}
.ki-ad{
  font-family:Georgia,serif;font-size:14px;color:#f0e9d6;letter-spacing:.03em;
  border-bottom:1px solid #55534c;padding-bottom:4px;margin-bottom:5px;
}
.ki-satir{display:flex;justify-content:space-between;gap:14px;line-height:1.65}
.ki-satir span{color:#9b968a}
.ki-satir b{color:#efe9dc;font-weight:600;font-variant-numeric:tabular-nums}

#karo-menu{
  pointer-events:auto;width:258px;padding:0;
  max-height:82vh;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;
}
.km-not{grid-column:1/-1;color:#b9b4a7;line-height:1.5;margin-top:4px;font-size:11.5px}
.km-not b{color:#efe9dc}
.km-akin{display:flex;gap:6px;align-items:center}
.km-akin .sayi-gir{
  width:74px;background:#26251f;border-color:#57544c;color:#e6e0d2;padding:6px 8px;
}
.km-akin .km-eylem{flex:1;text-align:center}
.km-ipucu{font-size:11px;color:#9b968a;margin-top:6px}
.km-soluk{float:right;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#8a8578;margin-top:2px}
/* karo notunun altına düşen açıklama cümlesi (km-soluk kısa etiket içindir) */
.km-alt{display:block;margin-top:3px;font-size:11px;line-height:1.45;color:#9d9686}
.km-tehlike{color:#e08a6a}
.km-ust{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;background:rgba(0,0,0,.25);border-bottom:1px solid #55534c;
}
.km-ad{font-family:Georgia,serif;font-size:14.5px;color:#f0e9d6;letter-spacing:.03em}
.km-kapat{
  flex:none;width:22px;height:22px;border-radius:4px;font-size:12px;
  color:#9b968a;border:1px solid transparent;background:none;
}
.km-kapat:hover{color:#f0e9d6;border-color:#55534c}
.km-bilgi{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;padding:9px 11px;min-width:0}
/* Yalnız etiket/değer satırları esnek olur. `.km-not` düz metindir; esnek
   satır olunca içindeki <b> ayrı bir öğeye dönüşüp daralıyor ve yazı
   dikey diziliyordu (dar ekranda kesin, geniş ekranda gizliden). */
.km-bilgi>div:not(.km-not){display:flex;justify-content:space-between;gap:6px;line-height:1.6}
.km-bilgi>.km-not{display:block;min-width:0;overflow-wrap:break-word}
.km-bilgi span{color:#9b968a}
.km-bilgi b{color:#efe9dc;font-weight:600;font-variant-numeric:tabular-nums}
.km-eylemler{display:flex;flex-direction:column;gap:5px;padding:0 10px 10px}
.km-eylem{
  text-align:left;padding:7px 10px;border-radius:5px;font-size:12.5px;
  background:#3d3b35;border:1px solid #57544c;color:#e6e0d2;
  transition:background .13s,border-color .13s;
}
.km-eylem:hover{background:#4a473f;border-color:#7d7768}
.km-eylem.premium{color:#e5c766;border-color:#6b5c30}
.km-eylem.premium:hover{background:#4a4128;border-color:#a08540}
.km-eylem.premium span{
  float:right;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#8a7a4a;margin-top:2px;
}
#harita-izgara:active{cursor:grabbing}
.karo{
  /* --kp'yi haritaCiz ızgaraya yazar: dar ekranda kare küçülür */
  width:var(--kp,52px);height:var(--kp,52px);position:relative;
  background:url("../assets/harita/harita_zemin.jpg?v=3") center/cover;
  display:flex;align-items:center;justify-content:center;
}
.k-dis{background:#14110d!important}
/* sprite: karo içinde kalır, kesilmez */
.sp{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  max-width:94%;max-height:94%;width:auto;height:auto;
  pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
.karo:hover .sp{filter:drop-shadow(0 3px 5px rgba(0,0,0,.6)) brightness(1.12)}
/* süper vaha: 2×2 bloğu kaplayan TEK görsel.
   parca 1 (ekranda sağ-alt kare) üzerinde durur ve SOLA + YUKARI açılır;
   böylece daha sonra basılan hiçbir karenin zemini üstünü örtmez. */
/* süper vaha: 2×2 görselin bu kareye düşen çeyreği.
   Taşan tek kutu denendi ve geri alındı — hover/seçim z-index'i taşan kutuyu
   komşu karenin altında bırakıp yaylağın üç çeyreğini yok ediyordu. */
.sv-parca{
  position:absolute;inset:0;pointer-events:none;
  background-size:200% 200%;background-repeat:no-repeat;
}
.karo:hover .sv-parca{filter:brightness(1.12)}

/* BLOK SEÇİMİ: yalnız bloğun DIŞ kenarları çizilir. Dört kareye ayrı ayrı
   `.secili` verilince her karenin iç çerçevesi çıkıp ortada beyaz haç
   oluyordu. Her parça kendi iki dış kenarını çizer. */
.karo.k-sv-sec::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  border:0 solid #f4ecd7;
}
.karo.k-sv-sec.sv-p2::after{border-top-width:3px;border-left-width:3px}
.karo.k-sv-sec.sv-p3::after{border-top-width:3px;border-right-width:3px}
.karo.k-sv-sec.sv-p0::after{border-bottom-width:3px;border-left-width:3px}
.karo.k-sv-sec.sv-p1::after{border-bottom-width:3px;border-right-width:3px}
/* açılış ekranı logosu */
.landing-logo{margin:0 0 6px;line-height:0;display:flex;justify-content:center}
/* kahraman amblem — yazı üst bara taşındığı için daha küçük */
.landing-logo img{
  width:min(190px,42vw);height:auto;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.6));
}

/* farm list paneli */
.farm-sekmeler{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.farm-sekme{
  padding:4px 11px;border-radius:5px;font-size:12px;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);color:var(--soluk);
}
.farm-sekme:hover{color:var(--murekkep)}
.farm-sekme.aktif{background:var(--bronz);border-color:var(--bronz);color:#fff8e8;font-weight:600}
.farm-sekme.yeni{border-style:dashed}
.farm-sat{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);border-radius:6px;
  padding:6px 10px;margin-bottom:5px;
}
.farm-ad{flex:1;min-width:130px;font-size:13px;color:#3a2c08}
.farm-ad i{font-style:normal;color:var(--soluk);font-size:11.5px;margin-left:4px}
.farm-kadro{display:flex;gap:5px;flex-wrap:wrap}
.farm-birim{
  display:flex;align-items:center;gap:3px;padding:2px 5px;border-radius:4px;
  background:#fff;border:1px solid var(--cizgi-soft);
}
.farm-birim img{width:22px;height:22px;object-fit:contain}
.farm-adet{width:52px;padding:2px 4px;font-size:12px}
.farm-dugme{display:flex;gap:4px;flex:none}

/* tam savaş raporu — ayrı sekme yerine oyunun üstünde kutu */
#savas-rapor{
  position:fixed;inset:0;z-index:9600;overflow-y:auto;
  background:rgba(14,11,6,.72);padding:22px 14px 40px;
}
#savas-rapor .rp-kutu{
  position:relative;max-width:820px;margin:0 auto;
  background:linear-gradient(#f2efe8,#e8e4da);
  border:1px solid #b5ad9b;border-radius:8px;
  box-shadow:0 10px 34px rgba(0,0,0,.6);
  padding:18px 22px 20px;
}
.rp-kapat{
  position:absolute;top:10px;right:11px;
  width:30px;height:30px;border-radius:50%;
  background:#efece4;border:1px solid #a99f8a;color:#4a3d22;font-size:14px;
}
.rp-kapat:hover{background:#e2dccd;border-color:var(--bronz)}
.rp-baslik{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;
  border-bottom:2px solid #cfc8b8;padding-bottom:9px;margin-bottom:14px;padding-right:34px;
}
.rp-baslik h1{font-size:21px;color:#5d4a17;letter-spacing:.05em}
.rp-baslik time{font-size:12.5px;color:#8a8171;font-variant-numeric:tabular-nums}
.rp-not{font-size:13px;color:#8a8171;margin:-8px 0 12px}
.rp-sonuc{
  display:inline-block;font-family:Georgia,serif;font-size:14px;letter-spacing:.12em;
  padding:3px 14px;border-radius:4px;margin-bottom:14px;
}
.rp-sonuc.zafer{background:#e2e8d2;color:#4c7030;border:1px solid #9db07e}
.rp-sonuc.bozgun{background:#efd9d2;color:#a03325;border:1px solid #c69384}
.rp-taraf{
  border:1px solid #cfc8b8;border-radius:6px;background:#efece3;
  padding:11px 14px 13px;margin-bottom:13px;
}
.rp-taraf-ust{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin-bottom:9px;
}
.rp-taraf-ust h2{font-size:16px;color:#3a2c08;letter-spacing:.04em}
.rp-taraf-ust span{font-size:12px;color:#8a8171}
.rp-guc{font-size:12px;color:#6e6555;margin-top:2px}
.rp-guc b{color:#5d4a17}
.rp-grid{display:flex;flex-wrap:wrap;gap:9px}
.rp-birim{width:66px;text-align:center}
.rp-portre{
  width:66px;height:66px;border-radius:5px;padding:4px;
  background:#dcd6c8;border:1px solid #cfc8b8;
  display:flex;align-items:center;justify-content:center;
}
.rp-portre img{max-width:100%;max-height:100%;object-fit:contain}
.rp-adet{font-size:14px;font-weight:700;color:#2b241a;margin-top:3px;font-variant-numeric:tabular-nums}
.rp-dus{font-size:12.5px;font-weight:700;color:#a03325;font-variant-numeric:tabular-nums}
.rp-dus.yok{color:#b3ac9c;font-weight:400}
.rp-birim-ad{font-size:10px;color:#8a8171;margin-top:1px;line-height:1.25}
.rp-ganimet{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px dashed #cfc8b8;border-radius:6px;padding:9px 14px;background:#f4f1ea;
}
.rp-ganimet img{width:22px;height:22px;object-fit:contain;vertical-align:-5px}
.rp-ganimet b{font-variant-numeric:tabular-nums;color:#2b241a}
.rp-ganimet .etiket{font-family:Georgia,serif;font-size:12px;letter-spacing:.1em;color:#8a7a52}
/* Yağmalanan (savunma yenilgisi): kaptırılan kaynak — kazanç değil kayıp,
   kırmızımsı zeminle ganimetten ayrışır. */
.rp-ganimet.rp-yagmalandi{border-color:#d6a99c;background:#f6e9e5}
.rp-ganimet.rp-yagmalandi .etiket{color:#a4462f}
.rp-ganimet.rp-yagmalandi b{color:#8c3b28}

/* rapor panelinin üstündeki olay şeridi — rutin bitişler, kaydedilmez */
.olay-serit{
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);border-radius:6px;
  padding:7px 11px 8px;margin-bottom:10px;
}
.olay-baslik{
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soluk);margin-bottom:5px;
}
.olay-sat{
  display:flex;gap:8px;align-items:baseline;
  font-size:12px;line-height:1.5;color:#4a3d22;
}
.olay-sat time{flex:none;color:var(--soluk);font-size:11px;font-variant-numeric:tabular-nums}
.olay-sat.kotu span{color:#a03325}

/* ---- sunucu seçme ekranı ---- */
#ag-sunucular{
  width:min(520px,92vw);margin:0 auto 18px;text-align:left;
}
.ags-baslik{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:#b8a76b;margin-bottom:9px;text-align:center;
}
.ags-sat{
  display:flex;align-items:center;gap:10px;width:100%;
  background:rgba(28,24,17,.82);border:1px solid #5c5443;border-radius:7px;
  padding:11px 14px;margin-bottom:7px;text-align:left;cursor:pointer;
  transition:border-color .13s,background .13s;
}
.ags-sat:hover{border-color:var(--bronz-acik);background:rgba(44,38,26,.9)}
.ags-sat.yaklasan{cursor:default;opacity:.72}
.ags-sat.yaklasan:hover{border-color:#5c5443;background:rgba(28,24,17,.82)}
/* 2026-09-30: önerilen (en yeni, kayda açık) sunucu öne çıkar; kapalı olan soluk */
.ags-sat.onerilen{border-color:#c9a13f;box-shadow:0 0 0 1px rgba(201,161,63,.35) inset}
.ags-sat.kapali{cursor:default;opacity:.55}
.ags-sat.kapali:hover{border-color:#5c5443;background:rgba(28,24,17,.82)}
.ags-yeni{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;font-size:10.5px;
  font-weight:700;letter-spacing:.02em;vertical-align:2px;background:linear-gradient(#f2cf6a,#c99a2c);color:#2e2204}
.ags-ad{font-size:15px;font-weight:600;color:#e9dfc4;flex:none}
.ags-durum{flex:1;font-size:11.5px;color:#a89f88;line-height:1.4}
.ags-durum b{color:#d8c88f}
.ags-git{flex:none;font-size:12px;color:#e0b65f;font-weight:600}
.ags-git.soluk{color:#8a8271;font-weight:400}
.ags-not{font-size:11.5px;color:#8f8770;text-align:center;margin-top:11px;line-height:1.6}
.ags-not a{color:#b8a76b}

/* açılış ekranı dip bağlantıları */
.landing-dip{margin-top:18px;font-size:11.5px;color:#8f8770}
.landing-dip a{color:#a89f88;margin:0 7px;text-decoration:none}
/* Üst menü: açılış başlığında gezinme */
.lb-menu{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;white-space:nowrap}
.lb-menu a{
  color:#d8cfae;text-decoration:none;font-size:13px;letter-spacing:.03em;
  padding:6px 11px;border-radius:5px;border:1px solid transparent;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.lb-menu a:hover{color:#f0e6cc;border-color:#5a4d2e;background:rgba(20,15,7,.5)}
@media(max-width:560px){
  #landing-bas{flex-wrap:wrap;row-gap:2px;padding:8px 10px 6px}
  .lb-menu{order:3;width:100%;justify-content:center;gap:0}
  .lb-menu a{font-size:12px;padding:4px 9px}
  #landing-hesap{margin-left:auto}
  /* başlık absolute: sarınca ~95px oluyor, içerik altından başlasın */
  .landing-ic{padding-top:74px}
}
/* Açılışın altındaki tanıtım: arama motoru ve kaydırarak okuyan için */
.landing-metin{
  max-width:760px;margin:64px auto 48px;padding:0 20px;text-align:left;
  color:#c9bfa6;font-size:14.5px;line-height:1.75;
}
.landing-metin h2{
  color:#e2d6b8;font-size:20px;margin:38px 0 12px;text-align:center;
  letter-spacing:.03em;
}
.landing-metin h2::after{
  content:"";display:block;width:64px;height:2px;margin:8px auto 0;
  background:linear-gradient(90deg,transparent,#a3831f,transparent);
}
.landing-metin a{color:#d8b45a;text-decoration:none;border-bottom:1px dotted #7a6836}
.landing-metin a:hover{color:#f0cc70}
.lm-giris{text-align:center;max-width:600px;margin:0 auto 10px}
/* özellik kartları */
.oz-kartlar{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;margin:18px 0 6px;
}
.oz-kart{
  background:linear-gradient(#211a0e,#1a1409);border:1px solid #3a3222;
  border-radius:8px;padding:14px 13px;font-size:12.5px;line-height:1.55;
  color:#a89f88;
}
.oz-kart i{display:block;font-style:normal;font-size:20px;margin-bottom:6px}
.oz-kart b{display:block;color:#e2d6b8;margin-bottom:4px;font-size:13.5px}
/* boy vitrini */
.boy-vitrin{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;margin:16px 0 4px;
}
.bv-kart{
  display:block;background:linear-gradient(#241c0f,#1a1409);
  border:1px solid #3a3222;border-top:3px solid var(--boy,#a3831f);
  border-radius:8px;padding:14px;text-decoration:none;border-bottom:1px solid #3a3222;
  font-size:12.5px;line-height:1.55;color:#a89f88;text-align:center;
}
.bv-kart:hover{border-color:#5a4d2e;border-top-color:var(--boy,#a3831f)}
.bv-hun{--boy:#9a4a2b}.bv-gokturk{--boy:#41628f}.bv-cin{--boy:#e0b21e}
.bv-kart img{
  width:84px;height:84px;object-fit:contain;object-position:center 20%;
  border-radius:50%;padding:6px;
  border:2px solid var(--boy,#a3831f);margin-bottom:8px;
  background:radial-gradient(circle at 50% 35%, #241c0f, #100c06);
}
.bv-kart b{display:block;color:#e2d6b8;font-size:15px;margin-bottom:4px}
.bv-kart span{display:block}
.landing-ssb p{margin:9px 0}
.landing-ssb b{color:#e2d6b8}
/* bölüm sonu CTA */
.lm-cta{
  display:block;text-align:center;margin:30px auto 0;max-width:420px;
  background:linear-gradient(#c8973c,#a3761f);border:1px solid #7a5a14 !important;
  border-radius:7px;color:#fff8ea !important;padding:13px 18px;
  font-size:15.5px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 3px 12px rgba(0,0,0,.4);
}
.lm-cta:hover{background:linear-gradient(#d5a447,#b28325);color:#fff !important}
.landing-dip a:hover{color:#e0b65f;text-decoration:underline}

/* ---- sunucu: giriş ekranı ve bağlantı rozeti ---- */
#ag-giris{
  position:fixed;inset:0;z-index:9700;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(14,11,6,.82);
}
.agk-kutu{
  width:min(380px,100%);
  background:linear-gradient(#fbf8f0,var(--kutu));
  border:1px solid var(--cizgi);border-radius:9px;
  box-shadow:0 14px 40px rgba(0,0,0,.6);padding:18px 20px 15px;
}
.agk-baslik{font-size:17px;font-weight:700;color:var(--murekkep);margin-bottom:6px;letter-spacing:.03em}
.agk-not{font-size:12.5px;color:var(--soluk);line-height:1.55;margin-bottom:13px}
.agk-google{
  /* Google "G" logosu + metin (resmî düğme biçimi) */
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:#fff;border:1px solid #c9c2b2;color:#2b241a;font-weight:600;font-size:13.5px;
  padding:9px;margin-bottom:4px;
}
.agk-google svg{display:block;flex:0 0 auto}
.agk-google:hover{background:#f4f1e9;border-color:var(--bronz)}
.agk-ayrac{
  display:flex;align-items:center;gap:9px;margin:12px 0 11px;
  font-size:11px;color:var(--soluk);letter-spacing:.06em;
}
.agk-ayrac::before,.agk-ayrac::after{
  content:"";flex:1;height:1px;background:var(--cizgi-soft);
}
.agk-sekmeler{display:flex;gap:5px;margin-bottom:13px}
.agk-sekme{
  flex:1;padding:6px;border-radius:5px;font-size:12.5px;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);color:var(--soluk);
}
.agk-sekme.aktif{background:var(--bronz);border-color:var(--bronz);color:#fff8e8;font-weight:600}
.agk-satir{display:block;margin-bottom:9px}
.agk-satir.gizli{display:none}
.agk-satir span{display:block;font-size:11.5px;color:var(--soluk);margin-bottom:3px}
.agk-satir input{
  width:100%;padding:6px 9px;font-size:13px;
  background:#fff;border:1px solid var(--cizgi-soft);border-radius:4px;color:var(--murekkep);
}
.agk-satir input:focus{outline:none;border-color:var(--bronz)}
.agk-hata{min-height:16px;font-size:12px;color:#a03325;margin-bottom:6px}
.agk-onay{width:100%;margin-bottom:9px}
.agk-alt{display:flex;justify-content:space-between;gap:8px}
.agk-baglanti{
  background:none;border:0;padding:2px 0;
  font-size:11.5px;color:var(--soluk);text-decoration:underline;cursor:pointer;
}
.agk-baglanti:hover{color:var(--bronz)}
/* Sağ alttaki "ad · kayıtlı" rozeti kaldırıldı — ekranı kirletiyordu.
   Yalnız BAĞLANTI HATASI görünür kalır, yoksa oyuncu kaydının gitmediğini
   fark edemez. */
#ag-rozet{display:none}
#ag-rozet.kotu{
  display:block;
  position:fixed;right:10px;bottom:10px;z-index:8900;
  background:#5c2020;border:1px solid #a05a4a;color:#ffd9c9;border-radius:5px;
  padding:3px 9px;font-size:11px;letter-spacing:.02em;pointer-events:none;
}

/* açılışta bölge seçimi: haritanın dört çeyreği */
#bolge-secim{margin:4px 0 14px;text-align:center}
#bolge-secim.hidden{display:none}
.bs-baslik{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#b8a76b;margin-bottom:8px;
}
.bs-harita{
  position:relative;width:min(300px,74vw);aspect-ratio:1;margin:0 auto;
  border:1px solid #6b5a2e;border-radius:7px;overflow:hidden;
  background:#1a150c;box-shadow:0 6px 22px rgba(0,0,0,.55);
}
.bs-harita img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.bs-ceyrek{
  position:absolute;width:50%;height:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:rgba(12,9,5,.42);border:1px solid rgba(255,240,200,.16);
  color:#e6dcc0;cursor:pointer;transition:background .14s,box-shadow .14s;
}
.bs-ceyrek:hover{background:rgba(124,95,22,.42)}
.bs-ceyrek.secili{
  background:rgba(163,131,31,.55);
  box-shadow:inset 0 0 0 2px #e9c766;
  color:#fff8e8;
}
.bs-ad{font-size:12.5px;font-weight:600;text-shadow:0 1px 3px #000}
.bs-sayi{font-size:11px;opacity:.85;font-variant-numeric:tabular-nums}
.bs-rozet{
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  background:#3f6b2e;color:#e7f2e0;padding:1px 6px;border-radius:3px;margin-top:2px;
}
.bs-not{font-size:12px;color:#a89c7d;margin-top:8px;line-height:1.5}
.bs-not b{color:#e9c766}

/* sağ sütundaki hesap kutusu — masaüstünde logo da aynı işi görüyor,
   telefonda tek yol bu */
#hesap-kutu{display:none}
#hesap-kutu.acik{display:block}
#hesap-ad{
  font-size:12px;color:var(--soluk);margin-bottom:7px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#hesap-ad b{color:var(--bronz-acik);font-weight:600}
.hesap-dugmeler{display:flex;gap:6px}
.hesap-dugmeler .btn{flex:1;padding:6px 4px;font-size:12px}

/* kirişteki logo tıklanabilir: sunucu listesine döner */
#ust .logo.tiklanir{cursor:pointer;transition:filter .13s,transform .13s}
#ust .logo.tiklanir:hover{filter:brightness(1.25);transform:translateY(-1px)}

/* açılış ekranı üst barı: solda logo yazısı, sağda hesap düğmeleri */
#landing-bas{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 22px;
  background:linear-gradient(rgba(10,8,4,.72),rgba(10,8,4,0));
}
#landing-bas .lb-logo{
  height:30px;width:auto;object-fit:contain;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.6));
}
#landing-hesap{display:flex;align-items:center;gap:7px}
#landing-hesap.hidden{display:none}
@media(max-width:560px){
  #landing-bas{padding:10px 12px}
  #landing-bas .lb-logo{height:22px}
}
#landing-hesap .lh-ad{
  font-size:12.5px;color:#d8cfae;letter-spacing:.02em;margin-right:2px;
}
#landing-hesap .btn{padding:6px 15px;font-size:12.5px}
#landing-hesap .btn.birincil{
  background:linear-gradient(#a3831f,#7c5f16);border-color:#5d420f;color:#fff8e8;font-weight:600;
}
#landing-hesap .btn.birincil:hover{background:linear-gradient(#b8933a,#8a6a19)}
@media(max-width:560px){ #landing-hesap{top:10px;right:10px} #landing-hesap .lh-ad{display:none} }

/* aşevi: şölen durumu */
.solen-durum{
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);border-radius:6px;
  padding:8px 12px;margin-bottom:9px;font-size:13px;color:#4a3d22;
}
.solen-durum b{font-variant-numeric:tabular-nums;color:#5d4a17}
.solen-acik{color:#3f6b2e}

/* mancınık hedef seçici */
.km-yikim{margin:8px 0 4px}
.km-yikim.gizli{display:none}
.km-yikim-sat{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.km-yikim-et{flex:none;font-size:11.5px;color:#cfc7b4;min-width:74px}

/* Tuğ Meydanı: sefer masası ve simülatör */
.meydan-hedef{
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);border-radius:6px;
  padding:7px 11px;margin:7px 0 9px;font-size:12.5px;line-height:1.6;color:#3a2c08;
}
.meydan-hedef i{font-style:normal;color:var(--soluk)}
.meydan-hata{color:#a03325;font-weight:600}
.sim-kap{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:9px}
.sim-yan,.sim-yan-sonuc{
  flex:1;min-width:250px;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);border-radius:6px;padding:8px 11px 10px;
}
.sim-yan .kadro-kap{background:transparent;padding:0}
.sim-guc{font-size:12.5px;color:#4a3d22;margin-bottom:8px}
.sim-guc b{font-variant-numeric:tabular-nums;color:#5d4a17}
.sim-guc i{font-style:normal;color:var(--soluk)}
.sim-sonuc{margin-top:10px}

/* site içi onay/girdi kutusu — tarayıcının confirm/prompt'unun yerini alır */
#dialog{
  position:fixed;inset:0;z-index:9500;
  display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(18,15,10,.62);
}
.dlg-kutu{
  width:min(400px,100%);
  background:linear-gradient(#fbf8f0,var(--kutu));
  border:1px solid var(--cizgi);border-radius:9px;
  box-shadow:0 14px 40px rgba(0,0,0,.55);
  padding:15px 17px 13px;
}
.dlg-baslik{
  font-size:15px;font-weight:700;color:var(--murekkep);
  border-bottom:1px solid var(--cizgi-soft);padding-bottom:7px;margin-bottom:9px;
}
.dlg-metin{font-size:13px;line-height:1.6;color:#4a3d22;margin-bottom:10px}
.dlg-kutu .ist-ad-gir{width:100%;margin-bottom:4px}
.dlg-dugmeler{display:flex;justify-content:flex-end;gap:7px;margin-top:12px}

/* kısa haber şeridi — eylem sonuçları için, ekranın üstünde belirip söner */
#uyari-serit{
  position:fixed;top:-70px;left:50%;transform:translateX(-50%);z-index:9400;
  max-width:min(520px,92vw);
  background:linear-gradient(#fbf8f0,var(--kutu));color:var(--murekkep);
  border:1px solid var(--bronz);border-radius:7px;
  padding:9px 16px;font-size:13px;font-weight:600;line-height:1.45;text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  transition:top .22s ease, opacity .22s ease;opacity:0;cursor:pointer;
}
#uyari-serit.acik{top:14px;opacity:1}
#uyari-serit.kotu{border-color:#a03325;color:#7a1d1d}
/* altın ipuçları (2026-09-30): şeritte eylem düğmesi, panelde küçük satır */
#uyari-serit .uyari-dugme{margin-left:8px;padding:3px 10px;border-radius:5px;border:1px solid #9a7a1c;
  background:linear-gradient(#f7d774,#d9a82e);color:#3a2a05;font-weight:700;font-size:12px;cursor:pointer}
.altin-ipucu{display:flex;align-items:center;gap:6px;margin:6px 0 2px;padding:5px 8px;border-radius:6px;
  border:1px dashed rgba(154,122,28,.55);background:rgba(247,215,116,.12);color:var(--murekkep);
  font-size:12px;line-height:1.35;cursor:pointer}
.altin-ipucu.hidden{display:none}
.altin-ipucu img{width:16px;height:16px;flex:none}
.altin-ipucu span{flex:1;min-width:0}
.altin-ipucu .ai-kapat{flex:none;border:0;background:none;color:inherit;opacity:.55;cursor:pointer;font-size:12px;padding:0 2px}
.altin-ipucu .ai-kapat:hover{opacity:1}
#qb-aninda.yetmez{opacity:.75}
#qb-aninda.parla{animation:altinParla 1.2s ease-in-out 4}
@keyframes altinParla{0%,100%{box-shadow:0 0 0 0 rgba(247,215,116,0)}50%{box-shadow:0 0 0 5px rgba(247,215,116,.65)}}

/* test modu rozeti — açık kaldığı fark edilsin diye bilerek göze batıyor */
#hile-rozet{
  position:fixed;left:10px;bottom:10px;z-index:9000;
  display:flex;align-items:center;gap:8px;
  background:#7a1d1d;color:#ffe9c9;border:1px solid #d08a5a;border-radius:6px;
  padding:5px 10px;font-size:11.5px;font-weight:600;letter-spacing:.02em;
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}
#hile-rozet .btn{padding:2px 8px;font-size:11px}

/* harita menüsü: sefer modu sekmeleri */
.km-modlar{display:flex;gap:4px;margin-bottom:8px}
.km-mod{
  flex:1;padding:5px 8px;border-radius:4px;font-size:12px;
  background:rgba(255,255,255,.07);border:1px solid #55534c;color:#cfc7b4;
}
.km-mod:hover{background:rgba(255,255,255,.14)}
.km-mod.secili{background:var(--bronz);border-color:var(--bronz);color:#fff8e8;font-weight:600}
/* Koyu menüde form kutuları metin rengini miras alır ama zemini beyaz kalır
   (krem üstü beyaz = okunmaz). Zemini ve yazıyı burada açıkça veriyoruz. */
#karo-menu select,
#karo-menu input{
  background:#fbf8f0;color:#2b241a;
  border:1px solid #6b6455;border-radius:4px;padding:3px 6px;font-size:12.5px;
}
#karo-menu select{width:100%;font-weight:600}
#karo-menu select option{background:#fbf8f0;color:#2b241a}
/* obada olmayan birim: yazılabilir ama elde olmadığı belli olsun */
.kadro-satir.yok .kadro-birim img{opacity:.42;filter:grayscale(.75)}
.kadro-satir.yok .kadro-ad{opacity:.62}

/* pazar teklifleri */
.teklif-sat{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);border-radius:6px;
  padding:6px 10px;margin-bottom:5px;
}
.teklif-sat.benim{border-color:var(--bronz);background:#f4efe1}
.teklif-takas{display:flex;align-items:center;gap:5px;font-size:13.5px;flex:none}
.teklif-takas img{width:22px;height:22px;object-fit:contain}
.teklif-takas b{font-variant-numeric:tabular-nums;color:#3a2c08}
.teklif-yon{
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:1px 6px;border-radius:3px;border:1px solid;
}
.teklif-yon.ver{color:#8a3a2a;border-color:#d3a898;background:#f7e7e1}
.teklif-yon.al{color:#3f6b2e;border-color:#a9c69a;background:#e7f2e0;margin-left:8px}
/* gelen kervanın kaynak obası — tıklanır, haritada açar */
.kervan-kaynak{
  background:none;border:none;padding:2px 4px;cursor:pointer;font:inherit;
  color:#6b4f13;font-weight:600;text-decoration:underline;text-underline-offset:2px;
  font-size:11.5px;
}
.kervan-kaynak:hover{color:#a3761f}
.tuccar-durum{margin:2px 0 6px}
.teklif-not{flex:1;min-width:120px;font-size:11.5px;color:var(--soluk)}
.teklif-not b{margin-left:6px;font-variant-numeric:tabular-nums;color:var(--soluk)}
.teklif-not b.iyi{color:#3f6b2e}
.teklif-not b.kotu{color:#a03325}
.teklif-form{margin-bottom:8px}
.teklif-form .sayi-gir{width:96px;margin-left:6px}

/* NPC tüccar: kaynak logolu seçim jetonları */
.npc-satir{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.npc-satir .ist-etiket{width:38px;flex:none}
.npc-jeton{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:5px 9px;border-radius:6px;
  background:var(--kutu-2);border:2px solid var(--cizgi-soft);
  transition:border-color .13s, transform .13s;
}
.npc-jeton:hover{transform:translateY(-1px);border-color:var(--cizgi)}
.npc-jeton.secili{border-color:var(--bronz);background:#f2ecdb;box-shadow:0 0 0 1px var(--bronz)}
.npc-jeton img{width:26px;height:26px;object-fit:contain}
.npc-jeton i{font-style:normal;font-size:10.5px;color:var(--soluk);font-variant-numeric:tabular-nums}

/* altın düğmeleri: sarı, altın harcayan her eylem */
.btn.altin, .qb-altin{
  background:linear-gradient(#f7dd8c,#d8ad3e);
  border:1px solid #9c7418;color:#3f2f08;font-weight:650;
  text-shadow:0 1px 0 rgba(255,248,214,.6);
}
.btn.altin:hover:not(:disabled), .qb-altin:hover:not(:disabled){
  background:linear-gradient(#ffeaa4,#e8bd4a);
  border-color:#7d5c10;
}
.btn.altin img, .qb-altin img{width:15px;height:15px;object-fit:contain;vertical-align:-3px;margin-right:4px}
.qb-altin{
  display:block;width:100%;margin-top:7px;padding:6px 10px;border-radius:5px;
  font-size:12.5px;letter-spacing:.02em;
}
.qb-altin:disabled{opacity:.45;filter:grayscale(.4)}

/* premium çemberi: menünün sağında büyük altın madalyon */
.premium-cember{
  position:relative;width:74px;height:74px;border-radius:50%;
  margin-left:14px;flex:none;
  background:radial-gradient(circle at 34% 30%, #f0d488 0%, #c79a45 42%, #8a6220 78%, #5d420f 100%);
  border:2px solid #5d420f;
  box-shadow:0 3px 10px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,244,200,.55), inset 0 -3px 6px rgba(61,42,8,.6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  transition:transform .13s, box-shadow .13s;
}
.premium-cember:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.55), inset 0 2px 4px rgba(255,244,200,.55)}
.premium-cember.aktif{outline:2px solid #e0b65f;outline-offset:2px}
.pc-sikke{width:100%;height:100%;object-fit:contain;padding:3px;pointer-events:none}
.premium-cember .rozet{
  position:absolute;top:-2px;right:-2px;z-index:3;
  background:var(--kirmizi);color:#f6ece4;border-radius:9px;
  font-size:11px;line-height:1;padding:2px 6px;border:1px solid #7c2418;
  box-shadow:0 2px 5px rgba(0,0,0,.5);pointer-events:none;
  animation:pc-roz 1.6s ease-in-out infinite;
}
@keyframes pc-roz{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){ .premium-cember .rozet{animation:none} }
.pc-bakiye{
  position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  background:#2a2210;color:#f0dda6;border:1px solid #8a6f1f;border-radius:9px;
  font-size:11px;font-weight:700;padding:0 8px;font-variant-numeric:tabular-nums;
  box-shadow:0 2px 5px rgba(0,0,0,.5);white-space:nowrap;
}
@media (max-width:760px){ .premium-cember{width:56px;height:56px;margin-left:8px} .pc-simge{font-size:15px} }

/* premium paneli */
.prem-bas{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.prem-altin{
  display:flex;align-items:center;gap:7px;
  font-family:Georgia,serif;font-size:20px;color:#8a6220;font-variant-numeric:tabular-nums;
}
.prem-altin img{width:28px;height:28px;object-fit:contain}
.prem-paket b img{width:19px;height:19px;object-fit:contain;vertical-align:-4px;margin-right:2px}
.prem-rozet{
  font-size:11px;letter-spacing:.08em;padding:3px 10px;border-radius:4px;
  background:linear-gradient(#6b5524,#513f18);color:#f4ead0;border:1px solid #3d2f11;
}
.prem-rozet.pasif{background:var(--kutu-2);color:var(--soluk);border-color:var(--cizgi-soft)}
/* 6 PAKET TEK SIRA (2026-09-16): Kağan Hazinesi eklenince altıncı kart alt
   satıra düşüyordu. Geniş ekranda altı sütun; mobil kuralları DEĞİŞMEDİ. */
.prem-paketler{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:4px}
@media (max-width:900px){ .prem-paketler{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .prem-paketler{grid-template-columns:repeat(2,1fr)} }
/* paketin altındaki kur rozeti: hangi paketin daha avantajlı olduğu görünsün */
.prem-paket u{
  display:block;margin-top:5px;text-decoration:none;
  font-size:10px;letter-spacing:.05em;color:var(--soluk);
}
.prem-paket b img{width:19px;height:19px;object-fit:contain;vertical-align:-3px;margin-right:3px}
.prem-paket{
  position:relative;padding:14px 6px 10px;border-radius:6px;text-align:center;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);
  transition:border-color .13s, transform .13s;
}
.prem-paket:hover{border-color:var(--bronz);transform:translateY(-2px)}
.prem-paket b{display:block;font-size:16px;color:#8a6220;font-variant-numeric:tabular-nums}
.prem-paket span{display:block;font-size:12.5px;color:var(--metin-2,var(--soluk));margin-top:2px;font-variant-numeric:tabular-nums}
.prem-paket i{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  font-style:normal;font-size:9.5px;letter-spacing:.06em;white-space:nowrap;
  background:var(--bronz);color:#fff8e8;padding:1px 8px;border-radius:3px;
}
/* Pakete ozel resim (assets/altin/<kod>.png). Yuksekligi sabit ve
   object-fit:contain -- boylece hangi resim gelirse gelsin kartlar ayni boyda
   kalir ve fiyat satiri kaymaz. Resmi olmayan paket bu kurala hic girmez. */
.prem-paket .paket-gorsel{
  display:block;width:100%;height:64px;object-fit:contain;
  margin:0 auto 5px;pointer-events:none;
}
.prem-paket.kampanyali .paket-gorsel{height:74px}
@media (max-width:560px){
  .prem-paket .paket-gorsel{height:52px}
  .prem-paket.kampanyali .paket-gorsel{height:60px}
}
.prem-boost{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.prem-boost-kutu{
  display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:5px;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);font-size:12px;
  font-variant-numeric:tabular-nums;
}
.prem-boost-kutu img{width:22px;height:22px;object-fit:contain}
.prem-boost-kutu.acik{border-color:#3f6b2e;background:rgba(63,107,46,.1);color:#3f6b2e;font-weight:600}
.prem-oto{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:var(--soluk);margin-bottom:8px;cursor:pointer}
.prem-durum{min-height:18px}

/* yıkım listesi */
.yikim-liste{display:flex;flex-direction:column;gap:5px}
.yikim-sat{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);border-radius:5px;
  padding:5px 10px;
}
.yikim-ad i{font-style:normal;color:var(--soluk);font-size:11.5px;margin-left:4px}

/* Ergenekon Kurganı: altın çerçeveli kutsal kare */
.k-kurgan{
  box-shadow:inset 0 0 0 2px #c79a45, inset 0 0 16px rgba(199,154,69,.55);
  animation:kurganNefes 3.4s ease-in-out infinite;
}
@keyframes kurganNefes{
  0%,100%{box-shadow:inset 0 0 0 2px #c79a45, inset 0 0 13px rgba(199,154,69,.45)}
  50%    {box-shadow:inset 0 0 0 3px #e0b65f, inset 0 0 22px rgba(224,182,95,.7)}
}
@media (prefers-reduced-motion:reduce){ .k-kurgan{animation:none} }
/* ULU OBA (v49): yalnız Ulu Oba karesi gökkuşağı renkleriyle döner ve parlar */
@property --ulu-aci{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.k-ulu{ position:relative; }
.k-ulu::before{
  content:""; position:absolute; inset:-2px; border-radius:5px; padding:3px; pointer-events:none; z-index:3;
  background:conic-gradient(from var(--ulu-aci), #ff4040, #ff9f1a, #ffe14d, #3fd46a, #36b4ff, #6c5cff, #d44dff, #ff4040);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.55)) saturate(1.2);
  animation:uluDon 4s linear infinite;
}
.k-ulu > .sp{ filter:drop-shadow(0 0 6px rgba(255,236,160,.75)); }
@keyframes uluDon{ to{ --ulu-aci:360deg; } }
.ulu-anit{ text-align:center; margin:4px 0 8px; }
.ulu-anit img{ max-width:min(260px,70%); height:auto; }
.ulu-sira{ display:flex; gap:8px; align-items:baseline; padding:4px 6px; border-bottom:1px solid rgba(0,0,0,.08); font-size:13.5px; }
.ulu-sira span{ color:var(--soluk); font-size:12px; }
.ulu-sira i{ margin-left:auto; font-style:normal; font-weight:600; }
.ulu-sira.ben{ background:rgba(199,154,69,.14); border-radius:6px; }
@media (prefers-reduced-motion:reduce){ .k-ulu::before{animation:none} }
.kurgan-nis{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);
  font-size:26px;color:#e0b65f;text-shadow:0 2px 6px rgba(0,0,0,.8);
  pointer-events:none;
}

/* kurgan yönetim paneli */
.kurgan-ust{text-align:center;margin-bottom:10px}
.kurgan-sv b{font-family:Georgia,serif;font-size:34px;color:#5d4a17}
.kurgan-sv i{font-style:normal;font-size:15px;color:var(--soluk)}
.kurgan-bar{margin:8px auto 4px;max-width:420px}
.kurgan-depo{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.kurgan-depo b{font-variant-numeric:tabular-nums}
.kurgan-depo b.yeter{color:#3f6b2e}
.kurgan-depo b.yetmez{color:#a03325}
.kurgan-depo i{font-style:normal;font-size:11px;color:var(--soluk);font-variant-numeric:tabular-nums}

/* tılsım: mor çerçeve, hafif nefes alan parıltı */
.k-tilsim{
  box-shadow:inset 0 0 0 2px #8b4fd0, inset 0 0 14px rgba(139,79,208,.45);
  animation:tilsimNefes 2.8s ease-in-out infinite;
}
@keyframes tilsimNefes{
  0%,100%{box-shadow:inset 0 0 0 2px #8b4fd0, inset 0 0 12px rgba(139,79,208,.38)}
  50%    {box-shadow:inset 0 0 0 2px #b479f0, inset 0 0 20px rgba(180,121,240,.62)}
}
@media (prefers-reduced-motion:reduce){ .k-tilsim{animation:none} }
/* kendi yaylağın */
.k-benim-vaha{box-shadow:inset 0 0 0 2px #c79a45}
.k-tutulan-vaha{outline:2px dashed #8a8a8a;outline-offset:-2px}
/* Kutlu/Bereket Yaylağı paydaş çerçevesi: 1 kişi turuncu-altın, 2 kişi (dolu) kızıl */
.karo.k-sv-tek{outline:2px dashed #c79a45;outline-offset:-2px}
.karo.k-sv-cift{outline:2px dashed #b4533a;outline-offset:-2px}
/* sol menü: haberler kutusu — TEK çerçeve, alt alta satırlar */
.haber-kutu{
  display:flex;flex-direction:column;
  background:rgba(244,238,222,.94);border:1px solid #c9bfa6;border-radius:8px;
  box-shadow:0 1px 3px rgba(0,0,0,.25);overflow:hidden;
}
.haber-satir{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 11px;font-size:12.5px;font-weight:700;text-decoration:none;
  color:var(--murekkep);
}
.haber-satir + .haber-satir{border-top:1px dashed #d5cbb2}
a.haber-satir:hover{background:#efe7d2}
.haber-sunucu b{font-size:11.5px;color:var(--soluk);font-weight:600;text-align:right}
@media (max-width:760px){
  .haber-satir{padding:9px 10px;font-size:12px}
  .haber-sunucu b{font-size:11px}
}
.haber-yeni{
  background:#c0392b;color:#fff;font-size:9.5px;letter-spacing:.05em;
  font-weight:800;padding:3px 6px;border-radius:9px;line-height:1;
  border:1px solid #7d2419;box-shadow:0 1px 4px rgba(0,0,0,.45);
  animation:rozetNabiz 1.6s ease-in-out infinite;   /* mesaj rozetiyle aynı nabız */
}
/* tuğ sohbeti: düğme + sekmeler (mevcut sohbet stillerini paylaşır) */
.tug-sohbet-dugme{background:linear-gradient(#e2d6b8,#c4b48d)}
/* okunmamış ileti rozeti: düğmenin sağ üstünde kırmızı daire */
.sohbet-dugme{position:relative}
.sohbet-rozet{
  position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  background:#c0392b;color:#fff;border:1px solid #7d2419;border-radius:9px;
  font-size:10.5px;font-weight:800;line-height:1;letter-spacing:0;
  box-shadow:0 1px 4px rgba(0,0,0,.45);
  animation:rozetNabiz 1.6s ease-in-out infinite;
}
@keyframes rozetNabiz{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.sohbet-sekmeler{display:flex;gap:4px;margin-left:10px;flex:1}
.sohbet-sekme{
  padding:3px 10px;font-size:11.5px;font-weight:700;cursor:pointer;
  background:transparent;border:1px solid #c9bfa6;border-radius:5px;color:var(--soluk);
}
.sohbet-sekme.aktif{background:#efe7d2;color:var(--murekkep);border-color:var(--bronz)}
.sohbet-oda-ekle{font-weight:900;min-width:26px}
.sohbet-oda-sil{border-color:#b4533a;color:#b4533a}
.sohbet-sekmeler{flex-wrap:wrap}
@media (max-width:760px){.sohbet-sekme{padding:4px 8px;font-size:11px}}
/* hareket satırı birim dökümü (Travian "Yoldaki askerler" esinli) */
/* `.hareket-satir` GRID (bkz. aşağıda) — `flex-basis` orada hiçbir şey yapmaz,
   bu yüzden birim dökümü tam genişlik yerine ikinci satırın 2. sütununa
   düşüyordu. Gridde tam satır `grid-column:1/-1` ile alınır. */
.h-kadro{
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 10px;
  padding:4px 6px;margin-top:3px;
  background:rgba(0,0,0,.05);border-top:1px dashed #c9bfa6;border-radius:0 0 6px 6px;
}
.hk-birim{display:flex;align-items:center;gap:4px;font-size:12px}
.hk-birim img{width:24px;height:24px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.hk-birim b{font-variant-numeric:tabular-nums}
.hareket-satir{flex-wrap:wrap}
.kervan-mini{width:16px;height:16px;vertical-align:-3px}
.kervan-sat.gelen{border-left:3px solid #6fa35b}
.h-cizelge{display:flex;gap:10px;font-size:11px;color:var(--soluk);letter-spacing:.02em}
.h-cz-p{white-space:nowrap}
/* dar ekranda kısa başlık, geniş ekranda uzun başlık */
.dar-etiket{display:none}
@media (max-width:760px){
  .dar-etiket{display:inline}
  .genis-etiket{display:none}
  /* ordu dağılımı tablosu mobilde sığsın: küçük yazı, dar dolgu, kaydırılabilir */
  .ordu-dagilim{font-size:10.5px;width:100%}
  .ordu-dagilim th,.ordu-dagilim td{padding:3px 4px}
  .ordu-dagilim .ist-ad{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:760px){
  /* Hareketler mobilde: satır dikine akar, çizelge ve kadro tam genişlik */
  .hareket-satir{flex-direction:column;align-items:flex-start;gap:3px;padding:7px 8px}
  .hareket-satir .h-tur{font-size:10.5px}
  .hareket-satir .h-kim{font-size:12.5px;font-weight:700}
  .hareket-satir .h-ne{font-size:11.5px}
  .hareket-satir .h-sure{align-self:flex-end;margin-top:-18px}
  /* mobilde çizelge alt alta iki temiz satır: "Varış hh:mm:ss" / "Dönüş hh:mm:ss" */
  .h-cizelge{flex-direction:column;gap:1px;font-size:10.5px;width:100%}
  .h-cz-p{display:flex;justify-content:space-between}
  .h-kadro{gap:3px 8px;padding:3px 4px}
  .hk-birim{font-size:11px}
  .hk-birim img{width:20px;height:20px}
}
.h-cizelge b{color:var(--murekkep);font-variant-numeric:tabular-nums}
.hareket-satir.h-kervan .h-tur{color:#8a7a4a}
@media (max-width:760px){.h-cizelge{white-space:normal;font-size:10.5px}}
.k-oyuncu{box-shadow:inset 0 0 0 2px var(--gold)}
.k-haydut{box-shadow:inset 0 0 0 2px rgba(176,68,44,.5)}
/* Tuğ ilişkisine göre oba çerçevesi — haritada kimin dost olduğu tek bakışta
   görünsün. Renkler karo görselinin üstünde okunaklı kalsın diye doygun. */
.k-dost{box-shadow:inset 0 0 0 3px #4a90d9, 0 0 7px rgba(74,144,217,.55)}
.k-muttefik{box-shadow:inset 0 0 0 3px #4fb0a8, 0 0 7px rgba(79,176,168,.5)}
.k-dusman{box-shadow:inset 0 0 0 3px #d94a4a, 0 0 7px rgba(217,74,74,.55)}
/* ateşkes: nötr gri — dostla (turkuaz) karışmasın */
.k-ateskes{box-shadow:inset 0 0 0 3px #9b968a, 0 0 7px rgba(155,150,138,.45)}
/* karo menüsünde oyuncu adı: profile götüren bağlantı gibi görünsün */
.km-ad-link{
  background:none;border:0;padding:0;font:inherit;
  color:#e9c766;text-decoration:underline;cursor:pointer;
}
.km-ad-link:hover{color:#fff3cf}

/* karo ipucundaki durum şeridi (kutu koyu zeminli) */
.ki-tutum{
  margin-top:6px;padding:3px 8px;border-radius:4px;
  font-size:11.5px;font-weight:600;text-align:center;letter-spacing:.02em;
}
.ki-tutum.k-dost{background:rgba(74,144,217,.22);color:#8fc2f0;box-shadow:none}
.ki-tutum.k-muttefik{background:rgba(79,176,168,.22);color:#8fd6cf;box-shadow:none}
.ki-tutum.k-dusman{background:rgba(217,74,74,.22);color:#f09a9a;box-shadow:none}
.ki-tutum.k-ateskes{background:rgba(155,150,138,.22);color:#c9c4b8;box-shadow:none}
.ki-tutum.k-zengin{background:rgba(199,154,69,.22);color:#e0c07a;box-shadow:none}
/* seçim çerçevesi sprite'ın/kaplamanın üstünde kalsın */
.karo.secili{z-index:6}
.karo.secili::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  box-shadow:inset 0 0 0 3px #f4ecd7;
}
.karo:hover{z-index:5}
.rozet-ok{color:#4c7030;font-weight:600;font-size:11.5px}
.rozet-yok{color:var(--soluk);font-size:11.5px}
#harita-panel{
  width:284px;flex:none;align-self:stretch;overflow-y:auto;
  padding:9px 12px 11px;scrollbar-width:thin;
}
.hp-baslik{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  border-bottom:1px solid var(--cizgi-soft);padding-bottom:5px;margin-bottom:7px;
}
.hp-baslik b{color:#5d4a17;font-size:15px}
.hp-baslik span{color:var(--soluk);font-size:12px;font-variant-numeric:tabular-nums;flex:none}
.hp-satir{font-size:12.5px;margin:5px 0;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.hp-satir img.mini{width:16px;height:16px;vertical-align:-3px}
@media (max-width:1100px){
  #harita-ekran{padding-left:196px}
  #harita-panel{width:236px}
}

/* ---------- modal ---------- */
#modal{
  position:fixed;inset:0;z-index:90;
  background:rgba(8,6,3,.62);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
#modal-kutu{
  position:relative;width:min(700px,96vw);max-height:88vh;
  display:flex;flex-direction:column;
  padding:16px 16px 14px;
}
#modal-icerik{overflow-y:auto;padding:2px 4px}
#modal-kapat{
  position:absolute;top:-13px;right:-11px;z-index:5;
  width:34px;height:34px;border-radius:50%;
  background:#efece4;border:1px solid #a99f8a;color:#4a3d22;
  font-size:15px;box-shadow:0 2px 6px rgba(0,0,0,.4);
}
#modal-kapat:hover{background:#e2dccd;border-color:var(--bronz)}

/* bina kurma menüsü */
.sec-kat{
  font-family:Georgia,serif;color:#5d4a17;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;border-bottom:1px solid var(--cizgi-soft);
  padding-bottom:3px;margin:14px 0 8px;
}
.sec-bina{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);border-radius:4px;
  padding:9px 11px;margin-bottom:8px;
}
.sec-bina>img{width:56px;height:56px;object-fit:contain;flex:none}
.sec-ic{flex:1;min-width:0}
.sec-ic b{color:#5d4a17;font-size:14px}
.sec-ic p{font-size:12px;color:var(--soluk);margin:2px 0 4px;line-height:1.4}
.sec-ic .maliyet{margin:4px 0}

.bina-baslik{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.bina-baslik img{width:76px;height:76px;object-fit:contain;flex:none}
.bina-baslik h2{font-size:21px;color:#5d4a17}
.bina-baslik .sv{color:var(--soluk);font-size:13px;font-family:"Segoe UI",sans-serif;letter-spacing:.05em;margin-left:8px}
.bina-baslik p{font-size:12.5px;color:var(--soluk)}
.etki{font-size:13px;color:var(--soluk);margin:6px 0}
.etki b{color:var(--murekkep)}
.maliyet{display:flex;gap:12px;font-size:13px;margin:8px 0;flex-wrap:wrap}
.maliyet span{display:flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;font-weight:600}
.maliyet img{width:20px;height:20px;object-fit:contain}
/* Yetersiz hammadde kırmızı. `b`yi de hedeflemek ZORUNLU: bina kurma
   listesinde `.sec-ic b` sayıya kendi rengini veriyor, span'daki kırmızı
   miras alınamıyordu — yükseltmede çalışıp dikmede çalışmamasının sebebi buydu. */
.maliyet .yetmez,
.maliyet span.yetmez b{color:var(--kirmizi)}
.ayrac{border:none;border-top:1px solid var(--cizgi-soft);margin:14px 0}
.bolum-baslik{font-family:Georgia,serif;color:#5d4a17;font-size:16px;letter-spacing:.06em;margin-bottom:8px}
.satir{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sayi-gir{
  width:88px;background:#f6f3ec;border:1px solid var(--cizgi);border-radius:4px;
  padding:7px 9px;text-align:right;
}
.sayi-gir:focus{outline:none;border-color:var(--bronz)}
.ipucu{font-size:12.5px;color:var(--soluk);margin-top:6px}
.buyuk-sayi{font-size:20px;color:var(--bronz);font-variant-numeric:tabular-nums;font-weight:700}
.statlar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
.stat{background:var(--kutu-2);border:1px solid var(--cizgi-soft);border-radius:4px;padding:6px 4px;text-align:center}
.stat b{display:block;font-size:15px;color:var(--murekkep)}
.stat i{font-style:normal;font-size:10.5px;color:var(--soluk);letter-spacing:.06em}

.hedef{
  border:1px solid var(--cizgi-soft);border-radius:4px;background:var(--kutu-2);
  padding:9px 11px;margin-bottom:8px;
}
.hedef-ust{display:flex;justify-content:space-between;align-items:baseline}
.hedef-ust h4{color:#5d4a17;font-size:14.5px;font-family:Georgia,serif;letter-spacing:.04em}
.hedef-ust span{font-size:11.5px;color:var(--soluk)}
.hedef-bilgi{display:flex;gap:14px;font-size:12px;color:var(--soluk);margin:4px 0 8px}
.hedef-bilgi b{color:var(--murekkep)}

.rapor{
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);border-left:3px solid var(--gold-koyu);
  border-radius:4px;padding:9px 13px;margin-bottom:9px;
}
.rapor.kotu{border-left-color:var(--kirmizi)}
.rapor h4{font-size:14px;color:#5d4a17;font-family:Georgia,serif;letter-spacing:.04em}
.rapor.kotu h4{color:var(--kirmizi)}
.rapor time{font-size:11px;color:var(--soluk);float:right}
.rapor p{font-size:12.5px;margin-top:3px}

/* oyuncu savaşı: kompakt özet satırı */
/* rapor özetinde tıklanır ad ve koordinat */
.rp-ad-link,.rp-koord-link{
  background:none;border:none;padding:0;cursor:pointer;font:inherit;
  color:#6b4f13;font-weight:700;text-decoration:underline;text-underline-offset:2px;
}
.rp-ad-link:hover,.rp-koord-link:hover{color:#a3761f}
.rp-koord-link{font-weight:600;font-variant-numeric:tabular-nums}
.rp-ben{font-weight:700}
.rp-kilic{opacity:.7}
.rp-ozet{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:7px;padding-top:7px;border-top:1px solid var(--cizgi-soft);
  font-size:12.5px;color:var(--soluk);
}

/* görsel çarpışma raporu */
.sr{margin-top:8px;border-top:1px solid var(--cizgi-soft);padding-top:7px}
.sr-etiket{
  font-family:Georgia,serif;font-size:10.5px;letter-spacing:.18em;
  color:#8a7a52;margin:6px 0 5px;
}
.sr-grid{display:flex;flex-wrap:wrap;gap:7px}
.sr-birim{width:58px;text-align:center}
.sr-portre{
  width:58px;height:58px;border-radius:5px;padding:3px;
  background:var(--kutu-koyu);border:1px solid var(--cizgi-soft);
  display:flex;align-items:center;justify-content:center;
}
.sr-portre img{max-width:100%;max-height:100%;object-fit:contain}
.sr-gonderilen{font-size:13px;font-weight:700;color:var(--murekkep);font-variant-numeric:tabular-nums;margin-top:2px}
.sr-kayip{font-size:12px;font-weight:700;color:var(--kirmizi);font-variant-numeric:tabular-nums}
.sr-kayip.yok{color:#b3ac9c;font-weight:400}
.sr-savunan{font-size:12.5px;color:var(--soluk)}
.sr-savunan b{color:var(--murekkep)}
.sr-ganimet{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:7px;padding-top:6px;border-top:1px dashed var(--cizgi-soft);
}
.sr-etiket-mini{font-size:11.5px;color:#8a7a52;letter-spacing:.06em}
.sr-gan{display:flex;align-items:center;gap:4px;font-size:12.5px;font-variant-numeric:tabular-nums}
.sr-gan img{width:18px;height:18px;object-fit:contain}
.sr-gan b{color:var(--murekkep)}

/* ---------- istatistik: sunucu sıralamaları ---------- */
#modal-kutu.genis{width:min(880px,96vw)}

/* kendi obanın özet şeridi */
.oba-ozet{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.ozet-kutu{
  flex:1 1 105px;background:var(--kutu-2);border:1px solid var(--cizgi-soft);
  border-radius:5px;padding:5px 8px 6px;text-align:center;
}
.ozet-kutu b{display:block;font-size:15px;color:#5d4a17;font-variant-numeric:tabular-nums}
.ozet-kutu i{display:block;font-style:normal;font-size:10px;letter-spacing:.08em;color:var(--soluk);text-transform:uppercase}
.ozet-kutu em{display:block;font-style:normal;font-size:10.5px;color:var(--bronz);margin-top:2px;font-variant-numeric:tabular-nums}

/* diplomasi */
.dip-rozet{
  font-size:11px;letter-spacing:.06em;padding:2px 8px;border-radius:3px;
  vertical-align:4px;border:1px solid;
}
.dip-dost{color:#3f6b2e;border-color:#8fae72;background:rgba(63,107,46,.12)}
.dip-ateskes{color:#8a6220;border-color:#c8a763;background:rgba(138,98,32,.12)}
.dip-dusman{color:#a03325;border-color:#c69384;background:rgba(160,51,37,.12)}
.davet-bilgi em.dip-dost,.davet-bilgi em.dip-ateskes,.davet-bilgi em.dip-dusman{
  border:none;background:none;padding:0;display:block;font-size:11px;margin-top:2px;
}
.bos-lider{color:var(--soluk);font-weight:400;font-style:italic}

/* tılsım / zafer bandı */
.tilsim-bant{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:7px 12px;margin-bottom:8px;border-radius:6px;
  background:linear-gradient(#2e1a44,#241536);border:1px solid #6b3fa0;
  color:#e6d7ff;font-size:12.5px;box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.tilsim-bant b{font-family:Georgia,serif;letter-spacing:.04em}
.tilsim-bant span{font-variant-numeric:tabular-nums;color:#c9a6f5;font-weight:600}
.tilsim-bant.zafer{
  background:linear-gradient(#3b2352,#2b1840);border-color:#a06fe0;
  animation:zaferNabiz 2s ease-in-out infinite;
}
@keyframes zaferNabiz{0%,100%{box-shadow:0 0 0 0 rgba(160,111,224,.4)}50%{box-shadow:0 0 14px 2px rgba(160,111,224,.55)}}
.tilsim-bant.bitti{
  background:linear-gradient(#5d4a17,#3f320f);border-color:var(--bronz);
  color:#f4ead0;cursor:pointer;
}
@media (prefers-reduced-motion:reduce){ .tilsim-bant.zafer{animation:none} }
.tilsim-aktif{color:#b479f0}

/* zafer ekranı */
.zafer-kutu{text-align:center;padding:14px 10px}
.zafer-tug{display:flex;justify-content:center;margin-bottom:12px;line-height:0}
.zafer-tug .bayrak{border-radius:6px;box-shadow:0 6px 22px rgba(0,0,0,.45)}
.zafer-kutu h2{font-size:30px;color:#5d4a17;letter-spacing:.05em;margin-bottom:2px}
.zafer-alt{color:var(--soluk);font-size:14px;margin-bottom:12px}
.zafer-tilsimlar{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:14px}
.zafer-tilsim{
  font-size:12px;padding:4px 10px;border-radius:4px;
  background:#2e1a44;border:1px solid #6b3fa0;color:#e6d7ff;
}

/* pazar: kervan yükü */
.kervan-yuk{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.kervan-oge{
  display:flex;align-items:center;gap:5px;padding:4px 7px;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);border-radius:5px;
}
.kervan-oge img{width:22px;height:22px;object-fit:contain}
.kervan-oge .sayi-gir{width:74px}

/* üst geçiş: oyuncular / ittifaklar */
.ist-kipler{display:flex;gap:4px;margin-bottom:7px}
.ist-kip{
  padding:6px 22px 7px;font-family:Georgia,serif;font-size:13.5px;letter-spacing:.05em;
  background:var(--kutu-2);border:1px solid var(--cizgi);border-radius:5px;color:var(--soluk);
}
.ist-kip:hover{color:var(--ink);background:#efece3}
.ist-kip.aktif{
  background:linear-gradient(#6b5524,#513f18);border-color:#3d2f11;color:#f4ead0;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

/* sekmeler */
.ist-sekmeler{display:flex;gap:3px;align-items:flex-end;border-bottom:2px solid var(--bronz)}
.ist-sekme{
  padding:5px 15px 6px;font-size:12.5px;letter-spacing:.03em;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);border-bottom:none;
  border-radius:5px 5px 0 0;color:var(--soluk);
}
.ist-sekme:hover{color:var(--ink);background:#efece3}
.ist-sekme.aktif{background:var(--bronz);border-color:var(--bronz);color:#fff8e8;font-weight:600}

.ist-panel{padding-top:0}
.ist-govde{border:1px solid var(--cizgi-soft);border-top:none;background:#fbfaf6;padding:0 0 8px}
.ist-serit{
  background:var(--kutu-2);border-bottom:1px solid var(--cizgi-soft);
  padding:6px 11px;font-family:Georgia,serif;font-size:13.5px;color:#5d4a17;letter-spacing:.04em;
}

/* sıralama tablosu */
.ist-liste{width:100%;border-collapse:collapse;font-size:12.5px}
.ist-liste th{
  padding:5px 8px;text-align:left;font-size:11px;letter-spacing:.06em;
  color:var(--soluk);text-transform:uppercase;border-bottom:1px solid var(--cizgi-soft);
}
.ist-liste th.ist-sayi{text-align:right}
.ist-liste td{padding:4px 8px;border-bottom:1px solid #eceadf}
.ist-liste tbody tr:nth-child(even){background:#f5f3ec}
.ist-liste tbody tr:hover{background:#efeade}
.ist-sira{width:44px;color:var(--soluk);font-variant-numeric:tabular-nums}
.ist-ad{color:var(--ink)}
.ist-it{color:var(--bronz);font-weight:600}
.ist-it-ad{color:var(--soluk);font-weight:400;font-size:11px}
.ist-sayi{text-align:right;font-variant-numeric:tabular-nums}
.ist-liste tr.ist-benim,
.ist-liste tbody tr.ist-benim:nth-child(even){background:#e8ecd6;box-shadow:inset 2px 0 0 var(--bronz)}
.ist-liste tr.ist-benim .ist-ad{font-weight:700;color:#4c5a22}
/* aramada bulunan satır: kendi satırından FARKLI renk, karışmasın */
.ist-liste tr.ist-bulundu,
.ist-liste tbody tr.ist-bulundu:nth-child(even){
  background:#fbeccb;box-shadow:inset 3px 0 0 #c9932e;
}
.ist-liste tr.ist-bulundu .ist-ad{font-weight:700;color:#7a5410}
.ist-liste tr.ist-benim.ist-bulundu,
.ist-liste tbody tr.ist-benim.ist-bulundu:nth-child(even){
  background:#f1eec6;box-shadow:inset 3px 0 0 #c9932e,inset 6px 0 0 var(--bronz);
}
.ist-ara-sonuc{
  margin:8px 2px 0;padding:7px 10px;border-radius:4px;font-size:12.5px;
  background:#f4ecd8;border:1px solid #d9c89a;color:#6b5622;
}
.ist-ara-sonuc.yok{background:#f6e3e0;border-color:#dbb2ac;color:#7d3b32}
.ist-ara-sil{padding:2px 9px;line-height:1.1;font-size:15px}

/* alt bar: arama + sayfalama */
.ist-alt{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 10px 2px;
}
.ist-ara{display:flex;align-items:center;gap:6px}
.ist-etiket{font-size:11.5px;color:var(--soluk)}
.ist-sira-gir{width:66px}
.ist-ad-gir{
  width:120px;padding:3px 7px;font-size:12.5px;
  background:#fff;border:1px solid var(--cizgi-soft);border-radius:4px;color:var(--ink);
}
.ist-sayfalar{display:flex;align-items:center;gap:2px}
.ist-sf{
  min-width:23px;padding:2px 5px;font-size:11.5px;border-radius:3px;
  border:1px solid transparent;color:var(--bronz);
}
.ist-sf:hover:not(:disabled){background:var(--kutu-2);border-color:var(--cizgi-soft)}
.ist-sf:disabled{color:#c3bcaa}
.ist-sf.simdi{background:var(--bronz);border-color:var(--bronz);color:#fff8e8;font-weight:700}
.ist-nokta{color:var(--soluk);padding:0 2px}

/* bayraklar, tıklanır adlar, ittifak çağrısı */
.bayrak{vertical-align:-3px;border-radius:2px;flex:none}
.it-etiket{display:inline-flex;align-items:center;gap:4px}
.ist-ad.tikla,.it-etiket.tikla{cursor:pointer}
.ist-ad.tikla:hover,.it-etiket.tikla:hover{color:var(--bronz);text-decoration:underline}
.ist-liste .ist-ad .bayrak{margin-right:4px}
.ist-cagri{
  display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  padding:7px 10px;background:#f4f1e8;border-bottom:1px solid var(--cizgi-soft);
  font-size:12.5px;color:var(--soluk);
}

/* sağ sütun: köy satırındaki kılıç göstergeleri */
.oba-kilic-kap{display:inline-flex;gap:3px;margin-right:6px;vertical-align:1px}
.oba-kilic{
  width:17px;height:17px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;line-height:1;border:1px solid;
  animation:kilicYanip 1.15s ease-in-out infinite;
}
.oba-kilic.giden{color:#3f6b2e;border-color:#3f6b2e;background:rgba(63,107,46,.14)}
.oba-kilic.gelen{color:#a03325;border-color:#a03325;background:rgba(160,51,37,.14)}
@keyframes kilicYanip{0%,100%{opacity:1}50%{opacity:.28}}
@media (prefers-reduced-motion:reduce){ .oba-kilic{animation:none} }

/* kuyruk: saldırı satırları */
.kuyruk-satir .tur.giden{color:#3f6b2e}
.kuyruk-satir .tur.gelen{color:#a03325;font-weight:700}
/* gelen destek: oba listesindeki kalkanla aynı mor — iki gösterge aynı olayı
   anlatıyor, aynı rengi taşısın */
.kuyruk-satir .tur.destek-satir{color:#7d3fbf;font-weight:700}
.kuyruk-satir.tehlike{background:rgba(160,51,37,.07)}

/* bina modali: nüfus / kültür büyüme satırı */
.buyume-satir{
  display:flex;gap:14px;flex-wrap:wrap;margin:4px 0 9px;
  font-size:12px;color:var(--soluk);
}
.bs-oge i{font-style:normal;margin-right:5px}
.bs-oge b{color:#5d4a17;font-variant-numeric:tabular-nums}

/* bina kurma menüsü: kilitli bina */
.sec-bina.kilitli{opacity:.62}
.sec-bina.kilitli img{filter:grayscale(1) brightness(.8)}
.sec-sart{color:var(--kirmizi);font-size:11.5px;margin:2px 0 4px}

/* ittifak sözü */
.ittifak-soz{
  font-size:14px;line-height:1.6;color:var(--metin,var(--ink));
  border-left:2px solid var(--bronz);padding-left:12px;margin:0 0 6px;
}

/* profiller */
.geri-btn{font-size:12px;color:var(--soluk);margin-bottom:6px}
.geri-btn:hover{color:var(--bronz)}
.profil-bas{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.profil-bayrak{flex:none;line-height:0}
.profil-bayrak .bayrak{border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.profil-ad{flex:1;min-width:150px}
.profil-ad h2{font-size:22px;color:#5d4a17;line-height:1.15}
.profil-alt{font-size:12.5px;color:var(--soluk)}
.profil-sen{
  font-size:11px;letter-spacing:.08em;color:#4c5a22;background:#e8ecd6;
  border:1px solid #b9c397;border-radius:3px;padding:1px 6px;vertical-align:3px;
}
.profil-ittifak{
  display:flex;align-items:center;gap:9px;padding:6px 12px 6px 8px;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);border-radius:6px;
}
.profil-ittifak:hover{border-color:var(--bronz)}
.profil-ittifak b{display:block;font-size:14px;color:#5d4a17}
.profil-ittifak i{display:block;font-style:normal;font-size:11px;color:var(--soluk)}
.profil-form{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.ist-ad-gir.uzun{width:180px}

/* ittifak çağrıları (Kurultay) */
.alt-baslik{
  font-family:Georgia,serif;font-size:13px;color:#5d4a17;letter-spacing:.05em;
  border-bottom:1px solid var(--cizgi-soft);padding-bottom:3px;margin:12px 0 7px;
}
/* tuğ üye listesinde aktiflik dairesi */
.uye-nokta{
  display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;
  vertical-align:middle;border:1px solid rgba(0,0,0,.25);
}
.uye-nokta.acik{background:#3f9b46;box-shadow:0 0 4px rgba(63,155,70,.7)}
.uye-nokta.notr{background:#9b968a}
.uye-nokta.inaktif{background:#c0392b}
.uye-nokta.yok{background:transparent;border-style:dashed}
.davet-sat{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);border-radius:6px;
  padding:7px 10px;margin-bottom:6px;
}
.davet-bayrak{line-height:0;flex:none}
.davet-bilgi{flex:1;min-width:130px;font-size:12.5px}
.davet-bilgi b{color:#5d4a17;font-size:13.5px}
.davet-bilgi i{font-style:normal;color:var(--soluk)}
.davet-bilgi em{display:block;font-style:normal;font-size:11px;color:var(--soluk);margin-top:1px}
.davet-dugme{display:flex;gap:5px;flex:none}
.btn.tehlike{color:#a03325;border-color:#c69384}
.btn.tehlike:hover:not(:disabled){background:#efd9d2;border-color:#a03325}

/* bayrak düzenleyici */
.bayrak-oniz{display:flex;justify-content:center;margin-bottom:11px;line-height:0}
.bayrak-oniz .bayrak{border-radius:5px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.bayrak-secim{display:flex;flex-direction:column;gap:3px}
.bayrak-etiket{font-size:10.5px;letter-spacing:.07em;color:var(--soluk);text-transform:uppercase;margin-top:5px}
.bayrak-satir{display:flex;flex-wrap:wrap;gap:5px}
.bayrak-dugme{
  width:34px;height:34px;padding:3px;border-radius:4px;line-height:0;
  background:var(--kutu-2);border:2px solid var(--cizgi-soft);
  display:flex;align-items:center;justify-content:center;
}
.bayrak-dugme:hover{border-color:var(--cizgi)}
.bayrak-dugme.secili{border-color:var(--bronz);box-shadow:0 0 0 1px var(--bronz)}
.bayrak-nokta{width:20px;height:20px;border-radius:3px;display:block;border:1px solid rgba(0,0,0,.25)}

/* mesajlar */
.msj-sat{border-bottom:1px solid #eceadf;background:#fff}
.msj-sat:nth-child(even){background:#f7f5ef}
.msj-sat.yeni .msj-kisi,.msj-sat.yeni .msj-konu{font-weight:700;color:var(--ink)}
.msj-sat.acik{background:#f2efe4}
.msj-ust{display:flex;align-items:baseline;gap:10px;padding:6px 11px;cursor:pointer;font-size:12.5px}
.msj-ust:hover{background:rgba(0,0,0,.03)}
.msj-kisi{flex:none;width:140px;max-width:38%;color:var(--bronz);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msj-konu{flex:1;color:var(--soluk);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msj-t{flex:none;font-size:11px;color:var(--soluk);font-variant-numeric:tabular-nums}
.msj-metin{padding:2px 12px 9px;font-size:13px;line-height:1.6;color:var(--ink);
  overflow-wrap:anywhere;word-break:break-word;max-width:100%}   /* uzun sözcük/bağlantı kutudan taşmasın */
.msj-sat .satir{padding:0 11px 9px}
.msj-form{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:9px 11px 4px}
.msj-govde{
  display:block;width:calc(100% - 22px);margin:0 11px;padding:7px 9px;
  font:inherit;font-size:13px;line-height:1.55;color:var(--ink);
  background:#fff;border:1px solid var(--cizgi-soft);border-radius:5px;resize:vertical;
}
.ist-govde>.satir{padding:9px 11px 0}
.ist-govde>.ipucu{padding:4px 11px 0}

/* ilk 10 kutuları */
.ist-top10{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:9px}
.ist-kutu{border:1px solid var(--cizgi-soft);border-radius:5px;background:#fff;overflow:hidden}
.ist-bos{padding:14px 10px;text-align:center;color:var(--soluk);font-size:12.5px;font-style:italic}
.ist-kutu-bas{
  background:var(--kutu-2);border-bottom:1px solid var(--cizgi-soft);
  padding:5px 9px;font-size:12px;color:#5d4a17;letter-spacing:.03em;
}
.ist-mini{font-size:12px}
.ist-mini td,.ist-mini th{padding:3px 8px}
.ist-mini .ist-sira{width:30px}
@media (max-width:760px){
  .ist-top10{grid-template-columns:1fr}
  .ist-sekme{padding:5px 9px;font-size:11.5px}
  .ist-alt{justify-content:center}
}

/* ---------- açılış ---------- */
#landing{
  position:fixed;inset:0;z-index:100;
  /* image-set: destekleyen tarayıcı webp'yi alır, diğeri jpg'ye düşer */
  background:
    linear-gradient(rgba(10,8,4,.55),rgba(10,8,4,.88) 75%,#0a0804),
    image-set(url("../assets/landing.webp") type("image/webp"),
              url("../assets/landing.jpg")  type("image/jpeg"))
      center/cover no-repeat #0a0804;
  background-color:#0a0804;
  display:flex;align-items:flex-start;justify-content:center;
  overflow-y:auto;padding:30px 14px;
}
.landing-ic{max-width:840px;width:100%;text-align:center;margin:auto 0}
/* align-items:center TAŞAN içerikte üstü kırpar (sunucu kutusu erişilmez
   oluyordu — SEO bölümü içeriği uzatınca ortaya çıktı). auto kenar payı
   aynı ortalamayı kırpmadan verir. */
.landing-ic h1{font-size:54px;color:var(--gold);letter-spacing:.2em;text-shadow:0 3px 18px rgba(0,0,0,.9)}
.landing-ic h1 em{font-size:26px;color:#93835f}
.slogan{color:#d9c9a1;margin:8px 0 26px;font-size:16px;text-shadow:0 2px 8px #000}
.form-satir{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px}
.form-satir label{font-size:14px;color:#93835f}
.form-satir input{
  background:rgba(15,12,7,.85);border:1px solid #3a2f1d;border-radius:3px;
  padding:9px 12px;width:230px;color:#d9c9a1;
}
.form-satir input:focus{outline:none;border-color:var(--gold-koyu)}
#irk-secim{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}
@media (max-width:700px){#irk-secim{grid-template-columns:1fr;gap:9px;margin-bottom:18px}}

.irk-kart{
  background:rgba(22,17,10,.88);border:1px solid #3a2f1d;border-radius:6px;
  padding:14px 12px;cursor:pointer;transition:border-color .15s,transform .15s;color:#d9c9a1;
}
.irk-kart:hover{transform:translateY(-3px)}
.irk-kart img{height:190px;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.7))}
.irk-kart h3{font-size:19px;margin:8px 0 4px}
.irk-kart p{font-size:12.5px;color:#93835f;line-height:1.45}
.irk-kime{
  display:inline-block;margin:0 0 6px;padding:3px 9px;border-radius:11px;
  font-size:11px;font-weight:700;letter-spacing:.03em;
  color:var(--irk);background:rgba(255,255,255,.06);border:1px solid var(--irk);
}
.irk-not{margin-top:6px;font-size:11.5px;color:#7e7052;line-height:1.5;font-style:italic}
@media (max-width:760px){.irk-kart p{font-size:12px}.irk-not{font-size:11px}}
.irk-kart.secili{border-color:var(--irk);box-shadow:0 0 0 1px var(--irk),0 0 26px -6px var(--irk)}
.irk-kart.secili h3{color:var(--irk)}
#landing .btn{
  background:#2a2213;border:1px solid var(--gold-koyu);color:var(--gold);box-shadow:none;
}
#landing .btn:hover:not(:disabled){background:#372c15;border-color:var(--gold)}

/* ---------- çekmece sekmeleri (mobil) ---------- */
.cekmece-tab{display:none}
#cekmece-perde{display:none}

@media (max-width:900px){
  #menu{gap:12px}
  .menu-btn{width:46px}
  .menu-btn img{width:46px;height:46px}
  .menu-btn::before{width:56px;height:56px}
  .menu-ad{font-size:10px}
  .logo{display:none}
  #sag-sutun{width:210px}
  #resbar{width:170px}
  .res-kutu img{width:34px;height:34px}
  .landing-ic h1{font-size:36px}
}

/* ---------- mobil: kaydırmalı yan paneller ---------- */
@media (max-width:760px){
  /* kiriş ortalanır; oba kutusu yerini ⋯ menüsüne bırakır */
  #ust{top:6px;padding:0 8px;justify-content:center;position:relative}
  #kiris{padding:7px 24px;border-radius:13px}
  #kiris::before{left:9px}
  #kiris::after{right:9px}
  #menu{gap:9px}
  .menu-btn{width:44px}
  .menu-btn img{width:44px;height:44px}
  .menu-btn::before{width:54px;height:54px}
  .menu-ad{font-size:9.5px;letter-spacing:0}
  .oba-bilgi{display:none}
  /* ⋯ butonu yok: oba kartına sağ çekmece sekmesinden ulaşılır */

  /* iki panel de ekran dışında bekler, sekmeyle kayarak girer —
     arkalarında pano yok, yalnız kutuların kendisi görünür */
  #resbar, #sag-sutun{
    top:0;bottom:0;height:100%;max-height:none;
    padding:78px 10px 16px;margin:0;
    background:none;border:none;box-shadow:none;
    overflow-y:auto;overflow-x:visible;z-index:60;
    transition:transform .26s ease;
  }
  #resbar{
    left:0;right:auto;width:196px;
    transform:translateX(-104%);
  }
  #sag-sutun{
    right:0;left:auto;width:232px;
    transform:translateX(104%);
  }
  body.sol-acik #resbar{transform:translateX(0)}
  body.sag-acik #sag-sutun{transform:translateX(0)}

  /* çekmece kutuları kendi gölgeleriyle sahnenin üstünde dursun */
  #resbar .res-kutu, #sag-sutun .cerceve, #resbar .ordu-kutu{
    width:100%;box-shadow:0 4px 14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.6);
  }
  #resbar .ordu-kutu{box-shadow:0 4px 14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12)}

  .cekmece-tab{
    display:flex;align-items:center;justify-content:center;
    position:fixed;top:50%;transform:translateY(-50%);
    width:26px;height:64px;z-index:61;
    background:linear-gradient(#f2efe8,var(--kutu));
    border:1px solid var(--cizgi);color:#5d4a17;font-size:13px;
    box-shadow:0 3px 10px rgba(0,0,0,.5);
    transition:transform .26s ease;
  }
  #cek-sol{left:0;border-radius:0 8px 8px 0;border-left:none}
  #cek-sag{right:0;border-radius:8px 0 0 8px;border-right:none}
  body.sol-acik #cek-sol{transform:translate(196px,-50%)}
  body.sag-acik #cek-sag{transform:translate(-232px,-50%)}

  #cekmece-perde{
    position:fixed;inset:0;z-index:55;background:rgba(6,5,3,.45);
    opacity:0;pointer-events:none;transition:opacity .26s;
  }
  body.sol-acik #cekmece-perde,
  body.sag-acik #cekmece-perde{display:block;opacity:1;pointer-events:auto}

  #queue-banner{width:min(320px,88vw);bottom:calc(34px + env(safe-area-inset-bottom,0px));padding:6px 10px}

  /* harita: tam genişlik (sağ sütun çekmecede).
     Üst boşluk kirişin altında kalmalı: 6px üst + 44px düğme + 2×7px iç
     boşluk = 64px; 72 rahat pay bırakır, yoksa "Obama Git" kirişin altında
     kalıp görünmez oluyordu. */
  /* Üst pay SABİT 72px'di; çentikli telefonlarda kiriş daha aşağı indiği için
     "Obama Git" onun altında kalıp tıklanamıyordu. Güvenli alan eklendi. */
  #harita-ekran{
    flex-direction:column;gap:6px;
    padding:calc(72px + env(safe-area-inset-top,0px)) 6px
            calc(32px + env(safe-area-inset-bottom,0px));   /* alt: sohbet şeridi payı */
  }
  .harita-ipucu{display:none}
  /* Başlık şeridi asla ezilmesin: sığmayan düğme alt satıra insin, şerit de
     kendi yüksekliğini korusun (flex:1 olan harita alanı kısalır). */
  #harita-ust{gap:6px;flex-wrap:wrap;flex:0 0 auto}
  #harita-ust>*{flex:0 0 auto}
  #harita-koord{font-size:12.5px;padding:3px 9px}
  #harita-ust .btn.kucuk{padding:5px 10px;font-size:12px}
  /* eksen şeridi daralır ki karelere daha çok yer kalsın */
  #harita-alan{grid-template-columns:20px 1fr;grid-template-rows:15px 1fr}
  #harita-eksen-x span,#harita-eksen-y span{font-size:8.5px}

  /* Karo menüsü telefonda alt panel olur: parmakla erişilir, taşmaz.
     ipucuKonumla satır içi left/top yazdığı için !important gerekiyor. */
  #karo-menu{
    left:0!important;right:0!important;top:auto!important;bottom:0!important;
    width:auto!important;max-height:80vh;
    border-radius:14px 14px 0 0;border-width:1px 0 0;
    box-shadow:0 -10px 30px rgba(0,0,0,.7);
    padding-bottom:calc(6px + env(safe-area-inset-bottom));
    overscroll-behavior:contain;                  /* kaydırma haritaya sızmasın */
  }
  /* çekilebilir panel olduğu belli olsun */
  #karo-menu .km-ust{
    position:sticky;top:0;z-index:2;background:#2b2a26;
    padding-top:14px;
  }
  #karo-menu .km-ust::before{
    content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
    width:34px;height:3px;border-radius:2px;background:#6d6a60;
  }
  /* İki sütunlu bilgi ızgarası 375px'te sığmıyordu: etiket ve değer
     birbirinin üstüne biniyordu. Telefonda tek sütun. */
  .km-bilgi{grid-template-columns:1fr;gap:1px;padding:8px 12px}
  .km-bilgi>div:not(.km-not){gap:10px;align-items:baseline}
  .km-bilgi span{flex:none;white-space:nowrap}
  .km-bilgi b{
    flex:1;min-width:0;text-align:right;
    /* `anywhere` KULLANMA: en-küçük-içerik genişliğini tek harfe düşürüyor,
       esnek kutu da değeri o kadar daraltıp yazıyı DİKEY diziyordu. */
    overflow-wrap:break-word;
  }
  .km-ad{
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .km-eylem{font-size:13px;padding:9px 11px}      /* parmak hedefi büyüsün */
  .km-kapat{width:34px;height:34px;font-size:15px;border-color:#55534c}
  #karo-menu select,#karo-menu input{font-size:16px}  /* iOS yakınlaştırmasın */
  #modal{padding:12px}
  #modal-kutu{border-width:20px;padding:12px}
  .statlar{grid-template-columns:repeat(2,1fr)}
  .sec-bina>img{width:44px;height:44px}
}

/* ---------- açılış/kayıt ekranı: telefon ---------- */
@media (max-width:620px){
  /* içerik başlıktan uzun: ortalamak üstünü kırpıyordu, üstten hizala */
  #landing{align-items:flex-start;padding:56px 12px 26px}
  .landing-ic{margin:auto 0}
  .slogan{font-size:14px;margin:6px 0 18px;line-height:1.45}
  /* etiket + kutu yan yana sığmıyordu; alt alta ve tam genişlik */
  .landing-form{flex-direction:column;align-items:stretch;gap:4px;margin-bottom:16px}
  .landing-form label{text-align:left;font-size:12.5px}
  .landing-form label + label{margin-top:8px}
  .form-satir input{width:100%;font-size:16px}   /* 16px: iOS yakınlaştırmasın */
  /* boy kartları: görsel solda, yazı sağda — üç kart tek ekrana sığsın */
  .irk-kart{
    display:grid;grid-template-columns:74px 1fr;gap:10px;
    align-items:center;text-align:left;padding:9px 11px;
  }
  .irk-kart img{grid-row:1/3;height:74px;width:74px}
  .irk-kart h3{font-size:16px;margin:0 0 2px}
  .irk-kart p{font-size:11.5px;line-height:1.4}
  .landing-dip{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 4px}
  .landing-dip a{padding:4px 7px}          /* parmakla basılabilir olsun */
  #landing .btn.buyuk{width:100%}
  /* sunucu satırı: ad ile durum alt alta, "Katıl" sağda kalır */
  .ags-sat{flex-wrap:wrap;padding:10px 12px;gap:4px 9px}
  .ags-ad{flex:1 0 auto}
  .ags-durum{flex:1 0 100%;order:3}
}

/* ---------- başlangıç görevleri (sağ sütun) ---------- */
#gorev-kutu.hidden{display:none}
#gorev-sayac{
  font-size:11px;font-weight:400;letter-spacing:.04em;color:var(--soluk);
  font-family:"Segoe UI",sans-serif;text-transform:none;
}
#gorev-sayac.hazir{
  color:#3f6b2e;font-weight:700;
  background:rgba(63,107,46,.14);border-radius:4px;padding:1px 6px;
}
.gorev-sat{
  border:1px solid var(--cizgi-soft);border-radius:6px;
  padding:7px 9px;margin-bottom:6px;background:rgba(255,255,255,.35);
}
/* tamamlanan görev göze çarpsın: ödül bekliyor */
.gorev-sat.tamam{
  border-color:#7fa46a;background:rgba(120,168,96,.16);
  box-shadow:inset 2px 0 0 #3f6b2e;
}
.gorev-ad{font-family:Georgia,serif;font-size:13.5px;color:#5d4a17;letter-spacing:.02em}
.gorev-hedef{font-size:12px;font-weight:600;color:#4d7a37;margin:2px 0 1px;line-height:1.35}
.gorev-sat.tamam .gorev-hedef{color:#33591f}
.gorev-not{font-size:11px;color:var(--soluk);line-height:1.4;margin:1px 0 5px}
.gorev-odul{display:flex;flex-wrap:wrap;gap:8px;font-size:11.5px;font-weight:600;
  color:#5d4a17;font-variant-numeric:tabular-nums;margin-bottom:5px}
.gorev-odul span{display:flex;align-items:center;gap:3px}
.gorev-odul img{width:15px;height:15px;object-fit:contain}
.gorev-bar{height:4px;background:#cfc8b8;border-radius:2px;overflow:hidden}
.gorev-bar-ic{height:100%;background:linear-gradient(90deg,var(--bronz),var(--bronz-acik));
  transition:width .3s linear}
.gorev-durum{font-size:10.5px;color:var(--soluk);text-align:right;margin-top:2px;
  font-variant-numeric:tabular-nums}
.btn.gorev-al{width:100%;background:#4d7a37;border-color:#3f6b2e;color:#f2f6ee}
.btn.gorev-al:hover{background:#5b8c42;border-color:#4d7a37}

/* ---------- telefonda bina seviyesi rozeti ----------
   Rozet sağ altta ve 23px'ti; dairenin kendisi telefonda ~40px'e düştüğü için
   binanın üstüne biniyor, bina görünmez oluyordu. Sol üst köşeye alıp
   küçültüyoruz: binanın gövdesi (aşağı-orta) açıkta kalır. */
@media (max-width:760px){
  .sv-rozet{
    right:auto;bottom:auto;
    left:-6%;top:-4%;
    min-width:16px;height:16px;padding:0 2px;
    font-size:10px;border-width:1px;
    box-shadow:0 1px 3px rgba(0,0,0,.6);
  }
  .slot.kurulmamis .sv-rozet{font-size:11px}
  /* Yazısız (görselsiz) binada rozet ortada kalsın — orada örtecek bina yok */
  .slot.sade .sv-rozet{
    left:50%;top:50%;right:auto;bottom:auto;
    transform:translate(-50%,-50%);
    min-width:20px;height:20px;font-size:11px;
  }
}

/* ---------- açılış perdesi ----------
   Sayfa yüklenirken hangi ekranın açılacağı sunucu yanıtına bağlı. Perde
   olmadan `#landing` HTML'de görünür başladığı için kayıt ekranı bir an
   yanıp sönüyordu. Perde jeton varken açık başlar; karar verilince kalkar. */
#perde{
  position:fixed;inset:0;z-index:9800;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:#0a0804;
  transition:opacity .28s ease;
}
#perde.hidden{display:none}
#perde.kapaniyor{opacity:0;pointer-events:none}
#perde img{
  width:min(120px,26vw);height:auto;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.7));
  animation:perde-nefes 2.2s ease-in-out infinite;
}
@keyframes perde-nefes{
  0%,100%{opacity:.82;transform:scale(1)}
  50%{opacity:1;transform:scale(1.04)}
}
.perde-bar{
  width:min(190px,52vw);height:3px;border-radius:2px;
  background:rgba(233,220,180,.16);overflow:hidden;
}
.perde-bar i{
  display:block;width:38%;height:100%;border-radius:2px;
  background:linear-gradient(90deg,transparent,#c9a94e,transparent);
  animation:perde-kay 1.15s ease-in-out infinite;
}
@keyframes perde-kay{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(370%)}
}
/* Hareketi kısıtlayan kullanıcıda titreşim olmasın */
@media (prefers-reduced-motion:reduce){
  #perde img,.perde-bar i{animation:none}
}

/* ---------- boy simgesi (miğfer) ----------
   Listede adın solunda, 22px. Metinle aynı satırda oturması için
   vertical-align ayarlı; yükseklik satırı büyütmesin diye margin negatif. */
/* Dikey hizalama: sabit px kaydırma tahminiydi ve simge metnin 4px altında
   kalıyordu. `middle` simgenin ortasını yazının orta hizasına oturtur ve
   yazı boyu değişse de bozulmaz. */
.boy-simge{
  width:22px;height:22px;object-fit:contain;
  vertical-align:middle;margin:-4px 5px -3px 0;
  /* `middle` simgeyi taban çizgisine göre hizalar; yazının GÖRSEL ortası
     bunun ~1,5px yukarısında kalıyor. Kalan farkı buradan kapatıyoruz. */
  position:relative;top:-1.5px;
  flex:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.boy-simge.bs-kucuk{width:18px;height:18px;margin:-3px 4px -2px 0}
.boy-simge.bs-buyuk{width:34px;height:34px;margin:-6px 8px -5px 0}
/* karo ipucundaki değer sağa yaslı: simge sayıyla çakışmasın */
.ki-satir b .boy-simge,.km-bilgi b .boy-simge{margin-right:4px}
/* oba kartı üst satırı: simge ile boy adı yan yana ortalı */
#ok-oyuncu{display:flex;align-items:center;justify-content:center}
@media (max-width:760px){
  .boy-simge{width:19px;height:19px;margin:-3px 4px -2px 0}
}

/* yaylak ipucunda haydut sayısı vurgulu — oyuncunun aradığı tek sayı o */
.ki-satir.ki-haydut b{color:#e0a05a;font-size:13px}
.ki-tutum.k-super{
  background:rgba(180,140,50,.22);border-color:#a3831f;color:#e9c766;
}
/* karo menüsünde haydut sayısı, ipucundaki gibi vurgulu */
.km-bilgi b.km-haydut{color:#e0a05a}

/* premium: başkentte asker kaçırma anahtarı */
.prem-anahtar{margin:10px 0 4px}
.prem-switch{display:flex;gap:9px;align-items:flex-start;cursor:pointer;
  background:rgba(255,255,255,.4);border:1px solid var(--cizgi-soft);
  border-radius:6px;padding:9px 11px}
.prem-switch input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:#4d7a37}
.prem-switch b{display:block;font-size:13px;color:#5d4a17}
.prem-switch i{display:block;font-style:normal;font-size:11.5px;color:var(--soluk);
  line-height:1.45;margin-top:2px}
/* tuğ meydanı: ordu dağılımı tablosu */
.ordu-dagilim{font-size:12.5px}
.ordu-dagilim .ist-sayi{text-align:right;font-variant-numeric:tabular-nums}

/* haritada koordinata git */
#harita-git{display:flex;gap:4px;align-items:center}
/* UZAKTAN BAKMA (2026-09-12): −/+ yakınlık düğmeleri; uzak kademede gölge ve
   yanıp sönme kapanır (bin karede filter pahalı), en uzakta kurgan nişanı ve
   saldırı işareti küçülür. */
#harita-yakinlik{display:flex;gap:3px;align-items:center}
#harita-yakinlik .btn.kucuk{min-width:30px;padding:3px 0;font-weight:900;font-size:15px;line-height:1.2}
#harita-yakinlik .btn.kucuk:disabled{opacity:.35;cursor:default}
#harita-katman.h-uzak .sp,#harita-katman.h-uzak .karo:hover .sp{filter:none}
#harita-katman.h-uzak .k-isaret{animation:none}
#harita-katman.h-cokuzak .kurgan-nis{display:none}
#harita-katman.h-cokuzak .k-isaret.k-saldiri{font-size:11px}
#harita-git input{
  width:56px;padding:4px 6px;font-size:12.5px;text-align:center;
  background:rgba(255,255,255,.1);border:1px solid #4a453b;border-radius:4px;
  color:#e2d8c2;font-variant-numeric:tabular-nums;
}
#harita-git input:focus{outline:none;border-color:var(--bronz)}
#harita-git input::-webkit-outer-spin-button,
#harita-git input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* hesap kutusundaki parola bağlantısı */
.hesap-baglanti{
  display:block;width:100%;margin-top:6px;padding:3px 0;
  background:none;border:0;font-size:11.5px;color:var(--soluk);
  text-decoration:underline;cursor:pointer;text-align:center;
}
.hesap-baglanti:hover{color:var(--bronz)}
/* Geri alınamaz eylem: "Parolamı değiştir" ile aynı görünmesin. Soluk kırmızı
   — dikkat çeker ama çekmecede bağırmaz. */
.hesap-baglanti.tehlike{color:#a0625c}
.hesap-baglanti.tehlike:hover{color:#c0271a}
@media (max-width:760px){
  #harita-git input{width:48px;font-size:12px;padding:4px}
}

/* Haritanın pürüzsüz kayması: transform GPU'ya verilsin, sürükleme takılmasın.
   Geçiş süresi YOK — parmakla birebir aynı anda hareket etmeli. */
#harita-eksen-x,#harita-eksen-y{will-change:transform}
/* eğitimde beklemedeki emirler soluk */
.kuyruk-satir.bekleyen{opacity:.62}

/* metin içine gömülen kaynak simgesi — satır yüksekliğini bozmaz */
.res-ic{
  width:15px;height:15px;object-fit:contain;
  vertical-align:middle;position:relative;top:-1px;
  margin:0 1px;
}

/* ---------- mobilde aşağı çekip yenileme ----------
   Sabit görünümlü oyun ekranında tarayıcının kendi hareketi çalışmıyor;
   göstergeyi de kendimiz çiziyoruz. Üstte, ekranın dışında bekler; parmakla
   aşağı inerken içeri girer. */
#yenile-gosterge{
  position:fixed;top:-52px;left:50%;z-index:9700;
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:#f4ecd8;border:1px solid #b9a77c;color:#5d4a17;
  font-size:12.5px;font-weight:600;white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transform:translate(-50%,0);
  opacity:0;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;
}
#yenile-gosterge.acik{opacity:1}
#yenile-gosterge .yg-ok{
  font-size:15px;line-height:1;display:inline-block;
  transition:transform .18s ease;
}
#yenile-gosterge.hazir{background:#e9dcb4;border-color:var(--bronz)}
#yenile-gosterge.hazir .yg-ok{transform:rotate(180deg)}
#yenile-gosterge.doner .yg-ok{animation:yenile-don .7s linear infinite}
@keyframes yenile-don{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  #yenile-gosterge,#yenile-gosterge .yg-ok{transition:none}
  #yenile-gosterge.doner .yg-ok{animation:none}
}

/* görev kutusu: "+N görev daha" artık düğme — basınca liste açılır */
.gorev-daha{
  width:100%;margin-top:2px;padding:7px 6px;
  background:#efe9d8;border:1px dashed #b9a77c;border-radius:4px;
  color:#6b5622;font-size:12px;font-weight:600;letter-spacing:.02em;
  cursor:pointer;transition:background .15s,border-color .15s;
}
.gorev-daha:hover{background:#e6dcc2;border-color:var(--bronz);border-style:solid}

/* ---------- profil açıklaması ---------- */
.profil-metin-kutu{margin-top:4px}
.profil-metin{
  white-space:pre-wrap;word-break:break-word;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);border-radius:4px;
  padding:9px 11px;font-size:13px;line-height:1.55;margin:0;
}
.profil-metin-gir,.duyuru-metin{
  width:100%;min-height:78px;resize:vertical;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);border-radius:4px;
  padding:8px 10px;font:13px/1.55 "Segoe UI",system-ui,sans-serif;
  color:var(--murekkep);
}
.profil-metin-gir:focus,.duyuru-metin:focus,.duyuru-konu:focus{
  outline:none;border-color:var(--bronz);
}
.profil-metin-alt{justify-content:space-between;align-items:center;margin-top:6px}

/* ---------- tuğ duyurusu ---------- */
.duyuru-konu{
  width:100%;margin-bottom:6px;padding:7px 10px;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);border-radius:4px;
  font:13px "Segoe UI",system-ui,sans-serif;color:var(--murekkep);
}
.duyuru-metin{min-height:92px}


/* ---------- meydan: hareketler ---------- */
.hareket-liste{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.hareket-satir{
  display:grid;grid-template-columns:86px 1fr auto auto;gap:8px;align-items:center;
  font-size:12.5px;padding:6px 9px;border-radius:4px;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);
}
.hareket-satir .h-tur{font-weight:700;font-size:11px;letter-spacing:.03em}
.hareket-satir .h-kim{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hareket-satir .h-ne{color:var(--soluk);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hareket-satir .h-sure{color:var(--bronz);font-variant-numeric:tabular-nums;font-weight:600}
.hareket-satir.h-gelen{border-color:#b0563f;background:#f6e5df}
.hareket-satir.h-gelen .h-tur{color:#8c2f22}
.hareket-satir.h-giden .h-tur{color:#5d4a17}
.hareket-satir.h-destek{border-color:#7fa06a;background:#eaf0e2}
.hareket-satir.h-destek .h-tur{color:#3f6b2e}
@media (max-width:760px){
  .hareket-satir{grid-template-columns:70px 1fr auto;font-size:12px}
  .hareket-satir .h-ne{grid-column:2/-1}
}


/* ---------- saldırı / destek işaretleri ---------- */
@keyframes isaret-yan { 0%,49%{opacity:1} 50%,100%{opacity:.15} }
.saldiri-yanip{
  color:#c0271a!important;font-weight:800;
  animation:isaret-yan 1s steps(1,end) infinite;
}
.kuyruk-satir.saldiri-satir{
  cursor:pointer;border-radius:4px;
  background:#f6e2de;box-shadow:inset 2px 0 0 #c0271a;
  padding-left:6px;
}
.kuyruk-satir.saldiri-satir:hover{background:#f2d4ce}
.hareket-satir.tikla{cursor:pointer}
.hareket-satir.tikla:hover{filter:brightness(0.97)}

/* haritada karo işaretleri: yazı yok, yalnız imge */
.k-isaret{
  position:absolute;top:2%;right:4%;z-index:6;pointer-events:none;
  animation:isaret-yan 1s steps(1,end) infinite;
  line-height:1;
}
.k-isaret.k-saldiri{
  color:#e01f0e;font-size:calc(var(--kp) * 0.52);font-weight:900;
  text-shadow:0 0 3px #fff,0 1px 2px rgba(0,0,0,.6);
}
.k-isaret.k-destek svg{
  width:calc(var(--kp) * 0.42);height:calc(var(--kp) * 0.42);
  fill:#7d3fbf;stroke:#f4edfa;stroke-width:1.6px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
@media (prefers-reduced-motion:reduce){
  .saldiri-yanip,.k-isaret{animation:none}
}

/* giden saldırı hedefi: turuncu kılıç — gelen saldırının kırmızı ✕'i ile karışmasın */
.k-isaret.k-giden{
  color:#d97a1f;font-size:calc(var(--kp) * 0.44);
  text-shadow:0 0 3px #fff,0 1px 2px rgba(0,0,0,.55);
}


/* oba listesi işaretleri */
.oba-kilic.gelen{color:#c0271a;font-weight:800}
.oba-kilic.giden{color:#d97a1f}
.oba-kilic.destek svg{width:13px;height:13px;fill:#7d3fbf;stroke:#f4edfa;stroke-width:1.4px;vertical-align:middle}
/* gelen destek: aynı kalkan, soluk dolgu — "buradan çıkan" ile "buraya gelen"
   tek bakışta ayrılsın diye. Koyu = benim gönderdiğim/konuk, soluk = bana geliyor. */
.oba-kilic.destek.gelen-destek svg{fill:#b79ada}


/* ---------- zafer ekranı ---------- */
.zafer-kutu{text-align:center;padding:18px 14px 12px}
/* Zafer görseli: modal dolgusunun (kutu 16px + içerik 4px + kutu 18px/14px)
   dışına taşarak TAM genişlik kaplar. Alt degrade görseli zemine eritir;
   taç negatif kenarla görselin koyu bandına biner. object-position görselin
   kurgan bandını ortalar (anıt karenin %35-45 kuşağında). */
.zafer-gorsel{
  position:relative;margin:-20px -18px 0;overflow:hidden;
  border-radius:8px 8px 0 0;line-height:0;
}
.zafer-gorsel img{
  width:100%;display:block;max-height:42vh;
  object-fit:cover;object-position:center 32%;
}
.zafer-gorsel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,var(--kutu,#f3ecdc) 99%);
}
/* Kupa emojisi kaldirildi (2026-09-02, sahibin istegi) — gorselin koyu
   bandina artik TUG BAYRAGI biniyor; ayni kompozisyon, emoji yok. */
.zafer-gorsel + .zafer-tug{margin-top:-34px;position:relative;z-index:1}
.zafer-tug{display:flex;justify-content:center;margin-bottom:8px}
.zafer-tag{font-family:Georgia,serif;font-size:30px;letter-spacing:.04em;margin:2px 0}
.zafer-hakan{
  font-family:Georgia,serif;font-size:15px;letter-spacing:.34em;font-weight:700;
  color:#a8842c;margin:2px 0 10px;
}
.zafer-metin{font-size:13.5px;line-height:1.6;max-width:420px;margin:0 auto 12px}
.zafer-uye-baslik{
  font-size:11px;letter-spacing:.18em;color:var(--soluk);text-transform:uppercase;
  margin-bottom:6px;
}
.zafer-uyeler{
  display:flex;flex-direction:column;gap:4px;max-width:340px;margin:0 auto 12px;
}
.zafer-uye{
  display:flex;align-items:center;gap:6px;justify-content:center;
  font-size:13px;font-weight:600;padding:5px 10px;border-radius:4px;
  background:var(--kutu-2);border:1px solid var(--cizgi-soft);
}
.zafer-uye.bas{background:#f4ecd2;border-color:#c9a94e}
.zafer-uye i{font-style:normal;color:var(--soluk);font-weight:400;font-size:11.5px}
.zafer-alt{font-size:12.5px;color:var(--soluk);margin:0 0 6px}
.zafer-tarih{font-size:11px;color:var(--soluk)}


/* ---------------- dünya sohbeti ---------------- */
/* iki düğme tek kapsayıcıda: flex birlikte ortalar, bitişmez */
/* SOHBET ALTTA (2026-09-12): düğmeler ekranın alt ortasında sabit sekmeler
   (kirişin altından taşındı — üstte menüyle çakışıyor, mobilde başparmağa
   uzaktı). Paneller şeridin hemen üstünden yukarı açılır. Kuyruk bandı ve
   mobil karo menüsüyle çakışma aşağıda ayrıca ele alındı. */
.sohbet-dugmeler{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;padding-bottom:env(safe-area-inset-bottom,0px);z-index:58;
}
.sohbet-dugme{
  padding:4px 16px 3px;border-radius:11px 11px 0 0;
  background:linear-gradient(#efe9db,#d6cfbe);
  border:1px solid #a99f8a;border-bottom:none;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--murekkep);
  box-shadow:0 -3px 8px rgba(0,0,0,.28);cursor:pointer;
  transition:filter .12s;white-space:nowrap;
}
.sohbet-dugme:hover{filter:brightness(1.06)}
.sohbet-panel{
  position:fixed;bottom:calc(30px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);
  width:min(440px,calc(100vw - 16px));height:min(420px,58vh);
  z-index:60;display:flex;flex-direction:column;
  background:linear-gradient(#f4f1e9,#e6dfd0);
  border:1px solid #a99f8a;border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.5);
}
.sohbet-panel.hidden{display:none}
.sohbet-bas{
  display:flex;align-items:baseline;gap:8px;padding:8px 12px;
  border-bottom:1px solid #c9c0ab;color:var(--murekkep);
}
.sohbet-bas b{font-size:14px}
.sohbet-bas span{font-size:11px;color:#8a8069}
.sohbet-kapat{
  margin-left:auto;padding:0 6px;font-size:14px;line-height:1.4;
  color:#6b5f49;background:none;border:none;cursor:pointer;
}
.sohbet-kapat:hover{color:#3d3524}
.sohbet-liste{min-height:0;   /* flex çocuğu: liste paneli aşmasın, kendi içinde kaysın */
  
  flex:1;overflow-y:auto;padding:8px 12px;font-size:13px;color:var(--murekkep);
}
.sohbet-sat{margin:2px 0;line-height:1.4;overflow-wrap:anywhere}
.sohbet-sat i{font-style:normal;font-size:10.5px;color:#9a9077;margin-right:5px}
/* adlar siyah; yalnız yönetici rozeti lacivert ve kalın */
.sohbet-sat b{color:#1d1a12}
/* `.sohbet-sat b` kuralından daha özgül olmalı, yoksa lacivert eziliyor */
.sohbet-sat b.sohbet-admin{color:#122a6d;font-weight:800;margin-right:5px;letter-spacing:.03em}
.sohbet-sat b.sohbet-mod{color:#2f6b3a}
.sohbet-yaz{display:flex;gap:6px;padding:8px;border-top:1px solid #c9c0ab}
.sohbet-yaz input{
  flex:1;padding:6px 10px;border-radius:8px;border:1px solid #a99f8a;
  background:#fbf8f0;color:var(--murekkep);font:inherit;font-size:13px;
}
@media (max-width:760px){
  .sohbet-panel{height:min(380px,52vh)}
  /* Mobilde karo menüsü alt panel olur ve #harita-ekran'ın yığın bağlamında
     kalır (z:5); gövde düzeyindeki sohbet şeridi onun üstüne binerdi. */
  body.karo-menu-acik .sohbet-dugmeler{display:none}
}


/* ---------------- gösterge simgeleri ---------------- */
.simge{width:18px;height:18px;vertical-align:-4px;margin-right:4px;object-fit:contain;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.simge.kucuk{width:14px;height:14px;vertical-align:-3px;margin-right:3px}
.simge.orta{width:24px;height:24px;vertical-align:-6px;margin-right:6px}
.stat i .simge{vertical-align:-2px}
.rp-sonuc .simge{vertical-align:-5px}


/* giriş penceresi: marka satırı + güven notu (Safe Browsing uyarısı sonrası) */
.agk-marka{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.agk-marka img{height:26px;width:auto}
.agk-marka span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--soluk)}
.agk-guven{font-size:11.5px;line-height:1.5;color:var(--soluk);margin:10px 0 4px}
.agk-guven a{color:#b49a52}
.agk-google{width:100%;justify-content:center;background:#fff;color:#3a2c08;border:1px solid #cfc6b2}
#agk-form{display:block}


/* ---------------- arkadaşını getir ---------------- */
.gorev-referans{border-left:3px solid var(--gold)}
.hesap-referans{width:100%;margin-top:8px}
.ref-kutu{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0}
.ref-baglanti{flex:1;min-width:200px;padding:7px 9px;border:1px solid #a99f8a;border-radius:6px;background:#fbf8f0;font-size:12.5px;color:var(--murekkep)}
.ref-sat{display:flex;justify-content:space-between;gap:10px;padding:6px 8px;border-bottom:1px solid #e3dccb;font-size:13px}
.ref-sat.tamam b{color:#1c5c2e}
.ref-sat span{color:var(--soluk)}
.ipucu.kucuk{font-size:11.5px}

/* kampanya düğmesi: görevlerin hemen üstünde, kırmızı, tıklayınca açılır */
.gorev-kampanya{display:flex;gap:6px;align-items:center;width:100%;cursor:pointer;margin:-4px 0 8px;
  padding:4px 8px;border:1px solid #c69384;border-radius:8px;background:#fbeeea;color:#b3261e;
  font-family:Georgia,serif;font-size:12px;letter-spacing:.02em;font-weight:700;text-align:left;white-space:nowrap;overflow:hidden}
.gorev-kampanya img{width:20px;height:20px;flex:none}
.gorev-kampanya b{color:#8a6f1f;font-size:14px}
.gorev-kampanya .gk-ok{margin-left:auto;font-style:normal;color:#b3261e;transition:transform .15s}
.gorev-kampanya.acik .gk-ok{transform:rotate(180deg)}
.gorev-kampanya:hover{filter:brightness(1.03)}
.gorev-kampanya-ic{margin:0 0 10px}
.gorev-kampanya-ic.hidden{display:none}
.altin-mini{width:14px;height:14px;vertical-align:-2px;margin:0 2px 0 1px}
.agk-davet span i{font-style:normal;color:var(--soluk);font-size:11px}


/* ---------------- mobil: istatistik ve simülatör ---------------- */
/* ---- Bozkır Fırsatı (75 nüfus kampanyası) ---- */
.prem-paket.kampanyali{
  border-color:#a3761f;
  box-shadow:0 0 0 2px rgba(200,151,60,.35), 0 3px 10px rgba(0,0,0,.3);
}
.kamp-etiket{
  background:linear-gradient(#c8973c,#a3761f);color:#fff8ea !important;
  font-weight:800;letter-spacing:.04em;
}
.kamp-fiyat s{color:var(--soluk);font-weight:400;margin-right:5px;opacity:.75}
.kamp-fiyat{color:#a3761f;font-weight:800}
.kamp-fiyat.buyuk{font-size:22px}
.kamp-kutu{text-align:center;padding:6px 2px}
/* Kampanya mührü: başlıkla teklif arasında küçük rozet */
.kamp-muhur{display:block;width:52px;height:52px;object-fit:contain;margin:0 auto 2px}
.kamp-gorsel{width:132px;height:132px;object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(163,118,31,.5))}
/* 24 saatlik pencere: fiyatın hemen altında, sakin bronz — kırmızı yok */
.kamp-sure{font-size:13.5px;line-height:1.5;margin:10px 0 0;color:#8a6220}
.kamp-sure b{color:#7a5416}
@media (max-width:560px){
  .kamp-gorsel{width:104px;height:104px}
  .kamp-muhur{width:44px;height:44px}
}
.kamp-metin{font-size:14.5px;line-height:1.6;margin:8px 0 12px}
.kamp-teklif{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  background:rgba(200,151,60,.12);border:1px solid #a3761f;border-radius:8px;
  padding:12px;margin-bottom:10px;
}
.kamp-altin{display:flex;align-items:center;gap:7px;font-size:18px;font-weight:700}
.kamp-altin img{width:30px;height:30px;object-fit:contain}

/* ---------- kampanya düğmeleri ----------
   Tek sütun: satın alma üstte ve baskın, vazgeçme altta sessiz. Dokunma
   hedefleri 52px+ (parmak için alt sınır 44px). */
.kamp-dugmeler{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  margin-top:14px;
}
.kamp-al{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;max-width:340px;min-height:54px;padding:12px 22px;
  border-radius:10px;border:1px solid #9c7418;cursor:pointer;
  background:linear-gradient(#ffe9a3,#e8bd4a 45%,#d8a52e);
  color:#3d2c06;font-size:17px;font-weight:800;letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(255,250,225,.65);
  position:relative;overflow:hidden;
  animation:kampParlama 2.1s ease-in-out infinite;
}
.kamp-al img{width:24px;height:24px;object-fit:contain;flex:0 0 auto}
.kamp-al:hover{background:linear-gradient(#fff3c4,#f0ca5e 45%,#e0b13c);border-color:#7d5c10}
.kamp-al:active{transform:translateY(1px)}
/* sarı parıltı: nefes alan altın hâle */
@keyframes kampParlama{
  0%,100%{box-shadow:0 0 7px 1px rgba(255,203,74,.5), 0 3px 10px rgba(0,0,0,.28)}
  50%    {box-shadow:0 0 24px 7px rgba(255,214,92,.9), 0 3px 10px rgba(0,0,0,.28)}
}
/* üzerinden geçen ışık şeridi */
.kamp-al::after{
  content:"";position:absolute;top:-60%;left:-70%;width:45%;height:220%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));
  transform:rotate(18deg);animation:kampIsik 2.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes kampIsik{
  0%,62%{left:-70%} 92%,100%{left:130%}
}
.kamp-sonra{
  min-height:44px;padding:8px 16px;border:none;background:none;cursor:pointer;
  color:var(--soluk);font-size:13.5px;text-decoration:underline;
  text-underline-offset:3px;
}
.kamp-sonra:hover{color:#4a3d22}
/* hareket hassasiyeti: parıltı ve ışık durur, renk kalır */
@media (prefers-reduced-motion:reduce){
  .kamp-al{animation:none;box-shadow:0 0 14px 3px rgba(255,214,92,.7),0 3px 10px rgba(0,0,0,.28)}
  .kamp-al::after{display:none}
}
@media (max-width:560px){
  .kamp-al{max-width:none;font-size:16px;min-height:52px;padding:11px 16px}
  .kamp-al img{width:22px;height:22px}
  .kamp-dugmeler{margin-top:12px}
}
/* rapor paneli: silme + sayfalama */
.rapor{position:relative;padding-right:34px}   /* ✕ için sağda yer aç */
.rapor-sil{
  position:absolute;top:6px;right:6px;background:none;border:none;
  color:#8f8770;font-size:15px;line-height:1;cursor:pointer;
  padding:4px 7px;border-radius:4px;z-index:2;
}
.rapor-sil:hover{color:#c0392b;background:rgba(192,57,43,.1)}
.rapor-ust{
  display:flex;justify-content:space-between;align-items:center;
  margin:4px 0 8px;color:#e2d6b8;
}
.rapor-nav{
  display:flex;justify-content:center;align-items:center;gap:10px;margin:8px 0;
}
.rapor-sayfa{font-size:12.5px;color:#a89f88;min-width:52px;text-align:center}
/* zorunlu alan uyarısı: boş bırakılan kutu kırmızı yanıp söner */
.alan-hata{
  border-color:#c0392b !important;
  box-shadow:0 0 0 2px rgba(192,57,43,.35);
  animation:alanTitre .35s ease 2;
}
@keyframes alanTitre{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* sohbet kalpleri: satır sonunda küçük ♥, atınca dolu kırmızı */
.sohbet-kalp{
  margin-left:6px;background:none;border:none;cursor:pointer;
  font-size:11.5px;color:#8f8770;padding:0 3px;vertical-align:middle;
  border-radius:4px;line-height:1.4;
}
.sohbet-kalp.bos{opacity:.45}
.sohbet-sat:hover .sohbet-kalp.bos{opacity:1}
/* ⋯ ileti menüsü: bildir / engelle / yönetici sil (Play UGC, 2026-09-10) */
.sohbet-islem{border:0;background:none;color:#9a9077;cursor:pointer;font-size:14px;line-height:1;
  padding:0 5px;margin-left:2px;opacity:.55;vertical-align:baseline}
.sohbet-sat:hover .sohbet-islem,.sohbet-islem:focus-visible{opacity:1}
.agk-kabul{font-size:11.5px;line-height:1.45;color:#6d6552;margin:8px 0 0;text-align:center}
.agk-kabul a{color:inherit;text-decoration:underline}
/* Koşul kabulü: açık onay kutucuğu (2026-09-22) — işaretsiz devam edilemez */
.agk-kosul{display:flex;align-items:flex-start;gap:8px;text-align:left;cursor:pointer;
  padding:7px 8px;border:1px solid transparent;border-radius:6px}
.agk-kosul input{flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;accent-color:#8a6220;cursor:pointer}
.agk-kosul.alan-hata{border-color:#c0392b;background:#fbeae7}
.ugc-kurallar{margin:6px 0 10px;padding-left:18px;line-height:1.5}
.ugc-kurallar li{margin:3px 0}
.engel-sat{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 0;border-bottom:1px solid #e4dccb}
.sikayet-alinti{margin:6px 0 10px;padding:8px 10px;border-left:3px solid #c9b98f;background:#f4efe3;
  font-size:13px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.sohbet-kalp:hover{color:#c0392b;background:rgba(192,57,43,.08)}
/* dolu = bu iletiye beğeni gelmiş (kimden olursa olsun) */
.sohbet-kalp.dolu{color:#c0392b;opacity:1}
/* atti = ben de attım — aynı kırmızı, kalın */
.sohbet-kalp.atti{color:#c0392b;font-weight:700;opacity:1}
/* eğitim ekranı: birimin tek satırlık yol göstericisi */
.egit-nicin{
  margin-top:6px;font-size:12.5px;line-height:1.5;color:#8a6c1f;
  border-left:3px solid #c8973c;padding-left:8px;font-style:italic;
}
/* başka sekme kilidi: sayfanın üstünde kalıcı şerit */
#pasif-serit{
  position:fixed;inset:0;z-index:4000;background:rgba(20,12,8,.82);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
#pasif-serit .pasif-kutu{
  max-width:420px;background:#7d2419;color:#f6ece4;font-size:14px;line-height:1.55;
  padding:18px 20px;border-radius:10px;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.6);
}
#pasif-serit .pasif-kutu p{margin:8px 0 14px}
#pasif-serit button{
  margin-left:10px;background:#e2d6b8;color:#3a2c08;border:1px solid #a99f8a;
  border-radius:5px;padding:5px 13px;font-weight:700;cursor:pointer;
}
#pasif-serit button:hover{background:#f0e6cc}
/* altın panelindeki e-posta bilgisi: sakin yeşil, güven verir */
.odeme-eposta-bilgi{
  background:rgba(104,146,80,.16);border:1px solid #7a9a5e;border-radius:6px;
  color:#33581f;font-size:13px;line-height:1.55;
  padding:9px 12px;margin:10px 0 6px;
}
.odeme-eposta-bilgi b{color:#204212;font-weight:800}
.sonraki-sure{
  font-size:12.5px;color:#a89f88;margin:4px 0 6px;
  display:flex;align-items:center;gap:5px;
}
.sonraki-sure b{color:#e2d6b8}
.sim-ayar{
  margin-top:8px;padding-top:8px;border-top:1px dashed var(--cizgi-soft);
  display:grid;grid-template-columns:auto 1fr auto 1fr;gap:6px 8px;align-items:center;
}
.sim-ayar .ist-etiket{white-space:nowrap;font-size:12px}
.sim-ayar input,.sim-ayar select{width:100%;min-width:0;box-sizing:border-box}
@media (max-width:520px){
  .sim-ayar{grid-template-columns:auto 1fr}
}
.ist-govde{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ist-liste{min-width:100%}
@media (max-width:760px){
  #modal-kutu.genis{width:calc(100vw - 12px);padding:10px 8px}
  .ist-kipler,.ist-sekmeler{flex-wrap:wrap}
  .ist-sekme,.ist-kip{padding:5px 8px;font-size:12px}
  .ist-liste{font-size:11.5px}
  .ist-liste th,.ist-liste td{padding:4px 5px;white-space:nowrap}
  .ist-sira{width:32px}
  .ist-it-ad{display:none}
  .oba-ozet{gap:4px}
  .ozet-kutu{flex:1 1 calc(33% - 4px);min-width:0;padding:6px 6px}
  .ozet-kutu b{font-size:13px}
  .ozet-kutu i{font-size:9px;letter-spacing:.04em}
  .ist-alt{flex-direction:column;align-items:stretch;gap:6px}
  .ist-ara{flex-wrap:wrap}
  .ist-ad-gir{flex:1;min-width:120px}
  .ist-sayfalar{justify-content:center;flex-wrap:wrap}
  .sim-kap{flex-direction:column}
  .sim-yan,.sim-yan-sonuc{min-width:0}
}

/* ALÇAK EKRAN (2026-08-29) — DOSYA SONUNDA olmali ki temel .menu-btn img
   (64px) kuralini ezebilsin; once yazildiginda cascade onu geri aliyordu: dizüstülerde kiriş dikeyde çok yer kaplıyor ve
   köyün üst sırası altında kalıyordu. Yükseklik 820px altında kiriş inceltilir;
   köy tarafındaki pay js/game.js koyYerlesim içinde veriliyor. */
@media (max-height:820px){
  #ust{top:4px}
  #kiris{padding:6px 26px;border-radius:12px}
  .menu-btn img{width:46px;height:46px}
  .logo{margin-top:6px}
  .logo img{height:26px}
}
@media (max-height:700px){
  #kiris{padding:4px 18px}
  .menu-btn img{width:38px;height:38px}
  .logo img{height:22px}
}

/* Sohbet bekleme sayacı: düğme kapalı ama saniye OKUNAKLI kalmalı.
   .btn:disabled'ın .45 saydamlığı sayıyı zor görünür yapıyordu; sayı
   genişliği sabit olsun ki her saniyede düğme oynamasın. */
.btn.sohbet-bekliyor:disabled{
  opacity:.9;cursor:default;
  font-variant-numeric:tabular-nums;min-width:3.6em;
}

/* Başkent seçimi (Kurultay / Buyruk Meclisi) */
.baskent-bilgi{
  background:rgba(0,0,0,.13);border-radius:10px;padding:8px 10px;
  font-size:13px;line-height:1.55;
}
.baskent-liste{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.baskent-satir{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:7px 9px;border-radius:9px;background:rgba(0,0,0,.10);
}
.baskent-satir.secili{box-shadow:inset 0 0 0 2px var(--bronz)}
.baskent-ad{flex:1 1 150px;font-size:13px;min-width:0}
.baskent-ad i{opacity:.7;font-style:normal}
.baskent-rozet{
  font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  background:rgba(201,162,39,.22);color:var(--bronz);
}

/* Boy kartındaki zayıf yan: artılardan ayrışsın ama uyarı gibi bağırmasın. */
.irk-zayif{
  margin-top:6px;font-size:11.5px;line-height:1.5;
  color:#8d5f52;border-left:2px solid rgba(160,51,37,.35);padding-left:7px;
}

/* Profil rozet şeridi. NOT: `.rozet` sınıfı menüdeki bildirim sayacı —
   ad çakışmasın diye buradakiler `rozet-` önekiyle. */
.rozet-serit{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:8px 0 2px;
}
.rozet-tek{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;transition:transform .12s ease;cursor:help;
}
.rozet-tek:hover{transform:scale(1.12)}
.rozet-tek img{width:100%;height:100%;object-fit:contain;display:block}
/* Haftalık sıra: köşede küçük madalya sayısı */
.rozet-sira{
  position:absolute;right:-3px;bottom:-3px;
  min-width:16px;height:16px;padding:0 3px;border-radius:999px;
  background:var(--bronz);color:#1a1408;
  font-size:11px;line-height:16px;font-weight:700;text-align:center;
  box-shadow:0 0 0 2px var(--kutu);
}
/* Madalyonu olmayan rozet YAZI rozeti olarak çizilir — yedek değil, kalıcı biçim */
.rozet-tek.rozet-yazi{
  width:auto;height:auto;min-width:0;padding:4px 10px 4px 11px;border-radius:999px;
  background:rgba(0,0,0,.13);box-shadow:inset 0 0 0 1px rgba(201,162,39,.35);
}
.rozet-tek.rozet-yazi:hover{transform:none}
.rozet-etiket{font-size:11.5px;font-weight:600;letter-spacing:.2px;white-space:nowrap}
.rozet-tek.rozet-yazi .rozet-sira{position:static;margin-left:6px;box-shadow:none}

/* Seçili rozet: kabarcık açıkken altın halka (dokunmatikte geri bildirim). */
.rozet-tek.secili{box-shadow:0 0 0 2px rgba(201,162,39,.55);border-radius:999px}


/* Rapor süzgeci: tür sekmeleri + arama. Raporlar 30 tane birikiyor,
   süzgeçsiz hâlde "beni kim vurdu" sorusu sayfa gezmeyi gerektiriyordu.
   Renkler projenin KENDİ belirteçleriyle: --altin/--metin diye değişken yok,
   o adlar sessizce yedek değere düşüyordu. */
.rapor-suzgec{
  display:flex;flex-direction:column;gap:6px;margin:6px 0 10px;
  position:sticky;top:0;z-index:2;background:var(--kutu-2);
  padding:6px 4px;margin-left:-4px;margin-right:-4px;
}
.rapor-sekmeler{display:flex;flex-wrap:wrap;gap:5px}
.rapor-sekme{
  padding:7px 12px;border-radius:999px;font-size:12.5px;cursor:pointer;
  border:1px solid var(--cizgi);background:var(--kutu);
  color:var(--murekkep);line-height:1.5;min-height:34px;
}
.rapor-sekme i{font-style:normal;color:var(--soluk);margin-left:4px;font-size:11.5px}
.rapor-sekme:hover:not(:disabled){border-color:var(--bronz)}
.rapor-sekme.aktif{
  background:var(--bronz);border-color:var(--bronz);color:#1a1408;font-weight:600;
}
.rapor-sekme.aktif i{color:#1a1408;opacity:.75}
.rapor-sekme:disabled{opacity:.7;color:var(--soluk);cursor:default}
/* rapor satirindaki tur rozeti — tiklayinca o ture suzer */
.rapor-tur-et{
  display:inline-block;margin:0 0 4px;padding:2px 8px;
  font:600 11px/1.5 inherit;letter-spacing:.02em;
  border:1px solid var(--cizgi);border-radius:999px;
  background:rgba(0,0,0,.18);color:var(--soluk);cursor:pointer;
}
.rapor-tur-et:hover{border-color:var(--bronz);color:var(--bronz)}
.rapor-tur-et.rt-akin{color:#d9a05b;border-color:rgba(217,160,91,.45)}
.rapor-tur-et.rt-savunma{color:#7fa8d9;border-color:rgba(127,168,217,.45)}
.rapor-tur-et.rt-yagma{color:#9fc07a;border-color:rgba(159,192,122,.45)}
.rapor-tur-et.rt-kesif{color:#c9a3d9;border-color:rgba(201,163,217,.45)}
.rapor-suzgec-alt{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* RAPOR KOVALARI (2026-09-15): Oyuncular / Bozkır iki büyük sekme */
.rapor-kova{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:2px 0 8px}
.rapor-kova-sekme{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;
  padding:9px 12px;border-radius:10px;cursor:pointer;min-height:58px;
  border:1px solid var(--cizgi);background:var(--kutu);color:var(--murekkep);
}
.rapor-kova-sekme b{font-size:14.5px}
.rapor-kova-sekme span{font-size:11.5px;color:var(--soluk)}
.rapor-kova-sekme i{font-style:normal;font-size:12px;color:var(--soluk);margin-top:2px}
.rapor-kova-sekme i em{font-style:normal;font-weight:700;color:#b5412c}
.rapor-kova-sekme:hover{border-color:var(--bronz)}
.rapor-kova-sekme.aktif{border-color:var(--bronz);box-shadow:inset 0 -3px 0 var(--bronz);background:var(--kutu-2)}
.rapor-ozet{
  margin:0 0 8px;padding:8px 12px;border-radius:8px;font-size:13px;line-height:1.5;
  border:1px solid rgba(110,150,90,.45);background:rgba(110,150,90,.12);color:var(--murekkep);
}
.rapor-ozet.tehlike{border-color:rgba(181,65,44,.55);background:rgba(181,65,44,.12)}
.rapor-ozet span{color:var(--soluk)}
.rapor.yeni{box-shadow:inset 3px 0 0 #c9a227}
.rapor.yeni > time::after{content:"YENİ";margin-left:8px;padding:1px 6px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.06em;background:#c9a227;color:#1a1408}
.rozet-savas{background:#b5412c !important;color:#fff !important}
.rapor-ara{
  flex:1 1 140px;min-width:120px;padding:7px 11px;border-radius:8px;
  font-size:13px;border:1px solid var(--cizgi);background:var(--kutu);
  color:var(--murekkep);
}
/* Süzgeç sayacı TEK geri bildirim — okunur olmalı */
.rapor-ust b{color:var(--murekkep)}
.rapor-sayfa{color:var(--soluk)}

@media (max-width:760px){
  /* iOS, 16px'in ALTINDAKİ girdiye odaklanınca sayfayı yakınlaştırıyor ve
     geri küçültmüyor — modal ekran dışına taşıyor. Projede aynı çözüm
     #karo-menu ve .form-satir için de var. */
  .rapor-ara{font-size:16px;-webkit-appearance:none;appearance:none}
  .rapor-sekme{min-height:38px;padding:8px 12px;white-space:nowrap}
  .rapor-ust{flex-wrap:wrap;gap:6px}

  /* ÇUBUK ALÇAK KALSIN: sekmeler iki satıra sarınca çubuk 183px oluyordu;
     klavye açıkken görünür alan ~300px'e düşüyor ve süzgeç ekranın çoğunu
     yiyordu. Tek satır + yatay kaydırma (projenin `.tablo-kaydir` kalıbı),
     arama ile "yalnız kayıplar" aynı satırda. */
  .rapor-sekmeler{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px;
  }
  .rapor-sekmeler::-webkit-scrollbar{display:none}
  .rapor-sekmeler .rapor-sekme{flex:0 0 auto}
  .rapor-suzgec-alt{flex-direction:row;align-items:center;flex-wrap:nowrap}
  .rapor-ara{flex:1 1 auto;min-width:0}
  .rapor-suzgec-alt .rapor-sekme{flex:0 0 auto}

  /* YAPIŞKAN DEĞİL: süzgeç zaten panelin en üstünde (olay şeridi alta
     alındı), yapışkanlık ek fayda vermeden kaydırırken yer yiyordu. */
  .rapor-suzgec{position:static;margin-left:0;margin-right:0;padding:0}
}

/* Rozet kabarcığı: GÖVDEYE asılı, position:fixed — profil panelinin
   `overflow-y:auto` kırpması ve rozetin kendi transform'u bu yüzden etkisiz. */
.rozet-kabarcik{
  position:fixed;left:0;top:0;z-index:9999;
  max-width:250px;padding:8px 11px;border-radius:9px;
  background:#241d12;color:#f0e7d4;font-size:12px;line-height:1.5;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transition:opacity .1s ease;pointer-events:none;
}
.rozet-kabarcik.acik{opacity:1;visibility:visible}
.rozet-kabarcik b{display:block;color:var(--bronz)}
.rozet-kabarcik i{font-style:normal;opacity:.75}
.rozet-kabarcik span{display:block;margin-top:3px}

/* KURGAN GARNİZONU (2026-09-13): asker görselleri mor kart üstünde — tılsım moru */
.kurgan-garnizon{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin:6px 0 8px}
.kg-kart{
  display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;
  padding:8px 6px 7px;border-radius:8px;text-align:center;
  background:linear-gradient(#3b2352,#241536);border:1px solid #6b3fa0;color:#e6d7ff;
  box-shadow:0 2px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(200,160,255,.18);
}
.kg-kart img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.kg-kart b{font-size:15px;font-variant-numeric:tabular-nums;color:#fff}
.kg-kart i{font-style:normal;font-size:11px;line-height:1.2;color:#c9a6f5;overflow-wrap:anywhere}
.rp-kurgan .rp-portre{background:linear-gradient(#3b2352,#241536);border-color:#6b3fa0}
@media (max-width:520px){
  .kurgan-garnizon{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
  .kg-kart{padding:6px 4px}
  .kg-kart img{width:48px;height:48px}
  .kg-kart b{font-size:13px}
}

/* akıllı yağma birim seçimi (2026-09-17) */
.yy-ayar{margin:8px 0;border:1px solid rgba(169,159,138,.35);border-radius:6px;padding:6px 10px}
.yy-ayar summary{cursor:pointer;font-weight:700;font-size:13px}
.yy-ayar-satir{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0}
.yy-ayar-satir .yy-ad{display:flex;align-items:center;gap:5px;flex:1 1 150px;font-size:13px;cursor:pointer}
.yy-ayar-satir .yy-ad img{width:26px;height:26px;object-fit:contain}
.yy-ayar-satir .sayi-gir{width:80px}
.yy-ayar-satir span{font-size:12px;color:var(--soluk)}

/* tuğsuz panel: kendi tuğunu dik seçeneği katılmanın altında (2026-09-18) */
.tug-kendi{margin-top:12px;border-top:1px solid rgba(169,159,138,.3);padding-top:8px}
.tug-kendi summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--soluk)}

/* ---------- başlangıç rehberi (2026-09-18, js/rehber.js) ---------- */
#rehber-katman{position:fixed;inset:0;z-index:200;pointer-events:none}
#rehber-katman .rehber-halka{
  position:fixed;border-radius:12px;border:3px solid #f0c24a;
  box-shadow:0 0 0 4px rgba(240,194,74,.25),0 0 22px 6px rgba(240,194,74,.55);
  animation:rehberNabiz 1.3s ease-in-out infinite;transition:all .25s ease}
#rehber-katman .rehber-ok{
  position:fixed;width:36px;height:42px;font-size:38px;line-height:42px;text-align:center;
  color:#f0c24a;text-shadow:0 2px 6px rgba(0,0,0,.8);transition:left .25s,top .25s}
#rehber-katman .rehber-ok.asagi{transform:rotate(90deg);animation:rehberOkAsagi .9s ease-in-out infinite}
#rehber-katman .rehber-ok.yukari{transform:rotate(-90deg);animation:rehberOkYukari .9s ease-in-out infinite}
@keyframes rehberNabiz{50%{box-shadow:0 0 0 7px rgba(240,194,74,.15),0 0 30px 10px rgba(240,194,74,.7)}}
@keyframes rehberOkAsagi{50%{transform:rotate(90deg) translateX(8px)}}
@keyframes rehberOkYukari{50%{transform:rotate(-90deg) translateX(8px)}}
#rehber-balon{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:201;
  width:min(560px,calc(100vw - 24px));display:flex;gap:12px;align-items:flex-start;
  background:linear-gradient(#2b2016,#1d150e);color:#efe3c8;border:2px solid #b48a3c;border-radius:12px;
  padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.6);font-size:14px;line-height:1.5}
#rehber-balon.ustte{bottom:auto;top:78px}
#rehber-balon .rehber-portre{
  flex:none;width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:top;
  border:2px solid #b48a3c;background:#3a2c1c}
#rehber-balon .rehber-ic{flex:1;min-width:0}
#rehber-balon .rehber-ad{display:flex;gap:8px;align-items:baseline;margin-bottom:3px}
#rehber-balon .rehber-ad b{color:#f0c24a;font-size:15px}
#rehber-balon .rehber-ad span{color:#b9a888;font-size:12px}
#rehber-balon .rehber-ad i{margin-left:auto;color:#8f8166;font-size:11px;font-style:normal}
#rehber-balon .rehber-metin b{color:#f4d88a}
#rehber-balon .rehber-dugmeler{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
#rehber-balon .rehber-atla{background:transparent;color:#b9a888;border-color:#6b5a3e}
@media (max-width:600px){
  #rehber-balon{font-size:13px;padding:10px;gap:9px;bottom:10px}
  #rehber-balon.ustte{top:64px}
  #rehber-balon .rehber-portre{width:58px;height:58px}
}
/* görev kutusunda anlatıcı satırı */
.gorev-anlatici{display:flex;gap:8px;align-items:center;margin:0 0 8px;padding:6px 8px;
  border-radius:8px;background:rgba(180,138,60,.14);font-size:12.5px;line-height:1.4}
.gorev-anlatici img{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:top;border:1px solid #b48a3c}
.gorev-anlatici b{color:#8a5a14}

/* rehber: yer seçimi serbest — bütün boş yerler parlar */
.slot.bos.rehber-bos{box-shadow:0 0 0 2px rgba(240,194,74,.75),0 0 14px 4px rgba(240,194,74,.45);
  border-radius:50%;animation:rehberBos 1.6s ease-in-out infinite}
@keyframes rehberBos{50%{box-shadow:0 0 0 3px rgba(240,194,74,.95),0 0 20px 7px rgba(240,194,74,.6)}}
/* rehber balonu masaüstünde büyük: portre ve metin rahat okunsun (2026-09-18) */
@media (min-width:900px){
  #rehber-balon{width:min(760px,calc(100vw - 48px));padding:16px 20px;gap:18px;font-size:16px;line-height:1.6;bottom:22px}
  #rehber-balon.ustte{top:96px}
  #rehber-balon .rehber-portre{width:128px;height:128px}
  #rehber-balon .rehber-ad b{font-size:18px}
  #rehber-balon .rehber-ad span{font-size:13.5px}
  #rehber-balon .rehber-ad i{font-size:12.5px}
  #rehber-balon .rehber-dugmeler .btn{font-size:14px;padding:6px 14px}
}

/* ---------- karargâh (v55) ---------- */
.k-karargah .kr-simge{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:22px;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.k-benim-kr{box-shadow:inset 0 0 0 2px rgba(240,194,74,.85)}
.kr-garnizon{display:flex;flex-wrap:wrap;gap:6px 12px;margin:4px 0 8px}
.kr-birim{display:flex;align-items:center;gap:4px;font-size:13px}
.kr-birim img{width:26px;height:26px;object-fit:contain}
.kr-sec{padding:5px 8px;border-radius:6px}

/* altın kampanyası (v56) */
#kampanya-serit{position:fixed;left:50%;top:92px;transform:translateX(-50%);z-index:80;border:2px solid #d9a441;
  background:linear-gradient(#7d2419,#5a160f);color:#fbe8c4;border-radius:22px;padding:7px 16px;font-size:14px;
  cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.45);max-width:calc(100vw - 24px);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;animation:kampNabiz 2.2s ease-in-out infinite}
#kampanya-serit b{color:#ffd76a}
@keyframes kampNabiz{50%{box-shadow:0 4px 22px rgba(217,164,65,.7)}}
@media (max-width:600px){#kampanya-serit{top:74px;font-size:12px;padding:6px 12px;white-space:normal;text-align:center}}
.kampanya-kutu{background:rgba(125,36,25,.12);border:1px solid #c8893a;border-radius:8px;padding:9px 12px;margin:6px 0 10px;font-size:14px}
.kampanya-buyuk{font-size:18px;line-height:1.5;margin:10px 0;text-align:center}
.kamp-etiket.kamp-2x{background:#c0392b;color:#fff}
/* kampanya şeridi: görsel + kapatma (2026-09-18) */
#kampanya-serit{display:flex;align-items:center;gap:10px;padding:5px 8px 5px 10px}
#kampanya-serit .ks-gorsel{flex:none;width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
#kampanya-serit .ks-metin{overflow:hidden;text-overflow:ellipsis}
#kampanya-serit .ks-kapat{flex:none;background:rgba(0,0,0,.25);color:#fbe8c4;border:1px solid rgba(251,232,196,.5);
  border-radius:50%;width:24px;height:24px;line-height:20px;padding:0;font-size:13px;cursor:pointer}
#kampanya-serit .ks-kapat:hover{background:rgba(0,0,0,.45)}
.kampanya-kutu{display:flex;align-items:center;gap:10px}
.kampanya-kutu .kk-gorsel{flex:none;width:52px;height:52px;object-fit:contain}
.kampanya-gorsel{position:relative;text-align:center;margin:6px 0}
.kampanya-gorsel img{width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.kampanya-gorsel i{position:absolute;top:6px;left:calc(50% + 40px);background:#c0392b;color:#fff;font-style:normal;
  font-weight:800;border-radius:14px;padding:3px 10px;font-size:16px;box-shadow:0 2px 6px rgba(0,0,0,.4)}
@media (max-width:600px){#kampanya-serit .ks-gorsel{width:28px;height:28px}}

/* KAMPANYA — MOBİL TAŞMASI (2026-09-24). Üç ayrı taşma vardı:
   1) Paket kartındaki rozet `white-space:nowrap` ve mutlak konumluydu; hediye
      rakamı büyüdükçe (+1.400 gibi) kartın iki yanından dışarı sarkıyordu.
   2) Üstteki şerit mobilde `white-space:normal` alıyordu ama `text-overflow`
      hâlâ açıktı; metin sarınca kutunun dışına çıkıyordu.
   3) Duyuru penceresindeki büyük yazı 18px sabitti, dar ekranda satırı
      taşırıyordu. */
.prem-paket i{max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){
  .prem-paket i{font-size:8.5px;letter-spacing:0;padding:1px 5px;top:-7px}
  /* şerit: tek satıra sıkışmak yerine düzgün sarsın, kutuyu taşırmasın */
  #kampanya-serit{max-width:calc(100vw - 16px);white-space:normal;text-overflow:clip;
    align-items:flex-start;gap:7px;padding:6px 8px;line-height:1.35}
  #kampanya-serit .ks-metin{overflow:visible;text-overflow:clip;word-break:break-word;min-width:0;flex:1}
  #kampanya-serit .ks-kapat{width:22px;height:22px;line-height:18px}
  .kampanya-buyuk{font-size:15px;line-height:1.45}
  .kampanya-gorsel img{width:120px;height:120px}
  .kampanya-gorsel i{left:calc(50% + 28px);font-size:14px;padding:2px 8px}
  .kampanya-kutu{flex-wrap:wrap;font-size:13px}
  .kampanya-kutu .kk-gorsel{width:42px;height:42px}
}

/* Kadro seçimine göre canlı yol süresi (2026-09-24) */
.km-yol{display:flex;align-items:baseline;gap:6px;margin:6px 0 2px;font-size:13px;color:var(--metin-2,#9b8e77)}
.km-yol b{color:var(--metin,#e9dcc2);font-variant-numeric:tabular-nums}
.km-yol i{font-style:normal;font-size:11.5px;opacity:.8}

/* Mağazadaki kampanya kutusu — metin tek parça, mobilde sarar (2026-09-25).
   Önce kutu doğrudan flex'ti ve her <b> ayrı öğe olduğu için "(x3)" cümleden
   kopuk, aralar boşluklu görünüyordu. */
.kampanya-kutu{align-items:flex-start;line-height:1.45}
.kampanya-kutu .kk-metin{flex:1;min-width:0}
.kampanya-kutu .kk-gorsel-yok{flex:none;font-size:22px;line-height:1}
.kampanya-kutu .kk-kat{display:inline-block;background:#c0392b;color:#fff;
  border-radius:5px;padding:1px 7px;font-size:12.5px;line-height:1.35;
  vertical-align:1px;margin-left:2px;white-space:nowrap}
@media (max-width:560px){
  .kampanya-kutu{gap:8px;padding:8px 10px;font-size:13px}
  .kampanya-kutu .kk-gorsel{width:40px;height:40px}
  .kampanya-kutu .kk-kat{font-size:11.5px;padding:0 5px}
}
#kampanya-serit .ks-kat{display:inline-block;background:#c0392b;color:#fff;
  border-radius:5px;padding:1px 7px;font-size:12px;line-height:1.35;
  vertical-align:1px;white-space:nowrap}
@media (max-width:560px){#kampanya-serit .ks-kat{font-size:11px;padding:0 5px}}

/* 2026-10-01: sohbette ad → profil; Tuğ Meydanı birim dökümü */
.sohbet-ad-link{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline dotted;text-underline-offset:2px}
.sohbet-ad-link:hover{color:#a3761f}
.ordu-dagilim tr.od-sat{cursor:pointer}
.ordu-dagilim tr.od-dokum td{font-size:12px;line-height:1.5;padding:6px 10px;background:rgba(201,161,63,.08);text-align:left}
.ordu-dagilim tr.od-dokum.hidden{display:none}