/* Günlük Denetim — arayüz taslağı. Sıcak ve sakin yön.
   Kurallar: gndz-tasarim-anayasa (ışıma yok, açık gri metin yok, tek kenar kalın renkli border yok).
   Token değerleri tasarim/design_system.md ile birebir tutulur (qa.py karşılaştırır). */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("../fonts/nunitosans.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }

:root {
  /* zemin ve yüzey: ton merdiveni */
  --kagit: #F3ECE1;
  --kagit-2: #EAE0D0;
  --kart: #FFFCF7;
  --cizgi: #DDD1BF;
  --sinir: #8C7B65;
  /* metin: daima koyu */
  --ink: #1A1714;
  --text: #2A2520;
  --dim: #3D362E;
  --beyaz: #FFFFFF;
  /* tek vurgu */
  --toprak: #7A4426;
  --toprak-koyu: #5E3219;
  /* anlam: puan (yalnız puan için) */
  --yesil: #2F6B3F;
  --sari: #E8B02E;
  --kirmizi: #C0392B;
  /* anlam zeminleri: yalnız puan/durum yüzeyleri; üzerinde daima koyu metin */
  --yesil-zemin: #E4F0E6;
  --yesil-zemin-2: #D2E6D6;
  --kirmizi-zemin: #FBE8E4;
  --kirmizi-zemin-2: #F6D3CD;
  --sari-zemin: #FBF0CE;
  --sari-koyu: #8A5F00;
  --kirmizi-koyu: #9B2C20;
  /* tipografi */
  --f-baslik: "Fraunces", Georgia, "Times New Roman", serif;
  --f-govde: "Nunito Sans", system-ui, "Segoe UI", Roboto, sans-serif;
  /* aralık (4px taban) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s14: 56px;
  /* yarıçap: rozet < kontrol < kart < sayfa */
  --r-rozet: 6px; --r-kontrol: 12px; --r-kart: 16px; --r-sayfa: 24px;
  /* derinlik: nötr, ışımasız */
  --gol: 0 4px 18px -12px rgba(26, 23, 20, .12);
  /* hareket */
  --sure-hizli: 150ms; --sure: 250ms; --ease: cubic-bezier(.16, 1, .3, 1);
  --ust-yukseklik: 56px;
  --ray-genislik: 264px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; scroll-padding-top: 128px; }
body {
  margin: 0; min-height: 100dvh; background: var(--kagit); color: var(--text);
  font: 400 1rem/1.5 var(--f-govde); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--f-baslik); color: var(--ink); font-weight: 600; line-height: 1.15; letter-spacing: -.005em; }
h1 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem); }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
a { color: var(--ink); }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: var(--s4); top: -64px; z-index: 100; background: var(--ink); color: var(--beyaz); padding: var(--s3) var(--s4); border-radius: var(--r-kontrol); }
.atla:focus { top: var(--s2); }

.ik { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ik--k { width: 1.5em; height: 1.5em; }
.ik--b { width: 2em; height: 2em; }

/* ---------- Kabuk ---------- */
.kabuk { min-height: 100dvh; display: flex; flex-direction: column; }
.ray { display: none; }
.ana { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ust {
  position: sticky; top: 0; z-index: 20; height: var(--ust-yukseklik); background: var(--kagit);
  border-bottom: 1px solid var(--cizgi); display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s4);
}
.ust-marka { display: flex; align-items: center; gap: var(--s2); min-height: 44px; font: 600 1.125rem/1 var(--f-baslik); color: var(--ink); text-decoration: none; }
.ust-sag { display: flex; align-items: center; gap: var(--s2); }
.kisi { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; color: var(--ink); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--beyaz); display: inline-grid; place-items: center; font: 700 .9375rem/1 var(--f-govde); flex: none; }
.ikon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; background: transparent; border: 0; border-radius: var(--r-kontrol); color: var(--ink); }
.ikon-btn:hover { background: var(--kagit-2); }

main { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: var(--s5) var(--s4) 112px; outline: none; }
.alt-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--kart); border-top: 1px solid var(--cizgi);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding-bottom: env(safe-area-inset-bottom);
}
.alt-nav a {
  min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: .875rem; font-weight: 700; color: var(--dim); text-decoration: none;
}
.alt-nav .ik-kap { display: grid; place-items: center; width: 52px; height: 28px; border-radius: 999px; transition: background var(--sure-hizli) ease, color var(--sure-hizli) ease; }
.alt-nav a[aria-current="page"] { color: var(--ink); }
.alt-nav a[aria-current="page"] .ik-kap { background: var(--ink); color: var(--beyaz); }
.kabuk--form .alt-nav { display: none; }
.kabuk--giris .alt-nav, .kabuk--giris .ust { display: none; }

