/* Drift Etiketi — arayüz.
 *
 * ── Görsel dil ────────────────────────────────────────────────────
 * İlk sürüm "kalın siyah kontur + parlak degrade" idi ve sahibi arayüzü
 * beğenmedi. Sorun süslemede değil, üç yapısal şeydeydi:
 *
 *   1. TEK YAZI AİLESİ. Hiyerarşi yalnız punto ile kuruluyordu, o
 *      yüzden her başlık "biraz daha büyük yazı" gibi duruyordu.
 *      Şimdi iki aile var: `--d` (Bahnschrift — geometrik, ağır,
 *      Windows'ta kurulu) başlık ve sayılar için, `--g` (Segoe UI)
 *      gövde metni için. Fark AĞIRLIKTAN geliyor.
 *
 *   2. HER ŞEYE KONTUR. 3-4 piksellik siyah çevre 60 pikselde iyi
 *      duruyor, 13 pikselde harfleri koyu bir yumak yapıyor. Kontur
 *      artık yalnız SAHNENİN ÜSTÜNDE duran iri yazılarda (sayaç,
 *      banner, bildirim, isim etiketi) ve orada da inceltilmiş.
 *      Panel içindeki metin zaten kendi zeminini taşıyor.
 *
 *   3. OPAK PANELLER. Arkadaki üç boyutlu sahne tamamen kayboluyordu.
 *      Paneller artık `backdrop-filter: blur()` ile saydam: oyun
 *      arkada görünmeye devam ediyor, panel "oyunun üstünde bir cam"
 *      oluyor.
 *
 * Düğmeler TOMBUL DÜZ: degrade yok, kontur yok; hacim `inset 0 -5px 0`
 * ile alt kenara konan tek kademe koyu dudaktan geliyor. Basılınca
 * dudak yutuluyor. (Uygulanmış hâli: ragdoll-rumble.)
 *
 * Palet gece sokağı + neon; hazır kütüphane varsayılanlarından
 * (#3b82f6 / #22c55e) kasıtla uzak. Aynı değerler `js/simge.js`
 * içinde de var — canvas CSS değişkeni okuyamadığı için ikisi elle
 * eşleniyor. Birini değiştiren ötekini de değiştirmeli.
 *
 * Yazı tipi ağı sistem yazı tiplerinden kuruluyor: oyun çevrimdışı,
 * `file://` üzerinden ve portal iframe'inde çalışacak; dışarıdan yazı
 * tipi çekmek bu üç yerin ikisinde başarısız oluyor.
 */

:root {
  /* İKİ AİLE. Bahnschrift Windows 10'dan beri kurulu geliyor ve
     mobil oyun tipografisine en yakın sistem yazı tipi. Yoksa
     "Segoe UI Semibold"e, o da yoksa Trebuchet'ye düşüyor. */
  --d: Bahnschrift, 'Segoe UI Semibold', 'Segoe UI', 'Trebuchet MS', sans-serif;
  --g: 'Segoe UI', 'Trebuchet MS', Tahoma, Verdana, sans-serif;
  --yazi: var(--g);

  --murekkep: #0b0f16;
  --zemin: #10141c;
  --panel: rgba(15, 20, 29, .74);
  --panel-ic: rgba(255, 255, 255, .045);
  --hat: rgba(133, 156, 194, .18);
  --hat-parlak: rgba(133, 156, 194, .34);
  --metin: #eef2f8;
  --sonuk: #93a1b8;

  --nane: #35e0a1;   --nane-k: #12a172;
  --pembe: #ff3d8b;  --pembe-k: #b81f5f;
  --altin: #ffc23d;  --altin-k: #c1830f;
  --gok: #47d8ff;    --gok-k: #1585ad;
  --mor: #9b6cff;    --mor-k: #5f36c0;
  --kirmizi: #ff4d4d; --kirmizi-k: #b62727;
  --turuncu: #ff7a1a;
  --duman: #5b6880;

  /* eski adlar — henüz dokunulmamış bölümler bunları kullanıyor */
  --kontur: 2.4px;
  --panel-kenar: var(--hat);
  --yesil1: var(--nane); --yesil2: var(--nane-k);
  --kirmizi1: var(--kirmizi); --kirmizi2: var(--kirmizi-k);
  --mavi1: var(--gok); --mavi2: var(--gok-k);
  --mor1: var(--mor); --mor2: var(--mor-k);

  --r: 14px;
  --dudak: 5px;
}

/* İKONLAR. `js/simge.js` canvas'ta çiziyor, buraya arka plan olarak
   basılıyor. Boyut `data-simge-boy` ile eşlenmeli, yoksa bitmap ya
   bulanık ya gereksiz büyük olur. */
[data-simge] {
  display: inline-block; flex: none;
  background: 50% 50% / contain no-repeat;
  width: 1.6em; height: 1.6em;
  font-style: normal;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* `hidden` özniteliği HER ZAMAN kazanmalı — bu satır olmadan oyun açılmıyor.
 *
 * Tarayıcı `[hidden]` için `display:none` veriyor ama bu kural UA
 * stil sayfasından geliyor ve en zayıf öncelikte. Aşağıda `#kasa-perde`
 * ya da `.pencere` gibi bir seçiciye `display: grid/flex` yazmak onu
 * eziyor: eleman `hidden` olmasına rağmen ekranda duruyor.
 *
 * Yaşanan hâli: oyun açılır açılmaz bütün paneller, oylama ekranı,
 * kazanç dökümü ve kasa açılışı üst üste görünüyordu; en yüksek
 * z-index'te kasa olduğu için oyun "Temel Kutu ekranında takılı"
 * gibi duruyordu. Kod tarafında her şey doğruydu (`p.hidden === true`),
 * hata tamamen CSS'teydi — bu yüzden DOM'a bakarak değil EKRANA
 * bakarak test et.
 */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--zemin);
  font-family: var(--g);
  color: var(--metin);
  user-select: none;
  touch-action: none;
}

#tuval { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* SAHNE ÜSTÜ YAZI. Konturu yalnız burası taşıyor: üç boyutlu görüntü
   arkada her renkte olabiliyor ve konturusuz beyaz yazı açık zeminde
   kayboluyor. `paint-order` olmadan kontur harfin İÇİNE taşıyor ve
   ince puntoda harfleri kapatıyor. */
.kntr {
  -webkit-text-stroke: var(--kontur) var(--murekkep);
  paint-order: stroke fill;
}

/* ══════════════════ YÜKLEME ══════════════════ */
/*
 * TAM EKRAN ANAHTAR GÖRSEL. Logo ve alt yazı yok — sahibinin kararı.
 *
 * `cover`: görsel 2:1, ekranlar 16:9'dan 21:9'a kadar. `contain`
 * kenarlarda boş şerit bırakıyor, `100% 100%` arabayı eziyor.
 * Odak noktası yeşil araba, o da sağ altta duruyor; hizalama
 * `50% 60%` ile ona kayıyor, 16:9'da tepedeki gökyüzü kırpılıyor.
 *
 * Altta koyu bir geçiş var: ilerleme çubuğu parlak asfaltın üstünde
 * kayboluyordu.
 */
#yukleme {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: #0b0f16 url('../gorseller/yukleme.webp') 50% 60% / cover no-repeat;
  transition: opacity .45s ease;
}
#yukleme::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(180deg, transparent, rgba(6, 9, 14, .82));
  pointer-events: none;
}
#yukleme.gizli { opacity: 0; pointer-events: none; }

.yk-cubuk {
  position: relative; z-index: 1;
  margin: 0 auto 22px; width: min(76vw, 560px);
  height: 12px; border-radius: 7px;
  background: rgba(4, 7, 12, .55);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18);
  overflow: hidden;
}
.yk-cubuk i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gok), var(--nane));
  transition: width .25s ease;
}
/* Yalnız HATA yazılıyor; boşken hiç yer kaplamıyor. */
.yk-yazi {
  position: relative; z-index: 1;
  margin: 0 0 18px; text-align: center;
  font-size: 13px; color: #ffd0d0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
}
.yk-yazi:empty { display: none; }


/* ══════════════════ HUD ══════════════════ */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 40; }

/* — üst orta: sayaç + takımlar — */
#ust-orta {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  display: flex; align-items: flex-start; gap: 16px;
}
.takim-sira {
  display: flex; flex-wrap: wrap; gap: 7px; width: 180px;
  justify-content: center; padding-top: 12px;
}
#takim-sol { justify-content: flex-end; }
#takim-sag { justify-content: flex-start; }

/*
 * OYUNCU ROZETİ — armalı.
 *
 * Yüz olarak emoji kullanılıyordu; on emoji vardı ve hepsi aynı sarı
 * yuvarlaktı, 50 pikselde kimin kim olduğu ayırt edilemiyordu. Şimdi
 * `js/simge.js` addan renk + baş harf üretiyor (bkz. `arma`).
 * Halka NÖTR kalıyor; takımsız turda kırmızı/mavi halka olmayan bir
 * takım varmış gibi gösteriyordu.
 */
/*
 * ROZET — KARE ve içinde aracın kendisi.
 *
 * Yuvarlak + baş harfti; ondan önce emoji surattı. İkisi de yanlış
 * soruyu yanıtlıyordu: tur sırasında oyuncunun bakışı "kim" değil
 * "HANGİ ARABA" — kaçarken gördüğü aracı üstteki şeritle eşleştiriyor.
 *
 * Kimlik HALKADAN geliyor. Takımlı turda halka takım rengi; takımsızda
 * oyuncunun addan türeyen rengi, böylece aynı arabayı süren iki sürücü
 * de ayırt ediliyor.
 */
.rozet {
  width: 48px; height: 48px; border-radius: 11px;
  background: rgba(10, 14, 21, .72);
  box-shadow: 0 0 0 3px var(--halka, rgba(12, 16, 24, .85));
  position: relative; overflow: visible;
  display: grid; place-items: center;
}
.rozet canvas { width: 100%; height: 100%; display: block; border-radius: 9px; }
.rozet.mavi { box-shadow: 0 0 0 3px var(--gok); }
.rozet.kirmizi { box-shadow: 0 0 0 3px var(--kirmizi); }
.rozet.olu { filter: grayscale(1) brightness(.5); }
.rozet.olu::after {
  content: ''; position: absolute; inset: 12px;
  background:
    linear-gradient(45deg, transparent 43%, var(--kirmizi) 43%, var(--kirmizi) 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--kirmizi) 43%, var(--kirmizi) 57%, transparent 57%);
}
.rozet.bombali { box-shadow: 0 0 0 3px var(--pembe), 0 0 18px 3px rgba(255, 61, 139, .55); }
.rozet .bmb {
  position: absolute; right: -7px; bottom: -7px;
  width: 24px; height: 24px;
  background: 50%/contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7));
  animation: bmb-nabiz .7s infinite;
}
@keyframes bmb-nabiz { 0%,100% { transform: scale(1); } 50% { transform: scale(1.16); } }

/*
 * SAYAÇ. Üst kenardan sarkan tek parça.
 *
 * Başlık ve sayı ayrı ailelerden: başlık gövde yazısıyla küçük ve
 * harf aralıklı, sayı display ailesiyle iri. İkisi aynı aileden
 * olunca sayaç "iki satır yazı" gibi duruyordu.
 */
