/* ═══════════════════════════════════════════════════════════════════════
   "saas" — koyu "executive" tek sayfa: mono adım çipleri, 8/4 ızgara,
   sağda amber çerçeveli yapışkan imza kartı.

   Kaynak tasarım: Prototype2DarkStudio.tsx (koyu zemin #090D16, amber
   vurgu, slate yüzeyler). Zincir: site.css → archivo.css → plexmono.css →
   BU DOSYA. modernist-taban.css bilerek zincirde YOK: bu dosya kendi
   tipografi token'larını ve adım-durum matrisini kendisi veriyor.

   ── KOYU-SABİT tema: bilinçli istisna ────────────────────────────────
   Prototip tek temalı; kullanıcı bu görüntüyü istedi. site.css'in koyu
   blokları `:root:not([data-theme="light"])` (0,2,0) ile yazılı ve
   data-theme hiçbir yerde set edilmediği için OS koyu modda HER ZAMAN
   eşleşir — düz `:root` (0,1,0) onları geçemez. Bu yüzden aşağıdaki
   token bloğu dört seçiciyle birden yazılıyor. (murekkep için "hep koyu"
   fikri erişilebilirlik gerekçesiyle reddedilmişti; burada bilerek
   uygulanıyor — bkz. .claude/memory/uc-yeni-portal-sablonu-eklendi.md.)

   ── --brand YALNIZCA düz :root'ta ─────────────────────────────────────
   MarkaDegiskenleri.razor operatörün PrimaryColor'ını düz `:root { --brand }`
   ile, bu dosyadan SONRA basıyor. --brand da (0,2,0) seçicilere konsaydı
   operatör rengi hiç uygulanmazdı (mevcut şablonların koyu bloklarında bu
   hata var; buraya kopyalanmadı). site.css koyu blokları --brand'ı
   ezmediği için düz :root yeterli.

   ── display: … !important YASAK ───────────────────────────────────────
   site.css:497 `[hidden] { display:none !important }` sign.js'in tüm
   hidden toggle'larını (tablo, .kayit-uzanti, .imza-rozeti, #kart-satiri,
   modallar…) ancak böyle koruyor. Bu dosyadaki hiçbir display kuralı
   !important taşımaz.

   ── Doküman listesi: tablo DOM'u aynı, görünüm CSS-grid ─────────────
   `#kayit-listesi tbody tr { display:grid }` — kural KİMLİKLE kapsanıyor;
   .kayit-listesi sınıfını #imza-detay-listesi (7 sütun) ve #sonuc-listesi
   de taşıyor, sınıfla yazılsaydı modallardaki tablolar dağılırdı.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --brand: #f59e0b;
}

:root,
:root:not([data-theme="light"]),
:root[data-theme="light"],
:root[data-theme="dark"] {
    --brand-text: #fbbf24;

    --bg: #090d16;
    --surface: #111827;
    --surface-alt: #0f172a;
    --border: #1e293b;
    --border-strong: #334155;

    --text: #f1f5f9;
    --text-muted: #94a3b8;

    --valid: #34d399;
    --valid-bg: rgba(2, 44, 34, .6);
    --invalid: #fb7185;
    --invalid-bg: rgba(76, 5, 25, .4);
    --warn: #fbbf24;
    --warn-bg: rgba(120, 53, 15, .35);
    --info: #fbbf24;
    --info-bg: rgba(245, 158, 11, .1);

    --radius: 16px;
    --radius-sm: 12px;
    --shadow: 0 20px 25px -5px rgba(0, 0, 0, .35), 0 8px 10px -6px rgba(0, 0, 0, .3);

    --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-heading: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-heading-weight: 800;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

    /* Sign.razor'daki test-imza kutusunun inline stilleri bu üçünü
       fallback'li okuyor — burada tanımlanınca !important'sız temaya girer. */
    --bg-surface-elevated: #0f172a;
    --border-subtle: #1e293b;
    --accent: #fbbf24;

    /* Yüzey tonları (Tailwind slate-800/900/950 karşılıkları). */
    --sa-slate-800: #1e293b;
    --sa-slate-900: #0f172a;
    --sa-slate-950: #020617;
    --sa-amber-10: rgba(245, 158, 11, .1);
    --sa-amber-20: rgba(245, 158, 11, .2);
    --sa-amber-30: rgba(245, 158, 11, .3);

    /* İkonlar: harici paket yok, currentColor ile boyanan CSS mask'ler. */
    --sa-ikon-belge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E");
    --sa-ikon-onay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
    --sa-ikon-goz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    --sa-ikon-cop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
    --sa-ikon-bulut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 16l-4-4-4 4'/%3E%3Cpath d='M12 12v9'/%3E%3Cpath d='M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3'/%3E%3C/svg%3E");
    --sa-ikon-yenile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E");
    --sa-ikon-kilit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    --sa-ikon-kalem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='15' r='4'/%3E%3Cpath d='M11 12l7-7 3 3-2 2h-3v3'/%3E%3C/svg%3E");
    --sa-ikon-tik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 8'/%3E%3C/svg%3E");

    color-scheme: dark;
}