/* ---------- Bileşenler ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s5);
  border-radius: var(--r-kontrol); border: 1.5px solid transparent; font-weight: 800; font-size: 1rem; text-decoration: none;
  transition: background var(--sure-hizli) ease, border-color var(--sure-hizli) ease, transform var(--sure-hizli) ease;
}
.btn:active { transform: translateY(1px); }
.btn--birincil { background: var(--toprak); color: var(--beyaz); }
.btn--birincil:hover { background: var(--toprak-koyu); }
.btn--ikincil { background: var(--kart); color: var(--ink); border-color: var(--sinir); }
.btn--ikincil:hover { background: var(--kagit-2); }
.btn--hayalet { background: transparent; color: var(--ink); padding: 0 var(--s3); min-height: 44px; }
.btn--hayalet:hover { background: var(--kagit-2); }
.btn--tam { width: 100%; }
.btn[disabled] { opacity: 1; background: var(--kagit-2); color: var(--dim); border-color: var(--cizgi); cursor: not-allowed; }

.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-kart); padding: var(--s5); }
.kart > h2 { margin-bottom: var(--s4); }
.kart--koyu { background: var(--text); border-color: var(--text); color: var(--beyaz); }
.kart--koyu h2 { color: var(--beyaz); }
.yigin { display: grid; gap: var(--s4); }
.yigin--b { gap: var(--s6); }
.izgara-2 { display: grid; gap: var(--s4); }

.rozet {
  display: inline-flex; align-items: center; gap: var(--s1); min-height: 26px; padding: 0 var(--s2);
  border-radius: var(--r-rozet); font-size: .875rem; font-weight: 800; line-height: 1; white-space: nowrap;
}
.rozet .ik { width: 1.1em; height: 1.1em; }
.rozet--yesil { background: var(--yesil); color: var(--beyaz); }
.rozet--sari { background: var(--sari); color: var(--ink); }
.rozet--kirmizi { background: var(--kirmizi); color: var(--beyaz); }
.rozet--kritik { background: var(--ink); color: var(--beyaz); }
.rozet--sade { background: var(--kagit-2); color: var(--ink); border: 1px solid var(--cizgi); }

.ust-yol { margin-bottom: var(--s3); }
.ust-yol a { display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; font-weight: 700; text-decoration: none; }
.sayfa-baslik { margin-bottom: var(--s5); }
.sayfa-baslik p { margin-top: var(--s2); color: var(--dim); }
.etiket { font-size: .875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.ornek-not { margin-top: var(--s8); font-size: .875rem; color: var(--dim); display: flex; gap: var(--s2); align-items: flex-start; }
.ornek-not .ik { margin-top: 2px; }

/* ilerleme ve çubuk */
.ilerleme { height: 8px; border-radius: 999px; background: var(--kagit-2); overflow: hidden; }
.ilerleme > span, .bar > span { display: block; height: 100%; border-radius: 999px; background: var(--ink); }
.bar { height: 8px; border-radius: 999px; background: var(--kagit-2); overflow: hidden; }
.bar--yesil > span { background: var(--yesil); }
.bar--sari > span { background: var(--sari); }
.bar--kirmizi > span { background: var(--kirmizi); }
.bar--ink > span { background: var(--ink); }
html[data-hareket] .ilerleme > span, html[data-hareket] .bar > span { transition: width var(--sure) var(--ease); }