#sayac-kutu {
  min-width: 236px; text-align: center;
  /* Sayaç HUD'un en yüksek okunurluk gerektiren parçası ve arkasında
     her şey olabiliyor (gece şehri, açık kum, gökyüzü). Panelin geri
     kalanından daha opak. */
  background: rgba(11, 15, 22, .88);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-radius: 0 0 18px 18px;
  border-top: 3px solid var(--nane);
  padding: 6px 30px 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
  transition: border-color .3s ease;
}
#sayac-baslik {
  font-family: var(--g); font-size: 12px; font-weight: 700;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--sonuk);
}
#sayac {
  font-family: var(--d); font-size: 44px; font-weight: 700;
  line-height: 1; letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
#sayac-kutu.acil { border-top-color: var(--kirmizi); }
#sayac.acil { color: var(--kirmizi); animation: nabiz .5s infinite; }
@keyframes nabiz { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* — bildirim akışı — */
#bildirim {
  position: absolute; top: 116px; left: 50%; transform: translateX(-50%);
  width: min(88vw, 700px); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.bldr {
  font-family: var(--d); font-size: 19px; font-weight: 700;
  padding: 2px 14px; border-radius: 999px;
  background: rgba(11, 15, 22, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  -webkit-text-stroke: 2px var(--murekkep); paint-order: stroke fill;
  animation: bldr-gir .25s ease;
  max-width: 100%;
}
.bldr .ad1 { color: var(--gok); }
.bldr .ad2 { color: var(--pembe); }
.bldr.patla { color: var(--turuncu); }
.bldr.bilgi { color: var(--altin); }
@keyframes bldr-gir { from { opacity: 0; transform: translateY(-8px); } }

/*
 * KİP ADI. Bildirimlerin altında, küçük.
 *
 * Eskiden 214 pikselde duruyordu ve orası tam olarak oyuncu isim
 * etiketlerinin bulunduğu bant: yazı isimlerin üstüne biniyordu.
 * Yukarı, bildirim akışının hemen dibine alındı.
 */
/* Sayaç kutusu 78 piksel; kip adı onun ALTINDAN başlıyor, yoksa
   yazı kutunun dibine biniyor. */
#mod-adi {
  position: absolute; top: 86px; left: 50%; transform: translateX(-50%);
  font-family: var(--g); font-size: 11px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: var(--sonuk);
  background: rgba(11, 15, 22, .5); backdrop-filter: blur(6px);
  padding: 3px 16px; border-radius: 999px;
}
#mod-adi:empty { display: none; }

/* — seri (üst üste kazanma) — */
#seri-kutu {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px; padding: 4px 12px 4px 8px;
  font-family: var(--d); font-size: 20px; font-weight: 700; color: var(--turuncu);
}
#seri-ates { width: 20px; height: 20px; }

/* — ipucu — */
#ipucu {
  position: absolute; top: 232px; left: 50%; transform: translateX(-50%);
  font-family: var(--d); font-size: 23px; font-weight: 700; text-align: center;
  -webkit-text-stroke: 3px var(--murekkep); paint-order: stroke fill;
  opacity: 0; transition: opacity .4s ease;
  width: min(90vw, 860px);
}
#ipucu.gorunur { opacity: 1; }
/* Panel açıkken sahne üstü yazılar susuyor: paneller saydam olduğu
   için ipucu ve sohbet satırları panelin İÇİNDEN okunuyor, iki metin
   üst üste biniyordu. */
body.panel-acik #ipucu, body.panel-acik #sohbet, body.panel-acik #bildirim {
  display: none;
}

/* — tur sonucu — */
#banner {
  position: absolute; top: 32%; left: 50%; transform: translateX(-50%);
  font-family: var(--d); font-size: clamp(34px, 6vw, 70px); font-weight: 700;
  text-align: center; letter-spacing: 1px;
  -webkit-text-stroke: 5px var(--murekkep); paint-order: stroke fill;
  animation: banner-gir .5s cubic-bezier(.2, 1.6, .4, 1);
  white-space: nowrap;
  display: flex; align-items: center; gap: 14px;
}
#banner i { width: .8em; height: .8em; -webkit-text-stroke: 0; }
@keyframes banner-gir { from { transform: translateX(-50%) scale(.5); opacity: 0; } }

/* — sağ üst — */
#ust-sag {
  position: absolute; top: 12px; right: 14px; text-align: right;
  display: flex; flex-direction: column; gap: 7px; align-items: flex-end;
  pointer-events: auto;
}
#elmas-kutu, #para-kutu {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px; padding: 5px 14px 5px 10px;
  font-family: var(--d); font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* PARA SAYISI PARANIN RENGİNDE. Beyaz yazılınca değer "arayüz metni"
   gibi okunuyor, para gibi değil. */
#elmas-kutu { color: var(--gok); }
#para-kutu { color: var(--altin); }
.sim-elmas, .sim-para { width: 22px; height: 22px; flex: none;
  background: 50%/contain no-repeat; }
#efekt-kutu {
  background: var(--panel); backdrop-filter: blur(12px);
  border-radius: 11px; padding: 4px 12px; text-align: right;
}
#efekt-kutu small { display: block; font-size: 10px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--sonuk); }
#efekt-kutu span { font-family: var(--d); font-size: 16px; font-weight: 700;
  color: var(--nane); }

/* — çevrimiçi rozeti — */
#ag-rozet {
  position: absolute; top: 12px; left: 14px;
  background: var(--panel); backdrop-filter: blur(12px);
  border-radius: 11px; padding: 4px 12px;
  font-size: 12px; letter-spacing: 1.4px; color: var(--sonuk);
}
#ag-rozet b { font-family: var(--d); font-size: 15px; color: var(--metin); }
#ag-rozet i { font-style: normal; color: var(--nane); }

/* — sol alt: tuş yardımı — */
/*
 * TUŞ YARDIMI. Kendi zemini var.
 *
 * Zeminsizken sol alt köşe haritaya göre değişiyordu: çöl pistinde
 * açık kum, şehirde koyu asfalt. Açık zeminde soluk gri yazı hiç
 * okunmuyordu. Panelin kendi zemini olması, HUD'un geri kalanıyla da
 * aynı dili konuşmasını sağlıyor.
 */
#alt-sol {
  position: absolute; left: 14px; bottom: 14px; font-size: 12px;
  color: var(--sonuk);
  background: var(--panel); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px; padding: 8px 12px;
}
.tus-satir { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
kbd {
  background: rgba(255, 255, 255, .10); color: var(--metin);
  border-radius: 5px; padding: 2px 7px; font-family: var(--d);
  font-size: 11px; font-weight: 700; min-width: 22px; text-align: center;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .35);
}
#ping { margin-top: 8px; color: var(--altin); font-family: var(--d);
  font-weight: 700; font-size: 15px; }


/* ══════════════════ DÜĞMELER ══════════════════ */
/*
 * TOMBUL DÜZ. Degrade ve kontur yok; hacim tek kademe koyu bir alt
 * dudaktan geliyor (`inset 0 -5px 0`). Basılınca dudak yutuluyor —
 * dokunuşun karşılığı budur, ayrı bir gölge oynatmaya gerek yok.
 *
 * Yazı KOYU, beyaz değil: nane ve altın üstünde beyaz yazının
 * karşıtlığı 2:1 civarında kalıyor ve küçük puntoda okunmuyor.
 */
.yesil-dugme, .kirmizi-dugme, .mavi-dugme, .altin-dugme {
  pointer-events: auto; cursor: pointer;
  font-family: var(--d); font-weight: 700; letter-spacing: .6px;
  border: 0; border-radius: 12px;
  padding: 10px 28px; font-size: 22px;
  box-shadow: inset 0 calc(-1 * var(--dudak)) 0 rgba(0, 0, 0, .3);
  transition: filter .12s ease;
}
.yesil-dugme { background: var(--nane); color: #05261a; }
.mavi-dugme { background: var(--gok); color: #04222e; }
.altin-dugme { background: var(--altin); color: #2c1d00; }
.kirmizi-dugme { background: var(--kirmizi); color: #2e0505; }
.yesil-dugme:hover, .mavi-dugme:hover, .kirmizi-dugme:hover,
.altin-dugme:hover { filter: brightness(1.08); }
.yesil-dugme:active, .kirmizi-dugme:active, .mavi-dugme:active,
.altin-dugme:active {
  transform: translateY(3px);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3);
}
.yesil-dugme:disabled, .mavi-dugme:disabled, .altin-dugme:disabled,
.kirmizi-dugme:disabled {
  background: #39424f; color: #7f8b9c; cursor: default;
  box-shadow: inset 0 calc(-1 * var(--dudak)) 0 rgba(0, 0, 0, .25);
}
.kucuk { font-size: 16px; padding: 7px 18px; --dudak: 4px; }


/* ══════════════════ LOBİ ══════════════════ */
#lobi-arayuz { position: absolute; inset: 0; pointer-events: none; }
#lobi-orta {
  /* ŞERİDİN ÜSTÜNDE KALMALI.
     Menü şeridi `bottom: 12px` ve 98 px yüksek, yani üst kenarı alttan
     110 px. `bottom: 104` kart sırasını şeridin 6 piksel İÇİNE
     sokuyordu (800x600'de ölçüldü) — portal incelemesinin ekran
     görüntüsüne takılan türden bir binişme. */
  position: absolute; bottom: 118px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: stretch; gap: 12px; pointer-events: auto;
}
#lobi-orta #para-kutu {
  font-size: 36px; padding: 6px 30px; min-width: 200px; justify-content: center;
}
#lobi-orta #para-kutu .sim-para { width: 30px; height: 30px; }

/*
 * +500 ÖDÜLLÜ REKLAM.
 *
 * Para kutusunun ALTINA yapışık duruyor, ayrı bir düğme gibi degil:
 * "bu sayiyi artir" iliskisini yerlesim anlatiyor. Sirit `#lobi-orta`
 * icinde dikey bir sutuna donuyor.
 */
#lobi-orta { align-items: flex-start; }
.lobi-para-sutun { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
#para-500 {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 3px 12px; font-size: 16px; border-radius: 10px;
  animation: p500-nabiz 2.4s ease-in-out infinite;
}
#para-500 i { width: 16px; height: 16px; background: 50%/contain no-repeat; }
#para-500 b { font-family: var(--d); font-weight: 700; }
#para-500:disabled { filter: grayscale(.6) brightness(.8); animation: none; }
@keyframes p500-nabiz {
  0%, 72%, 100% { transform: scale(1); }
  80% { transform: scale(1.06); }
  88% { transform: scale(.99); }
}
@media (prefers-reduced-motion: reduce) { #para-500 { animation: none; } }

/*
 * BEDAVA KUTU ve ETKİNLİK kartı.
 *
 * Kart yüzü bir tuval (arabanın önizlemesi); yazı altta oturuyor.
 * Kalın siyah kontur kaldırıldı: kart zaten koyu zemin üstünde koyu
 * bir dikdörtgen, çevresine kontur koymak onu bir yumağa çeviriyordu.
 * Ayrım artık üstteki renkli şeritten ve alt dudaktan geliyor.
 */
.bedava, .etkinlik {
  cursor: pointer; border: 0; border-radius: 12px;
  background: var(--panel); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0; overflow: hidden; width: 150px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .35);
  border-top: 3px solid var(--nane);
  font-family: var(--g); color: var(--metin);
  display: flex; flex-direction: column;
}
.etkinlik { border-top-color: var(--altin); }
/* BEDAVA ARAÇ, ÖDÜLLÜ REKLAMLA AÇILABİLİR DURUMDA.
   Sayaç işlerken kart sönük duruyordu; oyuncu orada bir şey
   yapabileceğini anlamıyordu. Video rengi (gök) ve hafif bir nabız,
   dokunuşun reklam başlatacağını önceden söylüyor. */
.bedava.reklamli { border-top-color: var(--gok); }
.bedava.reklamli .bedava-yazi { color: var(--gok); font-size: 11px; }
@media (prefers-reduced-motion: no-preference) {
  .bedava.reklamli { animation: bedava-nabiz 2.2s ease-in-out infinite; }
}
@keyframes bedava-nabiz {
  0%, 100% { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .35); }
  50% { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .35), 0 0 0 3px rgba(71, 216, 255, .35); }
}
.bedava:active, .etkinlik:active { transform: translateY(3px); }
.bedava-resim, .etkinlik-resim { display: block; line-height: 0; }
.bedava-resim canvas, .etkinlik-resim canvas { width: 100%; height: auto; display: block; }
.bedava-yazi, .etkinlik-yazi {
  padding: 4px 6px 6px; font-family: var(--d); font-size: 13px; font-weight: 700;
  letter-spacing: .4px; color: var(--nane); margin-top: auto;
}
.etkinlik-yazi { color: var(--altin); font-size: 20px; line-height: 1.05; }
.etkinlik-yazi small {
  display: block; font-family: var(--g); font-size: 9px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--sonuk);
}

