/* Copyright (c) 2026 Tayfun Şimşek. Tüm hakları saklıdır / All rights reserved. Ayrıntı: LICENSE */
/* Purpose / Amaç: yalnız uygulamaya özgü YERLEŞİM. Renk, boşluk, yazı, yarıçap tasarım belirteçlerinden
   (tasarim/tokens.css) — ham hex/px YOK (§30). Bileşenler tasarim/ui.css'te; burada yeni bileşen çizilmez. */

html, body { margin: 0; min-height: 100%; background: var(--bg); }
#sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.yt input[type="password"]::-ms-reveal { display: none; }      /* KB auth/login-baseline: çift göz */
[hidden] { display: none !important; }                          /* KB auth/login-baseline tuzak 1 */

/* Kabuk */
.shell { min-height: 100vh; }
.brand-link { display: flex; align-items: center; gap: var(--s3); text-decoration: none; }
.brand-mark { width: var(--tap); height: var(--tap); }
.side-org-text { flex: 1; min-width: 0; }
.side-foot-text { flex: 1; min-width: 0; }

/* Giriş */
.login { min-height: 100vh; display: flex; flex-direction: column; background: var(--rail-bg); }
.login-brand { display: grid; gap: var(--s3); padding: var(--s8) var(--s6) var(--s6); color: var(--rail-ink); justify-items: start; }
.login-mark { width: var(--tap-lg); height: var(--tap-lg); }
.login-wm { font-size: var(--fs-3xl); }
.login-tag { color: var(--rail-muted); font-size: var(--fs-md); }
.login-card { flex: 1; background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: var(--s6); }
.login-form { display: grid; gap: var(--s4); max-width: 30rem; margin-inline: auto; }   /* TASARIMA SORU: dar içerik belirteci yok (EKRAN_NOTLARI §17) */
.login-remember { display: flex; gap: var(--s2); align-items: center; min-height: var(--tap); font-size: var(--fs-sm); }
.login-center { text-align: center; }
.login-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--fs-sm); }
.login-rules li { display: flex; gap: var(--s2); align-items: center; }
.kural-ok { color: var(--ok-ink); }
.yt input { font-size: var(--fs-md); }   /* --fs-md = 16 px: iOS odakta yakınlaştırmasın (KB auth/login-baseline) */

/* Pano */
.dash { display: flex; flex-wrap: wrap; gap: var(--s8); align-items: center; }
.dash-num { font-size: var(--fs-4xl); font-weight: var(--fw-bold); }
.dash-text { display: grid; gap: var(--s4); flex: 1 1 18rem; }
.dash-counts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.ring-track--empty { stroke-dasharray: 6 10; }

/* Yükümlülükler */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.obl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.yt .obl-head { all: unset; box-sizing: border-box; display: flex; gap: var(--s3); align-items: center; width: 100%; color: var(--ink);
            min-height: var(--tap); padding: var(--s3) var(--s4); cursor: pointer; }
.yt .obl-head:focus-visible { box-shadow: var(--ring); border-radius: var(--r-md); }   /* all:unset tasarımın odak kuralını siler — belirteçle geri */
.obl-code { color: var(--ink-3); flex: none; }
.obl-text { flex: 1; min-width: 0; }
.obl-body { display: grid; gap: var(--s3); padding: 0 var(--s4) var(--s4); }
.obl-verdict { display: grid; gap: var(--s3); }
.obl-verdict .chip input { accent-color: var(--brand); }

/* Yükümlülük kartı */
.card-head-page { display: grid; gap: var(--s2); justify-items: start; }
.stack { display: grid; gap: var(--s3); }
.card-form { display: grid; gap: var(--s3); }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.ev-text { flex: 1; min-width: 0; display: grid; }
.pick-btn input { position: absolute; opacity: 0; pointer-events: none; }
.pick-btn:has(input:checked) { border-color: var(--brand); color: var(--brand-strong); }

/* Kenar şeridi ve çekmece — dar ekran (KB ui/kenar-seridi-menu-ve-geri; §15 navShell)
   Telefon (≤600): şerit SAĞDA (el tercihiyle solda) · tablet (601–1024): şerit SOLDA · masaüstü: yan menü. */
