/* ============================================================================
   KABADAYI — TİPOGRAFİ SİSTEMİ
   ----------------------------------------------------------------------------
   index.html'den SONRA yüklenir, içindeki <style> bloğunu geçersiz kılar.
   index.html'e DOKUNULMAZ.

   İlkeler
   1. Ağırlık tavanı 600. 700 sadece para ve sayaçlarda.  800 hiçbir yerde yok.
   2. text-transform:uppercase kaldırıldı. Tek istisna aşağıda gerekçesiyle yazılı.
   3. Tek bir merdiven: 10 / 11 / 12.5 / 14 / 16 / 20 / 28 / 38 / 54 px.
   4. Türkçe uzun kelime ve İ/ı ayrımı için ayrı bir bölüm var (§7).
   5. Rakamlar her yerde tabular — para değişirken satır zıplamaz.
   ========================================================================== */


/* ============================================================================
   §1  FONT — GERÇEK, PAKETLENMİŞ FONTLAR (aktif)
   ----------------------------------------------------------------------------
   Capacitor/offline uygulama: CDN yok, tüm dosyalar yerel  fontlar/  altında.
   İkisi de SIL Open Font License 1.1 — uygulama içine gömülü dağıtım serbest.

   ── ARAYÜZ: Plus Jakarta Sans (Tokotype, OFL 1.1) ────────────────────────
   Neden bu:
   • Modern, yumuşak geometrik grotesk. Daytona / Onest ailesiyle aynı ruh:
     dairesel 'o', açık apertür, hafif sıcak. "SaaS" değil, "iyi mobil oyun"
     hissi veriyor — oyun sahibinin istediği yön tam bu.
   • Türkçe TAM: ğ Ğ ı İ ş Ş ç Ç ö Ö ü Ü hepsi ayrı çizili; noktasız ı ve
     noktalı İ birbirinden net ayrı (latin-ext altkümesinde).
   • Değişken font (wght 200–800). Tek dosya 400–700 aralığını taşıyor,
     sahte-bold yok. Aday alternatifler (Onest, Hanken Grotesk, Manrope) da
     denendi; Jakarta en yuvarlak ve en okunur 'a/g' formuna sahip, seçildi.
   • Boyut: latin 27 KB + latin-ext 21 KB woff2 = 48 KB, değişken ağırlık dahil.

   ── BAŞLIK / DISPLAY: Fraunces (Undercase, OFL 1.1) ──────────────────────
   Neden bu:
   • Sadece LOGO ("Kabadayı"), sonuç başlıkları ve büyük para/sayaç için.
     Windsor / Cooper / Souvenir mirası — 1970'ler film afişi harfi.
     Neo-noir tonuna karakter katıyor; arayüzün temizliğini bozmadan,
     çünkü yalnızca 4-5 yerde görünüyor.
   • Türkçe destekli, ı/İ ayrı. opsz (optik boyut) ekseni büyük puntoda
     harfleri inceltip zarifleştiriyor.
   • Boyut: latin 66 KB + latin-ext 58 KB woff2. Büyük görünüyor ama sadece
     başlık ekranlarında yükleniyor; ilk gövde metni Jakarta'yla anında gelir.

   Not: her iki font da Google Fonts'un latin / latin-ext altküme woff2'leri.
   Türkçe metin ikisini de kullanır (temel harfler latin'de, ğşİ latin-ext'te),
   o yüzden dört dosya da pakette.
   ========================================================================== */

