/*
  oyun.css — menu, HUD, magaza, paneller.

  ── DIL ────────────────────────────────────────────────────────────
  Sahibi "HUD asiri kotu pixel, butonlari Roblox/Minecraft gibi kaliteli
  yapalim" dedi.  Arayuz artik PIKSEL degil: Rubik 700-900, vektor
  ikonlar (index.html'deki sprite), kalin alt golgeli "basilabilir"
  dugmeler (Roblox dugme dili: ust parlak cizgi + alt koyu kalinlik).
  Piksel yazi tipi yalniz logoda ve envanter sayilarinda.

  Olcu tek yerden: kok yazi boyu ekranla olcekleniyor ve HER SEY rem.
  `clamp` alt siniri telefonda arayuzun ezilmesini, ust siniri 4K'da
  devlesmesini engelliyor.
*/

@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 {
  /* envanter panelleri eski --o olcusunu kullaniyor (piksel izgara) */
  --o: 3;
  --yuva: calc(var(--o) * 16px);
  --panel: rgba(24, 30, 46, .92);
  --panel-kenar: #3c4a6a;
  --acik: #f6f8ff;
  --yesil: #4fd14a;
  --sari: #ffcf3f;
  --kirmizi: #ff4a5a;
  --gol: 0 2px 0 rgba(0, 0, 0, .45);
}
html { font-size: clamp(9px, min(1.18vw, 1.95vh), 19px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* ^ Android "yazi boyutu" ayari kok yazi boyunu buyutup rem ile cizilen butun arayuzu tasiriyordu */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #7cc6f5; color: var(--acik);
  font-family: 'Rubik', 'Segoe UI', sans-serif; font-weight: 600;
  user-select: none;
}
#sahne { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
img { image-rendering: pixelated; }
svg { width: 1em; height: 1em; flex: none; }
.gizli { display: none !important; }
button { font-family: inherit; }

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

#perde {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 30%, #bfe8ff 0%, #5fb6f2 55%, #2f86d8 100%);
  transition: opacity .45s ease;
}
#perde.bitti { opacity: 0; pointer-events: none; }
.perde-ic { text-align: center; }
.perde-cubuk { display: block; width: 16rem; height: .9rem; margin: 1.6rem auto 0; border-radius: .3rem; border: .14rem solid #16305c; background: rgba(0, 0, 0, .25); overflow: hidden; }
.perde-cubuk i { display: block; height: 100%; width: 40%; background: linear-gradient(#fff36b, #f0a816); animation: yukle 1.2s ease-in-out infinite; }
@keyframes zipla { 50% { transform: translateY(-.8rem) rotate(4deg); } }
@keyframes yukle { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ══ DUGME DILI: MINECRAFT KESKINLIGI ══════════════════════════

  Sahibi "butonlar hic ilgi cekmiyor, Minecraft tarzi KESKIN yapalim,
  ikonlar daha anlasilir olsun" dedi.  Yuvarlak kapsul gitti; yerine
  KARE kose, kalin lacivert kontur, ustte acik alt yariyi koyu birakan
  iki tonlu govde, solda AYRI IKON KUTUSU ve altta 4 px govde golgesi.
  Basinca govde asagi iniyor (tus hissi).

    .sbtn         ana dugme        .sbtn.dev   buyuk (OYNA)
    .sbtn.sallan  dikkat ceken sallanma        .sbtn.kucuk
    .yb           yalniz ikonlu HUD dugmesi
    .rbtn         panel ici dugme (magaza karti, gorev odulu)          */

.sbtn {
  --d1: #7bea9a; --d2: #2fae63; --dk: #17713f;
  position: relative; display: inline-flex; align-items: center; gap: .55rem;
  padding: .42rem .9rem .42rem .42rem; cursor: pointer;
  color: #fff; font: 900 1.15rem/1 'Rubik'; letter-spacing: .02em; white-space: nowrap;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28) 0 46%, rgba(0, 0, 0, .14) 46% 100%),
    linear-gradient(180deg, var(--d1), var(--d2));
  border: .2rem solid var(--lacivert); border-radius: .18rem;
  box-shadow:
    inset .16rem .16rem 0 rgba(255, 255, 255, .32),
    inset -.16rem -.16rem 0 rgba(0, 0, 0, .22),
    0 .36rem 0 var(--dk), 0 .7rem .9rem rgba(6, 18, 44, .34);
  transition: transform .07s, filter .1s;
  paint-order: stroke fill; -webkit-text-stroke: .1em rgba(16, 32, 60, .6);
}
.sbtn-ikon {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none;
  background: rgba(10, 22, 44, .34); border: .12rem solid rgba(10, 22, 44, .5); border-radius: .12rem;
  box-shadow: inset .1rem .1rem 0 rgba(255, 255, 255, .14);
}
.sbtn-ikon svg { width: 1.35rem; height: 1.35rem; filter: drop-shadow(0 .1rem 0 rgba(0, 0, 0, .4)); }
.sbtn-yazi { flex: 1; text-align: left; }
.sbtn-ek {
  font: 700 .68rem 'Rubik'; opacity: .82; background: rgba(10, 22, 44, .3);
  padding: .12rem .4rem .16rem; border-radius: .12rem; -webkit-text-stroke: 0;
}
.sbtn:hover { filter: brightness(1.08); }
.sbtn:active { transform: translateY(.26rem); box-shadow: inset .16rem .16rem 0 rgba(255, 255, 255, .22), 0 .1rem 0 var(--dk); }
.sbtn.dev { font-size: 1.62rem; padding: .56rem 1.3rem .56rem .5rem; border-width: .24rem; }
.sbtn.dev .sbtn-ikon { width: 2.9rem; height: 2.9rem; }
.sbtn.dev .sbtn-ikon svg { width: 1.8rem; height: 1.8rem; }
.sbtn.kucuk { font-size: .92rem; padding: .3rem .7rem .3rem .3rem; gap: .38rem; }
.sbtn.kucuk .sbtn-ikon { width: 1.6rem; height: 1.6rem; }
.sbtn.kucuk .sbtn-ikon svg { width: 1rem; height: 1rem; }
.sbtn.turuncu { --d1: #ffd071; --d2: #ef8a10; --dk: #a85705; }
.sbtn.mor { --d1: #c7a4ff; --d2: #7c4ae8; --dk: #4d259b; }
.sbtn.mavi { --d1: #86dbff; --d2: #2f8fe0; --dk: #17578f; }
.sbtn.gri { --d1: #c2cdda; --d2: #7d8ba2; --dk: #4a5668; }
.sbtn.kirmizi { --d1: #ff9a9a; --d2: #e13b4f; --dk: #93162a; }
.sbtn.yesil { --d1: #7bea9a; --d2: #2fae63; --dk: #17713f; }
.sbtn.alex { --d1: #b7ea6e; --d2: #62b02c; --dk: #3c7418; }
.sbtn em { font-style: normal; display: inline-flex; align-items: center; gap: .2rem; }
.mini-coin { width: .95rem; height: .95rem; }

/* OYNA: cocuk oyuncu zorlanmasin diye surekli sallanan dev dugme */
.sbtn.sallan { animation: oynaSalla 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
.sbtn.sallan:active { animation: none; }
@keyframes oynaSalla {
  0%, 100% { transform: rotate(-1.1deg) scale(1); }
  50% { transform: rotate(1.1deg) scale(1.035); }
}

/* panel ici duz dugme */
.rbtn {
  --r1: #7bea9a; --r2: #2fae63; --rk: #17713f;
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  padding: .34rem .75rem .38rem; cursor: pointer; color: #fff;
  font: 900 1rem 'Rubik'; white-space: nowrap;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .26) 0 46%, rgba(0, 0, 0, .12) 46% 100%),
    linear-gradient(180deg, var(--r1), var(--r2));
  border: .16rem solid var(--lacivert); border-radius: .16rem;
  box-shadow: inset .12rem .12rem 0 rgba(255, 255, 255, .3), 0 .26rem 0 var(--rk);
  transition: transform .07s, filter .1s;
}
.rbtn svg { width: 1.05rem; height: 1.05rem; }
.rbtn:hover { filter: brightness(1.08); }
.rbtn:active { transform: translateY(.18rem); box-shadow: 0 .08rem 0 var(--rk); }
.rbtn:disabled { filter: grayscale(.2) brightness(.95); cursor: default; }
.rbtn.turuncu { --r1: #ffd071; --r2: #ef8a10; --rk: #a85705; }
.rbtn.mor { --r1: #c7a4ff; --r2: #7c4ae8; --rk: #4d259b; }
.rbtn.mavi { --r1: #86dbff; --r2: #2f8fe0; --rk: #17578f; }
.rbtn.gri { --r1: #c2cdda; --r2: #7d8ba2; --rk: #4a5668; }
.rbtn.kirmizi { --r1: #ff9a9a; --r2: #e13b4f; --rk: #93162a; }
.rbtn.yesil { --r1: #7bea9a; --r2: #2fae63; --rk: #17713f; }
.rbtn.kucuk { font-size: .86rem; padding: .28rem .55rem .32rem; }

/* HUD'un yalniz ikonlu dugmesi */
.yb {
  --y1: #6d8ec4; --y2: #2f4574;
  position: relative; display: grid; place-items: center;
  width: 3.2rem; height: 3.2rem; padding: 0; cursor: pointer; color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .26) 0 46%, rgba(0, 0, 0, .14) 46% 100%),
    linear-gradient(180deg, var(--y1), var(--y2));
  border: .2rem solid var(--lacivert); border-radius: .18rem;
  box-shadow: inset .14rem .14rem 0 rgba(255, 255, 255, .28), 0 .3rem 0 rgba(8, 20, 42, .62);
  transition: transform .07s, filter .1s;
}
.yb svg { width: 1.7rem; height: 1.7rem; filter: drop-shadow(0 .12rem 0 rgba(0, 0, 0, .4)); }
.yb:hover { filter: brightness(1.1); }
.yb:active { transform: translateY(.2rem); box-shadow: 0 .1rem 0 rgba(8, 20, 42, .62); }
.yb.yesil { --y1: #7bea9a; --y2: #2fae63; }
.yb.turuncu { --y1: #ffd071; --y2: #ef8a10; }
.yb.kapali { --y1: #ff9a9a; --y2: #cc2e44; }
.yb .rozet {
  position: absolute; top: -.42rem; right: -.42rem; min-width: 1.4rem; height: 1.4rem; padding: 0 .22rem;
  display: grid; place-items: center; font: 900 .8rem 'Rubik'; font-style: normal; color: #fff;
  background: linear-gradient(#ff9a9a, #e0364a); border: .14rem solid var(--lacivert); border-radius: .14rem;
  box-shadow: 0 .14rem 0 var(--lacivert);
}
.yb.hazir { animation: ybYanip 1.1s ease-in-out infinite; }
@keyframes ybYanip { 50% { filter: brightness(1.32); } }

/* ══ DIL BAYRAKLARI ════════════════════════════════════════════
   Menunun ve karakter ekraninin altinda; oyun INGILIZCE basliyor,
   oyuncu buradan degistiriyor.                                     */
.bayraklar { display: flex; gap: .4rem; justify-content: center; }
.bayrak {
  display: flex; align-items: center; gap: .32rem; padding: .22rem .5rem .26rem .28rem; cursor: pointer;
  background: rgba(10, 24, 50, .55); border: .16rem solid var(--lacivert); border-radius: .16rem;
  box-shadow: 0 .2rem 0 rgba(8, 20, 42, .5); transition: transform .07s, filter .1s;
}
.bayrak-gorsel { width: 1.7rem; height: 1.14rem; flex: none; border: .1rem solid rgba(0, 0, 0, .45); }
.bayrak-ad { font: 800 .8rem 'Rubik'; color: #dce8f8; }
.bayrak:hover { filter: brightness(1.15); }
.bayrak:active { transform: translateY(.14rem); box-shadow: 0 .06rem 0 rgba(8, 20, 42, .5); }
.bayrak.secili { background: linear-gradient(180deg, #ffd071, #ef8a10); }
.bayrak.secili .bayrak-ad { color: #2a1600; }

/* ══ KARAKTER SECIMI (acilis ekrani) ═══════════════════════════ */

#karakter-sec { position: fixed; inset: 0; z-index: 8; }
/*
  OLCEK + ORTALAMA: `place-items:center` panelin OLCEKSIZ kutusunu
  ortaliyor; panel ekrandan genisse sola kaymis gorunup sagdan tasiyordu
  (375 px telefonda olculdu).  Mutlak konum + translate(-50%,-50%) ile
  merkez her olcekte ekranin merkezinde kaliyor.
*/
#karakter-panel {
  position: absolute; left: 50%; top: 50%;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  transform: translate(-50%, -50%) scale(var(--olcek, 1)); transform-origin: center;
  padding: 1rem 1.4rem 1.2rem; width: 42rem;
  background: rgba(8, 22, 48, .55); border: .22rem solid var(--lacivert); border-radius: .3rem;
  box-shadow: 0 .5rem 0 rgba(6, 16, 36, .55), 0 1.2rem 2rem rgba(0, 0, 0, .35);
  backdrop-filter: blur(2px);
}
.ekran-baslik {
  margin: 0; font: 900 1.5rem 'Rubik'; letter-spacing: .06em; color: #fff;
  -webkit-text-stroke: .16em var(--lacivert); paint-order: stroke fill;
}
.kar-kartlar { display: flex; gap: 1.1rem; }
@media (orientation: portrait) {
  #karakter-panel { width: 22rem; }
  .kar-kartlar { flex-direction: column; gap: .7rem; }
  .kar-kart { flex-direction: row; width: 100%; align-items: center; gap: .7rem; }
  .kar-gorsel { width: 6rem; aspect-ratio: 1; flex: none; }
  .kar-kart .kar-ad { flex: 1; text-align: left; }
  .kar-kart .kar-not { display: none; }
}
.kar-kart {
  display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .7rem .8rem .8rem;
  cursor: pointer; width: 15rem;
  background: linear-gradient(180deg, #4a6394, #26365c);
  border: .22rem solid var(--lacivert); border-radius: .2rem;
  box-shadow: inset .16rem .16rem 0 rgba(255, 255, 255, .2), 0 .4rem 0 rgba(8, 20, 42, .6);
  transition: transform .1s, filter .12s;
}
.kar-kart:hover { transform: translateY(-.2rem); filter: brightness(1.08); }
.kar-kart.secili { background: linear-gradient(180deg, #2f7f9a, #17415c); box-shadow: inset 0 0 0 .2rem #7ce8ff, 0 .4rem 0 rgba(8, 20, 42, .6); }
.kar-kart[data-kisi="alex"].secili { background: linear-gradient(180deg, #4f8f2a, #2c5c17); box-shadow: inset 0 0 0 .2rem #bdf07a, 0 .4rem 0 rgba(8, 20, 42, .6); }
.kar-ad { font: 900 1.4rem 'Rubik'; letter-spacing: .08em; -webkit-text-stroke: .14em var(--lacivert); paint-order: stroke fill; }
.kar-ad.steve { color: #7ce8ff; }
.kar-ad.alex { color: #bdf07a; }
.kar-gorsel {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1.05;
  background: linear-gradient(180deg, #a8dcff, #6fb6f0); border: .16rem solid var(--lacivert); border-radius: .16rem;
  overflow: hidden;
}
.kar-gorsel img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.kar-not { font: 700 .85rem 'Rubik'; color: #dce8f8; }
/*
  SEC dugmesi TIKLANABILIR olmali.  `pointer-events:none` verilince
  tiklama kart butonuna gidiyordu; kartin kancasi `karakterSec(id)`
  (gec=false) cagirdigi icin oyun ANA MENUYE GECMIYORDU — sahibi
  "karakter secme ekraninda takili kaliyor" diye bildirdi.
  Dugmenin kendi kancasi stopPropagation yapiyor, cift islem yok.
*/
.kar-sec { pointer-events: auto; cursor: pointer; }

/* ══ ANA MENU ══════════════════════════════════════════════════
   Panel SOLDA, arka planda gercek skyblock haritasi donuyor.      */

#menu { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
#menu > * { pointer-events: auto; }
/* coin plakasi SAG USTTE: solda menu paneli yatay telefonda (844x390,
   667x375, 932x430) uzerine biniyordu */
.menu-ust { position: absolute; right: 1.2rem; top: 1rem; }
#menu-panel {
  position: absolute; left: 3vw; top: 50%;
  transform: translateY(-50%) scale(var(--olcek, 1)); transform-origin: left center;
  width: 25rem; display: flex; flex-direction: column; align-items: stretch; gap: .7rem;
  padding: 1rem 1.1rem 1.1rem;
  background: rgba(8, 22, 48, .5); border: .22rem solid var(--lacivert); border-radius: .3rem;
  box-shadow: 0 .5rem 0 rgba(6, 16, 36, .5); backdrop-filter: blur(2px);
}
@media (orientation: portrait) {
  #menu-panel { left: 50%; top: auto; bottom: 2vh; transform: translateX(-50%) scale(var(--olcek, 1)); transform-origin: bottom center; }
  .menu-ust { right: .8rem; top: .8rem; }
}

/* ── Logo: SKYBL(ada)CK 3D ─────────────────────────────────── */
.logo { text-align: center; position: relative; }
.logo-ad { margin: 0; font: 900 3.8rem/0.92 'Rubik'; letter-spacing: -.005em; white-space: nowrap; }
.logo-ad .kelime { display: block; }
.logo-ad .kelime.uc-d { font-size: .6em; letter-spacing: .14em; margin-top: -.05em; }
.logo-ad i {
  position: relative; display: inline-block; font-style: normal; color: #10203c;
  -webkit-text-stroke: .15em #10203c;
  text-shadow: 0 .05em 0 #10203c, 0 .1em 0 #10203c, 0 .16em 0 #071628, 0 .26em .12em rgba(4, 16, 44, .4);
}
.logo-ad i::after {
  content: attr(data-h); position: absolute; left: 0; top: 0;
  color: transparent; -webkit-text-stroke: 0; text-shadow: none;
  -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(#ffffff 0%, #bff0ff 30%, #5cc8f0 52%, #3f86e8 72%, #6a4ae0 100%);
}
.logo-ad .uc-d i::after { background-image: linear-gradient(#fff6c8 0%, #ffd23f 46%, #ff9a1a 100%); }
.logo-ad i:nth-child(odd) { transform: translateY(.02em) rotate(-2deg); }
.logo-ad i:nth-child(even) { transform: translateY(-.02em) rotate(2deg); }
.logo-ada {
  display: inline-block; width: .9em; height: .9em; vertical-align: -.12em; margin: 0 .02em;
  filter: drop-shadow(0 .1em 0 #071628); animation: adaSuzul 3.4s ease-in-out infinite;
}
@keyframes adaSuzul { 50% { transform: translateY(-.08em) rotate(4deg); } }
.logo.mini .logo-ad { font-size: 3rem; }
.slogan {
  margin: 0; text-align: center; font: 800 .95rem/1.3 'Rubik'; color: #fff;
  -webkit-text-stroke: .16em #10203c; paint-order: stroke fill;
}
.menu-dugmeler { display: flex; flex-direction: column; gap: .5rem; }
.menu-dugmeler .sbtn { width: 100%; }
.dugme-satir { display: flex; gap: .5rem; }
.dugme-satir .sbtn { flex: 1 1 0; min-width: 0; }
.dugme-satir .sbtn .sbtn-yazi { overflow: hidden; text-overflow: ellipsis; }

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

  BlockLand'in HUD'undan bilerek FARKLI:
    · ada seviyesi UST ORTADA (orada faz karti yoktu)
    · sag ust dugmeler YUVARLAK ve yalniz ikon (yazili degil)
    · can/aclik CUBUK degil SIMGE sirasi (10 kalp / 10 et)
    · kisayol her oyuncunun kendi yariminda                         */

#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#hud button, #hud .yuva, #hud #dok { pointer-events: auto; }
#hud b, #hud em, #hud .p-ad, .yb span { paint-order: stroke fill; -webkit-text-stroke: .16em #10203c; }

#kanama { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 42%, rgba(200, 20, 30, .85) 100%); opacity: 0; transition: opacity .2s; }
.nisangah {
  position: absolute; top: 50%; left: 50%; width: 1.5rem; height: 1.5rem; margin: -.75rem 0 0 -.75rem;
  background:
    linear-gradient(#fff, #fff) center/100% .15rem no-repeat,
    linear-gradient(#fff, #fff) center/.15rem 100% no-repeat;
  mix-blend-mode: difference; opacity: .85;
}
body.mobil .nisangah { display: none; }

/* ust orta: ada seviyesi + coin */
#ust-orta { position: absolute; left: 50%; top: .7rem; transform: translateX(-50%); display: flex; align-items: center; gap: .5rem; }
#sv-hap {
  display: flex; align-items: center; gap: .5rem; padding: .3rem .8rem .34rem .4rem;
  background: linear-gradient(180deg, rgba(20, 38, 72, .92), rgba(12, 24, 50, .92));
  border: .16rem solid #10203c; border-radius: 1.4rem;
  box-shadow: inset 0 .18rem 0 rgba(255, 255, 255, .2), 0 .26rem 0 rgba(8, 20, 42, .55);
}
.sv-ikon { width: 1.7rem; height: 1.7rem; filter: drop-shadow(0 .1rem 0 #10203c); }
#sv-ad { font: 900 1rem 'Rubik'; color: #a8e86a; -webkit-text-stroke: .16em #10203c; paint-order: stroke fill; }
.sv-ray { width: 8rem; height: .7rem; background: rgba(6, 14, 30, .75); border: .12rem solid #10203c; border-radius: .35rem; overflow: hidden; }
.sv-ray i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8bd44a, #d6f26a); transition: width .3s; }
#sv-puan { font: 800 .78rem 'Rubik'; font-style: normal; color: #cfe0f5; }
.coin-hap {
  display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .8rem .26rem .34rem;
  background: linear-gradient(180deg, rgba(20, 38, 72, .92), rgba(12, 24, 50, .92));
  border: .16rem solid #10203c; border-radius: 1.4rem; font: 900 1.05rem 'Rubik'; color: #ffd76b;
  box-shadow: inset 0 .18rem 0 rgba(255, 255, 255, .2), 0 .26rem 0 rgba(8, 20, 42, .55);
}
.coin-hap svg { width: 1.5rem; height: 1.5rem; }
.coin-hap.buyuk { font-size: 1.35rem; padding: .3rem 1rem .34rem .4rem; }
.coin-hap.buyuk svg { width: 2rem; height: 2rem; }
.coin-hap.vur { animation: coinVur .4s ease; }
@keyframes coinVur { 40% { transform: scale(1.18); } }

#ust-sag { position: absolute; right: .8rem; top: .7rem; display: flex; gap: .5rem; }

#koruma {
  position: absolute; left: 50%; top: 4.6rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: .45rem; padding: .22rem .8rem .26rem .5rem;
  background: linear-gradient(180deg, #45b4f5, #2276cc); border: .16rem solid #10203c; border-radius: 1.2rem;
  font: 900 .92rem 'Rubik'; white-space: nowrap; box-shadow: 0 .24rem 0 rgba(8, 20, 42, .5);
}
#koruma svg { width: 1.3rem; height: 1.3rem; }
#koruma em { font-style: normal; background: #10203c; color: #bfe8ff; padding: .1rem .42rem; border-radius: .3rem; -webkit-text-stroke: 0; }
#koruma.az { background: linear-gradient(180deg, #ffa24a, #e0561a); animation: yanip 1s infinite; }
@keyframes yanip { 50% { filter: brightness(1.3); } }

/* duyuru / mesaj / ucan coin */
#duyuru { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
#duyuru b { display: block; font: 900 3.2rem 'Rubik'; -webkit-text-stroke: .1em #10203c; text-shadow: 0 .3rem 0 #10203c; }
#duyuru span { font: 800 1.2rem 'Rubik'; -webkit-text-stroke: .16em #10203c; paint-order: stroke fill; }
#duyuru.gir { animation: duyuruGir 3.2s ease forwards; }
@keyframes duyuruGir {
  0% { opacity: 0; transform: translateX(-50%) scale(.6); }
  12% { opacity: 1; transform: translateX(-50%) scale(1.08); }
  20% { transform: translateX(-50%) scale(1); }
  80% { opacity: 1; } 100% { opacity: 0; }
}
#mesajlar { position: absolute; left: .9rem; top: 5.2rem; display: flex; flex-direction: column; gap: .3rem; max-width: 34vw; }
.mesaj {
  padding: .3rem .7rem .34rem; border-radius: .5rem; background: rgba(12, 26, 54, .86);
  border: .12rem solid #10203c; border-left: .38rem solid var(--sari);
  font: 800 .92rem 'Rubik'; paint-order: stroke fill; -webkit-text-stroke: .12em #10203c;
  animation: mesajGir .25s ease;
}
@keyframes mesajGir { from { opacity: 0; transform: translateX(-1rem); } }
#ucan-coin { position: absolute; left: 50%; top: 38%; }
.ucan {
  position: absolute; transform: translate(-50%, 0); white-space: nowrap;
  display: flex; align-items: center; gap: .2rem; font: 900 1.6rem 'Rubik'; color: #ffd76b;
  -webkit-text-stroke: .14em #10203c; paint-order: stroke fill; animation: ucanCik 1.3s ease-out forwards;
}
.ucan svg { width: 1.5rem; height: 1.5rem; }
.ucan.sans { font-size: 2.2rem; color: #ffe89a; }
@keyframes ucanCik { 0% { opacity: 0; transform: translate(-50%, 1rem) scale(.7); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -4rem) scale(1); } }

/* ── oyuncu HUD'lari ────────────────────────────────────────── */
#oyuncu-hudlar { position: absolute; left: 0; right: 0; bottom: .6rem; display: flex; justify-content: center; }
.p-hud {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .4rem .6rem .45rem; border-radius: .9rem;
}
.p-hud::before {                    /* o oyuncunun hasar kizarmasi */
  content: ''; position: absolute; inset: -40vh -2rem -1rem; pointer-events: none; border-radius: 1rem;
  background: radial-gradient(ellipse at 50% 100%, rgba(220, 30, 40, .55), transparent 65%);
  opacity: var(--kanama, 0); transition: opacity .2s;
}
.p-ust { display: flex; align-items: center; gap: .5rem; }
.p-ad { font: 900 .8rem 'Rubik'; letter-spacing: .08em; color: #eaf4ff; }
.p-ad { display: none; }   /* tek kisilikte ad gereksiz */
.p-hud[data-p="0"] .p-ad { color: #6fe0ea; }
.p-hud[data-p="1"] .p-ad { color: #a8e86a; }
.canlar, .aclik { display: flex; gap: .06rem; }
.aclik { flex-direction: row-reverse; }
.kalp, .et { width: 1.15rem; height: 1.15rem; display: block; filter: drop-shadow(0 .1rem 0 rgba(8, 18, 40, .8)); }
.kalp svg, .et svg { width: 100%; height: 100%; }
.kalp.bos, .et.bos { filter: brightness(.25) saturate(.2); opacity: .55; }
.kalp.yarim svg, .et.yarim svg { clip-path: inset(0 50% 0 0); }
.kalp.yarim, .et.yarim { position: relative; }
.p-hud.az-can .kalp.dolu { animation: canAtar 1s ease-in-out infinite; }
@keyframes canAtar { 50% { transform: scale(1.18); } }
.p-esya { min-height: 1.1rem; font: 800 .88rem 'Rubik'; color: #fff; -webkit-text-stroke: .14em #10203c; paint-order: stroke fill; }
.p-esya.gir { animation: esyaGir .5s ease; }
@keyframes esyaGir { from { opacity: 0; transform: translateY(.4rem); } }

/* kisayol cubugu */
.kisayol { display: flex; gap: .26rem; padding: .28rem; background: rgba(8, 20, 44, .5); border: .16rem solid #10203c; border-radius: .7rem; }
.kisayol .yuva { position: relative; width: 3rem; height: 3rem; background: rgba(28, 44, 78, .9); border: .14rem solid rgba(255, 255, 255, .14); border-radius: .45rem; }
.kisayol .yuva.secili { border-color: #fff; box-shadow: 0 0 0 .12rem rgba(255, 255, 255, .5), inset 0 0 .6rem rgba(255, 255, 255, .25); transform: translateY(-.12rem); }

@keyframes doldurYanip { 50% { filter: brightness(1.15); } }

/* ODULLU REKLAM dugmeleri (GameMonetize) — magaza basligindaki +100 coin
   ve can/aclik dusunce cikan DOLDUR.  DOLDUR kisayolun ustunde, ortada:
   yon pedi solda, aksiyon dugmeleri sagda, orasi bos. */
#doldur {
  position: absolute; left: 50%; bottom: 7.4rem; transform: translateX(-50%);
  pointer-events: auto; display: flex; align-items: center; gap: .45rem;
  padding: .35rem .7rem .42rem .45rem; cursor: pointer; white-space: nowrap;
  border-radius: .35rem; border: .16rem solid #182445; color: #fff; font: 900 1rem 'Rubik';
  background: linear-gradient(#6fe25a, #2fa82a);
  box-shadow: inset 0 .2rem 0 rgba(255, 255, 255, .4), inset 0 -.32rem 0 rgba(0, 0, 0, .25), 0 .28rem 0 #182445;
  animation: doldurNabiz 1.1s ease-in-out infinite;
}
#doldur svg { width: 1.7rem; height: 1.7rem; filter: drop-shadow(0 .12rem 0 #182445); }
#doldur span { paint-order: stroke fill; -webkit-text-stroke: .17em #182445; }
#doldur:active { transform: translateX(-50%) translateY(.2rem); }
@keyframes doldurNabiz { 50% { transform: translateX(-50%) scale(1.07); } }
html.mobil #doldur { min-height: 40px; font-size: .92rem; }   /* yeri arayuz.js olcuyor */

#mag-reklam { min-width: 0; padding: .35rem .8rem .4rem .5rem; font-size: 1.05rem; gap: .35rem; text-transform: none; }
#mag-reklam svg { width: 1.6em; height: 1.6em; }
#mag-reklam em { font-style: normal; display: inline-flex; align-items: center; gap: .15rem; color: #fff6a0; }
#mag-reklam em svg { width: 1.25em; height: 1.25em; }
html.mobil #mag-reklam { min-height: 34px; font-size: .9rem; padding: .25rem .6rem .3rem .4rem; }

#yeme { position: absolute; left: 50%; bottom: 10.5rem; transform: translateX(-50%); width: 10rem; height: .5rem; background: rgba(8, 20, 44, .7); border: .12rem solid #10203c; border-radius: .3rem; overflow: hidden; }
#yeme i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb35c, #c9661d); }

#kilit-perde { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(8, 20, 44, .35); cursor: pointer; }
.kilit-yazi {
  padding: .7rem 1.6rem .8rem; background: linear-gradient(180deg, #6fe0a0, #22a866);
  border: .18rem solid #10203c; border-radius: 1rem; font: 900 1.5rem 'Rubik'; color: #fff;
  box-shadow: 0 .34rem 0 #14764a; -webkit-text-stroke: .1em rgba(16, 32, 60, .5); paint-order: stroke fill;
}

#tost {
  position: fixed; left: 50%; bottom: 14%; transform: translate(-50%, 1rem); z-index: 60;
  padding: .5rem 1.2rem .55rem; background: linear-gradient(180deg, #2c3c66, #16243f); color: #fff;
  border: .16rem solid #10203c; border-radius: .8rem; font: 800 1.05rem 'Rubik';
  box-shadow: 0 .3rem 0 rgba(8, 20, 42, .6); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
#tost.acik { opacity: 1; transform: translate(-50%, 0); }
#tost.iyi { background: linear-gradient(180deg, #6fe0a0, #22a866); }

/* ══ Modal kart pencere (magaza, ayar, nasil, olum) ═══════════ */

.modal {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem;
  background: rgba(10, 30, 60, .45); backdrop-filter: blur(3px);
}
.kart-pencere {
  position: relative; width: min(46rem, 94vw); max-height: 92vh; display: flex; flex-direction: column;
  background: linear-gradient(#fdfdff, #e6eefb); color: #1d2b44;
  border: .22rem solid #1d2b44; border-radius: 1.4rem;
  box-shadow: inset 0 -.35rem 0 rgba(29, 43, 68, .12), 0 .55rem 0 #1d2b44, 0 1.5rem 3rem rgba(0, 0, 0, .35);
  animation: pencereGir .22s cubic-bezier(.2, 1.4, .5, 1);
}
.kart-pencere.genis { width: min(64rem, 96vw); height: min(44rem, 90vh); }
.kart-pencere.dar { width: min(30rem, 92vw); }
.kart-pencere.orta { text-align: center; padding: 1.4rem 1.6rem 1.8rem; }
@keyframes pencereGir { from { transform: scale(.85); opacity: 0; } }
.kp-bas {
  display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem .8rem 1.2rem;
  background: linear-gradient(#4fb4ff, #2a86e0); color: #fff; border-radius: 1.2rem 1.2rem 0 0;
  border-bottom: .22rem solid #1d2b44; font: 900 1.5rem 'Rubik'; text-shadow: 0 .14rem 0 rgba(0, 0, 0, .3);
}
.kp-bas b { flex: 1; letter-spacing: .04em; }
.kp-ikon { width: 1.9rem; height: 1.9rem; }
.kp-kapat {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; color: #fff; cursor: pointer;
  background: linear-gradient(#ff7a7a, #e0364a); border: .16rem solid #1d2b44; border-radius: .7rem;
  box-shadow: inset 0 .16rem 0 rgba(255, 255, 255, .4), 0 .22rem 0 #1d2b44;
}
.kp-kapat svg { width: 1.3rem; height: 1.3rem; }
.kp-kapat:active { transform: translateY(.16rem); box-shadow: 0 .06rem 0 #1d2b44; }
.kp-ic { padding: 1rem 1.3rem 1.4rem; overflow: auto; }
.kart-pencere h2 { margin: 0 0 .8rem; font: 900 2.4rem 'Rubik'; color: #1d2b44; }
.kart-pencere.olum h2 { color: #e0364a; }
.kart-pencere p { font: 700 1.1rem 'Rubik'; margin: .4rem 0 1rem; line-height: 1.45; }
.kart-pencere.dar > p { padding: 1.4rem 1.4rem 0; text-align: center; }
.satir { display: flex; gap: .9rem; justify-content: center; padding: 0 1rem 1.3rem; flex-wrap: wrap; }
.dikey-satir { display: flex; flex-direction: column; align-items: stretch; gap: .9rem; }

/* sekmeler */
.sekmeler { display: flex; gap: .5rem; padding: .8rem 1rem 0; border-bottom: .16rem solid rgba(29, 43, 68, .15); }
.sekmeler button {
  display: flex; align-items: center; gap: .45rem; padding: .55rem 1.1rem .65rem; cursor: pointer;
  font: 900 1.1rem 'Rubik'; color: #51607a; background: #d5dfef; border: .16rem solid rgba(29, 43, 68, .25);
  border-bottom: 0; border-radius: .9rem .9rem 0 0; position: relative; top: .16rem;
}
.sekmeler button svg { width: 1.4rem; height: 1.4rem; }
.sekmeler button:hover { color: #1d2b44; background: #e3ebf7; }
.sekmeler button.aktif { color: #fff; background: linear-gradient(#ffbe3c, #f28a14); border-color: #1d2b44; text-shadow: 0 .12rem 0 rgba(0, 0, 0, .3); }
.sekmeler button[data-sekme="pet"].aktif { background: linear-gradient(#b884ff, #8a4ef0); }
.sekmeler button[data-sekme="pelerin"].aktif { background: linear-gradient(#5cc4ff, #2a8fe8); }

/* urun kartlari */
.urun-izgara {
  flex: 1; overflow: auto; padding: 1rem; display: grid; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .9rem;
}
.urun-kart {
  position: relative; display: flex; flex-direction: column; align-items: center; padding: .55rem .55rem .65rem;
  background: #fff; border: .18rem solid #c3cfe2; border-radius: 1rem; box-shadow: 0 .3rem 0 #c3cfe2;
  transition: transform .1s ease;
}
.urun-kart:hover { transform: translateY(-.2rem); }
.urun-kart .gorsel {
  width: 100%; aspect-ratio: 1; border-radius: .7rem; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #ffffff 0%, #cfe6ff 70%, #a9d0f7 100%);
}
.urun-kart .gorsel img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.urun-kart .ad { margin: .45rem 0 .1rem; font: 900 1rem 'Rubik'; text-align: center; line-height: 1.15; min-height: 2.3em; display: grid; place-items: center; }
.urun-kart .rozet {
  position: absolute; top: .45rem; left: .45rem; padding: .12rem .5rem; border-radius: 1rem;
  font: 900 .7rem 'Rubik'; color: #fff; text-transform: uppercase; letter-spacing: .04em;
}
.rozet.yaygin { background: #7c8aa2; }
.rozet.nadir { background: #2a8fe8; }
.rozet.destansi { background: #8a4ef0; }
.rozet.efsane { background: linear-gradient(90deg, #f28a14, #e0364a); }
.urun-kart .rbtn { width: 100%; min-width: 0; font-size: 1rem; padding: .45rem .5rem; border-radius: .75rem; }
.urun-kart .rbtn svg { width: 1.3em; height: 1.3em; }
.urun-kart.sahip { border-color: #8fd48a; box-shadow: 0 .3rem 0 #8fd48a; }
.urun-kart.secili { border-color: #33b52d; box-shadow: 0 0 0 .2rem #6be35a, 0 .3rem 0 #33b52d; background: #f0fff0; }
.urun-kart.yetmez .rbtn { filter: grayscale(.5) brightness(.95); }
.urun-kart.secili .rbtn[disabled] { filter: none; cursor: default; }
.urun-kart.salla { animation: salla .35s ease; }
@keyframes salla { 20%, 60% { transform: translateX(-.35rem); } 40%, 80% { transform: translateX(.35rem); } }

/* ayar / nasil */
.alt-baslik { font: 900 1rem 'Rubik'; color: #51607a; margin: .2rem 0 .5rem; text-transform: uppercase; letter-spacing: .04em; }
.kart-liste { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.sec-kart {
  display: flex; align-items: center; gap: .45rem; padding: .45rem .9rem; cursor: pointer;
  background: #fff; color: #1d2b44; border: .16rem solid #c3cfe2; border-radius: .8rem;
  font: 800 1rem 'Rubik'; box-shadow: 0 .2rem 0 #c3cfe2;
}
.sec-kart b { font: 900 1.05rem 'Rubik'; }
.sec-kart.secili { border-color: #33b52d; background: #eaffea; box-shadow: 0 .2rem 0 #33b52d; }
.ayar-satir {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; font: 700 1.05rem 'Rubik'; border-bottom: .1rem solid rgba(29, 43, 68, .1);
}
.ayar-satir input[type="range"] { flex: 1; accent-color: #33b52d; }
.ayar-satir input[type="checkbox"] { width: 1.5rem; height: 1.5rem; accent-color: #33b52d; }
.nasil { margin: 0; padding-left: 1.4rem; font: 600 1.05rem 'Rubik'; line-height: 1.6; }
.nasil li { margin-bottom: .3rem; }
.tus-tablo { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem; margin-top: 1rem; }
.tus-tablo div { display: flex; align-items: center; gap: .5rem; font: 700 .95rem 'Rubik'; }
.tus-tablo kbd {
  font: 900 .8rem 'Rubik'; color: #1d2b44; background: #fff; border: .14rem solid #c3cfe2; border-bottom-width: .28rem;
  border-radius: .45rem; padding: .15rem .45rem; min-width: 3.4rem; text-align: center;
}

#kilit-perde { cursor: pointer; z-index: 9; background: rgba(10, 30, 60, .3); backdrop-filter: none; }
.kilit-yazi {
  padding: .9rem 2rem; border-radius: 1.2rem; font: 900 1.8rem 'Rubik'; color: #fff;
  background: linear-gradient(#6be35a, #33b52d); border: .2rem solid rgba(0, 0, 0, .35);
  box-shadow: inset 0 .22rem 0 rgba(255, 255, 255, .45), 0 .42rem 0 #1f7a1d; text-shadow: 0 .14rem 0 rgba(0, 0, 0, .35);
  animation: nabiz 1.4s ease-in-out infinite;
}
@keyframes nabiz { 50% { transform: scale(1.05); } }

/* ══ Envanter panelleri (piksel izgara, --o olcegi) ═════════ */

.yuva {
  position: relative; width: var(--yuva); height: var(--yuva);
  background: rgba(120, 120, 128, .55);
  box-shadow:
    inset calc(var(--o) * 1px) calc(var(--o) * 1px) 0 rgba(255, 255, 255, .22),
    inset calc(var(--o) * -1px) calc(var(--o) * -1px) 0 rgba(0, 0, 0, .35);
  cursor: pointer;
}
.yuva.buyuk { width: calc(var(--yuva) * 1.25); height: calc(var(--yuva) * 1.25); }
.yuva img { position: absolute; inset: calc(var(--o) * 1px); width: calc(100% - var(--o) * 2px); height: calc(100% - var(--o) * 2px); }
.yuva .adet {
  position: absolute; right: calc(var(--o) * 1px); bottom: calc(var(--o) * .5px);
  line-height: 1; font-family: 'Pixelify Sans', monospace; font-size: calc(var(--o) * 4.6px);
  text-shadow: 0 calc(var(--o) * 1px) 0 #000, calc(var(--o) * 1px) 0 0 #000;
}
.yuva .dayanik {
  position: absolute; left: calc(var(--o) * 1.5px); bottom: calc(var(--o) * 1.5px);
  height: calc(var(--o) * 1.5px); max-width: calc(100% - var(--o) * 3px);
  box-shadow: 0 calc(var(--o) * .5px) 0 rgba(0, 0, 0, .7);
}
.yuva:hover { background: rgba(160, 160, 170, .6); }

#imlec {
  position: fixed; z-index: 60; width: var(--yuva); height: var(--yuva);
  transform: translate(-50%, -50%); pointer-events: none;
}
#imlec img { width: 100%; height: 100%; }
#imlec .adet {
  position: absolute; right: 0; bottom: 0;
  font-family: 'Pixelify Sans', monospace; font-size: calc(var(--o) * 4.6px);
  text-shadow: 0 calc(var(--o) * 1px) 0 #000;
}

#ipucu {
  position: fixed; z-index: 70; transform: translate(-50%, -100%);
  padding: calc(var(--o) * 1px) calc(var(--o) * 2.5px);
  background: rgba(10, 8, 20, .92); border: calc(var(--o) * .6px) solid #6b4ea8;
  font-size: calc(var(--o) * 4.4px); pointer-events: none; white-space: nowrap;
}

/* ══ Perdeler / pencereler ═════════════════════════════════════ */

.perde {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: rgba(6, 8, 14, .58); backdrop-filter: blur(4px);
}
.perde.yan { place-items: center; }

.pencere {
  background: var(--panel); border: calc(var(--o) * 1px) solid var(--panel-kenar);
  box-shadow: 0 calc(var(--o) * 3px) 0 rgba(0, 0, 0, .35), inset 0 calc(var(--o) * 1px) 0 rgba(255, 255, 255, .08);
  max-width: min(94vw, calc(var(--o) * 260px)); max-height: 92vh; overflow: auto;
  padding: 0 0 calc(var(--o) * 4px);
}
.pencere.dar { max-width: min(92vw, calc(var(--o) * 120px)); padding-bottom: calc(var(--o) * 6px); }
.pencere-bas { font-weight: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--o) * 2px) calc(var(--o) * 4px);
  background: rgba(255, 255, 255, .06); border-bottom: calc(var(--o) * .6px) solid rgba(255, 255, 255, .12);
  font-family: 'Rubik', sans-serif; font-size: calc(var(--o) * 6px); letter-spacing: .5px;
}
/* envanter kapatma: once koyu zemin ustunde 12 px gri "x" idi, telefonda gorunmuyordu */
.kapat {
  display: grid; place-items: center; width: calc(var(--o) * 10px); height: calc(var(--o) * 10px); min-width: 36px; min-height: 36px;
  padding: 0; cursor: pointer; color: #fff; font: 900 calc(var(--o) * 5.5px)/1 'Rubik', sans-serif;
  background: linear-gradient(#ff7a7a, #e0364a); border: .16rem solid #1d2b44; border-radius: .6rem;
  box-shadow: inset 0 .16rem 0 rgba(255, 255, 255, .4), 0 .2rem 0 #1d2b44;
}
.kapat:active { transform: translateY(.12rem); }
.pencere-ic { display: flex; gap: calc(var(--o) * 4px); padding: calc(var(--o) * 4px); }
.pencere-ic.dikey { flex-direction: column; }
.pencere .alt-baslik { font: 800 calc(var(--o) * 4.6px) 'Rubik'; color: #b9c0d0; margin-bottom: calc(var(--o) * 1.5px); text-transform: none; }
.izgara { display: grid; grid-template-columns: repeat(9, var(--yuva)); gap: calc(var(--o) * 1px); }
.kisayol-izgara { margin-top: calc(var(--o) * 3px); }
.sandik-izgara { grid-template-columns: repeat(9, var(--yuva)); margin-bottom: calc(var(--o) * 4px); }
.sol-sutun { width: calc(var(--o) * 76px); flex: none; display: flex; flex-direction: column; }
.tarif-liste { overflow: auto; max-height: calc(var(--o) * 96px); display: flex; flex-direction: column; gap: calc(var(--o) * 1px); }
.bos-not { font-size: calc(var(--o) * 4.2px); color: #9aa2b4; padding: calc(var(--o) * 2px); line-height: 1.5; }
.tarif {
  display: grid; grid-template-columns: calc(var(--o) * 11px) 1fr; grid-template-rows: auto auto;
  align-items: center; gap: 0 calc(var(--o) * 2px);
  background: rgba(255, 255, 255, .05); border: 0; border-left: calc(var(--o) * 1px) solid var(--yesil);
  color: var(--acik); padding: calc(var(--o) * 1.5px) calc(var(--o) * 2px); cursor: pointer; text-align: left;
}
.tarif:hover { background: rgba(87, 200, 77, .18); }
.tarif .sonuc { grid-row: span 2; width: calc(var(--o) * 11px); height: calc(var(--o) * 11px); }
.tarif .ad { font-size: calc(var(--o) * 4.4px); font-weight: 600; }
.tarif .malz { display: flex; flex-wrap: wrap; gap: calc(var(--o) * 1.5px); font-size: calc(var(--o) * 3.6px); color: #aeb6c6; }
.tarif .mini { display: inline-flex; align-items: center; gap: calc(var(--o) * .5px); }
.tarif .mini img { width: calc(var(--o) * 5px); height: calc(var(--o) * 5px); }

.zanaat-duzen, .ocak-duzen { display: flex; align-items: center; gap: calc(var(--o) * 3px); margin-bottom: calc(var(--o) * 4px); }
.zanaat-izgara.b2 { grid-template-columns: repeat(2, var(--yuva)); }
.zanaat-izgara.b3 { grid-template-columns: repeat(3, var(--yuva)); }
.zanaat-ok, .ocak-ok {
  width: calc(var(--o) * 14px); height: calc(var(--o) * 4px); position: relative;
  background: rgba(255, 255, 255, .12);
}
.zanaat-ok::after, .ocak-ok::after {
  content: ''; position: absolute; right: calc(var(--o) * -3px); top: 50%; transform: translateY(-50%);
  border-left: calc(var(--o) * 3px) solid rgba(255, 255, 255, .3);
  border-top: calc(var(--o) * 3px) solid transparent; border-bottom: calc(var(--o) * 3px) solid transparent;
}
.ocak-ok i { display: block; height: 100%; width: 0; background: var(--sari); }
.ocak-sut { display: flex; flex-direction: column; align-items: center; gap: calc(var(--o) * 1px); }
.ates { width: calc(var(--o) * 8px); height: calc(var(--o) * 8px); background: rgba(0, 0, 0, .4); display: flex; align-items: flex-end; }
.ates i { display: block; width: 100%; background: linear-gradient(#ffd166, #e2571e); height: 0; }

/* ══ Dokunmatik (Minecraft klasik semasi) ══════════════════════

  Sol alt: yon tuslari (8 yon, ortasi sinme).  Sag alt: buyuk zipla.
  Blok koy/kir/vur icin dugme YOK: dokun / basili tut (girdi.js).
  Hepsi yari saydam plaka — 3B sahne arkadan gorunsun.               */

#dok { display: none; }
body.mobil #dok { display: block; }
body.mobil #dok * { pointer-events: auto; }

#dok-pad {
  position: absolute; left: max(1.6rem, env(safe-area-inset-left)); bottom: 1.6rem;
  width: 13.5rem; height: 13.5rem; touch-action: none;
}
/* tus yerleri YUZDE: dar ekranda ped kuculunce tuslar birlikte kuculur */
#dok-pad .ok, #dok-sin {
  position: absolute; display: grid; place-items: center; width: 32.6%; height: 32.6%; color: #fff;
  border-radius: .45rem; border: .16rem solid rgba(24, 36, 69, .75);
  background: linear-gradient(rgba(79, 106, 168, .55), rgba(51, 72, 126, .55));
  box-shadow: inset 0 .2rem 0 rgba(255, 255, 255, .25), inset 0 -.3rem 0 rgba(0, 0, 0, .22);
}
#dok-pad .ok svg, #dok-sin svg { width: 58%; height: 58%; filter: drop-shadow(0 .12rem 0 #182445); }
#dok-pad [data-yon="ileri"] { left: 33.7%; top: 0; }
#dok-pad [data-yon="geri"] { left: 33.7%; bottom: 0; transform: rotate(180deg); }
#dok-pad [data-yon="sol"] { left: 0; top: 33.7%; transform: rotate(-90deg); }
#dok-pad [data-yon="sag"] { right: 0; top: 33.7%; transform: rotate(90deg); }
#dok-pad .ok.bas { background: linear-gradient(rgba(255, 216, 74, .9), rgba(242, 160, 20, .9)); }
#dok-sin { left: 33.7%; top: 33.7%; border-radius: 50%; opacity: .85; }
#dok-sin.acik { background: linear-gradient(rgba(111, 226, 90, .9), rgba(47, 168, 42, .9)); opacity: 1; }

#dok-zipla {
  position: absolute; right: max(2.2rem, env(safe-area-inset-right)); bottom: 3rem;
  display: grid; place-items: center; width: 6.6rem; height: 6.6rem; border-radius: 50%; color: #fff; touch-action: none;
  border: .2rem solid rgba(24, 36, 69, .8);
  background: linear-gradient(rgba(79, 106, 168, .6), rgba(51, 72, 126, .6));
  box-shadow: inset 0 .25rem 0 rgba(255, 255, 255, .28), inset 0 -.4rem 0 rgba(0, 0, 0, .22), 0 .3rem 0 rgba(10, 16, 36, .4);
}
#dok-zipla svg { width: 50%; height: 50%; filter: drop-shadow(0 .14rem 0 #182445); }
#dok-zipla.bas { background: linear-gradient(rgba(111, 226, 90, .9), rgba(47, 168, 42, .9)); transform: translateY(.15rem); }

/* YUMRUK (kir / vur) ve KOY (koy / kullan / ye): ziplamanin yaninda, nisan ekran ortasi */
.dok-aksiyon {
  position: absolute; display: grid; place-items: center; border-radius: 50%; color: #fff; touch-action: none;
  border: .2rem solid rgba(24, 36, 69, .85);
  box-shadow: inset 0 .25rem 0 rgba(255, 255, 255, .32), inset 0 -.4rem 0 rgba(0, 0, 0, .25), 0 .3rem 0 rgba(10, 16, 36, .4);
}
.dok-aksiyon svg { width: 54%; height: 54%; filter: drop-shadow(0 .14rem 0 #182445); }
.dok-aksiyon.bas { transform: translateY(.15rem) scale(.96); filter: brightness(1.2); }
#dok-yumruk {
  right: calc(max(2.2rem, env(safe-area-inset-right)) + 7.4rem); bottom: 9.6rem; width: 6rem; height: 6rem;
  background: linear-gradient(rgba(255, 110, 110, .92), rgba(206, 34, 54, .92));
}
#dok-koy {
  right: calc(max(2.2rem, env(safe-area-inset-right)) + .8rem); bottom: 10.8rem; width: 5rem; height: 5rem;
  background: linear-gradient(rgba(111, 226, 90, .85), rgba(47, 168, 42, .85));
}

/* dokunmatik canta dugmesi (telefonda envanter) */
#dok-canta {
  display: none; position: absolute; right: calc(max(2.2rem, env(safe-area-inset-right)) + .8rem); bottom: 16.4rem;
  width: 4.6rem; height: 4.6rem; place-items: center; cursor: pointer; border-radius: 1rem;
  background: linear-gradient(rgba(91, 123, 180, .92), rgba(47, 69, 116, .92));
  border: .2rem solid rgba(16, 32, 60, .85); box-shadow: inset 0 .22rem 0 rgba(255, 255, 255, .3), 0 .3rem 0 rgba(8, 20, 42, .5);
}
#dok-canta svg { width: 50%; height: 50%; color: #fff; filter: drop-shadow(0 .12rem 0 #10203c); }
body.mobil #dok-canta { display: grid; }

/* telefon HUD: parmakla rahat basilan olcek (>= 44 px) */
html.mobil { font-size: clamp(10px, min(2.9vh, 3.6vw), 16px); }
html.mobil .kp-kapat { width: max(2.6rem, 40px); height: max(2.6rem, 40px); }
@media (min-height: 400px) { html.mobil { --o: 2.2; } }
html.mobil #koruma { top: 4.2rem; }
@media (max-width: 800px) {
  html.mobil #dok-pad { width: 11.8rem; height: 11.8rem; left: max(1.2rem, env(safe-area-inset-left)); bottom: 1.2rem; }
  html.mobil #dok-zipla { width: 6rem; height: 6rem; right: max(1.6rem, env(safe-area-inset-right)); bottom: 2.4rem; }
}

/* DIKEY TELEFON oyun sirasinda: Minecraft mobil gibi yatay oynanir */
#yatay-uyari {
  display: none; position: fixed; inset: 0; z-index: 95; place-content: center; gap: 1.6rem; text-align: center;
  background: radial-gradient(ellipse at 50% 35%, #bfe8ff 0%, #5fb6f2 55%, #2f86d8 100%); color: #fff;
  font: 900 1.5rem 'Rubik'; paint-order: stroke fill; -webkit-text-stroke: .16em #16305c; padding: 2rem;
}
#yatay-uyari .telefon-ikon {
  width: 4.4rem; height: 7.6rem; margin: 0 auto; border: .55rem solid #fff; border-radius: 1.1rem;
  box-shadow: 0 .35rem 0 #16305c; animation: telefonCevir 1.8s ease-in-out infinite;
}
@keyframes telefonCevir { 0%, 25% { transform: rotate(0); } 65%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) { body.mobil.oyunda #yatay-uyari { display: grid; } }

/* MAGAZA telefonda: kucuk ekranda neredeyse tam ekran, sik baslik, kucuk kartlar
   (once 667x375'te bir satir karttan fazlasi gorunmuyordu) */
@media (max-height: 560px), (max-width: 640px) {
  .modal { padding: .5rem max(.5rem, env(safe-area-inset-right)) .5rem max(.5rem, env(safe-area-inset-left)); }
  /* yuzde yukseklik grid ogesinde icerige cozuluyordu (pencere 588 px > ekran 375) -> gorunum birimi */
  .kart-pencere.genis { width: calc(100vw - 1rem); height: calc(100vh - 1rem); height: calc(100dvh - 1rem); border-radius: .9rem; box-shadow: 0 .3rem 0 #1d2b44; }
  .kart-pencere { max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
  .kp-bas { padding: .4rem .5rem .4rem .8rem; gap: .5rem; font-size: 1.1rem; border-radius: .7rem .7rem 0 0; }
  .kp-ikon { width: 1.5rem; height: 1.5rem; }
  .kp-kapat { width: 2.3rem; height: 2.3rem; }
  .kp-bas .coin-hap { font-size: 1.05rem; padding: .18rem .7rem .22rem 2rem; }
  .kp-bas .coin-hap svg { width: 2.3rem; height: 2.3rem; }
  .sekmeler { padding: .4rem .6rem 0; gap: .35rem; }
  .sekmeler button { padding: .35rem .75rem .45rem; font-size: .92rem; }
  .sekmeler button svg { width: 1.15rem; height: 1.15rem; }
  .urun-izgara { padding: .55rem; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); }
  .urun-kart { padding: .3rem .3rem .4rem; border-radius: .7rem; box-shadow: 0 .2rem 0 #c3cfe2; }
  .urun-kart .gorsel { aspect-ratio: 1.3; border-radius: .5rem; }
  .urun-kart .ad { font-size: .82rem; min-height: 0; margin: .28rem 0 .28rem; }
  .urun-kart .rbtn { font-size: .82rem; padding: .3rem .3rem; border-radius: .55rem; }
  .urun-kart .rozet { top: .3rem; left: .3rem; font-size: .58rem; padding: .08rem .38rem; }
  .kp-ic { padding: .7rem .9rem 1rem; }
  .kart-pencere.orta { padding: 1rem 1.2rem 1.2rem; }
}
@media (max-width: 640px) and (orientation: portrait) {
  .kp-bas > b { font-size: .95rem; }
  /* sekmeler dar ekranda esit paylasir (Pelerinler sagdan tasiyordu) */
  .sekmeler button { flex: 1 1 0; min-width: 0; justify-content: center; padding: .35rem .3rem .45rem; }
  .sekmeler button span { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .urun-izgara { grid-template-columns: repeat(auto-fill, minmax(6.8rem, 1fr)); }
}

/* ══ iOS: KOPYALA/YAPISTIR BALONU ve BUYUTEC ═══════════════════

  iPhone'da oyunun kendi UZUN BASMA hareketleri (blok kirmak icin
  basili tutmak 280 ms, kisayoldan esya atmak 550 ms) Safari'nin
  "Kopyala / Ara / Resmi Kaydet" balonunu ve buyutecini aciyordu.
  Uc kaynagi birden kapatmak gerekiyor:

    1. `-webkit-touch-callout` ve `user-select` HER ogede (::before/
       ::after dahil).  Once yalniz `html, body, #hud, #dok, #menu,
       .modal, .perde, button` listeliydi; karakter ekrani, envanter
       penceresi, tost ve simgeler listede yoktu.
    2. RESIMLER ayri bir kaynak: iOS uzun basinca <img> uzerinde
       "Resmi Kaydet" menusu aciyor.  Esya simgeleri ve karakter
       kartlari resim — `-webkit-touch-callout:none` + `user-drag:none`
       + `pointer-events:none` (dokunus alttaki yuvaya/dugmeye gitsin).
    3. `touch-action`: dugmelerde `manipulation` (cift dokunus
       yakinlastirmasi ve 300 ms gecikme yok), kaydirilan panellerde
       `pan-y`, oyun tuvalinde `none`.

  Tek istisna acilis hata kutusu: oyuncunun metni KOPYALAYABILMESI
  gerekiyor.                                                          */
html, body, #sahne, #hud, #dok, #menu, #karakter-sec, .modal, .perde,
*, *::before, *::after {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
img {
  -webkit-touch-callout: none; -webkit-user-drag: none; user-drag: none;
  pointer-events: none;                 /* dokunus alttaki dugmeye gitsin */
}
html, body { overscroll-behavior: none; }   /* iOS lastik cekme / yenileme yok */
html, body, #sahne, #hud, #dok { touch-action: none; }
button, .yuva, .bayrak, .kar-kart, .sekmeler button, .sbtn, .rbtn, .yb { touch-action: manipulation; }
.urun-izgara, .kp-ic, .tarif-liste, .gorev-liste, .pencere, #envanter, .kart-liste { touch-action: pan-y; }
#acilis-hata, #acilis-hata * {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}

/* ══ Kucuk ekran ═══════════════════════════════════════════════ */

@media (max-width: 1100px) { :root { --o: 2.4; } }
@media (max-width: 760px) { :root { --o: 2; } }
@media (max-height: 560px) { :root { --o: 1.8; } }
body.mobil .sol-sutun { display: none; }
body.panel-acik #hud #kisayol { opacity: .25; }

/* ══ GOREV PANELI + ADA SERIDI ═════════════════════════════════ */

#gorevler .sekmeler button.aktif { background: linear-gradient(#6fe0a0, #22a866); }
.kim-rozet {
  padding: .16rem .6rem .2rem; border-radius: .5rem; font: 900 .9rem 'Rubik'; letter-spacing: .06em;
  background: linear-gradient(#6fe0ea, #2a97b4); color: #06263a; border: .14rem solid #10203c;
}
.kim-rozet.alex { background: linear-gradient(#a8e86a, #4ba82c); color: #10300a; }
#ada-serit {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1.1rem; background: #dfe8f8; border-bottom: .16rem solid rgba(16, 32, 60, .15);
}
.ada-sv { display: flex; align-items: center; gap: .5rem; flex: 1 1 18rem; font: 900 1rem 'Rubik'; color: #10203c; }
.ada-sv b { font: 900 1.5rem 'Rubik'; color: #22a866; }
.ada-ray { flex: 1; min-width: 6rem; height: .9rem; background: #b9c6dd; border: .14rem solid #10203c; border-radius: .3rem; overflow: hidden; }
.ada-ray i { display: block; height: 100%; background: linear-gradient(90deg, #8bd44a, #22a866); transition: width .3s; }
.ada-sv em { font: 800 .85rem 'Rubik'; font-style: normal; color: #51607a; }
.ada-uretec { display: flex; align-items: center; gap: .45rem; font: 800 .95rem 'Rubik'; color: #10203c; }
.ada-uretec b {
  padding: .16rem .65rem .24rem; border-radius: .5rem; font: 900 .95rem 'Rubik';
  background: linear-gradient(#ffd76b, #f2a814); border: .14rem solid #10203c; box-shadow: 0 .16rem 0 #10203c;
}

.gorev-liste { flex: 1; overflow: auto; padding: .9rem 1rem 1.2rem; display: flex; flex-direction: column; gap: .55rem; }
.gorev-kart {
  display: flex; align-items: center; gap: .85rem; padding: .55rem .8rem;
  background: #fff; border: .16rem solid #c3cfe2; border-radius: .9rem; box-shadow: 0 .22rem 0 #c3cfe2;
}
.gorev-kart.tamam { background: linear-gradient(#f4fff1, #dff7db); border-color: #22a866; box-shadow: 0 .22rem 0 #22a866; }
.gorev-kart.alindi { opacity: .6; }
.gorev-simge {
  flex: 0 0 auto; width: 2.9rem; height: 2.9rem; display: grid; place-items: center;
  background: #e8eefa; border: .14rem solid #c3cfe2; border-radius: .6rem;
}
.gorev-simge img { width: 2.1rem; height: 2.1rem; image-rendering: pixelated; }
.gorev-orta { flex: 1; min-width: 0; }
.gorev-orta b { display: block; font: 900 1.02rem 'Rubik'; color: #10203c; }
.gorev-ipucu { display: block; margin-bottom: .26rem; font: 700 .8rem 'Rubik'; color: #51607a; }
.gorev-ray { position: relative; height: .92rem; background: #d5dfef; border: .14rem solid #10203c; border-radius: .3rem; overflow: hidden; }
.gorev-ray i { display: block; height: 100%; background: linear-gradient(90deg, #7cd0ff, #2a8fe8); }
.gorev-kart.tamam .gorev-ray i, .gorev-kart.alindi .gorev-ray i { background: linear-gradient(90deg, #8bd44a, #22a866); }
.gorev-ray em { position: absolute; inset: 0; display: grid; place-items: center; font: 900 .72rem 'Rubik'; font-style: normal; color: #10203c; }
.gorev-sag { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; min-width: 7.5rem; }
.gorev-odul { display: flex; align-items: center; gap: .45rem; }
.odul-coin { display: flex; align-items: center; gap: .2rem; font: 900 1rem 'Rubik'; color: #c07a00; }
.odul-coin svg { width: 1.3rem; height: 1.3rem; }
.odul-esya { display: flex; align-items: center; gap: .12rem; font: 900 .78rem 'Rubik'; color: #10203c; }
.odul-esya img { width: 1.7rem; height: 1.7rem; image-rendering: pixelated; }
.gorev-tik { display: flex; align-items: center; gap: .3rem; font: 800 .85rem 'Rubik'; color: #22a866; }
.gorev-tik svg { width: 1.2rem; height: 1.2rem; color: #22a866; }
.gorev-devam { font: 800 .82rem 'Rubik'; color: #8a97ad; }

/* nasil oynanir: iki oyuncunun tus kutulari */
.tus-kutu { margin-top: .8rem; border: .16rem solid #c3cfe2; border-radius: .8rem; overflow: hidden; }
.tus-bas { padding: .3rem .8rem .34rem; font: 900 1rem 'Rubik'; letter-spacing: .08em; color: #06263a; background: linear-gradient(#6fe0ea, #2a97b4); }
.tus-bas.alex { background: linear-gradient(#a8e86a, #4ba82c); color: #10300a; }

/* ── telefon ────────────────────────────────────────────────── */
@media (max-height: 560px), (max-width: 640px) {
  #ada-serit { padding: .45rem .6rem; gap: .5rem; }
  .ada-sv { font-size: .85rem; flex-basis: 12rem; }
  .ada-sv b { font-size: 1.2rem; }
  .ada-uretec, .ada-uretec b { font-size: .82rem; }
  .gorev-liste { padding: .5rem .55rem .8rem; gap: .45rem; }
  .gorev-kart { gap: .5rem; padding: .45rem .5rem; border-radius: .7rem; }
  .gorev-simge { width: 2.3rem; height: 2.3rem; }
  .gorev-simge img { width: 1.7rem; height: 1.7rem; }
  .gorev-orta b { font-size: .9rem; }
  .gorev-ipucu { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gorev-sag { min-width: 5.6rem; gap: .2rem; }
  .odul-coin { font-size: .85rem; }
}
html.mobil #ust-sag { top: .5rem; right: max(.6rem, env(safe-area-inset-right)); gap: .35rem; }
html.mobil .yb { width: 2.7rem; height: 2.7rem; border-radius: .8rem; }
html.mobil .yb svg { width: 1.25rem; height: 1.25rem; }
html.mobil #ust-orta { top: .5rem; }
html.mobil .sv-ray { width: 5rem; }
html.mobil #mesajlar { top: 4.4rem; max-width: 32vw; }
html.mobil #oyuncu-hudlar { bottom: .4rem; }
html.mobil .kisayol .yuva { width: 2.6rem; height: 2.6rem; }
html.mobil .kalp, html.mobil .et { width: .95rem; height: .95rem; }

/*
  PARMAK HEDEFI: kisa ekranda (390 px yuksek yatay telefon) rem 11 px'e
  dusuyor ve sekme dugmeleri 20 px kaliyordu — olculdu.  HUD olceklenmiyor,
  bu yuzden mutlak px alt sinir ise yariyor (panel icindekiler --olcek ile
  carpiliyor, oralarda sinir yaklasiktir).
*/
html.mobil .sekmeler button { min-height: 40px; }
html.mobil .bayrak { min-height: 40px; padding: .22rem .55rem .26rem .34rem; }
/* dikey telefonda panel daha cok kuculuyor (42rem genislik / 375 px) —
   bayraklar ekranda 26 px kaliyordu, sinir orada yukseltiliyor */
@media (orientation: portrait) { html.mobil .bayrak { min-height: 42px; } }
html.mobil .kisayol .yuva { min-width: 32px; min-height: 32px; }
html.mobil #envanter .yuva { min-width: 34px; min-height: 34px; }
html.mobil #ust-sag .yb { min-width: 34px; min-height: 34px; }
/* modal dugmeleri: ikonsuz olanlar (EVET/VAZGEC) yazi boyunda kaliyordu
   — 844x390'da 19 px olculdu.  Pencere .85 olcekli, taban 40 px. */
html.mobil .modal .sbtn { min-height: 40px; }
html.mobil .kar-sec { min-height: 40px; }   /* panel olcegi ~.8 -> ekranda ~32 px */
html.mobil .ayar-satir input[type="checkbox"] { width: 34px; height: 34px; }
html.mobil .ayar-satir input[type="range"] { height: 34px; }
/* NOT: modal pencere (.kart-pencere.genis) kisa ekranda 0.85 olcekli ve
   menu panelleri --olcek ile kuculuyor; PANEL ICINDEKI px sinirlari
   ekranda o carpanla goruluyor (34px -> 29px).  Sinirlar buna gore
   secildi: ekranda ~32-34 px. */
/* dar ekranda kisayol: 9 yuva HER ZAMAN ekrana sigmali (genislik tabanli tavan) */
@media (max-width: 800px) {
  html.mobil .kisayol .yuva { width: min(2.3rem, 8.4vw); height: min(2.3rem, 8.4vw); }
  html.mobil .kisayol { gap: min(.18rem, .7vw); padding: .22rem; }
  html.mobil .kalp, html.mobil .et { width: min(.95rem, 3.4vw); height: min(.95rem, 3.4vw); }
}