/* DÖGM Meslekî Yarışmalar Başvuru Sistemi: istemci stilleri.
   Renk ve tipografi prototipten (portal/basvuru/css/app.css). Satır içi stil yok (CSP). */

/* ---------- Yazı tipleri (SIL OFL 1.1; @fontsource-variable 5.3.0, lisanslar yazi/ altında) ---------- */
/* unicode-range değerleri paketlerin index.css dosyasındaki latin-ext ve latin bloklarından; Türkçe ğ, ş, İ latin-ext'tedir. */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../yazi/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../yazi/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("../yazi/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("../yazi/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --navy: #14346B; --navy-deep: #0B1F45; --navy-soft: #E8EEF9;
  --red: #E30A17; --red-dark: #B80812; --gold: #C99A2E;
  --ink: #10203A; --muted: #5B6B85; --line: #E3E8F0; --bg: #F3F5F9; --surface: #fff;
  --ok: #0E8A5F; --ok-soft: #E3F5EC; --warn: #C9861A; --warn-soft: #FDF2DF;
  --danger: #C8102E; --danger-soft: #FBE7EA; --info-soft: #E5EFFC; --gray: #6B7280; --gray-soft: #EEF1F5;
  --radius: 14px; --radius-sm: 9px; --shadow: 0 8px 24px rgba(16,32,58,.07); --shadow-lg: 0 20px 50px rgba(16,32,58,.14);
  --font-head: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--bg); overflow-wrap: break-word; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* Ekran değişince odak başlığa programla taşınır; başlığın çevresinde çerçeve çizilmez. */