/* --- Plus Jakarta Sans: arayüz --- */
@font-face{
  font-family:"Jakarta";
  src:url("fontlar/jakarta-latin.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Jakarta";
  src:url("fontlar/jakarta-latin-ext.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- Fraunces: başlık / display --- */
@font-face{
  font-family:"Fraunces";
  src:url("fontlar/fraunces-latin.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";
  src:url("fontlar/fraunces-latin-ext.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Paketlenmiş font önde; sistem yığını yalnızca dosya yüklenemezse yedek.
     Arial/Helvetica listede YOK — bilinçli. */
  --font-arayuz:
    "Jakarta",
    ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "SF Pro Text", "Segoe UI", Roboto, "Noto Sans", system-ui, sans-serif;

  --font-baslik:
    "Fraunces",
    ui-serif, "New York", "Iowan Old Style", Georgia, serif;

  --font-rakam: var(--font-arayuz);
}

/* Fraunces opsz eksenini büyük başlıklarda aç — harfler incelip zarifleşir */
.dev, #scrGunduz .dev::before, .sonucbaslik, .cepte .v, .sayac{
  font-variation-settings:"opsz" 96;
}


/* ============================================================================
   §3  ÖLÇEK — tek merdiven, tek yerden ayarlanır
   ========================================================================== */
:root{
  /* --- boyut --- */
  --yazi-mikro : 10px;    /* HUD etiketi, rozet — okunmaz, taranır       */
  --yazi-xs    : 11px;    /* yardımcı satır, mekân alt bilgisi           */
  --yazi-s     : 12.5px;  /* uyarı, ikincil buton, toast, not            */
  --yazi-m     : 14px;    /* GÖVDE — tablo satırı, kart adı, lezzet      */
  --yazi-l     : 16px;    /* birincil buton, kart başlığı, HUD değeri    */
  --yazi-xl    : 20px;    /* ekran başlığı                               */
  --yazi-2xl   : 28px;    /* sonuç başlığı, reis adı                     */
  --yazi-3xl   : 38px;    /* logo, cepteki para                          */
  --yazi-4xl   : 54px;    /* hapis sayacı — tek kullanım, dramatik       */

  /* --- satır yüksekliği --- */
  --sat-sik    : 1.08;    /* 28px üstü display                           */
  --sat-dar    : 1.28;    /* başlık, buton, kart adı                     */
  --sat-orta   : 1.42;    /* arayüz metni                                */
  --sat-genis  : 1.62;    /* lezzet metni, uzun paragraf                 */

  /* --- harf aralığı ---
     Kural: punto büyüdükçe aralık daralır, küçüldükçe açılır.            */
  --harf-mikro :  .10em;  /* 10px etiket                                 */
  --harf-kucuk :  .015em; /* 11–12.5px                                   */
  --harf-normal:  0;      /* 14–16px                                     */
  --harf-baslik: -.012em; /* 20–28px                                     */
  --harf-dev   : -.022em; /* 38px+                                       */

  /* --- ağırlık: tavan 600, para/sayaç için 700 --- */
  --ag-govde   : 400;
  --ag-vurgu   : 500;
  --ag-baslik  : 600;
  --ag-rakam   : 700;
}


/* ============================================================================
   §4  TEMEL
   ========================================================================== */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  font-family:var(--font-arayuz);
  font-size:var(--yazi-m);
  font-weight:var(--ag-govde);
  line-height:var(--sat-orta);
  letter-spacing:var(--harf-normal);
  font-synthesis-weight:none;      /* sahte bold üretme — kalınlık ucuzlaşır */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{ font-family:inherit; }


/* ============================================================================
   §5  BÜYÜK HARFİN KALDIRILMASI
   ----------------------------------------------------------------------------
   TEK İSTİSNA: .stat .k  (HUD'daki "Rütbe / Nakit / Şeref").
   Gerekçe — bu üç etiket okunmuyor, sütun başlığı olarak taranıyor; 10px'te
   küçük harf gövdeleri birbirine karışıyor, versal yükseklik farkı sütunları
   birbirinden ayırıyor. Üçünde de i/ı yok, dolayısıyla Türkçe büyütme
   tuzağı da yok (RÜTBE / NAKİT değil "NAKIT" riski taşımıyorlar).
   Diğer her yerde büyük harf kaldırıldı.

   Aşağıdaki text-transform:none bloğu bir "emniyet kilidi": index.html'e
   ileride yeniden uppercase sızarsa burada durur. Kaynağın kendisi
   metin-onerileri.md'ye göre temizlendi.
   ========================================================================== */
.baslik,
.btn,
.isietiket,
.cepte .k,
.satir,
.uyari,
.sonucbaslik,
.sayac,
#toast,
#talimat,
#oyunAd,
#rRutbe,
.kart .ad, .kart .yer, .kart .risk,
.mekan .ad, .mekan .alt, .mekan .perk,
.semt .ad, .semt .rozet, .semt .not, .semt .reis,
.mekanbtn,
.stat .k,
.cepte .k,
.isietiket{
  text-transform:none;
}

/* HUD etiketleri artık cümle düzeninde (kaynak zaten "Rütbe/Nakit/Şeref").
   Büyük harf istisnası KALDIRILDI — oyunun tek büyük-harf yeri logo.
   HUD'da hiyerarşiyi punto + renk taşıyor: etiket 10px sönük, değer 14px net. */
.stat .k{
  text-transform:none !important;
}

/* Logo: HTML'de hâlâ "KABADAYI" yazıyor ve index.html'e dokunmuyoruz —
   doğru yazımı CSS'ten basıyoruz. lowercase numarası kullanılmadı, çünkü
   "KABADAYI" küçültülürken locale eşlemesi tutmazsa "Kabadayi" (noktasız i)
   çıkma riski var; sabit metin bu riski tamamen kaldırıyor.
   Kalıcı çözüm: index.html satır 6 ve 188 → "Kabadayı". */
/* KARAR: logo BÜYÜK HARF kalıyor. Oyunun adı bir afiş başlığı — büyük harfi
   hak eden tek yer burası. ::before numarası kaldırıldı; metin HTML'de duruyor,
   ekran okuyucu da doğru okuyor. */
#scrGunduz .dev{
  font-size:var(--yazi-3xl);
  line-height:var(--sat-sik);
  letter-spacing:.06em;
  font-weight:var(--ag-govde);
}


/* ============================================================================
   §6  RAKAMLAR — para, yüzde, sayaç
   ----------------------------------------------------------------------------
   Para birimi "TL" (1974, ₺ sembolü anakronik).
   tabular-nums: 1.250 TL → 9.800 TL geçişinde satır genişliği sabit kalır.
   ========================================================================== */
.mono,
.stat .v,
.kart .para,
.satir span:last-child,
.cepte .v,
.sayac,
.semt .rakam b,
.mekanbtn,
#isiYuzde,
#birikimTutar{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  font-variant-ligatures:none;   /* rakam dizilerinde ligatür istemiyoruz */
}

/* Para ve sayaç: 700 kullanmaya izin verilen tek yer */
.kart .para,
.stat .v.mono,
#birikimTutar{
  font-weight:var(--ag-rakam);
}


/* ============================================================================
   §7  TÜRKÇE'YE ÖZEL
   ----------------------------------------------------------------------------
   • lang="tr" zaten <html>'de var; -webkit-locale ile WebKit'in büyük/küçük
     harf ve tireleme motorunu Türkçe'ye kilitliyoruz (I↔ı, İ↔i).
   • "Külhanbeyi", "Nezarethane", "Yakalanma", "Kapalıçarşı" gibi 10+ harfli
     kelimeler 320px ekranda taşmasın diye: taşma yerine kır, tireleme aç,
     başlıklarda satırları dengele.
   ========================================================================== */
html{ -webkit-locale:"tr"; }

body,
.btn,
.kart,
.mekan,
.semt,
.satir,
.lezzet{
  overflow-wrap:break-word;
  word-break:normal;              /* kelimeyi keyfî yerden kesme */
  -webkit-hyphens:auto;
  hyphens:auto;
  -webkit-hyphenate-limit-before:3;
  -webkit-hyphenate-limit-after:3;
}

/* Başlıklar: satırları dengele, tek kelime alta düşmesin */
.baslik,
.dev,
.sonucbaslik,
.kart .ad,
.mekan .ad,
.semt .ad,
#oyunAd,
#hapisBaslik{
  text-wrap:balance;
}