/* Mask'li ikon — bir pseudo-elemana `--sa-ikon` verilip bu sınıf ruhu
   uygulanıyor. Her yerde iki satır (mask + -webkit-mask) yazmamak için
   ortak kural; Safari hâlâ önekli sürümü istiyor. */
.sa-ikonlu::before,
.kayit-onizle::before,
.kayit-cikar::before,
.kayit-sil::before,
.imza-rozeti::before,
#kart-yenile::before,
#imzala::before,
#yukleme-karti::before,
#kayit-listesi tbody tr::after,
.sa-adim-ad::after,
.sa-imza-ikon,
#sonuc-paneli > h2::before {
    mask: var(--sa-ikon) center / contain no-repeat;
    -webkit-mask: var(--sa-ikon) center / contain no-repeat;
    background-color: currentColor;
}

/* ═══════════════════════════════════════════════════════════════════════
   Site başlığı → prototipin "● MECHSOFT E-İMZA EXECUTIVE" eyebrow'u
   ═══════════════════════════════════════════════════════════════════════ */
.site-header {
    background: var(--bg);
    border-bottom: 0;
}
.site-header .shell { max-width: 72rem; }
.site-header .header-row {
    min-height: 0;
    padding-block: 1.5rem 0;
}

.brand-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(251, 191, 36, .9);
}
.brand-title::before {
    content: "";
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--brand-text);
    animation: sa-nabiz 2s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes sa-nabiz { 50% { opacity: .45; } }

.brand-org {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: .15rem;
}

.site-footer {
    background: var(--bg);
    border-top-color: var(--border);
    font-size: .78rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   main: h1 (Sign.razor:11) solda, adım çipleri sağda — AYNI satır.
   DynamicComponent sarmalayıcı üretmediği için .sa-adimlar main'in
   doğrudan çocuğu; main iki sütunlu grid oluyor.

   Özgüllük: "geri kalan her şey tam satır" kuralı `> :not(...)` ile
   (0,2,1); h1/çip yerleşimi AYNI ön ekle yazılmazsa (düz .page-title
   0,1,0) o kural onları ezer ve ikisi alt alta düşer.
   ═══════════════════════════════════════════════════════════════════════ */
main.shell:has(> .sa-adimlar) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 2rem;
    max-width: 72rem;
    padding-block: .35rem 3rem;
}
main.shell:has(> .sa-adimlar) > :not(.page-title, .sa-adimlar) { grid-column: 1 / -1; }
main.shell:has(> .sa-adimlar) > .page-title {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.15;
    color: #fff;
}
main.shell:has(> .sa-adimlar) > .sa-adimlar {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
}

.sa-ayrac {
    width: 100%;
    margin: 1.25rem 0 1.75rem;
    border: 0;
    border-top: 1px solid var(--border);
}

/* ── Adım çipleri ────────────────────────────────────────────────────
   01 KİMLİK ✓ ➔ 02 BELGELER & İMZA ➔ 03 SONUÇ. Oklar çipin DIŞINDA
   (mutlak konumlu ::after; ::before çipin içine düşerdi). */
.sa-adimlar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1.75rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sa-adim {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .75rem;
    border-radius: .5rem;
    border: 1px solid var(--border);
    background: rgba(15, 23, 42, .6);
    color: #64748b;
    white-space: nowrap;
}
.sa-adim:not(:last-child)::after {
    content: "➔" / "";
    position: absolute;
    right: -1.35rem;
    top: 50%;
    transform: translateY(-50%);
    color: #475569;
    pointer-events: none;
}
.sa-adim-ad { display: inline-flex; align-items: center; gap: .35rem; }
.sa-adim-ad::after {
    content: "";
    width: .85rem;
    height: .85rem;
    display: none;
    --sa-ikon: var(--sa-ikon-onay);
}

/* Sırada olan durak: amber. data-adim 1..4 → çip 1 / 2 / 2 / 3 (adım 2
   "belgeler" ve 3 "imza" tek çipte birleşik). */
