/* ============================================================================
   KABADAYI — ARAYÜZ / GÖRSEL TASARIM KATMANI
   ----------------------------------------------------------------------------
   YÜKLEME SIRASI (index.html <head>):
     inline <style>  →  animasyon.css  →  tipografi.css  →  ARAYUZ.CSS (bu dosya)
   Yani bu dosya EN SON yüklenir ve eşit özgüllükte son sözü söyler.

   GÖREV: tipografi (font/ölçek) ve animasyon (hareket) DEĞİL — düzen, yüzey,
   derinlik, kart sistemi, hiyerarşi, boşluk ritmi, durum görsel dili.
   tipografi.css'in punto/ağırlık kararları ve §8b buton kabartması KORUNUR;
   burada onları EZMİYORUZ, üstüne görsel gövde inşa ediyoruz.

   İLKELER
   1. Tek bir yüzey dili: her kart aynı ışık/gölge/kenar mantığıyla kurulur.
   2. Tek bir yarıçap merdiveni, tek bir boşluk merdiveni.
   3. Neo-noir derinlik: sıcak amber üst ışık, soğuk gece dip, katmanlı gölge.
      "Ucuz karanlık tema" değil — her yüzeyin üstü ışık alır, altı gölgeye oturur.
   4. Mobil (375–390px dikey) önce. Ağır blur yok (mobil GPU); gölge+gradyan var.
   5. Durum görsel dili: kilitli / seçilebilir / sahip / sıcak / şimdi — hepsi
      renk + kenar + parıltı ile OKUNUR, sadece opaklıkla değil.
   ========================================================================== */


/* ============================================================================
   §0  JETONLAR — boşluk, yarıçap, yüzey, gölge, ara renkler
   ========================================================================== */
:root{
  /* --- boşluk merdiveni (4 tabanlı) --- */
  --uzay-1:4px; --uzay-2:8px; --uzay-3:12px; --uzay-4:16px;
  --uzay-5:20px; --uzay-6:24px; --uzay-7:32px;

  /* --- yarıçap merdiveni --- */
  --r-xs:8px; --r-s:10px; --r-m:14px; --r-l:18px; --r-xl:22px; --r-yuvar:999px;

  /* --- ara yüzey renkleri (mevcut paleti tamamlar, ezmez) --- */
  --panel-ust : #1e2740;   /* kartın aydınlık tepesi */
  --panel-dip : #10152180;   /* yarı saydam dip — canvas hafif sızsın */
  --cizgi-isik   : rgba(255,255,255,.075);  /* üst kenar highlight */
  --cizgi-yumus  : rgba(255,255,255,.05);   /* iç bölücü */
  --amber-sis : rgba(255,179,64,.16);
  --amber-cam : rgba(255,179,64,.10);
  --kan-sis   : rgba(224,43,60,.15);
  --yesil-cam : rgba(61,220,132,.12);

  /* --- gölge merdiveni (neo-noir: yakın temas + uzak zemin) --- */
  --golge-kart : 0 1px 2px rgba(0,0,0,.35), 0 10px 24px -14px rgba(0,0,0,.75);
  --golge-yuk  : 0 2px 6px rgba(0,0,0,.42), 0 20px 44px -16px rgba(0,0,0,.8);
  --golge-pop  : 0 8px 20px rgba(0,0,0,.5), 0 30px 70px -20px rgba(0,0,0,.85);
}


/* ============================================================================
   §1  EKRAN İSKELETİ — boşluk ritmi + kaydırma nefesi
   ========================================================================== */
.scr{ padding:var(--uzay-4) var(--uzay-4) var(--uzay-3); gap:0; }

/* Liste kaydırma alanları: kenarda soluk maske ile "içerik devam ediyor" hissi,
   ve kaydırma çubuğu ince/karakterli. */