/* Uzun düzyazı: dul satır bırakma */
.lezzet,
.semt .not,
.uyari,
#toast,
#hapisIspiyon{
  text-wrap:pretty;
}

/* Buton metinleri: tek satırda kalmaya çalış, gerekirse iki satır — ama asla
   kutudan taşma. Uzun etiket ("Eve dön · kazancı bankala") burada yaşıyor. */
.btn{
  white-space:normal;
  hyphens:none;                   /* butonda tire çirkin durur */
  padding-inline:14px;
}


/* ============================================================================
   §8  BİLEŞENLER — ölçeğin uygulanması
   ========================================================================== */

/* --- ekran üstü etiket ("Beyoğlu · 1974", "Mahalle · Beyoğlu") ----------- */
.baslik{
  font-size:var(--yazi-s);
  font-weight:var(--ag-vurgu);
  letter-spacing:var(--harf-kucuk);
  line-height:var(--sat-dar);
  color:var(--sonuk);
}

/* --- display / logo ------------------------------------------------------ */
.dev{
  font-family:var(--font-baslik);
  font-size:var(--yazi-2xl);
  font-weight:var(--ag-govde);
  letter-spacing:var(--harf-baslik);
  line-height:var(--sat-sik);
}

/* --- HUD ----------------------------------------------------------------- */
/* Cümle düzeninde artık geniş harf aralığı (--harf-mikro) yanlış durur;
   normal aralığa çekildi. 11px, sönük renk — etiket geri planda kalıyor. */