/* ---------- Giriş ---------- */
.giris-sayfa { min-height: 100dvh; display: grid; place-items: center; padding: var(--s6) var(--s4); }
.giris-kart { width: 100%; max-width: 420px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-sayfa); padding: var(--s8) var(--s6); box-shadow: var(--gol); }
.giris-marka { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s6); }
.giris-marka .rozet-kare { width: 48px; height: 48px; border-radius: var(--r-kontrol); background: var(--toprak); color: var(--beyaz); display: grid; place-items: center; }
.giris-marka h1 { font-size: 1.75rem; }
.giris-marka p { color: var(--dim); font-size: .9375rem; }
.alan { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.alan label { font-weight: 800; color: var(--ink); }
.girdi, .metin-alan {
  width: 100%; min-height: 52px; padding: 0 var(--s4); background: var(--kart); border: 1.5px solid var(--sinir);
  border-radius: var(--r-kontrol); font-size: 1rem; color: var(--ink);
}
.metin-alan { padding: var(--s3) var(--s4); min-height: 88px; resize: vertical; line-height: 1.4; }
.girdi::placeholder, .metin-alan::placeholder { color: var(--dim); opacity: 1; }
.girdi:focus, .metin-alan:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.giris-alt { margin-top: var(--s5); font-size: .875rem; color: var(--dim); display: flex; gap: var(--s2); }

/* ---------- Bugün ---------- */
.selam h1 { margin-bottom: var(--s1); }
.selam p { color: var(--dim); }
.form-kart { display: grid; gap: var(--s4); }
.form-kart-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.form-kart .say { font: 600 2.25rem/1 var(--f-baslik); color: var(--ink); }
.form-kart .say small { font: 700 1rem/1 var(--f-govde); color: var(--dim); }
.ekip { display: grid; }
.ekip li { border-top: 1px solid var(--cizgi); }
.ekip li:first-child { border-top: 0; }
.ekip .satir { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3); min-height: 60px; text-decoration: none; color: inherit; border-radius: var(--r-kontrol); }
.ekip a.satir:hover { background: var(--kagit-2); }
.ekip .ad { font-weight: 800; color: var(--ink); }
.ekip .alt { font-size: .875rem; color: var(--dim); }
.kisi small { display: block; font-size: .875rem; font-weight: 700; color: var(--dim); line-height: 1.2; }
.seri { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s2); }
.seri-gun { display: grid; justify-items: center; gap: var(--s1); padding: var(--s2) 0; border-radius: var(--r-kontrol); font-size: .875rem; color: var(--ink); }
.seri-gun .nokta { width: 100%; max-width: 44px; aspect-ratio: 1; border-radius: var(--r-kontrol); display: grid; place-items: center; font-weight: 800; background: var(--kagit-2); border: 1px solid var(--cizgi); }
.nokta--yesil { background: var(--yesil) !important; color: var(--beyaz); border-color: var(--yesil) !important; }
.nokta--sari { background: var(--sari) !important; color: var(--ink); border-color: var(--sari) !important; }
.nokta--kirmizi { background: var(--kirmizi) !important; color: var(--beyaz); border-color: var(--kirmizi) !important; }
.bant { display: flex; gap: var(--s3); align-items: flex-start; background: var(--kagit-2); border: 1px solid var(--cizgi); border-radius: var(--r-kart); padding: var(--s4); }
.bant p { flex: 1; color: var(--text); }
.bant a { font-weight: 800; }