#nufuzListe, #rutbeListe, #semtListe, #mekanListe{
  scrollbar-width:thin;
  scrollbar-color:var(--cizgi) transparent;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 calc(100% - 14px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 calc(100% - 14px),transparent 100%);
}
#nufuzListe::-webkit-scrollbar, #rutbeListe::-webkit-scrollbar,
#semtListe::-webkit-scrollbar, #mekanListe::-webkit-scrollbar{ width:5px; }
#nufuzListe::-webkit-scrollbar-thumb, #rutbeListe::-webkit-scrollbar-thumb,
#semtListe::-webkit-scrollbar-thumb, #mekanListe::-webkit-scrollbar-thumb{
  background:var(--cizgi); border-radius:var(--r-yuvar);
}

/* --- ekran başlıkları: sola hizalı bölüm başlıklarına amber bir "iz" ver ---
   Bölümün nerede başladığını göz anında bulur. Yalnızca sol-hizalı ekranlarda. */
#scrSecim .baslik,
#scrMahalle .baslik,
#scrBaglanti .baslik,
#scrRutbeler .baslik,
#scrSemt .baslik{
  position:relative;
  padding-left:var(--uzay-3);
}
#scrSecim .baslik::before,
#scrMahalle .baslik::before,
#scrBaglanti .baslik::before,
#scrRutbeler .baslik::before,
#scrSemt .baslik::before{
  content:'';
  position:absolute; left:0; top:1px; bottom:1px;
  width:3px; border-radius:var(--r-yuvar);
  background:linear-gradient(180deg,var(--amber),var(--amber2));
  box-shadow:0 0 10px var(--amber-sis);
}

/* ekran giriş açıklaması (.scr>.lezzet): başlıktan biraz daha nefes alsın */
.scr > .lezzet{ margin-bottom:var(--uzay-4) !important; }


/* ============================================================================
   §2  HUD — üst konsol + ısı barı
   ----------------------------------------------------------------------------
   Şu an üç kutu başıboş yüzüyor. Onları tek bir "gösterge paneli" ritmine
   oturtuyoruz: her kutu yukarıdan ışık alan, alta oturan bir yüzey; Rütbe
   kutusu amber vurgulu (kariyerin kimliği), Nakit en ağırlıklı sütun.
   ========================================================================== */
#hud{ padding:var(--uzay-3) var(--uzay-4) var(--uzay-1); gap:var(--uzay-2); }

.stat{
  border-radius:var(--r-m);
  padding:8px var(--uzay-3);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, var(--panel-ust), var(--panel) 92%);
  border:1px solid var(--cizgi);
  border-top-color:var(--cizgi-isik);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    var(--golge-kart);
  position:relative;
  overflow:hidden;
}
/* Rütbe kutusu: kariyerin yüzü — sol amber şerit + hafif sıcak zemin */
#statRutbe{
  background:
    linear-gradient(180deg, var(--amber-cam), rgba(255,179,64,0) 45%),
    linear-gradient(180deg, var(--panel-ust), var(--panel) 92%);
  border-left:3px solid var(--amber);
}
#statRutbe .v{ text-shadow:0 0 16px var(--amber-sis); }
/* Nakit: en önemli sayı — değeri yeşile yakın nötr kalır ama kutu biraz daha net */
#statNakit{ border-top-color:rgba(255,255,255,.09); }
/* Şeref kutusundaki ayar düğmesi çakışmasın diye zaten sağ boşluk var (inline) */

/* --- ısı barı: ince/kopuk çizgiden oyulmuş bir göstergeye --- */
#isiwrap{ padding:var(--uzay-1) var(--uzay-4) var(--uzay-3); }
.isietiket{ margin-bottom:6px; }
.isietiket #isiYuzde{ color:var(--metin); font-weight:600; }
.isibar{
  height:12px;
  border-radius:var(--r-s);
  background:linear-gradient(180deg,#070a12,#0c1120);
  border:1px solid var(--cizgi);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,.6),
    inset 0 -1px 0 rgba(255,255,255,.03);
  overflow:hidden;
}
/* çentikler: göstergeye ölçek karakteri katar — çok hafif */
.isibar::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg,
    transparent 0, transparent calc(10% - 1px),
    rgba(0,0,0,.35) calc(10% - 1px), rgba(0,0,0,.35) 10%);
  opacity:.5;
}
.isifill{
  border-radius:var(--r-s) 0 0 var(--r-s);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 0 10px rgba(255,140,26,.35);
  position:relative; z-index:1;
}


