:root {
  --mavi: #1c63c4;
  --mavi-koyu: #0f3f8c;
  --tahta: #1857b0;
  --mor: #7b2fd0;
  --mor-acik: #b05cf0;
  --dugme: #1b2a4a;
  --vurgu: #f2b632;
  --yazi: #ffffff;
  --tas: #f3eedf;
  --tas-kenar: #d9d1bb;
  --k: #d0213a;
  --s: #e8a10c;
  --m: #1b8fd6;
  --y: #161616;
  /* Ekrana göre ölçek: yatay telefonda da masaüstünde de aynı oran */
  /* JS ekranın (gerekirse döndürülmüş) yatay boyutlarından hesaplar: --u ölçek birimi, --y1 yüksekliğin %1'i */
  --u: min(1vw, 1.9vh);
  --y1: 1dvh;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--mavi-koyu); color: var(--yazi);
  font: 14px/1.35 "Arial Rounded MT Bold", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
.gizli { display: none !important; }
button { font: inherit; cursor: pointer; color: inherit; }
button:disabled { opacity: .4; cursor: default; }
input, select { font: inherit; padding: 8px 10px; border: 1px solid #b9c4d8; border-radius: 10px; background: #fff; color: #1d1d1d; -webkit-user-select: text; user-select: text; }

/* ---------- Giriş ---------- */
.giris { height: 100%; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at 50% 30%, #2a7be0, var(--mavi-koyu)); overflow: auto; }
.giris-kart { background: #fff; color: #1d1d1d; border-radius: 18px; padding: 22px; width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.giris-kart h1 { margin: 0; }
.giris-kart label { display: grid; gap: 4px; font-weight: 700; }
.aciklama { margin: 0; color: #5d6676; }
.giris-kart h2 { margin: 0; font-size: 16px; }
.giris-bolum { display: grid; gap: 10px; padding: 12px; border: 1px solid #e3e8f0; border-radius: 14px; }
.giris-bolum .iki { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.giris-bolum input { width: 100%; }
.ya-da { text-align: center; color: #8a93a3; font-size: 13px; }
.giris-hata { background: #fde8ea; color: #a3172c; border-radius: 10px; padding: 8px 10px; font-weight: 700; }
.giris #olusturForm { order: 1; } .giris .ya-da { order: 2; } .giris #katilForm { order: 3; }
.giris.masali #katilForm { order: 1; } .giris.masali #olusturForm { order: 3; }
.davet { display: grid; gap: 6px; justify-items: center; }
.davet code { background: rgba(255,255,255,.15); border-radius: 8px; padding: 2px 8px; font-size: 1.1em; letter-spacing: .05em; -webkit-user-select: text; user-select: text; }
.birincil {
  background: linear-gradient(#ffc93c, #f29d0c); border: 0; border-bottom: 3px solid #b86f00; color: #3a2400;
  font-weight: 800; border-radius: 12px; padding: 10px 16px;
}

/* ---------- Oyun ekranı ---------- */
.ekran {
  position: relative; height: 100%; width: 100%; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(#2a7be0, var(--mavi) 45%, #1650a8);
  --yan: max(calc(var(--u) * 1.2), env(safe-area-inset-left), env(safe-area-inset-right));
  display: grid; gap: calc(var(--u) * .8);
  padding: max(calc(var(--u) * .8), env(safe-area-inset-top)) var(--yan) 0;
  grid-template-columns: calc(var(--u) * 12) 1fr calc(var(--u) * 7.5) calc(var(--u) * 13);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "k2  p2    p2   k1"
    "sol tahta orta sag"
    "as  durum durum ag"
    "alt alt   alt  alt";
}

/* Masa (ızgaralı alan): açılan gruplar burada durur */
.tahta {
  position: relative; min-height: 0; overflow: auto; border-radius: 6px;
  background:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / calc(var(--u) * 3.2) calc(var(--u) * 3.2),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / calc(var(--u) * 3.2) calc(var(--u) * 3.2),
    var(--tahta);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 30px rgba(0,0,0,.25);
  padding: calc(var(--grup-tas, 24px) * .6) calc(var(--u) * 1) calc(var(--u) * 1);
  display: flex; flex-wrap: wrap; align-content: flex-start;
  gap: calc(var(--grup-tas, 24px) * .55) calc(var(--grup-tas, 24px) * .5);
}
.grup { display: flex; gap: 1px; position: relative; border-radius: 4px; padding: 2px; }
.grup .tas { --tas-g: var(--grup-tas, calc(var(--u) * 2.6)); }
.grup .sahip { position: absolute; top: calc(var(--grup-tas, 24px) * -.48); left: 2px; font-size: max(9px, calc(var(--grup-tas, 24px) * .34)); opacity: .75; white-space: nowrap; }
.grup.islenebilir { cursor: pointer; box-shadow: 0 0 0 2px var(--vurgu); animation: nabiz 1.2s infinite; }
.grup.hedef { box-shadow: 0 0 0 3px #fff; }
@keyframes nabiz { 50% { box-shadow: 0 0 0 2px rgba(242,182,50,.25); } }

/* Masa boşken ya da el bitince ortadaki kart */
.bekleme {
  margin: auto; background: rgba(8,30,70,.55); border-radius: 16px; padding: calc(var(--u) * 2) calc(var(--u) * 2.5);
  display: grid; gap: 10px; justify-items: center; text-align: center; max-width: 460px;
}
.bekleme h2 { margin: 0; font-size: clamp(16px, calc(var(--u) * 2.2), 24px); }
.bekleme .satir { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
.bekleme p { margin: 0; opacity: .85; }
.bekleme .ikincil { border-radius: 12px; padding: 9px 14px; border: 2px solid rgba(255,255,255,.3); background: linear-gradient(#24365c, var(--dugme)); font-weight: 800; }

/* Oyuncu kartı */
.oyuncu {
  position: relative; display: flex; align-items: center; gap: calc(var(--u) * .8);
  background: rgba(8,30,70,.45); border-radius: 999px; padding: calc(var(--u) * .5) calc(var(--u) * 1.4) calc(var(--u) * .5) calc(var(--u) * .5);
  border: 2px solid transparent; min-width: 0;
}
.oyuncu.sirada { border-color: var(--vurgu); box-shadow: 0 0 0 4px rgba(242,182,50,.25); }
.oyuncu.bos { opacity: .7; }
.avatar {
  width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); min-width: 26px; min-height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: calc(var(--u) * 2);
  background: linear-gradient(#ffd25e, #f08a1c); color: #4a2500; border: 2px solid #fff; position: relative;
}
.avatar.bot { background: linear-gradient(#9fe3ff, #3a8ee0); color: #08305e; }
.avatar.kopuk { filter: grayscale(1); opacity: .6; }
.avatar .sayi {
  position: absolute; right: -6px; bottom: -4px; background: #0d2d66; color: #fff; border-radius: 8px;
  font-size: max(9px, calc(var(--u) * 1.1)); padding: 0 4px; border: 1px solid rgba(255,255,255,.5);
}
.oyuncu .bilgi { min-width: 0; }
.oyuncu .ad { font-weight: 800; font-size: max(11px, calc(var(--u) * 1.5)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--u) * 14); }
.oyuncu .puan { font-size: max(10px, calc(var(--u) * 1.2)); opacity: .85; }
.oyuncu .otur { font-size: max(11px, calc(var(--u) * 1.3)); padding: 2px 10px; border-radius: 8px; border: 0; background: var(--vurgu); color: #3a2400; font-weight: 800; }
.rozet {
  position: absolute; top: calc(var(--u) * -1.2); right: calc(var(--u) * -1); background: linear-gradient(var(--mor-acik), var(--mor));
  color: #fff; font-weight: 900; font-size: max(11px, calc(var(--u) * 1.5)); padding: 1px 8px; border-radius: 8px;
  border: 2px solid #f3d9ff; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.balon {
  position: absolute; z-index: 5; top: 105%; left: 0; background: #fff; color: #1d1d1d; border-radius: 10px;
  padding: 6px 10px; font-size: max(12px, calc(var(--u) * 1.4)); max-width: calc(var(--u) * 24); width: max-content;
  box-shadow: 0 4px 12px rgba(0,0,0,.3); animation: belir .2s; font-weight: 600; white-space: normal; text-align: left;
}
.balon::before { content: ""; position: absolute; top: -6px; left: 18px; border: 6px solid transparent; border-top: 0; border-bottom-color: #fff; }
@keyframes belir { from { transform: scale(.8); opacity: 0; } }

.ust-orta { display: flex; justify-content: center; align-items: center; }
.sol { display: flex; align-items: center; min-width: 0; }
.sol .oyuncu { flex-direction: column; border-radius: 16px; padding: calc(var(--u) * .8); text-align: center; width: 100%; }
.sol .oyuncu .ad { max-width: 100%; }
.sag { display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); min-height: 0; }
.ust-sag { display: flex; gap: calc(var(--u) * 1); justify-content: flex-end; align-items: flex-start; }
.ikonlar { display: flex; flex-direction: column; gap: calc(var(--u) * .8); }
.ikon {
  width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8); min-width: 32px; min-height: 32px; border-radius: 12px;
  border: 2px solid rgba(255,255,255,.35); background: linear-gradient(#2c5fae, #173f80); font-size: max(15px, calc(var(--u) * 2)); position: relative;
  box-shadow: 0 3px 0 #0b2a5c; padding: 0;
}
.kucuk-ikon { width: 34px; height: 34px; font-size: 16px; }
.nokta-rozet { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: #ff4fb3; border: 2px solid #fff; }

/* Köşelerdeki atılan taşlar */
.kose { display: flex; flex-direction: column; align-items: center; min-height: calc(var(--u) * 6.6); }
.kose .tas { --tas-g: calc(var(--u) * 4.8); }
.kose .adet { font-size: max(9px, calc(var(--u) * 1.1)); opacity: .75; text-align: center; margin-top: 3px; }
.kose.alinabilir .tas { box-shadow: 0 0 0 3px var(--vurgu), 0 4px 8px rgba(0,0,0,.4); cursor: pointer; animation: nabiz2 1.1s infinite; }
@keyframes nabiz2 { 50% { box-shadow: 0 0 0 6px rgba(242,182,50,.35), 0 4px 8px rgba(0,0,0,.4); } }
.kose.atma { border-radius: 10px; padding: 2px; }
.kose.atma.aktif .bos-yer, .kose.atma.aktif .tas { outline: 3px dashed var(--vurgu); outline-offset: 3px; }
.kose.atma.hedef { background: rgba(242,182,50,.35); }
.kose .bos-yer {
  width: calc(var(--u) * 4.8); aspect-ratio: 3 / 4.1; border-radius: 6px; border: 2px dashed rgba(255,255,255,.3);
  display: grid; place-items: center; font-size: max(9px, calc(var(--u) * 1.2)); opacity: .85; text-align: center; font-weight: 800;
}

/* Orta sütun: deste ve gösterge */
.orta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.6); }
.orta .etiket { font-size: max(9px, calc(var(--u) * 1.15)); opacity: .8; text-align: center; margin-bottom: 3px; }
.orta .tas { --tas-g: calc(var(--u) * 4.2); }
.deste {
  width: calc(var(--u) * 4.2); aspect-ratio: 3 / 4.1; border-radius: 6px; position: relative;
  background: linear-gradient(160deg, #fbf8ef, var(--tas) 45%, #e4dcc6); border: 1px solid var(--tas-kenar);
  box-shadow: 0 2px 0 #bfb394, 0 4px 0 #e9e2cf, 0 6px 0 #bfb394, 0 8px 6px rgba(0,0,0,.4);
}
.deste .sayi {
  position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); background: #d9343f; color: #fff; font-weight: 900;
  border-radius: 6px; padding: 0 7px; font-size: max(11px, calc(var(--u) * 1.5)); border: 2px solid #ffb3b8;
}
.deste.cekilebilir { cursor: pointer; animation: nabiz2 1.1s infinite; }

/* Sağdaki büyük düğmeler */
.aksiyonlar { display: flex; flex-direction: column; gap: calc(var(--u) * .9); overflow: auto; min-height: 0; padding: 2px 2px 4px; }
.aks {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%;
  background: linear-gradient(#24365c, var(--dugme)); border: 2px solid rgba(255,255,255,.18); border-radius: 12px;
  padding: calc(var(--u) * .7) calc(var(--u) * 1.1); font-weight: 900; font-size: clamp(10px, calc(var(--u) * 1.45), 16px);
  letter-spacing: .02em; box-shadow: 0 3px 0 #0a1428; text-align: left;
}
.aks:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #0a1428; }
.aks.ana { background: linear-gradient(#ffc93c, #f29d0c); color: #3a2400; border-color: #ffe39a; box-shadow: 0 3px 0 #a86500; }
.aks.mor { background: linear-gradient(var(--mor-acik), var(--mor)); border-color: #e7c4ff; box-shadow: 0 3px 0 #4a1680; }
.aks i { font-style: normal; opacity: .9; }

/* Durum yazısı (ıstakanın üstü) */
.durum {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; min-height: calc(var(--u) * 3);
  font-weight: 800; font-size: clamp(12px, calc(var(--u) * 1.6), 17px); text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.durum .hap { background: rgba(8,30,70,.5); border-radius: 999px; padding: 2px 10px; font-weight: 700; text-shadow: none; }
.durum .hap.iyi { background: #1f9d55; }
.durum .hap.sirada-hap { box-shadow: 0 0 0 2px var(--vurgu); }
.rozet-ic { background: linear-gradient(var(--mor-acik), var(--mor)); border-radius: 6px; padding: 0 6px; margin-left: 6px; }

/* Istaka: açık ahşap, iki raf */
.istaka-sar { min-width: 0; margin: 0 calc(-1 * var(--yan)); }
.istaka {
  display: grid; grid-template-columns: repeat(15, 1fr); gap: calc(var(--u) * 1.6) 2px;
  padding: calc(var(--u) * 1) var(--yan) max(calc(var(--u) * 1.4), env(safe-area-inset-bottom));
  border-radius: 0; border-top: 5px solid #8fd14f;
  background:
    linear-gradient(to bottom, transparent calc(50% - 6px), rgba(70,40,10,.4) calc(50% - 6px), #c99862 calc(50% - 4px), #ecc995 calc(50% + 1px), transparent calc(50% + 5px)),
    repeating-linear-gradient(90deg, rgba(120,70,30,.06) 0 3px, transparent 3px 14px, rgba(120,70,30,.04) 14px 16px, transparent 16px 31px),
    linear-gradient(#f0c88e, #dca468 50%, #c98d50);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 -2px 10px rgba(0,0,0,.25);
}
.yuva { aspect-ratio: 3 / 4.1; border-radius: 5px; min-width: 0; }
.yuva.hedef { background: rgba(255,255,255,.35); }
.istaka .tas { width: 100%; cursor: grab; transition: transform .12s; }
.istaka .tas.secili { transform: translateY(-18%); box-shadow: 0 0 0 3px var(--vurgu), 0 8px 8px rgba(0,0,0,.35); }
.istaka .tas.yan-alinan { box-shadow: 0 0 0 3px #4fe0ff, 0 3px 4px rgba(0,0,0,.35); }
/* Masaya işlenebilen taş: atarsan ceza */
.istaka .tas.isler { box-shadow: 0 0 0 3px #2fd36b, 0 3px 4px rgba(0,0,0,.35); }
.istaka .tas.isler::after {
  content: "İŞLER"; position: absolute; top: 0; left: 0; right: 0; background: #1f9d55; color: #fff;
  font: 900 15cqw/1.4 system-ui, sans-serif; text-align: center; letter-spacing: .02em;
}
.istaka .tas.secili.isler { box-shadow: 0 0 0 3px var(--vurgu), 0 0 0 6px #2fd36b, 0 8px 8px rgba(0,0,0,.35); }
/* Okey gelince ters çevrilir */
.tas.donen { animation: don .9s ease-in-out; }
@keyframes don { 0% { transform: rotateY(0) scale(1); } 45% { transform: rotateY(90deg) scale(1.15); } 100% { transform: rotateY(0) scale(1); } }
.yanci-not { text-align: center; padding: 14px; background: rgba(8,30,70,.45); border-radius: 12px 12px 0 0; font-weight: 700; }

.alt-sol, .alt-sag { display: flex; align-items: flex-end; gap: calc(var(--u) * .8); padding-bottom: calc(var(--u) * .6); }
.alt-sag { flex-direction: row-reverse; }
.alt-sol .kose, .alt-sag .kose { min-height: 0; }
.diz {
  flex: 1; min-width: 0; border-radius: 12px; border: 2px solid rgba(255,255,255,.18); background: linear-gradient(#24365c, var(--dugme));
  font-weight: 900; font-size: clamp(10px, calc(var(--u) * 1.5), 16px); line-height: 1.1; padding: calc(var(--u) * .8) 4px;
  box-shadow: 0 3px 0 #0a1428;
}
.diz .mini { display: block; font-size: .75em; color: var(--vurgu); letter-spacing: .1em; margin-bottom: 2px; }

/* Taş: klasik fildişi okey taşı — üstte kalın rakam, altta oyuk daire içinde kalp */
.tas {
  width: var(--tas-g); aspect-ratio: 3 / 4.1; border-radius: 9% / 7%;
  background: linear-gradient(160deg, #fbf8ef 0%, var(--tas) 45%, #e4dcc6 100%);
  border: 1px solid var(--tas-kenar);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 2px rgba(120,100,60,.18), 0 2px 0 #bfb394, 0 3px 4px rgba(0,0,0,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  container-type: inline-size; position: relative; touch-action: none; flex: none; overflow: hidden;
}
.tas b { font: 900 70cqw/1 "Arial Black", "Helvetica Neue", Arial, sans-serif; margin-top: 7cqw; letter-spacing: -3cqw; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.tas i {
  font-style: normal; width: 52cqw; height: 52cqw; border-radius: 50%; margin-top: auto; margin-bottom: 8cqw;
  display: grid; place-items: center; font-size: 32cqw; line-height: 1;
  background: radial-gradient(circle at 50% 35%, #fffdf6, #ece5d2);
  box-shadow: inset 0 2px 3px rgba(90,70,30,.35), 0 1px 0 rgba(255,255,255,.8);
}
.tas.k { color: var(--k); } .tas.s { color: var(--s); } .tas.m { color: var(--m); } .tas.y { color: var(--y); }
.tas.sahte { color: #1f6b3a; }
.tas.sahte b { font-size: 52cqw; margin-top: 14cqw; }
.tas.joker { background: linear-gradient(160deg, #fff8dc 0%, #f7e7b0 50%, #e8cf83 100%); border-color: #d6b052; }
.tas.joker b { color: #c8901a; font-size: 74cqw; margin-top: 2cqw; letter-spacing: 0; text-shadow: 0 1px 0 #fff6d0, 0 -1px 0 rgba(120,80,0,.35); }
.tas.joker i { background: none; box-shadow: none; width: auto; height: auto; font: 900 19cqw/1 system-ui, sans-serif; color: #9a6a00; margin-bottom: 12cqw; letter-spacing: .03em; }
.hayalet { position: fixed; pointer-events: none; z-index: 50; --tas-g: calc(var(--u) * 6.5); opacity: .95; transform: rotate(-4deg); }

/* Üstte beliren duyuru */
.duyuru {
  position: absolute; left: 0; right: 0; top: 0; z-index: 20; text-align: center; pointer-events: none;
  padding: calc(var(--u) * 1.4) 16px; background: linear-gradient(rgba(8,30,70,.85), rgba(8,30,70,.6));
  font-weight: 900; font-size: clamp(18px, calc(var(--u) * 3.6), 40px); letter-spacing: .02em;
  text-shadow: 0 2px 6px rgba(0,0,0,.4); animation: dusur .25s ease-out;
}
@keyframes dusur { from { transform: translateY(-100%); } }

/* Menü / sohbet çekmecesi */
.cekmece {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 92vw); z-index: 30; overflow: auto;
  background: #f4f7fc; color: #1d1d1d; padding: 12px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: -10px 0 30px rgba(0,0,0,.35); -webkit-user-select: text; user-select: text;
}
.cekmece-ust { display: flex; justify-content: space-between; align-items: center; }
.cekmece .ikon { color: #fff; }
.menu-dugmeleri { display: flex; flex-wrap: wrap; gap: 6px; }
.menu-dugmeleri button { border: 1px solid #c5cfe0; background: #fff; border-radius: 10px; padding: 7px 10px; color: #1d1d1d; }
.panel { background: #fff; border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.panel h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #6b7487; }
.panel table { width: 100%; border-collapse: collapse; font-size: 12px; }
.panel th, .panel td { padding: 3px 4px; text-align: right; border-bottom: 1px solid #e8edf5; }
.panel th:first-child, .panel td:first-child { text-align: left; }
.panel tfoot td { font-weight: 800; border-bottom: 0; }
.panel ol { margin: 0; padding-left: 18px; }
.kayit div { font-size: 12px; color: #444; padding: 1px 0; }
.kayit-liste { max-height: 160px; overflow: auto; }
.sohbet-liste { max-height: 200px; overflow: auto; font-size: 13px; margin-bottom: 6px; }
.sohbet-liste .yanci b { color: #6b7487; }
#sohbetGir { width: 100%; }

/* Sonuç penceresi */
.ortu { position: fixed; inset: 0; background: rgba(0,10,30,.6); display: grid; place-items: center; z-index: 40; padding: 12px; }
.sonuc-kart { background: #fff; color: #1d1d1d; border-radius: 16px; padding: 16px; width: min(720px, 100%); max-height: 94vh; overflow: auto; display: grid; gap: 8px; }
.sonuc-kart h2 { margin: 0; font-size: 18px; }
.sonuc-satir { display: grid; grid-template-columns: 110px 80px 1fr; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid #e8edf5; }
.sonuc-satir .el { display: flex; flex-wrap: wrap; gap: 2px; }
.sonuc-satir .el .tas { --tas-g: 24px; }
.sonuc-dugmeler { display: flex; gap: 8px; justify-content: flex-end; }
.sonuc-dugmeler button { border-radius: 10px; padding: 8px 14px; border: 1px solid #c5cfe0; background: #fff; color: #1d1d1d; }
.sonuc-dugmeler .birincil { border: 0; border-bottom: 3px solid #b86f00; }

.bildirim {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%); background: #1d2433; color: #fff; z-index: 60;
  padding: 10px 16px; border-radius: 12px; max-width: calc(100% - 32px); box-shadow: 0 6px 20px rgba(0,0,0,.4); font-weight: 700;
}
.bildirim.hata { background: #c62236; }

/* Dikey telefon: düzeni alt alta diz, yan çevirme önerisi göster */
.cevir { display: none; }
@media not all { /* eski dikey düzen: kullanılmıyor, telefon dikken ekran döndürülür */
  :root { --u: 1.35vw; }
  .ekran {
    grid-template-columns: 22vw 1fr 30vw;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
    grid-template-areas:
      "k2    p2    k1"
      "sol   orta  sag"
      "tahta tahta tahta"
      "as    durum ag"
      "alt   alt   alt";
  }
  .aksiyonlar { display: grid; grid-template-columns: 1fr; }
  .aks { padding: 6px 8px; }
  .alt-sol, .alt-sag { flex-direction: column; padding: 4px 0; }
  .diz { width: 100%; padding: 5px 4px; }
  .orta { flex-direction: row; }
  .cevir { display: block; position: absolute; left: 50%; top: 2px; transform: translateX(-50%); font-size: 10px; opacity: .6; white-space: nowrap; }
}

/* Yönetici: oyuncu kartına dokunup atar */
.oyuncu.atilabilir { cursor: pointer; }
.oyuncu.atilabilir:hover { border-color: rgba(255,120,120,.7); }
.at-dugme { border: 1px solid #e5a3ab; background: #fff1f2; color: #b4232f; border-radius: 6px; padding: 0 8px; font-size: 12px; font-weight: 700; }
.masadakiler { margin: 0 0 4px; padding-left: 18px; font-size: 13px; }
.masadakiler li, .panel ol li { padding: 2px 0; }

/* Masa yakınlaştırma */
.yakinlik { justify-self: end; align-self: end; display: flex; gap: 4px; margin: 6px; z-index: 3; }
.yakinlik button {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,.35); background: rgba(8,30,70,.6);
  font-weight: 900; font-size: 16px; padding: 0; line-height: 1;
}

/* ---------- Sade oyuncu kartları (küçük isim alanları) ---------- */
.ekran { grid-template-columns: calc(var(--u) * 9.5) 1fr calc(var(--u) * 7.5) calc(var(--u) * 12.5); }
.oyuncu { gap: calc(var(--u) * .5); padding: 2px calc(var(--u) * .9) 2px 2px; background: rgba(8,30,70,.38); border-width: 1.5px; }
.avatar { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); min-width: 22px; min-height: 22px; font-size: max(11px, calc(var(--u) * 1.3)); border-width: 1.5px; }
.avatar .sayi { font-size: max(8px, calc(var(--u) * .9)); right: -5px; bottom: -3px; padding: 0 3px; }
.oyuncu .ad { font-size: max(10px, calc(var(--u) * 1.15)); max-width: calc(var(--u) * 11); }
.oyuncu .puan { font-size: max(9px, calc(var(--u) * .95)); }
.rozet { font-size: max(9px, calc(var(--u) * 1.1)); padding: 0 5px; top: calc(var(--u) * -.9); right: calc(var(--u) * -.8); border-width: 1.5px; }
.sol .oyuncu { padding: calc(var(--u) * .5); gap: 2px; }
.balon { font-size: max(11px, calc(var(--u) * 1.2)); }

/* ---------- Istaka: altın sarısı ahşap, iki raf, ortada kabartma CBN ---------- */
.istaka-sar { position: relative; }
.istaka {
  position: relative; isolation: isolate;
  gap: calc(var(--u) * 1.7) 3px;
  padding: calc(var(--u) * 1.1) max(calc(var(--u) * 2.2), var(--yan)) max(calc(var(--u) * 1.5), env(safe-area-inset-bottom));
  border-top: 0;
  background:
    /* orta raf çıtası */
    linear-gradient(to bottom, transparent calc(50% - 6px), #7a3f04 calc(50% - 6px), #b86d12 calc(50% - 4px),
      #ffd37c calc(50% - 1px), #f0a33a calc(50% + 2px), #c4791a calc(50% + 4px), transparent calc(50% + 5px)),
    /* ahşap damarları */
    repeating-linear-gradient(90deg, rgba(140,70,0,.07) 0 2px, transparent 2px 11px, rgba(255,230,170,.06) 11px 13px, transparent 13px 29px),
    radial-gradient(ellipse at 50% -20%, rgba(255,245,210,.45), transparent 55%),
    linear-gradient(#f9bd4f, #eda032 40%, #db8a1f 75%, #c97814);
  box-shadow:
    inset 0 4px 0 #ffd98c, inset 0 6px 0 #c47a18,      /* üst kenar pervazı */
    inset 0 -7px 0 #a95f0b, inset 0 -9px 0 #e8a03a,    /* alt kenar */
    0 -4px 14px rgba(0,0,0,.35);
}
/* Yan başlıklar */
.istaka::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(90deg, #8e4c06, #c7791a 40%, #a95f0b) left / max(calc(var(--u) * 1.4), 8px) 100% no-repeat,
    linear-gradient(270deg, #8e4c06, #c7791a 40%, #a95f0b) right / max(calc(var(--u) * 1.4), 8px) 100% no-repeat;
}
/* Ortada kabartma CBN amblemi */
.istaka::before {
  content: "CBN"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
  font: 900 clamp(28px, calc(var(--u) * 8), 110px)/1 "Arial Black", "Helvetica Neue", Arial, sans-serif; letter-spacing: .12em;
  padding: .12em .45em .1em .57em; border-radius: 999px;
  color: rgba(150, 78, 0, .30);
  border: max(2px, calc(var(--u) * .35)) solid rgba(150, 78, 0, .22);
  text-shadow: 0 2px 0 rgba(255, 228, 160, .55), 0 -1px 0 rgba(90, 40, 0, .28);
  box-shadow: 0 2px 0 rgba(255, 228, 160, .35), inset 0 2px 0 rgba(90, 40, 0, .15);
}
/* Yuvalar: hafif oyuk cepler */
.yuva { position: relative; z-index: 1; background: rgba(150, 80, 5, .14); box-shadow: inset 0 2px 3px rgba(110, 55, 0, .28); }
.yuva:has(.tas) { background: transparent; box-shadow: none; }

/* ---------- Sağ düğmeler: örnek oyundaki gibi koyu, küçük taş simgeli ---------- */
.aks { background: linear-gradient(#2a3550, #182036); border-color: rgba(255,255,255,.22); }
.aks.ana { background: linear-gradient(#ffc93c, #f29d0c); }
.aks-ipucu { font-size: max(10px, calc(var(--u) * 1.15)); opacity: .8; text-align: center; padding: 6px 2px; }
.mini-taslar { display: inline-flex; gap: 1px; }
.mini-taslar b {
  display: grid; place-items: center; width: max(11px, calc(var(--u) * 1.4)); height: max(15px, calc(var(--u) * 1.9));
  background: linear-gradient(#fff, #e9e3d2); color: #d0213a; border-radius: 2px; font-size: max(8px, calc(var(--u) * .95)); font-weight: 900;
  box-shadow: 0 1px 0 #b9ad8c;
}
.mini-taslar b:nth-child(2) { color: #1b8fd6; } .mini-taslar b:nth-child(3) { color: #161616; }
.sayi-rozet { font-style: normal; background: linear-gradient(var(--mor-acik), var(--mor)); border-radius: 6px; padding: 0 6px; font-size: .9em; }
.geri-ikon { font-style: normal; color: #ff8bd2; font-size: 1.2em; }
.tas.arka { background: repeating-linear-gradient(45deg, #eadfc4, #eadfc4 4px, #dccfae 4px, #dccfae 8px); }
.kose.hedef { background: rgba(79,224,255,.3); border-radius: 8px; }

/* ---------- Gerçekçi ahşap ıstaka ---------- */
/* Ahşap damarı: yatayda uzatılmış gürültü (SVG feTurbulence), koyu kahve damarlar olarak üst üste biner */
.istaka, .istaka .yuva::after {
  --damar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='240'%3E%3Cfilter id='a' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.11' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.30 0 0 0 0 0.14 0 0 0 0 0.03 0 0 0 1.6 -0.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
}
.istaka {
  --dudak: max(8px, calc(var(--u) * 1.35));
  gap: calc(var(--dudak) + max(5px, calc(var(--u) * .7))) max(2px, calc(var(--u) * .25));
  padding: max(8px, calc(var(--u) * 1.1)) max(calc(var(--u) * 2.6), calc(var(--yan) + 10px)) calc(var(--dudak) + max(10px, calc(var(--u) * 1.3)) + env(safe-area-inset-bottom));
  border-radius: 6px 6px 0 0;
  background:
    var(--damar) 0 0 / 900px 240px,
    /* üst sıranın arka panosu daha gölgede, alt sıra ışıkta */
    linear-gradient(to bottom, rgba(40,15,0,.38) 0%, rgba(40,15,0,.12) 46%, rgba(40,15,0,.22) 50%, rgba(255,220,160,.06) 56%, rgba(40,15,0,.18) 100%),
    linear-gradient(100deg, #b8783a 0%, #c98a46 30%, #bf7f3d 55%, #cf9350 80%, #b5743a 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 214, 150, .45),          /* üst kenar parlaklığı */
    inset 0 -1px 0 rgba(0, 0, 0, .35),
    0 -6px 18px rgba(0, 0, 0, .40);
}
/* Eski düz şerit, cepler ve kabartma çerçeve kalkar */
.yuva, .yuva:has(.tas) { background: transparent; box-shadow: none; }

/* Her sıranın önündeki çıta: taşlar bunun üstüne oturur (yuvaların altına yan yana birleşen dudak) */
.istaka .yuva::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(-1 * max(2px, calc(var(--u) * .25)) / 2 - 1px); right: calc(-1 * max(2px, calc(var(--u) * .25)) / 2 - 1px);
  top: calc(100% - 2px); height: var(--dudak);
  background:
    var(--damar) 0 0 / 900px 240px,
    linear-gradient(to bottom, #f6d29a 0, #e2ae6c 14%, #c88a47 38%, #a8692f 72%, #6e3d16 100%);
  box-shadow: 0 3px 4px rgba(30, 10, 0, .45);
}
/* Satırın ilk ve son yuvasında çıta kenarı yuvarlansın */
.istaka .yuva:nth-child(15n + 1)::after { border-top-left-radius: 3px; border-bottom-left-radius: 4px; }
.istaka .yuva:nth-child(15n)::after { border-top-right-radius: 3px; border-bottom-right-radius: 4px; }

/* Yan başlıklar: yuvarlatılmış koyu ahşap */
.istaka::after {
  z-index: 3;
  background:
    var(--damar) left / 900px 240px no-repeat,
    linear-gradient(90deg, #4a2408, #8a4e1f 35%, #b4743a 55%, #7c4219 85%, #4a2408) left / max(calc(var(--u) * 1.8), 12px) 100% no-repeat,
    var(--damar) right / 900px 240px no-repeat,
    linear-gradient(90deg, #4a2408, #7c4219 15%, #b4743a 45%, #8a4e1f 65%, #4a2408) right / max(calc(var(--u) * 1.8), 12px) 100% no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) left / max(calc(var(--u) * 1.8), 12px) 100% no-repeat, linear-gradient(#000 0 0) right / max(calc(var(--u) * 1.8), 12px) 100% no-repeat;
  mask: linear-gradient(#000 0 0) left / max(calc(var(--u) * 1.8), 12px) 100% no-repeat, linear-gradient(#000 0 0) right / max(calc(var(--u) * 1.8), 12px) 100% no-repeat;
  border-radius: 6px 6px 0 0;
}

/* CBN: ahşaba yakılmış marka (gömülü, ışık altında hafif parlak kenar) */
.istaka::before {
  border: 0; box-shadow: none; padding: 0; border-radius: 0;
  font: 900 clamp(26px, calc(var(--u) * 7), 96px)/1 Georgia, "Times New Roman", serif; letter-spacing: .25em;
  color: rgba(55, 22, 2, .30);
  text-shadow: 0 1px 0 rgba(255, 222, 170, .35), 0 -1px 1px rgba(30, 10, 0, .25);
  mix-blend-mode: multiply;
}

/* Taşlar ahşaba gölge düşürür */
.istaka .tas { box-shadow: inset 0 1px 0 #fff, inset 0 -2px 2px rgba(120,100,60,.18), 0 2px 0 #bfb394, 1px 4px 5px rgba(30, 10, 0, .45); }
.istaka .tas.isler { box-shadow: 0 0 0 3px #2fd36b, 1px 4px 5px rgba(30, 10, 0, .45); }
.istaka .tas.yan-alinan { box-shadow: 0 0 0 3px #4fe0ff, 1px 4px 5px rgba(30, 10, 0, .45); }

/* İşler taş: yazı yok, yalnız kırmızı kenar */
.istaka .tas.isler::after { content: none; }
.istaka .tas.isler { box-shadow: 0 0 0 3px #e3263c, 1px 4px 5px rgba(30, 10, 0, .45); }
.istaka .tas.secili.isler { box-shadow: 0 0 0 3px var(--vurgu), 0 0 0 6px #e3263c, 0 8px 8px rgba(0,0,0,.35); }

/* Alçak ekranda ıstaka ekranı kaplamasın: bir sıra en fazla ekran yüksekliğinin %15'i kadar olsun,
   bunun için taşlar daralır ve ıstaka iki yandan ortalanır (15 taş × calc(var(--y1) * 15) × 3/4.1 ≈ calc(var(--y1) * 164) genişlik) */
.istaka {
  padding-left: max(calc(var(--u) * 2.6), calc(var(--yan) + 10px), calc(50% - calc(var(--y1) * 82)));
  padding-right: max(calc(var(--u) * 2.6), calc(var(--yan) + 10px), calc(50% - calc(var(--y1) * 82)));
}

/* Çift diz ve seri diz yan yana, ıstakanın üstünde */
.durum-sar { display: flex; align-items: center; gap: calc(var(--u) * 1); min-width: 0; }
.durum-sar .durum { flex: 1; min-width: 0; }
.diz-grup { display: flex; gap: 6px; flex: none; }
.diz-grup .diz {
  flex: none; width: auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: calc(var(--u) * .55) calc(var(--u) * 1.1); font-size: clamp(10px, calc(var(--u) * 1.3), 15px);
}
.diz-grup .diz .mini { display: inline; margin: 0; font-size: .8em; }
.alt-sol, .alt-sag { justify-content: center; }
@media not all { /* eski dikey düzen: kullanılmıyor, telefon dikken ekran döndürülür */
  .durum-sar { flex-direction: column; align-items: stretch; gap: 4px; }
  .diz-grup { justify-content: center; }
}

/* Diz düğmeleri sağ sütunda, yan yana */
.sag .diz-grup { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: auto; }
.sag .diz-grup .diz {
  flex-direction: column; gap: 1px; padding: calc(var(--u) * .45) 2px; width: 100%;
  font-size: clamp(9px, calc(var(--u) * 1.1), 13px); white-space: nowrap; line-height: 1.1;
}
.sag .diz-grup .diz .mini { display: block; }
/* Sağa sürüklenen taş: atma köşesi yanar */
#atma.hedef { background: rgba(242,182,50,.45); box-shadow: 0 0 0 3px var(--vurgu); }

/* Sağ sütun sığsın: düğmeler tek satır ve sıkı */
.aksiyonlar { gap: calc(var(--u) * .6); overflow: visible; }
.aks { white-space: nowrap; padding: calc(var(--u) * .55) calc(var(--u) * .9); font-size: clamp(9px, calc(var(--u) * 1.25), 15px); border-radius: 10px; }
.aks .mini-taslar b { width: max(9px, calc(var(--u) * 1.1)); height: max(12px, calc(var(--u) * 1.5)); font-size: max(7px, calc(var(--u) * .8)); }
.sag { gap: calc(var(--u) * .8); }

/* Diz düğmeleri ıstakanın hemen üstünde, sağa yaslı, yan yana */
.durum-sar { align-self: end; padding-bottom: 2px; }
.durum-sar .diz-grup { display: flex; gap: 6px; margin-left: auto; flex: none; }
.durum-sar .diz-grup .diz {
  display: inline-flex; flex-direction: row; align-items: center; gap: 5px; width: auto; white-space: nowrap;
  padding: calc(var(--u) * .5) calc(var(--u) * 1.1); font-size: clamp(10px, calc(var(--u) * 1.25), 15px);
}
.durum-sar .diz-grup .diz .mini { display: inline; margin: 0; }
@media not all { /* eski dikey düzen: kullanılmıyor, telefon dikken ekran döndürülür */
  .durum-sar { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}
.durum-sar { align-items: center; }
.durum-sar .diz-grup .diz { flex: none; height: auto; align-self: center; }
@media not all { /* eski dikey düzen: kullanılmıyor, telefon dikken ekran döndürülür */
  .durum-sar { align-items: center; }
  .durum-sar .diz-grup { margin-left: auto; }
}

/* Alçak yatay ekranlar (ör. 1280×720): ıstaka sırası en fazla ekranın %12'si, ortadaki ve köşedeki taşlar yüksekliğe göre küçülür */
.istaka {
  padding-left: max(calc(var(--u) * 2.6), calc(var(--yan) + 10px), calc(50% - calc(var(--y1) * 66)));
  padding-right: max(calc(var(--u) * 2.6), calc(var(--yan) + 10px), calc(50% - calc(var(--y1) * 66)));
}
.orta { gap: min(calc(var(--u) * 1.6), calc(var(--y1) * 1.6)); }
.orta .tas { --tas-g: min(calc(var(--u) * 4.2), calc(var(--y1) * 7)); }
.deste { width: min(calc(var(--u) * 4.2), calc(var(--y1) * 7)); }
.kose .tas { --tas-g: min(calc(var(--u) * 4.8), calc(var(--y1) * 7.5)); }
.kose .bos-yer { width: min(calc(var(--u) * 4.8), calc(var(--y1) * 7.5)); }
.kose { min-height: min(calc(var(--u) * 6.6), calc(var(--y1) * 10)); }

/* Seçili tek taş varken atma köşesi "dokun, at" diye parlar */
.kose.atma.hazir { cursor: pointer; background: rgba(242,182,50,.28); }
.kose.atma.hazir .bos-yer, .kose.atma.hazir .tas { animation: nabiz2 1.1s infinite; }

/* Alçak ekran (yatay telefon): gösterge ve okey yan yana, deste altlarında */
/* Alçak ekran (JS 'alcak' sınıfını koyar: döndürülmüş telefonda da doğru) */
html.alcak .orta { flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4px 4px; }
html.alcak .orta > div { flex: none; display: flex; flex-direction: column; align-items: center; }
html.alcak .orta > div:last-child { flex-basis: 100%; }
html.alcak .orta .etiket { font-size: 9px; margin-bottom: 1px; }
html.alcak .orta .tas { --tas-g: min(calc(var(--u) * 3.4), calc(var(--y1) * 7)); }
html.alcak .deste { width: min(calc(var(--u) * 3.4), calc(var(--y1) * 7)); }
html.alcak .deste .sayi { bottom: -10px; font-size: 10px; padding: 0 4px; }
/* Alçak ekran (JS 'alcak' sınıfını koyar: döndürülmüş telefonda da doğru) */
html.alcak .ekran { grid-template-columns: calc(var(--u) * 9.5) 1fr calc(var(--u) * 12) calc(var(--u) * 12.5); }
html.alcak .orta .etiket { font-size: 8px; letter-spacing: 0; }
html.alcak .orta { flex-wrap: wrap; }

.sor-ortu { z-index: 70; }
.sor-kart { width: min(420px, 100%); }
.sor-kart p { margin: 0; font-size: 15px; }


/* ---------- Canlı masa: turkuaz çuha, ahşap çerçeve, seri ve çift alanları ayrı ---------- */
.ekran {
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(255,255,255,.16), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 .05 0 0 0 0 .05 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(#2fa8a4, #23938f 45%, #187a78);
  /* ahşap çerçeve (üst, sol, sağ); altta ıstaka var */
  box-shadow:
    inset 0 0 0 max(6px, calc(var(--u) * .8)) #6a3c18,
    inset 0 0 0 max(8px, calc(var(--u) * 1.05)) #3b200b,
    inset 0 0 0 max(9px, calc(var(--u) * 1.2)) rgba(255, 210, 150, .25),
    inset 0 0 70px rgba(0, 30, 30, .55);
}
.tahta {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='120' viewBox='0 0 420 120'%3E%3Ctext x='210' y='86' text-anchor='middle' font-family='Georgia,serif' font-size='78' font-weight='900' letter-spacing='14' fill='white' fill-opacity='.10'%3ECBN 101%3C/text%3E%3C/svg%3E") center / min(60%, 420px) auto no-repeat,
    radial-gradient(ellipse at center, rgba(255,255,255,.07), transparent 70%);
  box-shadow: none; border-radius: 14px;
  flex-wrap: nowrap; align-items: flex-start;
}
.alan { display: flex; flex-wrap: wrap; align-content: flex-start; gap: inherit; min-width: 0; }
.alan-seri { flex: 1; }
.alan-cift {
  flex: none; flex-direction: column; flex-wrap: wrap; max-height: 100%;
  padding-left: calc(var(--grup-tas, 24px) * .5); border-left: 2px dashed rgba(255,255,255,.22);
}
.tahta .bekleme { position: absolute; inset: 0; margin: auto; height: fit-content; }
.tahta .grup .sahip { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.grup .tas { box-shadow: inset 0 1px 0 #fff, 0 2px 0 #bfb394, 1px 3px 4px rgba(0, 30, 30, .45); }

/* Oyuncu kartları çuha üstünde koyu, altın çerçeveli */
.oyuncu { background: rgba(10, 35, 40, .55); border: 1.5px solid rgba(255, 210, 120, .45); }
.oyuncu.sirada { border-color: var(--vurgu); }
.avatar { border-color: #ffd98a; }

/* Seri diz / çift diz: turuncu düğmeler */
.durum-sar .diz-grup .diz {
  background: linear-gradient(#ffb547, #f08a1c); color: #fff; border: 2px solid #ffe0a8;
  box-shadow: 0 3px 0 #b25a06; text-shadow: 0 1px 1px rgba(120,50,0,.6);
}
.durum-sar .diz-grup .diz .mini { color: #fff6dc; }


/* ---------- Mobil: her zaman yatay, tüm ekran ----------
   Telefon dik tutulursa sayfa 90° döndürülür (iPhone yön kilidine izin vermez). Döndürülmüş gövdede
   sabit konumlu öğeler (pencereler, sürüklenen taş) da gövdeye göre konumlanır. */
html, body { width: 100%; height: 100%; }
body { height: var(--ekran-yuk, 100dvh); }
html.dondur body {
  position: fixed; top: 0; left: 0;
  width: var(--ekran-gen); height: var(--ekran-yuk);
  transform-origin: top left; transform: rotate(90deg) translateY(-100%);
}
html.dondur .cevir, .cevir { display: none !important; }
html.dondur .giris { height: 100%; }