/* GölgePanel — dar ekran katmanı
   ============================================================================
   Telefon ve tablet uyumu (2026-08-10, Han'ın isteği). Panelin kabuğu
   masaüstü için kurulmuştu: sol menü hep ekranda, sabit yükseklik, yedi
   sütunlu tablolar. Bu dosya o kabuğun dar ekrandaki hâlini tanımlıyor.

   NEDEN AYRI DOSYA
   ----------------
   Medya sorgusunun doğru yeri normalde ilgili bileşenin yanıdır — `app.css`
   içinde. Bu katman ayrı durmasının sebebi teknik değil, örgütsel: 2026-08-10
   akşamı depoda birden fazla oturum aynı anda yazıyordu ve `app.css` en sıcak
   dosyaydı (Han'ın kararı: "ayrı dosya"). `app.css` başında buraya işaret eden
   bir yorum var — `.kenar`, `.ustbar` ya da `.tablo` değiştiren, dar ekrandaki
   karşılığına da bakmak zorunda.

   YÜKLEME SIRASI: tokens.css → app.css → **mobil.css** → modül CSS'i.
   Modül dosyaları bundan sonra geliyor; onların dar ekran kuralları kendi
   dosyalarında duruyor (`egitim.css`, `ogrenci.css` …), burada değil. Burası
   yalnız **kabuk ve paylaşılan bileşenler**.

   KIRILIM NOKTALARI — üç tane, üçü de bilinçli:

   ≤ 1023 px  **kabuk kırılır.** Sol menü çekmeceye girer, hamburger çıkar,
              çerçeve boşluğu kalkar. Sayı 1024: sol menü 256 px ve içeriğe
              en az ~700 px lazım (yedi sütunlu liste, haftalık ızgara).
              1024'te 732 px kalıyor — iPad yatay ve küçük dizüstü buraya
              düşüyor, dikey tabletler (768–834) çekmeceye.
   ≤  639 px  **telefon.** Alt bar çıkar, üst bar iki satıra iner, kişi
              listeleri karta döner, ızgaralar tek sütuna iner.
   pointer:coarse  **dokunmatik** — genişlikten bağımsız. Dokunma hedefleri
              ve girdi puntosu burada büyür; dokunmatik dizüstü de kazanır.

   Renk yazma kuralı burada da geçerli: doğrudan renk kodu yok, hepsi
   `tokens.css`'ten ya da ondan `color-mix` ile türetiliyor.
   ============================================================================ */

/* =========================================================================
   0. Yalnız dar ekranda var olan parçalar
   Hamburger, çekmece kapatma düğmesi, perde, alt bar ve menüdeki kullanıcı
   adı — dördü de burada **kapalı** doğuyor, aşağıdaki kırılımlarda açılıyor.
   Bu dosya yüklenmezse hiçbiri ekranda görünmez; yani parçalar kendi
   katmanlarına ait, `app.css` onları tanımak zorunda değil.
   ========================================================================= */
.ustbar-menu,
.kenar-kapat,
.kenar-kullanici,
.altbar { display: none; }

/* Perde `hidden` niteliğiyle doğuyor (base.html) — betik kapalıyken ortada
   durmasın diye. Görünürlüğü betik değil, bu nitelik yönetiyor.

   Rengi token'dan **gelmiyor** ve bu bilinçli bir istisna: perde bir gölge,
   temanın bir yüzeyi değil. Üç temada da işi aynı — arkadaki içeriği
   karartmak. Açık temanın açık zeminlerinden türetilse hiçbir şeyi
   karartmazdı. Aynı gerekçeyle aynı değer `app.css`'te
   `.onay-pencere::backdrop`'ta da duruyor. */
.kenar-perde {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgb(0 0 0 / 45%);
}

/* Çekmeceyi açan düğme. Ölçüsü dokunma hedefi kuralıyla aynı: 44×44. */
.ustbar-menu {
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  margin-left: -6px;          /* optik hiza: ikon kutusunun boşluğunu geri al */
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  cursor: pointer;
}

.ustbar-menu:hover { background: var(--bg); }
.ustbar-menu:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ustbar-menu .ikon { width: 22px; height: 22px; }

/* Çekmecenin içindeki kapatma düğmesi — logonun sağında. */
.kenar-kapat {
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--sidebar-fg);
  cursor: pointer;
}