.rail, [data-scrim] { display: none; }
.side-hand { display: none; }
@media (max-width: 1024px) {
  .shell { display: block; }
  .shell > .side { display: none; }
  .rail { display: flex; position: fixed; z-index: 20; overflow-y: auto; inset-inline-start: 0; inset-inline-end: auto;
          padding-block: calc(var(--s3) + env(safe-area-inset-top)) calc(var(--s4) + env(safe-area-inset-bottom));
          border-inline-start: 0; border-inline-end: thin solid var(--rail-line); touch-action: pan-y; user-select: none; }
  .main { padding-inline-start: var(--rail-w); }
  .rail-btn { text-decoration: none; }
  .rail-back.is-off { opacity: .45; cursor: default; }
  .shell > .side.is-open { display: flex; position: fixed; z-index: 30; inset-block: 0; inset-inline-start: 0;
                           width: min(82vw, var(--side-w)); overflow-y: auto; }
  [data-scrim]:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 25; }
  .side-hand { display: block; }
}
@media (max-width: 600px) {
  .rail { inset-inline-start: auto; inset-inline-end: 0; border-inline-end: 0; border-inline-start: thin solid var(--rail-line); }
  .main { padding-inline-start: 0; padding-inline-end: var(--rail-w); }
  .shell > .side.is-open { inset-inline-start: auto; inset-inline-end: 0; }
  html[data-el="sol"] .rail { inset-inline-start: 0; inset-inline-end: auto; border-inline-start: 0; border-inline-end: thin solid var(--rail-line); }
  html[data-el="sol"] .main { padding-inline-start: var(--rail-w); padding-inline-end: 0; }
  html[data-el="sol"] .shell > .side.is-open { inset-inline-start: 0; inset-inline-end: auto; }
  .page { padding: var(--s4); }
}
.side-hand .btn { color: var(--rail-ink); }   /* koyu zeminde okunur (§15 kontrast) */

/* Izgara taşması: .page bir grid; öğeleri içerik kadar genişleyip ekrandan taşmasın (KB navShell: yatay kaydırma YOK) */
.page > * { min-width: 0; }
.obl { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .yt .obl-head { flex-wrap: wrap; row-gap: var(--s2); }
  .obl-text { flex-basis: 100%; order: 3; }
}

/* ---------- Kapı ekranı (tasarım §9) ---------- */
.gate { display: grid; gap: var(--s3); max-width: 40rem; }
.gate-scan { min-height: calc(var(--tap-lg) + var(--s8)); border-radius: var(--r-xl); font-size: var(--fs-lg); flex-direction: column; gap: var(--s2); }
.gate-camera { display: grid; gap: var(--s2); }
.gate-camera[hidden] { display: none; }
.gate-video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-lg); background: var(--surface-3); }
.gate-result { display: grid; gap: var(--s3); border-color: var(--ok-ink); }
.gate-result.is-warn { border-color: var(--warn); }
.gate-refused { display: grid; gap: var(--s2); border-color: var(--err-ink); }
.gate-who { display: flex; align-items: flex-start; gap: var(--s3); }
.gate-who-text { display: grid; gap: var(--s1); flex: 1; min-width: 0; justify-items: start; }
.gate-who-text b { font-size: var(--fs-md); }
.gate-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.gate-list { list-style: none; margin: 0; padding: var(--s1) var(--s4); }
.gate-list-head { padding-block: var(--s3) var(--s1); margin: 0; }
.gate-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding-block: var(--s3); border-top: thin solid var(--line); }
.gate-row-text { display: grid; min-width: 0; }
.gate-row-text .muted { font-size: var(--fs-xs); }
li.gate-row { grid-template-columns: minmax(0, 1fr) auto; }