/*
 * ALT ŞERİT.
 *
 * Eski hâlde altı düğmenin altısı ayrı renkteydi (yeşil, magenta,
 * beyaz, gökkuşağı degrade, beyaz, yeşil) ve hepsi yamuk kırpılmıştı.
 * Sonuç bir "menü" değil, altı ayrı reklam panosuydu; sahibi
 * "butonlar olmamış" dedi.
 *
 * Şimdi hepsi AYNI kart: aynı zemin, aynı ölçü, aynı yazı. Ayrım tek
 * bir yerden geliyor — üstteki 3 piksellik renkli şerit ve ikonun
 * rengi. Vurgulanmak istenen tek düğme (Mağaza) dolu zemin alıyor.
 */
#lobi-dugmeler {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; pointer-events: auto;
}
.lobi-dugme {
  position: relative; cursor: pointer; width: 138px;
  padding: 9px 6px 8px; border: 0; border-radius: 12px;
  background: var(--panel); backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-top: 3px solid var(--hat-parlak);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .35);
  font-family: var(--g); color: var(--metin); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: transform .08s ease, filter .12s ease;
}
.lobi-dugme:hover { filter: brightness(1.18); }
.lobi-dugme:active { transform: translateY(3px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.35); }
/* İkon 30'dan 38'e çıktı. Referansta ikon düğmeyi TAŞIYOR (yüksekliğin
   yarısından fazlası); 30 pikselde gerçek 3B ikonun hacmi kayboluyor ve
   düğme yine yazıdan ibaret duruyor. */
.lobi-dugme i { width: 38px; height: 38px; }
.lobi-dugme b {
  display: block; font-family: var(--d); font-size: 18px; font-weight: 700;
  letter-spacing: .3px; line-height: 1;
}
.lobi-dugme small {
  display: block; font-size: 9px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--sonuk); line-height: 1.2;
}
.d-garaj { border-top-color: var(--nane); }
.d-odul { border-top-color: var(--pembe); }
.d-ayar { border-top-color: var(--duman); }
.d-ozel { border-top-color: var(--altin); }
.d-seyirci { border-top-color: var(--gok); }
/* Mağaza tek vurgulu düğme: satın alma akışının girişi. */
.d-magaza {
  background: var(--altin); color: #2c1d00;
  border-top-color: #ffe1a0;
}
.d-magaza small { color: rgba(44, 29, 0, .62); }

.uyari {
  position: absolute; top: -7px; right: 8px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--pembe);
  display: grid; place-items: center; font-style: normal;
  font-family: var(--d); font-weight: 700; font-size: 14px; color: #fff;
  box-shadow: 0 0 0 2px rgba(11, 15, 22, .8);
}

/* ÇIKIŞ. Sağ altta, sessiz. */
#cikis-kutu { position: absolute; right: 14px; bottom: 14px; pointer-events: auto; }


/* ══════════════════ OYLAMA ══════════════════ */
#oylama {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
}
#oylama-baslik {
  font-family: var(--g); font-size: 12px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; text-align: center; color: var(--sonuk);
  -webkit-text-stroke: 2px var(--murekkep); paint-order: stroke fill;
}
#oylama-baslik span {
  display: block; font-family: var(--d); font-size: 46px; letter-spacing: 0;
  color: var(--metin); -webkit-text-stroke: 4px var(--murekkep); paint-order: stroke fill;
}
#oylama-kartlar {
  display: flex; gap: 10px; pointer-events: auto; flex-wrap: wrap;
  justify-content: center;
}
/*
 * BÖLÜM KARTI. Görsel kartın TAMAMI; başlık ve açıklama onun üstüne
 * biniyor. Küçük bir önizleme + altında yazı düzeni denendi ve dört
 * kart yan yana gelince görselin kendisi 132 piksele düşüp haritayı
 * anlatmaz oluyordu.
 */
.oy-kart {
  width: 330px; border: 0; border-radius: 14px; overflow: hidden;
  background: rgba(13, 17, 25, .9);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  position: relative; transition: transform .12s ease;
}
.oy-kart:hover { transform: translateY(-3px); }
.oy-kart h4 {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  margin: 0; padding: 10px 12px 26px;
  font-family: var(--d); font-size: 23px; font-weight: 700; text-align: left;
  -webkit-text-stroke: 3px var(--murekkep); paint-order: stroke fill;
  background: linear-gradient(180deg, rgba(6, 9, 14, .8), transparent);
}
.oy-gorsel { position: relative; aspect-ratio: 16 / 9; background: #0d1119; }
.oy-gorsel img, .oy-gorsel canvas {
  width: 100%; height: 100%; display: block; object-fit: cover;
}
.oy-aciklama {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 28px 12px 46px; font-size: 12px; line-height: 1.4; color: #cfd8e6;
  background: linear-gradient(0deg, rgba(6, 9, 14, .9) 42%, transparent);
}
.oy-oy { position: absolute; inset: auto 0 10px 0; z-index: 3;
  display: flex; justify-content: center; }
.oy-sayi {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  background: rgba(6, 9, 14, .78); border-radius: 999px; padding: 2px 12px;
  font-family: var(--d); font-weight: 700; font-size: 17px; color: var(--altin);
}
#oylama-kapat { pointer-events: auto; }


/* ══════════════════ PANELLER ══════════════════ */
#perde {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4, 6, 10, .55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}

/*
 * PENCERE. Oyunun üstünde duran bir cam.
 *
 * Eskiden opak koyu bir kutuydu ve açıldığında arkadaki üç boyutlu
 * sahne tamamen kayboluyordu: panel "oyunun içinde" değil "oyunun
 * yerine" duruyordu. `backdrop-filter` ile sahne arkada okunmaya
 * devam ediyor.
 */
.pencere {
  position: fixed; z-index: 110;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(94vw, 760px); max-height: 86vh;
  background: rgba(12, 16, 24, .90);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 0; border-top: 3px solid var(--nane);
  border-radius: 18px; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  animation: pencere-gir .18s ease;
  overflow: hidden;
}
.pencere.genis { width: min(96vw, 1060px); }
#p-magaza { border-top-color: var(--altin); }
#p-oduller { border-top-color: var(--pembe); }
#p-ayar { border-top-color: var(--duman); }
#p-ozel { border-top-color: var(--gok); }
@keyframes pencere-gir { from { transform: translate(-50%,-50%) scale(.94); opacity: 0; } }

.pencere header {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 14px 66px 12px 20px;
  border-bottom: 1px solid var(--hat);
}
.pencere header i { width: 32px; height: 32px; }
.pencere header h2 {
  margin: 0; font-family: var(--d); font-size: 30px; font-weight: 700;
  letter-spacing: .5px;
}

/*
 * KAPAT. Panelin İÇİNDE, sağ üstte.
 *
 * Eskiden `top:-14px; right:-10px` ile dışarı taşıyordu: iri kırmızı
 * bir kare panelin köşesinden sarkıyor ve ekran görüntüsünde panele
 * ait olmayan ayrı bir nesne gibi duruyordu.
 */
.kapat {
  position: absolute; top: 12px; right: 14px; width: 38px; height: 38px;
  cursor: pointer; border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .07) 50%/16px no-repeat;
  transition: background-color .12s ease;
  font-size: 0;
}
.kapat:hover { background-color: var(--kirmizi); }
.kapat:active { transform: translateY(2px); }

/* Yatay kaydırma KAPALI: içerik birkaç piksel taşınca panelin dibinde
   bir kaydırma çubuğu beliriyor ve pencere bozuk görünüyordu. */
.govde { padding: 14px 20px 20px; overflow-y: auto; overflow-x: hidden; }
.govde::-webkit-scrollbar, .izgara::-webkit-scrollbar { width: 10px; height: 10px; }
.govde::-webkit-scrollbar-thumb, .izgara::-webkit-scrollbar-thumb {
  background: var(--hat-parlak); border-radius: 6px;
}
.govde::-webkit-scrollbar-track, .izgara::-webkit-scrollbar-track { background: transparent; }

.alt-baslik {
  margin: 4px 0 8px; text-align: center;
  font-family: var(--d); font-size: 22px; font-weight: 700; color: var(--altin);
  letter-spacing: .5px;
}
.ust-bosluk { margin-top: 22px; }
.alt-baslik small {
  display: block; font-family: var(--g); font-size: 11px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--sonuk);
}
.sifirlama { text-align: center; font-size: 12px; color: var(--sonuk); margin-bottom: 14px; }
.sifirlama b { font-family: var(--d); color: var(--metin); }