.stat .k{
  font-size:var(--yazi-xs);
  font-weight:var(--ag-vurgu);
  letter-spacing:var(--harf-kucuk);
  line-height:1.3;
  color:var(--sonuk);
}
.stat .v{
  /* 16px değil 14px: "120.010 TL" üç sütuna bölünmüş HUD'da 16px'te taşıyor.
     nowrap + minimal negatif aralık, altı haneli parayı tek satırda tutuyor. */
  font-size:var(--yazi-m);
  font-weight:var(--ag-baslik);
  letter-spacing:-.01em;
  line-height:var(--sat-dar);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* --- ısı barı ------------------------------------------------------------ */
.isietiket{
  font-size:var(--yazi-mikro);
  font-weight:var(--ag-vurgu);
  letter-spacing:var(--harf-kucuk);
  color:var(--sonuk);
}

/* --- butonlar (yalnız tipografi; görsel rafinasyon §8b'de) --------------- */
.btn{
  font-size:var(--yazi-l);
  font-weight:var(--ag-baslik);
  letter-spacing:var(--harf-normal);
  line-height:var(--sat-dar);
}
/* hayalet buton = ikincil eylem; uzun etiketleri o taşıyor, bir kademe küçük */
.btn.hayalet{
  font-size:var(--yazi-m);
  font-weight:var(--ag-vurgu);
}


/* ============================================================================
   §8b  BUTON RAFİNASYONU — katmanlı derinlik, neo-noir amber
   ----------------------------------------------------------------------------
   Sorun: düz tek gradyan + tek sert gölge → ucuz "bootstrap düğmesi".
   Çözüm: üç katman —
     1) inset üst-parlaklık (highlight) : buton yukarıdan ışık alıyormuş gibi
     2) inset alt-koyuluk (iç gölge)     : gövdeye hacim
     3) dıştan iki gölge (yakın+uzak)    : yüzeyden yükseklik
   Basılınca: yükseklik gerçekten çöküyor (translateY + gölge küçülüyor),
   üst highlight sönüyor — dokunsal geri bildirim inandırıcı.
   ========================================================================== */

/* Ortak zemin */
.btn{
  position:relative;
  border:none;
  border-radius:15px;
  padding:15px 16px 16px;
  isolation:isolate;                     /* ::before/::after z sırası için */
  transition:transform .08s cubic-bezier(.3,.8,.4,1),
             box-shadow .08s cubic-bezier(.3,.8,.4,1),
             filter .12s ease;
  will-change:transform;
}

/* --- BİRİNCİL (amber) — asıl eylem: Geceye çık, Bir iş daha ------------- */
.btn:not(.hayalet):not(.kirmizi){
  color:#20140a;
  background:
    linear-gradient(180deg,#ffc766 0%,#ffb340 42%,#ff9a24 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),      /* üst parlak çizgi        */
    inset 0 -6px 12px rgba(150,60,0,.30),     /* iç alt gölge = hacim    */
    inset 0 0 0 1px rgba(255,190,90,.40),     /* ince sıcak kenar        */
    0 2px 4px rgba(0,0,0,.30),                /* yakın temas gölgesi     */
    0 6px 16px rgba(255,140,26,.28),          /* sıcak yayılma           */
    0 10px 26px rgba(0,0,0,.34);              /* uzak zemin gölgesi      */
  text-shadow:0 1px 0 rgba(255,220,150,.45);
}
.btn:not(.hayalet):not(.kirmizi):active{
  transform:translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -3px 8px rgba(150,60,0,.34),
    inset 0 0 0 1px rgba(255,190,90,.30),
    0 1px 2px rgba(0,0,0,.30),
    0 2px 6px rgba(255,140,26,.20);
  filter:brightness(.97);
}

/* --- KIRMIZI (kan) — riskli/uyarı eylem -------------------------------- */
.btn.kirmizi{
  color:#fff;
  background:
    linear-gradient(180deg,#ff5566 0%,#ec3143 46%,#c81e2e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -6px 12px rgba(90,10,18,.45),
    inset 0 0 0 1px rgba(255,120,130,.30),
    0 2px 4px rgba(0,0,0,.34),
    0 6px 16px rgba(224,43,60,.30),
    0 10px 26px rgba(0,0,0,.36);
  text-shadow:0 1px 1px rgba(90,0,10,.5);
}
.btn.kirmizi:active{
  transform:translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -3px 8px rgba(90,10,18,.5),
    inset 0 0 0 1px rgba(255,120,130,.24),
    0 1px 2px rgba(0,0,0,.34),
    0 2px 6px rgba(224,43,60,.22);
  filter:brightness(.97);
}

/* --- HAYALET — ikincil/geri; cam gibi, hafif iç ışık ------------------- */
.btn.hayalet{
  color:var(--metin);
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 2px 8px rgba(0,0,0,.22);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.btn.hayalet:active{
  transform:translateY(2px);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 1px 3px rgba(0,0,0,.24);
}

/* --- devre dışı --- */
.btn:disabled{
  opacity:.38;
  filter:saturate(.7);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

/* --- Haraç topla (yeşil) — inline gradyanı korur, katmanları biz ekleriz -
   HTML'de style="" ile yeşil veriliyor; bg'yi ezmeden sadece kabartma. */
#btnTopla{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -6px 12px rgba(10,70,40,.34),
    0 2px 4px rgba(0,0,0,.30),
    0 6px 16px rgba(61,220,132,.24),
    0 10px 26px rgba(0,0,0,.32) !important;
  text-shadow:0 1px 0 rgba(180,255,210,.4);
}
#btnTopla:active{ transform:translateY(4px); filter:brightness(.97); }

/* --- mekân butonları (küçük) — aynı dil, küçük ölçek ------------------- */
.mekanbtn{
  border-radius:11px;
  padding:10px 12px;
  color:#20140a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -4px 8px rgba(150,60,0,.26),
    0 2px 3px rgba(0,0,0,.28),
    0 4px 10px rgba(255,140,26,.20);
  text-shadow:0 1px 0 rgba(255,220,150,.4);
  transition:transform .08s ease,box-shadow .08s ease,filter .12s ease;
}
.mekanbtn:active{ transform:translateY(3px); filter:brightness(.97);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.28); }
/* "yok" (kilitli) ve "tam" (bitmiş) durumları düz kalır — eylem değiller */
.mekanbtn.yok,
.mekanbtn.tam{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  text-shadow:none;
}
.mekanbtn.tam{ box-shadow:inset 0 0 0 1px rgba(61,220,132,.4); }

/* --- iş kartları --------------------------------------------------------- */
.kart .ad{
  font-size:var(--yazi-l);
  font-weight:var(--ag-baslik);
  letter-spacing:var(--harf-normal);
  line-height:var(--sat-dar);
}
.kart .yer{
  font-size:var(--yazi-xs);
  font-weight:var(--ag-govde);
  letter-spacing:var(--harf-kucuk);
  line-height:var(--sat-orta);
}
.kart .para{
  font-size:var(--yazi-m);
  letter-spacing:-.008em;
  line-height:var(--sat-dar);
}
/* Sağ sütun (para + risk) asla sarmasın — kartların yüksekliği eşit kalsın */
.kart .sag,
.kart .para,
.kart .risk{
  white-space:nowrap;
}
/* Orta sütun daralabilsin; yoksa "Tezgâh boşaltma · Balık Pazarı" gibi uzun
   Türkçe adlar flex kutusunu esnetip parayı ekran dışına iter. */
.kart > div:nth-child(2),
.mekan > div:nth-child(2){
  min-width:0;
}
.kart .risk{
  font-size:var(--yazi-xs);
  font-weight:var(--ag-govde);
  letter-spacing:var(--harf-kucuk);
  line-height:var(--sat-orta);
}
.kart .risk b{ font-weight:var(--ag-baslik); }

/* --- mini-oyun ----------------------------------------------------------- */
#talimat{
  font-size:var(--yazi-s);
  font-weight:var(--ag-vurgu);
  letter-spacing:var(--harf-kucuk);
  line-height:var(--sat-orta);
  color:var(--sonuk);
}
#oyunAd{
  font-size:var(--yazi-s);
  font-weight:var(--ag-vurgu);
  letter-spacing:var(--harf-kucuk);
}

/* --- sonuç --------------------------------------------------------------- */
.sonucbaslik{
  font-family:var(--font-baslik);
  font-size:var(--yazi-2xl);
  font-weight:var(--ag-govde);
  letter-spacing:var(--harf-baslik);
  line-height:var(--sat-sik);
}
.satir{
  font-size:var(--yazi-m);
  font-weight:var(--ag-govde);
  letter-spacing:var(--harf-normal);
  line-height:var(--sat-orta);
}
.satir span:last-child{
  font-weight:var(--ag-baslik);
}
.lezzet{
  font-size:var(--yazi-m);
  font-weight:var(--ag-govde);
  font-style:italic;
  line-height:var(--sat-genis);
  letter-spacing:var(--harf-normal);
  max-width:32ch;               /* satır uzunluğu ~32 karakter — okunur kalsın */
}

/* --- karar / cepteki para ------------------------------------------------ */
.cepte .k{
  font-size:var(--yazi-mikro);
  font-weight:var(--ag-vurgu);
  letter-spacing:var(--harf-kucuk);
  color:var(--sonuk);
}
.cepte .v{
  font-family:var(--font-baslik);
  font-size:var(--yazi-3xl);
  font-weight:var(--ag-govde);
  letter-spacing:var(--harf-dev);
  line-height:var(--sat-sik);
}
.uyari{
  font-size:var(--yazi-s);
  font-weight:var(--ag-vurgu);
  letter-spacing:var(--harf-kucuk);
  line-height:var(--sat-orta);
}

/* --- hapis --------------------------------------------------------------- */
.sayac{
  font-family:var(--font-baslik);
  font-size:var(--yazi-4xl);
  font-weight:var(--ag-govde);
  letter-spacing:var(--harf-dev);
  line-height:var(--sat-sik);
}

/* --- toast --------------------------------------------------------------- */
#toast{
  font-size:var(--yazi-s);
  font-weight:var(--ag-vurgu);
  letter-spacing:var(--harf-kucuk);
  line-height:var(--sat-orta);
}
#toast b{ font-weight:var(--ag-baslik); }

