/* Need For Drift — Most Wanted 2005 arayüz dili.
 *
 * Referans karelerden (fandom PS2 demo + PC ekranları) okunanlar:
 *   • Menü başlığı küçük harfli GOTİK el yazısı ("circuit options",
 *     "rival challenge") — Pirata One.
 *   • Paneller yarı saydam siyah, üstünde/altında ÇAPRAZ ŞERİT deseni;
 *     seçili satır amber yazı; seçili öğe amber KÖŞE PARANTEZİ ile
 *     çerçeveli.
 *   • Alt çubuk: amber tehlike şeritli bant, üstünde tuş ipuçları.
 *   • PC ekranlarında (World Map, Bounty Achieved) amber yarı saydam
 *     başlık bandı + koyu gövde.
 *   • HUD yazısı kalın, geniş, köşeli sans — Saira 800/900.
 */

@font-face { font-family: 'Saira'; font-style: normal; font-weight: 100 900; font-stretch: 100% 125%;
  src: url(../font/saira-latin.woff2) format('woff2');
  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: 'Saira'; font-style: normal; font-weight: 100 900; font-stretch: 100% 125%;
  src: url(../font/saira-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Pirata One'; font-style: normal; font-weight: 400;
  src: url(../font/pirata-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F; }
@font-face { font-family: 'Pirata One'; font-style: normal; font-weight: 400;
  src: url(../font/pirata-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1E9F; }

:root {
  --hud: 1;
  --amber: #f0a348;
  --amber-koyu: #b8741f;
  --amber-sayda: rgba(240, 163, 72, 0.5);
  --panel: rgba(8, 8, 8, 0.74);
  --panel-acik: rgba(40, 40, 40, 0.62);
  --yazi: #ecebe6;
  --soluk: #a6a49c;
  --kirmizi: #e0342b;
  --mavi: #3c8cff;
  --yesil: #a7d63d;
  --serit: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 7px, rgba(0,0,0,0) 7px 14px);
  --tehlike: repeating-linear-gradient(135deg, rgba(240,163,72,0.62) 0 9px, rgba(40,26,10,0.55) 9px 18px);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--yazi);
  font-family: 'Saira', 'Segoe UI', sans-serif; font-weight: 700; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#sahne { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.gizli { display: none !important; }
.amber { color: var(--amber); }
/* Ekran başlıkları: MW'nin gotik küçük harfi yerine KALIN SAIRA.
 * Gerekçe (sahibi): 7-9 yaş oyuncu gotik küçük harfi zor okuyor.
 * Düzen, amber/siyah kontrast ve köşe parantezleri aynı kalıyor;
 * yalnız yazı tipi okunur hâle geldi. (Pirata One hâlâ logoda ve
 * Blacklist numaralarında — orada okuma değil, süs.) */
.gotik { font-family: 'Saira', 'Segoe UI', sans-serif; font-weight: 900; font-stretch: 112%;
  text-transform: uppercase; letter-spacing: 0.045em; }
.gotik-sus { font-family: 'Pirata One', serif; font-weight: 400; text-transform: lowercase; letter-spacing: 0.01em; }

/* ── HUD ─────────────────────────────────────────────────────────── */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud-tuval { position: absolute; inset: 0; }
.panel-sag {
  position: absolute; right: calc(28px * var(--hud)); top: calc(26px * var(--hud));
  width: calc(330px * var(--hud)); font-size: calc(21px * var(--hud));
  text-transform: uppercase; letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
#hud-kovalama { background: var(--panel); border-radius: calc(10px * var(--hud)) calc(10px * var(--hud)) 0 0; overflow: hidden; }
.hk-satir { display: flex; justify-content: space-between; align-items: center;
  padding: calc(9px * var(--hud)) calc(16px * var(--hud)); border-bottom: 1px solid rgba(255,255,255,0.07); }
.hk-satir b { color: var(--soluk); font-weight: 800; }
.hk-sure-satir { font-size: 1.15em; }
.hk-sure-satir .amber { font-weight: 900; }
.hk-kutular { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: rgba(0,0,0,0.3); }
.hk-kutu { height: calc(48px * var(--hud)); background: rgba(120, 86, 40, 0.55);
  display: flex; align-items: center; justify-content: center; }
.hk-kutu.aktif { background: rgba(150, 105, 45, 0.8); }
.hk-kutu.tamam { background: rgba(240, 163, 72, 0.9); }
.hk-kutu svg { width: 60%; height: 70%; fill: rgba(255,255,255,0.8); }

.simge-krono { display: inline-block; width: 1.05em; height: 1.05em; border: 0.14em solid var(--amber);
  border-radius: 50%; position: relative; margin-right: 0.3em; }
.simge-krono::before { content: ''; position: absolute; left: 50%; top: -0.35em; width: 0.26em; height: 0.2em;
  background: var(--amber); transform: translateX(-50%); }
.simge-krono::after { content: ''; position: absolute; left: 45%; top: 18%; width: 0.12em; height: 40%;
  background: var(--amber); transform-origin: bottom; transform: rotate(35deg); }

/* yarış paneli */
#hud-yaris .hy-ust { display: flex; background: var(--panel); border-radius: calc(10px * var(--hud)) calc(10px * var(--hud)) 0 0; }
.hy-sira { width: 36%; display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; align-items: center;
  padding: calc(6px * var(--hud)) 0; font-weight: 900; font-size: 1.9em; line-height: 1; background: rgba(0,0,0,0.35); }
.hy-sira i { width: 55%; height: 3px; background: var(--yazi); display: block; }
#hy-toplam { font-size: 0.75em; color: var(--soluk); }
.hy-bilgi { flex: 1; display: flex; flex-direction: column; }
.hy-sure-satir, .hy-tur-satir { flex: 1; display: flex; justify-content: space-between; align-items: center;
  padding: 0 calc(14px * var(--hud)); }
.hy-sure-satir { font-weight: 900; font-size: 1.1em; border-bottom: 1px solid rgba(255,255,255,0.08); }
.hy-tur-satir { color: var(--soluk); text-transform: none; }
.hy-tur-satir span:last-child { color: var(--yazi); }
#hud-yaris.tekli .hy-sira { display: none; }
#hy-liste { background: rgba(8,8,8,0.55); }
.hy-satir { display: flex; justify-content: space-between; padding: calc(4px * var(--hud)) calc(14px * var(--hud));
  font-size: 0.8em; color: var(--soluk); border-top: 1px solid rgba(255,255,255,0.05); }
.hy-satir.ben { color: var(--amber); }
.hy-satir.elendi { text-decoration: line-through; opacity: 0.5; }

/* kovalama çubuğu */
#hud-takip { position: absolute; left: 50%; bottom: calc(26px * var(--hud)); transform: translateX(-50%);
  width: calc(430px * var(--hud)); font-size: calc(22px * var(--hud)); text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85); }
.ht-sayilar { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 calc(12px * var(--hud)) calc(6px * var(--hud));
  color: #b9b9b4; font-weight: 800; }
.ht-s { display: flex; align-items: center; gap: 0.3em; }
.ht-s.orta { flex-direction: column; gap: 0; }
.ht-s i { width: 1.6em; height: 1.1em; background: #b9b9b4;
  -webkit-mask: var(--polis-maske) center/contain no-repeat; mask: var(--polis-maske) center/contain no-repeat; }
.ht-s.orta i { width: 2.1em; height: 1.45em; }
.ht-cubuk { background: rgba(10,10,10,0.6); border-radius: calc(10px * var(--hud)); overflow: hidden; }
.ht-etiket { display: flex; justify-content: space-between; padding: calc(4px * var(--hud)) calc(14px * var(--hud)) calc(2px * var(--hud));
  font-weight: 900; color: #c6c5bf; letter-spacing: 0.04em; background: var(--serit); }
.ht-dolgu { position: relative; height: calc(9px * var(--hud)); margin: calc(3px * var(--hud)) calc(10px * var(--hud));
  background: #6f6f6c; display: flex; }
.ht-dolgu::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #fff 0 2px, transparent 2px) 0 0/25% 100%; opacity: 0.8; }
#ht-yakala { position: absolute; right: 50%; top: 0; bottom: 0; width: 0; background: var(--kirmizi); transition: width 0.12s; }
#ht-kacis { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; background: var(--mavi); transition: width 0.12s; }
.ht-orta { position: absolute; left: calc(50% - 5%); width: 10%; top: -1px; bottom: -1px; background: rgba(255,255,255,0.55); }
.ht-alt-kutu { background: var(--tehlike); text-align: center; padding: calc(4px * var(--hud)) 0; font-weight: 900;
  color: #f4e9d8; letter-spacing: 0.04em; position: relative; }
#hud-takip.soguma .ht-alt-kutu { background: linear-gradient(90deg, rgba(60,140,255,0.85) var(--soguma, 0%), rgba(20,40,70,0.7) var(--soguma, 0%)); }

/* drift sayacı (Need For Drift) */
#hud-drift { position: absolute; left: 50%; top: calc(90px * var(--hud)); transform: translateX(-50%);
  text-align: center; text-transform: uppercase; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
#hd-carpan { font-size: calc(30px * var(--hud)); font-weight: 900; color: var(--amber); font-stretch: 120%; }
#hd-puan { font-size: calc(54px * var(--hud)); font-weight: 900; line-height: 1; font-stretch: 115%; }
#hd-toplam { font-size: calc(18px * var(--hud)); color: var(--soluk); }
#hud-drift.yandi #hd-puan { color: var(--kirmizi); text-decoration: line-through; }

/* orta bildirim */
#hud-bildirim { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -10px); text-align: center;
  opacity: 0; transition: opacity 0.25s, transform 0.25s; text-transform: uppercase; }
#hud-bildirim.goster { opacity: 1; transform: translate(-50%, 0); }
.hb-baslik { font-size: calc(46px * var(--hud)); font-weight: 900; font-stretch: 118%; letter-spacing: 0.03em;
  text-shadow: 0 3px 10px rgba(0,0,0,0.9); padding: 0 0.6em; }
.hb-alt { display: inline-block; margin-top: 0.3em; font-size: calc(21px * var(--hud)); font-weight: 800; color: #f4e9d8;
  background: var(--tehlike); padding: 0.2em 1em; text-shadow: 0 1px 2px #000; }
#hud-bildirim.kirmizi .hb-baslik { color: #ff5a4c; }
#hud-bildirim.mavi .hb-baslik { color: #7fb4ff; }
#hud-bildirim.amber .hb-baslik { color: var(--amber); }

#hud-oduller { position: absolute; right: calc(34px * var(--hud)); top: calc(250px * var(--hud)); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hud-odul { font-size: calc(22px * var(--hud)); font-weight: 900; color: var(--amber); text-shadow: 0 2px 4px #000;
  animation: odul 2.6s ease-out forwards; }
@keyframes odul { 0% { opacity: 0; transform: translateX(30px); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

#hud-ipucu { position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%); background: var(--panel);
  padding: calc(10px * var(--hud)) calc(22px * var(--hud)); font-size: calc(21px * var(--hud)); text-transform: uppercase;
  border-top: 3px solid var(--amber); white-space: nowrap; }
#hud-ipucu kbd, #menu kbd { display: inline-block; min-width: 1.6em; padding: 0 0.35em; border: 2px solid var(--amber);
  border-radius: 5px; color: var(--amber); font-family: inherit; font-weight: 900; font-size: 0.85em; text-align: center; margin: 0 0.25em; }

#hud-sayim { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  font-size: calc(170px * var(--hud)); font-weight: 900; font-stretch: 120%; color: #fff; text-shadow: 0 6px 24px rgba(0,0,0,0.8); }
#hud-sayim.vur { animation: vur 0.9s ease-out forwards; }
#hud-sayim.basla { color: var(--amber); }
@keyframes vur { 0% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.92); } }

/* ── MENÜ ───────────────────────────────────────────────────────── */
#menu { position: fixed; inset: 0; z-index: 10; font-size: calc(22px * var(--hud)); }
#menu::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 60% 45%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%); }
#menu-baslik { position: absolute; left: calc(60px * var(--hud)); top: calc(24px * var(--hud));
  font-size: calc(52px * var(--hud)); color: #f6f4ee; line-height: 1;
  text-shadow: 0 3px 0 rgba(0,0,0,0.55), 0 0 18px rgba(0,0,0,0.6);
  padding-left: calc(16px * var(--hud)); border-left: calc(7px * var(--hud)) solid var(--amber); }
#menu-sag-ust { position: absolute; right: calc(60px * var(--hud)); top: calc(40px * var(--hud)); text-align: right; }
.para { font-size: 1.3em; font-weight: 900; color: var(--amber); }
.para-alt { color: var(--soluk); font-size: 0.8em; text-transform: uppercase; }
#menu-icerik { position: absolute; left: calc(60px * var(--hud)); right: calc(60px * var(--hud));
  top: calc(140px * var(--hud)); bottom: calc(210px * var(--hud)); }