.sa-adimlar[data-adim="1"] .sa-adim:nth-child(1),
.sa-adimlar[data-adim="2"] .sa-adim:nth-child(2),
.sa-adimlar[data-adim="3"] .sa-adim:nth-child(2),
.sa-adimlar[data-adim="4"] .sa-adim:nth-child(3) {
    background: var(--sa-amber-10);
    border-color: var(--sa-amber-30);
    color: #fcd34d;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* Tamamlanmış duraklar: yeşil + onay ikonu. */
.sa-adimlar[data-adim="2"] .sa-adim:nth-child(-n+1),
.sa-adimlar[data-adim="3"] .sa-adim:nth-child(-n+1),
.sa-adimlar[data-adim="4"] .sa-adim:nth-child(-n+2) {
    background: rgba(2, 44, 34, .4);
    border-color: rgba(6, 95, 70, .4);
    color: var(--valid);
}
.sa-adimlar[data-adim="2"] .sa-adim:nth-child(-n+1) .sa-adim-ad::after,
.sa-adimlar[data-adim="3"] .sa-adim:nth-child(-n+1) .sa-adim-ad::after,
.sa-adimlar[data-adim="4"] .sa-adim:nth-child(-n+2) .sa-adim-ad::after { display: inline-block; }

/* Ekran okuyucu durum sözcükleri (tamam/sırada/bekliyor): üçü de
   markup'ta, YALNIZCA aktif olan görünür kalsın (sr-only sarmalayıcı
   görsel gizler, okunmayı engellemez — bu matris onu düzenler). */
.sa-d { display: none; }
.sa-d-sonra { display: inline; }

.sa-adimlar[data-adim="1"] .sa-adim:nth-child(1) .sa-d,
.sa-adimlar[data-adim="2"] .sa-adim:nth-child(2) .sa-d,
.sa-adimlar[data-adim="3"] .sa-adim:nth-child(2) .sa-d,
.sa-adimlar[data-adim="4"] .sa-adim:nth-child(3) .sa-d { display: none; }
.sa-adimlar[data-adim="1"] .sa-adim:nth-child(1) .sa-d-simdi,
.sa-adimlar[data-adim="2"] .sa-adim:nth-child(2) .sa-d-simdi,
.sa-adimlar[data-adim="3"] .sa-adim:nth-child(2) .sa-d-simdi,
.sa-adimlar[data-adim="4"] .sa-adim:nth-child(3) .sa-d-simdi { display: inline; }

.sa-adimlar[data-adim="2"] .sa-adim:nth-child(-n+1) .sa-d,
.sa-adimlar[data-adim="3"] .sa-adim:nth-child(-n+1) .sa-d,
.sa-adimlar[data-adim="4"] .sa-adim:nth-child(-n+2) .sa-d { display: none; }
.sa-adimlar[data-adim="2"] .sa-adim:nth-child(-n+1) .sa-d-tamam,
.sa-adimlar[data-adim="3"] .sa-adim:nth-child(-n+1) .sa-d-tamam,
.sa-adimlar[data-adim="4"] .sa-adim:nth-child(-n+2) .sa-d-tamam { display: inline; }

/* ═══════════════════════════════════════════════════════════════════════
   Gövde ızgarası
   ═══════════════════════════════════════════════════════════════════════ */
.sa-tek { max-width: 40rem; }

.sa-izgara {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 1.5rem;
    align-items: start;
}

.sa-ana > .card { margin: 0 0 1.5rem; }
.sa-ana > .card:last-child { margin-bottom: 0; }

.sa-yan {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.sa-yan .card { margin: 0; }

/* ── Kart / düğme / bildirim temel görünümü ─────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.sa-eyebrow {
    margin: 0;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-text);
}

.btn { border-radius: var(--radius-sm); font-weight: 600; }
.btn:not(.btn-primary):not(.btn-ghost),
.btn-ghost {
    background: var(--sa-slate-800);
    border-color: var(--border-strong);
    color: #e2e8f0;
}
.btn:not(.btn-primary):hover { background: #273449; }

.notice { border-radius: var(--radius-sm); }

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

/* Form denetimleri: koyu zemin, odakta amber kenar. */
select,
input[type="password"],
input[type="text"],
input[type="email"] {
    font: inherit;
    color: var(--text);
    background: var(--sa-slate-900);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}
select:focus, input:focus { border-color: var(--brand-text); }
input[type="checkbox"] { accent-color: var(--brand); }

/* ═══════════════════════════════════════════════════════════════════════
   Doküman kartı #kayit-karti — Sign.razor markup'ı sabit; görünüm CSS.
   Çocuklar sırayla: h2, p.muted (açıklama), .tablo-kaydir > table,
   p#liste-bos, p#cikarilan-not, p.muted (alt not).
   ═══════════════════════════════════════════════════════════════════════ */
#kayit-karti {
    padding: 0;
    overflow: hidden;
}

/* Eyebrow burada CSS içeriği: kartın h2'si Sign.razor'da, düzen araya
   markup sokamıyor. Ekran okuyucu "Adım 2 · Belgeler İmzalanacak
   dokümanlar" okur — kabul edilen tek istisna. */
#kayit-karti > h2 {
    margin: 0;
    padding: 1.25rem 1.5rem 0;
    font-size: 1.1rem;
    color: #fff;
}
#kayit-karti > h2::before {
    content: "Adım 2 · Belgeler";
    display: block;
    margin-bottom: .15rem;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-text);
}
#kayit-karti > h2 + p.muted {
    margin: .25rem 0 0;
    padding: 0 1.5rem 1rem;
    font-size: .75rem;
}
#kayit-karti > p.muted:last-child {
    margin: 0;
    padding: .85rem 1.5rem;
    border-top: 1px solid var(--border);
    background: rgba(15, 23, 42, .5);
    font-size: .72rem;
}
#liste-bos,
#cikarilan-not {
    margin: 0;
    padding: 1rem 1.5rem;
    font-size: .8rem;
}