/* ---------- Form ---------- */
.form-yerlesim { display: block; }
.birimler-yan {
  position: sticky; top: var(--ust-yukseklik); z-index: 15; margin: 0 calc(var(--s4) * -1) var(--s4); padding: var(--s2) var(--s4);
  background: var(--kagit); border-bottom: 1px solid var(--cizgi); display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none;
}
.birimler-yan::-webkit-scrollbar { display: none; }
.birim-chip {
  flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: var(--s2); padding: 0 var(--s4);
  border-radius: 999px; border: 1.5px solid var(--sinir); background: var(--kart); color: var(--ink); font-weight: 800; text-decoration: none; white-space: nowrap;
  transition: background var(--sure-hizli) ease, color var(--sure-hizli) ease;
}
.birim-chip .say { font-weight: 700; font-size: .875rem; }
.birim-chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--beyaz); }
.birim-chip--tam .ik { color: var(--yesil); }
.birim-chip[aria-current="true"].birim-chip--tam .ik { color: var(--beyaz); }
.form-ust { margin-bottom: var(--s4); }
.form-ust p { margin-top: var(--s2); color: var(--dim); }
.birim { margin-bottom: var(--s8); scroll-margin-top: 136px; }
.birim-baslik { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s3); }
.birim-baslik .no { font: 600 1rem/1 var(--f-baslik); color: var(--toprak); }
.birim-baslik .say { margin-left: auto; font-weight: 800; color: var(--dim); font-size: .9375rem; }
.madde { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-kart); padding: var(--s4); margin-bottom: var(--s3); display: grid; gap: var(--s3); scroll-margin-top: 140px; }
.madde-baslik { display: flex; gap: var(--s3); justify-content: space-between; align-items: flex-start; }
.madde-baslik h3 { font-family: var(--f-govde); font-size: 1.125rem; font-weight: 800; line-height: 1.3; color: var(--ink); }
.madde-baslik .rozet { margin-top: 2px; }
.cevap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.cvp {
  min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  border: 1.5px solid var(--sinir); background: var(--kart); color: var(--ink); border-radius: var(--r-kontrol);
  font-weight: 800; font-size: 1.0625rem;
  transition: background var(--sure-hizli) ease, border-color var(--sure-hizli) ease, color var(--sure-hizli) ease, transform var(--sure-hizli) ease;
}
.cvp:hover { background: var(--kagit-2); }
.cvp:active { transform: translateY(1px); }
.cvp--evet[aria-pressed="true"] { background: var(--yesil); border-color: var(--yesil); color: var(--beyaz); }
.cvp--hayir[aria-pressed="true"] { background: var(--kirmizi); border-color: var(--kirmizi); color: var(--beyaz); }
.cvp--yok { grid-column: 1 / -1; min-height: 44px; font-size: .9375rem; font-weight: 700; }
.cvp--yok[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--beyaz); }
.foto-satir { position: relative; display: flex; align-items: center; gap: var(--s3); }
.gizli-girdi { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.foto-ekle {
  flex: 1; min-height: 64px; display: flex; align-items: center; gap: var(--s3); padding: var(--s2); border-radius: var(--r-kontrol);
  border: 1.5px dashed var(--sinir); background: var(--kart); cursor: pointer; color: var(--ink);
}
.foto-ekle:hover { background: var(--kagit-2); }
.gizli-girdi:focus-visible + .foto-ekle { outline: 2px solid var(--ink); outline-offset: 2px; }
.foto-kutu {
  width: 48px; height: 48px; flex: none; border-radius: var(--r-rozet); display: grid; place-items: center; overflow: hidden;
  background: repeating-linear-gradient(45deg, var(--cizgi) 0 1px, transparent 1px 8px), var(--kagit); border: 1px solid var(--cizgi); color: var(--ink);
}
.foto-kutu img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-metin { display: grid; line-height: 1.25; }
.foto-metin strong { font-weight: 800; }
.foto-metin span { font-size: .875rem; color: var(--dim); }
.foto-sil { min-height: 44px; min-width: 44px; display: inline-grid; place-items: center; border: 0; background: transparent; border-radius: var(--r-kontrol); color: var(--ink); }
.foto-sil:hover { background: var(--kagit-2); }
.not-alan { display: grid; gap: var(--s2); }
.not-alan label { font-weight: 800; color: var(--ink); font-size: .9375rem; }
.madde--eksik { outline: 2px solid var(--ink); outline-offset: 2px; }

.form-son { margin-top: var(--s6); }
.form-son .kart { display: grid; gap: var(--s4); }
.alt-cubuk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--kart); border-top: 1px solid var(--cizgi); padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); display: grid; gap: var(--s3); }
.alt-cubuk-ic { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); max-width: 720px; width: 100%; margin: 0 auto; }
.alt-cubuk-ic p { font-weight: 700; color: var(--ink); }
.alt-cubuk-ic p strong { font: 600 1.375rem/1 var(--f-baslik); }
.alt-cubuk .ilerleme { max-width: 720px; width: 100%; margin: 0 auto; }
.kaydedildi { display: inline-flex; gap: var(--s1); align-items: center; font-size: .875rem; color: var(--dim); font-weight: 700; }

/* ---------- Sonuç ---------- */
.karne { border-radius: var(--r-kart); padding: var(--s6); display: grid; gap: var(--s3); }
.karne--yesil { background: var(--yesil); color: var(--beyaz); }
.karne--sari { background: var(--sari); color: var(--ink); }
.karne--kirmizi { background: var(--kirmizi); color: var(--beyaz); }
.karne-ust { display: flex; align-items: center; gap: var(--s2); font-weight: 800; font-size: 1.0625rem; }
.karne-yuzde { font: 600 clamp(3.5rem, 3rem + 4vw, 5rem)/1 var(--f-baslik); }
.karne-yuzde small { font: 800 1.5rem/1 var(--f-govde); }
.karne p { font-size: 1.0625rem; }
.uyari-kutu { display: flex; gap: var(--s3); align-items: flex-start; border: 1.5px solid var(--ink); border-radius: var(--r-kart); padding: var(--s4); background: var(--kart); color: var(--ink); }
.uyari-kutu strong { display: block; }
.birim-tablo { width: 100%; border-collapse: collapse; }
.birim-tablo th { text-align: left; font-size: .875rem; font-weight: 800; color: var(--dim); padding: 0 0 var(--s2); }
.birim-tablo td { padding: var(--s3) 0; border-top: 1px solid var(--cizgi); vertical-align: middle; }
.birim-tablo th:not(:first-child), .birim-tablo td:not(:first-child) { text-align: right; padding-left: var(--s3); white-space: nowrap; vertical-align: top; padding-top: var(--s3); }
.birim-tablo th:not(:first-child) { padding-top: 0; vertical-align: bottom; }
.birim-tablo td:first-child { min-width: 0; }
.birim-tablo .b-ad { font-weight: 800; color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.birim-tablo .b-oran { display: block; font-size: .875rem; font-weight: 700; color: var(--dim); margin: 2px 0 var(--s2); }
.yorum { display: grid; gap: var(--s3); }
.yorum p { color: var(--text); }
.yorum-etiket { display: inline-flex; margin-bottom: var(--s3); }
.yapilmayan { display: grid; }
.yapilmayan li { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--cizgi); }
.yapilmayan li:first-child { border-top: 0; padding-top: 0; }
.yapilmayan .soru { font-weight: 800; color: var(--ink); }
.yapilmayan .alt { color: var(--dim); font-size: .9375rem; }
.yapilmayan img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-rozet); border: 1px solid var(--cizgi); }
.kilit-not { display: flex; gap: var(--s2); align-items: center; color: var(--ink); font-weight: 700; }