/* — oynama süresi şeridi — */
#oynama-serit { position: relative; padding: 6px 0 12px; }
.os-hat {
  display: flex; align-items: stretch; height: 30px; border-radius: 9px;
  overflow: hidden; background: rgba(255, 255, 255, .05); margin: 8px 0;
}
.os-hat > div {
  flex: 1; display: grid; place-items: center;
  font-family: var(--d); font-size: 14px; font-weight: 700;
  color: var(--sonuk);
  border-right: 1px solid rgba(0, 0, 0, .35);
}
.os-hat > div:last-child { border-right: 0; }
.os-hat .hazir { background: var(--gok); color: #04222e; }
.os-hat .alindi { background: rgba(255, 255, 255, .04); color: #5f6b7d; }
.os-satir { display: flex; }
.os-satir > * { flex: 1; display: flex; justify-content: center; }
.os-kutu {
  width: 96px; border-radius: 12px; background: var(--panel-ic);
  padding: 10px 8px; text-align: center; cursor: default; position: relative;
  border-top: 2px solid var(--hat);
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.os-kutu.tiklanir { cursor: pointer; border-top-color: var(--gok);
  box-shadow: 0 0 20px rgba(71, 216, 255, .30); }
.os-kutu.pasif { opacity: .35; }
.os-kutu .etiket {
  display: block; font-family: var(--d); font-size: 14px; font-weight: 700;
  color: var(--altin);
}
.os-kutu canvas { width: 100%; height: auto; display: block; border-radius: 8px; }
.os-madeni { width: 52px; height: 52px; margin: 0 auto; background: 50%/contain no-repeat; }

/* — günlük — */
#gunluk-serit { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.gun-kutu {
  width: 92px; border-radius: 12px; background: var(--panel-ic);
  border-top: 2px solid var(--hat); padding: 8px 6px; text-align: center;
}
/* Tuval 150x84 üretiliyor; kutu 92 piksel. Genişlik sınırlanmazsa
   ödül resmi kutunun dışına taşıyor ve alttaki satıra biniyor. */
.gun-kutu canvas, .os-kutu canvas { width: 100%; height: auto; display: block; }
.gun-kutu.bugun { border-top-color: var(--altin); box-shadow: 0 0 20px rgba(255,194,61,.25); }
.gun-kutu.alindi { opacity: .35; }
.gun-kutu b {
  display: block; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--sonuk); font-weight: 700;
}
.gun-kutu span {
  display: block; font-family: var(--d); font-size: 13px; font-weight: 700;
  margin-top: 5px; color: var(--altin);
}

/* — görevler — */
#gorev-liste { display: flex; flex-direction: column; gap: 6px; }
.gorev {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px;
  background: var(--panel-ic); border-radius: 12px;
}
.gorev .bilgi { flex: 1; min-width: 0; }
.gorev b { display: block; font-family: var(--d); font-size: 16px; font-weight: 700; }
.gorev small { display: block; color: var(--sonuk); font-size: 12px; margin-bottom: 6px; }
.cubuk { height: 8px; background: rgba(0, 0, 0, .4); border-radius: 5px; overflow: hidden; }
.cubuk i { display: block; height: 100%; background: var(--nane); }
.gorev .odul {
  text-align: right; min-width: 92px; font-family: var(--d); font-weight: 700;
  color: var(--altin);
}

/* — rozetler — */
#rozet-serit {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 6px;
}
.rozet-kart {
  background: var(--panel-ic); border-radius: 12px;
  padding: 10px; text-align: center; opacity: .38;
}
.rozet-kart.alindi { opacity: 1; box-shadow: inset 0 0 0 1px var(--altin); }
.rozet-kart i { width: 30px; height: 30px; margin: 0 auto 4px; display: block; }
.rozet-kart b { display: block; font-family: var(--d); font-size: 14px; }
.rozet-kart small { display: block; font-size: 11px; color: var(--sonuk); line-height: 1.3; }

.kzn-rozet {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 8px 12px; border-radius: 10px;
  background: rgba(255, 194, 61, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 194, 61, .45);
  font-family: var(--d); font-size: 15px; font-weight: 700; color: var(--altin);
}


/* ══════════════════ ENVANTER ══════════════════ */
.envanter-govde { display: flex; gap: 16px; min-width: 0; }
.envanter-govde .sol { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.envanter-govde .sag {
  width: 286px; flex: none; background: var(--panel-ic);
  border-radius: 14px; padding: 14px; text-align: center;
  display: flex; flex-direction: column; gap: 10px;
}

.sekmeler { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.sekme {
  cursor: pointer; font-family: var(--d); font-weight: 700; font-size: 15px;
  color: var(--sonuk); background: var(--panel-ic); border: 0; border-radius: 10px;
  padding: 7px 14px; display: flex; align-items: center; gap: 7px;
  transition: color .12s ease, background-color .12s ease;
}
/* 18 -> 22. Gerçek 3B ikonlar 18 pikselde okunmuyor; araba ile korna
   birbirinden ayırt edilemiyordu. */
.sekme i { width: 22px; height: 22px; }
.sekme:hover { color: var(--metin); }
.sekme.secili { background: var(--metin); color: #0d1119; }

.ara {
  width: 100%; margin-bottom: 10px; padding: 9px 14px; border-radius: 10px;
  border: 0; background: rgba(0, 0, 0, .32); color: var(--metin);
  font-family: var(--g); font-size: 14px;
  box-shadow: inset 0 0 0 1px var(--hat);
}
.ara::placeholder { color: var(--duman); }
.ara:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--nane); }

/*
 * VİTRİN. Kartlar BİTİŞİK.
 *
 * 10 piksel boşluklu ızgara bir "liste" gibi okunuyordu; oyun
 * vitrininde kartlar birbirine değer ve blok hâlinde bir duvar
 * oluşturur. Boşluk 2 piksele indi, kart köşeleri küçüldü.
 */
.izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 3px; overflow: auto; max-height: 52vh; padding: 1px;
}
/* `color` AÇIKÇA VERİLİYOR. Kart bir `<button>`; tarayıcının kendi
   üslubunda düğme metni SİYAH ve `body`den miras almıyor. Araç
   adları koyu kartın üstünde siyah çıkıyor ve hiç okunmuyordu. */
.kart {
  color: var(--metin);
  position: relative; cursor: pointer; border: 0; border-radius: 8px;
  padding: 4px; text-align: center; aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; background: var(--panel-ic);
  transition: transform .1s ease;
}
.kart::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--nadir, var(--hat-parlak));
}
.kart:hover { transform: translateY(-2px); }
.kart canvas {
  position: absolute; inset: 8px 4px 24px; width: calc(100% - 8px);
  height: auto; margin: auto;
}
/* Kart adı: ARKA PLANI OLAN bir şerit. Eskiden koyu araba resminin
   üstünde konturlu koyu yazıydı ve okunmuyordu. */
.kart span {
  position: relative; font-family: var(--d); font-size: 12px; font-weight: 700;
  line-height: 1.1; padding: 3px 4px; border-radius: 6px;
  background: rgba(8, 11, 17, .78);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* KİLİTLİ KART: yalnız GÖRSELİ soluyor, adı değil. Kartın tamamını
   soldurmak ismi de okunmaz yapıyordu — oyuncu neyin kilitli
   olduğunu görüyor ama ne olduğunu göremiyordu. */
.kart.kilitli canvas { opacity: .42; filter: grayscale(.55); }
.kart.kilitli span { color: var(--sonuk); }
.kart.takili { box-shadow: inset 0 0 0 2px var(--nane); }
.kart.takili::after {
  content: ''; position: absolute; right: 5px; bottom: 24px;
  width: 16px; height: 16px;
  background: var(--onay) 50%/contain no-repeat;
}
.kart .rozet-fiyat {
  position: absolute; top: 6px; left: 4px; background: rgba(8, 11, 17, .8);
  border-radius: 6px; padding: 1px 6px; font-family: var(--d);
  font-size: 11px; font-weight: 700; color: var(--altin);
}
.kart .rozet-kilit {
  position: absolute; top: 6px; right: 4px; width: 15px; height: 15px;
  background: 50%/contain no-repeat; font-size: 0;
}

.detay-ad {
  font-family: var(--d); font-size: 21px; font-weight: 700; color: var(--metin);
  line-height: 1.1;
}
.detay-onizleme { background: rgba(0, 0, 0, .3); border-radius: 12px; padding: 6px; }
.detay-onizleme canvas { width: 100%; height: auto; display: block; }
.detay-not { font-size: 12px; color: var(--sonuk); line-height: 1.4; text-align: left; }
.detay-nitelik { display: flex; flex-direction: column; gap: 7px; }
.nit { display: flex; align-items: center; gap: 10px; font-size: 11px;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--sonuk); }
.nit > span { width: 46px; flex: none; text-align: left; }
/* Değer YAZIYLA da gösteriliyor: yalnız çubuk varken iki araba
   arasındaki fark gözle ölçülemiyor. */
.nit > b { width: 26px; flex: none; text-align: right; font-family: var(--d);
  font-size: 13px; color: var(--metin); }
.nit .cubuk { flex: 1; height: 7px; }
.nit-cekis {
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--sonuk); text-align: left;
}
.nit-cekis b { font-family: var(--d); color: var(--metin); letter-spacing: 0;
  text-transform: none; font-size: 13px; }

/* Düğmeler ALT ALTA ve panelin dibinde. Eskiden `flex-direction:
   column` verilmesine rağmen bir düğme mutlak konumlu bir ögenin
   altına düşüyor ve ikisi üst üste biniyordu. */
.detay-dugmeler {
  margin-top: auto; display: flex; flex-direction: column; gap: 8px;
  position: relative; z-index: 1;
}
.detay-dugmeler button { width: 100%; font-size: 17px; padding: 10px; }


/* ══════════════════ MAĞAZA ══════════════════ */
/*
 * PAKET SATIRI.
 *
 * Eskiden mor bir degrade zemin üstüne mor parçalar konuyordu:
 * içindekiler zeminden ayrılmıyordu. Şimdi zemin nötr, RENK yalnız
 * sol kenardaki şeritte ve fiyat düğmesinde.
 */
.paket {
  position: relative; display: flex; align-items: center; gap: 14px;
  border: 0; border-radius: 14px; padding: 14px 16px 14px 20px;
  margin-bottom: 8px; overflow: hidden;
  background: var(--panel-ic);
}
.paket::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--mor);
}
.paket.sade::before { background: var(--hat-parlak); }
.paket h4 {
  margin: 0 0 10px; font-family: var(--d); font-size: 24px; font-weight: 700;
  letter-spacing: .3px;
}
.paket .icerik { display: flex; gap: 4px; flex-wrap: wrap; }
.paket-parca {
  width: 84px; border-radius: 9px; padding: 5px;
  background: rgba(0, 0, 0, .3); text-align: center;
}
.paket-parca canvas { width: 100%; height: auto; display: block; }
.paket-parca small {
  display: block; font-size: 9px; font-weight: 700; line-height: 1.2;
  color: var(--sonuk); margin-top: 3px;
}
.paket .sag-taraf {
  margin-left: auto; display: flex; flex-direction: column; gap: 8px;
  align-items: stretch;
}
.rozet-sinirli {
  position: absolute; top: 12px; right: 14px;
  background: var(--pembe); color: #2e0510; border-radius: 999px;
  padding: 3px 14px; font-family: var(--d); font-weight: 700; font-size: 13px;
  letter-spacing: 1px; text-transform: uppercase;
}
.fiyat-dugme {
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 8px; background: var(--nane); color: #05261a;
  border: 0; border-radius: 12px; padding: 9px 22px;
  font-family: var(--d); font-size: 21px; font-weight: 700;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .28);
}
.fiyat-dugme i { width: 20px; height: 20px; }
.fiyat-dugme:active { transform: translateY(3px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.28); }