/* ── Tablo → kart-satır ─────────────────────────────────────────────── */
.tablo-kaydir > #kayit-listesi { min-width: 0; }

#kayit-listesi {
    display: block;
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}
#kayit-listesi thead,
#kayit-listesi tbody { display: block; }

/* Başlık satırı → araç çubuğu: yalnız "Tümünü seç" ve "Biçim / uzantı"
   kısayolu kalıyor. Sütun başlıkları gizli — kart-satırda sütun yok. */
#kayit-listesi thead tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    padding: .75rem 1.5rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: rgba(15, 23, 42, .5);
}
#kayit-listesi th {
    display: none;
    width: auto;
    padding: 0;
    border: 0;
    font-size: .75rem;
    text-transform: none;
    letter-spacing: 0;
    color: #cbd5e1;
}
#kayit-listesi th.kol-sec,
#kayit-listesi th.kol-bicim {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
/* "Tümünü seç" etiketi th üzerinde: input replaced element, kendi
   ::after'ını çizmez. Checkbox'ın aria-label'ı zaten var. */
#kayit-listesi th.kol-sec {
    padding: .4rem .8rem;
    border: 1px solid var(--border-strong);
    border-radius: .75rem;
    background: rgba(30, 41, 59, .8);
    font-weight: 600;
    cursor: pointer;
}
#kayit-listesi th.kol-sec:hover { background: rgba(51, 65, 85, .8); }
#kayit-listesi th.kol-sec::after { content: "Tümünü seç"; }
#kayit-listesi th.kol-sec input { width: 1rem; height: 1rem; margin: 0; cursor: pointer; }

#kayit-listesi th.kol-bicim label {
    display: inline;
    font-weight: 500;
    color: var(--text-muted);
}
#kayit-listesi th.kol-bicim select {
    width: auto;
    max-width: none;
    margin: 0;
    padding: .35rem 1.6rem .35rem .6rem;
    font-size: .72rem;
    font-family: var(--font-mono);
    border-radius: .75rem;
}

/* Satır: 7 sütunlu grid, 2 satırlı alan haritası.
   ┌sec┬ikon┬ ad ─┬ tur ──────────┬ (boşluk) ┬ islem ┐
   │   │    │ alt │ bicim │ durum │          │       │
   6. sütun (.) 1fr'lik BOŞLUK: fr izler ölçümde donuk kaldığı için
   (CSS Grid §12.5 "infinite growth limit → base size") serbest alan önce
   ad sütununa (adın tam genişliğine kadar) gider, artan boşluğa. Böylece
   rozetler adın hemen yanında durur, düğmeler sağa yaslanır; yer daralınca
   overflow:hidden'lı ad (otomatik min genişlik 0) kırpılır, ötekiler
   birbirinin üstüne binmez. */
#kayit-listesi tbody tr {
    display: grid;
    grid-template-columns: auto auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
        "sec ikon ad  tur   tur   . islem"
        "sec ikon alt bicim durum . islem";
    column-gap: .6rem;
    row-gap: .3rem;
    align-items: center;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid rgba(30, 41, 59, .7);
    background: rgba(15, 23, 42, .3);
    transition: background .15s ease;
}
#kayit-listesi tbody tr:hover { background: rgba(15, 23, 42, .6); }
#kayit-listesi tbody tr:last-child { border-bottom: 0; }

/* Seçimi kaldırılmış / kapalı satır soluk (bilgi yalnızca renkle
   taşınmıyor: durum rozetinin metni de değişiyor). */