/* ---------- Geçmiş ---------- */
.takvim-kart { padding: var(--s3); }
.takvim-ust { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; text-align: center; font-size: .875rem; font-weight: 800; color: var(--dim); }
.takvim { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.gun {
  min-height: 60px; padding: 6px 4px; display: grid; grid-template-rows: auto 1fr; justify-items: center; align-items: center;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-kontrol); color: var(--ink); font-weight: 800; position: relative;
}
.gun .g-no { font-size: .875rem; }
.gun .g-yuzde { width: 100%; border-radius: var(--r-rozet); font-size: .875rem; font-weight: 800; padding: 3px 0; text-align: center; }
.gun--bos { background: transparent; border-style: dashed; }
.gun--yok { background: var(--kagit-2); }
.gun[aria-pressed="true"] { border: 2px solid var(--ink); }
.gun:disabled { cursor: default; }
.gun--bugun .g-no { text-decoration: underline; text-underline-offset: 3px; }
.gun-detay { margin-top: var(--s4); }
.ay-liste li a { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s3); align-items: center; min-height: 60px; text-decoration: none; border-top: 1px solid var(--cizgi); color: var(--ink); }
.ay-liste li:first-child a { border-top: 0; }
.ay-liste .ad { font-weight: 800; }
.ay-liste .alt { font-size: .875rem; color: var(--dim); font-weight: 400; display: block; }

/* ---------- Aylık rapor ---------- */
.ay-sekme { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--s4) * -1) var(--s5); padding: 0 var(--s4); }
.ay-sekme::-webkit-scrollbar { display: none; }
.ay-sekme a { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s4); border-radius: 999px; border: 1.5px solid var(--sinir); background: var(--kart); font-weight: 800; text-decoration: none; color: var(--ink); }
.ay-sekme a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--beyaz); }
.sira-liste li { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-top: 1px solid var(--cizgi); }
.sira-liste li:first-child { border-top: 0; padding-top: 0; }
.sira-liste .no { font: 600 1.25rem/1 var(--f-baslik); color: var(--toprak); }
.sira-liste .ad { font-weight: 800; color: var(--ink); display: flex; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.sira-liste .alt { font-size: .875rem; color: var(--dim); }
.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; font-size: .875rem; color: var(--ink); white-space: nowrap; }
.delta .ik { width: 1em; height: 1em; }
.silme-bandi { display: flex; gap: var(--s3); align-items: flex-start; background: var(--kart); border: 1.5px solid var(--ink); border-radius: var(--r-kart); padding: var(--s4); margin-bottom: var(--s4); color: var(--ink); }
.odak { display: grid; gap: var(--s2); }
.odak .odak-ad { font: 600 1.75rem/1.1 var(--f-baslik); color: var(--beyaz); }
.odak p { color: var(--beyaz); }