/* ============================================================================
   §3  YÜZEY SİSTEMİ — tüm kartların ortak görsel gövdesi
   ----------------------------------------------------------------------------
   Tek bir ışık mantığı: üstten sıcak highlight, gövdede panel gradyanı,
   1px kenar (tepesi aydınlık), katmanlı dış gölge. Her kart bu dili konuşur;
   böylece iş/mekân/nüfuz/rütbe/semt kartları tek bir aileden görünür.
   NOT: .kart sol amber şeridini KORUYORUZ — o yüzden border kısayolu yerine
   yalnızca gereken kenarları/gölgeyi override ediyoruz.
   ========================================================================== */
.kart, .mekan, .nufuzSatir, .rutbeSatir, .semt{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 38%),
    linear-gradient(162deg, var(--panel-ust) 0%, var(--panel) 78%, #0f1420 100%);
  box-shadow:var(--golge-kart);
}
/* üst kenar highlight'ı — border-top rengini aydınlat (sol accent'lere dokunmadan) */
.kart{ border-top-color:var(--cizgi-isik); border-right-color:var(--cizgi-isik); }
.mekan, .nufuzSatir, .semt{ border-color:var(--cizgi); border-top-color:var(--cizgi-isik); }


/* ============================================================================
   §4  İŞ KARTLARI (scrSecim) — en çok etkileşilen ekran
   ----------------------------------------------------------------------------
   Hiyerarşi: ikon-jetonu → iş adı → (para = kahraman değer) → risk (sönük).
   Durumlar: normal (amber şerit) · sıcak (kızıl, tehlike) · kilitli (soluk).
   ========================================================================== */
.kartlar{ gap:var(--uzay-3); margin-top:var(--uzay-1); }

.kart{
  border-radius:var(--r-l);
  border-left-width:3px;
  padding:var(--uzay-3) var(--uzay-4);
  gap:var(--uzay-3);
}
/* İkon artık başıboş emoji değil — oturmuş bir "jeton". Her işe kimlik verir. */
.kart .ikon{
  width:48px; height:48px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  border-radius:var(--r-m);
  background:
    radial-gradient(120% 100% at 50% 22%, var(--amber-cam), rgba(255,255,255,.02) 68%),
    linear-gradient(180deg, #1a2136, #131a2b);
  border:1px solid var(--cizgi);
  border-top-color:var(--cizgi-isik);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.35);
}
.kart .ikon svg{ width:26px; height:26px; }

