/*
  oyun.css — arayuz dili: KLAVYE KAPAGI, Roblox yuzey islemesiyle.

  ── NEDEN "DUZ RENKLI DIKDORTGEN" DEGIL ────────────────────────────
  Ilk surumde dugmeler beyaz dikdortgen + tek duz golgeydi ve sahibi
  "berbat gorunuyor" dedi.  Eksik olan palet degil YUZEY ISLEMESI;
  dordu birden olmadan hicbir dugme "oyun dugmesi" gibi durmuyor:

   1. PLAKA DOKUSU  — satir ici SVG, kucuk L koseler (biri acik biri
      koyu).  Yuzeyi "cizilmis" degil "uretilmis" gosteren tek en
      buyuk fark.  Dis dosya yok.
   2. PAH           — ustte ic acik cizgi + altta ic koyu cizgi +
      disa dusen govde golgesi.  Basilinca dudak yutulur.
   3. KONTUR        — her yazi kalin siyah konturlu
      (`-webkit-text-stroke` + `paint-order: stroke fill`).  Kural
      SINIFA degil KATMANA veriliyor: panellerin icini JS uretiyor ve
      orada tek tek sinif yazmak unutuluyor.
   4. DIKEY GECIS   — hicbir yuzey tek renk degil.

  ── HAREKET ────────────────────────────────────────────────────────
  Her sey yayli (`--yay`) egriyle giriyor: panel hafif tasarak
  oturuyor, kart sirayla beliriyor, sayac yuvarlanarak degisiyor.
  Hareket YOKSA arayuz "statik sablon" gibi duruyor; hareket VARSA
  ayni yerlesim canli.  `prefers-reduced-motion` hepsini kapatiyor.

  ── HUD TIKLAMAYI YUTMASIN ─────────────────────────────────────────
  Kapsayicilar `pointer-events: none`, yalniz dugmeler `auto`.
*/

@font-face {
  font-family: 'Pixelify Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/PixelifySans-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Pixelify Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/PixelifySans-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/rubik-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/rubik-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/rubik-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  /*
    Olcu birimi.  `1.55vmin` kullanan surumde 375x812 telefonda
    vmin = 375 -> 5.8px -> alt sinira dusuyor ve butun arayuz minik
    kaliyordu.  `vmax` telefonda uzun kenari, masaustunde genisligi
    veriyor; `vw` siniri dar-uzun ekranda tasmayi engelliyor.
      375x812 -> 13.8px   ·   1280x720 -> 19px (ust sinir)
  */
  --u: clamp(12px, min(1.7vmax, 4.4vw), 19px);

  --baslik: 'Pixelify Sans', 'Segoe UI Black', monospace;
  --govde: 'Rubik', 'Segoe UI', Arial, sans-serif;

  --kontur: #0b0e15;
  --metin: #f2f6fc;
  --soluk: #a3b0c6;

  /* Palet oyunun KENDI tus renklerinden turetildi (lobi.js/SATIR_RENK);
     hazir kutuphane paleti "AI gibi duruyor"un birinci sebebi. */
  --mavi: #3fa8e8;      --mavi-a: #a8e2ff;
  --yesil: #57c94a;     --yesil-a: #b6f292;
  --altin: #ffc42e;     --altin-a: #ffe99a;   --altin-k: #b87706;
  --mor: #9a5ce0;       --mor-a: #d8b4ff;
  --kirmizi: #ef4b3a;   --kirmizi-a: #ffa896;
  --gri: #8e9ab1;       --gri-a: #dbe3f0;
  --camgobegi: #36d4c8;

  /* Roblox "stud plate": kucuk L koseler, biri acik biri koyu. */
  --plaka: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><path d='M4 4h10v10' fill='none' stroke='%23ffffff' stroke-opacity='.17' stroke-width='1.7'/><path d='M4 4v10h10' fill='none' stroke='%23000000' stroke-opacity='.15' stroke-width='1.7'/></svg>");
  --plaka-boy: calc(var(--u) * 1.9);

  --pah: inset 0 calc(var(--u) * .28) 0 rgba(255, 255, 255, .5),
         inset 0 calc(var(--u) * -.52) 0 rgba(0, 0, 0, .32),
         0 calc(var(--u) * .34) 0 rgba(0, 0, 0, .45),
         0 calc(var(--u) * .62) calc(var(--u) * .7) rgba(0, 0, 0, .34);
  --pah-basili: inset 0 calc(var(--u) * .26) 0 rgba(255, 255, 255, .3),
                inset 0 calc(var(--u) * -.18) 0 rgba(0, 0, 0, .3),
                0 calc(var(--u) * .08) 0 rgba(0, 0, 0, .45);

  --yay: cubic-bezier(.2, 1.5, .4, 1);
  --yumusak: cubic-bezier(.22, .85, .25, 1);
}

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

html, body {
  height: 100%; overflow: hidden; background: #0b0e15; color: var(--metin);
  font-family: var(--govde); font-weight: 700;
  user-select: none; -webkit-user-select: none;
  overscroll-behavior: none; touch-action: manipulation;
}

#sahne { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.gizli { display: none !important; }
.ikon { width: 1.3em; height: 1.3em; flex: none; }

/*
  Kontur KATMANA veriliyor.  Yalniz bir sinifa baglanan surumde
  panellerin JS ile uretilen ici konturusuz kaliyor ve orada beyaz
  yazi arka plana gomuluyor.
*/
#menu, #hud, #perde, #ortu, #tiklaBasla {
  -webkit-text-stroke: calc(var(--u) * .13) var(--kontur);
  paint-order: stroke fill;
}
/* Kontur kucuk puntoda harfleri kapatiyor — ince yazilarda inceltilir. */
.ince-kontur, .urun .ad, .urun .fiyat, .tablo, .adim p, .sonuc p, .olcer-birim,
.menu-istatistik i, .perde-yazi, .vitrin-bilgi p, .olcer-etiket {
  -webkit-text-stroke-width: calc(var(--u) * .07);
}

/* ══ Marka ═══════════════════════════════════════════════════════ */

.marka { text-align: center; }
.marka-ad {
  font-family: var(--baslik);
  font-size: calc(var(--u) * 3.4); font-weight: 700; letter-spacing: .05em; line-height: 1;
  color: #fff;
  -webkit-text-stroke: calc(var(--u) * .2) var(--kontur);
  paint-order: stroke fill;
  text-shadow:
    0 calc(var(--u) * .12) 0 #0a0d14,
    0 calc(var(--u) * .3) 0 var(--camgobegi),
    0 calc(var(--u) * .46) 0 #0a0d14,
    0 calc(var(--u) * .9) calc(var(--u) * .9) rgba(0, 0, 0, .55);
}
.marka-alt {
  /* Baslik uc kademeli golge tasiyor; 0.62u ile alt baslik golgenin
     icine giriyor ve okunmuyordu. */
  margin-top: calc(var(--u) * 1.15); font-size: calc(var(--u) * 1.02);
  letter-spacing: .32em; color: #d6e2f2; font-weight: 800;
  -webkit-text-stroke: calc(var(--u) * .12) var(--kontur);
  paint-order: stroke fill;
}
.marka-alt b { color: var(--altin); }
.marka.buyuk .marka-ad { font-size: calc(var(--u) * 4.4); animation: markaSuz 5.5s ease-in-out infinite; }
@keyframes markaSuz {
  0%, 100% { transform: translateY(0) rotate(-.4deg); }
  50% { transform: translateY(calc(var(--u) * -.34)) rotate(.4deg); }
}

