/* ============================================================================
   ÜCD Admin Panel — Görsel Tasarım Katmanı (Figma uyarlaması)

   Bu dosya YALNIZCA src/Layout.php tarafından, assets/style.css'ten SONRA
   yüklenir (cascade ile override eder). assets/style.css'e HİÇ dokunulmadı —
   katılımcıya açık sayfalar (PublicLayout) bu dosyayı yüklemez, birebir aynı
   kalır.

   Bölümler:
     1. Poppins @font-face (self-hosted)
     2. Tasarım token'ları (:root CSS değişkenleri)
     3. Genel override'lar (body/tipografi/linkler)
     4. Topbar
     5. Sayfa başlığı satırı (page-head)
     6. Butonlar
     7. Form elemanları
     8. Panel / kart / tablo / filtre çubuğu / flash / rozet (genel bileşenler)
     9. Dashboard: üst stat kartları
    10. Dashboard: kongre kartı (başlık bandı, metrik bandı, sertifika süreci,
        modül butonları)
    11. Kongre Yönetimi (hub) — içerik karoları
    12. Oturumlar — filtre pilleri
    13. Sertifika Tasarımı — özet stat kartları + rol kartları
    14. Push Kampanyaları — kart listesi
    15. Giriş (login) — yalnızca CSS ile, login.php dokunulmadı
   ============================================================================ */

/* ============================================================
   1. Poppins (self-hosted) — CDN/Google Fonts KULLANILMADI
   ============================================================ */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   2. Tasarım token'ları
   ============================================================ */
:root {
    --ucd-font: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --ucd-bg: #faf7f2;
    --ucd-surface: #ffffff;
    --ucd-surface-2: #fdfcfa;   /* Sertifika Süreci bandı gibi ikincil yüzeyler */
    --ucd-tile-bg: #f5f2ed;     /* modül butonları */

    --ucd-text: #1c1410;
    --ucd-text-muted: #7a7068;

    --ucd-primary: #a4243b;
    --ucd-primary-tint: rgba(164, 36, 59, 0.1);
    --ucd-primary-hover: #8d1f33;

    --ucd-ok-bg: #ecfdf5;
    --ucd-ok-border: #a4f4cf;
    --ucd-ok-text: #007a55;
    --ucd-ok-dot: #00bc7d;

    --ucd-warn-bg: #fffbeb;
    --ucd-warn-border: #fee685;
    --ucd-warn-text: #bb4d00;

    --ucd-border: rgba(0, 0, 0, 0.06);
    --ucd-border-strong: rgba(0, 0, 0, 0.08);

    --ucd-radius-card: 16px;
    --ucd-radius-btn: 12px;
    --ucd-shadow-card: 0 2px 16px rgba(0, 0, 0, 0.04);
}

/* ============================================================
   3. Genel override'lar
   ============================================================ */
/* Scrollbar boşluğu her sayfada sabit: uzun sayfalarda (ana sayfa) çıkan
   dikey scrollbar içeriği sola itip kısa sayfalarla genişlik/hiza farkı
   yaratıyordu. Destekleyen tarayıcılarda gutter rezerve edilir; eskilerde
   scrollbar hep görünür (aynı etki). */
html { overflow-y: scroll; }
@supports (scrollbar-gutter: stable) {
    html { overflow-y: auto; scrollbar-gutter: stable; }
}

body {
    font-family: var(--ucd-font);
    background: var(--ucd-bg);
    color: var(--ucd-text);
    /* Sticky footer: içerik kısa olsa da footer hep pencerenin altında */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* width:100% şart: flex çocukta margin:auto ortalaması stretch'i iptal edip
   genişliği içeriğe göre büzüyordu — kart-ızgaralı sayfalar (hub) daralıyordu. */
body > main { flex: 1 0 auto; width: 100%; }
.footer { flex-shrink: 0; }
h1, h2, h3, h4 { font-family: var(--ucd-font); color: var(--ucd-text); font-weight: 600; }
h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 0 0 4px; }
h3 { font-size: 14px; }
a { color: var(--ucd-primary); }
a:hover { color: var(--ucd-primary-hover); }
hr { border-top-color: var(--ucd-border-strong); }
.muted { color: var(--ucd-text-muted); }

.container { max-width: 1240px; padding-left: 24px; padding-right: 24px; }
.footer { border-top-color: var(--ucd-border-strong); background: var(--ucd-surface); color: var(--ucd-text-muted); }
.footer .topbar__inner { max-width: 1240px; }

/* ============================================================
   4. Topbar
   ============================================================ */
.topbar {
    background: var(--ucd-surface);
    border-bottom: 1px solid var(--ucd-border-strong);
}
.topbar__inner {
    max-width: 1240px;
    padding: 0 24px;
    height: 106px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ucd-text);
    text-transform: none;
    letter-spacing: normal;
    font-size: inherit;
    font-weight: normal;
}
.topbar__brand:hover { text-decoration: none; color: var(--ucd-text); }
.topbar__brand-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--ucd-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    flex-shrink: 0;
}
.topbar__brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.topbar__brand-title { font-size: 16px; font-weight: 600; color: var(--ucd-text); }
.topbar__brand-sub { font-size: 11px; font-weight: 500; color: var(--ucd-text-muted); }

