/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   OZEYS — EKRAN ÖLÇEĞİ VE DOKUNMATİK KATMANI                                      (23.08.2026)

   NEDEN VAR: Proje piksel bazlı tasarlanmıştı (13.500+ sabit px, 126 sayfanın yalnız 22'sinde
   ekran kuralı). Büyük masaüstü ekranında her şey sığıyor, laptopta taşıyordu — üstelik asıl
   sebep çözünürlük değil, Windows'un %125/%150 ÖLÇEKLEME ayarı: 1920 px'lik bir laptop ekranı
   tarayıcıya 1280 px olarak görünüyor.

   BU DOSYANIN İŞİ: taşmayı ortadan kaldırmak. Sabit px'lerin çoğu (padding, font, kenarlık)
   taşma yaratmaz; taşmayı yaratan SABİT GENİŞLİKLER ve ESNEMEYEN DÜZENLERdir. Onlar burada
   merkezî olarak ehlileştirilir; her sayfaya tek tek dokunmaya gerek kalmaz.

   YENİ SAYFA YAZARKEN: buradaki değişkenleri kullanın (--oz-dokun, --oz-bosluk…), sabit genişlik
   yerine `max-width` + `width:100%` tercih edin, geniş tabloyu `.oz-kaydir` içine alın. Böylece
   aynı sorun yeni ekranlarda geri gelmez.

   CİHAZ İŞARETLERİ (JS tarafından <html> üzerine konur — bkz. _LayoutModern.cshtml):
     data-oz-cihaz = "genis" | "laptop" | "dar"      (kullanılabilir genişliğe göre)
     data-oz-giris = "fare"  | "dokunmatik"          (parmakla mı kullanılıyor)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
    /* Dokunma hedefi: fareyle 1 px bile tıklanır, parmakla ~44 px gerekir.
       Butonlar/hücreler bu değişkeni kullanınca cihaz değişince kendiliğinden büyür. */
    --oz-dokun: 32px;
    --oz-dokun-kucuk: 26px;

    /* Sayfa kenar boşluğu ve kart aralığı — dar ekranda daralır, yer kazandırır. */
    --oz-bosluk: 18px;
    --oz-bosluk-kucuk: 10px;

    /* İçerik genişliği: tasarımlarda sık geçen 1180/1000/900 px sabitleri yerine. */
    --oz-icerik-genis: 1240px;

    /* Akışkan yazı ölçeği — dar ekranda küçülür ama okunabilirlik sınırının altına inmez. */
    --oz-yazi-kucuk: clamp(10.5px, 0.72vw + 8px, 12px);
    --oz-yazi: clamp(12px, 0.8vw + 9px, 13.5px);
    --oz-yazi-baslik: clamp(14px, 1.1vw + 10px, 17px);
}

/* ── LAPTOP (asıl sorun yaşanan aralık) ───────────────────────────────────────────────────── */
html[data-oz-cihaz="laptop"] {
    --oz-bosluk: 12px;
    --oz-icerik-genis: 100%;
}

/* ── DAR (küçük laptop, tablet dikey) ─────────────────────────────────────────────────────── */
html[data-oz-cihaz="dar"] {
    --oz-bosluk: 8px;
    --oz-bosluk-kucuk: 6px;
    --oz-icerik-genis: 100%;
}

/* ── DOKUNMATİK: hedefleri büyüt ──────────────────────────────────────────────────────────── */
html[data-oz-giris="dokunmatik"] {
    --oz-dokun: 44px;
    --oz-dokun-kucuk: 38px;
}

/* ═══ 1. YATAY TAŞMA KORUMASI ═════════════════════════════════════════════════════════════════
   Sayfanın KENDİSİ asla yatay kaymaz; kayması gereken varsa (geniş tablo) kendi kutusunda kayar.
   Bu, "ekranın sağı kesik" şikâyetinin kök çözümüdür. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Genişliği içeriğe göre büyüyen tipik kaplar — ekranı asla aşmasınlar. */