.marka-tuslar { display: flex; gap: calc(var(--u) * .34); justify-content: center; margin-bottom: calc(var(--u) * 1.2); }
.marka-tuslar i {
  width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4);
  display: grid; place-items: center; font-style: normal; font-weight: 700;
  font-family: var(--baslik); font-size: calc(var(--u) * 1.3);
  color: #1b2030;
  background: var(--plaka), linear-gradient(180deg, #ffffff, #c8d2e0);
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .16) solid var(--kontur);
  border-radius: calc(var(--u) * .34);
  box-shadow: var(--pah);
  -webkit-text-stroke: 0;
  animation: tusBas 1.6s ease-in-out infinite;
}
@keyframes tusBas {
  0%, 62%, 100% { transform: translateY(0); box-shadow: var(--pah); }
  72% { transform: translateY(calc(var(--u) * .26)); box-shadow: var(--pah-basili); }
}

/* ══ Perde ═══════════════════════════════════════════════════════ */

#perde {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 18%, #26365c 0%, #0b0e15 68%),
    var(--plaka);
  background-size: 100% 100%, var(--plaka-boy);
}
.perde-ic { display: grid; gap: calc(var(--u) * 1.6); justify-items: center; padding: var(--u); }
.cubuk {
  position: relative;
  width: min(68vw, calc(var(--u) * 24)); height: calc(var(--u) * 1.5);
  background: linear-gradient(180deg, #0a0d14, #161b26);
  border: calc(var(--u) * .16) solid var(--kontur);
  border-radius: calc(var(--u) * .75); overflow: hidden;
  box-shadow: inset 0 calc(var(--u) * .2) calc(var(--u) * .3) rgba(0, 0, 0, .7);
}
.cubuk i {
  display: block; height: 100%; width: 0;
  background: var(--plaka), linear-gradient(180deg, var(--camgobegi), #1b8f88);
  background-size: var(--plaka-boy), 100% 100%;
  box-shadow: inset 0 calc(var(--u) * .2) 0 rgba(255, 255, 255, .45);
  transition: width .32s var(--yumusak);
}
.cubuk span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: calc(var(--u) * .82); font-weight: 900; letter-spacing: .08em;
}
.perde-yazi { color: var(--soluk); font-size: calc(var(--u) * .95); letter-spacing: .14em; }

/* ══ Tus kapagi dugme ════════════════════════════════════════════ */

.kap {
  position: relative; overflow: hidden;
  font-family: var(--govde); font-weight: 900;
  font-size: calc(var(--u) * 1.06); letter-spacing: .05em;
  display: inline-flex; align-items: center; gap: calc(var(--u) * .7);
  padding: calc(var(--u) * .72) calc(var(--u) * 1.1);
  color: #fff;
  background: var(--plaka), linear-gradient(180deg, var(--gri-a), var(--gri));
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .18) solid var(--kontur);
  border-radius: calc(var(--u) * .55);
  box-shadow: var(--pah);
  cursor: pointer;
  min-height: max(46px, calc(var(--u) * 3.3));
  transition: transform .11s var(--yumusak), box-shadow .11s var(--yumusak), filter .16s;
  -webkit-text-stroke: calc(var(--u) * .14) var(--kontur);
  paint-order: stroke fill;
}
/* Ustten gecen parlama: yuzeyin cam oldugunu soyleyen tek katman. */
.kap::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .42) 50%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}
.kap:hover::after { animation: parilti .62s var(--yumusak); }
@keyframes parilti { to { transform: translateX(120%); } }
.kap:hover { transform: translateY(calc(var(--u) * -.1)); filter: brightness(1.06); }
.kap:active, .kap.basili {
  transform: translateY(calc(var(--u) * .26)) scale(.985);
  box-shadow: var(--pah-basili);
}
.kap[disabled] { filter: grayscale(.72) brightness(.72); cursor: default; }
.kap[disabled]:hover { transform: none; }

.kap-ikon {
  display: grid; place-items: center; flex: none;
  width: calc(var(--u) * 2.1); height: calc(var(--u) * 2.1);
  background: rgba(0, 0, 0, .26);
  border-radius: calc(var(--u) * .36);
  box-shadow: inset 0 calc(var(--u) * .12) 0 rgba(0, 0, 0, .4), inset 0 calc(var(--u) * -.1) 0 rgba(255, 255, 255, .18);
}
.kap-ikon .ikon { width: 88%; height: 88%; }
.kap-yazi { flex: 1; text-align: center; }
/*
  Ikon solda dururken etiket kalan alanin ortasina yaslaniyor, yani
  dugmenin ortasindan 1.4u sagda duruyordu.  Sagda ikon genisliginde
  hayalet bir bosluk dengeliyor.
*/
.kap:has(.kap-ikon)::before {
  content: ''; order: 3; flex: none;
  width: calc(var(--u) * 2.1);
}
.kap.buyuk-kap:has(.kap-ikon)::before { width: calc(var(--u) * 2.7); }
.kap-sira .kap:has(.kap-ikon)::before { width: calc(var(--u) * 1.3); }

.kap.mavi { background-image: var(--plaka), linear-gradient(180deg, var(--mavi-a), var(--mavi)); }
.kap.yesil { background-image: var(--plaka), linear-gradient(180deg, var(--yesil-a), var(--yesil)); }
.kap.altin { background-image: var(--plaka), linear-gradient(180deg, var(--altin-a), var(--altin)); }
.kap.mor { background-image: var(--plaka), linear-gradient(180deg, var(--mor-a), var(--mor)); }
.kap.kirmizi { background-image: var(--plaka), linear-gradient(180deg, var(--kirmizi-a), var(--kirmizi)); }
.kap.gri { background-image: var(--plaka), linear-gradient(180deg, var(--gri-a), var(--gri)); }
.kap.buyuk-kap { font-size: calc(var(--u) * 1.42); min-height: max(56px, calc(var(--u) * 4.2)); }
.kap.buyuk-kap .kap-ikon { width: calc(var(--u) * 2.7); height: calc(var(--u) * 2.7); }

