/* ═══════════════════════════════════════════════════════════════════════
   E-İmza Doğrulama — tasarım sistemi

   Elle yazılmış, ~600 satır. npm yok, bundler yok, Bootstrap yok, jQuery yok.

   Gerekçe: uygulama tek bir etkileşimden ibaret — formu gönder, sonucu
   göster. Build zinciri olmaması, müşterinin operasyon ekibinin sunucuda
   bir rengi veya çeviri metnini değiştirebilmesi demek. Nonce'lu,
   'unsafe-inline' içermeyen bir CSP ise sunucu-render HTML ile kolay,
   bundler'larla acı verici.

   Ön yüz bağımlılık sayısı: 1 (htmx).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tasarım değişkenleri ──────────────────────────────────────────── */
:root {
    /* --brand yapılandırmadan geliyor (_Layout.cshtml, nonce'lu <style>). */
    --brand: #0b5cab;

    /* Marka rengi ZEMİN olarak kullanıldığında (düğme, şerit) üstüne beyaz
       yazı geldiği için sorun çıkmıyor. METİN olarak kullanıldığında ise
       zemine bağımlı: koyu temada #0b5cab, #1b2634 üzerinde 2.28:1 kalıyor
       — WCAG AA eşiği 4.5:1. Ölçüldü, tahmin değil (axe, gerçek Chromium).

       Bu yüzden metin rengi ayrı bir değişken. Açık temada marka renginin
       kendisi, koyu temada koyu zemin için tasarlanmış vurgudur. Marka
       rengi operatör tarafından değiştirilebildiği için koyu temada onu
       doğrudan kullanmak, kurulum başına yeniden kırılan bir kontrast
       demek olurdu. */
    --brand-text: var(--brand);

    --bg: #e9eff7;
    --surface: #ffffff;
    --surface-alt: #f5f8fc;
    --border: #dbe3ee;
    --border-strong: #b9c6d8;

    --text: #0d1a2d;
    --text-muted: #55647b;

    /* Durum renkleri. Hiçbiri TEK BAŞINA bilgi taşımaz — her rozette
       ikon ve metin de var (WCAG 2.1 §1.4.1). */
    --valid: #0b6e4f;
    --valid-bg: #e6f4ee;
    --invalid: #a4231c;
    --invalid-bg: #fbeceb;
    --warn: #8a5300;
    --warn-bg: #fdf3e3;
    --info: #0b5cab;
    --info-bg: #e9f2fb;

    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 1px 2px rgba(13, 26, 45, .05), 0 8px 28px -12px rgba(13, 26, 45, .16);

    --shell: 62rem;
    --gap: 1rem;

    /* ── Tipografi ─────────────────────────────────────────────────
       Şablon katmanı bu ikisini ezerek portalin yazı tipini
       değiştirebilir (bkz. css/sablonlar/*.css). Varsayılan sistem
       yığını: hiçbir dosya indirilmez, hiçbir dış istek çıkmaz.

       16 px taban değişmez: iOS Safari daha küçük yazıda formu
       otomatik yakınlaştırır ve kullanıcı sayfadan kopar. */
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: var(--font-body);
    --font-heading-weight: 650;

    /* ── Kurum kuşağı ──────────────────────────────────────────────
       Dördü de _Layout.cshtml'deki nonce'lu blokta operatör
       değerleriyle EZİLİR. Buradakiler yalnızca güvenli varsayılan:
       görsel yoksa kuşak düz marka rengiyle boyanır. */
    --hero-image: none;
    --hero-scrim: .62;
    --hero-height: 260px;
    --logo-size: 42px;

    color-scheme: light dark;
}