/* amber köşe parantezli çerçeve */
.cerceve { position: relative; }
.cerceve::before, .cerceve::after { content: ''; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border-color: var(--amber); border-style: solid; }
.cerceve::before { left: -6px; top: -6px; border-width: 3px 0 0 3px; }
.cerceve::after { right: -6px; bottom: -6px; border-width: 0 3px 3px 0; }
.cerceve > .k1, .cerceve > .k2 { position: absolute; width: 18px; height: 18px; border: 0 solid var(--amber); pointer-events: none; }
.cerceve > .k1 { right: -6px; top: -6px; border-width: 3px 3px 0 0; }
.cerceve > .k2 { left: -6px; bottom: -6px; border-width: 0 0 3px 3px; }

/* alt karusel (ana menü, güvenli ev) */
#menu-karusel { position: absolute; left: 50%; bottom: calc(92px * var(--hud)); transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: calc(26px * var(--hud)); }
.kr-oge { width: calc(96px * var(--hud)); height: calc(96px * var(--hud)); display: flex; align-items: center; justify-content: center;
  opacity: 0.55; transition: opacity 0.15s, transform 0.15s; cursor: pointer; pointer-events: auto; }
.kr-oge svg { width: 72%; height: 72%; fill: #f0efe9; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.7)); }
.kr-oge.secili { opacity: 1; transform: scale(1.18); }
.kr-oge.kilitli svg { fill: #6f6d66; }
.kr-ok { color: var(--amber); font-size: 1.9em; font-weight: 900; opacity: 0.85; cursor: pointer; pointer-events: auto; padding: 0 0.2em; }
#kr-ad { position: absolute; left: 50%; bottom: calc(-46px * var(--hud)); transform: translateX(-50%); white-space: nowrap;
  font-size: 1.25em; font-weight: 800; }

#menu-alt { position: absolute; left: calc(60px * var(--hud)); right: calc(60px * var(--hud)); bottom: calc(22px * var(--hud));
  height: calc(46px * var(--hud)); display: flex; align-items: center; gap: calc(26px * var(--hud));
  background: var(--tehlike); padding: 0 calc(16px * var(--hud)); }