/* ══════════════════ AYAR ══════════════════ */
.ayar-satir {
  display: flex; align-items: center; gap: 16px; padding: 11px 14px;
  background: var(--panel-ic); border-radius: 12px; margin-bottom: 6px;
}
.ayar-satir label { flex: 1; font-family: var(--d); font-size: 16px; font-weight: 700; }

/* Kendi oku, kendi zemini. Sistemin kendi açılır listesi her işletim
   sisteminde başka türlü çiziliyor ve arayüzün geri kalanına ait
   değilmiş gibi duruyor — "AI gibi" görünmenin en belirgin
   işaretlerinden. */
.ayar-satir select, .ozel-satir select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--d); font-size: 14px; font-weight: 700; padding: 8px 34px 8px 14px;
  border: 0; border-radius: 10px; background: rgba(0, 0, 0, .34); color: var(--metin);
  box-shadow: inset 0 0 0 1px var(--hat); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--sonuk) 50%),
    linear-gradient(135deg, var(--sonuk) 50%, transparent 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.ayar-satir select option, .ozel-satir select option {
  background: #141a25; color: var(--metin);
}

.ayar-satir input[type=range] {
  width: 180px; accent-color: var(--nane); height: 6px;
}
.ayar-satir .deger, .ayar-deger {
  font-family: var(--d); font-size: 15px; font-weight: 700; color: var(--nane);
  min-width: 48px; text-align: right;
}
.ayar-ipucu {
  margin-top: 10px; font-size: 11px; color: var(--duman); text-align: center;
  line-height: 1.6;
}


/* ══════════════════ KASA ══════════════════ */
#kasa-perde {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(4, 6, 10, .74);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center;
}
#kasa-kutu {
  width: min(94vw, 720px);
  background: rgba(12, 16, 24, .94);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 0; border-top: 3px solid var(--mor);
  border-radius: 18px; padding: 22px; text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
#kasa-baslik {
  font-family: var(--d); font-size: 28px; font-weight: 700; margin-bottom: 14px;
}
#kasa-serit {
  position: relative; height: 140px; overflow: hidden;
  border-radius: 12px; background: rgba(0, 0, 0, .38);
}
#kasa-kayan { display: flex; gap: 4px; padding: 8px; position: absolute; left: 0; top: 0; }
#kasa-imlec {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1px;
  background: var(--altin); box-shadow: 0 0 16px var(--altin);
}
.kasa-parca {
  width: 118px; height: 118px; flex: none; border-radius: 10px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 5px; position: relative; overflow: hidden;
}
.kasa-parca span {
  font-family: var(--d); font-size: 12px; font-weight: 700; position: relative;
  padding: 2px 5px; border-radius: 5px; background: rgba(8, 11, 17, .78);
  color: var(--metin);
}
#kasa-sonuc {
  margin-top: 16px; font-family: var(--d); font-size: 24px; font-weight: 700;
  color: var(--altin);
}


/* ══════════════════ KAZANÇ ══════════════════ */
#kazanc-perde {
  position: fixed; inset: 0; z-index: 125;
  background: rgba(4, 6, 10, .6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: grid; place-items: center;
}
#kazanc-kutu {
  width: min(92vw, 440px);
  background: rgba(12, 16, 24, .94);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 0; border-top: 3px solid var(--altin);
  border-radius: 18px; padding: 22px; text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
#kazanc-kutu h2 {
  margin: 0 0 14px; font-family: var(--d); font-size: 28px; font-weight: 700;
  letter-spacing: 1px;
}
#kazanc-liste { text-align: left; }
.kzn {
  display: flex; justify-content: space-between; padding: 7px 2px;
  border-bottom: 1px solid var(--hat); font-size: 14px; color: var(--sonuk);
}
.kzn b { font-family: var(--d); font-size: 16px; color: var(--altin); }
#kazanc-toplam {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--d); font-size: 38px; font-weight: 700; color: var(--altin);
  margin: 16px 0;
}
#kazanc-toplam .sim-para { width: 30px; height: 30px; }


/* 2x ödüllü reklam düğmesi. Kazanç ekranında DEVAM'ın üstünde:
   oyuncunun gözü zaten toplamda ve düğme ne kazanacağını yazıyor. */
#kazanc-2x {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; margin-bottom: 8px;
  animation: kzn2x-nabiz 1.6s ease-in-out infinite;
}
#kazanc-2x[hidden] { display: none; }
#kazanc-2x:disabled { opacity: .55; animation: none; }
#kazanc-2x i { width: 20px; height: 20px; background: 50%/contain no-repeat; }
#kazanc-2x b { font-family: var(--d); }
@keyframes kzn2x-nabiz {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) { #kazanc-2x { animation: none; } }

/* ══════════════════ DOKUNMATİK ══════════════════ */
#dokunmatik { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
/*
 * JOYSTICK + DÜĞMELER.
 *
 * Yerleşim `body.iki-kisi` sınıfına bağlı:
 *   tek kişilik : joystick solda, zıplama/drift sağda
 *   iki kişilik : her oyuncunun joystick'i kendi yarısının DIŞ
 *                 kenarında, zıplama hemen üstünde
 *
 * `touch-action: none` şart: yoksa parmak sürüklenince tarayıcı
 * sayfayı kaydırmaya başlıyor ve joystick olayları kesiliyor.
 */
.dk-yan { position: absolute; bottom: 0; width: 46%; height: 100%; pointer-events: none; }
.dk-sol { left: 0; }
.dk-sag { right: 0; }

/*
 * JOYSTICK. Seçici `#dokunmatik` ile SINIRLI.
 *
 * Kural eskiden düpedüz `.cubuk` idi ve `.cubuk` adı arayüzde iki ayrı
 * şeyde kullanılıyor: burada joystick, panellerde İLERLEME ÇUBUĞU.
 * Dokunmatik bölümü dosyanın sonlarında olduğu için bu kural
 * ötekini eziyordu: görev ilerlemesi ve garajdaki güç/tutuş/drift
 * çubukları `position:absolute; width:148px; border-radius:50%`
 * alıyor, akıştan çıkıp GÖRÜNMEZ oluyorlardı. Garajda etiket ve
 * sayı vardı ama aralarındaki çubuk yoktu.
 */
#dokunmatik .cubuk {
  position: absolute; bottom: 18px; width: 148px; height: 148px;
  border-radius: 50%; border: 0;
  background: rgba(11, 15, 22, .5);
  box-shadow: inset 0 0 0 2px var(--hat);
  pointer-events: auto; touch-action: none;
  overflow: visible;
}
#dokunmatik .dk-sol .cubuk { left: 16px; }
#dokunmatik .dk-sag .cubuk { right: 16px; }
#dokunmatik .cubuk .topuz {
  position: absolute; left: 50%; top: 50%; width: 62px; height: 62px;
  margin: -31px 0 0 -31px; border-radius: 50%; border: 0;
  background: #7c8798;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .32);
}
.dk-zipla, .dk-drift {
  position: absolute; pointer-events: auto; touch-action: none; cursor: pointer;
  font-family: var(--d); font-weight: 700; font-size: 15px; letter-spacing: 1.2px;
  border: 0; border-radius: 50%;
  width: 96px; height: 96px;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .3);
}
.dk-zipla { background: var(--nane); color: #05261a; }
.dk-drift { background: var(--altin); color: #2c1d00; width: 82px; height: 82px;
  font-size: 13px; }
.dk-zipla.basili, .dk-drift.basili { transform: translateY(3px); filter: brightness(1.15); }

/* tek kişilik: joystick solda, düğmeler sağda */
.dk-sag .cubuk { display: none; }
.dk-sol .dk-zipla, .dk-sol .dk-drift { display: none; }
.dk-sag .dk-zipla { right: 26px; bottom: 34px; }
.dk-sag .dk-drift { right: 138px; bottom: 40px; }

/* iki kişilik: her yarı kendi joystick'i + üstünde zıplama */
body.iki-kisi .dk-sag .cubuk { display: block; }
body.iki-kisi .dk-sol .dk-zipla, body.iki-kisi .dk-sol .dk-drift { display: block; }
body.iki-kisi .dk-sol .dk-zipla { left: 172px; bottom: 122px; }
body.iki-kisi .dk-sol .dk-drift { left: 178px; bottom: 26px; }
body.iki-kisi .dk-sag .dk-zipla { right: 172px; bottom: 122px; }
body.iki-kisi .dk-sag .dk-drift { right: 178px; bottom: 26px; }

/*
 * LOBİDE SÜRÜŞ DÜĞMESİ YOK.
 *
 * Ölçüldü (740x360): joystick "Garaj" düğmesinin, DRIFT "Özel"in,
 * JUMP "Seyirci"nin üstüne biniyordu — üçüne de basılamıyordu.
 * Lobide zaten araç yok: DRIFT ile JUMP anlamsız, yerlerine
 * halkalar için ETKİLEŞİM düğmesi geliyor. Joystick kalıyor,
 * yürümek için gerekli.
 */
body.lobide #dokunmatik .dk-zipla,
body.lobide #dokunmatik .dk-drift { display: none !important; }
.dk-etkilesim { display: none; }
body.lobide .dk-etkilesim {
  display: block;
  position: absolute; right: 26px; bottom: 122px;
  pointer-events: auto; touch-action: none; cursor: pointer;
  width: 96px; height: 96px; border: 0; border-radius: 50%;
  background: var(--nane); color: #05261a;
  font-family: var(--d); font-weight: 700; font-size: 15px; letter-spacing: 1.2px;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .3);
}
.dk-etkilesim.basili { transform: translateY(3px); filter: brightness(1.15); }

/* Lobide joystick menü şeridinin ÜSTÜNE çıkıyor: şerit 98 px yüksek
   ve alttan 12 px'te duruyor. */
body.lobide #dokunmatik .cubuk { bottom: 122px; }