.oz-card, .card, .modal-content, .dropdown-menu { max-width: 100%; }

/* Görsel ve gömülü içerik taşmasın. */
img, svg, video, canvas, iframe { max-width: 100%; }

/* Uzun kelime/URL taşırmasın (öğrenci adı, hedef davranış metni, e-posta). */
body { overflow-wrap: break-word; }

/* Geniş tablo sarmalayıcısı — yeni sayfalarda tabloyu buna sarın. */
.oz-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* ═══ 2. SABİT GENİŞLİK EHLİLEŞTİRME ═════════════════════════════════════════════════════════
   Projede `min-width: 900px` gibi sabitler var (50 dosya). Bunlar geniş ekranda doğru, dar
   ekranda taşma sebebi. Aşağıdaki kural, TABLO OLMAYAN kapların sabit genişliğini kırar;
   tablolarda ise dokunmuyoruz — orada yatay kaydırma bilinçli bir tercihtir (Ek-4 matrisi,
   BKDS listesi gibi veri yoğun ekranlar dar ekranda sıkıştırılamaz, kaydırılır). */
html[data-oz-cihaz="dar"] div[style*="min-width"]:not(.oz-kaydir):not([class*="tbl"]),
html[data-oz-cihaz="dar"] section[style*="min-width"] {
    min-width: 0 !important;
}

/* Bootstrap satır/sütunları dar ekranda alt alta insin (col-lg-* zaten öyle, col-md-* için) */
html[data-oz-cihaz="dar"] .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

/* ═══ 3. FİLTRE / ARAÇ ÇUBUKLARI ═════════════════════════════════════════════════════════════
   Planlama takvimindeki çip satırı gibi yatay dizilimler dar ekranda TAŞIYORDU (ekranın sağında
   yarım görünen "KAL..." çipi). Artık alt satıra sarıyorlar. */
.oz-satir-sar, .pl-filtre, .pl-cipler, .oz-arac-cubugu {
    flex-wrap: wrap !important;
    max-width: 100%;
}

/* ═══ 4. AÇILIR MENÜLER EKRAN DIŞINA TAŞMASIN ════════════════════════════════════════════════
   Sağ kenara yakın açılan menüler kesiliyordu (Seans +/− listesi). */
.dropdown-menu, .oz-menu, .pl-popup {
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}

/* ═══ 5. DOKUNMATİK ═══════════════════════════════════════════════════════════════════════════ */
html[data-oz-giris="dokunmatik"] button,
html[data-oz-giris="dokunmatik"] .btn,
html[data-oz-giris="dokunmatik"] a.oz-btn,
html[data-oz-giris="dokunmatik"] select,
html[data-oz-giris="dokunmatik"] input[type="checkbox"],
html[data-oz-giris="dokunmatik"] input[type="radio"] {
    min-height: var(--oz-dokun);
}

/* Parmakla yazı seçimi/uzun basma menüsü, sürükleme yapılan alanlarda engellenir. */
.oz-cizim, .oz-cizim * { touch-action: none; -webkit-user-select: none; user-select: none; }

/* Dokunmatikte hover'a bağlı ipuçları görünmez; bunlar dokunma ile açılır (JS tarafı).
   Burada yalnız "fare varmış gibi" görünmelerini engelliyoruz. */
html[data-oz-giris="dokunmatik"] [data-oz-hover-ipucu] { cursor: pointer; }

/* iOS/Android'de input odaklanınca sayfayı yakınlaştırmasın (16px altı yazıda olur). */
html[data-oz-giris="dokunmatik"] input,
html[data-oz-giris="dokunmatik"] select,
html[data-oz-giris="dokunmatik"] textarea { font-size: max(16px, 1em); }

/* ═══ 6. YAZDIRMA ════════════════════════════════════════════════════════════════════════════
   Ekran ölçeği kâğıdı etkilemesin: resmî formlar her cihazda aynı basılmalı. */
@media print {
    html, body { overflow-x: visible !important; }
    .oz-kaydir { overflow: visible !important; }
}