/* Para = kahraman değer → yeşil bir jetona otur, öne çık */
.kart .para{
  display:inline-block;
  color:var(--yesil);
  background:var(--yesil-cam);
  border:1px solid rgba(61,220,132,.22);
  padding:3px var(--uzay-2);
  border-radius:var(--r-s);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.kart .risk{ color:var(--sonuk); margin-top:6px; }
.kart .risk b{ color:var(--amber); }

/* --- SICAK iş: kızıl tehlike dili --- */
.kart.sicak{
  border-left-color:var(--kan);
  background:
    linear-gradient(180deg, rgba(224,43,60,.06), rgba(255,255,255,0) 40%),
    linear-gradient(162deg, #241826 0%, #16121c 78%, #0f0b12 100%);
  box-shadow:var(--golge-kart), 0 0 0 1px rgba(224,43,60,.12);
}
.kart.sicak .ikon{
  background:
    radial-gradient(120% 100% at 50% 22%, var(--kan-sis), rgba(255,255,255,.02) 68%),
    linear-gradient(180deg,#241521,#180f16);
  border-color:rgba(224,43,60,.3);
}
.kart.sicak .risk b{ color:var(--kan); }
/* mevcut ::after kızıl köşe parıltısı (animasyon.css'te nefes alıyor) korunur */

.kart:active{ border-color:var(--amber); box-shadow:var(--golge-yuk); }


/* ============================================================================
   §5  MEKÂNLAR (scrMahalle)
   ----------------------------------------------------------------------------
   İş kartıyla aynı aile; ikon-jetonu mekânın rengini taşır. Seviye pip'leri
   büyür ve dolu/boş ayrımı netleşir. "Sahip" yeşil şerit, "kilitli" soluk.
   ========================================================================== */
.mekan{
  border-radius:var(--r-l);
  padding:var(--uzay-3) var(--uzay-4);
  gap:var(--uzay-3);
  margin-bottom:var(--uzay-3);
}
.mekan.sahip{ border-left:3px solid var(--yesil); }
.mekan.sahip{
  background:
    linear-gradient(180deg, var(--yesil-cam), rgba(61,220,132,0) 34%),
    linear-gradient(162deg, var(--panel-ust) 0%, var(--panel) 78%, #0f1420 100%);
}
.mekan .ikon{
  width:44px; height:44px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  border-radius:var(--r-m);
  background:
    radial-gradient(120% 100% at 50% 22%, rgba(255,255,255,.10), rgba(255,255,255,.02) 68%),
    linear-gradient(180deg,#1a2136,#131a2b);
  border:1px solid var(--cizgi);
  border-top-color:var(--cizgi-isik);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.35);
}
.mekan .ikon svg{ width:24px; height:24px; }
.mekan .alt{ margin-top:3px; }
.mekan .perk{ margin-top:5px; }

/* seviye göstergesi: ince çizgilerden okunur segmentlere */
.seviye{ gap:4px; margin-top:8px; }
.seviye i{
  width:20px; height:5px; border-radius:var(--r-yuvar);
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.4);
}
.seviye i.d{
  background:linear-gradient(90deg,var(--yesil),#2fae6b);
  box-shadow:0 0 8px rgba(61,220,132,.4);
}

/* mahalle sokak sahnesi çerçevesi (canvas'a dokunmadan, sadece kadraj) */
#sokak{
  border-radius:var(--r-l);
  border:1px solid var(--cizgi);
  box-shadow:var(--golge-yuk), inset 0 0 40px rgba(0,0,0,.5);
}


/* ============================================================================
   §6  NÜFUZ / BAĞLANTILAR (scrBaglanti)
   ========================================================================== */
.nufuzSatir{
  border-radius:var(--r-l);
  padding:var(--uzay-3) var(--uzay-4);
  gap:var(--uzay-3);
  margin-bottom:var(--uzay-3);
}
.nufuzSatir.sahip{
  background:
    linear-gradient(180deg, var(--yesil-cam), rgba(61,220,132,0) 34%),
    linear-gradient(162deg, var(--panel-ust) 0%, var(--panel) 78%, #0f1420 100%);
}
/* "şimdi aktif" masa: amber cam + parıltı, sokakta oturduğun yer belli olsun */
.nufuzSatir.simdi{
  background:
    linear-gradient(180deg, var(--amber-cam), rgba(255,179,64,0) 40%),
    linear-gradient(162deg, #22283e 0%, var(--panel) 78%, #0f1420 100%);
  box-shadow:var(--golge-kart), 0 0 0 1px var(--amber) inset, 0 0 22px -6px var(--amber-sis);
}
.nufuzSatir .nno{
  width:30px; height:30px; border-radius:var(--r-yuvar);
  border:1px solid var(--cizgi-isik);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.nufuzSatir.sahip .nno, .nufuzSatir.simdi .nno{
  background:linear-gradient(180deg,var(--amber),var(--amber2));
  box-shadow:0 2px 8px rgba(255,140,26,.35);
}
.nufuzSatir .nalt{ margin-top:3px; }
.nufuzSatir .nrisk{ margin-top:4px; }


/* ============================================================================
   §7  RÜTBE LİSTESİ (scrRutbeler)
   ----------------------------------------------------------------------------
   "geçti" soluk kalır (mazi), "şimdi" öne fırlar (amber parıltı, bulunduğun
   basamak), "kilitli" en sönük. Hiyerarşi tek bakışta okunur.
   ========================================================================== */
.rutbeSatir{
  border-radius:var(--r-m);
  padding:var(--uzay-3) var(--uzay-4);
  margin-bottom:var(--uzay-2);
  gap:var(--uzay-3);
}
.rutbeSatir.gecti{ opacity:.55; }
.rutbeSatir.simdi{
  opacity:1;
  background:
    linear-gradient(180deg, var(--amber-cam), rgba(255,179,64,0) 45%),
    linear-gradient(162deg, #22283e 0%, var(--panel) 82%);
  border-color:var(--amber);
  box-shadow:var(--golge-yuk), 0 0 0 1px var(--amber) inset, 0 0 24px -8px var(--amber-sis);
}
.rutbeSatir .no{
  width:30px; height:30px; border-radius:var(--r-yuvar);
  border:1px solid var(--cizgi-isik);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.rutbeSatir.gecti .no{
  background:linear-gradient(180deg,#3ddc84,#2fae6b);
  box-shadow:0 2px 6px rgba(61,220,132,.3);
}
.rutbeSatir.simdi .no{
  background:linear-gradient(180deg,var(--amber),var(--amber2));
  box-shadow:0 2px 8px rgba(255,140,26,.4);
}
.rutbeSatir .rxp{ margin-top:2px; }


/* ============================================================================
   §8  SEMT KARTLARI (scrSemt)
   ========================================================================== */
.semt{
  border-radius:var(--r-l);
  padding:var(--uzay-4);
  margin-bottom:var(--uzay-3);
}
.semt.aktif{
  background:
    linear-gradient(180deg, var(--amber-cam), rgba(255,179,64,0) 40%),
    linear-gradient(162deg, #22283e 0%, var(--panel) 78%, #0f1420 100%);
  box-shadow:var(--golge-yuk);
}
.semt .ust{ gap:var(--uzay-2); align-items:center; }
.semt .rozet{
  padding:3px var(--uzay-2);
  border-radius:var(--r-xs);
  border:1px solid var(--cizgi-yumus);
}
.semt .not{ margin:7px 0 var(--uzay-3); }
/* rakam bloğu: üç metrik ayrı hücrelere otursun, okunur ızgara */
.semt .rakam{ gap:var(--uzay-2); }
.semt .rakam > div{
  flex:1;
  background:rgba(0,0,0,.22);
  border:1px solid var(--cizgi-yumus);
  border-radius:var(--r-s);
  padding:7px var(--uzay-2);
  color:var(--sonuk);
}
.semt .reis{ margin-top:var(--uzay-3); padding-top:var(--uzay-3); }


/* ============================================================================
   §9  GÜNDÜZ / ANA EKRAN (scrGunduz) — oyunun yüzü
   ----------------------------------------------------------------------------
   Sorun: logo + istatistik satırları canvas'ın üstünde başıboş yüzüyor,
   hepsi aynı ağırlıkta. Çözüm:
     • Logo bloğu bir "afiş" gibi nefes alsın (amber sıcaklık, ince ayraç).
     • Beş istatistik satırı tek bir kapsanmış "künye/defter" kartına otursun.
   Böylece göz: BAŞLIK (afiş) → VERİ (defter) → EYLEM (butonlar) sırasını okur.
   ========================================================================== */
#scrGunduz .merkez{ gap:var(--uzay-1); }

/* afiş: "Beyoğlu · 1974" üstetiketi + KABADAYI logosu sıcak bir hâle alsın */
#scrGunduz .dev{
  text-shadow:0 0 34px rgba(255,179,64,.18), 0 2px 10px rgba(0,0,0,.5);
  margin:var(--uzay-2) 0 var(--uzay-1) !important;
}
#scrGunduz .merkez > .baslik{ color:var(--amber); opacity:.85; }
#scrGunduz #gunduzLezzet{ margin-bottom:var(--uzay-3); }

/* --- KÜNYE DEFTERİ: beş .satir'ı tek karta bağla (yapısal değişiklik gerekmez) ---
   .satir'lar merkez'in son 5 çocuğu ve ardışık; ilkini .lezzet takip eder,
   sonuncusu :last-child. Bu iki uçtan yakalayıp aradakileri bölücüyle bağlıyoruz. */
#scrGunduz .merkez > .satir{
  width:100%; max-width:330px; margin:0 auto;
  padding:11px var(--uzay-4);
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0) 60%),
    rgba(16,21,33,.72);
  border-left:1px solid var(--cizgi);
  border-right:1px solid var(--cizgi);
  border-bottom:none;
}
#scrGunduz .merkez > .satir + .satir{ border-top:1px solid var(--cizgi-yumus); }
/* defterin üst kapağı (ilk satır) */
#scrGunduz .merkez > .lezzet + .satir{
  margin-top:var(--uzay-2);
  border-top:1px solid var(--cizgi-isik);
  border-radius:var(--r-m) var(--r-m) 0 0;
  box-shadow:0 -1px 0 rgba(255,255,255,.03);
}
/* defterin alt kapağı (son satır) */
#scrGunduz .merkez > .satir:last-child{
  border-bottom:1px solid var(--cizgi);
  border-radius:0 0 var(--r-m) var(--r-m);
  box-shadow:var(--golge-kart);
}
/* semt satırı tıklanabilir → hafif amber vurgusu */
#scrGunduz #gSemtSatir{ color:var(--metin); }

/* kimlik satırı: künyenin altında sakin bir künye şeridi */
#gKimlik{
  text-align:center; color:var(--sonuk);
  margin:var(--uzay-3) 0 var(--uzay-1) !important;
}


/* ============================================================================
   §10  SONUÇ (scrSonuc) + REİSLE KARŞILAŞMA (scrKarsilasma)
   ----------------------------------------------------------------------------
   Merkez içerik hareketli canvas'ın üstünde okunurluğunu yitiriyordu. Kutu
   koymadan, yumuşak bir radyal perde ile metni okunur zemine oturtuyoruz;
   şehir yine kenarlardan sızar (atmosfer korunur). Satırlar okunur hücreler.
   ========================================================================== */
#scrSonuc .merkez, #scrKarsilasma .merkez{
  position:relative;
}
#scrSonuc .merkez::before, #scrKarsilasma .merkez::before{
  content:''; position:absolute; z-index:-1;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:135%; height:118%;
  background:radial-gradient(ellipse 62% 52% at 50% 46%,
    rgba(6,8,14,.82) 0%, rgba(6,8,14,.55) 45%, transparent 78%);
  pointer-events:none;
}

/* sonuç satır cetveli: okunur hücreler, ince bölücü */
#sonucSatirlar{ margin-top:var(--uzay-3); }
#scrSonuc .satir, #karar .satir{
  padding:10px var(--uzay-3);
  border-bottom:1px solid var(--cizgi-yumus);
}
#sonucSatirlar .satir:first-child{ border-top:1px solid var(--cizgi-yumus); }