/* Koyu tema — işletim sistemi tercihine uyar. */
/*
   İki giriş, tek palet:

     • sistem koyu modda VE kullanıcı açığı seçmemişse
     • kullanıcı açıkça koyuyu seçmişse

   Değerler İKİ blokta da birebir aynı olmalı. Tek bir yerde toplamanın
   yolu `light-dark()` olurdu ama desteklemeyen bir tarayıcıda özelliğin
   TAMAMI geçersiz olur ve sayfa renksiz kalır — kamuya açık bir serviste
   göze alınacak bir risk değil. Tekrar bilinçli; birini değiştiren
   ötekini de değiştirmeli.
*/
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0e141c;
        --surface: #161f2b;
        --surface-alt: #1b2634;
        --border: #2a3646;
        --border-strong: #3c4c62;

        --text: #e6edf6;
        --text-muted: #9fb0c6;

        --valid: #58d98b;
        --valid-bg: #10301e;
        --invalid: #ff8f85;
        --invalid-bg: #3a1512;
        --warn: #ffc46b;
        --warn-bg: #362506;
        --info: #7bb8f0;
        --info-bg: #10243a;

        /* Koyu zeminde okunabilir vurgu (#7bb8f0 / #1b2634 ≈ 7:1). */
        --brand-text: #7bb8f0;

        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
    }
}

:root[data-theme="dark"] {
    --bg: #0e141c;
    --surface: #161f2b;
    --surface-alt: #1b2634;
    --border: #2a3646;
    --border-strong: #3c4c62;

    --text: #e6edf6;
    --text-muted: #9fb0c6;

    --valid: #58d98b;
    --valid-bg: #10301e;
    --invalid: #ff8f85;
    --invalid-bg: #3a1512;
    --warn: #ffc46b;
    --warn-bg: #362506;
    --info: #7bb8f0;
    --info-bg: #10243a;

    --brand-text: #7bb8f0;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
}

/* Form denetimleri de temayı izlesin (tarih seçici, kaydırma çubuğu…). */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* ── Temel ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    /* 16 px taban: iOS Safari daha küçük yazıda formu otomatik yakınlaştırır
       ve kullanıcı sayfadan kopar. */
    font: 400 16px/1.55 var(--font-body);
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

main.shell { flex: 1; padding-block: 2rem 3rem; }

h1, h2, h3, h4 {
    line-height: 1.25;
    margin: 0 0 .5rem;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
}

a { color: var(--brand-text); }
a:hover { text-decoration-thickness: 2px; }

code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    font-size: .92em;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: .05em .35em;
    overflow-wrap: anywhere;
}

/* Odak halkası her yerde görünür ve kaldırılmıyor. Klavye kullanıcısı için
   bu, sayfadaki tek yön duygusu. */
:focus-visible {
    outline: 3px solid var(--brand-text);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ── Erişilebilirlik yardımcıları ─────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--surface);
    color: var(--text);
    padding: .75rem 1.25rem;
    border: 2px solid var(--brand-text);
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ── Başlık ───────────────────────────────────────────────────────── */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    min-height: 4.25rem;
    flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }

/* Logo, başlıktaki kimliğin YERİNE geçer (metnin yanına değil). Bu yüzden
   biraz daha geniş bir tavan: yatay kilitli logolar 190 px'e sığmıyordu.
   Yükseklik operatörün LogoHeight değeri. */
.brand-logo {
    height: var(--logo-size);
    width: auto;
    max-width: min(280px, 52vw);
    object-fit: contain;
    flex: none;
}
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-title { font-weight: 650; font-size: 1.05rem; }
.brand-org { font-size: .82rem; color: var(--text-muted); }

/* ── Kurum kuşağı ─────────────────────────────────────────────────
   Kurum kimliğinin yaşadığı TEK yüzey. Arka plan görseli buradan
   aşağı geçmez: gövde metni her zaman düz, kontrastı bilinen bir
   zeminde durur. "Sayfanın arkasına fotoğraf" isteğinin okunabilirliği
   öldürmesi bu sınırla engelleniyor.
*/
.hero {
    position: relative;
    min-height: var(--hero-height);
    display: flex;
    align-items: flex-end;
    background-color: var(--brand);
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
    isolation: isolate;
}