#kayit-listesi tbody tr:has(.kayit-sec:not(:checked)),
#kayit-listesi tbody tr.kayit-kapali {
    opacity: .6;
    background: rgba(2, 6, 23, .4);
}

#kayit-listesi td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    white-space: normal;
}

#kayit-listesi td.kol-sec {
    grid-area: sec;
    min-width: 1rem;   /* kapalı satırda hücre boş — hizalama kaymasın */
}
#kayit-listesi td.kol-sec input { width: 1rem; height: 1rem; margin: 0; cursor: pointer; display: block; }

/* Dosya ikonu kutusu: ::before kutu, ::after aynı alanda ikon (aynı grid
   alanına düşen iki öğe üst üste biner). */
#kayit-listesi tbody tr::before {
    content: "";
    grid-area: ikon;
    place-self: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .75rem;
    background: var(--sa-amber-10);
    border: 1px solid var(--sa-amber-20);
}
#kayit-listesi tbody tr::after {
    content: "";
    grid-area: ikon;
    place-self: center;
    width: 1.2rem;
    height: 1.2rem;
    color: var(--brand-text);
    --sa-ikon: var(--sa-ikon-belge);
}

/* Ad hücresi display:contents → .kayit-ad ve .kayit-alt ayrı grid öğesi;
   böylece ad üst satırda rozetlerin yanında, alt bilgi alt satırda. */
#kayit-listesi tbody td:nth-child(2) { display: contents; }
.kayit-ad {
    grid-area: ad;
    display: block;
    max-width: 26rem;
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
}
.kayit-alt {
    grid-area: alt;
    display: block;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--text-muted);
    /* Kırpılabilir: aksi hâlde alt satırın min-content genişliği ad sütununu
       kilitler ve serbest alan ada gitmez. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
}

/* Tür + mevcut imza rozeti */
#kayit-listesi td.kol-tur {
    grid-area: tur;
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}
.tur-ad {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: .3rem;
    border: 1px solid var(--border-strong);
    background: var(--sa-slate-800);
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 600;
    color: #cbd5e1;
    white-space: nowrap;
}
.imza-rozeti {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
    padding: .15rem .5rem;
    border-radius: .3rem;
    border: 1px solid rgba(6, 95, 70, .35);
    background: var(--valid-bg);
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 600;
    color: #6ee7b7;
    white-space: nowrap;
}
.imza-rozeti::before {
    content: "";
    width: .75rem;
    height: .75rem;
    --sa-ikon: var(--sa-ikon-onay);
}
.imza-rozeti-bozuk {
    color: var(--invalid);
    background: var(--invalid-bg);
    border-color: rgba(251, 113, 133, .4);
}

/* Biçim / uzantı: prototipteki "CAdES .pdf" rozeti, ama SEÇİLEBİLİR —
   biçim satır başına gerçek bir karar (Sign.razor:192-196). */
#kayit-listesi td.kol-bicim {
    grid-area: bicim;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.kayit-bicim,
.kayit-uzanti {
    width: auto;
    max-width: none;
    margin: 0;
    padding: .15rem 1.35rem .15rem .5rem;
    border-radius: .3rem;
    border: 1px solid rgba(245, 158, 11, .25);
    background: var(--sa-slate-800);
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 600;
    color: #fcd34d;
    cursor: pointer;
}

/* Durum: "Durum: Bekliyor" düz metin (kutu yok). */
#kayit-listesi td.kol-durum {
    grid-area: durum;
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    color: var(--text-muted);
}
#kayit-listesi td.kol-durum::before { content: "Durum:"; }
#kayit-listesi .rozet {
    padding: 0;
    border: 0;
    background: none;
    font-size: .72rem;
    font-weight: 600;
    color: var(--brand-text);
}
#kayit-listesi .rozet-ok { color: var(--valid); }
#kayit-listesi .rozet-uyari { color: var(--invalid); }
#kayit-listesi .rozet-pas { color: var(--text-muted); }

/* İşlem düğmeleri */
#kayit-listesi td.kol-islem {
    grid-area: islem;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}