.alt-dugme { display: flex; align-items: center; gap: 0.2em; cursor: pointer; font-weight: 800; text-shadow: 0 1px 2px #000; }
#menu-alt-ek { margin-left: auto; display: flex; gap: calc(26px * var(--hud)); }

/* liste paneli (seçenekler, etkinlikler) */
.liste { background: var(--panel); background-image: var(--serit); max-height: 100%; overflow-y: auto; }
.liste::-webkit-scrollbar { width: 8px; } .liste::-webkit-scrollbar-thumb { background: var(--amber-koyu); }
.satir { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0.42em 1em; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.05); }
.satir:hover, .satir.secili { background: rgba(240,163,72,0.14); color: var(--amber); }
.satir.kilitli { color: #6c6a64; }
.satir .deger { color: var(--yazi); font-weight: 800; }
.satir.secili .deger::before { content: '‹ '; color: var(--amber); }
.satir.secili .deger::after { content: ' ›'; color: var(--amber); }
.satir .tamam { color: var(--yesil); }

.ust-bant { display: flex; align-items: center; gap: 0.7em; background: rgba(240,163,72,0.62); color: #fff;
  padding: 0.35em 1em; font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.ust-bant small { font-weight: 700; opacity: 0.85; margin-left: auto; text-transform: none; }

.iki-sutun { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: calc(34px * var(--hud)); height: 100%; }
.iki-sutun.ust { align-items: start; }
.kart { background: var(--panel); background-image: var(--serit); padding: 0.8em 1em; }
.kart h3 { margin: 0 0 0.4em; font-size: 1.1em; text-transform: uppercase; color: var(--amber); font-weight: 900; }
.kart p { margin: 0.3em 0; color: #d8d6cf; font-weight: 600; font-size: 0.86em; line-height: 1.35; }
.cubuk-satir { display: grid; grid-template-columns: 7em 1fr 2.5em; gap: 0.6em; align-items: center; margin: 0.35em 0; font-size: 0.85em; text-transform: uppercase; }
.cubuk { height: 0.55em; background: rgba(255,255,255,0.1); position: relative; }
.cubuk > i { position: absolute; inset: 0 auto 0 0; background: var(--amber); }
.cubuk > b { position: absolute; inset: 0 auto 0 0; background: rgba(167,214,61,0.8); }

/* Blacklist */
.bl-liste { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.bl-kart { background: var(--panel); padding: 0.4em; cursor: pointer; position: relative; text-align: center; }
.bl-kart .no { font-family: 'Pirata One', serif; font-size: 2.2em; color: var(--amber); line-height: 1; }
.bl-kart .ad { font-weight: 900; text-transform: uppercase; font-size: 0.9em; }
.bl-kart .arac { font-size: 0.7em; color: var(--soluk); }
.bl-kart.yenildi { opacity: 0.45; }
.bl-kart.yenildi::after { content: 'BUSTED'; position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%) rotate(-14deg);
  color: var(--kirmizi); border: 3px solid var(--kirmizi); padding: 0 0.3em; font-weight: 900; font-size: 1.1em; }
.bl-kart.secili { outline: 3px solid var(--amber); }
.bl-kart.alindi { background: rgba(240,163,72,0.28); }
.bl-kart.alindi .ad { color: var(--amber); }
.bl-kart.kilitli { filter: grayscale(1) brightness(0.6); }

.gereksinim { display: grid; grid-template-columns: 1fr auto; gap: 0.3em 1em; font-size: 0.9em; margin-top: 0.5em; }
.gereksinim .ok { color: var(--yesil); } .gereksinim .yok { color: var(--soluk); }
.ilerleme { height: 0.5em; background: rgba(255,255,255,0.12); margin: 0.2em 0 0.6em; position: relative; }
.ilerleme i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--amber), #ffcf7a); }

.buyuk-dugme { display: inline-block; margin-top: 0.8em; padding: 0.45em 1.4em; background: var(--amber); color: #1b1206;
  font-weight: 900; text-transform: uppercase; cursor: pointer; letter-spacing: 0.03em; }
.buyuk-dugme.kapali { background: #4a4843; color: #8a877f; cursor: default; }

/* sonuç / ödül ekranı (Bounty Achieved) */
.sonuc { width: min(820px, 90%); margin: 6vh auto 0; }
.sonuc .ust-bant { font-size: 1.3em; }
.sonuc table { width: 100%; border-collapse: collapse; background: var(--panel); background-image: var(--serit); }
.sonuc td { padding: 0.35em 1em; border-bottom: 1px solid rgba(255,255,255,0.05); }
.sonuc td:last-child { text-align: right; font-weight: 900; }
.sonuc tr.ben td { color: var(--amber); }
.sonuc .toplam { background: rgba(240,163,72,0.25); padding: 0.4em 1em; text-align: center; font-weight: 900; }

/* dünya haritası */
#harita-ekran { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 22em; gap: 20px; }
#harita-ekran canvas { width: 100%; height: 100%; background: rgba(10,10,10,0.8); }
.harita-lejant { background: var(--panel); padding: 0.6em 1em; }
.harita-lejant div { display: flex; align-items: center; gap: 0.5em; margin: 0.3em 0; }
.harita-lejant i { width: 0.9em; height: 0.9em; border-radius: 50%; display: inline-block; }

/* yükleme ve perde */
#perde { position: fixed; inset: 0; background: #000; z-index: 50; pointer-events: none; opacity: 0; transition: opacity 0.35s; }
#perde.acik { opacity: 1; }
#yukleniyor { position: fixed; inset: 0; z-index: 60; background: #070707 radial-gradient(ellipse at 50% 40%, #2b2618 0%, #050505 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; transition: opacity 0.5s; }
.yk-logo { display: flex; align-items: baseline; gap: 0.18em; font-weight: 900; font-stretch: 125%; font-style: italic;
  font-size: min(9vw, 110px); letter-spacing: -0.02em; text-shadow: 0 6px 30px rgba(0,0,0,0.9); }
.yk-need { color: #f2f0ea; }
.yk-for { color: var(--amber); font-size: 0.45em; font-style: normal; font-family: 'Pirata One', serif; font-weight: 400; }
.yk-drift { color: #f2f0ea; -webkit-text-stroke: 2px var(--amber); color: transparent; }
.yk-cubuk { width: min(520px, 70vw); height: 8px; background: rgba(255,255,255,0.08); }
#yk-dolgu { height: 100%; width: 0; background: var(--tehlike); background-color: var(--amber); transition: width 0.2s; }
#yk-metin { color: var(--soluk); text-transform: uppercase; font-size: 15px; letter-spacing: 0.1em; }

/* polis simge maskesi (satır içi SVG, JS'de değişkene yazılıyor) */
:root { --polis-maske: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M22 2h20v5H22z M10 12l6-6h32l6 6 6 3v14H4V15z M8 30h12v8H8z M44 30h12v8H44z'/%3E%3C/svg%3E"); }

/* ── dokunmatik kumanda (telefon/tablet) ────────────────────────────
 * Düğmeler parmak boyutunda (vmin): 1080p masaüstünde de aynı düzen
 * çalışıyor, ekran küçüldükçe oransal küçülüyor ama 56px'in altına
 * inmiyor. Hepsi #hud'un ÜSTÜNDE ve pointer-events: auto — HUD'un
 * kendisi tıklamayı yutmuyor (bkz. hafıza: canvas-girdi-yutan-katman).
 */
#dokun { position: fixed; inset: 0; z-index: 7; pointer-events: none; --dk: clamp(56px, 11vmin, 108px); }
#dokun .dk-btn, #dokun .dk-mini { pointer-events: auto; touch-action: none; }
.dk-btn {
  width: var(--dk); height: var(--dk); border-radius: 50%;
  background: rgba(14,14,14,0.46); border: 2px solid rgba(255,255,255,0.32);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: calc(var(--dk) * 0.22); letter-spacing: 0.04em;
  backdrop-filter: blur(2px); transition: transform 0.06s, background 0.1s;
}
.dk-btn svg { width: 52%; height: 52%; fill: #fff; opacity: 0.92; }
.dk-btn.basili { background: rgba(240,163,72,0.72); transform: scale(0.94); border-color: #fff; }
.dk-yonler { position: absolute; left: calc(var(--dk) * 0.28); bottom: calc(var(--dk) * 0.3); display: flex; gap: calc(var(--dk) * 0.22); }
.dk-yon { width: calc(var(--dk) * 1.18); height: calc(var(--dk) * 1.18); }
.dk-pedallar { position: absolute; right: calc(var(--dk) * 0.28); bottom: calc(var(--dk) * 0.3); display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--dk) * 0.18); }
.dk-ust-sira, .dk-alt-sira { display: flex; align-items: flex-end; gap: calc(var(--dk) * 0.2); }
.dk-mini2 { width: calc(var(--dk) * 0.72); height: calc(var(--dk) * 0.72); font-size: calc(var(--dk) * 0.17); }
.dk-gaz { width: calc(var(--dk) * 1.25); height: calc(var(--dk) * 1.25); background: rgba(80,150,50,0.42); }
.dk-fren { background: rgba(170,50,40,0.42); }
.dk-nitro { background: rgba(60,120,220,0.42); }
.dk-ust { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--dk) * 0.18); display: flex; gap: calc(var(--dk) * 0.18); }
.dk-mini {
  min-width: calc(var(--dk) * 0.64); height: calc(var(--dk) * 0.64); padding: 0 calc(var(--dk) * 0.14);
  border-radius: calc(var(--dk) * 0.16); background: rgba(14,14,14,0.5); border: 2px solid rgba(255,255,255,0.28);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: calc(var(--dk) * 0.2); font-weight: 900;
}
.dk-mini:active { background: rgba(240,163,72,0.7); }
.dk-vites { position: absolute; left: calc(var(--dk) * 0.3); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: calc(var(--dk) * 0.2); }

/* dünyadaki işarete girince çıkan büyük onay düğmesi (fare + dokunma) */
#hud-etkilesim {
  position: absolute; left: 50%; bottom: calc(150px * var(--hud)); transform: translateX(-50%);
  pointer-events: auto; cursor: pointer;
  padding: calc(12px * var(--hud)) calc(34px * var(--hud));
  background: var(--tehlike); border: 2px solid var(--amber);
  color: #fff; font-size: calc(26px * var(--hud)); font-weight: 900; letter-spacing: 0.06em;
  text-shadow: 0 2px 4px #000; box-shadow: 0 4px 18px rgba(0,0,0,0.5);
  animation: he-nabiz 1.1s ease-in-out infinite;
}
#hud-etkilesim:active { transform: translateX(-50%) scale(0.96); }
@keyframes he-nabiz { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }

/* dar ekran (telefon): menü panelleri tek sütun ve tam genişlik */
@media (max-width: 760px) {
  .iki-sutun { grid-template-columns: 1fr; gap: calc(14px * var(--hud)); }
  #menu-icerik { padding: 0 10px; }
  .kart { width: 100% !important; }
  .bl-liste { grid-template-columns: repeat(3, 1fr) !important; }
  #menu-alt .alt-dugme kbd { display: none; }
}

/* ödüllü reklam düğmesi + yer tutucu perde */
.x2-dugme { background: linear-gradient(180deg, #2f7d32, #1f5a22); border-color: #8fd08f; }
#reklam-perde { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,0.88); display: flex; align-items: center; justify-content: center; }
.rp-kutu { text-align: center; }
.rp-baslik { font-size: calc(34px * var(--hud)); font-weight: 900; letter-spacing: 0.1em; color: var(--amber); }
.rp-alt { color: var(--soluk); margin: 6px 0 18px; }
.rp-cubuk { width: min(60vw, 420px); height: 8px; background: #2a2a2a; margin: 0 auto; }
.rp-cubuk i { display: block; height: 100%; width: 0; background: var(--amber); animation: rp-dol 3s linear forwards; }
@keyframes rp-dol { to { width: 100%; } }