/* KocaEdu — tek stil dosyası (CSP: style-src 'self') */
:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --ink: #1c2333;
  --muted: #66708a;
  --line: #e3e7f0;
  --primary: #2451c9;
  --primary-dark: #1b3d99;
  --accent: #0e9f6e;
  --warn: #d97706;
  --bad: #dc2626;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(28, 35, 51, .08), 0 6px 20px rgba(28, 35, 51, .05);
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
}
/* Yaş grubu uyarlaması (emir M2) */
body.band-ilk { font-size: 19px; }
body.band-orta { font-size: 17px; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  background: #101a33;
  color: #fff;
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--shadow);
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 18px; min-height: 58px; flex-wrap: wrap;
}
.brand {
  color: #fff; font-weight: 700; font-size: 1.15rem;
  display: inline-flex; align-items: center; gap: 8px;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(135deg, #4f7cff, #22c55e);
  display: inline-block;
}
.mainnav { display: flex; gap: 4px; flex-wrap: wrap; }
.mainnav a {
  color: #c9d2ea; padding: 8px 12px; border-radius: 8px; font-size: .95rem;
}
.mainnav a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.mainnav a.active { background: rgba(255,255,255,.14); color: #fff; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user-chip { color: #e7ebf7; font-size: .92rem; display: inline-flex; gap: 8px; align-items: center; }
.role-tag {
  background: rgba(255,255,255,.14); border-radius: 20px; padding: 1px 10px; font-size: .75rem;
}

.container { max-width: 1180px; margin: 0 auto; padding: 22px 16px 60px; }
.footer {
  border-top: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: .85rem; padding: 14px 0;
}
.footer .container { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 16px; }

.page-title { font-size: 1.5rem; margin: 6px 0 14px; }
.section-title { font-size: 1.2rem; margin: 26px 0 12px; }
.card-title { font-size: 1.05rem; margin: 0 0 12px; }
.sub-title { margin: 18px 0 8px; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; margin-bottom: 18px;
}
.muted { color: var(--muted); font-size: .93rem; }
code.secret-code { background: #eef1f8; padding: 6px 10px; border-radius: 8px; font-size: 1.05rem; letter-spacing: 1px; }
.code-big {
  font-size: 2rem; letter-spacing: 6px; font-weight: 700; color: var(--primary);
  background: #eef1f8; border-radius: 10px; padding: 10px 18px; display: inline-block;
}

/* Grid */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-2-uneven { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; }
.grid-2 .card { margin-bottom: 0; }
.grid-2-uneven .card { margin-bottom: 0; }
.grid-2 + * { margin-top: 18px; }
@media (max-width: 900px) {
  .grid-2, .grid-2-uneven { grid-template-columns: 1fr; }
  .grid-2 .card, .grid-2-uneven .card { margin-bottom: 18px; }
}
.grid-span-2 { grid-column: span 2; }
@media (max-width: 900px) { .grid-span-2 { grid-column: span 1; } }

/* Metrik kartları */
.metric-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin: 14px 0 20px;
}
.metric {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; text-align: center;
}
.metric-num { display: block; font-size: 1.65rem; font-weight: 700; color: var(--primary); }
.metric-label { color: var(--muted); font-size: .85rem; }

/* Soru bankası özeti — tıklanabilir metrik kartları (details/summary, JS gerekmez) */
.banka-ozet { margin: 0 0 24px; }
.banka-ozet > summary { cursor: pointer; list-style: none; }
.banka-ozet > summary::-webkit-details-marker { display: none; }
.metric-grid-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 6px; }
.metric-tik { transition: border-color .15s, box-shadow .15s; }
.banka-ozet > summary:hover .metric-tik,
.banka-ozet > summary:focus-visible .metric-tik { border-color: var(--primary); }
.banka-ipucu { display: block; text-align: center; color: var(--muted); font-size: .82rem; margin-bottom: 18px; }
.banka-ozet[open] .banka-ipucu::after { content: " (kapatmak için tıklayın)"; }
.banka-sinif { margin: 18px 0 6px; font-size: 1rem; }
.banka-sinif .muted { font-weight: 400; font-size: .85rem; }

/* Formlar */
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: .88rem; color: var(--muted); margin-bottom: 5px; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="date"], input[type="number"], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  font: inherit; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(36, 81, 201, .35); border-color: var(--primary);
}
.check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: .93rem; }
.check input { margin-top: 4px; }
.field-checks { margin-top: 8px; }

