/* =====================================================================
   DENETİM TAKİP — Mobil / Duyarlı Katman
   Tüm mobil kurallar burada toplanır. Bu dosya head'de en son yüklenir,
   dolayısıyla diğer sayfaların kurallarını güvenle geçersiz kılabilir.

   Kırılım noktaları
     1100px  geniş tablet   → üç kolonlu görev detayı ikiye iner
      900px  tablet         → iki kolonlu ızgaralar teke iner
      820px  küçük tablet   → yan menü çekmeceye dönüşür
      640px  telefon        → tablolar karta dönüşür, her şey tek kolon
      380px  dar telefon    → tipografi ve boşluklar sıkışır
   ===================================================================== */

/* =====================================================================
   0a. Izgara / esnek kutu taşma düzeltmesi
   Izgara ve flex çocuklarının varsayılan min-width değeri `auto`dur; içerik
   min-content genişliğinin altına inemez ve kolonu şişirerek tüm sayfaya
   yatay kaydırma bindirir. Tek kolona inen her kapsayıcıda sıfırlanır.
   ===================================================================== */
.gorev-detay > *, .dash-ust > *, .dash-alt > *, .duzenle-izgara > *,
.izgara-2 > *, .kanban > *, .kanban-kolon, .kategori-kart-izgara > *,
.aksiyon-serit > *, .rapor-izgara > *, .alan-deger-liste > *,
.ay-sekmeler > *, .ay-secim-izgara > * { min-width: 0; }

.durum-segment, .durum-btn, .plan-is-ust > *, .kunye-satir > *,
.filtre-cubugu > *, .toplu-cubuk > *, .kayit-ust > * { min-width: 0; }

/* Uzun ve boşluksuz metinler (klasör yolu, dosya adı, URL) taşmasın.
   .veri'ye `anywhere` verilmez: "2.2.2" gibi kısa kodları ortadan böler. */
.dosya-ad, .not-icerik, .mevzuat-kutu p, .klasor-satir .veri { overflow-wrap: anywhere; }
.veri { overflow-wrap: break-word; }

/* =====================================================================
   0. Dokunmatik cihaz düzeltmeleri (ekran boyutundan bağımsız)
   ===================================================================== */