/* ---------- Giriş kodum (tasarım §7d) ---------- */
.code-screen { display: grid; gap: var(--s4); justify-items: center; text-align: center; max-width: 26rem; margin-inline: auto; }
.qr-svg { width: min(72vw, 15rem); height: auto; display: block; }
.code-box.is-expired { width: min(72vw, 15rem); height: auto; aspect-ratio: 1; }
.code-time { display: grid; gap: var(--s2); width: 100%; }
.code-left { font-size: var(--fs-3xl); letter-spacing: var(--track-tight); }
.code-bar { width: 100%; height: var(--s2); appearance: none; border: 0; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.code-bar::-webkit-progress-bar { background: var(--surface-3); }
.code-bar::-webkit-progress-value { background: var(--brand); }
.code-bar::-moz-progress-bar { background: var(--brand); }
.code-bar.is-late::-webkit-progress-value { background: var(--warn); }
.code-bar.is-late::-moz-progress-bar { background: var(--warn); }
.code-screen .banner { text-align: start; width: 100%; }
.code-link { font-weight: var(--fw-semi); }

/* ---------- Kartım (tasarım §7d) ---------- */
.my-card { display: grid; gap: var(--s4); max-width: 26rem; margin-inline: auto; }
.my-card-face { border-radius: var(--r-xl); overflow: hidden; display: grid; box-shadow: var(--sh-3); }
.my-card-top { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); background: var(--surface-2); border-bottom: thin solid var(--line); }
.my-card-org { display: grid; line-height: var(--lh-tight); }
.my-card-org .muted { font-size: var(--fs-xs); }
.my-card-body { display: grid; justify-items: center; gap: var(--s4); padding: var(--s6) var(--s4) var(--s5); text-align: center; }
.my-card-photo { border-radius: var(--r-lg); object-fit: cover; }
.my-card-name { display: grid; gap: var(--s1); }
.my-card-name b { font-size: var(--fs-2xl); letter-spacing: var(--track-tight); }
.my-card-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); width: 100%; }
.my-card-fact { display: grid; gap: var(--s1); padding: var(--s3); border-radius: var(--r-md); background: var(--surface-2); }
.my-card-fact .muted { font-size: var(--fs-2xs); }
.my-card-foot { display: flex; justify-content: center; gap: var(--s2); padding: var(--s3); border-top: thin solid var(--line); font-size: var(--fs-2xs); }

/* ---------- Öğrenci ana sayfası ---------- */
.student-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); max-width: 32rem; }
.student-action { flex-direction: column; min-height: calc(var(--tap-lg) * 2); gap: var(--s2); text-align: center; }

/* NEDEN / WHY: ui.css `.yt a` (0,1,1) bağlantı düğmesinde `.btn--primary` (0,1,0) rengini eziyordu → petrol
   zeminde petrol yazı, düğme boş göründü (emülatörde ölçüldü). Tasarıma bildirildi: EKRAN_NOTLARI §17 */
.yt a.btn { text-decoration: none; }
.yt a.btn--primary { color: var(--on-brand); }
.yt a.btn--secondary { color: var(--ink); }

/* ---------- Akşam yoklaması (tasarım §3) ---------- */
.roll-head { display: grid; gap: var(--s3); }
.roll-title { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s2); }
.roll-score { text-align: end; line-height: var(--lh-tight); display: grid; }
.roll-score b { font-size: var(--fs-2xl); letter-spacing: var(--track-tight); }
.roll-score b .muted, .roll-score > .muted { font-size: var(--fs-xs); font-weight: var(--fw-med); }
.roll-counts { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: var(--fs-xs); font-weight: var(--fw-semi); margin: 0; }
.tcol-ok { color: var(--ok-ink); } .tcol-info { color: var(--info-ink); }
.roll-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--s1); }
.roll-line { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.roll-who-text { min-width: 0; }
.roll-tags { display: flex; gap: var(--s2); align-items: center; flex: none; }
.roll-band { padding: var(--s2) var(--s3); font-size: var(--fs-xs); }
.roll-leave { display: flex; gap: var(--s2); align-items: center; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--info-ink); }
.roll-alert { display: flex; gap: var(--s2); align-items: flex-start; margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--err-ink); }
.roll-foot { display: grid; gap: var(--s2); padding-block: var(--s3); position: sticky; bottom: 0; background: var(--bg); }
.roll-foot .hint { text-align: center; }
.roll-row .seg-btn { min-height: var(--tap-lg); }

/* ---------- İzin isteği ve talepler (tasarım §4) ---------- */
.leave-form { display: grid; gap: var(--s3); max-width: 32rem; }
.leave-opts { display: grid; gap: var(--s2); }
.leave-opt-text { display: grid; gap: var(--s1); }
.leave-actions { display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap; }
.leave-list { max-width: 32rem; padding: var(--s1) var(--s4); }
.leave-list-head { padding-block: var(--s3) var(--s1); margin: 0; }
.leave-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding-block: var(--s3); border-top: thin solid var(--line); }
.leave-row-text { display: grid; gap: var(--s1); flex: 1 1 12rem; min-width: 0; justify-items: start; }
.leave-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); max-width: 40rem; }
.leave-item { display: grid; gap: var(--s3); }
.leave-cal { display: grid; gap: var(--s3); max-width: 40rem; margin-top: var(--s6); }