/* "cepte" büyük para — henüz kasada değil: amber uyarı halesi ile riski hissettir */
.cepte .v{ text-shadow:0 0 30px rgba(61,220,132,.22), 0 2px 12px rgba(0,0,0,.5); }
#karar .cepte .v{ color:var(--amber); text-shadow:0 0 30px rgba(255,179,64,.28), 0 2px 12px rgba(0,0,0,.5); }
#karar{ gap:var(--uzay-3); padding-top:var(--uzay-2); }

/* reisle karşılaşma: reis ikonu ve "üstündeki para" gerilimi öne çıksın */
#scrKarsilasma #rIkon{ filter:drop-shadow(0 6px 18px rgba(224,43,60,.35)); margin-bottom:var(--uzay-1); }
#scrKarsilasma .cepte .v{ color:var(--kan); text-shadow:0 0 26px rgba(224,43,60,.3); }


/* ============================================================================
   §11  HAPİS (hapis)
   ========================================================================== */
#hapis{ background:radial-gradient(ellipse at 50% 30%, #0d1018, #05060a 80%); }
#hapisIkon{ filter:drop-shadow(0 4px 16px rgba(0,0,0,.6)); opacity:.85; }
.sayac{ text-shadow:0 0 30px rgba(232,228,220,.12), 0 3px 14px rgba(0,0,0,.6); }
#hapis .baslik{ letter-spacing:.06em; }


