/*
  tema.css — VERITY BLOCK SURVIVAL ARAYUZ DILI: "ÇİVİLİ LEVHA"
  ════════════════════════════════════════════════════════════════════

  Sahibi (25 Eyl 2026): "Menu sekmesi, butonlar, HUD butonlarinin
  hepsi, gameplay kismindaki butonlar — her seyi bu oyuna ozgu
  degistirelim.  Buton duzeni ve buton SEKILLERINI de degistirelim."

  Kardes oyunlarin dili KARE PLAKA + beyaz ikon rozeti + duz renkli
  dudak golgesiydi.  Burada hicbiri yok:

    · SEKIL — dikdortgen degil, SOL-UST ve SAG-ALT kosesi 45 derece
      KESIK bir levha.  Silueti bir bakista ayiran sey bu.
    · KATMAN — levha iki katman: altta is siyahi KONTUR (::after),
      ustunde iceri kacmis METAL YUZ (::before).  Ikisi de ayni
      kesikle kirpiliyor, bu yuzden diyagonal kenarda da kontur var.
      (`border` + `clip-path` birlikte calismaz: kirpma kenarligi de
      keser ve diyagonalde renk sizar — olculdu.)
    · ISIK — tek kaynak: SOL USTTEKI fener.  Yuzun ust-sol kenarinda
      ince sicak bir cizgi, sag-altta sert siyah golge.  Bu yuzden
      butun dugmeler ayni yonden aydinlaniyor.
    · PERCIN — kesik koselerin yaninda iki kucuk koyu nokta.  Levhanin
      "civilenmis" oldugunu soyleyen tek ayrinti.
    · IKON — beyaz rozet degil, levhaya acilmis KOYU OYUK.
    · YAZI — kalin kontur yerine KAZIMA: bir piksel koyu, bir piksel
      acik golge.  Cikartma degil, metale kazinmis.

  Bu dosya `oyun.css`ten SONRA yukleniyor ve onun dugme/panel/menu
  kurallarini eziyor.  Olcu, yerlesim ve kirilma noktalari orada
  olculmus halde duruyor; burada yalniz GORUNUM degisiyor.
*/

:root {
  --kesik: .70rem;            /* kose kesiminin boyu */
  --kesik-k: .42rem;          /* kucuk ogelerde */
  --kontur: .17rem;
  --fener: rgba(255, 216, 130, .42);      /* sol ustteki sicak kenar */
  --oyuk: rgba(0, 0, 0, .55);             /* icine gomulu alan */
  --kazima: 0 .09rem 0 rgba(255, 240, 200, .18), 0 -.06rem 0 rgba(0, 0, 0, .55);
}

/* Kesik kose poligonu: sol-ust ve sag-alt. */
@supports (clip-path: polygon(0 0)) {
  .rbtn, .rbtn::before, .rbtn::after,
  .hbtn, .hbtn::before, .hbtn::after {
    clip-path: polygon(var(--k, .70rem) 0, 100% 0, 100% calc(100% - var(--k, .70rem)), calc(100% - var(--k, .70rem)) 100%, 0 100%, 0 var(--k, .70rem));
  }
}

/* ══ ANA DUGME ══════════════════════════════════════════════════ */