.mini {
  width: max(44px, calc(var(--u) * 2.8)); height: max(44px, calc(var(--u) * 2.8));
  display: grid; place-items: center; cursor: pointer; flex: none;
  background: var(--plaka), linear-gradient(180deg, #3b465c, #1d2534);
  background-size: var(--plaka-boy), 100% 100%;
  color: var(--metin);
  border: calc(var(--u) * .16) solid var(--kontur);
  border-radius: calc(var(--u) * .42);
  box-shadow: var(--pah);
  transition: transform .1s var(--yumusak), box-shadow .1s;
}
.mini:hover { filter: brightness(1.12); }
.mini:active { transform: translateY(calc(var(--u) * .2)); box-shadow: var(--pah-basili); }
.mini .ikon { width: 62%; height: 62%; }

/* ══ Rozet ═══════════════════════════════════════════════════════ */

.rozet {
  display: inline-flex; align-items: center; gap: calc(var(--u) * .42);
  background: var(--plaka), linear-gradient(180deg, #333e52, #171d29);
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .16) solid var(--kontur);
  border-radius: calc(var(--u) * .55);
  padding: calc(var(--u) * .34) calc(var(--u) * .78);
  font-weight: 900; font-size: calc(var(--u) * 1.06);
  box-shadow: var(--pah);
}
/* Para sayisi PARANIN renginde — beyaz sayi "AI gibi duruyor"un
   klasik isaretlerinden. */
.rozet.altin b { color: var(--altin-a); }
.rozet .ikon { width: calc(var(--u) * 1.35); height: calc(var(--u) * 1.35); }
.rozet.zipla { animation: rozetZipla .42s var(--yay); }
@keyframes rozetZipla {
  0% { transform: scale(1); } 45% { transform: scale(1.18) rotate(-2deg); } 100% { transform: scale(1); }
}

/* ══ Ana menu ════════════════════════════════════════════════════ */

.ekran { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; }
#menu {
  background:
    linear-gradient(180deg, rgba(8, 11, 18, .74) 0%, rgba(8, 11, 18, .06) 34%, rgba(8, 11, 18, .1) 58%, rgba(8, 11, 18, .82) 100%);
  animation: menuGir .45s var(--yumusak);
}
@keyframes menuGir { from { opacity: 0; } to { opacity: 1; } }

.menu-ust {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(var(--u) * .9) calc(var(--u) * 1.1);
  padding-top: max(calc(var(--u) * .9), env(safe-area-inset-top));
}
.menu-orta {
  flex: 1; display: grid; place-content: center; justify-items: center;
  gap: calc(var(--u) * 1.7); padding: var(--u) var(--u) calc(var(--u) * 2.4);
}
.menu-dugmeler { display: grid; gap: calc(var(--u) * .62); width: min(90vw, calc(var(--u) * 24)); }
.menu-dugmeler > * { animation: dugmeGir .42s var(--yay) backwards; }
.menu-dugmeler > *:nth-child(1) { animation-delay: .06s; }
.menu-dugmeler > *:nth-child(2) { animation-delay: .13s; }
.menu-dugmeler > *:nth-child(3) { animation-delay: .2s; }
@keyframes dugmeGir {
  from { opacity: 0; transform: translateY(calc(var(--u) * 1.4)) scale(.92); }
  to { opacity: 1; transform: none; }
}
.kap-sira { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .62); }
.kap-sira .kap {
  font-size: calc(var(--u) * .88); line-height: 1.12;
  padding-left: calc(var(--u) * .5); padding-right: calc(var(--u) * .5);
  gap: calc(var(--u) * .42);
}
.kap-sira .kap-ikon { width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); }

.menu-istatistik {
  display: flex; gap: calc(var(--u) * .5);
  animation: dugmeGir .42s var(--yay) .28s backwards;
}
.ist {
  display: inline-flex; align-items: center; gap: calc(var(--u) * .34);
  background: var(--plaka), linear-gradient(180deg, rgba(48, 58, 78, .9), rgba(16, 21, 31, .92));
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .14) solid var(--kontur);
  border-radius: calc(var(--u) * .48);
  padding: calc(var(--u) * .34) calc(var(--u) * .66);
  box-shadow: var(--pah);
  font-size: calc(var(--u) * .92);
}
.ist .ikon { width: calc(var(--u) * 1.15); height: calc(var(--u) * 1.15); }
.ist b { font-size: calc(var(--u) * 1.15); font-weight: 900; }
.ist i { font-style: normal; color: var(--soluk); font-weight: 700; font-size: calc(var(--u) * .8); }

.diller { display: flex; gap: calc(var(--u) * .3); }
.diller button {
  font-family: var(--govde); font-weight: 900;
  font-size: calc(var(--u) * .9); letter-spacing: .06em; color: #cdd7e8;
  padding: calc(var(--u) * .3) calc(var(--u) * .5); cursor: pointer;
  background: var(--plaka), linear-gradient(180deg, #38445c, #1a2130);
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .14) solid var(--kontur);
  border-radius: calc(var(--u) * .4);
  box-shadow: var(--pah);
  min-width: 46px; min-height: 44px;
  transition: transform .1s var(--yumusak), filter .16s;
  -webkit-text-stroke: calc(var(--u) * .1) var(--kontur);
  paint-order: stroke fill;
}
.diller button:active { transform: translateY(calc(var(--u) * .18)); box-shadow: var(--pah-basili); }
.diller button.etkin {
  background-image: var(--plaka), linear-gradient(180deg, var(--camgobegi), #1b8f88);
  color: #04241f;
}

/* ══ HUD ═════════════════════════════════════════════════════════ */

#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#hud .mini { pointer-events: auto; }

.hud-sol {
  position: absolute; left: calc(var(--u) * .8); top: max(calc(var(--u) * .8), env(safe-area-inset-top));
  display: grid; gap: calc(var(--u) * .4); justify-items: start;
}
.olcer {
  display: flex; align-items: center; gap: calc(var(--u) * .44);
  background: var(--plaka), linear-gradient(180deg, rgba(52, 63, 84, .95), rgba(14, 18, 28, .95));
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .16) solid var(--kontur);
  border-radius: calc(var(--u) * .5);
  padding: calc(var(--u) * .3) calc(var(--u) * .62) calc(var(--u) * .3) calc(var(--u) * .3);
  box-shadow: var(--pah);
  min-width: calc(var(--u) * 8.4);
  animation: olcerGir .4s var(--yay) backwards;
}
@keyframes olcerGir { from { opacity: 0; transform: translateX(calc(var(--u) * -1.6)); } to { opacity: 1; transform: none; } }
.olcer-ikon {
  display: grid; place-items: center; flex: none;
  width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9);
  background: rgba(0, 0, 0, .34); border-radius: calc(var(--u) * .34);
  box-shadow: inset 0 calc(var(--u) * .1) 0 rgba(0, 0, 0, .5);
}
.olcer-ikon .ikon { width: 84%; height: 84%; }
.olcer-govde { display: grid; gap: calc(var(--u) * .14); flex: 1; }
.olcer b { font-size: calc(var(--u) * 1.22); font-weight: 900; line-height: 1; }
.olcer-birim { font-size: calc(var(--u) * .76); color: var(--soluk); font-weight: 800; }
.olcer-etiket { font-size: calc(var(--u) * .68); color: var(--soluk); font-weight: 700; letter-spacing: .06em; }
.olcer.hiz b { color: #b6f0ff; }
.olcer.altin b { color: var(--altin-a); }
.olcer.mor b { color: var(--mor-a); }

.olcer-bar {
  display: block; height: calc(var(--u) * .3); width: calc(var(--u) * 4.6);
  background: rgba(0, 0, 0, .55); border-radius: calc(var(--u) * .18); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6);
}
.olcer-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #3fc6e8, #b6f0ff);
  transition: width .3s var(--yumusak);
}
.olcer.parla { animation: olcerParla .5s var(--yumusak); }
@keyframes olcerParla {
  0% { filter: brightness(2.1); transform: scale(1.08); }
  100% { filter: brightness(1); transform: scale(1); }
}