.kenar-kapat:hover { background: var(--sidebar-hover); color: var(--sidebar-fg-active); }
.kenar-kapat:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Menünün dibindeki kullanıcı adı — üst bardaki kopya dar ekranda gizleniyor. */
.kenar-kullanici {
  align-items: center;
  gap: 11px;
  margin: 0 0 4px;
  padding: 9px 10px;
  color: var(--sidebar-fg);
  font-size: 14px;
}

.kenar-kullanici .kenar-ad {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Telefon alt barı ------------------------------------------------------
 * Bileşenin bir ikizi `rehber.css`'te duruyor (Kurum Rehberi 2026-08-01'de
 * mobil önceliğe geçerken yazılmıştı) ve iki kabuk hâlâ ayrı: rehberin kendi
 * menüsü var, çekmecesi yok, kırılımı 860 px. **Kabuklar birleştiği gün bu
 * blok ile oradaki tek dosyada toplanmalı** — iki kopya duran her stil
 * zamanla ayrışıyor (CLAUDE.md'deki `tokens.css` kopyası dersi).
 *
 * Kısayolların kendisi veri: sunucuda, sol menüyle aynı izin süzgecinden
 * geçerek üretiliyor (`core/moduller.py::ALT_BAR`).
 */
.altbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: var(--sidebar-bg);
  border-top: 1px solid var(--sidebar-ayrac);
  /* Çentikli telefonlarda sistem çubuğunun altında kalmasın. */
  padding-bottom: env(safe-area-inset-bottom);
}

.altbar a {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 2px 6px;
  color: var(--sidebar-fg);
  text-align: center;
}

.altbar a span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.altbar .ikon { width: 21px; height: 21px; color: var(--sidebar-ikon); }
.altbar a.aktif { color: var(--sidebar-fg-active); }
.altbar a.aktif .ikon { color: var(--accent); }
.altbar a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

/* =========================================================================
   1. KABUK — ≤ 1023 px: sol menü çekmeceye girer
   ========================================================================= */