/* ══════════════════ TELEFONU ÇEVİR ══════════════════ */
#cevir-ortu {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #10131b, #070910);
  text-align: center; padding: 24px;
}
#cevir-ortu .co-ic { max-width: 300px; }
#cevir-ortu b {
  display: block; margin: 18px 0 6px;
  font-family: var(--d); font-size: 22px; color: var(--metin);
}
#cevir-ortu small { color: var(--sonuk); font-size: 13px; }
.co-telefon {
  width: 74px; height: 122px; margin: 0 auto; border-radius: 12px;
  border: 4px solid var(--gok); position: relative;
  animation: co-don 2.2s ease-in-out infinite;
}
.co-telefon i {
  position: absolute; left: 50%; bottom: 7px; width: 24px; height: 3px;
  margin-left: -12px; border-radius: 2px; background: var(--gok);
}
@keyframes co-don {
  0%, 30% { transform: rotate(0deg); }
  55%, 100% { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) { .co-telefon { animation: none; } }

@media (max-width: 760px) {
  #dokunmatik .cubuk { width: 116px; height: 116px; }
  #dokunmatik .cubuk .topuz { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  .dk-zipla { width: 78px; height: 78px; font-size: 13px; }
  .dk-drift { width: 66px; height: 66px; font-size: 11px; }
  body.iki-kisi .dk-sol .dk-zipla { left: 138px; bottom: 100px; }
  body.iki-kisi .dk-sol .dk-drift { left: 142px; bottom: 22px; }
  body.iki-kisi .dk-sag .dk-zipla { right: 138px; bottom: 100px; }
  body.iki-kisi .dk-sag .dk-drift { right: 142px; bottom: 22px; }
  body.lobide .dk-etkilesim { width: 78px; height: 78px; font-size: 13px; bottom: 112px; }
  body.lobide #dokunmatik .cubuk { bottom: 112px; }
}

/* ══════════════════ KÜÇÜK EKRAN ══════════════════ */
@media (max-width: 900px) {
  #sayac { font-size: 34px; }
  #sayac-kutu { min-width: 178px; padding: 3px 14px 6px; }
  #sayac-baslik { font-size: 14px; }
  .rozet { width: 38px; height: 38px; border-width: 3px; }
  .takim-sira { width: 128px; }
  .lobi-dugme { width: 104px; }
  .lobi-dugme b { font-size: 15px; }
  .lobi-dugme i { font-size: 22px; }
  .lobi-dugme small { font-size: 8px; }
  #para-kutu { font-size: 28px; min-width: 150px; }
  .bedava, .etkinlik { width: 108px; }
  #ipucu { font-size: 18px; }
  #alt-sol { display: none; }
  .envanter-govde { flex-direction: column; }
  .envanter-govde .sag { width: 100%; }
  .oy-kart { width: 252px; }
  .oy-kart h4 { font-size: 19px; }
}


/* ══════════════════ ALÇAK EKRAN (yatay telefon) ══════════════════ */
/*
 * Kıt eksen YÜKSEKLİK, genişlik değil. `max-width: 900px` kuralı
 * garajı ALT ALTA diziyordu: 740x360'ta ızgara panelin tamamını
 * yiyor, altındaki önizleme/istatistik/KULLAN sütunu `overflow:
 * hidden` ile kesiliyor ve araç değiştirilemiyordu.
 *
 * Alçak ekranda iki sütun geri geliyor (genişlik zaten yeterli),
 * pencere ekranın tamamına yayılıyor ve ızgara kendi içinde
 * kayıyor.
 */
@media (max-height: 480px) {
  .pencere { max-height: 96vh; width: min(97vw, 900px); }
  .pencere header { padding-top: 6px; padding-bottom: 6px; }
  .pencere header h2 { font-size: 20px; }
  .govde { padding: 8px 12px 12px; }

  .envanter-govde { flex-direction: row; gap: 10px; }
  .envanter-govde .sag { width: 216px; padding: 8px; gap: 6px; }
  /* `align-content: start` SART. `flex: 1` ile izgaraya kesin bir
     yukseklik veriliyor ve varsayilan `stretch` satirlari o
     yuksekligi paylastiriyordu: satir 63 px, kart ise `aspect-ratio`
     geregi 134 px — kartlar bir alttaki satirin uzerine tasip arac
     adlarini fiyat rozetinin altinda birakiyordu. */
  .izgara {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    max-height: none; flex: 1; align-content: start;
  }
  .sekmeler { margin-bottom: 6px; }
  .sekme { font-size: 13px; padding: 5px 10px; }
  .ara { margin-bottom: 6px; }

  /* Sag sutun KENDI ICINDE kaysin: 360 px ekranda govde ~300 px ve
     araclarin istatistikleri + KULLAN dugmesi altta kaliyordu. */
  .envanter-govde .sag { overflow-y: auto; }

  /* Kart 1:1 iken 92 px genislikte ada satiri asagi tasip alttaki
     kartin fiyat rozetinin altinda kaliyordu. */
  /* EN-BOY ORANI YERINE KESIN YUKSEKLIK. `aspect-ratio` izgara
     satiri olculdukten SONRA uygulaniyor: satir icerige gore 63 px
     cikip kart 134 px'e uzuyor ve bir alttaki satirin uzerine
     tasiyordu. Kesin yukseklik bu etkilesimi tamamen kaldiriyor. */
  .kart { aspect-ratio: auto; height: 116px; padding: 3px; }
  .kart span { font-size: 10px; padding: 2px 3px; }
  .kart .rozet-fiyat { font-size: 9px; padding: 0 4px; }

  /* İPUCU KARTLARIN ÜSTÜNE BİNİYORDU.
     `top: 232px` sabit; 360 piksel yüksekliğinde ekranda tam bedava
     araç / para / etkinlik kartlarının hizasına düşüyor ve yazı
     kartların arkasından geçiyordu (740x360'ta ölçüldü). Alçak
     ekranda menü şeridinin hemen üstüne alınıyor; genişlik de
     daraltılıyor ki solda joystick, sağda ETKİLEŞİM düğmesiyle
     kesişmesin. */
  /* ÖLÇÜLDÜ (740x360): kartlar y=256'da bitiyor, menü şeridi y=282'de
     başlıyor — arada 26 piksellik boş bir bant var. İpucu tam oraya
     oturuyor. `bottom: 116` denendi, o da kart bandının içine
     düşüyordu (bedava araç ve etkinlik kartlarıyla 95x18 kesişme). */
  /* GENISLIK SURUS DUGMELERINE GORE.
     ÖLÇÜLDÜ (740x360, maç düzeni): 56vw'lik kutu sağda DRIFT
     düğmesinin altına 41x18 giriyordu. Solda joystick x=132'de
     bitiyor, sağda DRIFT x=536'da başlıyor — aradaki 404 pikselin
     içinde kalması gerek. İki kişilikte iki taraf da dolu olduğu
     için pay daha da dar tutuluyor. */
  #ipucu {
    top: auto; bottom: 82px;
    font-size: 15px; -webkit-text-stroke-width: 2px;
    width: min(44vw, 320px);
  }
  /* İKİ KİŞİLİKTE İPUCU YOK.
     Ekran ikiye bölünüyor: iki joystick, iki DRIFT, iki JUMP ve
     ortada bölme çizgisi. ÖLÇÜLDÜ: daraltılmış kutu bile iki JUMP
     düğmesiyle 9x78 kesişiyor ve sohbetle 29x6 çakışıyordu; yazı
     beş satıra sarıp 110 piksel yer kaplıyordu. Temiz bir bant yok,
     ipucu da süs — bölünmüş ekranda kalkıyor. */
  body.iki-kisi #ipucu { display: none; }

  /* SOHBET LOBİDE KALKIYOR.
     ÖLÇÜLDÜ: 14,136 281x52 kutusu bedava araç kartıyla 96x39
     kesişiyordu. 360 piksellik yükseklikte sohbeti kartların soluna
     sığdırmak 148 piksel bırakıyor — okunmaz. Maç sırasında ekranın
     ortası boş, orada duruyor; kalkan yalnız lobi. */
  body.lobide #sohbet { display: none; }

  /* Kazanç ve kasa örtüleri de sığmıyordu. */
  #kazanc-kutu, #kasa-kutu { max-height: 94vh; overflow-y: auto; }
  #kazanc-toplam { font-size: 28px; margin: 8px 0; }

  /* Menü şeridi alçalıyor ki dokunmatik düğmelerle çakışmasın. */
  .lobi-dugme { width: 92px; }
  .lobi-dugme i { width: 28px; height: 28px; }
  .lobi-dugme small { display: none; }
  .bedava, .etkinlik { width: 96px; }
}

/* ══════════════════ AÇILIŞ EKRANI ══════════════════ */
/*
 * Oyuncunun gördüğü İLK ekran ve mağaza görselinin karşılığı.
 *
 * İki kez elden geçti. İlk hâli için sahibi "aşırı AI duruyor ve aşırı
 * renksiz" dedi; ikinci hâli koyu laciverttti ve gerçek araba
 * gösteriyordu ama hâlâ "yetişkin" bir ekrandı. Oyunu ÇOCUKLAR
 * oynuyor: bu sürüm kapak görselinin diliyle konuşuyor — gökyüzü
 * mavisi, kalın beyaz konturlar, doygun renkler, tombul düğmeler.
 *
 * Üç kural:
 *   1. ARKA PLAN AYDINLIK. Koyu bir zemin araba önizlemelerini
 *      yutuyordu; gökyüzü degradesi onları öne çıkarıyor.
 *   2. HER ŞEYİN KONTURU VAR. Kapaktaki yazı gibi: kalın koyu kontur
 *      + altta sert gölge. Konturusuz düz renk "arayüz" duruyor,
 *      konturlu renk "oyun".
 *   3. KART BİR DÜĞME GİBİ DURUYOR. Altında 6 px'lik koyu bir taban
 *      var ve basınca o taban yassılıyor.
 */
#acilis {
  position: fixed; inset: 0; z-index: 290;
  display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 108%, #b9ecff 0%, transparent 60%),
    linear-gradient(180deg, #2ea8ff 0%, #6fd0ff 46%, #a8e8ff 100%);
  transition: opacity .35s ease;
}
#acilis.gizli { opacity: 0; pointer-events: none; }

/* Güneş ışınları. Bulanık: konik degrade keskin kenarlı üçgenler
   üretiyor, bulanıklık olmadan "ışık" değil "renkli kama". */
.ac-arka {
  position: absolute; inset: -30%;
  background:
    conic-gradient(from 0deg, transparent 0 6%, rgba(255, 255, 255, .40) 6% 9%,
      transparent 9% 22%, rgba(255, 255, 255, .30) 22% 25%, transparent 25% 44%,
      rgba(255, 255, 255, .34) 44% 47%, transparent 47% 66%,
      rgba(255, 255, 255, .28) 66% 69%, transparent 69% 100%);
  animation: ac-don 52s linear infinite;
  filter: blur(46px);
  pointer-events: none;
}
@keyframes ac-don { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ac-arka { animation: none; } }

/* Alttaki asfalt bandı + üstteki bulut aydınlığı. */
.ac-isik {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 62%, rgba(38, 48, 66, .30) 84%, rgba(24, 31, 44, .52) 100%),
    radial-gradient(90% 40% at 50% -6%, rgba(255, 255, 255, .55), transparent 70%);
}