/* --- mahalle / mekânlar -------------------------------------------------- */
.mekan .ad{
  font-size:var(--yazi-m);
  font-weight:var(--ag-baslik);
  letter-spacing:var(--harf-normal);
  line-height:var(--sat-dar);
}
.mekan .alt{
  font-size:var(--yazi-xs);
  font-weight:var(--ag-govde);
  letter-spacing:var(--harf-kucuk);
  line-height:var(--sat-orta);
}
.mekan .perk{
  font-size:var(--yazi-xs);
  font-weight:var(--ag-vurgu);
  letter-spacing:var(--harf-kucuk);
  line-height:var(--sat-orta);
}
.mekanbtn{
  font-size:var(--yazi-s);
  font-weight:var(--ag-baslik);
  letter-spacing:var(--harf-kucuk);
  line-height:var(--sat-dar);
}

/* --- semt ---------------------------------------------------------------- */
.semt .ad{
  font-size:var(--yazi-l);
  font-weight:var(--ag-baslik);
  letter-spacing:var(--harf-normal);
  line-height:var(--sat-dar);
}
.semt .rozet{
  font-size:var(--yazi-mikro);
  font-weight:var(--ag-vurgu);
  letter-spacing:var(--harf-kucuk);
  line-height:1.4;
}
.semt .not{
  font-size:var(--yazi-s);
  font-weight:var(--ag-govde);
  font-style:italic;
  line-height:var(--sat-genis);
}
.semt .rakam{
  font-size:var(--yazi-xs);
  font-weight:var(--ag-govde);
  letter-spacing:var(--harf-kucuk);
}
.semt .rakam b{
  font-size:var(--yazi-m);
  font-weight:var(--ag-baslik);
  letter-spacing:var(--harf-normal);
}
.semt .reis{
  font-size:var(--yazi-s);
  font-weight:var(--ag-govde);
  line-height:var(--sat-orta);
}
.semt .reis b{ font-weight:var(--ag-vurgu); }