.rbtn {
  --k: var(--kesik);
  --r1: #6a655c; --r2: #3a3630; --ri: #e0a815;
  position: relative; isolation: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: .66rem 1.5rem .7rem; min-width: 10rem;
  font: 900 1.22rem/1.1 var(--yazi); letter-spacing: .055em; text-transform: uppercase;
  color: #efe6d2;
  background: none; border: 0; border-radius: 0;
  box-shadow: none;
  text-shadow: var(--kazima);
  paint-order: normal; -webkit-text-stroke: 0;
  cursor: pointer;
  transition: transform .08s ease, filter .14s ease;
}
/* KONTUR + altindaki dudak (kirpma box-shadow'u da keserdi) */
.rbtn::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: -.26rem; z-index: -2;
  background: var(--m);
}
/* METAL YUZ: ustten alta koyulasan + sol ustte fener cizgisi */
.rbtn::before {
  content: ''; position: absolute; inset: var(--kontur); z-index: -1;
  --k: calc(var(--kesik) - var(--kontur));
  background:
    radial-gradient(circle at .55rem .55rem, rgba(0, 0, 0, .55) .11rem, transparent .13rem),
    radial-gradient(circle at calc(100% - .55rem) calc(100% - .55rem), rgba(0, 0, 0, .55) .11rem, transparent .13rem),
    linear-gradient(115deg, var(--fener) 0 .09rem, transparent .09rem),
    linear-gradient(170deg, var(--r1) 0%, var(--r2) 62%, color-mix(in srgb, var(--r2) 74%, #000) 100%);
  box-shadow:
    inset .1rem .1rem 0 rgba(255, 240, 210, .15),
    inset -.12rem -.16rem .3rem rgba(0, 0, 0, .5);
}
/* IKON: levhaya acilmis oyuk */
.rbtn > svg {
  width: 1.95em; height: 1.95em; padding: .36em; margin-left: -.55rem; flex: none;
  color: var(--ri);
  background: var(--oyuk); border: 0; border-radius: 0;
  clip-path: polygon(.28rem 0, 100% 0, 100% calc(100% - .28rem), calc(100% - .28rem) 100%, 0 100%, 0 .28rem);
  box-shadow: inset 0 .1rem .22rem rgba(0, 0, 0, .8);
  filter: drop-shadow(0 0 .22rem color-mix(in srgb, var(--ri) 60%, transparent));
}
.rbtn:hover { transform: translateY(-.09rem); filter: brightness(1.12); }
.rbtn:hover::before { box-shadow: inset .1rem .1rem 0 rgba(255, 240, 210, .28), inset -.12rem -.16rem .3rem rgba(0, 0, 0, .5), 0 0 1.2rem -.2rem color-mix(in srgb, var(--ri) 70%, transparent); }
.rbtn:hover > svg { animation: none; filter: drop-shadow(0 0 .45rem color-mix(in srgb, var(--ri) 85%, transparent)); }
.rbtn:active { transform: translateY(.24rem); }
.rbtn:active::after { bottom: 0; }

.rbtn.dev { font-size: 1.62rem; padding: .84rem 1.7rem .88rem; width: 100%; letter-spacing: .07em; }
.rbtn.dev > svg { margin-left: 0; }
.rbtn.kucuk { --k: var(--kesik-k); font-size: .92rem; padding: .44rem 1.05rem .48rem; min-width: 0; }
.rbtn.kucuk > svg { margin-left: -.42rem; }

/* Renk kademeleri: yuz hep METAL, degisen sey VURGU (--ri) ve tonu. */
.rbtn.yesil  { --r1: #6f7a4a; --r2: #38401f; --ri: #cfe07a; }   /* oyna */
.rbtn.sari, .rbtn.turuncu { --r1: #7a6636; --r2: #40340f; --ri: #ffd45c; }
.rbtn.verity { --r1: #8a7326; --r2: #4a3a06; --ri: #ffe07a; color: #fff4d0; }
.rbtn.kirmizi { --r1: #7a3630; --r2: #3e1512; --ri: #ff7a6a; }
.rbtn.mavi   { --r1: #4a5e66; --r2: #22303a; --ri: #9fd0e0; }
.rbtn.mor    { --r1: #56455e; --r2: #2a1f34; --ri: #c4a2d4; }
.rbtn.gri    { --r1: #60594e; --r2: #322d26; --ri: #cfc4a9; }
.rbtn.krem   { --r1: #6a635a; --r2: #3a352e; --ri: #efe6d2; color: #efe6d2; -webkit-text-stroke: 0; }
.rbtn[disabled] { cursor: default; filter: grayscale(.6) brightness(.7); }
.rbtn[disabled]:hover { transform: none; }

/* ══ HUD DUGMELERI ══════════════════════════════════════════════
   Oyun icinde sag kenarda DIKEY BIR SERIT halinde duruyorlar; levha
   dili ayni, olcu kucuk, tus etiketi kazinmis bir plaka.             */

#hud-dugmeler {
  right: .9rem; top: 50%; transform: translateY(-50%);
  gap: .42rem; padding: .5rem .42rem;
  background: linear-gradient(90deg, rgba(10, 9, 7, 0), rgba(10, 9, 7, .55) 40%);
  border-radius: 0;
}
.hbtn {
  --k: var(--kesik-k);
  --h1: #5e584e; --h2: #2e2a24; --hi: #e6dcc2;
  width: 3.3rem; height: 3.3rem; padding: 0;
  color: var(--hi); background: none; border: 0; border-radius: 0; box-shadow: none;
  transition: transform .08s ease, filter .14s ease;
}
.hbtn::after { content: ''; position: absolute; inset: 0; bottom: -.18rem; z-index: -2; background: var(--m); }
.hbtn::before {
  content: ''; position: absolute; inset: calc(var(--kontur) * .85); z-index: -1;
  --k: calc(var(--kesik-k) - var(--kontur) * .85);
  background:
    linear-gradient(115deg, var(--fener) 0 .07rem, transparent .07rem),
    linear-gradient(170deg, var(--h1), var(--h2));
  box-shadow: inset .08rem .08rem 0 rgba(255, 240, 210, .13), inset -.1rem -.12rem .26rem rgba(0, 0, 0, .5);
}
.hbtn > svg { width: 1.72rem; height: 1.72rem; filter: drop-shadow(0 .05rem .12rem rgba(0, 0, 0, .8)); }
.hbtn > span {
  right: calc(100% + .5rem); padding: .2rem .62rem .24rem; border-radius: 0;
  font: 900 .82rem var(--yazi); letter-spacing: .06em; text-transform: uppercase;
  color: #efe6d2; background: rgba(10, 9, 7, .92);
  border-left: .16rem solid var(--ri, #e0a815);
}
.hbtn:hover { transform: translateX(-.14rem); filter: brightness(1.14); }
.hbtn:active { transform: translateX(.1rem) translateY(.14rem); }
.hbtn:active::after { bottom: 0; }
.hbtn.sari   { --h1: #7a6636; --h2: #40340f; --hi: #ffd45c; --ri: #ffd45c; }
.hbtn.verity { --h1: #8a7326; --h2: #4a3a06; --hi: #ffe07a; --ri: #ffe07a; }
.hbtn.verity > svg { width: 2.05rem; height: 2.05rem; }
.hbtn.kapali { --h1: #6a3630; --h2: #3a1210; --hi: #ff9a8a; --ri: #ff7a6a; }
.hbtn kbd {
  right: -.28rem; bottom: -.24rem; min-width: 1.15rem; padding: .02rem .26rem .06rem;
  background: var(--m); color: #cfc4a9; border: 0; border-radius: 0;
  border-top: .1rem solid rgba(255, 216, 130, .3);
  font: 900 .6rem var(--yazi); letter-spacing: .04em;
}

/* ══ ANA MENU: yerlesim degisti ═════════════════════════════════

  Kardes oyunda panel SAGDA, karakter solda duruyordu.  Burada sahne
  asil anlatici: Verity gelip gidiyor, arkada anomali beliriyor.  Bu
  yuzden panel SOL ALTA, tek kolona indi; ekranin sagi ve ortasi
  bombos kaldi — oyuncu orayi izliyor.                                */

#menu::before {
  background:
    linear-gradient(90deg, rgba(8, 7, 6, .82) 0%, rgba(8, 7, 6, .55) 26%, rgba(8, 7, 6, 0) 52%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 40%, rgba(6, 5, 4, .78) 100%);
}
.menu-sag {
  right: auto; left: 3.2vw; top: auto; bottom: 3.2vh;
  transform: scale(var(--olcek, 1)); transform-origin: left bottom;
  width: 26rem; gap: .78rem; align-items: stretch;
}
.menu-ust { top: 1.1rem; left: 1.4rem; }
.menu-alt { left: auto; right: 1.4rem; bottom: 1rem; }

/* logo: sola yasli, ust uste uc kat */
.logo { text-align: left; }
.logo-serit { margin: .1rem 0 0; transform: none; }
.logo-serit span {
  padding: .26rem 1.4rem .3rem; font-size: 1.05rem; letter-spacing: .5em; text-indent: .5em;
  color: #f4e4c4; background: linear-gradient(#a8180f, #5e0a05);
  border: 0; border-radius: 0;
  clip-path: polygon(.5rem 0, 100% 0, calc(100% - .5rem) 100%, 0 100%);
  box-shadow: 0 .18rem 0 rgba(0, 0, 0, .8);
}
.logo-serit::after { display: none; }
.logo-verity {
  justify-content: flex-start; font-size: 5.2rem; margin-top: 0;
  color: #f0bb12; text-shadow: 0 0 2.4rem rgba(240, 187, 18, .3);
}
.logo-verity span { -webkit-text-stroke: .1em var(--m); text-shadow: .04em .06em 0 var(--m), 0 0 1.6rem rgba(240, 187, 18, .45); }
.logo p {
  text-align: left; margin-top: .3rem; color: #a99c84; font-size: .95rem; letter-spacing: .04em;
  text-shadow: 0 .1rem .4rem rgba(0, 0, 0, .95);
}
.logo.mini { text-align: center; }
.logo.mini .logo-verity { justify-content: center; font-size: 4.2rem; }

/* mod listesi: numarali hap degil, KAZINMIS SATIRLAR */
.mod-hap {
  display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; margin: .1rem 0 .2rem; padding: 0; list-style: none;
}
.mod-hap li {
  display: flex; align-items: center; gap: .48rem; padding: .28rem .55rem .3rem;
  background: rgba(10, 9, 7, .72); border-left: .18rem solid #7a6636;
  font: 800 .82rem var(--yazi); color: #b8ab92; letter-spacing: .03em;
  border-radius: 0; box-shadow: none; border-top: 0; border-right: 0; border-bottom: 0;
}
.mod-hap li b {
  width: 1.15rem; height: 1.15rem; display: grid; place-items: center; flex: none;
  background: none; color: #e0a815; border: 0; border-radius: 0;
  font: 900 .78rem var(--yazi);
}
.mod-hap li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (orientation: portrait) {
  .menu-sag { left: 50%; right: auto; bottom: 2.5vh; transform: translateX(-50%) scale(var(--olcek, 1)); transform-origin: bottom center; }
  .logo { text-align: center; }
  .logo-verity { justify-content: center; }
  .logo p { text-align: center; }
  .menu-alt { display: none; }
}

/* ══ PENCERELER: koyu tahta + civilenmis baslik ═════════════════ */

.kart-pencere, .pencere {
  background:
    linear-gradient(rgba(18, 15, 13, .04), rgba(18, 15, 13, .04)),
    var(--nokta), linear-gradient(#3a342c, #241f19);
  border: var(--kontur) solid #0b0a08;
  border-radius: 0;
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, .8), inset 0 .12rem 0 rgba(255, 230, 180, .1);
  color: #e6dcc2;
}
.kp-bas, .pencere-bas {
  --b1: #4a4238; --b2: #2a251e;
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, .18) 0 .5rem, transparent .5rem 1rem),
    linear-gradient(var(--b1), var(--b2));
  border-bottom: .2rem solid #0b0a08;
  border-radius: 0;
  color: #f0e6cc; letter-spacing: .07em; text-transform: uppercase;
}
.kp-bas b, .pencere-bas b { -webkit-text-stroke: 0; text-shadow: var(--kazima); font-family: var(--baslik); }
.kp-bas::after {                       /* civiler */
  content: ''; position: absolute; left: .5rem; right: .5rem; top: .42rem; height: .22rem; pointer-events: none;
  background:
    radial-gradient(circle at .11rem 50%, rgba(0, 0, 0, .6) .09rem, transparent .1rem) left / 100% 100% no-repeat,
    radial-gradient(circle at calc(100% - .11rem) 50%, rgba(0, 0, 0, .6) .09rem, transparent .1rem) right / 100% 100% no-repeat;
}
.kp-bas { position: relative; }
.kp-ic, .pencere-ic { color: #ddd2b4; }
.kp-kapat, .kapat {
  background: linear-gradient(#5e3028, #2e120f); color: #ffb0a0;
  border: var(--kontur) solid #0b0a08; border-radius: 0; box-shadow: 0 .18rem 0 rgba(0, 0, 0, .7);
}
.kp-kapat:hover, .kapat:hover { background: linear-gradient(#7a3a30, #40160f); }

/* sekmeler: klasor degil, KAZINMIS SERIT */
.sekmeler { gap: .3rem; }
.sekmeler button {
  background: linear-gradient(#332e27, #1e1a15); color: #9a8f79;
  border: 0; border-bottom: .2rem solid transparent; border-radius: 0;
  box-shadow: inset 0 .1rem 0 rgba(255, 230, 180, .07);
  letter-spacing: .06em; text-transform: uppercase;
}
.sekmeler button.aktif {
  background: linear-gradient(#4a4034, #2a231a) !important; color: #ffd45c;
  border-bottom-color: #e0a815;
}
.sekmeler button[data-sekme="verity"].aktif { background: linear-gradient(#5a4a12, #2e2405) !important; }

/* urun kartlari */
.urun {
  background: linear-gradient(#332e27, #211c16); border: var(--kontur) solid #0b0a08; border-radius: 0;
  color: #ddd2b4; box-shadow: 0 .3rem 0 rgba(0, 0, 0, .55);
}
.urun.secili { border-color: #e0a815; box-shadow: 0 .3rem 0 rgba(0, 0, 0, .55), 0 0 1.2rem -.2rem rgba(224, 168, 21, .9); }

/* ══ HUD: kart ve yuvalar ═══════════════════════════════════════ */

#gorev-kart, #gun-kart, .coin-hap, #hazine-ipucu, #fener-kart, .vital-ray, #mesajlar > div {
  border-radius: 0;
}
#gorev-kart {
  background: linear-gradient(rgba(10, 9, 7, .88), rgba(10, 9, 7, .78));
  border: 0; border-left: .22rem solid #e0a815;
  box-shadow: 0 .3rem .9rem rgba(0, 0, 0, .6);
  color: #ddd2b4;
}
#gorev-kart b, #gorev-kart em { color: #f0e6cc; }
.coin-hap, #gun-kart {
  background: rgba(10, 9, 7, .82); border: 0; border-left: .18rem solid #e0a815;
  color: #f0e6cc; box-shadow: 0 .24rem .7rem rgba(0, 0, 0, .55);
}
#kisayol .yuva {
  border-radius: 0; background: rgba(0, 0, 0, .55);
  box-shadow: inset 0 0 0 .1rem rgba(232, 222, 196, .16), inset 0 .14rem .3rem rgba(0, 0, 0, .7);
}
#kisayol .yuva.secili {
  background: rgba(224, 168, 21, .18);
  box-shadow: inset 0 0 0 .12rem #e0a815, 0 0 .9rem -.1rem rgba(224, 168, 21, .8);
  transform: translateY(-.28rem) scale(1.04);
}

/* ══ Dokunmatik kontroller: ayni levha dili ═════════════════════ */

#dok-pad .ok, #dok-sin, #dok-zipla, .dok-aksiyon {
  border-radius: 0;
  clip-path: polygon(.42rem 0, 100% 0, 100% calc(100% - .42rem), calc(100% - .42rem) 100%, 0 100%, 0 .42rem);
  background: linear-gradient(170deg, #5e584e, #2a2620);
  border: var(--kontur) solid #0b0a08;
  box-shadow: inset .08rem .08rem 0 rgba(255, 240, 210, .12);
  color: #e6dcc2;
}
#dok-yumruk { background: linear-gradient(170deg, #7a3630, #3a1210); color: #ffb0a0; }
#dok-koy { background: linear-gradient(170deg, #6f7a4a, #2e3618); color: #dfe8b8; }

/* ══ Yukleme perdesi ════════════════════════════════════════════ */

#perde, #yukleniyor { background: radial-gradient(ellipse at 50% 42%, #1a1611 0%, #07060a 72%); }
.kapsul-cubuk { background: rgba(0, 0, 0, .6); border: var(--kontur) solid #0b0a08; border-radius: 0; }
.kapsul-cubuk i { background: linear-gradient(90deg, #7a5c10, #ffd45c); border-radius: 0; }

/* ══ Kilit perdesi, vitaller, tost ═══════════════════════════════ */

#kilit-perde { background: rgba(6, 5, 4, .55); }
.kilit-yazi {
  padding: .7rem 2.2rem .76rem; border: 0; border-radius: 0;
  clip-path: polygon(.7rem 0, 100% 0, 100% calc(100% - .7rem), calc(100% - .7rem) 100%, 0 100%, 0 .7rem);
  background: linear-gradient(170deg, #6a645a, #2a2620);
  color: #efe6d2; letter-spacing: .1em; text-transform: uppercase;
  -webkit-text-stroke: 0; text-shadow: var(--kazima);
  box-shadow: 0 .3rem 0 rgba(0, 0, 0, .8), 0 0 2rem -.4rem rgba(224, 168, 21, .5);
  animation: kilitNefes 2.4s ease-in-out infinite;
}
@keyframes kilitNefes { 50% { filter: brightness(1.18); } }

/* Vitaller: cam degil, PASLI SERIT.  Rozet oyuk, dolgu tek renk. */
.vital-rozet {
  background: rgba(0, 0, 0, .55); border: 0; border-radius: 0;
  box-shadow: inset 0 .1rem .22rem rgba(0, 0, 0, .8);
}
.vital-ray {
  background: rgba(0, 0, 0, .62); border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 .1rem rgba(232, 222, 196, .16), inset 0 .12rem .26rem rgba(0, 0, 0, .7);
}
.vital-ray i { border-radius: 0; }
.vital-ray::after { display: none; }
.vital.can i { background: linear-gradient(#c4433a, #7a120c); }
.vital.aclik i { background: linear-gradient(#c8971e, #6e4a06); }
.vital-ray em { color: #efe6d2; text-shadow: var(--kazima); -webkit-text-stroke: 0; }
.vital.dusuk .vital-rozet { background: rgba(140, 17, 9, .55); }

#tost {
  border: 0; border-radius: 0; border-left: .22rem solid #c4433a;
  background: rgba(10, 9, 7, .95); color: #f0e6cc;
  letter-spacing: .05em; -webkit-text-stroke: 0; text-shadow: var(--kazima);
  box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .8);
}
#tost.iyi { border-left-color: #9cb455; }

/* Mesaj listesi: koyu serit + renkli kenar */
#mesajlar > div {
  border: 0; border-radius: 0; border-left: .2rem solid currentColor;
  background: rgba(10, 9, 7, .88);
  box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .6);
}

/* Duyuru: kazinmis, kontursuz */
#duyuru b { -webkit-text-stroke: 0; text-shadow: 0 0 1.6rem rgba(0, 0, 0, .95), var(--kazima); color: #e8ddc4; }
#duyuru span {
  border: 0; border-radius: 0; border-left: .2rem solid #e0a815;
  background: rgba(10, 9, 7, .9); color: #ddd2b4; -webkit-text-stroke: 0;
}

/* Verity konusma balonu: koyu levha + sari kenar */
#verity-balon {
  border: 0; border-radius: 0; border-left: .22rem solid #e0a815;
  background: rgba(10, 9, 7, .92); color: #e6dcc2;
  box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .75);
}
#verity-balon.korku { border-left-color: #c4433a; background: rgba(24, 10, 8, .94); }
#verity-balon .verity-yuz { border: 0; border-radius: 0; background: rgba(0, 0, 0, .5); }

/* El feneri karti */
#fener-kart {
  background: rgba(10, 9, 7, .85); border: 0; border-left: .2rem solid #e0a815;
  box-shadow: 0 .24rem .7rem rgba(0, 0, 0, .6);
}
#fener-kart .fener-ray { border: 0; border-radius: 0; box-shadow: inset 0 0 0 .08rem rgba(232, 222, 196, .18); }
#fener-kart .fener-ray i { border-radius: 0; }
#fener-kart kbd { border-radius: 0; background: rgba(0, 0, 0, .7); color: #cfc4a9; }

/*
  Dokunmatikte HUD seridi DIKEY DEGIL: oyun.css'te (html.mobil) yatay
  bir sira olarak duruyor ve masaustu icin verdigim `top:50%` +
  `translateY(-50%)` orada serdi ekranin USTUNDEN tasiriyordu
  (olculdu 740x360: top -18).  Mobilde konumu geri aliyoruz.
*/
html.mobil #hud-dugmeler {
  top: max(.5rem, env(safe-area-inset-top)); transform: none;
  padding: .32rem .4rem;
  background: linear-gradient(180deg, rgba(10, 9, 7, .55), rgba(10, 9, 7, 0));
}
html.mobil .hbtn > span { display: none; }

/* Menude Verity yaklasirken karakteri tam ortmesin: dikey ekranda
   biraz daha sola ve asagi durur (JS tarafinda MENU_VERITY_YAN). */

/* ══ Magaza kartlari ve ayar satirlari ══════════════════════════
   (Ilk surumde `.urun` yazilmisti; gercek sinif `.urun-kart` —
   kartlar beyaz kaldigi icin butun panel krem goruluyordu.)        */

.urun-kart {
  background: linear-gradient(#332e27, #211c16);
  border: var(--kontur) solid #0b0a08; border-radius: 0;
  box-shadow: 0 .3rem 0 rgba(0, 0, 0, .6);
  color: #ddd2b4;
}
.urun-kart .gorsel {
  border-radius: 0; border: .12rem solid rgba(0, 0, 0, .5);
  background: radial-gradient(circle at 50% 36%, #3c3730 0%, #1c1814 70%, #100d0a 100%);
  box-shadow: inset 0 .2rem .5rem rgba(0, 0, 0, .7);
}
.urun-kart .ad { color: #e6dcc2; }
.urun-kart .rozet {
  border: 0; border-radius: 0; color: #120f0d;
  clip-path: polygon(.24rem 0, 100% 0, calc(100% - .24rem) 100%, 0 100%);
}
.rozet.yaygin { background: #8a8073; }
.rozet.nadir { background: #7fa8b8; }
.rozet.destansi { background: #a684b4; }
.rozet.efsane { background: linear-gradient(90deg, #ffd45c, #e0a815); }
.rozet.reklam { background: linear-gradient(90deg, #9cb455, #5c7327); color: #f0f6dc; }
.urun-kart.reklamli .gorsel { background: radial-gradient(circle at 50% 38%, #34381f 0%, #1a1c10 70%, #0e0f08 100%); }
.urun-kart.sahip { background: linear-gradient(#37322a, #221d17); }
.urun-kart.secili { background: linear-gradient(#453c24, #262009); box-shadow: 0 0 0 .18rem #e0a815, 0 .3rem 0 rgba(0, 0, 0, .6); }

.alt-baslik { color: #9a8f79; }
.kart-liste .sec-kart {
  background: linear-gradient(#332e27, #211c16); color: #ddd2b4;
  border: var(--kontur) solid #0b0a08; border-radius: 0; box-shadow: 0 .16rem 0 rgba(0, 0, 0, .7);
}
.sec-kart.secili { background: linear-gradient(#5a4a12, #2e2405); color: #ffd45c; }
.sec-kart.secili b, .sec-kart.secili span { -webkit-text-stroke: 0; text-shadow: var(--kazima); }
.ayar-satir { border-bottom: .12rem solid rgba(232, 222, 196, .14); color: #ddd2b4; }
.ayar-satir input[type="range"], .ayar-satir input[type="checkbox"] { accent-color: #e0a815; }
.kart-pencere h2 { color: #e6dcc2; -webkit-text-stroke: 0; text-shadow: var(--kazima); }
.kart-pencere.olum h2 { color: #c4433a; }
.kart-pencere p { color: #ddd2b4; }
.nasil li { color: #ddd2b4; }
.tus-tablo div { color: #ddd2b4; }
.tus-tablo kbd, .nasil kbd {
  background: rgba(0, 0, 0, .6); color: #ffd45c; border: 0; border-radius: 0;
  border-bottom: .12rem solid rgba(255, 216, 130, .35);
}
.tarif { background: linear-gradient(#332e27, #211c16); border-color: rgba(232, 222, 196, .18); border-radius: 0; color: #ddd2b4; }
.bos-not { color: #8a8073; }
.verity-izgara { border-radius: 0; }

/* ══ iOS DOKUNMA SERTLESTIRMESI ══════════════════════════════════

  Sahibi (25 Eyl 2026): "iOS'ta kopyala-yapistir hatasi fixlensin."

  iOS Safari'de OLCULEN iki acik:

  1. `<img>` ogelerinde `-webkit-user-drag` AUTO kaliyordu.  Magaza
     urun kucuk resimleri gercek <img>; iPhone'da uzerine UZUN BASINCA
     "Kopyala / Paylas / Fotograflara Ekle" sayfasi aciliyor ve oyun
     kilitleniyor.  Ayni sey blok simgeleri ve kisayol yuvasi icin de
     gecerli.
  2. `touch-action` KALITILMIYOR.  Yalniz `html, body, #sahne, #hud`
     `none` idi; `#menu`, `#dok`, `#kisayol`, `#magaza`, `#envanter`
     AUTO kaliyordu.  iOS `user-scalable=no`yu 10'dan beri YOK SAYIYOR,
     bu yuzden o alanlarda CIFT DOKUNUS sayfayi yakinlastiriyor ve
     oyuncu bir daha duzeltemiyor (kaydirma da yok).

  Cozum: callout/surukleme HER OGEDE kapali; arayuz koklerinde
  `touch-action` acikca veriliyor.  Hata kutusu (`#acilis-hata`) DISARIDA
  kaliyor — oyuncunun hatayi kopyalayip gonderebilmesi gerekiyor.
*/
*:not(#acilis-hata):not(#acilis-hata *) {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
img, svg, canvas { -webkit-user-drag: none; user-drag: none; }
/* simge ve kucuk resimler dokunusu YUTMASIN: olay dugmeye gitsin */
.rbtn > svg, .hbtn > svg, .urun-kart .gorsel, .urun-kart .gorsel img,
#kisayol .yuva img, .kp-ikon, .sekmeler button svg { pointer-events: none; }

/* touch-action kalitilmaz: arayuz koklerine TEK TEK verilir */
#menu, #dok, #kisayol, #kisayol-satir, #alt-hud, #hud-dugmeler, #hud-sol-ust,
#tost, #mesajlar, #duyuru, #verity-balon, #fener-kart, #hazine-ipucu,
#kilit-perde, #duraklat, #olum, #onay, #yatay-uyari { touch-action: none; }
#magaza, #envanter, #ayar-panel, #nasil-panel, #gorev-panel { touch-action: manipulation; }
.urun-izgara, .kp-ic, .tarif-liste, .pencere, #gorev-liste, .izgara { touch-action: pan-y; }

/* iOS lastik bandi: sayfa asla kaymasin */
html, body { overscroll-behavior: none; -webkit-overflow-scrolling: auto; }

/* ══ MOBIL DOKUNMA HEDEFI ASGARI OLCULERI ═══════════════════════

  Olculdu (740x360 telefon, 25 Eyl 2026): HUD dugmeleri 35x35,
  kisayol yuvalari ve envanter dugmesi 30x30 cikiyordu.  Apple 44 pt,
  Android 48 dp oneriyor; 30 px bir yuvayi parmakla isabet ettirmek
  gercekten zor — yanlis yuva seciliyor.  `oyun.css`teki piksel
  asgarileri 800x600 MASAUSTU incelemesi icindi; dokunmatikte daha
  buyuk olmali.  9 yuva x 44 px + boslук = 428 px, en dar destekli
  yatay telefonda (568 px) bile siga.
*/
html.mobil .hbtn { min-width: 44px; min-height: 44px; }
html.mobil .hbtn > svg { width: 24px; height: 24px; }
html.mobil .hbtn.verity > svg { width: 28px; height: 28px; }
html.mobil .kp-kapat, html.mobil .kapat { min-width: 44px; min-height: 44px; }
html.mobil .sekmeler button { min-height: 42px; }
html.mobil .rbtn { min-height: 42px; }
html.mobil .urun-kart .rbtn { min-height: 38px; }

/*
  ══ MOBIL ALT HUD: KORIDORA YERLESTIRME ═════════════════════════

  OLCULDU (25 Eyl 2026, dort yatay telefon olcusu).  `#alt-hud`
  `left:50%` ile ORTALANMIS ve genisligi icerigi kadar.  Dokunma
  hedeflerini buyutunce kisayol satiri genisledi ve iki kontrol
  sutununa birden girdi:

    740x360 -> yon pedi x kisayol 27x44,  yumruk x vital 28x10
    667x375 -> yon pedi x kisayol 43x44,  yumruk x vital 43x9
    568x320 -> yon pedi x kisayol 80x44,  zipla x envanter 26x29

  Ortalama yerine KORIDORA yerlestiriyoruz: sol kenar yon pedinin,
  sag kenar aksiyon sutununun disinda.  Yuvalar artik sabit genislikte
  degil, koridoru esit paylasiyor (`flex: 1 1 0`).

  TAVIZ: 568x320 gibi cok dar bir ekranda koridor ~310 px; 9 yuva +
  envanter dugmesi icin 44 px'lik ideal dokunma hedefi FIZIKSEL OLARAK
  sigmiyor.  Taban 34 px'e indiriliyor — yuvalar BITISIK oldugu icin
  iskalayan parmak komsu yuvayi seciyor, geri alinabilir bir hata.
  Yer olan ekranlarda (>=700 px) yine 44 px.
*/
html.mobil #alt-hud {
  left: calc(max(1.2rem, env(safe-area-inset-left)) + 12.8rem);
  right: calc(max(1.6rem, env(safe-area-inset-right)) + 14.4rem);
  transform: none;
  align-items: stretch;
}
html.mobil #vitals { width: 100%; margin-right: 0; }
html.mobil #kisayol-satir { width: 100%; justify-content: center; }
html.mobil #kisayol { flex: 1 1 auto; min-width: 0; justify-content: center; }
html.mobil #kisayol .yuva {
  flex: 1 1 0; width: auto; height: auto; aspect-ratio: 1;
  min-width: 34px; max-width: 46px; min-height: 34px;
}
html.mobil #kisayol-env { flex: 0 0 auto; min-width: 40px; min-height: 40px; width: 40px; height: 40px; }

/*
  ── COK DAR YATAY EKRAN: KISAYOL KORIDORA SIGMIYOR ──────────────────
  Olculdu (3 Eki 2026, 568x320 = iPhone SE yatay):
    koridor (#alt-hud)      L140 - R408  =  268 px
    9 yuva x 34 px taban + 8 bosluk + dolgu = 329 px
  `min-width` taban oldugu icin flex kucultemiyor ve satir IKI YANA
  birden tasiyor: ilk yuva L89'da — yani YON PEDININ (L12-R130) tam
  icinde — son yuva R413'te, ENVANTER dugmesinin (L368-R408) uzerinde.
  `elementFromPoint` ile dogrulandi: yuvaya dokunmak pedi, envantere
  dokunmak yuvayi tetikliyordu.  Yani hata "kucuk hedef" degil,
  YANLIS KONTROLE giden dokunus.

  Cozum: bu genislikte kisayol koridordan cikip kontrol sutunlarinin
  USTUNE, neredeyse tam genisligi kullanan kendi satirina aliniyor.
  Boylece yuva basina ~46 px dusuyor (tavan) ve hicbir sey ortusmuyor.
  Vitaller kisayolla birlikte yukari cikiyor.
*/
@media (max-width: 620px) and (orientation: landscape) {
  /*
    Koridor korunuyor (sagda yumruk L412, solda ped R130 — koridor
    L140-R408 ikisini de temiz geciyor); sigmayan sey SATIRIN KENDISI.
    Kisayol IKI SATIRA sariliyor: 5 + 4 yuva, her biri ~42 px.
    Tek satirda 22 px'e inmek ya da satiri tasirmak yerine dogru olan
    bu — dikeyde yer var (koridorun alti pedin yanindan geciyor).
  */
  html.mobil #kisayol { flex-wrap: wrap; gap: .26rem; }
  /* Tam 5'er: `flex: 1 1` ikinci satirda 4 yuvayi sisiriyordu (41 vs 52). */
  html.mobil #kisayol .yuva { flex: 0 0 calc(20% - .21rem); min-width: 34px; max-width: none; }
  html.mobil #kisayol-satir { align-items: flex-end; }
}

/*
  Ayarlar panelinde dokunma hedefleri (olculdu 568x320):
  dil secimi 44x30, kaydiraclar 16 px yuksek, ONAY KUTULARI 15x15 —
  telefonda parmakla isabet ettirmek neredeyse imkansiz.
*/
html.mobil #ayar-panel .sec-kart { min-height: 42px; padding-left: 1.2rem; padding-right: 1.2rem; }
html.mobil .ayar-satir { padding-top: .85rem; padding-bottom: .85rem; }
html.mobil .ayar-satir input[type="range"] { height: 32px; }
html.mobil .ayar-satir input[type="checkbox"] { width: 30px; height: 30px; }