/* ---------- Veli ana sayfası (tasarım §5, D-22) ---------- */
.guardian-card { display: grid; gap: var(--s2); max-width: 32rem; justify-items: start; }
.guardian-card .leave-actions { justify-self: stretch; }
.guardian-state { display: grid; gap: var(--s2); justify-items: start; }
.guardian-state-tag { font-size: var(--fs-lg); padding: var(--s1) var(--s3); }

/* ---------- Kimlik bildirimleri (KBS, Y-067) ---------- */
.kbs-list { max-width: 44rem; }
.kbs-mark { display: grid; gap: var(--s2); flex: 1 1 100%; }

/* ---------- Öğrenci durumu: şu an kim nerede (yönetim) ---------- */
.status-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3); }
.status-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.status-filters select.input { width: auto; }
.status-search { flex: 1 1 14rem; max-width: 22rem; }
.status-group { max-width: 44rem; }
@media print { .status-head .leave-actions, .status-filters { display: none !important; } }

/* ---------- Pano: bugünün kutuları ---------- */
.today-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s3); max-width: 56rem; }
.today-tile { display: grid; gap: var(--s1); padding: var(--s4); color: inherit; text-decoration: none; }
.today-tile > span { color: var(--ink-2); }
.today-tile:hover { border-color: var(--brand); }
.today-tile.is-bad { border-color: var(--err-ink); }
.today-tile > .today-sub { font-size: var(--fs-xs); color: var(--err-ink); font-weight: var(--fw-semi); }

/* ---------- Olay kaydı (tasarım §10) ---------- */
.incident-form { display: grid; gap: var(--s4); max-width: 40rem; }
.incident-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); border: 0; padding: 0; margin: 0; }
.incident-kinds legend { margin-bottom: var(--s2); }
.incident-kind { flex-direction: column; justify-content: center; min-height: calc(var(--tap-lg) * 1.6); text-align: center; gap: var(--s1); }
.incident-person { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.incident-person select.input { width: auto; }
.incident-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s3); }
.incident-list { max-width: 40rem; }
.incident-link { color: inherit; text-decoration: none; }
.incident-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.incident-card { display: grid; gap: var(--s3); justify-items: start; max-width: 40rem; }
.incident-summary-full { white-space: pre-wrap; margin: 0; }
.incident-note { display: grid; gap: var(--s2); }
.incident-search { flex: 1 1 100%; }
.incident-back { justify-self: start; }
.incident-photos { display: flex; flex-wrap: wrap; gap: var(--s2); }
.incident-photo img { width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--r-md); background: var(--surface-2); display: block; }
.incident-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }

/* ---------- Nöbet devri ---------- */
.handover-in, .handover-form { display: grid; gap: var(--s3); max-width: 56rem; justify-items: start; }
.handover-in .btn--block { justify-self: stretch; }
.handover-now { display: grid; gap: var(--s2); }
.handover-note { white-space: pre-wrap; margin: 0; }
.handover-list { max-width: 56rem; }

/* ---------- Hakkında (§32) ---------- */
.about { display: grid; gap: var(--s4); max-width: 40rem; }
.about-wm { font-size: var(--fs-2xl); margin: 0; }
.about-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s4); margin: 0; }
.about-list dt { color: var(--ink-3); }
.about-list dd { margin: 0; }