/* ── dil seçici ── */
.ac-dil {
  position: absolute; top: 16px; right: 18px; z-index: 3;
  display: flex; gap: 6px;
}
.ac-dil button {
  cursor: pointer; border: 0; border-radius: 12px;
  padding: 7px 15px; font-family: var(--d); font-size: 14px; font-weight: 700;
  background: rgba(255, 255, 255, .82); color: #2b3a52;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22);
}
.ac-dil button:hover { background: #fff; }
.ac-dil button.secili { background: #ffc23d; color: #4a2f00; }

.ac-ic {
  position: relative; z-index: 2; text-align: center;
  width: min(94vw, 940px); padding: 12px;
}

/* ── logo ──
   Kapak görselindeki düzen: NOOB beyaz, vs küçük, PRO mavi; altta
   kırmızı levha üstünde sarı-turuncu DRIFT TAG. */
.ac-logo { margin-bottom: 4px; }
.lg-ust {
  display: flex; align-items: baseline; justify-content: center;
  gap: clamp(6px, 1.2vw, 14px); line-height: .9;
}
.lg-ust span {
  font-family: var(--d); font-weight: 700; letter-spacing: 1px;
  font-size: clamp(38px, 7.4vw, 86px);
  -webkit-text-stroke: clamp(3px, .5vw, 6px) #10233d;
  paint-order: stroke fill;
  text-shadow: 0 clamp(3px, .5vw, 6px) 0 #10233d;
}
.lg-noob { color: #ffffff; }
.lg-pro { color: #37c4ff; }
.lg-vs {
  font-family: var(--d); font-style: normal; font-weight: 700; color: #fff;
  font-size: clamp(17px, 3vw, 34px);
  -webkit-text-stroke: clamp(2px, .34vw, 4px) #10233d;
  paint-order: stroke fill;
}
.lg-alt {
  display: inline-block; margin-top: clamp(2px, .6vw, 8px);
  padding: clamp(2px, .5vw, 7px) clamp(12px, 2.4vw, 30px);
  font-family: var(--d); font-weight: 700; letter-spacing: 2px;
  font-size: clamp(26px, 5.4vw, 62px);
  background: linear-gradient(180deg, #ff5a4a, #d81222);
  border-radius: 14px; transform: rotate(-1.6deg);
  color: #ffd54a;
  -webkit-text-stroke: clamp(2px, .34vw, 4px) #7a1206;
  paint-order: stroke fill;
  box-shadow: 0 6px 0 #8d0f18, 0 14px 26px rgba(12, 30, 54, .38);
}
.ac-alt {
  margin: clamp(12px, 2vw, 22px) 0 clamp(14px, 2.4vw, 26px);
  font-family: var(--d); font-size: clamp(13px, 1.8vw, 19px);
  letter-spacing: 1.4px; text-transform: uppercase; color: #10233d;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .6);
}

/* ── kartlar ── */
.ac-kartlar {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 2vw, 24px); max-width: 780px; margin: 0 auto;
}
.ac-kart {
  position: relative; appearance: none; cursor: pointer; overflow: hidden;
  color: #10233d; text-align: center; font-family: var(--g);
  background: #ffffff;
  border: 0; border-radius: 22px; padding: 0 0 clamp(10px, 1.6vw, 16px);
  box-shadow:
    inset 0 0 0 4px var(--kenar),
    0 8px 0 var(--taban),
    0 20px 34px rgba(10, 34, 60, .30);
  transition: transform .12s ease, box-shadow .12s ease;
}
#ac-tek { --kenar: #1f8fe0; --taban: #1367a8; --parilti: #cdefff; --band: linear-gradient(180deg, #45c1ff, #1f8fe0); }
#ac-cift { --kenar: #f0a81c; --taban: #b87708; --parilti: #ffeec2; --band: linear-gradient(180deg, #ffc93d, #f0a81c); }
.ac-kart:hover, .ac-kart:focus-visible {
  transform: translateY(-4px); outline: none;
  box-shadow:
    inset 0 0 0 4px var(--kenar),
    0 12px 0 var(--taban),
    0 26px 44px rgba(10, 34, 60, .36);
}
/* Basınca taban yassılıyor — tombul düğme hissi. */
.ac-kart:active {
  transform: translateY(6px);
  box-shadow: inset 0 0 0 4px var(--kenar), 0 2px 0 var(--taban),
    0 8px 16px rgba(10, 34, 60, .3);
}

/* ── araç sahnesi ── */
.ac-sahne {
  position: relative; height: clamp(96px, 15vw, 148px);
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  background: radial-gradient(75% 95% at 50% 100%, var(--parilti), #ffffff 74%);
}
.ac-sahne::after {
  /* zemin çizgisi — araba havada durmasın */
  content: ''; position: absolute; left: 10%; right: 10%; bottom: 6px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--kenar), transparent);
  opacity: .5;
}
.ac-arac { width: 100%; height: 100%; display: block; }
.ac-sahne.bolunmus .ac-arac { width: 50%; height: 100%; }
.ac-sahne.bolunmus::before {
  content: ''; position: absolute; left: 50%; top: 12%; bottom: 14%;
  width: 3px; margin-left: -1.5px; border-radius: 2px;
  background: repeating-linear-gradient(180deg, var(--kenar) 0 8px, transparent 8px 16px);
  opacity: .6;
}
.ac-rozet {
  position: absolute; top: 8px; left: 10px;
  width: 34px; height: 34px; background: 50%/contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(10, 34, 60, .35));
}

/* ── kart gövdesi ── */
.ac-govde { padding: clamp(8px, 1.4vw, 14px) 10px 0; }
.ac-baslik {
  font-family: var(--d); font-size: clamp(21px, 3.4vw, 34px); font-weight: 700;
  letter-spacing: .6px; color: #10233d;
}
.ac-metin {
  margin: 4px 8px clamp(8px, 1.4vw, 14px);
  font-size: clamp(11px, 1.4vw, 14px); color: #52657f; min-height: 2.6em;
}
/* Sahte oyna düğmesi: kartın kendisi düğme, bu onun etiketi. */
.ac-oyna {
  display: inline-block; padding: clamp(5px, .9vw, 9px) clamp(20px, 3vw, 40px);
  border-radius: 999px; background: var(--band); color: #fff;
  font-family: var(--d); font-weight: 700; letter-spacing: 2px;
  font-size: clamp(14px, 1.9vw, 20px);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22), 0 4px 10px rgba(10, 34, 60, .22);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .22);
}
.ac-not {
  margin-top: clamp(12px, 2vw, 22px); font-size: 12px; color: #17395c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}

/* Dar ekranda kartlar YAN YANA KALIYOR.
   Alt alta dizmek yatay telefonda ikinci kartı ekran dışına
   itiyordu; kıt eksen yükseklik, genişlik değil. */
@media (max-width: 720px) {
  .ac-kartlar { gap: 10px; }
  .ac-sahne { height: 84px; }
  .ac-metin { min-height: 0; display: none; }
  .ac-govde { padding-top: 6px; }
}
@media (max-height: 480px) {
  .ac-sahne { height: clamp(70px, 13vh, 96px); }
  .ac-metin { display: none; }
  .ac-alt { margin: 6px 0 10px; }
  .ac-not { margin-top: 8px; }
  .lg-ust span { font-size: clamp(30px, 8vh, 52px); }
  .lg-alt { font-size: clamp(20px, 5.6vh, 38px); }
}


/* ══════════════════ OYUNCU PANELİ ══════════════════ */
/*
 * Hız kadranı + drift ölçer + bomba durumu + zıplama, tek blokta.
 *
 * Eskiden hız sağ altta, zıplama alt ortada, bomba uyarısı ekranın
 * ortasında ayrı ayrı duruyordu. Bölünmüş ekranda hepsi yanlış yarıya
 * düşüyor ve iki oyuncudan biri kendi hızını göremiyordu.
 */
.oyuncu-panel {
  position: absolute; bottom: 14px; left: 14px;
  width: 252px; pointer-events: none;
  background: var(--panel);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 0; border-radius: 16px;
  border-top: 3px solid var(--hat-parlak);
  padding: 8px 12px 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4), inset 0 -4px 0 rgba(0, 0, 0, .3);
}
.oyuncu-panel.sag { left: auto; right: 14px; }
/* tek kişilikte tek panel var ve sağ altta duruyor */
body:not(.iki-kisi) #op-1 { left: auto; right: 14px; }

.op-govde { display: flex; align-items: center; gap: 10px; }

/* ── hız kadranı ─────────────────────────────────────────────── */
.op-kadran { position: relative; width: 118px; flex: 0 0 118px; }
.op-kadran svg { display: block; width: 100%; height: auto; overflow: visible; }
.op-yay-arka, .op-yay { fill: none; stroke-linecap: round; stroke-width: 10; }
.op-yay-arka { stroke: rgba(255, 255, 255, .10); }
.op-yay {
  stroke: var(--nane);
  /* Yayın uzunluğu ~170 px; `stroke-dasharray` ile doldurulacak.
     Değeri JS yazıyor, burada başlangıç sıfır. */
  stroke-dasharray: 0 400;
  transition: stroke-dasharray .08s linear, stroke .2s ease;
}
.op-yay.hizli { stroke: var(--altin); }
.op-yay.cok-hizli { stroke: var(--kirmizi); }
.op-hiz {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  line-height: 1;
}
.op-hiz b {
  display: block; font-family: var(--d); font-size: 34px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
.op-hiz small {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sonuk);
}

/* ── sağ sütun ───────────────────────────────────────────────── */
.op-sag { flex: 1; min-width: 0; }
.op-ad {
  font-family: var(--d); font-weight: 700; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-drift {
  height: 10px; margin-top: 8px; border-radius: 6px;
  background: rgba(0, 0, 0, .38); overflow: hidden;
}
.op-drift i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gok), var(--altin) 55%, var(--pembe));
  transition: width .1s linear;
}
.op-drift-yazi {
  font-size: 9px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--sonuk); margin-top: 4px;
}

/* ── bomba şeridi ────────────────────────────────────────────── */
.op-bomba {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: -2px 0 8px; padding: 4px 8px; border-radius: 9px;
  font-family: var(--d); font-size: 14px; font-weight: 700; letter-spacing: 1.2px;
  color: #2e0510; background: var(--pembe);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .28);
  animation: op-nabiz .7s ease-in-out infinite alternate;
}
.op-bomba i { width: 17px; height: 17px; }
@keyframes op-nabiz { to { filter: brightness(1.28); } }
@media (prefers-reduced-motion: reduce) { .op-bomba { animation: none; } }

/* ── zıplama düğmesi ─────────────────────────────────────────── */
.op-zipla {
  pointer-events: auto; cursor: pointer; width: 100%; margin-top: 10px;
  font-family: var(--d); font-weight: 700; font-size: 17px; letter-spacing: 1.4px;
  color: #05261a; background: var(--nane);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 11px; padding: 8px 10px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .28);
}
.op-zipla i { width: 17px; height: 17px; }
.op-zipla kbd {
  font-family: var(--d); font-size: 11px; background: rgba(0, 0, 0, .22);
  color: #05261a; border-radius: 5px; padding: 1px 7px; box-shadow: none;
}
.op-zipla:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.28); }
.op-zipla.bekleme { background: #39424f; color: #8d99a9; }
.op-zipla.bekleme kbd { color: #8d99a9; }

/* ── bölme çizgisi ───────────────────────────────────────────── */
#bolme-cizgi { display: none; }
body.iki-kisi #bolme-cizgi {
  display: block; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 4px; margin-left: -2px; background: var(--murekkep);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10);
  pointer-events: none;
}

/* İki kişilikte ekranın ortası zaten dolu; tuş yardımı ve ping
   kalabalık yapıyor. */
body.iki-kisi #alt-sol { display: none; }
/* İpucu tek kişilikte ekranın ortasında duruyor; bölünmüşte tam
   bölme çizgisinin üstüne düşüp iki yarıyı da kesiyor. Yukarı
   alınıyor ve küçültülüyor. */