/* Perde: kuşaktaki beyaz yazının okunabilirliğini taşıyan katman.
   Alta doğru koyulaşıyor çünkü yazı altta duruyor. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to top,
        rgba(6, 14, 26, calc(var(--hero-scrim) + .22)) 0%,
        rgba(6, 14, 26, var(--hero-scrim)) 55%,
        rgba(6, 14, 26, calc(var(--hero-scrim) * .55)) 100%);
}

.hero-inner { width: 100%; padding-block: 2.25rem 1.75rem; }

.hero-logo {
    display: block;
    height: calc(var(--logo-size) * 1.6);
    width: auto;
    max-width: 240px;
    object-fit: contain;
    margin-bottom: 1rem;
}

.hero-eyebrow {
    margin: 0 0 .5rem;
    color: #fff;
    opacity: .82;
    font-size: .76rem;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.hero-title {
    color: #fff;
    font-size: clamp(1.7rem, 1.15rem + 2.2vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.03em;
    text-wrap: balance;
    margin: 0;
}

.hero-lead { color: #fff; opacity: .92; margin: .7rem 0 0; max-width: 55rem; }

.header-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-inline-start: auto;
}

.lang { display: flex; gap: .35rem; }
.lang-form { margin: 0; }

/* ── Tema düğmesi ─────────────────────────────────────────────────
   İkon, GEÇİLECEK temayı değil MEVCUT temayı anlatır: açık temada ay
   (koyuya geçersin), koyu temada güneş. Erişilebilir adı app.js her
   değişimde güncelliyor; ikon tek başına anlam taşımıyor.
*/
.theme-btn {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    padding-inline: .55rem;
    color: var(--text-muted);
}
.theme-btn:hover { color: var(--text); background: var(--surface-alt); }

/* İki ikon da aynı hücrede; yalnızca biri görünür. */
.theme-btn .icon-sun,
.theme-btn .icon-moon { grid-area: 1 / 1; }

.theme-btn .icon-sun { display: none; }
.theme-btn .icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-btn .icon-sun { display: block; }
    :root:not([data-theme="light"]) .theme-btn .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-btn .icon-sun { display: block; }
:root[data-theme="dark"] .theme-btn .icon-moon { display: none; }
:root[data-theme="light"] .theme-btn .icon-sun { display: none; }
:root[data-theme="light"] .theme-btn .icon-moon { display: block; }

.lang-btn {
    font: inherit;
    font-size: .88rem;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    /* 44×44 px dokunma hedefi (WCAG 2.1 §2.5.5). */
    min-height: 44px;
    padding: .4rem .7rem;
    cursor: pointer;
}
.lang-btn:hover { background: var(--surface-alt); color: var(--text); }
.lang-btn.is-current {
    color: var(--brand-text);
    border-color: var(--border);
    background: var(--surface-alt);
    font-weight: 600;
}

/* ── Sayfa başlığı ────────────────────────────────────────────────── */
.page-title { font-size: 1.65rem; }
.page-lead { color: var(--text-muted); margin: 0 0 1.75rem; max-width: 46rem; }

/* ── Kart ve form ─────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin: 0 0 1.5rem;
}

fieldset.card { border-width: 1px; }

.field { margin-bottom: 1.25rem; }
.field:last-of-type { margin-bottom: 0; }

.label {
    display: block;
    font-weight: 600;
    font-size: .93rem;
    margin-bottom: .4rem;
}

.input {
    width: 100%;
    font: inherit;
    padding: .7rem .85rem;
    min-height: 44px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}
.input:focus { border-color: var(--brand-text); }

.input-code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .04em;
}

/* ── Belge alt bilgi şeridi ───────────────────────────────────────
   Kod girişi, kullanıcının kâğıtta baktığı yerin görünümünü alıyor.
   Kâğıt dokusu veya sahte gölge YOK: taklit değil, tanıma. Şerit
   kuşağın üstüne biniyor — kimlik ile içerik arasındaki eşik.
*/
.codestrip {
    position: relative;
    margin-top: -3.25rem;
    z-index: 3;
    padding-top: 1.15rem;
}

/* Cetvel çizgisi: resmî belgelerin alt bilgisini ayıran çizgi. */
.codestrip::before {
    content: "";
    position: absolute;
    inset-inline: 1.5rem;
    top: .62rem;
    height: 2px;
    background: var(--text);
    opacity: .13;
}