/* ---------- Liste yönetimi ---------- */
.acord { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-kart); margin-bottom: var(--s3); overflow: hidden; }
.acord summary { list-style: none; display: flex; align-items: center; gap: var(--s3); min-height: 60px; padding: 0 var(--s4); cursor: pointer; font-weight: 800; color: var(--ink); }
.acord summary::-webkit-details-marker { display: none; }
.acord summary .say { margin-left: auto; color: var(--dim); font-size: .9375rem; }
.acord summary .ik { transition: transform var(--sure-hizli) ease; }
.acord[open] summary .ik { transform: rotate(180deg); }
.madde-yonet { display: grid; gap: var(--s3); padding: var(--s3) var(--s4); border-top: 1px solid var(--cizgi); }
.madde-yonet .soru { font-weight: 700; color: var(--ink); }
.madde-yonet--pasif .soru { text-decoration: line-through; }
.anahtarlar { display: flex; gap: var(--s5); flex-wrap: wrap; }
.anahtar-satir { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; color: var(--ink); min-height: 44px; }
/* düğme 56×44 (dokunma hedefi); görünen ray ::before ile 52×32 çizilir */
.anahtar { position: relative; width: 56px; height: 44px; flex: none; border: 0; background: transparent; padding: 0; }
.anahtar::before { content: ""; position: absolute; left: 2px; top: 6px; width: 52px; height: 32px; border-radius: 999px; border: 1.5px solid var(--sinir); background: var(--kart); transition: background var(--sure-hizli) ease, border-color var(--sure-hizli) ease; }
.anahtar::after { content: ""; position: absolute; top: 11px; left: 7px; width: 22px; height: 22px; border-radius: 50%; background: var(--sinir); transition: transform var(--sure-hizli) ease, background var(--sure-hizli) ease; }
.anahtar[aria-checked="true"]::before { background: var(--ink); border-color: var(--ink); }
.anahtar[aria-checked="true"]::after { transform: translateX(20px); background: var(--beyaz); }
.ekle-satir { display: flex; gap: var(--s2); padding: var(--s3) var(--s4) var(--s4); border-top: 1px solid var(--cizgi); }
.ekle-satir .girdi { min-height: 48px; }
.liste-ozet { display: flex; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.liste-ozet div { display: grid; }
.liste-ozet strong { font: 600 1.75rem/1 var(--f-baslik); color: var(--ink); }
.liste-ozet span { font-size: .875rem; color: var(--dim); font-weight: 700; }

/* ---------- Bilgi ---------- */
.zaman { display: grid; gap: var(--s4); }
.zaman li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s3); }
.zaman .no { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--beyaz); display: grid; place-items: center; font: 600 1.125rem/1 var(--f-baslik); }
.zaman strong { display: block; color: var(--ink); font-size: 1.0625rem; }
.zaman p { color: var(--text); }

/* ---------- Bildirim, onay, demo ---------- */
.bildirim { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70; max-width: min(92vw, 440px); pointer-events: none; }
.bildirim .t { background: var(--ink); color: var(--beyaz); border-radius: var(--r-kontrol); padding: var(--s3) var(--s4); font-weight: 700; box-shadow: var(--gol); }
dialog.onay { border: 1px solid var(--cizgi); border-radius: var(--r-sayfa); padding: var(--s6); width: min(92vw, 440px); background: var(--kart); color: var(--text); box-shadow: var(--gol); }
dialog.onay::backdrop { background: rgba(26, 23, 20, .5); }
dialog.onay h2 { margin-bottom: var(--s3); }
dialog.onay p { margin-bottom: var(--s5); }
dialog.onay .dugmeler { display: grid; gap: var(--s2); grid-template-columns: 1fr 1fr; }