.topbar__nav { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.nav-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; font-size: 14px; font-weight: 500;
    border-radius: 12px; color: var(--ucd-text-muted);
    text-decoration: none;
}
.nav-pill:hover { color: var(--ucd-text); text-decoration: none; background: rgba(0, 0, 0, .03); }
.nav-pill .icon { opacity: .8; }
.nav-pill.is-active {
    background: var(--ucd-primary-tint);
    color: var(--ucd-primary);
}
.nav-pill.is-active:hover { background: var(--ucd-primary-tint); color: var(--ucd-primary); }
.nav-pill.is-active .icon { opacity: 1; }

/* Kütüphaneler dropdown — saf CSS, JS'siz. Tetikleyici <button class="nav-pill">,
   açılan menü :hover VE :focus-within ile görünür (klavye erişilebilir). */
.nav-dropdown { position: relative; }
.nav-dropdown > .nav-pill {
    border: none; background: none; cursor: pointer;
    /* 'font: inherit' kısayolu .nav-pill'in 14px/500 tanımını ezdiğinden
       (daha spesifik seçici) pill tipografisi burada açıkça tekrarlanır. */
    font-family: inherit; font-size: 14px; font-weight: 500; line-height: inherit;
}
.nav-dropdown__menu {
    display: none;
    position: absolute; top: calc(100% + 4px); left: 0;
    min-width: 200px; padding: 6px;
    background: #fff; border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    z-index: 20;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
    display: block;
}
.nav-dropdown__menu a {
    display: block;
    padding: 9px 12px; border-radius: 8px;
    font-size: 14px; font-weight: 500;
    color: var(--ucd-text); text-decoration: none;
    white-space: nowrap;
}
.nav-dropdown__menu a:hover { background: rgba(0, 0, 0, .04); text-decoration: none; }

.topbar__sep { width: 1px; height: 24px; background: var(--ucd-border-strong); margin: 0 12px; }
.topbar__actions { display: flex; align-items: center; gap: 8px; }
.topbar__icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px;
    color: var(--ucd-text-muted); text-decoration: none;
}
.topbar__icon-btn:hover { background: rgba(0, 0, 0, .04); color: var(--ucd-text); text-decoration: none; }
.topbar__icon-btn .icon { margin-right: 0; opacity: 1; }

.topbar__user {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 8px 4px 4px; border-radius: 10px;
    color: var(--ucd-text); text-decoration: none; font-weight: 500; font-size: 14px;
}
.topbar__user:hover { background: rgba(0, 0, 0, .04); text-decoration: none; color: var(--ucd-text); }
.topbar__user-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 999px;
    background: var(--ucd-primary-tint); color: var(--ucd-primary);
    font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.topbar__user-name { white-space: nowrap; }
.topbar__user .icon { opacity: .6; margin-right: 0; }

/* Eski (auth/basit) topbar nav — login vb. sadece "Giriş" linki gösterir */
.section-auth .topbar__nav { margin-left: auto; }

/* ============================================================
   5. Sayfa başlığı satırı
   ============================================================ */
.page-head { align-items: flex-start; }
.page-head h1 { margin: 0 0 4px; }
.page-head > div > p.muted,
.page-head p.muted { font-size: 14px; margin: 0; }
.back-link { color: var(--ucd-text-muted); }
.back-link:hover { color: var(--ucd-primary); }

.breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    font-size: 14px; color: var(--ucd-text-muted);
    margin-bottom: 8px;
}
.breadcrumb a { color: var(--ucd-text-muted); font-weight: 500; text-decoration: none; }
.breadcrumb a:hover { color: var(--ucd-primary); text-decoration: none; }
.breadcrumb__sep { color: var(--ucd-border-strong); }
.breadcrumb__back-arrow { margin-right: 4px; }

/* ============================================================
   6. Butonlar
   ============================================================ */
.btn {
    font-family: var(--ucd-font);
    border-radius: var(--ucd-radius-btn);
    font-weight: 500;
}
.btn--primary {
    background: var(--ucd-primary);
    border-color: var(--ucd-primary);
}
.btn--primary:hover { background: var(--ucd-primary-hover); border-color: var(--ucd-primary-hover); }
.btn--ghost {
    background: var(--ucd-surface);
    border-color: var(--ucd-border-strong);
    color: var(--ucd-primary);
}
.btn--ghost:hover { background: var(--ucd-primary-tint); border-color: var(--ucd-primary); }
.btn--danger { border-radius: var(--ucd-radius-btn); }

/* ============================================================
   7. Form elemanları
   ============================================================ */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=color], select, textarea {
    border-color: var(--ucd-border-strong);
    border-radius: 10px;
    font-family: var(--ucd-font);
    color: var(--ucd-text);
}
input:focus, select:focus, textarea:focus {
    outline-color: var(--ucd-primary-tint);
    border-color: var(--ucd-primary);
}
label { color: var(--ucd-text-muted); }

/* ============================================================
   8. Panel / kart / tablo / filtre çubuğu / flash / rozet
   ============================================================ */