.codestrip-label {
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.codestrip-row { display: flex; align-items: stretch; gap: .75rem; }

.codestrip-input {
    font-size: clamp(1.15rem, .95rem + 1vw, 1.5rem);
    font-weight: 600;
    letter-spacing: .06em;
    background: var(--surface-alt);
}
.codestrip-input::placeholder { color: var(--text-muted); opacity: .65; font-weight: 500; }
.codestrip-input:focus { background: var(--surface); }

.codestrip-qr {
    flex: none;
    width: 64px;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    opacity: .55;
}

.input-captcha { max-width: 14rem; text-transform: uppercase; }

.help {
    margin: .4rem 0 0;
    font-size: .85rem;
    color: var(--text-muted);
}

.actions { margin-top: 1.5rem; }

/* ── Düğmeler ─────────────────────────────────────────────────────── */
/* ── [hidden] HER ZAMAN gizler ────────────────────────────────────────
   Tarayıcının kendi kuralı `[hidden] { display: none }` yazar ama bu, YAZAR
   kurallarından zayıftır: `.btn { display: inline-flex }` onu ezer ve
   `hidden` konmuş bir düğme ekranda kalmaya devam eder.

   Bu sessiz bir kusur: JavaScript `el.hidden = true` der, özellik gerçekten
   true olur, testler doğrular — ama kullanıcı düğmeyi görmeye devam eder.
   Doğrulama ekranındaki "Kod gönder" düğmesinde tam olarak böyle yakalandı.
   ------------------------------------------------------------------ */
[hidden] { display: none !important; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font: inherit;
    font-weight: 600;
    min-height: 44px;
    padding: .6rem 1.35rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }

.btn-ghost {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
    font-size: .9rem;
    padding: .45rem 1rem;
}
.btn-ghost:hover { background: var(--surface-alt); }

.btn[disabled], .btn.htmx-request { opacity: .65; cursor: progress; }

/* Bekleme göstergesi yalnızca istek sürerken görünür. */
.spinner { display: none; }
.btn.htmx-request .spinner {
    display: inline-block;
    width: 1em; height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Hareket azaltma tercihi olan kullanıcıda animasyon yok. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ── CAPTCHA ──────────────────────────────────────────────────────── */
/* Görsel, cevap kutusu ve yenileme TEK satırda: üçü aynı işin parçası.
   Kutuyu görselin altına atmak, kullanıcıyı gözüyle aşağı yukarı
   gezdiriyordu. Dar ekranda sarmalıyor. */
.captcha-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

.input-captcha { flex: 0 1 10rem; }

.captcha-image {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #fff;   /* görsel her temada aynı üretiliyor */
    max-width: 100%;
    height: auto;
}

.altcha {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    padding: .6rem .85rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
}

/* ── Sonuç bölgesi ────────────────────────────────────────────────── */
.result-region { margin-top: 1.75rem; }
.result-region:empty { margin-top: 0; }

.result-head { margin-bottom: 1.25rem; }
.result-title { font-size: 1.3rem; }
.result-count { color: var(--text-muted); margin: 0; }

/* ── Bildirimler ──────────────────────────────────────────────────── */
.notice {
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    background: var(--surface);
}
.notice p:last-child { margin-bottom: 0; }
.notice-title { font-size: 1.1rem; }

.notice-warn { border-left-color: var(--warn); background: var(--warn-bg); }
.notice-error { border-left-color: var(--invalid); background: var(--invalid-bg); }
.notice-info { border-left-color: var(--info); background: var(--info-bg); }

.reference { font-size: .88rem; color: var(--text-muted); }

/* ── Durum rozetleri ──────────────────────────────────────────────── */
/* İkon + metin + renk. Renk asla tek başına anlam taşımaz. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 650;
    padding: .3rem .7rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    white-space: nowrap;
    margin: 0;
}
.badge-icon { font-weight: 700; line-height: 1; }

.badge-valid { color: var(--valid); background: var(--valid-bg); }
.badge-invalid { color: var(--invalid); background: var(--invalid-bg); }
.badge-indeterminate { color: var(--warn); background: var(--warn-bg); }
.badge-unsigned { color: var(--text-muted); background: var(--surface-alt); }

/* ── Karar bloğu ──────────────────────────────────────────────────
   Sayfanın taşıdığı TEK bilgi. Üç kanaldan birden okunur:

     1. sol omurga  — gri tonda ve yazdırmada da ayırt edilir
     2. ikon        — renk körlüğünden bağımsız
     3. kelime      — asıl bilgi

   Dört durumun ağırlığı EŞİT. "Geçerli"yi büyütüp ötekileri küçültmek,
   ürünün en ciddi hatasının (değiştirilmiş PDF'in "Geçerli" görünmesi)
   sunum tarafındaki karşılığı olurdu.
*/
.verdict {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.1rem 1.25rem;
    border-inline-start: 6px solid var(--seal);
    background: var(--seal-bg);
}

.verdict-icon {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--seal);
    color: var(--surface);
    font-weight: 700;
    line-height: 1;
}

.verdict-body { min-width: 0; }

.verdict-word {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.018em;
    line-height: 1.2;
    color: var(--seal);
}

.verdict-desc { margin: .3rem 0 0; color: var(--text); font-size: .95rem; }

.verdict-valid { --seal: var(--valid); --seal-bg: var(--valid-bg); }
.verdict-invalid { --seal: var(--invalid); --seal-bg: var(--invalid-bg); }
.verdict-indeterminate { --seal: var(--warn); --seal-bg: var(--warn-bg); }
.verdict-unsigned { --seal: var(--text-muted); --seal-bg: var(--surface-alt); }

/* ── Belge kartı ──────────────────────────────────────────────────── */
.doc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 1.25rem;
    /* Karar bloğunun omurgası kartın kenarına dayanıyor. */
    overflow: hidden;
}