/* ---------- Hareket ---------- */
html[data-hareket] .gir { animation: gir var(--sure) var(--ease) both; }
@keyframes gir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Geniş ekran ---------- */
@media (min-width: 640px) {
  .izgara-2--iki { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (min-width: 960px) {
  .kabuk { flex-direction: row; }
  .ray {
    display: flex; flex-direction: column; justify-content: space-between; width: var(--ray-genislik); flex: none;
    position: sticky; top: 0; height: 100dvh; background: var(--kagit-2); border-right: 1px solid var(--cizgi); padding: var(--s6) var(--s4);
  }
  .ray-marka { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s2) var(--s6); font: 600 1.25rem/1.1 var(--f-baslik); color: var(--ink); text-decoration: none; }
  .ray-marka small { display: block; font: 700 .875rem/1.2 var(--f-govde); color: var(--dim); margin-top: 2px; }
  .ray-nav { display: grid; gap: var(--s1); }
  .ray-nav a { min-height: 48px; display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s3); border-radius: var(--r-kontrol); font-weight: 800; text-decoration: none; color: var(--ink); }
  .ray-nav a:hover { background: var(--kagit); }
  .ray-nav a[aria-current="page"] { background: var(--ink); color: var(--beyaz); }
  .ray-alt { display: grid; gap: var(--s2); }
  .ray-alt .kisi { padding: var(--s2) var(--s3); }
  .ray-alt a, .ray-alt button { min-height: 44px; display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s3); border: 0; background: transparent; border-radius: var(--r-kontrol); font-weight: 700; color: var(--ink); text-decoration: none; text-align: left; }
  .ray-alt a:hover, .ray-alt button:hover { background: var(--kagit); }
  .ust { display: none; }
  .alt-nav { display: none; }
  main { max-width: 1080px; padding: var(--s10) var(--s10) 120px; }
  .kabuk--form .ana main { max-width: 1080px; }
  .karne { grid-template-columns: auto 1fr; align-items: end; column-gap: var(--s10); padding: var(--s8) var(--s10); }
  .karne-ust { grid-column: 1 / -1; }
  .karne p { padding-bottom: var(--s3); max-width: 46ch; }
  .izgara-2 { grid-template-columns: 1fr 1fr; align-items: start; }
  .izgara-2--genis { grid-template-columns: 1.15fr 1fr; }
  .alt-cubuk { left: var(--ray-genislik); }
  .form-yerlesim { display: grid; grid-template-columns: 220px minmax(0, 640px); gap: var(--s10); align-items: start; }
  .birimler-yan {
    position: sticky; top: var(--s6); margin: 0; padding: 0; background: transparent; border: 0; flex-direction: column; overflow: visible; gap: var(--s2);
  }
  .birim-chip { border-radius: var(--r-kontrol); justify-content: space-between; }
  .birim { scroll-margin-top: 24px; }
  .madde { scroll-margin-top: 24px; }
  .ay-sekme { margin: 0 0 var(--s5); padding: 0; }
  .cevap { grid-template-columns: 1fr 1fr 1.4fr; }
  .cvp--yok { grid-column: auto; min-height: 52px; }
  .bildirim { bottom: 96px; }
  .demobar { top: var(--s4); }
  html { scroll-padding-top: 24px; }
}

/* ---------- Anlam renkleri (Yunus, 2026-10-24: "okumadan hemen anlaşılsın") ----------
   Yeşil = yapıldı/iyi · Kırmızı = yapılmadı/uyarı · Sarı = dikkat/bekliyor.
   Renk yalnız anlam taşır; her zaman ikon + yazıyla birlikte. Zemin tonları üzerinde metin daima --ink. */
.ik--yesil { color: var(--yesil); }
.ik--kirmizi { color: var(--kirmizi); }
.ik--sari { color: var(--sari-koyu); }

/* cevap düğmeleri: seçmeden önce de renkli */
.cvp--evet { background: var(--yesil-zemin); border-color: var(--yesil); color: var(--yesil); }
.cvp--evet:hover { background: var(--yesil-zemin-2); }
.cvp--hayir { background: var(--kirmizi-zemin); border-color: var(--kirmizi); color: var(--kirmizi-koyu); }
.cvp--hayir:hover { background: var(--kirmizi-zemin-2); }
.cvp--evet[aria-pressed="true"] { background: var(--yesil); border-color: var(--yesil); color: var(--beyaz); }
.cvp--hayir[aria-pressed="true"] { background: var(--kirmizi); border-color: var(--kirmizi); color: var(--beyaz); }

/* madde kartı cevaba göre boyanır */
.madde--evet { background: var(--yesil-zemin); border-color: var(--yesil); }
.madde--hayir { background: var(--kirmizi-zemin); border-color: var(--kirmizi); }
.madde--yok { background: var(--kagit-2); border-color: var(--sinir); }
.madde-isaret { display: flex; align-items: center; gap: var(--s2); flex: none; }
.durum-ik { width: 28px; height: 28px; }
.durum-ik--evet { color: var(--yesil); }
.durum-ik--hayir { color: var(--kirmizi); }
.durum-ik--yok { color: var(--ink); }
.rozet--kritik { background: var(--kirmizi); color: var(--beyaz); }

/* birim çipi: durum noktası */
.birim-chip .nokta-d { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--sinir); flex: none; }
.birim-chip--kismi .nokta-d { background: var(--sari); border-color: var(--sari); }
.birim-chip--tam .nokta-d { background: var(--yesil); border-color: var(--yesil); }
.birim-chip--hayir .nokta-d { background: var(--kirmizi); border-color: var(--kirmizi); }
.birim-isaret { display: inline-flex; margin-left: var(--s2); }
.alt-cubuk-ic p .rozet { margin-left: var(--s2); vertical-align: middle; }
.alt-cubuk-ic p { min-width: 0; }
.alt-cubuk-ic .btn { white-space: nowrap; flex: none; }
@media (max-width: 359px) {
  .alt-cubuk-ic { flex-direction: column; align-items: stretch; gap: var(--s2); }
  .alt-cubuk-ic .btn { width: 100%; }
}
.ilerleme > span { background: var(--yesil); }