/* Butonlar */
.btn {
  display: inline-block; border: 1px solid transparent; border-radius: 9px;
  padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none !important; transition: background .15s ease;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-ghost { background: transparent; color: var(--primary); border-color: var(--line); }
.btn-ghost:hover { background: #eef1f8; }
.btn-warn { background: var(--warn); color: #fff; }
.btn-danger { background: var(--bad); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: .87rem; }
.btn-block { display: block; width: 100%; text-align: center; margin-top: 10px; }

/* Tablolar */
.table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.table th, .table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.table th { color: var(--muted); font-weight: 600; font-size: .84rem; text-transform: uppercase; letter-spacing: .4px; }
.table tr:hover td { background: #f8f9fd; }

/* Rozetler */
.badge {
  display: inline-block; border-radius: 20px; padding: 2px 10px; font-size: .76rem;
  background: #eef1f8; color: var(--muted); font-weight: 600;
}
.badge.ok { background: #d9f4e6; color: #067a46; }
.badge.mid { background: #fdf0d5; color: #92580a; }
.badge.bad { background: #fde2e2; color: #b91c1c; }
.badge.warn { background: #fdf0d5; color: #92580a; }

/* Flash mesajlar */
.flash {
  border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; font-size: .95rem;
  border: 1px solid var(--line); background: var(--surface);
}
.flash-ok { border-color: #b5e6cf; background: #ecfbf3; }
.flash-error { border-color: #f5c2c2; background: #fdf0f0; }
.flash-warn { border-color: #f2d9a6; background: #fdf7ea; }
.flash-info { border-color: #c9d6f5; background: #eef3fd; }

/* Hero */
.hero {
  background: linear-gradient(120deg, #16224a, #2451c9);
  color: #fff; border-radius: 16px; padding: 44px 36px; margin-bottom: 24px;
}
.hero h1 { margin: 0 0 10px; font-size: 2rem; }
.hero p { color: #d5ddf5; max-width: 640px; }
.hero-actions { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.hero .btn-ghost:hover { background: rgba(255,255,255,.12); }

/* Listeler */
.list { list-style: none; margin: 0; padding: 0; }
.list li {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid var(--line);
}
.list li:last-child { border-bottom: none; }
.li-title { font-size: .95rem; }

/* Sınav listesi */
.exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.exam-card { margin-bottom: 0; }
.exam-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88rem; color: var(--muted); margin: 8px 0; }

/* Sınav ekranı */
.exam-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.exam-header .page-title { margin: 0; }
.timer-box { text-align: right; }
.timer-label { display: block; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.timer-value {
  font-size: 1.9rem; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums;
}
.timer-value.low { color: var(--bad); }
.save-indicator { display: block; font-size: .8rem; color: var(--accent); min-height: 18px; }
.exam-layout { display: grid; grid-template-columns: 1fr 230px; gap: 18px; margin-top: 14px; }
@media (max-width: 900px) { .exam-layout { grid-template-columns: 1fr; } }
.exam-side { position: sticky; top: 76px; align-self: start; }
.nav-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.nav-cell {
  display: block; text-align: center; padding: 7px 0; border-radius: 8px;
  background: #eef1f8; color: var(--muted); font-weight: 600; font-size: .9rem;
}
.nav-cell.answered { background: #d9f4e6; color: #067a46; }
.nav-cell:hover { text-decoration: none; filter: brightness(.96); }

.question-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.q-no { font-weight: 700; color: var(--primary); }
.q-type { color: var(--muted); font-size: .85rem; }
.question-body { margin-bottom: 12px; }
.question-img { max-width: 100%; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 12px; }
.options { display: grid; gap: 8px; }
.option {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff;
}
.option:hover { background: #f6f8fd; }
.option.selected { border-color: var(--primary); background: #eef3fd; }
.option input { margin-top: 5px; }
.option-letter {
  background: #eef1f8; border-radius: 8px; padding: 1px 9px; font-weight: 700; font-size: .9rem;
}
.match-list { display: grid; gap: 8px; }
.match-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.match-left { flex: 1 1 240px; }
.match-select { max-width: 320px; }
.exam-actions { margin-top: 16px; }
.exam-actions .muted { margin-top: 8px; }

/* Sonuç ekranı */
.result-question { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.result-question.correct { border-left: 5px solid var(--accent); }
.result-question.wrong { border-left: 5px solid var(--bad); }
.result-question.empty { border-left: 5px solid var(--muted); }
.result-answers { font-size: .95rem; }
.solution { background: #f4f7fe; border-radius: 8px; padding: 10px 14px; margin-top: 8px; }

/* Grafikler (SVG) */
.chart { width: 100%; height: auto; color: var(--primary); }
.chart-line { stroke: currentColor; stroke-width: 2.5; }
.chart-dot { fill: var(--primary); }
.chart-axis { stroke: var(--line); stroke-width: 1; }
.bar-label { fill: var(--ink); font-size: 12px; }
/* Konu haritasında ders adı grup başlığı (bkz. helpers.php svg_bars) */
.bar-group { fill: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.bar-val { fill: var(--muted); font-size: 12px; }
.bar-bg { fill: #edf0f8; }
.bar-fg.ok { fill: var(--accent); }
.bar-fg.mid { fill: var(--warn); }
.bar-fg.bad { fill: var(--bad); }

/* Kimlik kartları */
.auth-card { max-width: 420px; margin: 30px auto; }
.auth-alt { margin-top: 16px; font-size: .92rem; color: var(--muted); }
.totp-secret { margin: 14px 0; }

/* Yönetim/modül formları */
.inline-form { display: inline; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .field { margin-bottom: 0; }


/* --- Veli onayı bekleme bildirimi (öğrenci paneli) ---------------------- */
/* Uyarı tonu: engelleyici değil, bilgilendirici. Çocuk testini çözebiliyor. */
.notice-veli {
  border-left: 4px solid #d98a00;
  background: #fff9ef;
}
.notice-veli .card-title { color: #8a5a00; }
.notice-veli p { margin: .4rem 0; }
.kod-goster {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.5rem;
  letter-spacing: .18em;
  background: #fff;
  border: 1px dashed #d98a00;
  border-radius: 6px;
  padding: .5rem .75rem;
  display: inline-block;
}


/* --- Öğretmen öneri formu ve inceleme kuyruğu -------------------------- */
.sik-satir { display: flex; align-items: center; gap: .5rem; margin: .35rem 0; }
.sik-satir input[type="text"] { flex: 1; }
.sik-harf { font-weight: 600; width: 1.4rem; text-align: center; }
.kural-karti ul { margin: .4rem 0 .6rem 1.1rem; }
.kural-karti li { margin: .2rem 0; }
.inline-form { display: inline; }
.filtre-satiri { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.red-sebebi { background: #fff5f5; color: #8a1f1f; font-size: .92rem; }
.red-formu { margin-top: 1rem; border-top: 1px solid #e6e6e6; padding-top: .8rem; }
.soru-govde { font-size: 1.05rem; }
.sik-listesi { list-style: none; margin: .4rem 0 0; padding: 0; }
.sik-listesi li { padding: .35rem .5rem; border-radius: 4px; }
.sik-listesi li.sik-dogru { background: #f0f9f2; }
.uyari-blok { border-left: 4px solid #d98a00; background: #fff9ef; padding: .6rem .8rem; margin-top: 1rem; border-radius: 4px; }
.uyari-blok ul { margin: .3rem 0 0 1.1rem; }
.table-wrap { overflow-x: auto; }

/* ---- Demo (tanıtım) hesabı üst bandı ---- */
.demobar{background:#1f2937;color:#f9fafb;font-size:.8125rem}
.demobar-inner{max-width:1200px;margin:0 auto;padding:.45rem 1rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.demobar strong{background:#f59e0b;color:#1f2937;border-radius:.25rem;padding:.1rem .4rem;letter-spacing:.06em;font-size:.6875rem}
.demobar a{color:#e5e7eb;text-decoration:none;border:1px solid #4b5563;border-radius:.25rem;padding:.1rem .5rem}
.demobar a:hover{background:#374151}
.demobar a.active{background:#f9fafb;color:#1f2937;border-color:#f9fafb}
.demobar-note{margin-left:auto;color:#9ca3af}
@media (max-width:640px){.demobar-note{margin-left:0;flex-basis:100%}}

/* ---- Şifre göster/gizle (assets/js/sifre.js) ---- */
.sifre-sarmal{position:relative;display:block}
.sifre-sarmal input{width:100%;padding-right:2.5rem}
.sifre-goz{position:absolute;top:50%;right:.25rem;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;padding:0;border:0;border-radius:.25rem;
  background:none;color:#6b7280;cursor:pointer}
.sifre-goz:hover{color:#111827;background:#f3f4f6}
.sifre-goz:focus-visible{outline:2px solid #2563eb;outline-offset:1px}
.sifre-goz svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sifre-goz[aria-pressed="true"]{color:#2563eb}

/* ---- Veli panosu (app/views/parent/dashboard.php) ---- */
.veli-kart { margin-bottom: 1rem; }
.veli-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.veli-bas .card-title { margin: 0 0 .15rem; }
.veli-satir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 1.1rem 0 .25rem; }
@media (max-width: 900px) { .veli-satir { grid-template-columns: 1fr; } }
.veli-blok { min-width: 0; }
.blok-bas { margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.blok-ozet { margin: .35rem 0 0; font-size: .8125rem; color: var(--ink); }
.small { font-size: .75rem; }
.iyi { color: var(--accent); }

.chart-hafta { max-width: 340px; }
.hafta-bg { fill: #edf0f8; }
.hafta-fg { fill: var(--primary); }
.hafta-gun { fill: var(--muted); font-size: 10px; text-anchor: middle; }
.hafta-gun.dolu { fill: var(--ink); font-weight: 600; }

.zayif-liste, .son-liste { list-style: none; margin: 0; padding: 0; }
.zayif-liste li { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  padding: .4rem 0; border-bottom: 1px solid var(--line); }
.zayif-liste li:last-child { border-bottom: 0; }
.zayif-ad { display: flex; flex-direction: column; min-width: 0; font-size: .875rem; }
.zayif-ders { font-size: .6875rem; color: var(--muted); }
.zayif-pct { font-weight: 700; font-size: .875rem; white-space: nowrap; }
.zayif-pct.bad { color: var(--bad); }
.zayif-pct.mid { color: var(--warn); }

.son-liste li { display: grid; grid-template-columns: 1fr auto; gap: .1rem .5rem;
  padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .8125rem; }
.son-liste li:last-child { border-bottom: 0; }
.son-ders { font-weight: 600; }
.son-tarih, .son-net { font-size: .6875rem; color: var(--muted); }
.son-net { text-align: right; }

.veli-alt { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.metric-delta { display: block; font-size: .6875rem; font-weight: 600; margin-top: .15rem; }
.metric-delta.up { color: var(--accent); }
.metric-delta.down { color: var(--bad); }

/* ---- Öğrenci paneli: "Şimdi buraya bak" önerisi ---- */
.oneri-kart { border-left: 4px solid var(--primary); }
.oneri-ic { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.oneri-bas { margin: 0 0 .2rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.oneri-konu { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.oneri-alt { margin: .25rem 0 0; font-size: .8125rem; color: var(--muted); }
.oneri-digerleri { margin: .7rem 0 0; padding-top: .6rem; border-top: 1px solid var(--line);
  font-size: .75rem; color: var(--muted); }
.inline-form { display: inline; margin: 0; }

/* ---- Dışa aktarma satırı ---- */
.disari { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .9rem 0 0; }

/* ---- Yazdırma (PDF yerine tarayıcıdan yazdır) ----
   Projede PDF kütüphanesi yok ve Composer kullanılmıyor. Yazdırmaya göre
   biçimlenmiş bir sayfa + tarayıcının "PDF olarak kaydet" seçeneği, yarım
   yamalak bir PDF üreticisinden iyi sonuç veriyor. Ekranda işe yarayan ama
   kâğıtta yeri boşa harcayan şeyler burada gizleniyor. */
@media print {
  .topbar, .demobar, .footer, .disari, .btn, form, .flash { display: none !important; }
  body { background: #fff; }
  .card { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; margin-bottom: 10pt; }
  .page-title { font-size: 16pt; }
  .card-title { font-size: 12pt; }
  table { font-size: 9pt; }
  a[href]::after { content: ""; }            /* URL'leri yazdırmaya basma */
  .chart { max-width: 420px; }
}

/* ---- Süzgeç satırı ve sayfalama ---- */
.filtre-satir { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; margin: 0 0 .8rem; }
.filtre-satir .field { margin: 0; }
.sayfalar { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; }
.sayfalar a:not(.btn) { padding: .1rem .35rem; }
.sayfa-simdi { padding: .1rem .35rem; border-radius: .25rem; background: var(--primary); color: #fff; }

/* Personel listelerinde pasif hesap satırı: silinmiş gibi görünmemeli ama
   dikkat de çekmemeli — soluk, üstü çizili değil. */
.satir-pasif { opacity: .55; }

/* Öğrenci vitrini başlığı: ad solda, panoya dönüş sağda. */
.vitrin-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vitrin-bas .page-title { margin: 0 0 .15rem; }
.zayif-pct.ok { color: var(--ok, #157f3d); }

/* Telif satırı: footer üç parçalı olduğu için (ad · KVKK · telif) telif
   sağa yerleşiyor; dar ekranda container zaten sarıyor. */
.footer-telif { margin-left: auto; }
.footer-telif a { text-decoration: underline; }

/* Ders kartları: testler sayfasının birinci kademesi. Kart bir bağlantı
   olduğu için tamamı tıklanabilir — küçük bir metne nişan almak gerekmiyor. */
.ders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.ders-kart { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem;
  background: var(--card, #fff); border: 1px solid var(--line, #e3e6ea); border-radius: .5rem;
  text-decoration: none; color: inherit; }
.ders-kart:hover { border-color: var(--primary, #1d63c8); }
.ders-ad { font-weight: 600; font-size: 1.05rem; }
.ders-sayi { color: var(--muted, #6b7280); font-size: .9rem; }
.ders-alt { display: flex; gap: .3rem; flex-wrap: wrap; }
.ders-ort { color: var(--muted, #6b7280); font-size: .85rem; }
.kart-uyari { border-left: 4px solid var(--warn, #b7791f); }

/* Gelişim eğrisi ve süzgeçle seçili satır. */
.trend { display: block; max-width: 100%; margin: .2rem 0 .4rem; }
.satir-secili { background: var(--secili, #f3f7fd); }

/* Konu haritası: her ders kendi bloğunda, başlığında oranı ve seviyesi. */
.harita-ders { padding: .6rem 0; border-top: 1px solid var(--line, #e3e6ea); }
.harita-ders:first-of-type { border-top: 0; }
.harita-bas { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.harita-ad { margin: 0; font-size: 1rem; }
.harita-oran { display: flex; align-items: baseline; gap: .4rem; }

/* Bozuk (sorusuz) test satırı ve toplu işlem şeridi. */
.satir-bozuk { background: var(--bad-bg, #fdf3f3); }
.toplu-satir { align-items: center; gap: .5rem; margin-bottom: .5rem; }
.satir-islem { white-space: nowrap; }

/* Hesap ekranları: dikey form ve özet listesi. */
.form-dikey { display: flex; flex-direction: column; gap: .6rem; max-width: 26rem; }
.form-dikey .field { margin: 0; }
.ozet-liste { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem; margin: 0; }
.ozet-liste dt { color: var(--muted, #6b7280); }
.ozet-liste dd { margin: 0; }
.sifre-gosterim code { font-size: 1.15rem; letter-spacing: .04em; padding: .2rem .4rem;
  background: var(--card2, #f6f8fa); border-radius: .25rem; }
a.user-chip { text-decoration: none; color: inherit; }
a.user-chip:hover { text-decoration: underline; }

/* Duyurular: öğrenci ve veli panosunda. Kart sol kenarı vurgulu — panelin
   geri kalanı sayı, bu ise bir insandan gelen haber. */
.duyuru-kart { border-left: 4px solid var(--primary, #1d63c8); }
.duyuru-veli { padding: .6rem .9rem; margin: .4rem 0 .8rem; background: var(--card2, #f6f8fa); border-radius: .35rem; }
.duyuru + .duyuru { border-top: 1px solid var(--line, #e3e6ea); margin-top: .6rem; padding-top: .6rem; }
.duyuru-bas { margin: 0 0 .2rem; font-size: 1rem; }
.duyuru-metin { margin: 0 0 .25rem; }
.onay-satir { display: inline-flex; align-items: center; gap: .3rem; margin-right: .8rem; }

/* DEMO şeridi: her sayfanın en üstünde, karıştırmayı imkânsız kılacak kadar
   belirgin ama içeriği bastırmayacak kadar ince. */
.demo-serit { background: #7c2d12; color: #fff; padding: .45rem 16px; font-size: .9rem; text-align: center; }
.demo-serit a { color: #fde68a; }

/* =====================================================================
   MOBİL — 640px ve altı
   =====================================================================
   NİYE SONRADAN EKLENDİ (dürüst not): geliştirme boyunca ekranlar yalnızca
   masaüstü tarayıcıda gezildi ve "çalışıyor" denildi. Oysa öğrencinin
   çoğunluğu bu siteye TELEFONDAN girecek; yanlış ortamda sınamak, sınamamakla
   aynı şey. Canlıya çıktıktan sonra ortaya çıktı.
   
   Buradaki kurallar üç soruna bakıyor:
     1. Çok sütunlu tablolar telefonda taşıyor (sayfayı yana kaydırıyor).
     2. Üst çubuk (marka + menü + hesap + çıkış) tek satıra sığmıyor.
     3. Dokunma hedefleri küçük — 44px altı düğme parmakla ıskalanıyor.
   ===================================================================== */

/* 1) TABLOLAR — hepsi yatay kaydırılabilir olsun.
   .table-wrap bazı görünümlerde vardı, bazılarında yoktu; unutulan yerde
   sayfanın tamamı yana kayıyordu. Tabloyu doğrudan hedeflemek, sarmalayıcıyı
   koymayı unutan her görünümü de kurtarıyor. */
.table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (min-width: 641px) { .table { display: table; } }

@media (max-width: 640px) {
  .container { padding: 14px 12px 40px; }

  /* 2) ÜST ÇUBUK: marka solda, hesap/çıkış sağda, menü alt satırda tam genişlik */
  .topbar-inner { gap: 8px; padding: 8px 12px; min-height: 0; }
  .brand { font-size: 1.05rem; }
  .topbar-right { gap: 6px; }
  .mainnav {
    order: 3; flex-basis: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap; padding-bottom: 2px;
  }
  .mainnav a { white-space: nowrap; padding: 8px 10px; font-size: .9rem; }
  /* Rol etiketi telefonda yer kaplıyor, ad zaten yazıyor */
  .role-tag { display: none; }
  .user-chip { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* 3) DOKUNMA HEDEFLERİ: parmakla ıskalanmayacak yükseklik */
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 38px; padding: 8px 12px; }
  .table td .btn, .satir-islem .btn { min-height: 34px; }

  /* Ölçüm kartları: telefonda iki sütun, tek sütun çok uzun sayfa yapıyor */
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 14px; }
  .metric { padding: 12px 8px; }
  .metric-num { font-size: 1.3rem; }
  .metric-label { font-size: .78rem; }

  /* Kartlar ve başlıklar */
  .card { padding: 14px 12px; }
  .page-title { font-size: 1.35rem; }
  .card-title { font-size: 1.02rem; }

  /* Test kartları ve ders kartları tek sütun */
  .exam-grid { grid-template-columns: 1fr; gap: 12px; }
  .ders-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .ders-kart { padding: .7rem .8rem; }
  .ders-ad { font-size: .98rem; }

  /* Süzgeç satırı: alanlar tam genişlik, yan yana sıkışmasın */
  .filtre-satir, .filtre-satiri, .toolbar { gap: .5rem; }
  .filtre-satir .field, .toolbar .field { flex-basis: 100%; }
  .filtre-satir select, .filtre-satir input,
  .toolbar select, .toolbar input { width: 100%; min-height: 40px; }
  .form-dikey { max-width: 100%; }

  /* Sınav çözme ekranı: soru gezinme ızgarası 5 yerine 6 sütun,
     dokunma hedefi büyüsün */
  .nav-grid { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .nav-cell { padding: 10px 0; font-size: .9rem; }

  /* Konu haritası ve özet listeleri */
  .ozet-liste { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .ozet-liste dt { margin-top: .4rem; font-size: .82rem; }
  .harita-bas { gap: .3rem; }

  /* Footer tek sütun */
  .footer .container { flex-direction: column; gap: 6px; }
  .footer-telif { margin-left: 0; }

  /* SVG grafikler: genişliği kutuya sığdır */
  .chart, .trend, svg.chart-hafta { max-width: 100%; height: auto; }
}

/* 360px altı (küçük telefonlar): ölçüm kartları tek sütun */
@media (max-width: 380px) {
  .metric-grid, .ders-grid { grid-template-columns: 1fr; }
}