/* ---------- Memnuniyet anketi (O-048) — tek seri, tek renk (marka); değerler metin ---------- */
.survey-form { display: grid; gap: var(--s3); max-width: 36rem; }
.survey-q { display: grid; gap: var(--s2); margin: 0; }
.survey-q legend { float: left; width: 100%; padding: 0; margin-bottom: var(--s2); }
.survey-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
.survey-btn { min-height: var(--tap-lg); border: thin solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; font-weight: var(--fw-semi); cursor: pointer; }
.survey-btn.is-on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.survey-ends { display: flex; justify-content: space-between; font-size: var(--fs-xs); }
.survey-new, .survey-report { display: grid; gap: var(--s3); max-width: 56rem; }
.survey-list { max-width: 56rem; }
.survey-head, .survey-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(8rem, 1fr) 6rem; gap: var(--s3); align-items: center; }
.survey-head { font-size: var(--fs-xs); }
.survey-row { padding-block: var(--s2); border-top: thin solid var(--line); }
.survey-label { display: grid; gap: var(--s1); justify-items: start; }
.survey-dist { font-size: var(--fs-xs); }
.survey-bar { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); align-items: center; }
.survey-svg { width: 100%; height: var(--s2); }
.survey-track { fill: var(--surface-3); }
.survey-fill { fill: var(--brand); }
.survey-mean { text-align: end; }
.survey-delta { font-size: var(--fs-xs); color: var(--ink-3); }
.survey-comment { margin: 0; white-space: pre-wrap; }
.survey-card { display: flex; align-items: center; gap: var(--s2); }

/* ---------- Yurt kurulumu (D-50): sorular solda, canlı özet sağda (dar ekranda altta) ---------- */
.setup-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: var(--s4); align-items: start; }
.setup-steps { display: grid; gap: var(--s3); }
.setup-step { display: grid; gap: var(--s3); }
.setup-opts { display: grid; gap: var(--s2); }
.setup-summary { display: grid; gap: var(--s3); position: sticky; top: var(--s4); }
.setup-regime { display: grid; gap: var(--s1); justify-items: start; margin: 0; }
.setup-count { display: flex; align-items: baseline; gap: var(--s2); margin: 0; }
.check { width: var(--s5); height: var(--s5); border-radius: var(--r-xs); flex: none; border: thin solid var(--line-strong); background: var(--surface); }
.check.is-on { background: var(--brand); border-color: var(--brand); }
@media (max-width: 1024px) { .setup-grid { grid-template-columns: 1fr; } .setup-summary { position: static; } }

/* ---------- Anket: iki kutuplu 1–5 çubuğu (belirteç --viz-div-*; boşluk --viz-gap) ---------- */
.survey-svg { width: 100%; height: var(--s4); display: block; }
.viz-1 { fill: var(--viz-div-1); } .viz-2 { fill: var(--viz-div-2); } .viz-3 { fill: var(--viz-div-3); }
.viz-4 { fill: var(--viz-div-4); } .viz-5 { fill: var(--viz-div-5); }
.survey-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-xs); color: var(--ink-2); }
.survey-legend span { display: inline-flex; align-items: center; gap: var(--s1); }
.survey-key { width: var(--s3); height: var(--s3); border-radius: var(--r-xs); display: inline-block; }
.viz-key-1 { background: var(--viz-div-1); } .viz-key-2 { background: var(--viz-div-2); } .viz-key-3 { background: var(--viz-div-3); }
.viz-key-4 { background: var(--viz-div-4); } .viz-key-5 { background: var(--viz-div-5); }
.survey-bar { grid-template-columns: 1fr; gap: var(--s1); }
.survey-sat { font-size: var(--fs-sm); }
.survey-findings { display: grid; gap: var(--s2); max-width: 56rem; }
.survey-findings p { margin: 0; }
.tr-svg { width: 100%; height: auto; display: block; }
.tr-grid { stroke: var(--line); stroke-width: 1; }
.tr-axis { fill: var(--ink-3); font-size: var(--fs-xs); }
.tr-pbar { stroke: var(--ink-3); stroke-width: 1; }
.tr-ucl { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 6 4; }
.tr-line { fill: none; stroke: var(--viz-div-1); stroke-width: 2; }
.tr-dot { fill: var(--viz-div-1); stroke: var(--surface); stroke-width: 2; }
.tr-dot.is-hollow { fill: var(--surface); stroke: var(--viz-div-1); }
.tr-dot.is-signal { stroke: var(--ink); stroke-width: 2.5; }
.topic-row { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(6rem, 2fr) 6rem; gap: var(--s3); align-items: center; }
.topic-svg { width: 100%; height: var(--s3); display: block; }
.survey-act { font-size: var(--fs-xs); }
.survey-act-form { display: grid; gap: var(--s2); padding-block: var(--s2); flex: 1 1 100%; }
.login-or { display: flex; align-items: center; gap: var(--s3); color: var(--ink-3); font-size: var(--fs-xs); }
.login-or::before, .login-or::after { content: ""; flex: 1; border-top: thin solid var(--line); }
.survey-auto-on { display: flex; align-items: center; gap: var(--s2); }