.panel {
    background: var(--ucd-surface);
    border-color: var(--ucd-border);
    border-radius: var(--ucd-radius-card);
    box-shadow: var(--ucd-shadow-card);
}
.toolbar, .filter-bar {
    background: var(--ucd-surface);
    border-color: var(--ucd-border);
    border-radius: var(--ucd-radius-card);
}

.table {
    border-color: var(--ucd-border);
    border-radius: var(--ucd-radius-card);
}
.table th {
    background: var(--ucd-surface-2);
    color: var(--ucd-text-muted);
    font-size: 10px;
    letter-spacing: .05em;
}
.table th, .table td { border-bottom-color: var(--ucd-border); }

.flash--ok { background: var(--ucd-ok-bg); border-color: var(--ucd-ok-border); color: var(--ucd-ok-text); }
.flash--warn { background: var(--ucd-warn-bg); border-color: var(--ucd-warn-border); color: var(--ucd-warn-text); }

.badge {
    border-radius: 999px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.badge--ok { background: var(--ucd-ok-bg); border: 1px solid var(--ucd-ok-border); color: var(--ucd-ok-text); }
.badge--warn { background: var(--ucd-warn-bg); border: 1px solid var(--ucd-warn-border); color: var(--ucd-warn-text); }
.badge .icon { opacity: 1; margin-right: 0; }
.badge__dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: var(--ucd-ok-dot);
    display: inline-block;
}

.empty {
    background: var(--ucd-surface);
    border-color: var(--ucd-border-strong);
    border-radius: var(--ucd-radius-card);
}

/* ============================================================
   9. Dashboard — üst stat kartları (Kongre / Kayıtlı Cihaz / Anket Yanıtı / Üretilen Sertifika)
   ============================================================ */
.stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 20px 0 24px;
}
@media (max-width: 900px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
}
.stat {
    border-color: var(--ucd-border);
    border-radius: var(--ucd-radius-card);
    box-shadow: var(--ucd-shadow-card);
    padding: 18px 20px;
    gap: 6px;
}
.stat:hover { border-color: var(--ucd-primary); box-shadow: var(--ucd-shadow-card); }
.stat__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ucd-text-muted);
    order: -1;
}
.stat__num { font-size: 24px; font-weight: 600; color: var(--ucd-text); }
.stat__sub { font-size: 12px; color: var(--ucd-text-muted); margin-top: 2px; }

/* Sayfa başlığı satırı (Genel Görünüm + Yeni Kongre butonu) */
.dashboard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.dashboard-head p.muted { font-size: 14px; }

/* ============================================================
   10. Dashboard — kongre kartı
   ============================================================ */
.dash-card {
    border-color: var(--ucd-border);
    border-radius: var(--ucd-radius-card);
    box-shadow: var(--ucd-shadow-card);
    padding: 0;
    overflow: hidden;
}
.dash-card__band { padding: 20px 28px; }
.dash-card__band + .dash-card__band { border-top: 1px solid var(--ucd-border); }

.dash-card__head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap;
}
/* congresses.php varyantı: "Kongreyi Düzenle" + arşiv/sil aksiyonları yan yana */
.dash-card__head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-card__title { font-size: 18px; font-weight: 600; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-card__sub { font-size: 14px; color: var(--ucd-text-muted); }
.dash-card__sub .icon { opacity: .7; }

/* Metrik bandı — 8 sütun, kutu YOK, sadece düz metin kolonları */
.metric-row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 14px;
}
@media (max-width: 1100px) {
    .metric-row { grid-template-columns: repeat(4, 1fr); row-gap: 16px; }
}
@media (max-width: 640px) {
    .metric-row { grid-template-columns: repeat(2, 1fr); }
}
.metric__label {
    display: block;
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .25px;
    color: var(--ucd-text-muted);
    margin-bottom: 4px;
}
.metric__value {
    font-size: 14px; font-weight: 600; color: var(--ucd-text);
    display: flex; align-items: center; gap: 4px;
}
.metric__value .icon { opacity: 1; color: #f59e0b; margin-right: 0; }
.metric__sub { font-size: 10px; color: var(--ucd-text-muted); margin-top: 2px; }

/* Sertifika Süreci bandı */
.cert-process { background: var(--ucd-surface-2); }
.cert-process__title {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ucd-text-muted);
    margin: 0 0 16px;
}
.cert-process__row { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.cert-process--empty { margin: 0 !important; }

.cert-process__donut { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.cert-process__donut .ring { width: 88px; height: 88px; }
.cert-process__donut-label { font-size: 12px; color: var(--ucd-text-muted); }

.cert-process__rating { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.cert-process__rating-label { font-size: 12px; color: var(--ucd-text-muted); }
.cert-process__stars { display: flex; align-items: center; gap: 8px; }
.cert-process__stars .stars { font-size: 13px; margin: 0; }
.cert-process__rating-score { font-size: 14px; font-weight: 600; color: var(--ucd-text); }

.cert-funnel { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; flex: 1; }
.cert-funnel__step { display: flex; flex-direction: column; gap: 2px; min-width: 56px; }
.cert-funnel__num { font-size: 14px; font-weight: 600; color: var(--ucd-text); }
.cert-funnel__label { font-size: 12px; color: var(--ucd-text-muted); }
.cert-funnel__pct { font-size: 10px; font-weight: 600; color: var(--ucd-primary); }
.cert-funnel__arrow { color: var(--ucd-text-muted); opacity: .5; display: inline-flex; flex-shrink: 0; }
.cert-funnel__arrow .icon { margin-right: 0; opacity: 1; }

/* Modül butonları */
.module-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.module-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ucd-tile-bg);
    color: var(--ucd-text);
    border: 1px solid transparent;
    padding: 8px 14px;
    border-radius: var(--ucd-radius-btn);
    font-size: 12px; font-weight: 500;
    text-decoration: none;
}
.module-btn:hover { background: var(--ucd-primary-tint); color: var(--ucd-primary); text-decoration: none; }
.module-btn .icon { opacity: .8; margin-right: 0; }
.module-btn:hover .icon { opacity: 1; }

/* ============================================================
   11. Kongre Yönetimi (hub) — içerik karoları
   ============================================================ */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 10px;
}
.content-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px;
    padding: 22px 12px;
    background: var(--ucd-surface);
    border: 1px solid var(--ucd-border);
    border-radius: var(--ucd-radius-card);
    color: var(--ucd-text);
    font-weight: 500; font-size: 13px; text-decoration: none;
    text-align: center;
    box-shadow: var(--ucd-shadow-card);
}
.content-tile:hover { border-color: var(--ucd-primary); color: var(--ucd-primary); text-decoration: none; }
.content-tile .icon { flex-shrink: 0; color: var(--ucd-text-muted); opacity: 1; margin-right: 0; width: 22px; height: 22px; }
.content-tile:hover .icon { color: var(--ucd-primary); }
.section-heading { color: var(--ucd-text-muted); font-size: 11px; letter-spacing: .06em; }