@media (max-width: 1023px) {
  :root {
    /* Arayüz ölçeği dar ekranda 1'e iniyor. `zoom: 1.1` telefonda iki iş
       birden bozuyor:
         (1) 390 px'lik bir ekranı yerleşim açısından 355 CSS px'e düşürüyor —
             zaten dar olan alan %10 daha daralıyor;
         (2) medya sorgusu gerçek genişliği, yerleşim küçültülmüş genişliği
             görüyor; kırılım noktası ile ekranda olan biten ayrışıyor.
       Kaybedilen punto aşağıda dokunma hedefi ve girdi puntosu kurallarıyla
       geri veriliyor. `--cerceve` **değiştirilmiyor**: o token yalnız kabuğun
       kenar boşluğu değil, `meb.css` ve `muhasebe.css`'te genel bir aralık
       ölçüsü — sıfırlansa o ekranlardaki boşluklar da çökerdi. */
    --olcek: 1;
  }

  body {
    /* Kabuğun kenar boşluğu telefonda israf: iki yanda 12'şer piksel,
       390 px'in %6'sı. Kartlar ekranın kenarına dayanıyor. */
    padding: 0;
    /* `100vh` mobil tarayıcıda adres çubuğu açıkken yanlış ölçü veriyor:
       sayfanın altı ekranın dışında kalıyor ve alt bar görünmüyor. `dvh`
       o an gerçekten görünen yüksekliği veriyor. */
    height: 100dvh;
  }

  .yerlesim { gap: 0; }

  /* İçerik artık tek kart: köşeleri ve kenarlığı ekranın kenarında anlamsız. */
  .icerik { border: 0; border-radius: 0; }

  /* --- Çekmece --- */
  .kenar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    width: min(300px, 84vw);
    height: auto;
    border-radius: 0;
    border-width: 0 1px 0 0;
    /* %101: gölge de ekranın dışında kalsın. */
    transform: translateX(-101%);
    transition: transform 0.22s ease;
  }

  body[data-menu="acik"] .kenar { transform: none; }

  .ustbar-menu,
  .kenar-kapat,
  .kenar-kullanici { display: flex; }

  /* Üst bar dar ekranda: başlık kısalır, kullanıcı adı çekmeceye taşınır. */
  .ustbar { padding: 10px 16px; gap: 10px; }

  .ustbar h1 {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ana {
    padding: 18px 16px 28px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* --- Kaydırmalı tablolar (tablet ve telefon) ---
     `.tablo`nun `width: 100%`i dar ekranda kaydırmayı **öldürüyor**: tablo
     kaba sığmak için her hücreyi sarıyor. 800 px'lik bir tablette borçlu
     listesinin satırları 110 piksele çıkıyordu ("2026-2027 Eğitim Ücreti
     (Demo)" dört satır). Sütunlar doğal genişliğini alsın, kap yana kaysın.
     `min-width: 100%` az sütunlu tablonun kabın solunda büzülmesini önlüyor.

     Telefonda kart görünümüne geçen tablolar (`.tablo-kart`) bu kuralı §5'te
     geri alıyor — orada tablo blok kutuya dönüyor ve kaymıyor. */
  .tablo-sarmal .tablo { width: max-content; min-width: 100%; }
}

/* Çekmecenin kayması hareket hassasiyeti olan kullanıcıda kapanır — açılıp
   kapanması değil, yalnız animasyonu. */
@media (prefers-reduced-motion: reduce) {
  .kenar { transition: none; }
}

/* Geniş ekranda perde hiç çizilmesin: betik bir kez açıp `hidden`i kaldırdıysa
   ve kullanıcı pencereyi büyüttüyse ortada kalmasın. */
@media (min-width: 1024px) {
  .kenar-perde { display: none; }
}

/* =========================================================================
   2. TELEFON — ≤ 639 px
   ========================================================================= */
@media (max-width: 639px) {
  .altbar { display: flex; }

  /* Alt bar içeriğin üstünde duruyor; son kart onun altında kalmasın. */
  .ana { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

  /* --- Üst bar iki satır ---
     Altı açılır düğme + başlık tek satıra sığmıyor. Düğmeleri gizlemek yerine
     ikinci satıra indiriliyor: hiçbir işlev telefonda kaybolmuyor ve düğmeler
     tam genişliğe yayılınca dokunma hedefleri de büyüyor. */
  .ustbar {
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 12px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  .ustbar h1 { font-size: 17px; }

  .ust-eylem {
    position: relative;   /* açılır paneller artık **şeride** göre konumlanıyor */
    width: 100%;
    margin-left: 0;
    gap: 2px;
    justify-content: space-between;
  }

  /* Panel düğmenin sağ kenarına yapışırsa soldaki düğmelerde ekranın dışına
     taşıyor (360 px'te 320 piksellik kutu düğmenin solunda yer bulamıyor).
     Konum sahibi düğme olmaktan çıkıp şerit oluyor: panel tam genişlik. */
  .ust-menu { position: static; }

  .ust-panel,
  .ust-panel-genis,
  .ust-panel-hata {
    left: 0;
    right: 0;
    width: auto;
    top: calc(100% + 6px);
    max-height: min(70dvh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Sezon adı düğmede yer kaplıyor; sembol yetiyor. Arşivdeyken **yazıyor** —
     Han'ın ölçütü orada tersine dönüyor: yanlış sezonda olduğu göze çarpmalı. */
  .sezon-dugme .sezon-ad { display: none; }
  .sezon-dugme-arsiv .sezon-ad { display: inline; font-size: 13px; }

  /* --- Genel yerleşim --- */
  .kart { padding: 14px; }
  .kart-izgara { grid-template-columns: 1fr; gap: 12px; }
  .form-izgara { grid-template-columns: 1fr; gap: 0; }
  .kart-dar,
  .ayar-sayfa,
  .arama-sayfa,
  .kutuphane-sayfa { max-width: none; }

  /* Özet kutuları ikişerli: dörtlü şerit telefonda dört satır oluyordu. */
  .ozet-serit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ozet-kutu { min-width: 0; padding: 10px 12px 10px 11px; gap: 8px; }
  .ozet-sayi { font-size: 20px; }
  .ozet-etiket { font-size: 12.5px; }
  .ozet-ikon { font-size: 17px; }

  /* Sekmeler tek satırda kalıp yana kayıyor — alt alta sarınca sayfanın
     üçte biri gezinmeye gidiyordu. */
  .sekmeler { gap: 10px; }

  .sekme-listesi {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .sekme-listesi::-webkit-scrollbar { display: none; }
  .sekme { white-space: nowrap; }

  /* Form düğmeleri tam genişlik: yan yana iki düğme telefonda hem dar hem
     yanlış dokunmaya açık. */
  .form-eylem { flex-direction: column; align-items: stretch; }
  .form-eylem .btn { width: 100%; }
  .form-eylem-not { order: 99; flex: none; }
  .onay-dugmeler { flex-direction: column-reverse; }
  .onay-dugmeler .btn { width: 100%; }

  /* Detay başlığı: ad ile işlem düğmeleri yan yana sığmıyor. */
  .detay-ust { flex-direction: column; align-items: stretch; }
  .detay-ad { font-size: 18px; }

  /* Arşiv şeridi telefonda da tam okunur kalsın, ama daha az yer kaplasın. */
  .arsiv-serit { padding: 12px 14px; gap: 10px; }
  .arsiv-baslik { font-size: 16px; }
  .arsiv-metin { min-width: 0; }
  .arsiv-donus,
  .arsiv-dugme { width: 100%; }

  .sonuc-toplam { margin-left: 0; width: 100%; }

  /* Bilgi listesi (etiket–değer) telefonda alt alta: iki sütun 360 px'te
     etiketi de değeri de kırıyordu. */
  .bilgi-listesi { grid-template-columns: 1fr; gap: 2px; }
  .bilgi-listesi dd { margin-bottom: 8px; }

  /* --- Filtre şeritleri ---
     `.filtre` bloğu üç modül dosyasında birden tanımlı (ogrenci, kayit,
     muhasebe — app.css'e devredilmesi gereken eski bir kopya). mobil.css en
     sonda yüklendiği için buradaki kural üçünü de yakalıyor.

     Alanlar ikişerli: tarih aralığı (başlangıç–bitiş) yan yana okunuyor,
     sığmayan tek satıra düşüyor. Arama kutusu ve düğmeler tam genişlik. */
  .filtre { padding: 12px; gap: 10px; }
  .filtre-alanlar { gap: 10px; }
  .filtre-alan { flex: 1 1 calc(50% - 5px); min-width: 140px; }
  .filtre-arama { flex: 1 1 100%; }
  .filtre-arama input { width: 100%; }

  .filtre-dugmeler {
    flex: 1 1 100%;
    margin-left: 0;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

/* =========================================================================
   3. GİRİŞ EKRANI
   Kutu sabit 360 px'ti; %10 ölçekle 396 piksele çıkıyor ve 360 px'lik bir
   telefonda ekrandan taşıyordu. Ayrıca klavye açılınca görünen alan kısalıyor
   ve `overflow: hidden` yüzünden parolaya kaydırılamıyordu.
   ========================================================================= */
.giris-kutu { width: min(360px, 100%); }

@media (max-width: 639px) {
  .giris-sayfa {
    /* `align-items: center` + `overflow: auto` klasik tuzak: içerik kaptan
       uzunsa üstü kırpılıyor ve oraya kaydırılamıyor. Ortalamayı otomatik
       kenar boşluğu yapıyor, kaydırma çalışıyor. */
    align-items: flex-start;
    overflow-y: auto;
    padding: 24px 16px 40px;
    border-radius: 0;
  }

  .giris-kutu { margin: auto; padding: 26px 20px; }
}

/* =========================================================================
   4. DOKUNMATİK — hedef boyu ve girdi puntosu
   Genişlikten bağımsız: ölçüt ekranın darlığı değil, parmağın kalınlığı.
   ========================================================================= */
@media (pointer: coarse) {
  .ust-dugme {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
  }

  .kenar-grup,
  .kenar-tek,
  .kenar-oge,
  .kenar-arac,
  .ust-oge { min-height: 44px; }

  .btn { min-height: 44px; }
  .btn-kucuk { min-height: 40px; }

  .sekme {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* iOS Safari 16 px'ten küçük bir alana dokunulduğunda sayfayı otomatik
     yakınlaştırıyor ve bir daha geri çıkmıyor — form doldurmayı işkenceye
     çeviriyor. Tek çare girdi puntosunun 16 px olması.
     `:not()` seçicileri özgüllüğü `.alan input`in üstüne çıkarıyor; onaltı
     piksel yalnız burada, dokunmatikte geçerli. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px; }

  /* Kutucuk ve radyo düğmesi parmakla işaretlenebilsin. */
  input[type="checkbox"],
  input[type="radio"] { width: 19px; height: 19px; }
}

/* =========================================================================
   5. LİSTELER — telefonda kart, defterde kaydırma
   Han'ın kararı (2026-08-10): "karma". Kişi listeleri (öğrenci, aday, kadro,
   grup, borçlu) telefonda karta dönüyor; kasa defteri ve tahsilat günlüğü
   gibi gerçekten tablo olan dökümler yana kaydırmalı tablo kalıyor — orada
   sayıların alt alta okunması gerekiyor.

   Kart hâline geçen tabloya şablonda iki şey ekleniyor:
     1. Sarmalayan kutuya `tablo-kart` sınıfı,
     2. Her `<td>`'ye `data-etiket="…"` (başlık satırı ekrandan kalkıyor,
        etiket hücrenin yanına geçiyor). İlk hücre `hucre-baslik` sınıfını
        alıyor: kartın başlığı o, etiketi olmuyor.
   Etiketi olmayan hücre kart hâlinde **etiketsiz** çizilir; yani eksik
   `data-etiket` sessizce bozmuyor, yalnız o satırı adsız bırakıyor.
   ========================================================================= */
@media (max-width: 639px) {
  .tablo-kart .tablo,
  .tablo-kart .tablo tbody,
  .tablo-kart .tablo tr,
  .tablo-kart .tablo td { display: block; width: auto; }

  .tablo-kart .tablo { min-width: 0; }
  .tablo-kart .tablo thead { display: none; }

  /* Kart görünümünde kaydırma yok. */
  .tablo-kart { overflow-x: visible; }

  .tablo-kart .tablo tr {
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
  }

  .tablo-kart .tablo tbody tr:last-child { border-bottom: 0; }

  .tablo-kart .tablo td {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: baseline;
    /* Izgara çocukları varsayılan olarak **gerilir**: rozet ve çip gibi
       kendi genişliği kadar durması gereken parçalar kartın bir ucundan
       öbürüne uzanıyordu. Değer sütunu artık soldan başlıyor. */
    justify-items: start;
    gap: 10px;
    padding: 3px 0;
    border: 0;
    text-align: left;
  }

  /* `app.css`teki `.kart .rozet { margin-top: 10px }` kart görünümünde
     satırlardan birini ötekilerden aşağı kaydırıyordu; o boşluk kartın
     içindeki tek başına duran rozet için, tablo hücresi için değil. */
  .tablo-kart .tablo .rozet { margin-top: 0; }

  .tablo-kart .tablo td[data-etiket]::before {
    content: attr(data-etiket);
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.5;
  }

  /* Etiketi olmayan hücre tek sütun: yer tutan boş bir kolon bırakmıyor. */
  .tablo-kart .tablo td:not([data-etiket]) { grid-template-columns: minmax(0, 1fr); }

  /* Kartın başlığı — ad, tam genişlik, etiketsiz. */
  .tablo-kart .tablo td.hucre-baslik {
    display: block;
    margin-bottom: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border);
  }

  .tablo-kart .tablo td.hucre-baslik::before { content: none; }
  .tablo-kart .tablo .tablo-ad { font-size: 15.5px; }

  /* Sağa dayalı sayı sütunu kart hâlinde sola döner: etiketin yanında
     duracak, kartın öbür ucunda değil. */
  .tablo-kart .tablo td.tablo-sag { text-align: left; }

  /* "Kayıt yok" satırı kart değil, tek bir bilgi cümlesi. */
  .tablo-kart .tablo td.tablo-bos { display: block; text-align: center; }
  .tablo-kart .tablo td.tablo-bos::before { content: none; }

  /* Kaydırmalı tabloda hücre dolgusu daralıyor — her piksel bir sütun demek.
     Seçici `.tablo-sarmal` ile başlıyor ki `kayit.css`'teki `.tablo td`
     kopyası (aynı özgüllükte ve sonra yüklenen) bunu ezmesin. `:not(.tablo-kart)`
     şart: bu blok dosyanın sonunda ve kart hücrelerinin dar dolgusuyla aynı
     özgüllükte — dışlanmasa kartın satır aralığı iki katına çıkıyordu. */
  .tablo-sarmal:not(.tablo-kart) .tablo th,
  .tablo-sarmal:not(.tablo-kart) .tablo td { padding: 10px 12px; }
}