/* bugün */
.form-kart--yesil { background: var(--yesil-zemin); border: 1.5px solid var(--yesil); }
.form-kart--sari { background: var(--sari-zemin); border: 1.5px solid var(--sari); }
.form-kart--kirmizi { background: var(--kirmizi-zemin); border: 1.5px solid var(--kirmizi); }
.avatar--yesil { background: var(--yesil); color: var(--beyaz); }
.avatar--sari { background: var(--sari); color: var(--ink); }
.avatar--kirmizi { background: var(--kirmizi); color: var(--beyaz); }
.bant--uyari { background: var(--sari-zemin); border: 1.5px solid var(--sari); }
.silme-bandi--uyari { background: var(--sari-zemin); border: 1.5px solid var(--sari); }

/* sonuç */
.uyari-kutu { background: var(--kirmizi-zemin); border: 1.5px solid var(--kirmizi); }
.uyari-kutu .ik { color: var(--kirmizi); }
.yapilmayan li { grid-template-columns: auto 1fr auto; align-items: start; }
.yapilmayan .ik-kap { padding-top: 2px; }
.lejant { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-top: var(--s4); }
.lejant li { display: inline-flex; align-items: center; gap: var(--s2); font-size: .875rem; font-weight: 700; color: var(--ink); }
.lejant-not { margin-top: var(--s3); font-size: .875rem; color: var(--dim); }

/* rapor */
.delta--ust { color: var(--yesil); }
.delta--alt { color: var(--kirmizi); }
.kart--koyu .ik--sari { color: var(--sari); }
.odak h2 { display: flex; align-items: center; gap: var(--s2); }

/* liste yönetimi: Kritik kırmızı, Formda göster yeşil */
.anahtar[data-anahtar="kritik"][aria-checked="true"]::before { background: var(--kirmizi); border-color: var(--kirmizi); }
.anahtar[data-anahtar="aktif"][aria-checked="true"]::before { background: var(--yesil); border-color: var(--yesil); }
.liste-ozet .kritik strong { color: var(--kirmizi); }
.liste-ozet .gizli strong { color: var(--sari-koyu); }

/* ---------- Gerçek uygulama: kayıt durumu, hata/başarı iletileri, toplu ekleme ---------- */
.kayit-durum { position: fixed; right: var(--s3); top: calc(var(--ust-yukseklik) + var(--s2)); z-index: 65; max-width: min(92vw, 360px); display: flex; gap: var(--s2); align-items: flex-start; background: var(--kart); color: var(--ink); border: 1px solid var(--cizgi); border-radius: var(--r-kontrol); padding: var(--s2) var(--s3); font-size: .875rem; font-weight: 700; }
.kayit-durum[hidden] { display: none; }
.kayit-durum--hata { background: var(--sari-zemin); border: 1.5px solid var(--sari); }
.kayit-durum .ik { width: 1.25em; height: 1.25em; flex: none; margin-top: 1px; }
.form-hata { margin-bottom: var(--s4); padding: var(--s3) var(--s4); background: var(--kirmizi-zemin); border: 1.5px solid var(--kirmizi); border-radius: var(--r-kontrol); color: var(--ink); font-weight: 700; }
.form-hata[hidden] { display: none; }
.form-durum { margin-bottom: var(--s4); min-height: 1.4em; color: var(--ink); font-weight: 700; }
.form-durum--hata { background: var(--kirmizi-zemin); border: 1.5px solid var(--kirmizi); border-radius: var(--r-kontrol); padding: var(--s3) var(--s4); }
.form-durum--tamam { background: var(--yesil-zemin); border: 1.5px solid var(--yesil); border-radius: var(--r-kontrol); padding: var(--s3) var(--s4); }
.yukleniyor { color: var(--ink); font-weight: 700; text-align: center; padding: var(--s6) 0; }
.bos-not { color: var(--dim); padding: var(--s3) 0; }
.ekle-satir--serbest { border-top: 0; padding: 0; }
.toplu { border-top: 1px solid var(--cizgi); }
.toplu > summary { cursor: pointer; padding: var(--s3) var(--s4); min-height: 48px; display: flex; align-items: center; font-weight: 700; color: var(--ink); }
.toplu-form { display: grid; gap: var(--s2); padding: 0 var(--s4) var(--s4); }
.toplu-form label { font-weight: 800; color: var(--ink); }