/* ============================================================
   12. Oturumlar — filtre pilleri
   ============================================================ */
.pill-filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Pill'ler kendi kapsüllerini taşır — filtre bandının beyaz zemini/kenarlığı gereksiz */
.filter-bar.pill-filter { background: transparent; border: none; box-shadow: none; padding: 0; }
.pill-filter__sep { width: 1px; height: 20px; background: var(--ucd-border-strong); margin: 0 6px; }
.filter-pill {
    display: inline-flex; align-items: center;
    padding: 6px 14px; font-size: 12px; font-weight: 500;
    border-radius: 999px; border: 1px solid var(--ucd-border-strong);
    background: var(--ucd-surface); color: var(--ucd-text-muted);
    text-decoration: none;
}
.filter-pill:hover { border-color: var(--ucd-primary); color: var(--ucd-primary); text-decoration: none; }
.filter-pill.is-active {
    background: var(--ucd-primary-tint); border-color: var(--ucd-primary-tint); color: var(--ucd-primary);
}
.filter-bar__search { position: relative; margin-left: auto; }
.filter-bar__search input { width: 220px; padding-left: 34px; border-radius: 999px; }
.filter-bar__search .icon {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    margin: 0; opacity: .6; pointer-events: none;
}
@media (max-width: 720px) {
    .filter-bar__search { margin-left: 0; }
    .filter-bar__search input { width: 100%; }
}

/* ============================================================
   13. Sertifika Tasarımı — özet stat kartları + rol kartları
   ============================================================ */
/* Zorunlu rolde kilitli kod alanı — düzenlenemez olduğu görsel olarak belli olsun */
.input--locked {
    background: var(--ucd-tile-bg);
    color: var(--ucd-text-muted);
    cursor: not-allowed;
}

.cert-design-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.cert-design-grid .panel {
    padding: 22px 24px;
}
.cert-design-grid .panel h2 { font-size: 18px; }
.info-box--warn { background: var(--ucd-warn-bg); border-color: var(--ucd-warn-border); color: var(--ucd-warn-text); text-align: center; }

/* ============================================================
   14. Push Kampanyaları — kart listesi
   ============================================================ */
.push-list { display: flex; flex-direction: column; gap: 14px; }
.push-card {
    background: var(--ucd-surface);
    border: 1px solid var(--ucd-border);
    border-radius: var(--ucd-radius-card);
    box-shadow: var(--ucd-shadow-card);
    padding: 18px 22px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.push-card__main { flex: 1; min-width: 240px; }
.push-card__title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.push-card__title { font-size: 15px; font-weight: 600; margin: 0; }
.push-card__body { font-size: 13px; color: var(--ucd-text-muted); margin: 0 0 10px; max-width: 640px; }
.push-card__meta { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--ucd-text-muted); flex-wrap: wrap; }
.push-card__meta .icon { opacity: .7; }

.push-card__progress { text-align: right; min-width: 180px; }
.push-card__progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; margin-bottom: 6px; }
.push-card__progress-head strong { font-size: 14px; font-weight: 600; color: var(--ucd-text); }
.push-card__progress-track { background: var(--ucd-border); height: 6px; border-radius: 999px; overflow: hidden; }
.push-card__progress-fill { background: var(--ucd-ok-dot); height: 100%; border-radius: 999px; }
.push-card__progress-fill.is-warn { background: var(--ucd-warn-text); }
.push-card__progress-nums { font-size: 11px; color: var(--ucd-text-muted); margin-top: 4px; }
.push-card__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-top: 10px; }