.doc-body { padding: 1.35rem 1.5rem; }

.doc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap);
    flex-wrap: wrap;
}

.doc-name { font-size: 1.08rem; overflow-wrap: anywhere; margin-bottom: .25rem; }

.doc-meta {
    margin: 0;
    font-size: .86rem;
    color: var(--text-muted);
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
}

.doc-status-desc { margin: .85rem 0 0; }

.doc-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1rem 0 0; }

.doc-secret { margin-top: 1rem; }

.reasons {
    margin: .85rem 0 0;
    padding-left: 1.15rem;
    font-size: .9rem;
    color: var(--text-muted);
}
.reasons li { margin-bottom: .2rem; }

.muted { color: var(--text-muted); font-size: .9rem; }

/* ── İmza tablosu ─────────────────────────────────────────────────── */
.sig-table-wrap { margin-top: 1.25rem; }

.sig-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.sig-table th, .sig-table td {
    text-align: start;
    padding: .6rem .65rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.sig-table thead th {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted);
    border-bottom-width: 2px;
}

.sig-detail-row td { border-bottom: 1px solid var(--border); padding-top: 0; }

.hint { color: var(--text-muted); cursor: help; }

.sig-details summary, .eyp-node > summary, .tech summary {
    cursor: pointer;
    font-weight: 600;
    font-size: .9rem;
    padding: .45rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: .5rem;
    /* Durum rozeti dosya adının yanında duruyor; uzun dosya adlarında
       telefonda alta sarsın, satırı taşırmasın. */
    flex-wrap: wrap;
}

/* Dosya adı uzun olduğunda rozeti dışarı itmesin. */
.eyp-node > summary > span:not(.tag):not(.badge) { overflow-wrap: anywhere; }

.sig-details[open] > summary { margin-bottom: .5rem; }

/* Anahtar/değer listesi */
.kv {
    display: grid;
    grid-template-columns: minmax(9rem, auto) 1fr;
    gap: .3rem .9rem;
    margin: .5rem 0 0;
    font-size: .88rem;
}
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

.thumb { font-size: .8rem; }

.sub-title { font-size: .95rem; margin: 1.1rem 0 .3rem; }

.tech pre {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .85rem;
    /* Teknik rapor uzun satırlar içerir; SAYFAYI değil kendini kaydırır. */
    overflow-x: auto;
    font-size: .8rem;
    max-height: 22rem;
}

/* ── e-Yazışma ağacı ──────────────────────────────────────────────── */
.eyp {
    margin-top: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
}

.eyp-root {
    cursor: pointer;
    padding: .85rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    font-weight: 650;
}

.eyp-title { font-size: 1rem; }
.eyp-subject { color: var(--text-muted); font-weight: 400; }

.eyp-body { padding: 0 1.1rem 1.1rem; }

.eyp-node {
    border-top: 1px solid var(--border);
    padding-left: .35rem;
}
.eyp-node > summary { padding: .55rem 0; }
.eyp-leaf { border-top: 1px dashed var(--border); margin-left: 1rem; }

.tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .15rem .45rem;
    border-radius: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

ul.plain { margin: .35rem 0 .75rem; padding-left: 1.15rem; font-size: .9rem; }

.digest-list { list-style: none; margin: .5rem 0 0; padding: 0; }