.kayit-onizle,
.kayit-cikar,
.kayit-sil {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 0;
    padding: .4rem .7rem;
    border-radius: .5rem;
    font-size: .72rem;
    font-weight: 600;
}
.kayit-onizle::before,
.kayit-cikar::before,
.kayit-sil::before {
    content: "";
    width: .85rem;
    height: .85rem;
}
.kayit-onizle::before { color: var(--brand-text); --sa-ikon: var(--sa-ikon-goz); }
.kayit-onizle:hover { color: #fff; }

.kayit-cikar,
.kayit-sil {
    background: transparent;
    border-color: transparent;
    color: var(--invalid);
}
/* Geniş ekranda prototipteki gibi YALNIZCA ikon: "Listeden çıkar" metni
   font-size:0 ile görünmez ama DOM'da ve erişilebilirlik ağacında kalıyor
   (düğmenin adı hâlâ metni; display:none/visibility DEĞİL). Dar ekranda
   satır alt alta dizildiği için metin geri geliyor (aşağıdaki media). */
@media (min-width: 40.01rem) {
    .kayit-cikar,
    .kayit-sil {
        font-size: 0;
        padding: .5rem;
    }
    .kayit-cikar::before,
    .kayit-sil::before { width: .95rem; height: .95rem; }
}
.kayit-cikar::before,
.kayit-sil::before { --sa-ikon: var(--sa-ikon-cop); }
/* Özgüllük: yukarıdaki genel `.btn:not(.btn-primary):hover` (0,2,1) düz
   `.kayit-cikar:hover`ı (0,2,0) ezerdi — id ile kapsanıyor. */
#kayit-listesi .kayit-cikar:hover,
#kayit-listesi .kayit-sil:hover { background: var(--invalid-bg); }

/* ═══════════════════════════════════════════════════════════════════════
   Kendi dokümanınızı yükleyin — kesik çizgili, ortalı.
   .dz-aktif'i sign.js açıp kapatıyor (sürükle-bırak); CSS yalnız görünüm.
   ═══════════════════════════════════════════════════════════════════════ */
#yukleme-karti {
    padding: 1.75rem 1.5rem;
    border: 1px dashed var(--border-strong);
    background: rgba(17, 24, 39, .6);
    box-shadow: none;
    text-align: center;
    transition: border-color .15s ease;
}
#yukleme-karti:hover { border-color: rgba(245, 158, 11, .4); }
#yukleme-karti.dz-aktif {
    border-color: var(--brand);
    background: rgba(245, 158, 11, .06);
}
#yukleme-karti::before {
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    margin: 0 auto .5rem;
    color: rgba(251, 191, 36, .8);
    --sa-ikon: var(--sa-ikon-bulut);
}
#yukleme-karti > h2 {
    margin: 0 0 .2rem;
    font-size: .9rem;
    color: #fff;
}
/* İki açıklama paragrafı tek satıra: "… evraka eklenir · İzinli türler …" */
#yukleme-karti > h2 + p.muted,
#yukleme-karti > h2 + p.muted + p.muted {
    display: inline;
    margin: 0;
    font-size: .75rem;
}
#yukleme-karti > h2 + p.muted + p.muted::before { content: " · "; }

#yukleme-karti > p:has(> #yukleme-dosya) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin: 1rem 0 0;
}
#yukleme-dosya {
    max-width: 100%;
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--text-muted);
}
#yukleme-dosya::file-selector-button {
    margin-right: .6rem;
    padding: .5rem .9rem;
    border: 1px solid var(--border-strong);
    border-radius: .75rem;
    background: var(--sa-slate-800);
    font: 600 .75rem var(--font-body);
    color: #fcd34d;
    cursor: pointer;
}
#yukleme-dosya::file-selector-button:hover { background: #273449; }
#yukleme-yukle {
    min-height: 0;
    padding: .5rem .9rem;
    border-radius: .75rem;
    border-color: var(--sa-amber-30);
    font-size: .75rem;
    color: #fcd34d;
}
#yukleme-ilerleme {
    width: 100%;
    margin-top: .75rem;
    accent-color: var(--brand);
}
#yukleme-durum { display: block; margin: .6rem 0 0; }
#yukleme-uyari { margin: .75rem 0 0; text-align: start; }

/* ═══════════════════════════════════════════════════════════════════════
   Sağ kolon
   ═══════════════════════════════════════════════════════════════════════ */
/* Talep özeti — id ile kapsanıyor, #sonuc-meta de .doc-meta. */
#talep-ozeti,
#servis-paneli { padding: 1.25rem; }

#talep-ozeti > h2,
#servis-paneli > h2 {
    margin: 0 0 .75rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--text-muted);
}
#talep-ozeti .doc-meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .5rem .75rem;
    font-size: .75rem;
    flex-wrap: initial;
}
#talep-ozeti .doc-meta dt { color: var(--text-muted); align-self: center; }
#talep-ozeti .doc-meta dd {
    margin: 0;
    text-align: right;
    font-weight: 700;
    color: #fff;
}
/* Sıra sabit: Doküman, [İmzacı koşullu], İmza şekli, Son geçerlilik —
   sondan sayınca "İmza şekli" hep 2., tarih hep 1. */