/* ============================================================
   15. Giriş (login) — yalnızca CSS ile stillendirildi, login.php dokunulmadı.
   NOT: Figma tasarımında topbar tamamen gizli, ortada büyük marka rozeti +
   başlık var. login.php'ye dokunmadan (ve Layout.php'nin auth dalını nav'sız
   sade halinden çıkarmadan) bu tam olarak üretilemiyor — bkz. rapor "bilinçli
   sapmalar". Burada mevcut topbar (marka rozeti + "Giriş" linki) korunarak,
   asıl kart (.auth-card) tasarıma yaklaştırılıyor.
   ============================================================ */
.section-auth { background: var(--ucd-bg); }
.section-auth .container { padding-top: 48px; }
.section-auth .auth-card {
    max-width: 400px;
    border-color: var(--ucd-border);
    border-radius: var(--ucd-radius-card);
    box-shadow: var(--ucd-shadow-card);
    padding: 32px 28px;
}
.section-auth .auth-card h1 { font-size: 18px; }
.section-auth .btn--primary { width: 100%; padding: 12px; border-radius: var(--ucd-radius-btn); }

/* ============================================================
   16. Sayfalama (pagination) — pill-filter diliyle uyumlu:
   beyaz kapsüller, aktif bordo. bkz. Layout::pagination().
   ============================================================ */
.pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 18px 0 6px; }
.pagination__pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 12px; font-size: 12px; font-weight: 500;
    border-radius: 999px; border: 1px solid var(--ucd-border-strong);
    background: var(--ucd-surface); color: var(--ucd-text-muted);
    text-decoration: none;
}
.pagination__pill:hover { border-color: var(--ucd-primary); color: var(--ucd-primary); text-decoration: none; }
.pagination__pill.is-active {
    background: var(--ucd-primary); border-color: var(--ucd-primary); color: #fff; font-weight: 600;
}
.pagination__pill.is-disabled { opacity: .45; pointer-events: none; }
.pagination__ellipsis { padding: 0 4px; color: var(--ucd-text-muted); font-size: 12px; }
.pagination__summary { margin: 4px 0 0; }

/* ============================================================
   17. Oturumlar — hiyerarşi görünümü (blok = üst oturum, altında
   girintili alt oturum satırları). bkz. admin/sessions.php.
   ============================================================ */
.tree-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; margin-right: 4px; padding: 0;
    border: 1px solid var(--ucd-border-strong); border-radius: 6px;
    background: var(--ucd-surface); color: var(--ucd-text-muted);
    font-size: 11px; line-height: 1; cursor: pointer;
}
.tree-toggle:hover { border-color: var(--ucd-primary); color: var(--ucd-primary); }
/* Alt oturumu olan üst satır komple tıklanabilir (akordeon) — cursor'ı
   td'lere de yaz (tr-üstü kuralı bazı durumlarda hücre içeriğinde ezilebiliyor)
   ve hover'da varsayılan gri yerine belirgin krem tint kullan (tıklanabilirlik
   hissi; .table tr:hover td kuralını specificity ile ezer). */
.tree-parent, .tree-parent td { cursor: pointer; }
.tree-parent:hover .tree-toggle { border-color: var(--ucd-primary); color: var(--ucd-primary); }
.table tr.tree-parent:hover td { background: var(--ucd-tile-bg); }

/* Salon ve Tip hücreleri başlıkla yarışmasın — küçük ve soluk */
.session-hall, .session-type { font-size: 13px; color: var(--ucd-text-muted); }

/* Filtre çubuğundaki seçiciler: style.css'in width:auto kuralı, genişliği en
   uzun option metnine göre belirliyor — uzun oturum başlıkları seçiciyi kartın
   dışına taşırıyordu (Oturum Değerlendirmeleri/KeyPad seçicileri). Kabın
   genişliğini aşamaz; uzun metni tarayıcı kırpar. */
.filter-bar select { max-width: 100%; }
.filter-bar label { max-width: 100%; }
.session-row--child { background: var(--ucd-surface-2); }
.session-row--child td { color: var(--ucd-text-muted); font-size: 13px; }
.session-row--child td:first-child { padding-left: 28px; }
.tree-indent { display: inline-block; margin-right: 4px; color: var(--ucd-text-muted); }

/* Saat hücresi: üstte küçük gün etiketi ("Çar 28 Eki"), altında belirgin
   saat aralığı — tek satır "28.10 09:00 – 12:00" karmaşasının yerine. */
.session-time { white-space: nowrap; }
.session-time__day {
    display: block; font-size: 11px; line-height: 1.3;
    color: var(--ucd-text-muted); letter-spacing: .02em;
}
.session-time__day--inline { display: inline; margin-right: 4px; }
.session-time__range {
    font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--ucd-text);
}
.session-row--child .session-time__range {
    font-weight: 500; font-size: 12.5px; color: var(--ucd-text-muted);
}