/* ---------- Tablet kurulum yönergesi (D-51) ---------- */
.tablet-guide { max-width: 56rem; display: grid; gap: var(--s3); }
.tablet-guide summary { cursor: pointer; display: flex; align-items: center; gap: var(--s2); }
.tablet-guide-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s4); }
.tablet-guide ol { margin: 0; padding-inline-start: var(--s5); display: grid; gap: var(--s1); }

/* ---------- Öz-yoklama: kat tableti, öğrencinin sonucu (O-148) ---------- */
.kiosk-body { background: var(--bg); }
.kiosk { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: var(--s4); padding: var(--s6); text-align: center; }
.kiosk-title { font-size: var(--fs-4xl); letter-spacing: var(--track-tight); margin: 0; }
.kiosk .qr-svg { width: min(70vmin, 30rem); }
.kiosk .code-bar { width: min(70vmin, 30rem); }
.kiosk-code.is-stale { opacity: 0.35; }
.kiosk-hint { font-size: var(--fs-xl); font-weight: var(--fw-semi); margin: 0; }
.kiosk-msg { display: grid; gap: var(--s3); max-width: 32rem; }
/* D-48 karşılıklı kod: QR + ön kamera yan yana (dar tablette alt alta) */
.kiosk-body-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s6); }
.kiosk-qr { display: grid; gap: var(--s2); justify-items: center; }
.kiosk-cam { display: grid; gap: var(--s2); justify-items: center; }
.kiosk-cam video { width: min(40vmin, 18rem); aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-lg); transform: scaleX(-1); background: var(--surface-2); }
.kiosk-result { max-width: 22rem; min-height: 2.5em; font-size: var(--fs-xl); font-weight: var(--fw-semi); margin: 0; }
.kiosk-result.is-ok { color: var(--ok-ink); }
.kiosk-result.is-err { color: var(--err-ink); }
.checkin-proof .qr-svg { width: min(80vw, 22rem); }
.checkin { display: grid; justify-items: center; gap: var(--s3); text-align: center; padding-block: var(--s8); max-width: 26rem; margin-inline: auto; }
.checkin.is-ok .i-xl { color: var(--ok-ink); }
.checkin.is-err .i-xl { color: var(--err-ink); }
.roll-warn { color: var(--warn-ink); }

/* ---------- İzinsiz yokluk dosyası (D-45) ---------- */
.absence-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); max-width: 40rem; }
.absence-step { display: grid; gap: var(--s2); }
.absence-step.is-done { border-color: var(--ok-ink); }
.absence-step-head { display: flex; align-items: center; gap: var(--s3); }
.absence-step .step-dot { display: inline-grid; place-items: center; width: var(--s6); height: var(--s6); border-radius: var(--r-pill); background: var(--surface-3); flex: none; }
.absence-step.is-done .step-dot { background: var(--ok-ink); color: var(--on-brand); }
.absence-outcomes { justify-content: flex-start; }
@media print { .rail, .side, [data-print], .scrim { display: none !important; } .main { padding: 0 !important; } }

/* Öğrenciler + öğrenci kartı (tasarım §7c) */
.student-row { text-decoration: none; color: inherit; display: flex; gap: var(--s3); align-items: center; }
.student-tags { display: flex; flex-wrap: wrap; gap: var(--s1); justify-content: flex-end; }
.scard-head { display: flex; gap: var(--s4); align-items: center; }
.avatar--lg { width: var(--tap-lg); height: var(--tap-lg); font-size: var(--fs-md); }
.scard-kv dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--s2) var(--s4); margin: 0; }
.scard-kv dt { color: var(--ink-2); }
.scard-kv dd { margin: 0; }
.guardian { display: grid; gap: var(--s3); }
.guardian--barred { border: medium solid var(--err-ink); }   /* belirteç yok — anahtar kelime genişlik */
.guardian-head { display: flex; gap: var(--s3); align-items: center; }
.guardian-head .leave-row-text { flex: 1; min-width: 0; }
.perm-row { display: flex; gap: var(--s3); align-items: center; justify-content: space-between; min-height: var(--tap); }
.sees-list { list-style: none; margin: var(--s2) 0; padding: 0; display: grid; gap: var(--s2); }
.sees-list li { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: space-between; }
.guardian-sees summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; font-weight: var(--fw-semi); }
.inline-form { display: grid; gap: var(--s3); }
.check-row { display: flex; gap: var(--s2); align-items: center; min-height: var(--tap); }
@media (max-width: 40rem) { .scard-kv dl { grid-template-columns: 1fr; } .scard-kv dd { margin-bottom: var(--s2); } }

