::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0c0f16; }
::-webkit-scrollbar-thumb { background: #333e5c; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #d4a53c; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Sefer birlik sayısı girişlerinde tarayıcının kendi yukarı/aşağı ok ikonları yerine
   +/- butonları kullanılır — çakışmaması için yerleşik spinner gizlenir. */
.no-spinner::-webkit-outer-spin-button, .no-spinner::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.no-spinner { -moz-appearance: textfield; }

* { scrollbar-color: #333e5c #0c0f16; }

@keyframes fadein { from { opacity:0; transform: translateY(6px);} to {opacity:1; transform: translateY(0);} }
.fadein { animation: fadein .25s ease-out; }

@keyframes pulseglow { 0%,100% { box-shadow: 0 0 0px rgba(212,165,60,0.0);} 50% { box-shadow: 0 0 16px rgba(212,165,60,0.45);} }
.pulseglow { animation: pulseglow 2.2s ease-in-out infinite; }

.howto-btn {
  display: inline-flex; align-items:center; justify-content:center;
  width: 18px; height: 18px; border-radius: 9999px;
  background: rgba(212,165,60,0.15); color:#e0b95a; font-size: 11px; font-weight:700;
  border: 1px solid rgba(212,165,60,0.4); cursor: pointer; flex-shrink:0;
}
.howto-btn:hover { background: rgba(212,165,60,0.3); }

.nav-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; font-size: 13.5px; color:#c9d1e0; cursor:pointer; transition: all .15s; }
.nav-item:hover { background: #1c2236; }
.nav-item.active { background: linear-gradient(90deg, rgba(212,165,60,0.18), transparent); color:#e0b95a; border-left: 3px solid #d4a53c; padding-left:9px; }
.nav-item.nav-locked, .bottom-nav-item.nav-locked { opacity:.45; cursor:not-allowed; }
.nav-item.nav-locked:hover { background:transparent; }

/* "Şehirlerim" listesi/menüsündeki satırlarda o an görüntülenen yerleşimi vurgular — .nav-item.active
   ile aynı görsel dil (altın degrade + sol şerit), ama box-shadow:inset kullanır ki border-left gibi
   layout genişliğini/iç boşluğunu etkileyip satırları hafifçe kaydırmasın. */
.settlement-item.active { background: linear-gradient(90deg, rgba(212,165,60,0.22), transparent); color:#e0b95a; box-shadow: inset 3px 0 0 #d4a53c; }

/* Sabit ve eşit genişlik: yazı uzunluğuna göre değişen genişlik ikonları düzensiz aralıklı gösteriyordu; uzun etiketler iki satıra kırılır. */
.bottom-nav-item { display:flex; flex-direction:column; align-items:center; gap:1px; font-size:9.5px; line-height:1.15; text-align:center; color:#8a93ab; width:64px; flex-shrink:0; padding: 4px 2px; border-radius: 10px; }
.bottom-nav-item.active { color:#e0b95a; }

.progress-track { background:#151a29; border-radius:6px; overflow:hidden; height:8px; border:1px solid #262e47; }
.progress-fill { height:100%; background: linear-gradient(90deg,#a3781f,#e0b95a); transition: width .3s; }

.card { background: rgba(21,26,41,0.65); border:1px solid rgba(51,62,92,0.6); border-radius: 14px; }
.card-hover:hover { border-color: rgba(212,165,60,0.5); }

.stat-chip { background:#151a29; border:1px solid #262e47; border-radius:8px; padding:2px 8px; font-size:11px; }

/* Sunucu etkinliği bildirimi (üst kaynak çubuğu) — sıradan .stat-chip'lerden BİLEREK belirgin
   şekilde farklı: kalın altın çerçeve, degrade dolgu, daha büyük yazı — kaynak listesine
   karışmayıp göze çarpsın diye. */
.event-banner { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(90deg,rgba(212,165,60,0.30),rgba(212,165,60,0.12)); border:2px solid #d4a53c; border-radius:10px; padding:5px 12px; font-size:12.5px; font-weight:700; color:#ffe4a3; white-space:nowrap; }

.mine { box-shadow: inset 0 0 0 2px #d4a53c; }

/* #main-content'e BİLEREK scroll-behavior:smooth verilmiyor (768px+ için burada tanımlıydı,
   kaldırıldı). Kod, kaydırma konumunu saniyede bir (syncCurrentTab/updateCountdowns) VE Şehir
   sekmesinin her render'ında (fitCityViewToViewport) sessizce kaydedip geri yüklüyor — smooth
   aktifken bu programatik "eski yerine koy" düzeltmeleri ANINDA değil ~300-500ms'lik bir
   animasyonla uygulanıyordu; art arda gelen düzeltmeler animasyonu sürekli yeniden hedefleyip
   hiç oturmuyordu. Kullanıcı bunu "aşağı kaydırınca kendisi otomatik yukarı kaydırmaya devam
   ediyor" diye bildirdi — kök neden buydu (`#city-building-list`'in v124'te kaldırılan kendi iç
   kaydırmasından ve `updateCountdowns`'un v126'da düzeltilen kaydırma-korumasız render'ından
   AYRI, üçüncü bir neden). Canlı doğrulandı: main.scrollTop=X ataması, smooth aktifken SENKRON
   okumada bile hâlâ eski değeri (0) veriyordu; scroll-behavior:auto'ya zorlanınca aynı atama
   anında uygulandı. */

/* ----------------------------- HARİTA: Serbest Yerleşim (grid'siz) ----------------------------- */
/* Zemin dokusu #map-world üzerinde (viewport'ta DEĞİL) — bu sayede haritayı kaydırıp
   yakınlaştırdığınızda zemin de varlıklarla (maden/şehir) birlikte hareket eder, sabit kalmaz. */
.map-grass {
  background-color: #2d5a26;
  /* terrain.jpg kenarları birbirine uyacak şekilde önceden işlenmiş bir karo — kaynak görsel
     değiştirilirse de dikişsiz olmalı, yoksa her tekrar sınırında çizgi görünür. */
  background-image: url('/terrain.jpg');
  background-repeat: repeat;
}
/* Sürükleyerek gezinme (mousedown+mousemove ile pan) tarayıcının kendi metin/öğe
   seçimini tetikliyordu — sürüklerken üzerinden geçilen varlıkların mavi bir seçim
   vurgusuyla "boyanmış" görünmesine yol açıyordu. */
#map-viewport, #map-world {
  user-select: none;
  -webkit-user-select: none;
}
.map-entity {
  position: absolute;
  width: 34px; height: 34px;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.map-entity-icon {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  background: rgba(12,20,12,0.35);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
/* Maden görselleri kendi şeffaf arkaplanıyla gelir — çevrelerine çerçeve/daire eklenmez,
   yalnızca madenin kendisi haritada durur. */
.map-entity-icon.mine-tile {
  background: none;
  border: none;
  box-shadow: none;
}
.map-entity-img {
  width: 100%; height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  user-drag: none;
}
.map-entity:hover .map-entity-icon {
  border-color: rgba(255,255,255,0.4);
  background: rgba(12,20,12,0.55);
}
.map-entity:hover .map-entity-icon.mine-tile {
  border: none;
  background: none;
}
/* v96: Parıltı rengi artık sahiplikten (altın/mavi) değil ULUSTAN besleniyor — app.js
   renderMapEntityHtml() tarafından inline --nation-glow/--nation-glow-soft olarak enjekte
   edilir (varsayılan altına düşer). "Bu benim yerleşimim" bilgisi .mine'ın EKLEDİĞİ ek dış
   halkayla korunuyor (rengi DEĞİŞTİRMEZ, sadece bir katman ekler). */
.map-entity.mine .map-entity-icon, .map-entity.other .map-entity-icon {
  border-color: var(--nation-glow, #d4a53c);
  box-shadow: 0 0 0 2px var(--nation-glow-soft, rgba(212,165,60,0.35)), 0 2px 6px rgba(0,0,0,0.35);
}
.map-entity.mine .map-entity-icon {
  box-shadow: 0 0 0 2px var(--nation-glow-soft, rgba(212,165,60,0.35)), 0 0 0 4px rgba(212,165,60,0.55), 0 2px 6px rgba(0,0,0,0.35);
}
.map-entity.in-reach .map-entity-icon, .map-entity.ghost-in-reach .map-entity-icon { border-color: #34d399; }
.map-entity.in-reach .map-entity-icon.mine-tile, .map-entity.ghost-in-reach .map-entity-icon.mine-tile {
  border: none;
  filter: drop-shadow(0 0 3px #34d399) drop-shadow(0 0 3px #34d399);
}
/* Gerçek görseli olan maden ikonları (mine-tile), emoji tabanlı diğer harita
   varlıklarından (şehir/köy/rakip boy) bağımsız olarak 2 katına çıkarıldı. */
.map-entity.res-tile { width: 136px; height: 136px; }

/* Şehir VE koloni ikonu artık gerçek bir görsel (koymerkezi.png — Merkez binasıyla AYNI
   dosya, tek kaynaktan besleniyor, bkz. v92) — çerçeve kaldırılıp sahiplik/ulus ayrımı
   kenarlık yerine renkli bir parıltıyla gösteriliyor. v96: parıltı rengi artık ULUSTAN
   (--nation-glow) besleniyor, .mine ek bir altın dış parıltı katmanı ekliyor. */
.map-entity-icon.city-tile { background: none; border: none; box-shadow: none; }
.map-entity:hover .map-entity-icon.city-tile { border: none; background: none; }
.map-entity.mine .map-entity-icon.city-tile, .map-entity.other .map-entity-icon.city-tile {
  border: none; box-shadow: none;
  filter: drop-shadow(0 0 4px var(--nation-glow, #d4a53c)) drop-shadow(0 0 4px var(--nation-glow, #d4a53c));
}
.map-entity.mine .map-entity-icon.city-tile {
  filter: drop-shadow(0 0 4px var(--nation-glow, #d4a53c)) drop-shadow(0 0 4px var(--nation-glow, #d4a53c)) drop-shadow(0 0 7px rgba(212,165,60,0.55));
}
.map-entity.city-tile { width: 136px; aspect-ratio: 384 / 333; height: auto; }
/* .mine (satır 46) genel/paylaşılan bir yardımcı sınıf — şehir arsasının kendi
   dış kutusuna da kare bir inset gölge bindiriyordu (küçük emoji ikonda göze
   batmıyordu, 136px'e çıkınca belirgin bir dikdörtgen çerçeve haline geldi).
   Sahiplik zaten ikonun kendi drop-shadow parıltısıyla belli olduğu için burada
   iptal ediliyor. */
.map-entity.city-tile.mine, .map-entity.city-tile.other { box-shadow: none; }

.map-entity-badge {
  position: absolute;
  bottom: -3px; right: -3px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 9999px;
  font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
  color: #0c0f16;
  border: 1.5px solid #0c0f16;
  z-index: 3;
}
.map-entity-badge.res { background: #34d399; }
/* Maden görsellerinin görünen kısmı 136px kutunun ortasında ~66-82px; değerler görsellerin
   saydam kenarları kırpılarak ölçüldü (sağda ~34, altta ~39px boşluk) ve rozet görünen kısmın
   sağ-alt köşesine oturtuldu. Kutu köşesinde kalırsa madenden kopuk durur ve yakındaki şehir
   görseli onu örtebilir. tas.png'nin görünen kısmı daha geniş olduğundan ayrı değer alır. */
.map-entity.res-tile .map-entity-badge { right: 32px; bottom: 37px; }
.map-entity.res-tile.res-tas .map-entity-badge { right: 26px; bottom: 33px; }

/* Kullanıcı: "kalkan ile korunan bir köy ... etrafında kalkan varmış gibi göstersin." — köşede
   küçük bir 🛡️ rozeti (map-entity-badge'in kullandığı sağ-alt köşeyle ÇAKIŞMASIN diye sol-üst) +
   ikonun kendisinde sabit (hover'a bağlı olmayan) mavi/turkuaz bir parıltı halkası. */
.map-entity-shield {
  position: absolute;
  top: -3px; left: -3px;
  font-size: 13px; line-height: 1;
  z-index: 3;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}
.map-entity-icon.shielded {
  box-shadow: 0 0 0 2px rgba(56,189,248,0.65), 0 0 10px 2px rgba(56,189,248,0.5);
}
.map-entity-icon.shielded.city-tile {
  filter: drop-shadow(0 0 5px rgba(56,189,248,0.85));
}
/* Kalkanlı yerleşimin üstüne binen, yanıp sönen yarı saydam koruma kubbesi. Ulus parıltısı
   (.mine/.other .city-tile filter) yukarıdaki .shielded parıltısını ezdiği için kalkan ayrı bir
   katman olarak çiziliyor. pointer-events:none — altındaki şehre tıklama/hover engellenmesin. */
.map-entity-dome {
  position: absolute; left: 50%; top: 50%;
  /* Şehir görseli (koymerkezi.png) kutusunu tam dolduruyor ve ortalı — kubbe aynı oranla, kutunun
     tam merkezine oturur ki bina her yönden eşit payla sarılsın. */
  width: 116%; aspect-ratio: 384 / 333;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  border: 2px solid rgba(165,225,255,0.95);
  background:
    radial-gradient(ellipse at 32% 22%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 24%),
    radial-gradient(ellipse at 50% 58%, rgba(56,189,248,0.14) 0%, rgba(56,189,248,0.24) 50%, rgba(56,189,248,0.5) 78%, rgba(186,230,253,0.85) 96%);
  box-shadow: 0 0 22px 6px rgba(56,189,248,0.6), inset 0 0 26px 6px rgba(56,189,248,0.55);
  animation: shieldDomePulse 2.4s ease-in-out infinite;
}
.map-entity-dome::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M12 0l12 7v14l-12 7L0 21V7zM12 28v14' fill='none' stroke='%23bae6fd' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 16px 28px;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 30%, #000 80%);
  mask-image: radial-gradient(ellipse at 50% 50%, transparent 30%, #000 80%);
}
@keyframes shieldDomePulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.97); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .map-entity-dome { animation: none; opacity: 0.9; transform: translate(-50%, -50%); }
}
.map-entity.city-tile .map-entity-label { z-index: 4; }
.map-entity-shield { z-index: 5; }

.map-entity-label {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  margin-top: 3px;
  white-space: nowrap;
  font-size: 10.5px;
  color: #f1e6c8;
  background: rgba(7,9,13,0.7);
  padding: 1px 6px;
  border-radius: 6px;
  pointer-events: none;
  text-align: center;
}

/* Kendi yerleşimlerinizin etiketinde isim altında gösterilen "çalışan / boşta işçi" sayıları. */
.map-entity-workers {
  font-size: 9.5px;
  margin-top: 1px;
}

.map-smoke {
  position: absolute;
  top: -8px; right: -8px;
  font-size: 13px;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.6));
}

.chat-tab-btn { color:#8a93ab; }
.chat-tab-btn:hover { background:#1c2236; }
.chat-tab-btn.active { background: linear-gradient(90deg, rgba(212,165,60,0.18), transparent); color:#e0b95a; }
.chat-tab-btn:disabled { opacity:.4; cursor:not-allowed; }
.chat-tab-btn:disabled:hover { background: transparent; }

/* ----------------------------- ŞEHİR: Görsel Yerleşke ----------------------------- */
.city-view-wrap { max-width: 1200px; margin: 0 auto; }
.city-view {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 714; /* sehir-zemin.jpg'nin gerçek oranı — background-size:cover hiç kırpma yapmaz */
  border-radius: 16px;
  overflow: hidden;
  background-image: url('/sehir-zemin.jpg');
  background-size: cover;
  background-position: center;
  border: 1px solid #1c2236;
  /* Bina arsalarının boyutu (aşağıda cqw ile) bu konteynerin GERÇEK render genişliğine göre
     ölçeklenir — sabit pikselli arsalar dar (mobil) ekranlarda üst üste biniyordu (arsa
     konumları % tabanlı ve halka çapıyla orantılı, ama boyutları sabitti). Container query
     birimi, ekran genişliği değil bu elementin kendi genişliği referans alındığı için
     sidebar/panel gibi kardeş elementlerin genişliği ne olursa olsun doğru ölçekleniyor. */
  container-type: inline-size;
}

.city-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer;
  z-index: 3;
  /* En sıkışık çift Sur↔Tarla (aynı düşey eksende, halkanın geri kalanından daha yakın) — en dar
     desteklenen telefon genişliğinde (320px, .city-view ~296px) aralarındaki merkez-merkez mesafe
     yalnızca ~27.6px oluyor; 26px taban bu mesafenin altında kalıp güvenli bir pay bırakıyor.
     Tavan (42px) önceki sabit masaüstü boyutuyla birebir aynı. Canlı ölçtüm: 320px genişlikte
     tüm arsa çiftleri arasında artık pozitif (çakışmayan) bir boşluk var. */
  width: clamp(52px, 13cqw, 84px);
  height: clamp(52px, 13cqw, 84px);
}
.city-slot.center {
  width: clamp(60px, 22cqw, 150px);
  height: auto;
  aspect-ratio: 384 / 333; /* koymerkezi.png'nin gerçek (kırpılmış) oranı */
}
.city-slot-base {
  position: absolute; bottom: -6px; left: 50%; transform: translate(-50%, 0);
  width: 78%; height: 28%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.45), transparent 70%);
  z-index: 0;
}
.city-slot-icon {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(12px, 3cqw, 19.5px);
  border-radius: 12px;
  background: linear-gradient(160deg, #6b4a2c, #4a3320);
  border: 2px solid #3a2a18;
  box-shadow: 0 3px 6px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.city-slot:hover .city-slot-icon { border-color: #d4a53c; box-shadow: 0 0 0 2px rgba(212,165,60,0.4), 0 3px 8px rgba(0,0,0,0.5); }
.city-slot.empty .city-slot-icon { background: none; box-shadow: none; border-style: dashed; opacity: 0.75; }
.city-slot.locked .city-slot-icon { opacity: 0.45; filter: grayscale(0.6); }
.city-slot.locked:hover .city-slot-icon { border-color: #3a2a18; box-shadow: 0 3px 6px rgba(0,0,0,0.45); }
.city-slot.building .city-slot-icon { animation: pulseglow 1.6s ease-in-out infinite; border-color: #d4a53c; }
.city-slot.queued .city-slot-icon { border-color: #8a93ab; border-style: dashed; }
/* Merkez artık gerçek bir bina görseli (koymerkezi.png, sehir-zemin.jpg'deki binanın
   üzerine tam oturacak boyut/konumda) — rozet-kutusu görünümü (çerçeve/arkaplan/gölge)
   kaldırılıp yalnızca görsel bırakıldı, tıpkı haritadaki maden ikonlarında olduğu gibi
   (bkz. .map-entity-icon.mine-tile). */
.city-slot.center .city-slot-icon {
  background: none;
  background-image: url('/koymerkezi.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  box-shadow: none;
}
.city-slot.center .city-slot-base { opacity: 0; }
/* Görsel şeffaf bir tuval içinde sıkı kırpılmış ama binanın kendisi bu kutunun
   sağ-alt köşesine kadar uzanmıyor (izometrik/altıgen siluet) — rozet kutunun
   içinde (right/bottom:10%) binanın gövdesinin üzerine biniyordu. Kullanıcının
   işaretlediği hedefe göre kutunun dışına, binanın sağ-altındaki boş çim
   alanına taşındı. */
.city-slot.center .city-slot-level { right: -2%; bottom: -20%; }
/* Merkez yazısı da aynı gerekçeyle binanın hemen dibinden, altındaki boş çim
   boşluğuna indirildi (varsayılan 3px yerine 10px boşluk). */
.city-slot.center .city-slot-name { margin-top: 10px; }
/* Merkez'in görseli sehir-zemin.jpg'deki binanın üzerine piksel hassasiyetinde
   oturtulmuş — genel hover büyütme efekti (:hover scale) burada uygulanırsa
   görsel bir an fotoğraftan kayar ve altındaki orijinal (baked-in) bina kenardan
   görünür ("çift görüntü"). Merkez için ölçek büyütmesi devre dışı bırakıldı. */
.city-slot.center:hover .city-slot-icon { transform: none; }
.city-slot.wall { z-index: 4; }
.city-slot.wall .city-slot-icon { border-radius: 7px; background: none; border-color: #2e2110; box-shadow: none; }
.city-slot.wall .city-slot-base { opacity: 0; }
.city-slot.field .city-slot-icon { border-color: #4a7a3a; }

/* Genel bina türleri (Sur/Tarla dahil — 'wall'/'field' özel çerçeve renkleri
   üstündeki bu kural sayesinde artık geçersiz kalıyor) için de Merkez'deki
   gibi gerçek bina görselleri var artık — rozet-kutusu görünümü kaldırılıp
   yalnızca görsel bırakıldı (background-image satır içi stille, bina
   türüne göre app.js'ten geliyor). Atölye'nin henüz görseli yok, o hâlâ
   emoji rozetiyle (.has-img sınıfı almaz) gösteriliyor. */
.city-slot.has-img .city-slot-icon {
  background: none;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  box-shadow: none;
}
.city-slot-level {
  position: absolute; bottom: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 9999px;
  font-size: 9.5px; font-weight: 700; line-height: 16px; text-align: center;
  color: #0c0f16; background: #d4a53c;
  border: 1.5px solid #0c0f16;
  z-index: 2;
}
.city-slot.empty .city-slot-level { background: #6b7280; }
.city-slot-name {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px;
  font-size: 9.5px; color: #f1e6c8; background: rgba(7,9,13,0.75);
  padding: 1px 5px; border-radius: 5px; white-space: nowrap;
  pointer-events: none; z-index: 3;
}

/* ----------------------------- "NASIL?" BİLGİ PENCERESİ MASKOTU ----------------------------- */
.howto-mascot {
  position: relative;
  width: 126px; height: 168px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 45px; line-height: 1;
  border-radius: 14px;
  background: radial-gradient(circle at 35% 28%, #3a2a18, #151a29 70%);
  border: 2px solid #d4a53c;
  box-shadow: 0 0 0 3px rgba(212,165,60,0.15), 0 3px 8px rgba(0,0,0,0.45);
}
/* Kullanıcı: "İnfolardaki görseldeki kızın adı nurdan ... sanki oyuncu ile konuşuyormuş gibi
   burda bir mesaj baloncuğu çıkart" — maskotun (tüm "Nasıl?" pencerelerinde ortak) kafasının
   üzerinden çıkan, konuşma baloncuğu görünümlü sabit bir karşılama etiketi. */
.mascot-speech {
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%);
  margin-bottom: 9px;
  background: #f4ead2;
  color: #2a1f10;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  z-index: 1;
}
.mascot-speech::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #f4ead2;
}
/* Kaynak görsel dikey bir portre (750x1000, oran 3:4) — kutu da aynı orana ayarlandığından
   (diğer birim portrelerindeki dikey dikdörtgen desenle tutarlı) görsel neredeyse hiç
   kırpılmadan tam sığıyor; object-position yalnızca ince bir üst-ağırlıklı düzeltme. */
.howto-mascot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; border-radius: 10px; }

.map-reach-circle, .map-territory-circle {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}
.map-reach-circle {
  background: rgba(52,211,153,0.14);
  border: 3px solid rgba(16,150,105,0.95);
}
.map-territory-circle {
  background: transparent;
  border: 3px dashed rgba(180,131,25,0.95);
}
/* "Koloni Kur" modunda fareyi takip eden önizleme — gerçek varlıklarla karışmasın diye
   hafif saydam ve tıklamaya kapalı (asıl tıklama viewport'un click handler'ında ele alınır). */
.colony-ghost { pointer-events: none; z-index: 5; opacity: 0.85; }

/* Kendi şehrim görünür haritanın dışına çıktığında kenarda beliren, yönü gösteren ve
   tıklanınca şehre götüren rozet — #map-world'ün DIŞINDA (pan/zoom transformu almaz),
   konumu her zaman ekran (viewport) uzayında JS ile hesaplanır. */
.map-city-indicator {
  position: absolute; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(12,15,22,0.88); border: 2px solid #d4a53c;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  cursor: pointer; z-index: 6; transition: transform .1s ease;
}
.map-city-indicator:hover { transform: translate(-50%, -50%) scale(1.08); }
.city-indicator-arrow { font-size: 16px; line-height: 1; color: #d4a53c; }
.city-indicator-dist { font-size: 9px; color: #f1e6c8; font-family: ui-monospace, monospace; margin-top: 2px; white-space: nowrap; }

/* Kullanıcı: "Haritada köyler arası savaş, destek, kaynak gönderimi gibi olaylarda hangi
   şehirler arası yapılıyorsa kesikli çizgiler ve google mapsteki gibi bir ok ile hareket etsin
   anlık." — iki yerleşim arasındaki AKTİF bir seferi (asker/kaynak) gösteren kesikli çizgi + bu
   çizgi üzerinde ilerleyen ok. Çizgi #map-world'ün DÜNYA-uzayında (left/top world px + rotate)
   konumlanır, bu sayede haritayı kaydırıp yakınlaştırdığınızda diğer tüm varlıklar gibi otomatik
   birlikte hareket eder — ayrıca ekran koordinatına çevirmeye gerek yok. */
.movement-dash-line {
  position: absolute; height: 0; border-top: 2.5px dashed; transform-origin: 0 0;
  pointer-events: none; z-index: 2; opacity: 0.75;
}
/* Konum JS tarafından (updateMovementArrows, her ~1sn'de bir gerçek ilerlemeye göre) sabit
   aralıklarla ayarlanıyor — .95sn'lik CSS transition bu ayrık adımları göze pürüzsüz/anlık akan
   bir hareket gibi gösteriyor (60fps'lik ayrı bir animasyon döngüsü YAZILMADI, mevcut 1sn'lik
   updateCountdowns tikine binildi — kod-tabanının genelindeki desenle tutarlı).
   BUG DÜZELTMESİ (performans/kasma): konum eskiden `left`/`top` ile veriliyordu — bunlar
   compositor-only DEĞİLDİR, her animasyon karesinde tarayıcıya layout+paint yaptırır. Harita
   kalabalık bir LAN partisinde onlarca aktif sefer gösterebildiğinden (WORLD_MOVEMENTS TÜM
   oyunculara ait), bu N ok × 60fps × (layout+paint) sürekli maliyeti demekti. Artık `left:0;
   top:0` sabit, konum yalnızca `transform: translate()` ile veriliyor (bkz. app.js) — GPU
   compositing katmanına taşınır, layout'a hiç dokunmaz. */
.movement-arrow {
  position: absolute; left: 0; top: 0; font-size: 15px; line-height: 1; pointer-events: none; z-index: 3;
  transition: transform .95s linear;
  will-change: transform;
  text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9);
}

/* ==========================================================================
   ADMİN PANELİ (v186) — yalnızca public/admin.html içinde kullanılır, tüm
   seçiciler #screen-login / #screen-dashboard / .adm-* ile SCOPED'dır; oyuncu
   istemcisini (app.js/index.html) hiçbir şekilde etkilemez. admin.js'in ürettiği
   tablo/liste İÇERİĞİ (render fonksiyonları) hiç değişmedi — burası yalnızca
   admin.html'deki sabit çerçeveyi (header/kart/pencere/input) ve admin.js'in
   TEKRARLAYAN yapılarını (tablo başlıkları/satırları, scrollbar) tek bir yerden
   modernize ediyor; hiçbir id/data-attribute/JS mantığı etkilenmedi.
   ========================================================================== */

#screen-dashboard {
  background:
    radial-gradient(circle at 12% -6%, rgba(212,165,60,.07), transparent 42%),
    radial-gradient(circle at 100% 8%, rgba(192,57,43,.07), transparent 38%),
    #07090d;
}

.adm-login-glyph {
  width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  font-size: 30px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(212,165,60,.22), rgba(212,165,60,.04));
  border: 1px solid rgba(212,165,60,.3);
  box-shadow: 0 0 40px -8px rgba(212,165,60,.35);
}
#screen-login form {
  background: linear-gradient(165deg, rgba(21,26,41,.88), rgba(12,15,22,.92));
  border: 1px solid rgba(192,57,43,.25);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.02) inset;
}

#screen-dashboard > header {
  background: linear-gradient(180deg, rgba(16,20,32,.97), rgba(10,13,20,.97));
  box-shadow: 0 1px 0 rgba(212,165,60,.1), 0 10px 26px -16px rgba(0,0,0,.7);
}

/* ---- Buton sistemi ---- */
.adm-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9px;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; line-height: 1.1;
  white-space: nowrap; border: 1px solid transparent; cursor: pointer;
  transition: filter .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.adm-btn:active { transform: scale(.96); }
.adm-btn-ghost { background: #151a29; border-color: #262e47; color: #c9d1e0; }
.adm-btn-ghost:hover { background: #1c2236; border-color: #3a4568; color: #fff; }
.adm-btn-primary { background: linear-gradient(180deg, #e6c477, #c4922a); color: #241a08; box-shadow: 0 2px 12px -3px rgba(212,165,60,.55); }
.adm-btn-primary:hover { filter: brightness(1.08); box-shadow: 0 4px 18px -3px rgba(212,165,60,.7); }
.adm-btn-danger { background: linear-gradient(180deg, #d0453a, #7f1d15); color: #fff; box-shadow: 0 2px 12px -3px rgba(192,57,43,.5); }
.adm-btn-danger:hover { filter: brightness(1.1); box-shadow: 0 4px 18px -3px rgba(192,57,43,.6); }
.adm-btn-text { background: transparent; color: #8a93ab; padding: 7px 10px; }
.adm-btn-text:hover { color: #e0b95a; }

/* ---- İkon rozetler ---- */
.adm-icon-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 11px; font-size: 18px; flex-shrink: 0;
  background: linear-gradient(160deg, rgba(212,165,60,.16), rgba(212,165,60,.03));
  border: 1px solid rgba(212,165,60,.22);
}
.adm-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 9px; color: #8a93ab; font-size: 15px; line-height: 1; transition: all .15s ease; cursor: pointer;
}
.adm-icon-btn:hover { background: #1c2236; color: #fff; }

/* ---- Başlatıcı kartlar ---- */
/* Tek satır, sayfa boyunca eşit dağılır; dar ekranda alta sarmak yerine yatay kayar. Üst/alt
   dolgu, taşma kutusunun hover'daki yukarı kalkmayı ve gölgeyi kırpmaması için. */
.adm-tile-bar { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; }
.adm-tile-bar > .adm-tile { flex: 1 0 auto; justify-content: center; gap: 9px; padding: 10px; }
.adm-tile-bar > .adm-tile > span:last-child { display: flex; flex-direction: column; align-items: flex-start; }
.adm-tile-bar .adm-icon-badge { width: 32px; height: 32px; font-size: 16px; border-radius: 9px; }
.adm-tile {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(21,26,41,.9), rgba(15,19,30,.75));
  border: 1px solid #202638; text-align: left; cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.adm-tile:hover { border-color: rgba(212,165,60,.55); transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(212,165,60,.14); }
.adm-tile.adm-tile-active { border-color: #d4a53c; background: linear-gradient(160deg, rgba(212,165,60,.16), rgba(21,26,41,.85)); box-shadow: 0 0 0 1px rgba(212,165,60,.32), 0 14px 30px -16px rgba(0,0,0,.75); }
.adm-tile-title { font-family: 'Cinzel', serif; font-size: 13px; color: #f2dfa8; letter-spacing: .01em; }
.adm-tile-count {
  font-family: 'Inter', sans-serif; font-size: 10.5px; color: #f5e9c4; font-weight: 700;
  background: rgba(212,165,60,.16); border-radius: 99px; padding: 1px 8px; display: inline-block; margin-top: 3px;
}
/* Bazı sayaçlar (Destek/Elmas/Kayıt Defteri/Yetkililer) yalnızca ilgili pencere en az bir kez
   açıldığında dolduruluyor (bkz. admin.js renderAll — kapalı pencereler render'ı atlar, v174
   performans düzeltmesi) — boşken görünmez bir "boş hap" bırakmak yerine tamamen gizlenir. */
.adm-tile-count:empty { display: none; }

/* ---- Pencere paneli ---- */
#window-root [data-window-backdrop] {
  position: relative; overflow: hidden;
  max-width: 800px; margin-inline: auto;
  background: linear-gradient(160deg, rgba(21,26,41,.94), rgba(12,15,23,.94));
  border: 1px solid #1f2534;
  box-shadow: 0 24px 56px -28px rgba(0,0,0,.8);
}
#window-root [data-window-backdrop]::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, #d4a53c, transparent); opacity: .55;
}
/* Pencereler 800px — tablolar yana kaydırma çubuğu çıkarmadan sığsın diye hücre boşlukları dar. */
#window-root table th, #window-root table td { padding-left: 6px; padding-right: 6px; }
#window-root table td button { padding-left: 6px; padding-right: 6px; }
#window-root .adm-panel-head { background: rgba(255,255,255,.015); border-bottom: 1px solid #1c2236; }
.adm-section-label { font-family: 'Cinzel', serif; color: #e0b95a; font-size: 13px; letter-spacing: .01em; }

/* ---- Form kontrolleri ----
   #modal-root, admin.js'teki openAccountModal/openXModal fonksiyonlarının açtığı pencereler için
   #screen-dashboard'un DIŞINDA, sayfa köküne yakın bir kardeş <div> (bkz. admin.html). Aynı id
   OYUNCU istemcisinde (index.html/app.js) de kullanıldığından çıplak `#modal-root input` GÜVENLİ
   DEĞİL — oyuncu tarafına sızardı. Bunun yerine yalnızca admin.html'nin <body id="admin-body">
   özniteliğinden başlayan `#admin-body #modal-root ...` seçicisi kullanılıyor; bu id yalnızca
   admin.html'de var, oyuncu istemcisi hiç etkilenmiyor. */
#screen-dashboard input[type="text"], #screen-dashboard input[type="password"], #screen-dashboard select,
#screen-login input,
#admin-body #modal-root input, #admin-body #modal-root select, #admin-body #modal-root textarea {
  background: #10131e; border: 1px solid #262e47; border-radius: 9px; color: #ece7d4;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#screen-dashboard input[type="text"]:focus, #screen-dashboard input[type="password"]:focus, #screen-dashboard select:focus,
#screen-login input:focus,
#admin-body #modal-root input:focus, #admin-body #modal-root select:focus, #admin-body #modal-root textarea:focus {
  outline: none; border-color: #d4a53c; box-shadow: 0 0 0 3px rgba(212,165,60,.14);
}
#screen-dashboard input::placeholder, #admin-body #modal-root input::placeholder { color: #8a93ab; }

/* ---- Admin modal çerçevesi (confirmAction/confirmActionCritical/openXModal — hepsi aynı
   #modal-box kalıbını kullanıyor, bkz. admin.js openModal) ---- */
#admin-body #modal-backdrop { background: rgba(4,5,8,.82); backdrop-filter: blur(3px); }
#admin-body #modal-box {
  background: linear-gradient(165deg, rgba(21,26,41,.97), rgba(12,15,22,.98));
  border: 1px solid #232a3d; box-shadow: 0 30px 70px -24px rgba(0,0,0,.85);
}
#admin-body #modal-box button { transition: filter .15s ease, transform .08s ease; }
#admin-body #modal-box button:active { transform: scale(.97); }

/* ---- Tablolar — admin.js'in ürettiği <table>'ları TEK yerden modernize eder ---- */
#window-root table thead th { font-family: 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .05em; font-size: 10px; }
#window-root table tbody tr { border-bottom: 1px solid rgba(38,46,71,.45); transition: background-color .12s ease; }
#window-root table tbody tr:last-child { border-bottom: none; }
#window-root table tbody tr:hover { background: rgba(212,165,60,.055); }
#window-root table tbody tr:nth-child(even) { background: rgba(255,255,255,.012); }
#window-root table tbody tr:nth-child(even):hover { background: rgba(212,165,60,.065); }
#window-root table td, #window-root table th { font-variant-numeric: tabular-nums; }

/* ---- İnce, tema uyumlu scrollbar (yalnızca admin pencereleri içinde) ---- */
#window-root *::-webkit-scrollbar { width: 9px; height: 9px; }
#window-root *::-webkit-scrollbar-track { background: transparent; }
#window-root *::-webkit-scrollbar-thumb { background: #262e47; border-radius: 99px; }
#window-root *::-webkit-scrollbar-thumb:hover { background: #3a4568; }

/* ---- Anasayfa (screen-home) atmosferik arka planı ----
   Kullanıcı: "Anasayfanın arka planına çok güzel gerçekçi bir görsel hazırla ve koy" — üretilebilir
   bir görsel aracı yok, kullanıcı bunun yerine tamamen CSS katmanlarıyla kurulan atmosferik bir
   sahneyi tercih etti (gece göğü + ufukta altın parıltı + uzak dağ silüeti + yıldız alanı). */
.home-bg {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(212,165,60,0.16) 0%, rgba(212,165,60,0) 70%),
    linear-gradient(180deg, #07090d 0%, #0c0f16 32%, #131828 62%, #1c2236 100%);
  /* Sayfa içeriği (birden fazla bölüm) tek ekrandan çok daha uzun olabiliyor — arkaplan sayfanın
     TAMAMINA değil, VIEWPORT'a göre orantılanıp sabit kalsın diye (kaydırırken sahne yerinde
     durur, "parallax" hissi) fixed kullanılıyor; aksi halde yıldızlar/dağ silüeti binlerce
     piksellik bir alana yayılıp ilk ekranda neredeyse hiç görünmüyordu. */
  background-attachment: fixed;
}
.home-bg::before {
  /* Yıldız alanı — gökyüzünün üst yarısına serpiştirilmiş küçük noktalar. */
  content: '';
  position: fixed; top: 0; left: 0; right: 0; height: 65vh;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 12%, rgba(255,255,255,.85), transparent 100%),
    radial-gradient(1.2px 1.2px at 18% 22%, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1.6px 1.6px at 30% 8%, rgba(255,255,255,.75), transparent 100%),
    radial-gradient(1.2px 1.2px at 42% 18%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1.6px 1.6px at 55% 6%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1.2px 1.2px at 63% 24%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1.6px 1.6px at 74% 10%, rgba(255,255,255,.8), transparent 100%),
    radial-gradient(1.2px 1.2px at 85% 20%, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1.6px 1.6px at 93% 14%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1.2px 1.2px at 4% 30%, rgba(255,255,255,.45), transparent 100%),
    radial-gradient(1.2px 1.2px at 50% 28%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1.6px 1.6px at 97% 32%, rgba(255,255,255,.6), transparent 100%);
  opacity: .9;
  pointer-events: none;
}
.home-bg::after {
  /* Ufuk çizgisinin hemen üstündeki uzak dağ/tepe silüeti — birkaç iç içe elips gradyanı. */
  content: '';
  position: fixed; left: 0; right: 0; bottom: 0; height: 32vh; min-height: 200px; max-height: 320px;
  background:
    radial-gradient(ellipse 42% 100% at 12% 100%, #0a0e18 0%, transparent 62%),
    radial-gradient(ellipse 58% 100% at 38% 100%, #0e1322 0%, transparent 68%),
    radial-gradient(ellipse 46% 100% at 66% 100%, #0a0e18 0%, transparent 62%),
    radial-gradient(ellipse 62% 100% at 90% 100%, #0e1322 0%, transparent 68%);
  pointer-events: none;
}