@media (hover: none) and (pointer: coarse), (max-width: 820px) {
  /* Dokunmatikte :hover takılı kalır; görsel geri bildirimi basmaya bağla */
  .tablo tbody tr:hover { background: transparent; }
  .kategori-kart-dash:hover { transform: none; }

  /* WCAG 2.5.5 — asgari dokunma hedefi */
  .ikon-btn,
  .kopyala-btn,
  .sekme-btn,
  .durum-btn,
  .etiket-cip,
  .foto-sil,
  .sayfalama a,
  .gorunum-anahtar a {
    min-height: var(--dokunma);
    min-width: var(--dokunma);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .btn-kucuk { min-height: 38px; }

  /* Onay kutusu / radyo: parmakla isabet ettirilebilir olsun.
     .onay-satir input { width:auto } kuralını da geçersiz kılar. */
  input[type="checkbox"], input[type="radio"],
  .onay-satir input[type="checkbox"], .tablo input[type="checkbox"] {
    width: 24px; height: 24px; margin: 0; flex-shrink: 0;
  }
  .onay-satir { gap: 12px; min-height: var(--dokunma); }

  /* Satır içi bağlantılar WCAG 2.5.8 asgari 24x24 hedefini karşılasın */
  .aksiyon-liste a,
  .gecmis-liste a,
  .silinen-liste a {
    display: block; padding: 7px 0; min-height: 24px;
  }
  .aksiyon-liste li { padding: 0; }

  .kategori-alt .kategori-kod { min-width: 34px; justify-content: flex-start; }
  .kategori-alt .kategori-kod,
  .kategori-alt .kategori-ad {
    display: inline-flex; align-items: center; min-height: 26px;
  }
  .kategori-alt .kategori-ad { padding: 3px 0; }

  /* Bu ikisi içlerinde <span class="veri">kod</span> barındırır; inline-flex
     kodu ayrı bir esnek öğe yapıp "2.2" / ".2" diye bölüyordu. */
  .tablo td[data-birincil] a,
  .kanban-kart-baslik { display: block; padding: 3px 0; min-height: 26px; }

  /* Quill araç çubuğu (harici kütüphane) — parmakla rahat basılsın */
  .not-editor-kap .ql-toolbar button,
  .not-editor-kap .ql-toolbar .ql-picker-label { width: 34px; height: 32px; }
  .not-editor-kap .ql-toolbar { padding: 6px; }

  /* Sürüklenebilir öğeler (bkz. assets/js/suruk.js)
     - Kanban kartında tutamak yok: pan-y ile dikey kaydırma korunur,
       sürükleme ancak uzun basışla başlar.
     - Kategori tutamağı özel bir kulp: anında sürükleme için none. */
  .kanban-kart { touch-action: pan-y; }
  .tut { touch-action: none; min-width: 32px; min-height: var(--dokunma); display: inline-flex; align-items: center; }
}

/* Katlanır filtre grubu.
   Masaüstü: display:contents ile çocuklar doğrudan .filtre-cubugu'nun
   esnek öğeleri olur — yerleşim hiç değişmez, düğme gizlidir. */
.filtre-grup { display: contents; }
.filtre-ac { display: none; }
.filtre-sayac {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px;
  background: var(--vurgu); color: var(--vurgu-metin);
  border-radius: 999px; font-size: .7rem; font-weight: 700;
}

/* Kanban durum seçici yalnız mobilde açılır (masaüstünde sürükleme kullanılır) */
.kanban-durum-secici { display: none; }

/* Yalnız ekran okuyucular için: görünmez ama okunur */
.gorsel-gizli {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Parmağı takip eden sürükleme kopyası */
.suruk-hayalet {
  position: fixed; top: 0; left: 0; z-index: 90;
  margin: 0; pointer-events: none;
  opacity: .92; box-shadow: var(--golge);
  border-radius: var(--r-sm);
  transform-origin: top left;
}
/* Sürükleme sırasında metin seçimi ve kaydırma zinciri kapanır */
body.suruk-suruyor { user-select: none; -webkit-user-select: none; overscroll-behavior: contain; }
body.suruk-suruyor .kanban-liste { min-height: 56px; }

/* =====================================================================
   1. Geniş tablet — 1100px
   ===================================================================== */
@media (max-width: 1100px) {
  .icerik { padding: 24px; }
  .dash-ust { grid-template-columns: 1fr; }
  .halka-gorsel { max-width: 240px; margin-inline: auto; }
}

/* =====================================================================
   2. Tablet — 900px
   ===================================================================== */
@media (max-width: 900px) {
  .yan-menu { width: 188px; }
  .yan-menu a { font-size: .88rem; padding: 8px 11px; }
  .icerik { padding: 20px; }

  /* Görev detayında yapışkan kolon, tek kolona inince ekranı kilitler */
  .gorev-kunye, .gorev-sekmeler { position: static; top: auto; }

  .kanban { grid-template-columns: repeat(2, 1fr); }
  .rapor-izgara { grid-template-columns: 1fr; }
}

/* =====================================================================
   3. Yan menü çekmecesi — 820px
   ===================================================================== */
@media (max-width: 820px) {

  /* --- Üst bar --- */
  .ust-bar {
    gap: 10px;
    padding: 8px calc(12px + var(--guvenli-sag)) 8px calc(12px + var(--guvenli-sol));
    padding-top: calc(8px + var(--guvenli-ust));
  }
  .menu-dugmesi { display: inline-flex; }
  .kullanici-bilgi { display: none; }          /* künye çekmeceye taşındı */
  .ust-bar-kullanici { gap: 8px; }
  .ust-bar-uygulama { display: none; }
  .ust-bar-kurum { font-size: .9rem; }
  .ust-bar-logo { height: 28px; }

  /* --- Çekmece --- */
  .yan-menu {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: min(84vw, 300px);
    padding: 12px calc(12px + var(--guvenli-sol)) calc(16px + var(--guvenli-alt));
    background: var(--zemin-1);
    border-right: 1px solid var(--cizgi);
    box-shadow: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    visibility: hidden;
  }
  .yan-menu.acik { transform: translateX(0); visibility: visible; box-shadow: var(--golge); }

  /* Çekmece kapalıyken içindeki bağlantılar klavyeyle odaklanamamalı */
  .yan-menu:not(.acik) { pointer-events: none; }

  .yan-menu-ust {
    display: flex; align-items: center; gap: 10px;
    padding: calc(6px + var(--guvenli-ust)) 4px 12px 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--cizgi);
  }
  .yan-menu-kullanici { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .yan-menu-kullanici .kullanici-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu-kapat {
    margin-left: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--dokunma); height: var(--dokunma);
    background: none; border: 1px solid transparent; border-radius: var(--r-sm);
    color: var(--metin-soluk); cursor: pointer;
  }
  .menu-kapat:hover { border-color: var(--cizgi-parlak); color: var(--metin); }

  .yan-menu a { padding: 12px 14px; font-size: .95rem; margin-bottom: 2px; }
  .yan-menu-cikis {
    display: block; margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--cizgi);
  }
  .yan-menu-cikis a { color: var(--acil); }

  /* --- İçerik --- */
  /* Kenardan kenara uzanan şeritler (ör. görev detayındaki geri çubuğu)
     negatif kenar boşluğunu bu değişkenden alır. */
  :root { --icerik-x: 16px; }
  .icerik {
    padding: var(--icerik-x) calc(var(--icerik-x) + var(--guvenli-sag)) calc(24px + var(--guvenli-alt)) calc(var(--icerik-x) + var(--guvenli-sol));
  }
  .yerlesim { min-height: auto; }

  /* --- Tipografi --- */
  h1 { font-size: 1.25rem; }
  h2 { font-size: 1.05rem; }
  .bolum-h2 { font-size: 1rem; margin: 20px 0 10px; }
  .sayfa-baslik { gap: 8px; margin-bottom: 16px; }

  /* --- Formlar: iOS 16px altındaki girdilerde otomatik yakınlaştırır --- */
  .form-alan input, .form-alan select, .form-alan textarea,
  .filtre-cubugu input, .filtre-cubugu select,
  .giris-form input,
  .toplu-cubuk select,
  input, select, textarea {
    font-size: 16px;
  }
  .form-alan input, .form-alan select, .form-alan textarea { padding: 11px 12px; }

  /* select oklarının kırpılmaması için */
  select { max-width: 100%; }

  /* --- Kartlar --- */
  .kart { padding: 16px; border-radius: var(--r-sm); }

  /* --- Filtre çubuğu: arama açıkta, diğer filtreler katlanır --- */
  .filtre-cubugu { gap: 8px; }
  .filtre-cubugu > * { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .filtre-arama { flex: 1 1 100%; min-width: 0; }

  .filtre-ac { display: inline-flex; flex: 1 1 100%; justify-content: center; }
  .filtre-grup {
    display: none;                    /* contents değil: katlanabilmesi için kutu olmalı */
    flex: 1 1 100%; width: 100%;
    flex-wrap: wrap; gap: 8px;
  }
  .filtre-grup.acik { display: flex; }
  .filtre-grup > * { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .filtre-grup > .btn { flex: 1 1 calc(50% - 4px); }

  /* --- Toplu işlem çubuğu --- */
  .toplu-cubuk { gap: 8px; padding: 10px; }
  .toplu-cubuk select { flex: 1 1 calc(50% - 4px); }
  .toplu-cubuk .btn { flex: 1 1 calc(50% - 4px); }
  .toplu-sayi { flex: 1 1 100%; }

  /* --- Görünüm anahtarı: başlıktan alt satıra --- */
  .gorunum-anahtar { margin-left: 0; width: 100%; }
  .gorunum-anahtar a { flex: 1; text-align: center; }

  /* --- Modal: alttan açılan sayfa (bottom sheet) --- */
  .modal, .modal-genis {
    max-width: none; width: 100%;
    margin: auto auto 0;                 /* alta yasla */
    border-radius: var(--r-md) var(--r-md) 0 0;
    max-height: 92dvh;
  }
  .modal-form { padding: 18px 16px calc(18px + var(--guvenli-alt)); }
  .modal-genis .modal-form { max-height: 92dvh; }
  /* Yapışkan eylem şeridi yalnız modal içinde; .modal-eylem sınıfı
     gorev_duzenle.php'de sayfa formunda da kullanılıyor. */
  dialog .modal-eylem {
    position: sticky; bottom: 0;
    margin: 18px -16px calc(-18px - var(--guvenli-alt));
    padding: 12px 16px calc(12px + var(--guvenli-alt));
    background: var(--zemin-1);
    border-top: 1px solid var(--cizgi);
  }
  .modal-eylem { gap: 8px; flex-wrap: wrap; }
  .modal-eylem .btn { flex: 1 1 calc(50% - 4px); }

  /* --- Görev detayı --- */
  /* Geri düğmesi yapışkan: detay sayfası uzun, listeye dönmek için
     en yukarı kaydırmak gerekmesin. */
  .detay-ust {
    position: sticky; top: var(--ust-h); z-index: 20;
    margin: calc(-1 * var(--icerik-x)) calc(-1 * var(--icerik-x)) 12px;
    padding: 8px calc(var(--icerik-x) + var(--guvenli-sag)) 8px calc(var(--icerik-x) + var(--guvenli-sol));
    background: var(--cam);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cam-cizgi);
  }
  .geri-btn { min-height: var(--dokunma); }
  .detay-ust-kod { margin-left: auto; }

  .gorev-detay { grid-template-columns: 1fr; gap: 12px; }
  .gorev-sekmeler { grid-column: auto; }
  .kunye-satir { flex-wrap: wrap; gap: 10px; }
  .durum-segment { gap: 6px; }
  .durum-btn { flex: 1 1 calc(50% - 3px); padding: 10px 8px; font-size: .82rem; }

  /* Sekme başlıkları taşarsa yatay kayar */
  .sekme-basliklar {
    overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .sekme-basliklar::-webkit-scrollbar { display: none; }
  .sekme-btn { flex: 0 0 auto; white-space: nowrap; }

  /* --- Kanban: telefonda tek kolon --- */
  .kanban { grid-template-columns: 1fr; }
  /* Kolonlar alt alta yığıldığı için sürükleme mesafesi kullanışsız kalır;
     durum kartın kendi seçicisinden değiştirilir. */
  .kanban-durum-secici { display: block; margin-top: 10px; }
  .kanban-durum {
    width: 100%; min-height: 38px;
    padding: 8px 10px; font-size: 16px;
    background: var(--zemin-1); border: 1px solid var(--cizgi-parlak);
    border-radius: var(--r-sm); color: var(--metin);
  }
  .kanban-kolon:has(.kanban-liste:empty) { display: none; }   /* boş kolon yer kaplamasın */

  /* --- Ay sekmeleri --- */
  .ay-sekmeler { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .ay-sekme { padding: 9px 3px; font-size: .78rem; }

  /* --- Çalışma planı --- */
  .plan-ozet { gap: 12px; }
  .plan-ozet-sol { flex: 1 1 100%; }
  .plan-is-baslik { min-width: 0; flex: 1 1 100%; }
  .plan-is-alt { gap: 8px; }

  /* --- Kategori ağacı ---
     Esnek kutuda eylem düğmeleri margin-left:auto ile alt satıra kayıp
     boş bir şerit bırakıyordu. Izgara ile yerleşim sabitlenir:
     satır 1 → tutamak | kod | ad | eylemler
     satır 2 →           görev sayısı  (eylemler iki satır boyu sağda kalır) */
  .kategori-ust-baslik,
  .kategori-alt {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 8px;
  }
  .kategori-ust-baslik { padding: 10px 12px; }
  .kategori-alt { padding: 8px 4px; }

  .kategori-ust-baslik > .rozet,
  .kategori-alt > .kategori-sayi {
    grid-column: 2 / 4; grid-row: 2; justify-self: start; margin-left: 0;
  }
  /* Masaüstünde sütun başlığından anlaşılan sayı, mobilde bağlamsız kalıyor */
  .kategori-alt > .kategori-sayi::after { content: ' görev'; font-family: var(--f-govde); }
  .kategori-ust-baslik > .kategori-eylem,
  .kategori-alt > .kategori-eylem {
    grid-column: 4; grid-row: 1 / span 2; margin-left: 0; align-self: center;
  }

  /* --- Alan tasarımcısı --- */
  .alan-satir { flex-wrap: wrap; gap: 8px; }
  .alan-satir .alan-etiket { flex: 1 1 100%; }
  .alan-satir .kategori-eylem { margin-left: auto; }

  /* --- Denetim Rehberi --- */
  /* Not kartındaki sayfa rozeti ve husus bağlantısı da dokunulabilir olsun */
  .rehber-sayfa-rozet,
  .rehber-not-alt .mini-etiket {
    min-height: 24px; display: inline-flex; align-items: center;
  }
  .rehber-duzen { grid-template-columns: 1fr; }
  .rehber-notlar { position: static; max-height: none; }
  .rehber-arac { padding: 10px 12px; }
  .rehber-arac-eylem { margin-left: 0; width: 100%; }
  .rehber-arac-eylem .btn { flex: 1 1 auto; }
  .rehber-sayfa-girdi { width: 72px; font-size: 16px; }
  /* Telefon tarayıcılarının PDF görüntüleyicisi güvenilmez; alanı kısıtla
     ve "yeni sekmede aç" yönlendirmesini görünür kıl. */
  .rehber-cerceve { height: 62dvh; }
  .rehber-mobil-not { display: block; }

  /* --- Grafikler --- */
  .grafik-kap { height: 220px; }
  .grafik-kap-kisa { height: 170px; }

  /* --- Lightbox --- */
  .lightbox { max-width: 100vw; max-height: 100dvh; }
  .lightbox img { max-width: 100vw; max-height: 84dvh; }
  .lightbox-kapat { top: calc(10px + var(--guvenli-ust)); right: 12px; width: var(--dokunma); height: var(--dokunma); }

  /* --- Sayfalama --- */
  .sayfalama { gap: 6px; }

  /* --- Boş durum --- */
  .bos-durum { padding: 32px 16px; }
}

/* =====================================================================
   4. Telefon — 640px: tablolar karta dönüşür
   ===================================================================== */
@media (max-width: 640px) {

  /* Yatay kaydırmalı sarmalayıcıları etkisizleştir; kart yığını kullanılıyor */
  .kart[style*="overflow-x"] { overflow-x: visible !important; padding: 0 !important; }

  .tablo { display: block; width: 100%; font-size: .88rem; }
  .tablo thead { display: none; }              /* başlıklar satır içine taşındı */
  .tablo tbody { display: block; }

  .tablo tbody tr {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid var(--cizgi);
  }
  .tablo tbody tr:last-child { border-bottom: none; }

  .tablo td {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 4px 0; border-bottom: none;
    min-height: 0;
  }

  /* Sütun başlığı, hücrenin soluna etiket olarak yazılır */
  .tablo td::before {
    content: attr(data-etiket);
    flex: 0 0 38%; max-width: 38%;
    color: var(--metin-silik);
    /* .veri sınıflı hücrelerden mono yazı tipi miras alınmasın */
    font-family: var(--f-govde);
    font-size: .7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    padding-top: 2px;
  }
  /* Etiketi olmayan hücre (seçim kutusu, eylem sütunu) tam genişlik alır */
  .tablo td:not([data-etiket])::before,
  .tablo td[data-etiket=""]::before { content: none; }

  /* Vurgulu ilk hücre: başlık gibi görünsün */
  .tablo td[data-birincil] {
    padding-bottom: 8px;
    font-size: .95rem;
  }
  .tablo td[data-birincil]::before { content: none; }
  .tablo td[data-birincil] a { font-weight: 600; }

  /* Eylem hücresi: sağa yaslı düğme şeridi */
  .tablo td[data-eylem] {
    justify-content: flex-end; flex-wrap: wrap; gap: 6px;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed var(--cizgi);
  }
  .tablo td[data-eylem]::before { content: none; }

  /* Seçim kutusu hücresi: kart başına sabitlenir */
  .tablo td[data-secim] { padding-bottom: 6px; }
  .tablo td[data-secim]::before { content: none; }

  /* Boş hücreleri gizle (mobilde gereksiz satır açmasın) */
  .tablo td[data-bos] { display: none; }

  /* ===================================================================
     Görev listesi — iki şeritli kompakt kart

       ☐ 2.2.7 · Kritik · 1 kayıt      ● Yapılmadı  🗑
         Okulda bulunan oyun araçlarının… ↻Yıllık [Acil]

     Meta bilgiler ayrı bir şerit yerine kodun yanına alındı; kategori
     sütunu gizlendi (kod zaten kategoriyi içeriyor: 2.2.7 → 2.2).
     =================================================================== */
  .tablo-gorev tbody tr {
    position: relative;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0 6px;
    padding: 7px 12px;
  }

  /* Genel kart kuralları bu tabloda geçersiz */
  .tablo-gorev td {
    display: inline-flex; align-items: center;
    padding: 0; min-height: 0; gap: 0;
  }
  .tablo-gorev td::before { content: none !important; }
  .tablo-gorev td[data-eylem] {
    margin-top: 0; padding-top: 0; border-top: none;
    justify-content: flex-end;
  }

  /* --- 1. şerit: seçim · kod · öncelik · kayıt ......... durum · sil --- */
  .tablo-gorev td[data-alan="secim"]   { order: 1; }
  .tablo-gorev td[data-alan="kod"] {
    order: 2; font-size: .82rem; font-weight: 600; color: var(--metin-soluk);
  }
  .tablo-gorev td[data-alan="oncelik"] { order: 3; }
  .tablo-gorev td[data-alan="kayit"]   { order: 4; }
  .tablo-gorev td[data-alan="durum"]   { order: 5; margin-left: auto; }
  .tablo-gorev td[data-alan="eylem"]   { order: 6; }
  .tablo-gorev td[data-alan="durum"] .rozet { font-size: .7rem; padding: 1px 8px; }

  /* Kategori kodu husus kodunun ön ekinde zaten var — mobilde gizlenir */
  .tablo-gorev td[data-alan="kategori"] { display: none; }

  /* Meta: küçük, silik, nokta ayraçlı */
  .tablo-gorev td[data-alan="oncelik"],
  .tablo-gorev td[data-alan="kayit"] {
    font-size: .72rem !important;
    color: var(--metin-silik) !important;
  }
  .tablo-gorev td[data-alan="oncelik"] span { font-size: .72rem !important; }
  .tablo-gorev td[data-alan="oncelik"]::before,
  .tablo-gorev td[data-alan="kayit"]::before {
    content: '·' !important; flex: none; max-width: none;
    margin-right: 6px; color: var(--cizgi-parlak);
    font-size: .72rem; padding: 0; text-transform: none; letter-spacing: 0;
  }
  /* Esnek kutuda baştaki normal boşluk yutulur; bölünmez boşluk kullanılır */
  .tablo-gorev td[data-alan="kayit"]::after { content: '\00a0kayıt'; }

  /* Gürültü azaltma: sıradan öncelik ve sıfır kayıt gösterilmez */
  .tablo-gorev td[data-oncelik="normal"],
  .tablo-gorev td[data-oncelik="dusuk"],
  .tablo-gorev td[data-kayit="0"] { display: none; }

  /* --- 2. şerit: başlık (+ tekrar rozeti ve etiketler akış içinde) --- */
  .tablo-gorev td[data-alan="baslik"] {
    order: 7; flex: 1 1 100%;
    display: block; padding: 2px 0 0;
    font-size: .86rem; line-height: 1.3;
  }
  /* Satırın tamamı tıklanabilir: 18px'lik metin satırı yerine tüm kart hedef
     olur. Onay kutusu, durum ve sil düğmesi z-index ile üstte kalır. */
  /* Başlık en çok iki satır: uzun hususlar satırı 3-4 satıra çıkarıp
     listeyi dalgalandırıyordu. Tam metin görev detayında. */
  /* Seçici `tbody` ile özgülleştirildi: yukarıdaki dokunma-hedefi kuralı
     (.tablo td[data-birincil] a) aynı özgüllükte olduğu için display'i
     eziyor, padding'i de kırpma kutusunu 2 satırdan yükseltip üçüncü
     satırın tepesini sızdırıyordu. */
  .tablo-gorev tbody td[data-alan="baslik"] a {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
    padding: 0;
    /* Tek satırlık başlıklarda kutu 18px'de kalıyordu; taban yükseklik
       WCAG 2.5.8 hedefini karşılar, iki satırlıklarda etkisizdir. */
    min-height: 24px;
    font-weight: 600;
  }
  .tablo-gorev tbody td[data-alan="baslik"] a::after {
    content: ''; position: absolute; inset: 0; z-index: 0;
  }
  .tablo-gorev td[data-alan="secim"],
  .tablo-gorev td[data-alan="eylem"],
  .tablo-gorev td[data-alan="durum"] { position: relative; z-index: 1; }

  /* Etiket şeridi: PHP şablonu boşluk/satır sonu bıraktığı için :empty
     tutmuyor ve etiket yokken bile bir satır kutusu açıp 2 satırlık başlık
     sınırının altından üçüncü satır sızdırıyordu. font-size:0 ile boşluklar
     yükseklik üretmez; rozetler kendi ölçüsünü geri alır. */
  .satir-isaretler { display: block; font-size: 0; line-height: 0; }
  .tablo-gorev .mini-rozet {
    vertical-align: baseline;
    font-size: .64rem; line-height: 1.6; margin-top: 3px;
  }
  /* Tekrar periyodu rozeti ("Yıllık", "Dönemlik") mobilde hiç gösterilmez:
     hususların neredeyse tamamı aynı değere sahip olduğu için ayırt edici
     bilgi taşımıyor, buna karşılık her satırda/kartta yer kaplıyor.
     Değer görev detayındaki künyede duruyor.
     Kendi sınıfı var; .mini-etiket görev bağlantısı ve "zorunlu" rozetinde
     de kullanıldığı için genel gizleme yapılmaz. */
  .tekrar-etiket { display: none; }
  .tablo-gorev .mini-rozet { padding: 1px 6px; }

  /* Sil düğmesi her satırda tekrar ettiği için geri planda */
  .tablo-gorev td[data-alan="eylem"] .ikon-btn {
    min-height: 24px; min-width: 26px; font-size: .76rem; padding: 0 4px;
    opacity: .45;
  }

  /* Seçim kutusu WCAG asgari hedefinin altına inmesin (24×24) */
  .tablo-gorev td[data-alan="secim"] input[type="checkbox"] { width: 24px; height: 24px; }

  /* --- Diğer tek kolona inen ızgaralar --- */
  .izgara-2, .duzenle-izgara, .dash-alt, .alan-deger-liste,
  .kategori-kart-izgara, .aksiyon-serit, .rapor-izgara { grid-template-columns: 1fr; }

  .ay-secim-izgara { grid-template-columns: repeat(2, 1fr); }
  .foto-galeri { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }

  /* Kayıt kartı */
  .kayit-ust { flex-wrap: wrap; gap: 8px; }
  .kayit-eylem { margin-left: auto; }

  /* Not kartı */
  .not-alt { flex-wrap: wrap; gap: 6px; }

  /* Sayfa başlığındaki eylem düğmeleri tam genişlik */
  .sayfa-baslik > .btn { flex: 1 1 100%; }
}

/* =====================================================================
   5. Dar telefon — 380px
   ===================================================================== */
@media (max-width: 380px) {
  body { font-size: 14.5px; }
  :root { --icerik-x: 12px; }
  .icerik { padding: var(--icerik-x) calc(var(--icerik-x) + var(--guvenli-sag)) calc(20px + var(--guvenli-alt)) calc(var(--icerik-x) + var(--guvenli-sol)); }
  .kart { padding: 13px; }
  h1 { font-size: 1.15rem; }

  .filtre-cubugu > *, .filtre-grup > * { flex: 1 1 100%; }
  .filtre-grup > .btn { flex: 1 1 calc(50% - 4px); }
  .toplu-cubuk select, .toplu-cubuk .btn { flex: 1 1 100%; }
  .durum-btn { flex: 1 1 100%; }

  .ay-sekmeler { grid-template-columns: repeat(3, 1fr); }
  .tablo td::before { flex-basis: 45%; max-width: 45%; }
  .giris-kutusu { padding: 26px 20px; }
  .halka-yuzde { font-size: 2rem; }
  .plan-ozet-yuzde { font-size: 1.6rem; }
}

/* =====================================================================
   6. Yatay (landscape) telefon — alçak ekranlarda dikey boşlukları kıs
   ===================================================================== */
@media (max-height: 480px) and (orientation: landscape) {
  .modal, .modal-genis { max-height: 96dvh; }
  .modal-genis .modal-form { max-height: 96dvh; }
  .bos-durum { padding: 20px 16px; }
  .grafik-kap { height: 180px; }
}

/* =====================================================================
   7. Gövde kaydırma kilidi — çekmece açıkken arka plan kaymasın
   ===================================================================== */
body.menu-acik { overflow: hidden; }

/* =====================================================================
   8. Yazdırma — rapor çıktısı ve ekran dökümü
   ===================================================================== */
@media print {
  .ust-bar, .yan-menu, .menu-perde, .atlama-baglantisi,
  .filtre-cubugu, .toplu-cubuk, .gorunum-anahtar,
  .sayfalama, .kategori-eylem, .kayit-eylem, .not-eylem,
  .btn, .ikon-btn, .durum-segment, .sekme-basliklar { display: none !important; }

  body { background: #fff; font-size: 11pt; }
  .yerlesim { display: block; }
  .icerik { padding: 0; max-width: none; }
  .kart { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  .gorev-detay, .dash-ust, .dash-alt { display: block; }
  .tablo { font-size: 10pt; }
  a { color: inherit; text-decoration: none; }
}