.hud-sag {
  position: absolute; right: calc(var(--u) * .8); top: max(calc(var(--u) * .8), env(safe-area-inset-top));
  display: grid; gap: calc(var(--u) * .5); justify-items: end;
}
.canlar { display: flex; gap: calc(var(--u) * .2); }
.canlar .ikon { width: calc(var(--u) * 2); height: calc(var(--u) * 2); filter: drop-shadow(0 calc(var(--u) * .12) 0 rgba(0, 0, 0, .55)); }
/* 0.2 opaklikta bos kalp koyu arka planda hic gorunmuyor ve
   oyuncu kac hakki oldugunu degil kac hakki KALDIGINI bile
   okuyamiyordu. */
.canlar .bos { opacity: .34; filter: grayscale(1) brightness(.75); }
.canlar .yeni { animation: canZipla .5s var(--yay); }
@keyframes canZipla { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: scale(1); } }
.canlar.kayip { animation: canSars .38s; }
@keyframes canSars {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(calc(var(--u) * -.5)); }
  55% { transform: translateX(calc(var(--u) * .4)); }
}

.tablo {
  background: var(--plaka), linear-gradient(180deg, rgba(46, 56, 76, .95), rgba(13, 17, 26, .95));
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .16) solid var(--kontur);
  border-radius: calc(var(--u) * .5);
  padding: calc(var(--u) * .44) calc(var(--u) * .55);
  box-shadow: var(--pah);
  font-size: calc(var(--u) * .82); display: grid; gap: calc(var(--u) * .16);
  min-width: calc(var(--u) * 12);
}
.tablo h4 {
  font-size: calc(var(--u) * .72); color: var(--soluk); letter-spacing: .14em; font-weight: 800;
  padding-bottom: calc(var(--u) * .2); margin-bottom: calc(var(--u) * .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.tablo .satirB {
  display: flex; align-items: center; gap: calc(var(--u) * .4);
  padding: calc(var(--u) * .1) calc(var(--u) * .18); border-radius: calc(var(--u) * .24);
  transition: background .3s;
}
.tablo .satirB span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tablo .satirB b { color: var(--altin-a); font-weight: 900; }
.tablo .sira { width: calc(var(--u) * 1.15); text-align: center; color: var(--soluk); font-size: calc(var(--u) * .72); }
.tablo .ben { background: rgba(54, 212, 200, .22); box-shadow: inset 0 0 0 1px rgba(54, 212, 200, .45); }
.tablo .ben span { color: #a9fff6; }

/* Oda ilerleme cubugu: ekranin ustunde ince serit */
.oda-ilerleme {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: max(calc(var(--u) * .5), env(safe-area-inset-top));
  width: min(38vw, calc(var(--u) * 18)); height: calc(var(--u) * .5);
  background: rgba(6, 9, 15, .78);
  border: calc(var(--u) * .12) solid var(--kontur);
  border-radius: calc(var(--u) * .3); overflow: hidden;
  box-shadow: var(--pah);
}
.oda-ilerleme i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--yesil), var(--altin));
  box-shadow: inset 0 calc(var(--u) * .14) 0 rgba(255, 255, 255, .4);
  transition: width .18s linear;
}

.hud-alt { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 6.2); display: grid; justify-items: center; }
.ipucu {
  background: var(--plaka), linear-gradient(180deg, rgba(58, 70, 94, .96), rgba(16, 21, 32, .96));
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .16) solid var(--kontur);
  border-radius: calc(var(--u) * .5);
  padding: calc(var(--u) * .46) calc(var(--u) * 1); font-weight: 900;
  font-size: calc(var(--u) * 1); text-align: center;
  box-shadow: var(--pah);
  animation: ipucuGir .3s var(--yay);
}
@keyframes ipucuGir { from { opacity: 0; transform: translateY(calc(var(--u) * .8)); } to { opacity: 1; transform: none; } }

/* Panellerden YUKSEK katman: magazadaki "Alindi!" uyarisi panelin
   altinda kalmasin (z-index 60 = panel katmani). */
#bildirimler {
  position: fixed; left: 50%; top: 21%; transform: translateX(-50%);
  z-index: 70; pointer-events: none;
  display: grid; gap: calc(var(--u) * .26); justify-items: center;
}
.bildirim {
  font-family: var(--baslik); font-weight: 700;
  font-size: calc(var(--u) * 1.75); color: var(--altin-a);
  -webkit-text-stroke: calc(var(--u) * .2) var(--kontur);
  paint-order: stroke fill;
  text-shadow: 0 calc(var(--u) * .18) 0 rgba(0, 0, 0, .55);
  animation: yuksel 1.15s var(--yumusak) forwards;
  white-space: nowrap;
}
.bildirim.hiz { color: #b6f0ff; }
.bildirim.kotu { color: var(--kirmizi-a); }
.bildirim.iyi { color: #c8ffb0; }
@keyframes yuksel {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 1)) scale(.7) rotate(-5deg); }
  18% { opacity: 1; transform: translateY(0) scale(1.14) rotate(1.5deg); }
  32% { transform: translateY(0) scale(1) rotate(0); }
  100% { opacity: 0; transform: translateY(calc(var(--u) * -2.6)) scale(.95); }
}