/* ============================================================================
   §12  MİNİ-OYUN ÇERÇEVESİ (scrOyun) — canvas'a dokunma, kadrajı tasarla
   ========================================================================== */
#oyunwrap{ gap:var(--uzay-2); }
#oyunAd{
  color:var(--amber); opacity:.9;
  margin-bottom:var(--uzay-3) !important;
}
#talimat{
  background:rgba(0,0,0,.28);
  border:1px solid var(--cizgi-yumus);
  border-radius:var(--r-yuvar);
  padding:7px var(--uzay-4);
  align-self:center;
  min-width:min(78%,300px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
#cv{
  border-radius:var(--r-l);
  border:1px solid var(--cizgi);
  box-shadow:var(--golge-yuk), inset 0 0 60px rgba(0,0,0,.55);
}
/* aşama pip'leri: daha okunur, dolu/hata durumu parlar */
#asama{ gap:8px; margin-top:var(--uzay-4); }
.pip{ width:30px; height:5px; border-radius:var(--r-yuvar); background:rgba(255,255,255,.1); }
.pip.ok{ background:linear-gradient(90deg,var(--yesil),#2fae6b); box-shadow:0 0 8px rgba(61,220,132,.5); }
.pip.no{ background:linear-gradient(90deg,#f04455,var(--kan)); box-shadow:0 0 8px rgba(224,43,60,.5); }


/* ============================================================================
   §13  NASIL OYNANIR (scrOgretici)
   ========================================================================== */
#ogIkon{ filter:drop-shadow(0 4px 16px var(--amber-sis)); }
#ogGovde{
  background:linear-gradient(162deg, var(--panel-ust), var(--panel));
  border:1px solid var(--cizgi);
  border-top-color:var(--cizgi-isik);
  border-radius:var(--r-l);
  padding:var(--uzay-4) var(--uzay-5);
  box-shadow:var(--golge-kart);
  line-height:1.55;
}


/* ============================================================================
   §14  KATMANLAR — bilgi popup, ayar paneli, ses düğmesi, toast
   ========================================================================== */
#bilgiPopup{ background:rgba(4,6,11,.68); }
.bilgiKart{
  border-radius:var(--r-xl);
  padding:var(--uzay-6) var(--uzay-6) var(--uzay-5);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 30%),
    linear-gradient(162deg, var(--panel-ust), var(--panel) 90%);
  border:1px solid var(--cizgi);
  border-top-color:var(--cizgi-isik);
  box-shadow:var(--golge-pop);
}
.bilgiBaslik{ margin-bottom:var(--uzay-3); }

#ayarPanel{
  border-radius:var(--r-l);
  padding:var(--uzay-4);
  gap:var(--uzay-3);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 30%),
    linear-gradient(162deg, var(--panel-ust), #10152a 92%);
  border:1px solid var(--cizgi);
  border-top-color:var(--cizgi-isik);
  box-shadow:var(--golge-pop);
}
#ayarPanel .ayarBaslik{ letter-spacing:.14em; }

#ses{
  border-radius:var(--r-m);
  width:34px; height:34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, var(--panel-ust), var(--panel));
  border:1px solid var(--cizgi);
  border-top-color:var(--cizgi-isik);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--golge-kart);
  color:var(--metin);
}
#ses:active{ transform:translateY(1px); }

#toast{
  border-radius:var(--r-m);
  padding:var(--uzay-3) var(--uzay-5);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, #161c2e, #0d1220);
  border:1px solid var(--amber);
  box-shadow:var(--golge-pop), 0 0 24px -6px var(--amber-sis);
}


/* ============================================================================
   §15  KÜÇÜK EKRAN İNCE AYARI (≤360px) — boşluk bir kademe kısılır
   ========================================================================== */
@media (max-width:360px){
  .scr{ padding:var(--uzay-3) var(--uzay-3) var(--uzay-2); }
  .kart, .mekan, .nufuzSatir, .semt{ padding:var(--uzay-3); gap:var(--uzay-2); }
  .kart .ikon{ width:44px; height:44px; }
  .mekan .ikon{ width:40px; height:40px; }
}