.digest {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .35rem .9rem;
    padding: .5rem .65rem;
    border-radius: var(--radius-sm);
    margin-bottom: .35rem;
    font-size: .9rem;
    border: 1px solid var(--border);
}
.digest-ok { background: var(--valid-bg); border-color: var(--valid); }
.digest-bad { background: var(--invalid-bg); border-color: var(--invalid); }
.digest-absent { background: var(--surface); color: var(--text-muted); }

.digest-name { font-weight: 600; }
.digest-state { white-space: nowrap; }

.digest-failures {
    grid-column: 1 / -1;
    margin: .35rem 0 0;
    padding-left: 1.15rem;
    font-size: .86rem;
}

/* ── Doğrulama özeti ──────────────────────────────────────────────── */
.summary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
}
.summary-title { font-size: 1.02rem; }

.summary-list {
    display: grid;
    grid-template-columns: minmax(10rem, auto) 1fr;
    gap: .3rem .9rem;
    margin: .75rem 0;
    font-size: .9rem;
}
.summary-list dt { color: var(--text-muted); }
.summary-list dd { margin: 0; overflow-wrap: anywhere; }

.summary-note { font-size: .84rem; color: var(--text-muted); margin: .75rem 0 1rem; }

/* ── Alt bilgi ────────────────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding-block: 1.25rem;
    font-size: .86rem;
    color: var(--text-muted);
}

/* ── Dar ekran: tablo → kart yığını ───────────────────────────────── */
/*
   Yatay kaydırma yerine kart yığını. İmza tablosu 5 sütunlu ve telefonda
   yatay kaydırmayla pratikte okunamıyor; her hücre kendi etiketiyle alt
   alta gelince okunur kalıyor.
*/
@media (max-width: 40rem) {
    .sig-table thead { display: none; }

    .sig-table, .sig-table tbody, .sig-table tr, .sig-table td { display: block; width: 100%; }

    .sig-table tr {
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        margin-bottom: .6rem;
        padding: .35rem .5rem;
    }

    .sig-detail-row { border: 0; padding: 0; margin-top: -.4rem; }
    .sig-detail-row td { padding-top: 0; }

    .sig-table td { border-bottom: 0; padding: .35rem .15rem; }

    .sig-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--text-muted);
    }

    .kv, .summary-list { grid-template-columns: 1fr; gap: .1rem; }
    .kv dt, .summary-list dt { margin-top: .5rem; }

    .doc-head { flex-direction: column; }
    .card, .doc-body { padding: 1.1rem; }
    .verdict { padding: .95rem 1rem; }

    /* Dar ekranda kuşak yüksekliğini operatörün değeri değil içerik
       belirlesin; 400 px'lik bir kuşak telefonda formu ekrandan atardı. */
    .hero { min-height: 0; }
    .hero-inner { padding-block: 1.75rem 1.5rem; }

    .codestrip { margin-top: -2.5rem; }
    .codestrip::before { inset-inline: 1.1rem; }
}