/* Oda perdesi: yeni odaya girerken beliren baslik */
#odaPerdesi {
  position: absolute; left: 0; right: 0; top: 30%;
  display: grid; justify-items: center; gap: calc(var(--u) * .3);
  animation: odaPerde 2.1s var(--yumusak) forwards;
}
#odaPerdesi span {
  font-family: var(--baslik); font-size: calc(var(--u) * 3.1); font-weight: 700;
  color: #fff; -webkit-text-stroke: calc(var(--u) * .22) var(--kontur); paint-order: stroke fill;
  text-shadow: 0 calc(var(--u) * .3) 0 var(--mor), 0 calc(var(--u) * .5) 0 var(--kontur);
}
#odaPerdesi em {
  font-style: normal; font-weight: 900; letter-spacing: .24em;
  font-size: calc(var(--u) * 1); color: var(--altin-a);
  background: rgba(8, 11, 18, .72); padding: calc(var(--u) * .2) calc(var(--u) * .9);
  border-radius: calc(var(--u) * .3);
}
@keyframes odaPerde {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 2)) scale(.8); }
  14% { opacity: 1; transform: translateY(0) scale(1.06); }
  22% { transform: translateY(0) scale(1); }
  78% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(calc(var(--u) * -1.2)) scale(.94); }
}

#zararPerde {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(118% 82% at 50% 50%, transparent 38%, rgba(220, 40, 30, .8) 100%);
  transition: opacity .28s;
}
#zararPerde.etkin { opacity: 1; transition: none; }

/* Hiz perdesi: yuksek hizda kenarlardan gecen parilti */
#hizPerde {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(110% 76% at 50% 50%, transparent 52%, rgba(120, 220, 255, .3) 100%);
  transition: opacity .35s var(--yumusak);
}

#dDuraklat { position: absolute; right: calc(var(--u) * .8); bottom: max(calc(var(--u) * .8), env(safe-area-inset-bottom)); }

/* ══ Paneller ════════════════════════════════════════════════════ */

#ortu {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6, 9, 15, .62);
  display: grid; place-items: center; padding: calc(var(--u) * .8);
  backdrop-filter: blur(calc(var(--u) * .3));
  animation: ortuGir .22s ease-out;
}
@keyframes ortuGir { from { opacity: 0; } to { opacity: 1; } }