/* Kayıt akışı (tasarım §8) */
.enr-step { display: grid; gap: var(--s3); }
.guardian-mini { border-top: thin solid var(--line); padding-top: var(--s3); display: grid; gap: var(--s2); }

/* Bina ve odalar (tasarım structure) */
.str-layout { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 64rem) { .str-layout { grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); } .str-panel { position: sticky; top: var(--s4); } }
.str-floors { display: grid; gap: var(--s4); }
.str-rooms { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
.str-beds { display: flex; flex-wrap: wrap; gap: var(--s1); }
.str-legend { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: var(--fs-sm); }
.str-legend > span { display: inline-flex; gap: var(--s2); align-items: center; }
.str-panel { display: grid; gap: var(--s3); }
.str-bed .leave-row-text { flex: 1; min-width: 0; }
.str-assign { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.str-assign .input { flex: 1 1 10rem; }

/* Öğrenci belgeleri */
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.doc-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding-bottom: var(--s3); border-bottom: thin solid var(--line); }
.card.doc-list { padding: var(--s4); }
.doc-row:last-child { border-bottom: 0; }
.doc-head { display: flex; gap: var(--s3); align-items: flex-start; justify-content: space-between; }
.leave-cal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s3); margin: 0; padding: var(--s3) var(--s4); }
.facts div { display: grid; gap: var(--s1); }
.facts dt { color: var(--ink-3); font-size: .875rem; }
.facts dd { margin: 0; font-weight: 600; }

/* O-166 acil durum: büyük ve aralıklı düğmeler — panikte yanlış düğmeye basılmasın */
.em-start { display: grid; gap: var(--s4); margin-block: var(--s3); }
.em-start .btn { min-height: calc(var(--tap-lg) * 1.5); }
.em-help { border: medium solid var(--err-ink); }   /* belirteç yok — anahtar kelime genişlik */

/* O-173 tahliye krokisi: görsel + yüzde konumlu işaret (konum CSSOM ile — CSP satır içi stile izin vermez) */
.plan-wrap { position: relative; display: inline-block; max-width: 100%; border: thin solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.plan-img { display: block; max-width: 100%; height: auto; cursor: crosshair; }
.plan-dot { position: absolute; transform: translate(-50%, -50%); padding: var(--s1) var(--s2); border-radius: var(--r-md); background: var(--surface); color: var(--ink); border: thin solid var(--line-strong); font-size: var(--fs-sm); font-weight: var(--fw-semi); pointer-events: none; }
.plan-dot.is-on { background: var(--err-ink); color: var(--surface); border-color: var(--err-ink); }

/* O-167 "izni bitti, dönmedi" çipi — seçili değilken de dikkat çeksin */
.chip--bad:not(.is-on) { border-color: var(--err-ink); color: var(--err-ink); }

/* O-163 elle doğrulama: kod okutma alanı ve istenince açılan resmî fotoğraf */
.roll-scan { display: grid; gap: var(--s2); margin-block: var(--s2); }
.roll-photo { width: calc(var(--tap-lg) * 2); height: auto; border-radius: var(--r-md); border: thin solid var(--line); }

/* Olay kartında PDF belge kutucuğu — fotoğrafla aynı ızgarada */
.incident-doc { display: grid; place-items: center; gap: var(--s1); text-align: center; color: var(--ink); }

/* §20 bildirimler: menüdeki sayaç ve kutudaki okunmamış/kritik satır */
.unread-count { margin-inline-start: auto; }
.unread-count.is-critical { background: var(--err-ink); color: var(--surface); }
.notif.is-unread { border-inline-start: medium solid var(--brand, var(--ink)); }
.notif.is-critical { border-inline-start: medium solid var(--err-ink); }

/* O-164 yoklama duyurusu: katın türü, başlat düğmesi; öğrencinin cevap kartı */
.roll-announce { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-block: var(--s2); }
.roll-notice { border-inline-start: medium solid var(--err-ink); }