/* ============================================================
   18. Karanlık tema (dark mode)
   html[data-theme="dark"] altında: önce --ucd-* paleti değişir
   (değişken tüketen her bileşen otomatik uyar), ardından style.css'ten
   gelen SABİT renkli bileşenler tek tek ezilir. Aydınlık değerlere
   DOKUNULMAZ — tüm kurallar bu scope içinde kalmalı.
   ============================================================ */
html[data-theme="dark"] {
    color-scheme: dark;

    --ucd-bg: #191512;
    --ucd-surface: #221d19;
    --ucd-surface-2: #262019;
    --ucd-tile-bg: #2b241e;

    --ucd-text: #ece7e0;
    --ucd-text-muted: #a89e93;

    --ucd-primary: #b7314a;
    --ucd-primary-tint: rgba(208, 90, 114, 0.16);
    --ucd-primary-hover: #c94f66;

    --ucd-ok-bg: #10291e;
    --ucd-ok-border: #1e5b40;
    --ucd-ok-text: #63d9a6;
    --ucd-ok-dot: #00bc7d;

    --ucd-warn-bg: #2d2310;
    --ucd-warn-border: #6b5416;
    --ucd-warn-text: #e8b360;

    /* err/info: style.css'te .flash--err/.flash--info/.badge--pdf sabit
       renkliydi, admin.css'te (aydınlıkta) yalnızca ok/warn tokenlanmıştı.
       Aşağıdaki 18.x bölümlerindeki override'lar için burada tanımlanıyor. */
    --ucd-danger-bg: #2e1516;
    --ucd-danger-border: #6b2a2a;
    --ucd-danger-text: #ff8a80;

    --ucd-info-bg: #14213a;
    --ucd-info-border: #2d4a75;
    --ucd-info-text: #8ab4ff;

    --ucd-border: rgba(255, 255, 255, 0.07);
    --ucd-border-strong: rgba(255, 255, 255, 0.12);
    --ucd-shadow-card: 0 2px 16px rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------------------------------
   18.1 Topbar — nav dropdown menüsü, pill/icon hover'ları, tema butonu.
   Bunlar rgba(0,0,0,..) sabitiyle yazılmıştı; karanlıkta neredeyse
   görünmez kalıyordu (siyah üstüne siyah). Ayrıca login.php'de topbar,
   oturum kapalıyken düz "Giriş" linki basıyor (.nav-pill DEĞİL,
   style.css'in ".topbar__nav a" kuralından geliyor, #374151/#111 sabit).
   ------------------------------------------------------------------ */
html[data-theme="dark"] .nav-pill:hover { background: rgba(255, 255, 255, 0.05); }
html[data-theme="dark"] .topbar__icon-btn:hover { background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .topbar__user:hover { background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .theme-toggle { color: var(--ucd-text); }
html[data-theme="dark"] .nav-dropdown__menu {
    background: var(--ucd-surface-2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .nav-dropdown__menu a:hover { background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .topbar__nav a { color: var(--ucd-text-muted); }
html[data-theme="dark"] .topbar__nav a:hover { color: var(--ucd-text); }

/* ------------------------------------------------------------------
   18.2 Form elemanları — style.css bu kontrollere background:#fff
   veriyordu; admin.css (aydınlıkta) yalnızca border-color/yazı rengini
   değiştiriyordu, zemin hep beyaz kalıyordu.
   ------------------------------------------------------------------ */
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=search],
html[data-theme="dark"] input[type=color],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: var(--ucd-tile-bg);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--ucd-text-muted);
    opacity: .75;
}
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled {
    background: var(--ucd-surface-2);
    color: var(--ucd-text-muted);
    opacity: .65;
}
/* label.checkbox / .checkbox-row label: style.css'in genel "label {color}"
   kuralından DAHA SPESİFİK olduğu için admin.css'in var(--ucd-text-muted)
   ataması bunlara ulaşmıyor, sabit #111 kalıyordu. */
html[data-theme="dark"] label.checkbox,
html[data-theme="dark"] .checkbox-row label {
    color: var(--ucd-text);
}
html[data-theme="dark"] .required,
html[data-theme="dark"] label > .required {
    color: var(--ucd-danger-text);
}

/* ------------------------------------------------------------------
   18.3 Tablolar — .table'ın kendi zemini (background:#fff) ve satır
   hover'ı (tr:hover td:#fafafa) style.css'ten geliyordu; admin.css
   yalnızca th zemini + border rengini değiştirmişti.
   ------------------------------------------------------------------ */
html[data-theme="dark"] .table { background: var(--ucd-surface); }
html[data-theme="dark"] .table tr:hover td { background: var(--ucd-tile-bg); }

/* ------------------------------------------------------------------
   18.4 Flash mesajları + info-box — admin.css'te yalnızca ok/warn
   tanımlıydı; err/info hiç ele alınmamıştı (style.css'in tam açık
   renkleri: err #fef2f2/#fecaca/#991b1b, info #eff6ff/#bfdbfe/#1e40af).
   ------------------------------------------------------------------ */
html[data-theme="dark"] .flash--err {
    background: var(--ucd-danger-bg);
    border-color: var(--ucd-danger-border);
    color: var(--ucd-danger-text);
}
html[data-theme="dark"] .flash--info {
    background: var(--ucd-info-bg);
    border-color: var(--ucd-info-border);
    color: var(--ucd-info-text);
}
/* .info-box--warn zaten admin.css bölüm 13'te tokenlı (otomatik uyarlanıyor) —
   :not() ile ondan ve --soft varyantından kaçınılıyor, aksi halde bu kuralın
   (html[data-theme="dark"] .info-box) yüksek specificity'si o var-tabanlı
   kuralı ezerdi. */
html[data-theme="dark"] .info-box:not(.info-box--soft):not(.info-box--warn) {
    background: var(--ucd-info-bg);
    border-color: var(--ucd-info-border);
    color: var(--ucd-info-text);
}
html[data-theme="dark"] .info-box--soft {
    background: var(--ucd-surface-2);
    border-color: var(--ucd-border);
    color: var(--ucd-text-muted);
}
html[data-theme="dark"] .empty { color: var(--ucd-text-muted); }

/* ------------------------------------------------------------------
   18.5 Rozetler — .badge (nötr) ve .badge--pdf style.css'in açık
   renkleriyle kalıyordu (.badge--ok/--warn zaten tokenlıydı, o yüzden
   burada da :not() ile dışlanıyor).
   ------------------------------------------------------------------ */
html[data-theme="dark"] .badge:not(.badge--ok):not(.badge--warn):not(.badge--pdf) {
    background: var(--ucd-tile-bg);
    color: var(--ucd-text-muted);
}
html[data-theme="dark"] .badge--pdf {
    background: var(--ucd-danger-bg);
    color: var(--ucd-danger-text);
}

/* ------------------------------------------------------------------
   18.6 Butonlar — .btn--danger admin.css'te yalnızca radius alıyordu,
   zemin/renk style.css'in açık kırmızısında kalmıştı.
   ------------------------------------------------------------------ */
html[data-theme="dark"] .btn--danger {
    background: var(--ucd-danger-bg);
    color: var(--ucd-danger-text);
    border-color: var(--ucd-danger-border);
}
html[data-theme="dark"] .btn--danger:hover {
    background: var(--ucd-danger-border);
    color: var(--ucd-danger-text);
}

/* ------------------------------------------------------------------
   18.7 Dashboard — kongre kartı + üst stat kartları. .dash-card ve
   .stat'ın "background" özelliği admin.css'te (aydınlıkta) hiç
   set edilmemişti (yalnızca border/radius/shadow) — style.css'in
   background:#fff'i karanlıkta da aynen geçerli kalıyordu.
   ------------------------------------------------------------------ */
html[data-theme="dark"] .dash-card { background: var(--ucd-surface); }
html[data-theme="dark"] .dash-card__title { color: var(--ucd-text); }
html[data-theme="dark"] .stat { background: var(--ucd-surface); }

/* Sertifika süreci bandı: tamamlanma donut'u (SVG) + yıldızlar (bkz.
   admin/lib/congress-card.php). ring__pct/ring__sub SVG <text> fill'i,
   ilk <circle> (track) ise SVG stroke özniteliğiyle geliyor — CSS bunu
   normal specificity ile ezebilir (presentation attribute, !important
   gerekmez). */
html[data-theme="dark"] .ring__pct { fill: var(--ucd-text); }
html[data-theme="dark"] .ring__sub { fill: var(--ucd-text-muted); }
html[data-theme="dark"] .cert-process__donut .ring circle:first-child {
    stroke: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .star--half {
    background: linear-gradient(90deg, #f59e0b 50%, rgba(255, 255, 255, 0.18) 50%);
    -webkit-background-clip: text;
    background-clip: text;
}
html[data-theme="dark"] .star--empty { color: rgba(255, 255, 255, 0.18); }

/* ------------------------------------------------------------------
   18.8 Giriş (login) kartı — .auth-card'ın "background" özelliği de
   (18.7'deki .dash-card/.stat gibi) hiç ezilmemişti.
   ------------------------------------------------------------------ */
html[data-theme="dark"] .section-auth .auth-card { background: var(--ucd-surface); }

/* ------------------------------------------------------------------
   18.9 Kongre raporu / anket sonuçları — funnel ve çubuk grafikler
   (congress-report.php, session-ratings.php, session-question-results.php).
   ------------------------------------------------------------------ */
html[data-theme="dark"] .funnel__bar { background: var(--ucd-tile-bg); }
html[data-theme="dark"] .funnel__label { color: var(--ucd-text-muted); }
html[data-theme="dark"] .funnel__num { color: var(--ucd-text); }
html[data-theme="dark"] .result {
    background: var(--ucd-surface);
    border-color: var(--ucd-border);
}
html[data-theme="dark"] .big-number { color: var(--ucd-text); }
html[data-theme="dark"] .bar-label { color: var(--ucd-text-muted); }
html[data-theme="dark"] .bar { background: var(--ucd-tile-bg); }
html[data-theme="dark"] .bar-num { color: var(--ucd-text-muted); }

/* ------------------------------------------------------------------
   18.10 Soru kartları (sürükle-bırak) — abstract-edit, committee-edit,
   session-edit, survey-edit ortak .qcard bileşeni (Sortable.js ghost/
   chosen class'ları). .qcard'dan SONRA tanımlanıyor ki eşit specificity'de
   kaynak sırası --ghost/--chosen'ın background/shadow'unu kazandırsın.
   ------------------------------------------------------------------ */
html[data-theme="dark"] .qcard {
    background: var(--ucd-surface);
    border-color: var(--ucd-border);
}
html[data-theme="dark"] .qcard--ghost { background: var(--ucd-primary-tint); }
html[data-theme="dark"] .qcard--chosen { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }
html[data-theme="dark"] .qcard__drag { color: var(--ucd-text-muted); }
html[data-theme="dark"] .qcard__drag:hover {
    background: var(--ucd-tile-bg);
    color: var(--ucd-text);
}

/* participants.php'nin gömülü <style> bloğu (toplu hatırlatma maili
   modalı) — .reminder-fs/.aud-row admin.css'te hiç tanımlı değildi. */
html[data-theme="dark"] .reminder-fs { border-color: var(--ucd-border-strong); }
html[data-theme="dark"] .reminder-fs legend { color: var(--ucd-text-muted); }
html[data-theme="dark"] .aud-row .aud-count { color: var(--ucd-text-muted); }

/* template-edit.php'nin gömülü <style> bloğu (şablon yükleme spinner'ı) */
html[data-theme="dark"] .upload-spinner {
    border-color: var(--ucd-border-strong);
    border-top-color: var(--ucd-primary);
}

/* ------------------------------------------------------------------
   18.11 Mail kuyruğu (send-progress.php) + e-posta hata popover'ı
   (participants.php .email-error-popover).
   ------------------------------------------------------------------ */
html[data-theme="dark"] .send-progress {
    background: var(--ucd-surface);
    border-color: var(--ucd-border);
}
html[data-theme="dark"] .send-progress__bar { background: var(--ucd-tile-bg); }
html[data-theme="dark"] .send-progress__stats { border-top-color: var(--ucd-border); }
html[data-theme="dark"] .send-progress__stat .label { color: var(--ucd-text-muted); }
html[data-theme="dark"] .send-progress__log {
    background: var(--ucd-surface-2);
    border-color: var(--ucd-border);
}
html[data-theme="dark"] .send-progress__log .ok { color: var(--ucd-ok-text); }
html[data-theme="dark"] .send-progress__log .fail { color: var(--ucd-danger-text); }
html[data-theme="dark"] .email-error-popover[open] .email-error-body {
    background: var(--ucd-surface-2);
    border-color: var(--ucd-danger-border);
    color: var(--ucd-danger-text);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------------------------------
   18.12 style="" inline'ında gelen sabit renkler (admin/*.php) — normal
   CSS bunları ezemez (inline stil her zaman kazanır), bu yüzden bilerek
   [style*="..."] öznitelik seçicisi + !important kullanılıyor. PHP
   dosyalarına dokunulmadı (bkz. rapor — floors.php img çerçevesi,
   session-types.php renk yüzükleri, participant-edit.php/sponsor-edit.php
   önizleme kutuları, participants.php/account.php ayraç çizgileri,
   congress-survey.php ayracı, congress-edit.php/send-progress.php metin
   renkleri, speakers.php baş harf rozeti çemberi).
   ------------------------------------------------------------------ */
html[data-theme="dark"] [style*="border:1px solid #e5e7eb"] {
    border-color: var(--ucd-border-strong) !important;
}
html[data-theme="dark"] [style*="border-top:1px solid #e5e7eb"] {
    border-top-color: var(--ucd-border-strong) !important;
}
html[data-theme="dark"] [style*="border-top:1px solid rgba(0,0,0,.06)"] {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] [style*="background:#f9fafb"] {
    background: var(--ucd-tile-bg) !important;
}
html[data-theme="dark"] [style*="background:#e5e7eb"] {
    background: var(--ucd-tile-bg) !important;
}
html[data-theme="dark"] [style*="color:#374151"] {
    color: var(--ucd-text-muted) !important;
}
html[data-theme="dark"] [style*="color:#111"] {
    color: var(--ucd-text) !important;
}
html[data-theme="dark"] [style*="color:#b91c1c"] {
    color: var(--ucd-danger-text) !important;
}
html[data-theme="dark"] [style*="color:#dc2626"] {
    color: var(--ucd-danger-text) !important;
}
html[data-theme="dark"] [style*="color:#065f46"] {
    color: var(--ucd-ok-text) !important;
}
html[data-theme="dark"] [style*="color:#1d4ed8"] {
    color: var(--ucd-info-text) !important;
}

/* ------------------------------------------------------------------
   18.13 Scrollbar (opsiyonel görsel iyileştirme) — color-scheme:dark
   zaten native form kontrollerini karanlığa uyarlıyor; bu yalnızca
   WebKit tabanlı tarayıcılarda scrollbar'ın panel paletiyle uyumlu
   görünmesi içindir.
   ------------------------------------------------------------------ */
html[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--ucd-bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--ucd-tile-bg);
    border-radius: 999px;
    border: 3px solid var(--ucd-bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--ucd-border-strong); }