[tabindex="-1"]:focus { outline: none; }
a { color: var(--navy); }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--font-head); margin: 0 0 .5em; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 800; }
h3 { font-size: 1.02rem; font-weight: 700; }
p { margin: 0 0 .8em; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* ---------- Yardımcılar ---------- */
.uygulama { min-height: 100vh; }
.yukleniyor { margin: 0; padding: 64px 24px; text-align: center; color: var(--muted); }
.noscript { margin: 24px; padding: 12px 14px; border: 1px solid #F3C2CA; border-radius: var(--radius-sm); background: var(--danger-soft); color: #7A0C1E; }
.gizli-baslik { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ikincil-metin { color: var(--muted); font-weight: 400; }
.ipucu { font-size: .8rem; color: var(--muted); margin: 0; }
p.ipucu { margin-top: 12px; }

/* ---------- Ana sayfa (giriş) ---------- */
.giris { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.giris.tek { grid-template-columns: minmax(0, 1fr); place-items: center; padding: 32px 16px; }
.giris-yan { background: linear-gradient(160deg, var(--navy-deep), var(--navy)); color: #fff; padding: 48px; display: flex; flex-direction: column; }
.giris-yan img { height: 52px; width: auto; filter: brightness(0) invert(1); margin-bottom: 36px; }
.giris-yan h1 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); max-width: 16ch; }
.giris-yan p { color: rgba(255,255,255,.8); max-width: 480px; }
.giris-form { display: grid; place-items: center; padding: 32px 24px; min-width: 0; }
.giris.tek .giris-form { width: 100%; padding: 0; }
.giris-kutu { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; }
.giris-kutu h1, .giris-kutu h2 { margin-bottom: 14px; }
.giris-alt { font-size: .8rem; color: var(--muted); margin: 18px 0 0; }
.giris-yan .giris-alt { margin-top: auto; padding-top: 32px; color: rgba(255,255,255,.62); }
@media (max-width: 760px) {
  .giris { grid-template-columns: minmax(0, 1fr); }
  .giris-yan { padding: 28px 20px; }
  .giris-yan img { height: 40px; margin-bottom: 20px; }
  .giris-yan .giris-alt { padding-top: 16px; }
  .giris-form { padding: 20px 12px 32px; }
  .giris-kutu { padding: 20px 16px; }
}

/* ---------- Sekmeler ---------- */
.sekmeler { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.sekme { flex: 1 1 0; min-width: 0; padding: 10px 8px; border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--font-head); font-weight: 700; font-size: .86rem; line-height: 1.25; color: var(--muted); cursor: pointer; text-align: center; }
.sekme:hover { color: var(--navy); }
.sekme[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--red); }
.sekme-paneli { min-width: 0; }

/* ---------- Form ---------- */
.alan { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.alan label { font-size: .8rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.alan input, .alan select { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font-size: .94rem; }
.alan input:focus, .alan select:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.alan input[aria-invalid="true"] { border-color: var(--danger); background: #FFF8F9; }
.alan input[type="file"] { padding: 8px; }
.alan-hatasi { font-size: .8rem; color: var(--danger); font-weight: 600; }
.form-hatasi, .form-bilgi { margin: 0 0 14px; padding: 10px 12px; border: 1px solid; border-radius: var(--radius-sm); font-size: .88rem; }
.form-hatasi { background: var(--danger-soft); border-color: #F3C2CA; color: #7A0C1E; }
.form-bilgi { background: var(--ok-soft); border-color: #B9E6CE; color: #0B5C40; }

/* ---------- Düğmeler ---------- */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid transparent; background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .88rem; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.dugme:hover { background: var(--navy-deep); }
.dugme.birincil { background: var(--red); }
.dugme.birincil:hover { background: var(--red-dark); }
.dugme.ikincil { background: #fff; border-color: var(--line); color: var(--ink); }
.dugme.ikincil:hover { border-color: var(--navy); color: var(--navy); }
.dugme.tehlike { background: var(--danger); }
.dugme.tehlike:hover { background: #9E0C24; }
.dugme.blok { display: flex; width: 100%; padding: 11px 16px; }
.dugme:disabled { opacity: .5; cursor: not-allowed; }
.baglanti-dugme { display: inline-block; margin-top: 14px; padding: 2px 0; border: 0; background: none; color: var(--navy); font-size: .88rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.baglanti-dugme:hover { text-decoration-thickness: 2px; }
.form-baglantilar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 18px; }

/* ---------- Giriş sonrası kabuk ---------- */
.kabuk { min-height: 100vh; display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "ust ust" "menu icerik"; }
.ust-cubuk { grid-area: ust; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--line); min-height: 60px; }
.ust-cubuk img { height: 36px; width: auto; }
.ust-cubuk .kimlik { margin-inline-start: auto; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; text-align: end; }
.ust-cubuk .kimlik b { font-size: .9rem; overflow-wrap: anywhere; }
.ust-cubuk .kimlik span { font-size: .76rem; color: var(--muted); }
.yan-menu { grid-area: menu; display: flex; flex-direction: column; gap: 4px; padding: 16px 10px; background: var(--navy-deep); }
.yan-menu a { display: block; padding: 9px 12px; border-radius: 10px; color: rgba(255,255,255,.84); font-weight: 600; font-size: .9rem; text-decoration: none; }
.yan-menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
.yan-menu a[aria-current="page"] { background: rgba(255,255,255,.16); color: #fff; }
.icerik { grid-area: icerik; min-width: 0; padding: 22px 24px 60px; }
@media (max-width: 760px) {
  .kabuk { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "ust" "menu" "icerik"; }
  .ust-cubuk { padding: 8px 14px; }
  .ust-cubuk img { height: 30px; }
  .yan-menu { flex-direction: row; flex-wrap: wrap; padding: 8px 10px; }
  .yan-menu a { padding: 7px 10px; font-size: .86rem; }
  .icerik { padding: 16px 14px 48px; }
}

/* ---------- Kartlar ve bilgi kutuları ---------- */
.kart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px; min-width: 0; }
.kart > :last-child { margin-bottom: 0; }
.kart-baslik { font-size: 1.05rem; margin: 0 0 12px; }
.uyari { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #C7DBF7; border-radius: var(--radius-sm); background: var(--info-soft); color: #0F3E7A; font-size: .88rem; }
.uyari.bilgi { background: var(--info-soft); border-color: #C7DBF7; color: #0F3E7A; }
.uyari.basari { background: var(--ok-soft); border-color: #B9E6CE; color: #0B5C40; }
.uyari.tehlike { background: var(--danger-soft); border-color: #F3C2CA; color: #7A0C1E; }
.giris-kutu .uyari + .dugme { margin-top: 4px; }

/* ---------- Tablo (sayfa değil tablo kayar) ---------- */
/* position: relative, tablodaki mutlak konumlu .gizli-baslik metinlerini kutunun içinde tutar; yoksa bu metinler
   belgeye göre konumlanır, kaydırma kutusunun dışına taşar ve dar ekranda sayfayı yatayda genişletir. */
.tablo-kap { position: relative; max-width: 100%; overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; }
.tablo { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tablo caption { padding: 10px 12px; text-align: start; font-family: var(--font-head); font-weight: 700; font-size: .86rem; }
.tablo th, .tablo td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tablo th { background: #F8FAFD; font-family: var(--font-head); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo tbody tr:hover td { background: #FAFBFE; }

/* Danışman öğretmen satırındaki sayfa içi kapatma onayı */
.kapat-alani, .kapat-onay { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kapat-alani .dugme { padding: 6px 12px; font-size: .8rem; }

/* Yarışmalar (Genel Müdürlük): satır içi tarih formu, sayfa içi onay ve satır iletileri. Tablo kendi kutusunda kayar. */
.donem-secici { max-width: 280px; margin-bottom: 0; }
.deneme-uyarisi { background: var(--warn-soft); border-color: #F0D29B; color: #6B4508; }
.yarisma-tablosu td { vertical-align: top; }
.kategori-hucresi { min-width: 200px; }
.kod-metni { display: block; font-size: .74rem; }
.satir-uyari { margin: 6px 0 0; font-size: .78rem; font-weight: 600; color: #8A5A0B; }
.yarisma-tablosu .gun { white-space: nowrap; }
.islem-hucresi { min-width: 210px; }
.islem-hucresi .satir-islemleri, .islem-hucresi .teyit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.islem-hucresi .dugme { padding: 6px 12px; font-size: .8rem; }
.tarih-formu .alan { margin-bottom: 8px; }
.tarih-formu .alan input { padding: 7px 10px; font-size: .86rem; }
.tarih-formu .form-hatasi { margin-bottom: 8px; font-size: .8rem; }
.satir-sonuc { margin: 8px 0 0; padding: 6px 10px; font-size: .8rem; }
.satir-sonuc.basari { background: var(--ok-soft); border-color: #B9E6CE; color: #0B5C40; }
.satir-sonuc.tehlike { background: var(--danger-soft); border-color: #F3C2CA; color: #7A0C1E; }

/* Yarışmalar (okul ve öğretmen): kartlar */
.yarisma-kartlari { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.yarisma-kartlari .kart { margin-bottom: 0; display: flex; flex-direction: column; align-items: flex-start; }
.yarisma-karti-ust { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; width: 100%; }
.yarisma-karti-ust .kart-baslik { flex: 1 1 12rem; margin-bottom: 4px; }
.yarisma-karti .kod-metni { margin: 0 0 10px; }
.son-gun { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: .9rem; }
.yarisma-karti > .dugme { margin-top: auto; }
.yarisma-karti > .ipucu { margin: 0 0 10px; }
.katlanir { width: 100%; margin: 0 0 14px; font-size: .86rem; }
.katlanir summary { cursor: pointer; font-weight: 700; color: var(--navy); }
.katlanir ul { margin: 8px 0 0; padding-inline-start: 20px; }
.katlanir li + li { margin-top: 4px; }

/* Başvuru sihirbazı */
.sihirbaz-ust { padding: 14px 18px; }
.sihirbaz-yarisma { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.sihirbaz-ust .ipucu { margin: 0; }
.adimlar { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 16px; padding: 0; list-style: none; }
.adimlar li { display: flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 600; color: var(--muted); }
.adim-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; font-family: var(--font-head); font-size: .76rem; font-weight: 800; }
.adimlar li.tamam .adim-no { background: var(--ok-soft); border-color: #B9E6CE; color: var(--ok); }
.adimlar li[aria-current="step"] { color: var(--navy); }
.adimlar li[aria-current="step"] .adim-no { background: var(--navy); border-color: var(--navy); color: #fff; }
.alan-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 0 14px; }
.tc-maske { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-family: var(--font-head); font-weight: 700; letter-spacing: .04em; }
.tc-maske .baglanti-dugme, .alan > .baglanti-dugme { margin-top: 0; align-self: flex-start; font-family: var(--font-body); letter-spacing: 0; }
.kural-uyarilari { background: var(--warn-soft); border-color: #F0D29B; color: #6B4508; }
.kural-uyarilari p, .form-hatasi p { margin: 0; }
.kural-uyarilari ul, .form-hatasi ul, .liste-sonucu ul { margin: 4px 0 0; padding-inline-start: 20px; }
.sihirbaz-dugmeleri { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sihirbaz-dugmeleri [type="submit"], .sihirbaz-dugmeleri .birincil { margin-inline-start: auto; }
.bolum-sayaci { margin: 0 0 6px; font-size: .9rem; }
.secilen-bolumler { margin: 0 0 12px; padding-inline-start: 20px; font-size: .86rem; }
.secilen-bolumler:empty { display: none; }
/* Sihirbaz adımının bütün alanları tek fieldset'te (kayıt sürerken kilit); görünümü yok. */
.adim-alanlari { margin: 0; padding: 0; border: 0; min-width: 0; }
.bolum-kumesi { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.bolum-listesi { max-height: 360px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.bolum-listesi label { display: flex; align-items: baseline; gap: 8px; padding: 7px 8px; border-radius: 7px; font-size: .88rem; cursor: pointer; }
.bolum-listesi label:hover { background: var(--bg); }
.bolum-listesi input { flex: none; }
.bolum-sira { flex: none; min-width: 2.4em; font-weight: 700; color: var(--muted); }
.onaylar { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.onaylar legend { padding: 0 4px; font-size: .8rem; font-weight: 700; color: var(--muted); }
.onay-kutusu { display: flex; align-items: baseline; gap: 9px; padding: 5px 0; font-size: .9rem; cursor: pointer; }
.onay-kutusu input { flex: none; }
.ozet-listesi { margin: 0 0 14px; }
.ozet-listesi > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 4px 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ozet-listesi dt { font-size: .8rem; font-weight: 700; color: var(--muted); }
.ozet-listesi dd { margin: 0; min-width: 0; }
.duz-liste { margin: 0; padding-inline-start: 18px; }
@media (max-width: 520px) { .ozet-listesi > div { grid-template-columns: minmax(0, 1fr); } }
.sonuc-karti { text-align: start; }
.basvuru-no { margin: 0 0 12px; font-family: var(--font-head); font-size: clamp(1.25rem, 5vw, 1.9rem); font-weight: 800; color: var(--navy); line-height: 1.2; overflow-wrap: anywhere; }

/* Başvurular (okul ve öğretmen) */
.basvuru-tablosu td { vertical-align: top; }
.basvuru-no-kucuk { font-family: var(--font-head); font-weight: 700; font-size: .8rem; white-space: nowrap; }
.basvuru-tablosu .gun { white-space: nowrap; }
.ozet-satiri > td { padding-top: 0; }
.ozet-paneli { padding: 4px 10px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.ozet-paneli .ozet-listesi { margin: 0; }
.gecmis-paneli { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); font-size: .8rem; }
.gecmis-listesi { margin: 0; padding-inline-start: 18px; }
.gecmis-listesi li + li { margin-top: 3px; }
.liste-sonucu p { margin: 0; }
.liste-sonucu.basari { background: var(--ok-soft); border-color: #B9E6CE; color: #0B5C40; }
.liste-sonucu.tehlike { background: var(--danger-soft); border-color: #F3C2CA; color: #7A0C1E; }
/* Dar ekranda satırlar kart olur: başlık satırı görsel olarak gizlenir, her hücrenin etiketi data-etiket'ten gelir. */
@media (max-width: 640px) {
  .basvuru-tablosu thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .basvuru-tablosu, .basvuru-tablosu tbody, .basvuru-tablosu tr, .basvuru-tablosu td { display: block; width: 100%; }
  .basvuru-tablosu tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .basvuru-tablosu tbody tr:last-child { border-bottom: 0; }
  .basvuru-tablosu td { padding: 4px 14px; border-bottom: 0; }
  .basvuru-tablosu td[data-etiket]::before { content: attr(data-etiket); display: block; font-family: var(--font-head); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .basvuru-tablosu .islem-hucresi { min-width: 0; padding-top: 8px; }
  .basvuru-no-kucuk { white-space: normal; overflow-wrap: anywhere; }
}

/* ---------- Rozetler ---------- */
.rozet { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-family: var(--font-head); font-size: .74rem; font-weight: 700; white-space: nowrap; line-height: 1.4; background: var(--gray-soft); color: var(--gray); }
.rozet::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rozet.etkin { background: var(--ok-soft); color: var(--ok); }
.rozet.kapali { background: var(--gray-soft); color: var(--gray); }
.rozet.onayli, .rozet.acik { background: var(--ok-soft); color: var(--ok); }
.rozet.denetlendi { background: var(--info-soft); color: var(--navy); }
.rozet.taslak { background: var(--gray-soft); color: var(--gray); }
.rozet.deneme { background: var(--warn-soft); color: #8A5A0B; }
.rozet.yok { background: var(--danger-soft); color: var(--danger); }
.rozetler { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* ---------- Önizleme sayıları ---------- */
.ozet-sayilar { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ozet-sayilar > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.ozet-sayilar b { display: block; font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.ozet-sayilar span { font-size: .8rem; color: var(--muted); }

/* ---------- Duyuru (aria-live) ---------- */
.duyuru { position: fixed; bottom: 18px; inset-inline-end: 18px; z-index: 200; max-width: min(360px, calc(100vw - 36px)); padding: 10px 14px; border-radius: 10px; background: var(--navy-deep); color: #fff; font-size: .88rem; box-shadow: var(--shadow-lg); }
/* Boş duyuru alanı yalnızca görsel olarak gizlenir; canlı bölge erişilebilirlik ağacında kalır (display: none ya da
   hidden onu ağaçtan çıkarır, ekran okuyucu ilk iletiyi kaçırabilir). :empty, yazının 50 ms gecikmeli geldiği anı da kapsar. */
.duyuru.bos, .duyuru:empty { width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; box-shadow: none; }