/* --- reisle karşılaşma --------------------------------------------------- */
#rAd{
  font-size:var(--yazi-2xl) !important;   /* HTML'de inline 26px var */
  letter-spacing:var(--harf-baslik);
}
#rRutbe{
  font-size:var(--yazi-s) !important;     /* HTML'de inline 11.5px var */
  font-weight:var(--ag-vurgu);
  letter-spacing:var(--harf-kucuk) !important;
}

/* --- ses düğmesi --------------------------------------------------------- */
#ses{
  font-size:var(--yazi-m);
  line-height:1;
}


/* ============================================================================
   §9  INLINE STİL TEMİZLİĞİ
   ----------------------------------------------------------------------------
   Inline style="" normal kuralları yener; merdivenin dışına düşen inline
   punto/ağırlıklar burada geri çekiliyor. Bu, dosyadaki tek !important yığını.
   İlk kural bir emniyet kilidi: index.html'e yeniden 700/800 sızarsa yakalar.
   ========================================================================== */
[style*="font-weight:800"],
[style*="font-weight: 800"],
[style*="font-weight:700"]:not(.mono):not(.stat .v){
  font-weight:var(--ag-baslik) !important;
}

/* Merdiven dışı inline puntolar */
#mGelir{
  font-size:var(--yazi-s) !important;
  letter-spacing:var(--harf-kucuk);
}
#scrSecim .mono{
  font-size:var(--yazi-s) !important;
}
/* Ekran girişindeki açıklama metni (.scr'ın doğrudan çocuğu olan .lezzet).
   Kart içindeki lezzet metninden bir kademe küçük olmalı, yoksa 11px'lik
   .baslik'i eziyor ve hiyerarşi ters dönüyor. */
.scr > .lezzet{
  font-size:var(--yazi-s) !important;
  line-height:var(--sat-genis);
}


/* ============================================================================
   §10  KÜÇÜK EKRAN — 360px altı
   ----------------------------------------------------------------------------
   Merdivenin üst üç basamağı bir kademe iner. Alt basamaklar sabit kalır:
   11px'in altına inmek okunabilirliği bitirir.
   ========================================================================== */
@media (max-width:359px){
  :root{
    --yazi-l   : 15px;
    --yazi-xl  : 18px;
    --yazi-2xl : 24px;
    --yazi-3xl : 32px;
    --yazi-4xl : 46px;
  }
}

/* Çok kısa ekranda (iPhone SE yatay güvenlik payı) display biraz daha küçülür */
@media (max-height:670px){
  :root{
    --yazi-3xl : 32px;
    --yazi-4xl : 44px;
  }
}