body.iki-kisi #ipucu { top: 168px; font-size: 15px; width: min(44vw, 420px); }
body.iki-kisi #bildirim { top: 112px; }
body.iki-kisi #ust-sag { transform: scale(.82); transform-origin: top right; }

@media (max-width: 900px) {
  .oyuncu-panel { width: 202px; padding: 6px 9px 9px; }
  .op-kadran { width: 92px; flex-basis: 92px; }
  .op-hiz b { font-size: 26px; }
  .op-zipla { font-size: 14px; }
}

/* Kazanç dökümünde oyuncu başlığı (iki kişilik) */
.kzn-basli {
  margin: 8px 0 2px; font-size: 10px; letter-spacing: 2.4px; font-weight: 700;
  text-transform: uppercase; color: var(--altin);
}



/* ══════════════════ SOHBET ══════════════════ */
#sohbet {
  /* Tuş yardımı (`#alt-sol`) sol altta ~110 piksel yer kaplıyor;
     sohbet onun ÜSTÜNDE başlıyor, yoksa girdi kutusu tuş satırlarının
     üstüne biniyor. */
  position: absolute; left: 14px; bottom: 172px; width: min(38vw, 380px);
  pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
#sohbet.parlak { opacity: .92; }
#sohbet.acik { opacity: 1; pointer-events: auto; }
#sohbet-liste {
  max-height: 30vh; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px; border-radius: 10px;
  background: rgba(8, 10, 14, .0); transition: background .2s ease;
}
#sohbet.acik #sohbet-liste { background: rgba(8, 10, 14, .62); }
.sh-satir {
  font-size: 13px; line-height: 1.4; word-break: break-word;
  -webkit-text-stroke: 2.5px var(--murekkep); paint-order: stroke fill;
}
.sh-satir b {
  font-family: var(--d); font-weight: 700; color: var(--gok);
  -webkit-text-stroke: 2.5px var(--murekkep); paint-order: stroke fill;
}
.sh-satir.ben b { color: var(--nane); }
/* Sistem satırı EĞİK DEĞİL. Eğik yazı konturla birlikte ince
   puntoda okunaksızlaşıyordu; ayrım rengin kendisinden geliyor. */
.sh-satir.sistem { color: var(--altin); }

#sohbet-alt { display: none; gap: 6px; margin-top: 6px; }
#sohbet.acik #sohbet-alt { display: flex; }
#sohbet-girdi {
  flex: 1; min-width: 0; font-family: var(--g);
  /* 16px ALTINA İNMESİN: iOS Safari daha küçük bir alana odaklanınca
     sayfayı kendiliğinden yakınlaştırıyor ve oyun bozuluyor. */
  font-size: 16px; color: var(--metin);
  background: rgba(8, 11, 17, .92); border: 0;
  box-shadow: inset 0 0 0 1px var(--hat);
  border-radius: 10px; padding: 8px 11px;
}
#sohbet-girdi::placeholder { color: var(--duman); }
#sohbet-girdi:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--nane); }
#sohbet-kapat {
  width: 36px; cursor: pointer; font-size: 0;
  background: rgba(8, 11, 17, .92) 50%/12px no-repeat;
  border: 0; border-radius: 10px;
}
#sohbet-kapat:hover { background-color: var(--kirmizi); }
#sohbet-ipucu {
  margin-top: 5px; font-size: 10px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--duman);
  display: flex; align-items: center; gap: 6px;
}
#sohbet.acik #sohbet-ipucu { display: none; }

/* İki kişilikte sol yarının altı zaten oyuncu paneliyle dolu. */
body.iki-kisi #sohbet { bottom: 186px; width: min(30vw, 300px); }
body.iki-kisi #sohbet-liste { max-height: 22vh; }

/* ══════════════════ ÖZEL SUNUCU ══════════════════ */
/*
 * Satırlar `.ayar-satir` ile AYNI üslubu paylaşıyor. Ayrı bir seçici
 * seti vardı ve o sette açılır listeye hiç dokunulmamıştı: özel
 * sunucu panelinde işletim sisteminin kendi beyaz `select`i
 * çıkıyordu, ayarlar panelinde ise oyunun kendi çizdiği kutu. Aynı
 * oyunun iki paneli iki farklı arayüz gibi görünüyordu.
 */
.ozel-satir {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px;
  background: var(--panel-ic); border-radius: 12px; margin-bottom: 6px;
}
.ozel-satir label { flex: 1; font-family: var(--d); font-size: 15px; font-weight: 700; }
.ozel-satir select { flex: 0 0 240px; }
.ozel-satir input[type=range] { flex: 0 0 200px; accent-color: var(--nane); }
.ozel-deger {
  flex: 0 0 54px; text-align: right; font-family: var(--d); font-weight: 700;
  color: var(--nane);
}
.ozel-not {
  font-size: 12px; color: var(--sonuk); margin: 2px 0 14px; line-height: 1.5;
}


/* ══════════════════ ÇEVRİMİÇİ ODA EKRANI ══════════════════ */
#oda-ekran {
  position: fixed; inset: 0; z-index: 292;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #16303a 0%, #0b0f16 62%),
    var(--zemin);
}
.oda-ic { width: min(94vw, 720px); }
.oda-satir {
  display: flex; align-items: center; gap: 12px; margin: 8px 0;
  justify-content: center;
}
.oda-satir label {
  flex: 0 0 96px; text-align: right; font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--sonuk); font-weight: 700;
}
.oda-satir input, #oda-kod {
  font-family: var(--g); font-size: 16px; color: var(--metin);
  background: rgba(0, 0, 0, .34); border: 0;
  box-shadow: inset 0 0 0 1px var(--hat);
  border-radius: 10px; padding: 9px 12px;
}
.oda-satir input { flex: 0 1 340px; }
.oda-satir input:focus, #oda-kod:focus {
  outline: 0; box-shadow: inset 0 0 0 2px var(--nane);
}
.oda-kartlar {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px;
}
.oda-kart { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#oda-kod {
  width: 170px; text-align: center; letter-spacing: 8px; text-transform: uppercase;
  font-family: var(--d); font-size: 24px; font-weight: 700;
}
.oda-durum { margin-top: 16px; min-height: 22px; font-size: 13px; color: var(--altin); }
#oda-geri { margin-top: 12px; pointer-events: auto; }
.ac-simge.cevrimici::after {
  content: ''; position: absolute; left: 33.3%; right: 33.3%; top: 0; bottom: 0;
  border-left: 3px solid var(--murekkep); border-right: 3px solid var(--murekkep);
}
.ac-fig.f3::before { background: var(--nane); }
@media (max-width: 620px) { .oda-kartlar { grid-template-columns: 1fr; } }

/* ÇEVRİMİÇİ HUD ROZETİ. Yalnız `body.cevrimici` ile görünüyor; bu
   kural HUD bölümündeki genel konumu geçersiz kılıyor (sağ üstteki
   elmas kutusuyla çakışmasın diye onun altına iniyor). */
#ag-rozet {
  top: 108px; right: 14px; left: auto; display: none;
}
body.cevrimici #ag-rozet { display: block; }


/* ══════════════════ DOKUNMATİK: EN KÜÇÜK HEDEF ══════════════════ */
/*
 * ÖLÇÜLDÜ (740x360, `tools/hud-tara.js`): kapatma düğmesi 36x36,
 * sekmeler 30, `select`ler 28, ses kaydıraçları 6 piksel yüksekliğinde
 * kalıyordu. Alçak ekran kuralları arayüzü küçültüyor — görsel olarak
 * doğru, ama parmakla vurulamıyor.
 *
 * Yalnız `pointer: coarse` cihazlarda geçerli: fareyle oynayanda
 * hiçbir şey değişmiyor. Görsel boyut çoğunlukla aynı kalıyor,
 * büyüyen şey DOKUNMA KUTUSU.
 */
@media (pointer: coarse) {
  .kapat { width: 44px; height: 44px; }

  .sekme { min-height: 44px; padding-top: 0; padding-bottom: 0; }

  .ayar-satir select, .ozel-satir select { min-height: 44px; }

  /* Kaydıraç 6 piksellik bir çizgiydi. Görsel iz aynı kalıyor
     (`accent-color` çiziyor), büyüyen yalnız tıklama alanı. */
  .ayar-satir input[type=range],
  .ozel-satir input[type=range] { height: 44px; }

  .yesil-dugme, .kirmizi-dugme, .mavi-dugme, .altin-dugme,
  .fiyat-dugme { min-height: 44px; }

  /* Arama kutusu da parmakla seçilebilsin. */
  .ara, #envanter-ara { min-height: 44px; }
}

/* ══════════════════ PANEL AÇIKKEN SÜRÜŞ KONTROLÜ YOK ══════════════════ */
/*
 * ÖLÇÜLDÜ: envanter paneli açıkken `#cubuk-1` araç kartlarının üstüne
 * biniyordu (84x101 px) ve arama kutusuyla kesişiyordu. Panel açıkken
 * sürülecek bir şey de yok: joystick ve ETKİLEŞİM düğmesi kalkıyor.
 * `visibility` değil `display`: görünmez ama yerinde duran bir katman
 * dokunuşu yutuyor.
 */
body.panel-acik #dokunmatik { display: none; }


/* ══════════════════ "2x İSTER MİSİN" TEKLİFİ ══════════════════ */
/*
 * Ödüllü reklam oyuncunun SEÇİMİ. Panel açıldığında ödül zaten
 * alınmış; bu yalnız üstüne ekliyor, "Vazgeç" hiçbir şey
 * kaybettirmiyor.
 */
#ikikat-perde {
  position: fixed; inset: 0; z-index: 130;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 6, 10, .62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
#ikikat-perde[hidden] { display: none; }
#ikikat-kutu {
  width: min(88vw, 340px); padding: 20px 20px 16px;
  background: rgba(12, 16, 24, .96);
  border-radius: 18px; border-top: 3px solid var(--altin);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  text-align: center; display: flex; flex-direction: column; gap: 10px;
  animation: pencere-gir .18s ease;
}
.ik-video { width: 42px; height: 42px; margin: 0 auto; background: 50%/contain no-repeat; }
.ik-baslik {
  font-family: var(--d); font-weight: 700; font-size: 20px; color: var(--metin);
}
.ik-tutar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--d); font-weight: 700; font-size: 24px;
}
.ik-tutar b:first-child { color: var(--sonuk); }
.ik-tutar b:last-child { color: var(--altin); }
.ik-tutar span { color: var(--sonuk); font-size: 18px; }
#ikikat-evet { display: flex; align-items: center; justify-content: center; gap: 9px; }
#ikikat-evet i { width: 20px; height: 20px; background: 50%/contain no-repeat; }
#ikikat-evet:disabled { opacity: .55; }

/* Alcak ekranda (yatay telefon) daha derli toplu. */
@media (max-height: 480px) {
  #ikikat-kutu { width: min(72vw, 300px); padding: 12px 16px 12px; gap: 7px; }
  .ik-video { width: 30px; height: 30px; }
  .ik-baslik { font-size: 16px; }
  .ik-tutar { font-size: 19px; }
}