#talep-ozeti .doc-meta dd:nth-last-of-type(2) {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--brand-text);
}
#talep-ozeti .doc-meta dd:last-of-type {
    font-family: var(--font-mono);
    font-weight: 500;
    color: #e2e8f0;
}

#servis-paneli p { font-size: .8rem; }
#servis-durum { font-family: var(--font-mono); font-size: .75rem; margin: 0; }
#servis-yok > p:first-child { margin-top: .75rem; }

/* ── ADIM 3 · İMZA kartı ────────────────────────────────────────────── */
#imza-paneli.sa-imza-karti {
    padding: 1.5rem;
    border-color: var(--sa-amber-30);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .55);
}
#imza-paneli > h2 {
    margin: .15rem 0 1.25rem;
    font-size: 1rem;
    color: #fff;
}

/* Test imzası kutusu: inline stilleri --bg-surface-elevated/--border-subtle/
   --accent token'larından besleniyor (yukarıda tanımlı). Yalnızca ölçüler. */
.test-imza-secenek { font-size: .75rem; }
.test-imza-secenek strong { font-size: .8rem; }

#kart-satiri {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .4rem .5rem;
    margin: 0 0 1rem;
}
#kart-satiri > label,
#pin-satiri > label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: #cbd5e1;
}
#kart-yenile {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 0;
    padding: .15rem .35rem;
    border: 0;
    background: none;
    font-size: .7rem;
    font-weight: 600;
    color: var(--brand-text);
}
#kart-yenile:hover { color: #fff; background: none; }
#kart-yenile::before {
    content: "";
    width: .75rem;
    height: .75rem;
    --sa-ikon: var(--sa-ikon-yenile);
}
#kart {
    grid-column: 1 / -1;
    width: 100%;
    padding: .65rem .75rem;
    font-size: .8rem;
}
#kart[disabled] { opacity: .5; }
#kart-not { margin: -.5rem 0 1rem; font-size: .72rem; }

#pin-satiri {
    display: grid;
    gap: .4rem;
    margin: 0 0 .75rem;
}
#pin {
    width: 100%;
    padding: .65rem .85rem;
    font-family: var(--font-mono);
    font-size: .95rem;
    letter-spacing: .35em;
}
#pin[disabled] { opacity: .5; }

#secim-ozeti { margin: 0 0 1rem; font-size: .72rem; }

#son-deneme-uyari {
    margin: 0 0 1rem;
    padding: .6rem .75rem;
    border: 1px solid rgba(251, 113, 133, .4);
    border-radius: .75rem;
    background: var(--invalid-bg);
    font-size: .78rem;
}

/* İmzala düğmesi + süre: alt alta, tam genişlik. */
#imza-paneli p:has(> #imzala) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    margin: 0;
}
#imzala {
    width: 100%;
    min-height: 3rem;
    border: 0;
    border-radius: .75rem;
    background: linear-gradient(90deg, #f59e0b, #d97706);
    box-shadow: 0 10px 15px -3px rgba(120, 53, 15, .3);
    font-size: .9rem;
    font-weight: 800;
    color: #020617;
}
#imzala:hover {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    filter: none;
}
#imzala[disabled] {
    background: var(--sa-slate-800);
    box-shadow: none;
    color: #64748b;
    opacity: 1;
    cursor: not-allowed;
}
#imzala::before {
    content: "";
    width: 1rem;
    height: 1rem;
    --sa-ikon: var(--sa-ikon-kilit);
}
/* Seçili doküman sayısı: sign.js refresh() her seferinde data-sayi yazıyor;
   metni textContent ile yenilediği için pseudo-element bundan etkilenmiyor. */
#imzala[data-sayi]:not([data-sayi="0"])::after { content: " (" attr(data-sayi) " doküman)"; }

#sure {
    min-height: 1em;
    text-align: center;
    font-family: var(--font-mono);
    font-size: .72rem;
}
#imza-paneli #uyari { margin: 1rem 0 0; }

/* ═══════════════════════════════════════════════════════════════════════
   Popup'lar: önizleme (#onizleme-karti), imza ayrıntıları
   (#imza-detay-karti), imzalanıyor (#sa-imza-surec) ve sonuç
   (#sonuc-paneli) sayfa İÇİNDE, ortalanmış modal.

   ── Perde AYRI bir ::before katmanı, dev box-shadow DEĞİL ─────────────
   box-shadow: 0 0 0 100vmax tekniği denenmişti ama modal kendisi
   overflow-y:auto taşıyor ve overflow, kutunun dışına taşan gölgeyi
   KIRPIYOR. position:fixed bir ::before, transform/filter/contain
   olmayan atanın overflow'undan etkilenmez (containing block viewport).

   ── z-index NEGATİF olmak ZORUNDA ─────────────────────────────────────
   ::before, modalın KENDİ yığılma bağlamının çocuğu; pozitif bir değer
   aynı bağlamdaki auto z-index'li kardeşlerin (başlık, Kapat, iframe)
   ÜSTÜNE çıkar ve onları tıklanamaz kılar (canlıda böyle bildirildi).
   Negatif değer perdeyi içeriğin altına, ama modalın kendisiyle (dış
   bağlamda z-index:60) sayfanın üstüne koyar.
   ═══════════════════════════════════════════════════════════════════════ */