/*
  Panel OPAK.  `rgba(...,.94)` ile cizilen surumde arkadaki oyun
  satirlarin arasindan okunuyor ve panel "yarim bitmis" duruyor.
*/
.panel {
  width: min(96vw, calc(var(--u) * 46)); max-height: 92vh; display: flex; flex-direction: column;
  background: var(--plaka), linear-gradient(180deg, #2b3448, #151a26);
  /* Buyuk yuzeyde 1.9u'luk plaka "izgara" gibi okunuyor; panelde
     yarim olcek doku hissini koruyup gurultuyu aliyor. */
  background-size: calc(var(--plaka-boy) * .55), 100% 100%;
  border: calc(var(--u) * .22) solid var(--kontur);
  border-radius: calc(var(--u) * .85);
  box-shadow:
    inset 0 calc(var(--u) * .3) 0 rgba(255, 255, 255, .22),
    inset 0 calc(var(--u) * -.5) 0 rgba(0, 0, 0, .34),
    0 calc(var(--u) * .9) 0 rgba(0, 0, 0, .5),
    0 calc(var(--u) * 1.6) calc(var(--u) * 2) rgba(0, 0, 0, .6);
  overflow: hidden;
  animation: panelGir .34s var(--yay);
}
@keyframes panelGir {
  from { opacity: 0; transform: translateY(calc(var(--u) * 1.6)) scale(.9); }
  to { opacity: 1; transform: none; }
}
.panel.kapaniyor { animation: panelCik .18s ease-in forwards; }
@keyframes panelCik { to { opacity: 0; transform: translateY(calc(var(--u) * .8)) scale(.94); } }
.panel.dar { width: min(92vw, calc(var(--u) * 25)); }

.panel header {
  display: flex; align-items: center; gap: calc(var(--u) * .6);
  padding: calc(var(--u) * .7) calc(var(--u) * .8);
  border-bottom: calc(var(--u) * .18) solid var(--kontur);
  background: var(--plaka), linear-gradient(180deg, #4a5875, #222a3c);
  background-size: var(--plaka-boy), 100% 100%;
  box-shadow: inset 0 calc(var(--u) * .26) 0 rgba(255, 255, 255, .24);
}
.panel header h2 {
  font-family: var(--baslik); font-size: calc(var(--u) * 1.72);
  letter-spacing: .05em; flex: 1; font-weight: 700;
  -webkit-text-stroke: calc(var(--u) * .18) var(--kontur); paint-order: stroke fill;
  text-shadow: 0 calc(var(--u) * .16) 0 rgba(0, 0, 0, .5);
}
.panel header .kapa { margin-left: auto; }

/* ══ Magaza ══════════════════════════════════════════════════════ */

.magaza-govde { display: flex; min-height: 0; flex: 1; }
.vitrin {
  width: calc(var(--u) * 13.5); flex: none;
  display: grid; grid-template-rows: 1fr auto; gap: calc(var(--u) * .5);
  padding: calc(var(--u) * .7);
  border-right: calc(var(--u) * .18) solid var(--kontur);
  background:
    radial-gradient(90% 60% at 50% 34%, rgba(90, 130, 200, .34), transparent 70%),
    var(--plaka), linear-gradient(180deg, #1b2231, #0e1219);
  background-size: 100% 100%, var(--plaka-boy), 100% 100%;
}
#vitrinTuval {
  width: 100%; height: 100%; min-height: calc(var(--u) * 11);
  border-radius: calc(var(--u) * .5);
}
.vitrin-bilgi { display: grid; gap: calc(var(--u) * .34); justify-items: center; }
.vitrin-bilgi h3 {
  font-family: var(--baslik); font-size: calc(var(--u) * 1.35); text-align: center; font-weight: 700;
  -webkit-text-stroke: calc(var(--u) * .15) var(--kontur); paint-order: stroke fill;
}
.vitrin-bilgi p { font-size: calc(var(--u) * .85); color: var(--soluk); text-align: center; min-height: 1.2em; }
.vitrin-bilgi .kap { width: 100%; justify-content: center; }

/* `min-height: 0` SART: flex ogesi varsayilan olarak icerigin altina
   inmiyor; telefonda (sutun yerlesim) izgara 1434 piksele buyuyup
   747 piksellik panelin disina tasiyor ve alttaki kartlara hic
   ulasilamiyordu (olculdu). */
.magaza-sag { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.sekmeler {
  display: flex; gap: calc(var(--u) * .36); padding: calc(var(--u) * .6);
  border-bottom: calc(var(--u) * .16) solid var(--kontur);
}
.sekme {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * .3);
  font-family: var(--govde); font-weight: 900; font-size: calc(var(--u) * .88);
  color: #c9d4e6; cursor: pointer; min-height: 46px;
  padding: calc(var(--u) * .4) calc(var(--u) * .3);
  background: var(--plaka), linear-gradient(180deg, #3a465e, #1b2231);
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .16) solid var(--kontur);
  border-radius: calc(var(--u) * .45);
  box-shadow: var(--pah);
  transition: transform .1s var(--yumusak), filter .16s;
  -webkit-text-stroke: calc(var(--u) * .12) var(--kontur); paint-order: stroke fill;
}
.sekme .ikon { width: calc(var(--u) * 1.15); height: calc(var(--u) * 1.15); }
.sekme:active { transform: translateY(calc(var(--u) * .2)); box-shadow: var(--pah-basili); }
.sekme.etkin {
  background-image: var(--plaka), linear-gradient(180deg, var(--altin-a), var(--altin));
  color: #3b2405;
}

.izgara {
  min-height: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 7.2), 1fr));
  gap: calc(var(--u) * .5); padding: calc(var(--u) * .7);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: #4a5875 #10151f;
}
.izgara::-webkit-scrollbar { width: calc(var(--u) * .5); }
.izgara::-webkit-scrollbar-track { background: #10151f; }
.izgara::-webkit-scrollbar-thumb { background: #4a5875; border-radius: calc(var(--u) * .25); }

/*
  Kartlar NADIRLIK cercevesiyle geliyor.  Hepsi ayni koyu kutu olan
  surumde izgara "liste" gibi duruyordu; renk hem bilgi (fiyat
  kademesi) hem de vitrin hissi veriyor.
*/
.urun {
  position: relative; overflow: hidden; cursor: pointer;
  display: grid; gap: calc(var(--u) * .28); justify-items: center; align-content: start;
  padding: calc(var(--u) * .42) calc(var(--u) * .36) calc(var(--u) * .5);
  min-height: calc(var(--u) * 9.8);
  --n-a: #6a7590; --n-k: #313b4f;
  background: var(--plaka), linear-gradient(180deg, var(--n-a), var(--n-k));
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .16) solid var(--kontur);
  border-radius: calc(var(--u) * .5);
  box-shadow: var(--pah);
  transition: transform .13s var(--yumusak), box-shadow .13s, filter .16s;
  animation: kartGir .3s var(--yay) backwards;
}
@keyframes kartGir {
  from { opacity: 0; transform: translateY(calc(var(--u) * .9)) scale(.86); }
  to { opacity: 1; transform: none; }
}
.urun:hover { transform: translateY(calc(var(--u) * -.22)); filter: brightness(1.08); }
.urun:active { transform: translateY(calc(var(--u) * .2)); box-shadow: var(--pah-basili); }
.urun.n1 { --n-a: #7e8aa6; --n-k: #39435a; }
.urun.n2 { --n-a: #5fc96e; --n-k: #1f6b2c; }
.urun.n3 { --n-a: #4aa8e8; --n-k: #14527f; }
.urun.n4 { --n-a: #a865e8; --n-k: #4a2088; }
.urun.n5 { --n-a: #f0a52a; --n-k: #9a4e06; }

.urun .onizleme {
  width: 100%; height: calc(var(--u) * 5.3);
  border-radius: calc(var(--u) * .38);
  background: linear-gradient(180deg, rgba(8, 11, 18, .5), rgba(8, 11, 18, .78));
  box-shadow: inset 0 0 0 calc(var(--u) * .1) rgba(0, 0, 0, .5), inset 0 calc(var(--u) * .5) calc(var(--u) * .7) rgba(255, 255, 255, .08);
  display: grid; place-items: center; overflow: hidden;
}
.urun .onizleme canvas {
  height: 100%; width: auto; max-width: 100%; image-rendering: pixelated;
  filter: drop-shadow(0 calc(var(--u) * .16) calc(var(--u) * .2) rgba(0, 0, 0, .6));
  transition: transform .2s var(--yay);
}
.urun:hover .onizleme canvas { transform: scale(1.07) translateY(calc(var(--u) * -.1)); }
.urun .ad {
  font-size: calc(var(--u) * .8); font-weight: 900; text-align: center; line-height: 1.12;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.urun .fiyat {
  font-size: calc(var(--u) * .86); font-weight: 900; color: var(--altin-a);
  display: inline-flex; align-items: center; gap: .28em;
  background: rgba(0, 0, 0, .34); padding: calc(var(--u) * .1) calc(var(--u) * .44);
  border-radius: calc(var(--u) * .3);
}
.urun .fiyat .ikon { width: calc(var(--u) * .95); height: calc(var(--u) * .95); }
.urun.acik .fiyat { color: #d6f7ff; }
.urun.secili { box-shadow: var(--pah), 0 0 0 calc(var(--u) * .18) var(--camgobegi); }
.urun.giyili::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 calc(var(--u) * .2) rgba(54, 212, 200, .85);
  border-radius: calc(var(--u) * .36);
}
.urun.giyili::after {
  content: '✓'; position: absolute; top: calc(var(--u) * .22); right: calc(var(--u) * .3);
  width: calc(var(--u) * 1.35); height: calc(var(--u) * 1.35);
  display: grid; place-items: center;
  background: var(--camgobegi); color: #04241f;
  border: calc(var(--u) * .12) solid var(--kontur); border-radius: 50%;
  font-weight: 900; font-size: calc(var(--u) * .9);
  -webkit-text-stroke: 0;
}
.urun.pahali { filter: grayscale(.4) brightness(.82); }
.urun .kilitIkon {
  position: absolute; top: calc(var(--u) * .24); right: calc(var(--u) * .3);
  width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1);
  filter: drop-shadow(0 calc(var(--u) * .1) 0 rgba(0, 0, 0, .6));
}
.urun.alindi { animation: alindiPatla .5s var(--yay); }
@keyframes alindiPatla {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.16); filter: brightness(2.2); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ══ Satirlar / ayarlar ══════════════════════════════════════════ */

.satirlar { display: grid; gap: calc(var(--u) * .55); padding: calc(var(--u) * .8); overflow-y: auto; }
.satir {
  display: flex; align-items: center; gap: calc(var(--u) * .6);
  background: var(--plaka), linear-gradient(180deg, #38445c, #1b2231);
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .16) solid var(--kontur);
  border-radius: calc(var(--u) * .48);
  padding: calc(var(--u) * .5) calc(var(--u) * .75);
  font-weight: 900; font-size: calc(var(--u) * .98);
  cursor: pointer; min-height: 52px;
  box-shadow: var(--pah);
  transition: filter .16s;
}
.satir:hover { filter: brightness(1.08); }
.satir > span:first-child { flex: 1; }
.satir input { display: none; }
.anahtar {
  width: calc(var(--u) * 3); height: calc(var(--u) * 1.55); border-radius: calc(var(--u) * .8);
  background: linear-gradient(180deg, #0a0d14, #1b2231);
  border: calc(var(--u) * .14) solid var(--kontur); position: relative; flex: none;
  transition: background .18s;
  box-shadow: inset 0 calc(var(--u) * .16) calc(var(--u) * .24) rgba(0, 0, 0, .7);
}
.anahtar::after {
  content: ''; position: absolute; top: 50%; left: calc(var(--u) * .12); transform: translateY(-50%);
  width: calc(var(--u) * 1.14); height: calc(var(--u) * 1.14); border-radius: 50%;
  background: linear-gradient(180deg, #e4ebf6, #8e9ab1);
  border: calc(var(--u) * .1) solid var(--kontur);
  transition: left .2s var(--yay), background .18s;
}
input:checked + .anahtar { background: linear-gradient(180deg, #1b8f88, #0c4a46); }
input:checked + .anahtar::after { left: calc(100% - var(--u) * 1.36); background: linear-gradient(180deg, #b6fff8, var(--camgobegi)); }

.secim { display: flex; gap: calc(var(--u) * .3); }
.secim button {
  font-family: var(--govde); font-weight: 900; font-size: calc(var(--u) * .86);
  cursor: pointer; min-height: 44px; color: #cdd7e8;
  padding: calc(var(--u) * .4) calc(var(--u) * .7);
  background: var(--plaka), linear-gradient(180deg, #3a465e, #191f2c);
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .14) solid var(--kontur);
  border-radius: calc(var(--u) * .4);
  box-shadow: var(--pah);
  -webkit-text-stroke: calc(var(--u) * .1) var(--kontur); paint-order: stroke fill;
}
.secim button:active { transform: translateY(calc(var(--u) * .16)); box-shadow: var(--pah-basili); }
.secim button.etkin { background-image: var(--plaka), linear-gradient(180deg, var(--camgobegi), #1b8f88); color: #04241f; }

/* ══ Nasil oynanir ═══════════════════════════════════════════════ */

.adimlar { display: grid; gap: calc(var(--u) * .55); padding: calc(var(--u) * .8); overflow-y: auto; }
.adim {
  display: grid; grid-template-columns: calc(var(--u) * 3) 1fr; gap: calc(var(--u) * .7); align-items: start;
  background: var(--plaka), linear-gradient(180deg, #333e52, #181e2a);
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .16) solid var(--kontur);
  border-radius: calc(var(--u) * .5);
  padding: calc(var(--u) * .66);
  box-shadow: var(--pah);
  animation: kartGir .32s var(--yay) backwards;
}
.adim .no {
  width: calc(var(--u) * 3); height: calc(var(--u) * 3); display: grid; place-items: center;
  font-family: var(--baslik); font-weight: 700; font-size: calc(var(--u) * 1.5);
  color: #1b2030;
  background: var(--plaka), linear-gradient(180deg, #ffffff, #c3ccdd);
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .14) solid var(--kontur);
  border-radius: calc(var(--u) * .38);
  box-shadow: var(--pah);
  -webkit-text-stroke: 0;
}
.adim h3 { font-size: calc(var(--u) * 1.08); margin-bottom: calc(var(--u) * .2); font-family: var(--baslik); font-weight: 700; }
.adim p { font-size: calc(var(--u) * .9); color: #c4cfe0; line-height: 1.42; font-weight: 700; }
.adim kbd {
  display: inline-block; font-family: var(--baslik); font-size: .95em; color: #1b2030;
  background: linear-gradient(180deg, #fff, #cbd4e2);
  border: calc(var(--u) * .1) solid var(--kontur); border-radius: calc(var(--u) * .22);
  padding: 0 calc(var(--u) * .28); margin: 0 calc(var(--u) * .08);
  box-shadow: 0 calc(var(--u) * .16) 0 #8d97a8;
  -webkit-text-stroke: 0;
}

/* ══ Sonuc ═══════════════════════════════════════════════════════ */

.sonuc { display: grid; justify-items: center; gap: calc(var(--u) * .3); padding: calc(var(--u) * 1) var(--u) calc(var(--u) * .5); }
.madalya {
  width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); display: grid; place-items: center;
  background: radial-gradient(circle at 50% 36%, rgba(255, 210, 63, .38), transparent 68%);
  animation: madalyaGir .55s var(--yay);
}
.madalya .ikon { width: 100%; height: 100%; }
@keyframes madalyaGir { from { transform: scale(0) rotate(-70deg); } to { transform: scale(1); } }
.buyuk-sayi {
  font-family: var(--baslik); font-size: calc(var(--u) * 5); font-weight: 700; line-height: 1;
  color: var(--altin-a);
  -webkit-text-stroke: calc(var(--u) * .25) var(--kontur); paint-order: stroke fill;
  text-shadow: 0 calc(var(--u) * .28) 0 var(--altin-k), 0 calc(var(--u) * .5) 0 var(--kontur);
}
.sonuc p { color: var(--soluk); font-size: calc(var(--u) * .98); font-weight: 800; }
.sonuc-satir { display: flex; gap: calc(var(--u) * .5); margin-top: calc(var(--u) * .3); }
.sonuc-kutu {
  display: inline-flex; align-items: center; gap: calc(var(--u) * .3);
  background: var(--plaka), linear-gradient(180deg, #38445c, #1b2231);
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .14) solid var(--kontur); border-radius: calc(var(--u) * .42);
  padding: calc(var(--u) * .28) calc(var(--u) * .62); font-weight: 900;
  box-shadow: var(--pah);
}
.sonuc-kutu .ikon { width: calc(var(--u) * 1.15); height: calc(var(--u) * 1.15); }
.sonuc-kutu b { color: var(--altin-a); }
.sonuc .rekor {
  color: #04241f; font-weight: 900; letter-spacing: .12em; font-size: calc(var(--u) * .92);
  background: linear-gradient(180deg, #b6fff8, var(--camgobegi));
  border: calc(var(--u) * .14) solid var(--kontur); border-radius: calc(var(--u) * .4);
  padding: calc(var(--u) * .2) calc(var(--u) * .8);
  -webkit-text-stroke: 0;
  animation: rekorCak .6s var(--yay);
}
@keyframes rekorCak { 0% { transform: scale(0) rotate(-12deg); } 100% { transform: scale(1); } }

/* ══ Olum paneli ═════════════════════════════════════════════════ */

.olum-ic { display: grid; justify-items: center; gap: calc(var(--u) * .28); padding: calc(var(--u) * .9) var(--u) calc(var(--u) * .3); }
.olum-sebep {
  display: inline-flex; align-items: center; gap: calc(var(--u) * .4);
  background: var(--plaka), linear-gradient(180deg, #5a2a2a, #2a1218);
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .16) solid var(--kontur);
  border-radius: calc(var(--u) * .45);
  padding: calc(var(--u) * .26) calc(var(--u) * .8);
  font-weight: 900; font-size: calc(var(--u) * .95); color: var(--kirmizi-a);
  box-shadow: var(--pah);
  animation: sebepGir .4s var(--yay);
}
.olum-sebep .ikon { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); }
@keyframes sebepGir { from { transform: scale(.7) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }

/*
  Iki satirli dugme: ust satir eylem, alt satir aciklama ("Oda 4
  basinda").  Aciklamasiz surumde iki dogma secenegi ayirt
  edilemiyordu — ikisi de sadece "DOG" gibi okunuyordu.
*/
.kap.iki-satir { align-items: center; }
.kap.iki-satir .kap-yazi { display: grid; gap: calc(var(--u) * .08); line-height: 1.12; }
.kap.iki-satir .kap-yazi b { font-size: calc(var(--u) * 1.06); font-weight: 900; }
.kap.iki-satir .kap-yazi i {
  font-style: normal; font-weight: 800; font-size: calc(var(--u) * .76);
  color: rgba(10, 14, 21, .72); -webkit-text-stroke: 0;
}

/* Reklam rozeti: dugmenin sag ust kosesinde kucuk etiket. */
.reklam-rozet {
  position: absolute; top: calc(var(--u) * -.1); right: calc(var(--u) * -.1);
  display: inline-flex; align-items: center; gap: calc(var(--u) * .22);
  background: linear-gradient(180deg, #2b3242, #141a26);
  border: calc(var(--u) * .13) solid var(--kontur);
  border-radius: calc(var(--u) * .3) calc(var(--u) * .42) calc(var(--u) * .3) calc(var(--u) * .3);
  padding: calc(var(--u) * .1) calc(var(--u) * .4);
  font-size: calc(var(--u) * .62); font-weight: 900; letter-spacing: .1em; color: #cfe8d0;
  -webkit-text-stroke: 0;
  box-shadow: 0 calc(var(--u) * .16) 0 rgba(0, 0, 0, .45);
}
.reklam-rozet .ikon { width: calc(var(--u) * .95); height: calc(var(--u) * .95); }
.kap.bekliyor { filter: grayscale(.5) brightness(.82); pointer-events: none; }
.kap.bekliyor .kap-yazi b::after { content: '…'; }

.kasa-ikon {
  width: calc(var(--u) * 5); height: calc(var(--u) * 5); display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(255, 210, 63, .34), transparent 68%);
  animation: kasaSuz 2.4s ease-in-out infinite;
}
.kasa-ikon .ikon { width: 100%; height: 100%; }
@keyframes kasaSuz {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(calc(var(--u) * -.3)) rotate(2deg); }
}

/* ══ Dokunmatik ══════════════════════════════════════════════════ */

#dokunmatik { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
#cubukHalka {
  position: absolute; left: calc(var(--u) * 2.6); bottom: max(calc(var(--u) * 2.6), calc(env(safe-area-inset-bottom) + var(--u) * 2.6));
  width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%;
  border: calc(var(--u) * .22) solid rgba(233, 237, 243, .34);
  background: radial-gradient(circle, rgba(233, 237, 243, .1), rgba(233, 237, 243, .04));
  display: grid; place-items: center; opacity: .45; transition: opacity .2s;
}
#cubukHalka.etkin { opacity: 1; }
#cubukTopu {
  width: calc(var(--u) * 2.9); height: calc(var(--u) * 2.9); border-radius: 50%;
  background: var(--plaka), linear-gradient(180deg, #e9edf3, #9aa6bd);
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .16) solid var(--kontur);
  box-shadow: var(--pah);
}
.dok-dugme {
  position: absolute; pointer-events: auto;
  width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--plaka), linear-gradient(180deg, rgba(233, 237, 243, .34), rgba(120, 132, 155, .3));
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .2) solid rgba(11, 14, 21, .7);
  box-shadow: var(--pah);
  backdrop-filter: blur(2px);
  transition: transform .09s var(--yumusak);
}
.dok-dugme .ikon { width: 52%; height: 52%; }
.dok-dugme:active { transform: translateY(calc(var(--u) * .24)) scale(.96); box-shadow: var(--pah-basili); }
#dZipla { right: calc(var(--u) * 1.2); bottom: max(calc(var(--u) * 5.8), calc(env(safe-area-inset-bottom) + var(--u) * 5.8)); }
#dSin { right: calc(var(--u) * 7.2); bottom: max(calc(var(--u) * 1.5), calc(env(safe-area-inset-bottom) + var(--u) * 1.5)); width: calc(var(--u) * 4); height: calc(var(--u) * 4); }

#tiklaBasla {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center;
  background: rgba(8, 11, 18, .48); cursor: pointer;
}
.tikla-kutu {
  font-weight: 900; font-size: calc(var(--u) * 1.15); letter-spacing: .08em;
  background: var(--plaka), linear-gradient(180deg, #4a5875, #222a3c);
  background-size: var(--plaka-boy), 100% 100%;
  border: calc(var(--u) * .18) solid var(--kontur);
  border-radius: calc(var(--u) * .55);
  padding: calc(var(--u) * .7) calc(var(--u) * 1.4);
  box-shadow: var(--pah);
  animation: tiklaNabiz 1.5s ease-in-out infinite;
}
@keyframes tiklaNabiz { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Kip gecisi perdesi */
#gecis { position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0; background: #070a11; }
#gecis.kapan { animation: gecisKapan .26s ease-in forwards; }
#gecis.acil { animation: gecisAcil .42s ease-out forwards; }
@keyframes gecisKapan { from { opacity: 0; } to { opacity: 1; } }
@keyframes gecisAcil { from { opacity: 1; } to { opacity: 0; } }

/* ══ Uyarlamalar ═════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .magaza-govde { flex-direction: column; }
  .vitrin {
    width: auto; border-right: none;
    border-bottom: calc(var(--u) * .18) solid var(--kontur);
    grid-template-rows: auto; grid-template-columns: calc(var(--u) * 9.4) 1fr;
    align-items: center;
  }
  /* Telefonda vitrin 110x99 piksel kaliyordu ve karakter okunmuyordu. */
  #vitrinTuval { min-height: calc(var(--u) * 9.6); }
  .vitrin-bilgi { justify-items: stretch; }
  .izgara { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 6.4), 1fr)); }
}
/* Dikey ekran: menu yukari toplaniyor, altta karakter icin yer kaliyor. */
@media (max-aspect-ratio: 9/10) {
  .menu-orta { align-content: start; padding-top: calc(var(--u) * 2.2); gap: calc(var(--u) * 1.3); }
  .menu-istatistik { margin-top: calc(var(--u) * .4); }
}
@media (max-height: 470px) {
  .marka.buyuk .marka-ad { font-size: calc(var(--u) * 2.9); }
  .menu-orta { gap: calc(var(--u) * .9); }
  .marka-tuslar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}