/* Kasabamız 3D */
.ks-oyun { position: relative; }
.ks-hud { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ks-tuval { border-radius: 18px; }
.ks-gir { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); z-index: 5; font-size: clamp(18px, 2.6vw, 30px); animation: mini-zipla-sonsuz 1s ease-in-out infinite; }
@media (max-width: 700px) { .ks-yer { display: none; } }
.ks-kap { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.ks-tuval { display: block; touch-action: none; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.ks-oyun { display: flex; flex-direction: column; height: 100%; width: 100%; align-self: stretch; } /* sahne flex ortalar; genişlik verilmezse tuval dar şerit kalır */
.ks-menu { width: min(620px, 94vw); max-height: 92vh; overflow-y: auto; text-align: center; padding: 14px 16px !important; }
.ks-menu h3 { margin: 10px 0 6px; font-size: 15px; opacity: .7; }
.ks-menu .mini-dugme { min-height: 44px; padding: 8px 14px; font-size: 16px; }
.ks-menu-ust { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ks-menu-ust h2 { margin: 0 auto 0 0; font-size: 22px; }
/* kare bitişik segment çubuğu (KWS tasarım dili): eşit genişlik, aynı yükseklik, tek çerçeve */
.ks-sekmeler { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid #c9c2e8; border-radius: 12px; overflow: hidden; margin-bottom: 8px; }
.ks-sekmeler button { min-height: 44px; border: 0; border-left: 1px solid #c9c2e8; background: #f6f4ff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; color: #4a3f7a; }
.ks-sekmeler button:first-child { border-left: 0; }
.ks-sekmeler button.secili { background: #7b5cff; color: #fff; }
.ks-sekme-govde { min-height: 180px; }
.ks-satir { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ks-karakterler { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 8px; }
.ks-karakter { border: 4px solid transparent; border-radius: 18px; background: #f3f0ff; cursor: pointer; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; font: inherit; }
.ks-karakter img { width: 64px; height: 64px; object-fit: cover; object-position: top; }
.ks-karakter span { font-size: 48px; line-height: 64px; }
.ks-karakter.secili { border-color: #ff5d8f; background: #ffe0ea; }
/* oyun ekranı: tuval tam alan, cam görünümlü düğmeler, kol çubuğu, mini harita */
.ks-kap { width: 100%; display: block; }
.ks-tuval { width: 100% !important; height: 100% !important; border-radius: 22px; }
.ks-hud { position: absolute; top: 8px; left: 16px; z-index: 5; min-height: 0; justify-content: flex-start; pointer-events: none; }
.ks-durum { font-size: clamp(14px, 1.8vw, 20px); background: rgba(255, 255, 255, .78) !important; backdrop-filter: blur(8px); }
.ks-harita { position: absolute; top: 10px; right: 10px; width: clamp(96px, 15vw, 150px); height: auto; aspect-ratio: 1; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .9); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); z-index: 5; pointer-events: none; }
.ks-gir { left: 0; right: 0; margin-inline: auto; width: max-content; max-width: 70%; transform: none; bottom: 22px; padding: 14px 28px; border-radius: 999px; box-shadow: 0 6px 0 rgba(0, 0, 0, .18), 0 10px 26px rgba(0, 0, 0, .25); }
.ks-kullan, .ks-canta { backdrop-filter: blur(8px); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); border: 3px solid rgba(255, 255, 255, .85); }
.ks-canta { background: rgba(255, 255, 255, .8); }
.ks-cubuk-alan { display: none; position: absolute; left: 0; bottom: 0; width: 42%; height: 55%; z-index: 4; touch-action: none; }
.ks-cubuk { position: absolute; left: 90px; top: calc(100% - 100px); width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%; background: rgba(255, 255, 255, .28); border: 3px solid rgba(255, 255, 255, .7); backdrop-filter: blur(6px); box-shadow: 0 6px 20px rgba(0, 0, 0, .2); opacity: .75; transition: opacity .15s; }
.ks-cubuk.acik { opacity: 1; }
.ks-cubuk-top { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: linear-gradient(#fff, #e9e3ff); box-shadow: 0 4px 10px rgba(0, 0, 0, .3); }
.ks-zipla { display: none; position: absolute; right: 18px; bottom: 26px; width: 92px; height: 92px; border-radius: 50%; z-index: 5; font-size: 40px; border: 4px solid rgba(255, 255, 255, .9); background: rgba(58, 134, 255, .75); backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); touch-action: none; }
.ks-zipla:active { transform: scale(.94); }
html.ar-dokunmatik .ks-cubuk-alan, html.ar-dokunmatik .ks-zipla { display: block; }
/* yatay telefon: oyun tüm ekranı kaplar, üst düğmeler oyunun üstünde yüzer */
@media (orientation: landscape) and (max-height: 520px) {
  .mini-ust { position: absolute; top: 0; left: 0; right: 0; min-height: 0; padding: 6px 8px; pointer-events: none; }
  .mini-ust > * { pointer-events: auto; }
  .mini-baslik { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); padding: 3px 12px; border-radius: 12px; background: rgba(255, 255, 255, .78); pointer-events: none; }
  .mini-baslik .ks-marka { font-size: 15px; letter-spacing: 1px; pointer-events: auto; }
  .mini-baslik .ks-slogan { font-size: 11px; }
  html .ks-ipucu { top: 46px; } /* temel kural aşağıda tanımlı, özgüllükle ezilir */
  .mini-geri, .mini-yuvarlak { min-width: 44px; width: 44px; height: 44px; border-radius: 14px; font-size: 22px; }
  .mini-geri b { font-size: 22px; }
  .mini-sag { gap: 6px; margin-left: auto; } /* geri düğmesi gizli: düğmeler sağ üstte, sol üst durum yazısına kalır (yazı düğmeleri örtüyordu, İsmail 1 Kas) */
  .ks-oyun, .ks-kap { padding: 0 !important; margin: 0 !important; }
  .ks-tuval { border-radius: 0; box-shadow: none; }
  .ks-hud { top: 10px; left: 10px; }
  .ks-harita { top: 60px; right: 10px; width: 96px; border-width: 3px; }
  .ks-canta, .ks-kullan { width: 56px; height: 56px; font-size: 26px; }
  .ks-kullan { bottom: 18px; right: 124px; }
  .ks-canta { bottom: 18px; right: 190px; }
  .ks-zipla { right: 16px; bottom: 16px; width: 92px; height: 92px; }
  .ks-cubuk-alan { width: 40%; height: 70%; }
  .ks-gir { bottom: 86px; padding: 10px 22px; font-size: 18px; } /* çanta/kullan düğmelerinin üstünde, çakışmaz */
}
.ks-ipucu { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 3; padding: 6px 14px; border-radius: 999px; background: rgba(20, 24, 40, .55); color: #fff; font-size: 13px; white-space: nowrap; pointer-events: none; backdrop-filter: blur(6px); }
@media (max-width: 700px) { .ks-ipucu { font-size: 11px; white-space: normal; text-align: center; width: 90%; } }

/* üst şerit: marka + slogan (boş "Kasabamız" başlığı yerine) */
.mini-baslik:has(.ks-marka) { display: flex; flex-direction: column; align-items: center; line-height: 1.05; gap: 2px; }
.ks-marka { font-weight: 900; letter-spacing: 2px; font-size: clamp(18px, 3.4vw, 32px); color: #6b4a2f; text-decoration: none; white-space: nowrap; }
.ks-marka:hover { color: #3f8f4e; }
.ks-slogan { font-size: clamp(13px, 2vw, 19px); font-weight: 700; color: #3f8f4e; white-space: nowrap; }
/* dar dikey telefon: marka üç düğmenin yanındaki 160 px'e sığar */
@media (max-width: 520px) and (orientation: portrait) {
  .mini-baslik:has(.ks-marka) { min-width: 0; flex: 1; }
  .ks-marka { font-size: 14px; letter-spacing: .5px; }
  .ks-slogan { font-size: 10.5px; }
}

/* Ortak kasaba giriş formu (online): ad, soyad, e-posta — telefonda tek sütun, alanlar 44 px */
.ks-giris-kap { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; background: linear-gradient(180deg, #9fdcff, #d9f2ff); overflow-y: auto; }
.ks-giris { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 8px; padding: 20px 16px; border-radius: 16px; background: #fff; box-shadow: 0 8px 30px rgba(43,33,64,.18); text-align: center; }
.ks-giris h2 { margin: 0 0 2px; font-size: 22px; color: #2b2140; }
.ks-giris .mini-ipucu { margin: 0 0 4px; }
.ks-giris input, .ks-giris select { height: 44px; padding: 0 12px; border: 1px solid #c9c2d8; border-radius: 10px; font: inherit; font-size: 16px; }
.ks-giris select { background: #fff; color: #2b2140; }
.ks-giris select:invalid { color: #8a8299; }
.ks-giris input:focus, .ks-giris select:focus { outline: 2px solid #2e7d32; border-color: #2e7d32; }
.ks-giris .mini-dugme { height: 44px; margin-top: 4px; }
.ks-giris .ks-indir { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.ks-giris-hata { margin: 0; color: #c62828; font-size: 14px; }
.ks-giris-not { margin: 4px 0 0; color: #6b6280; font-size: 12px; line-height: 1.35; }
/* 🔑 dünya PIN paneli (29 Eki 2026) */
.ks-pin-kap { background: rgba(27, 21, 48, .55); }
.ks-pin-no { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: 8px; color: #2e7d32; font-variant-numeric: tabular-nums; user-select: all; }
.ks-pin-cizgi { width: 100%; border: 0; border-top: 1px solid #e3deec; margin: 4px 0; }
.ks-giris input[inputmode="numeric"] { text-align: center; font-size: 22px; letter-spacing: 6px; }
.ks-pin-kapat { background: #eee9f5; color: #2b2140; }
.ks-pin-kap[hidden] { display: none; }
.ks-giris input[inputmode="numeric"]::placeholder { letter-spacing: normal; font-size: 16px; }
/* TAM EKRAN DÜNYA (İsmail 1 Kas): üst şerit ayrı kutu değil, her ekranda oyunun üstünde yüzer.
   Marka ortada küçük yarı saydam hap, düğmeler sağ üstte dünyanın içinde, harita düğmelerin altında. */
.mini-ust { position: absolute; top: 0; left: 0; right: 0; min-height: 0; padding: 8px 10px; pointer-events: none; }
.mini-ust > * { pointer-events: auto; }
.mini-baslik:has(.ks-marka) { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); flex: none; padding: 4px 14px; border-radius: 14px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); pointer-events: none; }
.mini-baslik .ks-marka { font-size: clamp(14px, 1.6vw, 20px); letter-spacing: 1px; pointer-events: auto; }
.mini-baslik .ks-slogan { font-size: clamp(10.5px, 1vw, 13px); }
.mini-sag { gap: 8px; margin-left: auto; }
.ks-oyun, .ks-kap { padding: 0 !important; margin: 0 !important; }
.ks-tuval { border-radius: 0 !important; box-shadow: none; }
.ks-hud { top: 12px; left: 12px; }
.ks-harita { top: 76px; right: 12px; }
html .ks-ipucu { top: auto; bottom: 18px; animation: ks-ipucu-son 1.6s ease 6s forwards; } /* ortada değil altta; 6 sn sonra küçülüp söner */
@keyframes ks-ipucu-son { to { opacity: 0; transform: translateX(-50%) scale(.8); visibility: hidden; } }
@media (orientation: landscape) and (max-height: 520px) { .ks-harita { top: 60px; } .mini-baslik:has(.ks-marka) { top: 4px; } }
@media (max-width: 700px) and (orientation: portrait) { .mini-baslik:has(.ks-marka) { top: 62px; } .ks-hud { top: 112px; } .ks-harita { top: 62px; width: 84px; } }
@media (prefers-reduced-motion: reduce) { html .ks-ipucu { animation-duration: .01s; } }