#onizleme-karti::before,
#imza-detay-karti::before,
#sonuc-paneli::before,
.sa-modal::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(2, 6, 23, .7);
    backdrop-filter: blur(2px);
}

#onizleme-karti,
#imza-detay-karti,
#sonuc-paneli,
.sa-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 60;
    margin: 0;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .6);
}

#onizleme-karti,
#imza-detay-karti {
    max-width: 56rem;
    width: calc(100vw - 3rem);
    padding: 1.5rem;
}
#onizleme-karti h2,
#imza-detay-karti h2 { font-size: 1rem; color: #fff; }
.pdf-preview { border-color: var(--border); background: #fff; }

#sonuc-paneli {
    max-width: 42rem;
    width: calc(100vw - 3rem);
    padding: 1.75rem;
}
#sonuc-listesi { width: 100%; }
#sonuc-listesi th:last-child,
#sonuc-listesi td:last-child { white-space: nowrap; }
#sonuc-paneli > h2 {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
}
#sonuc-paneli > h2::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    color: var(--valid);
    --sa-ikon: var(--sa-ikon-onay);
}
#sonuc-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .25rem 1rem;
    margin: 1rem 0;
}
#sonuc-meta dt { color: var(--text-muted); font-size: .78rem; }
#sonuc-meta dd { margin: 0; text-align: right; font-weight: 700; }

/* ── #sa-imza-surec (opsiyonel; bkz. Razor dosyasındaki not) ────────── */
.sa-modal {
    max-width: 26rem;
    width: calc(100vw - 3rem);
    padding: 2rem;
    border: 1px solid var(--sa-amber-30);
    text-align: center;
}
.sa-imza-ikon {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 1rem;
    color: var(--brand-text);
    --sa-ikon: var(--sa-ikon-kalem);
}
#sa-imza-surec h2 { margin: 0 0 .35rem; font-size: 1.1rem; color: #fff; }
.sa-imza-durum {
    min-height: 1.2em;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--brand-text);
}

/* ═══════════════════════════════════════════════════════════════════════
   Duyarlı
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 64rem) {
    .sa-izgara { grid-template-columns: minmax(0, 1fr); }
    .sa-yan { position: static; }
}

@media (max-width: 52rem) {
    main.shell:has(> .sa-adimlar) { grid-template-columns: minmax(0, 1fr); }
    main.shell:has(> .sa-adimlar) > .sa-adimlar {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        margin-top: 1rem;
    }
    .sa-adimlar { gap: .5rem 1.6rem; }
}

@media (max-width: 40rem) {
    /* Dar ekran: her bilgi kendi satırında, düğmeler en altta tam satır. */
    #kayit-listesi tbody tr {
        grid-template-columns: auto auto minmax(0, 1fr);
        grid-template-areas:
            "sec ikon ad"
            "sec ikon alt"
            "sec ikon tur"
            "sec ikon bicim"
            "sec ikon durum"
            "islem islem islem";
        row-gap: .45rem;
        padding: 1rem;
        align-items: start;
    }
    #kayit-listesi tbody tr::before,
    #kayit-listesi tbody tr::after { place-self: start center; }
    #kayit-listesi td.kol-sec { align-self: start; padding-top: .7rem; }
    #kayit-listesi td.kol-tur,
    #kayit-listesi td.kol-bicim,
    #kayit-listesi td.kol-durum { flex-wrap: wrap; }
    #kayit-listesi td.kol-islem {
        justify-self: stretch;
        flex-wrap: wrap;
        white-space: normal;
        margin-top: .25rem;
    }
    .kayit-ad { max-width: 100%; }
    #kayit-listesi thead tr,
    #kayit-karti > h2,
    #kayit-karti > h2 + p.muted { padding-inline: 1rem; }
    #kayit-listesi thead tr { justify-content: flex-start; }
}

@media (max-width: 30rem) {
    #onizleme-karti, #imza-detay-karti, #sonuc-paneli, .sa-modal { padding: .75rem; }
}