/* ── Yazdırma ─────────────────────────────────────────────────────── */
/*
   Vatandaşlar bu sayfayı delil olarak yazdırıyor. Bu yüzden yazdırmada
   TÜM <details> açılır — kapalı bir ayrıntı bloğu çıktıda sessizce
   kaybolurdu ve çıktı eksik bir belge olurdu.
*/
@media print {
    :root { --bg: #fff; --surface: #fff; --surface-alt: #fff; }

    body { background: #fff; color: #000; font-size: 11pt; }

    .site-header, .site-footer, .lang, .skip-link, .hero,
    #verify-form, .doc-actions, .print-btn, .btn { display: none !important; }

    /*
       Karar bloğu çıktıda KALIR ve okunur kalmalı. Çıktı çoğu zaman
       siyah beyaz; renk gidince geriye omurga ile ikon kalıyor —
       durumu taşıyan asıl iki kanal zaten onlar.
    */
    .verdict {
        background: none !important;
        color: #000 !important;
        border-inline-start: 6px solid #000;
        border-bottom: 1px solid #999;
        padding-inline-start: .75rem;
    }
    .verdict-word { color: #000 !important; }
    .verdict-icon { background: none !important; color: #000 !important; border: 1px solid #000; }

    details { display: block !important; }
    details > *:not(summary) { display: revert !important; }
    details summary { list-style: none; font-weight: 700; }
    details summary::marker, details summary::-webkit-details-marker { display: none; }

    .doc-card, .card, .summary, .eyp {
        box-shadow: none;
        border: 1px solid #999;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .sig-table { font-size: 9pt; }
    .sig-table th, .sig-table td { border-bottom: 1px solid #ccc; }

    .badge { border: 1px solid #000; color: #000 !important; background: none !important; }

    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; }

    .tech pre { max-height: none; overflow: visible; white-space: pre-wrap; }
}

/* ── İmza sayfası ─────────────────────────────────────────────────────
   PDF önizlemesi. Yükseklik viewport'a göre: sabit bir piksel değeri
   küçük ekranlarda belgeyi okunmaz, büyük ekranlarda ise sayfanın geri
   kalanını (kart seçimi, PIN) ekran dışına iterdi.
   ------------------------------------------------------------------ */
.pdf-preview {
    width: 100%;
    height: min(70vh, 800px);
    min-height: 320px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
}

@media (max-width: 640px) {
    /* Dar ekranda gömülü PDF görüntüleyici zaten kullanışsız; alanı
       daraltıp sayfanın geri kalanına yer açıyoruz. */
    .pdf-preview { height: 50vh; }
}

/* ── İmza sayfası: doküman listesi ────────────────────────────────────
   Bir talep birden fazla belge taşıyabiliyor ve kullanıcı hangilerini
   imzalayacağını buradan seçiyor. Belgenin İÇERİĞİ listede gösterilmiyor:
   onlarca satırlık bir talepte gömülü önizlemeler sayfayı kullanılamaz
   hâle getirir ve hepsini indirmek gereksiz onlarca çağrı demektir.
   ------------------------------------------------------------------ */
.kayit-listesi {
    width: 100%;
    border-collapse: collapse;
    margin: .75rem 0;
}

.kayit-listesi th,
.kayit-listesi td {
    text-align: start;
    padding: .55rem .5rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.kayit-listesi th {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-strong);
}

.kayit-listesi .kol-sec { width: 2.5rem; }
.kayit-listesi .kol-tur { width: 5rem; }
.kayit-listesi .kol-durum { width: 11rem; }
.kayit-listesi .kol-islem { width: 16rem; white-space: nowrap; }

.kayit-ad { display: block; font-weight: 600; overflow-wrap: anywhere; }
.kayit-alt { display: block; font-size: .85rem; overflow-wrap: anywhere; }

/* Kapalı satır SOLGUN ama okunur kalıyor: kullanıcı neyi imzaladığını
   görmeye devam etmeli. Bilgi yalnızca renkle taşınmıyor — rozetin metni
   de değişiyor (WCAG 2.1 §1.4.1). */
.kayit-kapali { opacity: .68; }

.rozet {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: var(--radius-sm);
    font-size: .82rem;
    font-weight: 600;
    background: var(--surface-alt);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.rozet-ok { background: var(--valid-bg); color: var(--valid); border-color: var(--valid); }
.rozet-uyari { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.rozet-pas { background: var(--surface-alt); color: var(--text-muted); }

@media (max-width: 720px) {
    /* Sütun GİZLENMİYOR, tablo kaydırılıyor. Tür sütunu imza rozetini
       taşıyor ve "bu belge imzalı" bilgisi dar ekranda da görünmeli;
       gizlenen bir sütun, kullanıcının hiç bilmediği bir bilgi demektir. */
    .kayit-listesi .kol-islem { width: auto; white-space: normal; }
}

/* Geniş tablo KENDİ içinde kayar; sayfa gövdesi yatay kaymaz. */
.tablo-kaydir { overflow-x: auto; }
.tablo-kaydir > .kayit-listesi { min-width: 46rem; }

/* Kart başlığı + sağda bir eylem (önizlemeyi kapat).
   baseline değil center hizalama: düğme başlıktan yüksek ve baseline'da
   hizalandığında metne göre aşağı kayıyor. */
.kart-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.kart-baslik h2 { margin: 0; }

/* (Kullanılmıyor) İmza biçimi bir zamanlar kart panelinde radyo düğmeleriydi;
   artık doküman listesinde satır başına seçiliyor. Stil, benzer bir alan
   gerektiğinde diye duruyor. */
.bicim-secimi {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem 1rem;
    margin: 0 0 1rem;
}

.bicim-secimi legend {
    padding: 0 .35rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--text-muted);
}

.bicim-secimi label {
    display: block;
    margin: .35rem 0;
    cursor: pointer;
}

.bicim-secimi input[type=radio] { margin-inline-end: .45rem; }
.bicim-secimi p { margin: .6rem 0 0; }


/* ── Doküman listesi: tür, biçim, imza rozeti ─────────────────────────── */

.kayit-listesi .kol-bicim { width: 9rem; }

/* Başlıktaki "Tümü…" bir KISAYOL, bir durum değil: etiketten sonra ayrı
   satıra alınıyor ki sütun başlığıyla karışmasın. */
.kayit-listesi th.kol-bicim label { display: block; }

.kayit-listesi th.kol-bicim select,
.kayit-bicim,
.kayit-uzanti {
    width: 100%;
    max-width: 8rem;
    font: inherit;
    font-size: .9rem;
    padding: .3rem .4rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

.kayit-listesi th.kol-bicim select {
    margin-top: .25rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

.tur-ad { display: block; }

/* Uzantı kutusu biçimin ALTINDA: ikisi yan yana dizildiğinde sütun taşıyor
   ve hangisinin neyi seçtiği okunmuyor. */
.kayit-uzanti { margin-top: .3rem; }

/* İmza rozeti bir DÜĞME, bir etiket değil: tıklanınca ayrıntı açılıyor ve
   klavyeyle de ulaşılabilmeli. Görünüşü rozet, davranışı düğme. */
.imza-rozeti {
    display: inline-block;
    margin-top: .3rem;
    padding: .1rem .45rem;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--info);
    background: var(--info-bg);
    border: 1px solid var(--info);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.imza-rozeti:hover { filter: brightness(1.06); }

.imza-rozeti:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}



/* ── İmza bulguları ───────────────────────────────────────────────────
   "Bozuk" tek olumsuz hükümdür ve kırmızıyla ayrılıyor. "Bozulmamış" yeşil
   ama METİN de değişiyor — renk tek başına bilgi taşımaz (WCAG 2.1 §1.4.1)
   ve daha önemlisi "yeşil = geçerli" okuması yanlış olur.
   ------------------------------------------------------------------ */
.rozet-bozuk {
    background: var(--invalid-bg);
    color: var(--invalid);
    border-color: var(--invalid);
}

.imza-rozeti-bozuk {
    color: var(--invalid);
    background: var(--invalid-bg);
    border-color: var(--invalid);
}

.zaman-notu {
    display: inline-block;
    margin-top: .2rem;
    font-weight: 400;
}

/* Kapsam notu: ne denetlendi / ne denetlenmedi. Karttan görsel olarak
   ayrılıyor ki gözden kaçmasın. */
.kapsam-notu {
    /* .notice-warn yalnızca rengi veriyor; kenarlığın kendisi .notice'tan
       geliyor ve bu kutu .notice değil. Şeridi burada kuruyoruz. */
    border-inline-start: 4px solid var(--warn);
    padding: .75rem 1rem;
    border-radius: var(--radius-sm);
    margin: 0 0 1rem;
}

.kapsam-notu p { margin: 0 0 .5rem; }
.kapsam-notu p:last-child { margin-bottom: 0; }

/* ── Kimlik doğrulama ekranı ──────────────────────────────────────────
   Kod alanı geniş ve aralıklı: kullanıcı altı haneyi elle yazıyor ve
   dar bir alanda hane atlamak, boşa giden bir deneme hakkı demek. */
/* İmza sayfasının kendi alanları .input sınıfını kullanmıyor (statik SSR,
   sade işaretleme); aynı görünümü burada kimliğe göre veriyoruz. */
#dogrulama-karti input[type="email"],
#dogrulama-karti input[type="text"] {
    font: inherit;
    padding: .7rem .85rem;
    min-height: 44px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

#dogrulama-karti input:focus { border-color: var(--brand-text); }

#dogrulama-email { width: min(100%, 22rem); }

#dogrulama-kod {
    width: 9rem;
    font-size: 1.35rem;
    letter-spacing: .35em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

#dogrulama-karti label { display: block; margin-bottom: .3rem; }
#dogrulama-karti input[readonly] { opacity: .75; }