/* ============================================================================
   HRLens — Tasarım Sistemi  ·  NextHire ürün ailesi
   ----------------------------------------------------------------------------
   Tasarım dili: "Kurumsal ve sade" — profesyonel, sakin, göz yormayan.
   HRLens insanlara dair değerlendirme verisini düzenleyen kurumsal bir İK
   aracıdır. Arayüz gösterişsiz, okunaklı ve güven veren olmalı: kırık beyaz
   zemin, beyaz kartlar, ince çizgili kenarlıklar, ölçülü gölge ve tipografi.

   MARKA SINIRI (R-003 + fikri mülkiyet netleştirmesi)
   "Tanıdıklık" YALNIZCA renk/ton üzerinden kurulur: lacivert-ağırlıklı sakin
   kurumsal his + Reflex Blue temel renk + Montserrat (kurumsal Gotham'ın
   ücretsiz web ikamesi). Bunlar meşru, ortak zemin öğeleridir.
   TAİ/TUSAŞ'a ait TESCİLLİ VARLIKLAR KULLANILMAZ: logo, amblem, üçgen
   kurumsal doku/desen, NeoSans Pro fontu ve "TUSAŞ"/"TAİ" adı.
   HRLens, NextHire'ın kendi ürünüdür; kendi görsel dilini, kendi logosunu
   (özgün "lens/odak" markası) ve kendi adını kurar.

   PALET
     Reflex Blue #263685  — birincil (üst bar, nav, birincil buton, bağlantı)
     Kırmızı     #DD140E  — YALNIZ aksan (yıkıcı aksiyon, hata, kritik vurgu)
     Altın       #D29F13  — çok az (uyarı / "bekliyor")
     Yeşil       #2F7D4F  — yalnız küçük durum göstergesi (işlendi/onaylı)
     Gri tonları #4D4D4D… — nötr metin/kenarlık
     Kırık beyaz #F8F7F7  — uygulama zemini · beyaz #FFF — kartlar
   TİPOGRAFİ
     Montserrat (self-hosted /static) — tek aile, tüm metin. Serif YOK, italik YOK.
     (Kurumsal aile Gotham'ın ücretsiz web ikamesi.)

   YAPI — Faz 1'de kurulan BİLEŞEN MİMARİSİ korunur; yalnızca marka katmanı
   (renk/font/his jetonları) revize edilmiştir.
     1. Tasarım jetonları   2. Temel öğeler   3. Yerleşim   4. Sayfa başlığı
     5. Kart   6. Metrik kutusu   7. Tablo   8. Form   9. Buton   10. Rozet
    11. Uyarı   12. Yükleme/boş durum/adım   13. İnceleme/sosyogram
    14. Yardımcılar   15. Hareket   16. Yazdırma   17. Duyarlı

   KULLANIM İLKESİ — sunum değişir, davranış değil. Şablonların router'dan
   aldığı context adları/şekilleri ve form alan adları korunur.
   ========================================================================= */

/* ── 1. TASARIM JETONLARI ────────────────────────────────────────────────── */
:root {
    /* Marka — Reflex Blue */
    --brand:            #263685;
    --brand-strong:     #1e2a68;
    --brand-deep:       #1e1a34;
    --brand-ink:        #263685;
    --brand-tint:       #eceef5;
    --brand-tint-strong:#d6daec;

    /* Nötrler — sıcak gri tonları */
    --ink:              #2d2926;
    --ink-2:            #4d4d4d;
    --ink-3:            #736f6a;
    --line:             #e4e2de;
    --line-2:           #eeece9;
    --field-border:     #cdcac5;
    --surface:          #ffffff;
    --surface-2:        #f2f1ef;
    --bg:               #f8f7f7;

    /* Anlamsal renkler */
    --success:          #2f7d4f;
    --success-ink:      #235e3b;
    --success-tint:     #e3f0e8;
    --warning:          #d29f13;
    --warning-ink:      #876613;
    --warning-tint:     #f8edcf;
    --danger:           #dd140e;
    --danger-strong:    #b3110b;
    --danger-ink:       #a8120c;
    --danger-tint:      #fbe2e0;
    --info:             #263685;
    --info-ink:         #263685;
    --info-tint:        #e6e8f3;

    /* Tür rozetleri — durum renkleriyle çakışmayan nötr tonlar */
    --hr3:              #1e1a34;
    --hr3-tint:         #e8e7ed;
    --sosyo:            #4d4d4d;
    --sosyo-tint:       #ecebe9;

    /* Tipografi — Montserrat (tek aile, serif/italik yok) */
    --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-sans:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    ui-monospace, SFMono-Regular, Menlo, 'Liberation Mono', monospace;

    /* Yarıçap */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-pill: 999px;

    /* Gölge — lacivert tonlu, ölçülü */
    --shadow-xs: 0 1px 2px rgba(30,26,52,.06);
    --shadow-sm: 0 1px 2px rgba(30,26,52,.05), 0 2px 8px -3px rgba(30,26,52,.10);
    --shadow-md: 0 4px 14px -6px rgba(30,26,52,.13), 0 12px 30px -18px rgba(30,26,52,.20);
    --shadow-lg: 0 18px 48px -20px rgba(30,26,52,.30);

    /* Yerleşim */
    --maxw: 1180px;
}

/* ── 2. TEMEL ÖĞELER / RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    /* Yapışkan üst bar — sayfa içi çapa atlamalarında hedef örtülmesin (U-9). */
    scroll-padding-top: 5rem;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

::selection { background: var(--brand-tint-strong); color: var(--brand-ink); }

/* Başlıklar — Montserrat, ağırlıkla hiyerarşi */
h1, h2, h3 { color: var(--ink); }

h1, .page-title {
    font-family: var(--font-display);
    font-size: 1.95rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.012em;
    margin: 0 0 1.1rem;
}

h2 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.008em;
    margin: 2rem 0 0.9rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--line);
}

h3 {
    font-family: var(--font-display);
    font-size: 1.06rem;
    font-weight: 600;
    margin: 1.4rem 0 0.6rem;
}

h4 {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    margin: 1.1rem 0 0.5rem;
}

p { margin: 0 0 0.85rem; }

strong, b { font-weight: 600; color: var(--ink); }

a {
    color: var(--brand-ink);
    text-decoration: none;
    transition: color 0.14s ease;
}
a:hover { text-decoration: underline; text-underline-offset: 2.5px; }

code {
    font-family: var(--font-mono);
    font-size: 0.84em;
    background: var(--brand-tint);
    color: var(--brand-ink);
    padding: 0.1rem 0.36rem;
    border-radius: 4px;
}

.container ol, .container ul { padding-left: 1.3rem; margin: 0 0 0.85rem; }
.container li { margin-bottom: 0.4rem; color: var(--ink-2); }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 100;
    background: var(--brand);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-md);
}

/* ── 3. YERLEŞİM — ÜST BAR / MARKA / GEZİNME / ALT BİLGİ ─────────────────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    flex-shrink: 0;
    background: linear-gradient(180deg, #2a3a8d, var(--brand));
    box-shadow: 0 1px 3px rgba(30,26,52,.22);
}
.topbar__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0.8rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand__mark {
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.20);
    color: #fff;
    flex: none;
}
.lens { width: 24px; height: 24px; display: block; }
.lens__ring { fill: none; stroke: currentColor; stroke-width: 2.2; }
.lens__tick { stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.lens__dot  { fill: var(--danger); }

.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
    font-family: var(--font-display);
    font-size: 1.16rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.005em;
}
.brand__fam {
    font-family: var(--font-sans);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
    margin-top: 0.16rem;
}

.mainnav {
    display: flex;
    align-items: center;
    gap: 1.45rem;
}
.navlink {
    position: relative;
    color: rgba(255,255,255,.76);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.35rem 0.1rem;
    transition: color 0.14s ease;
}
.navlink:hover { color: #fff; text-decoration: none; }
.navlink.is-active { color: #fff; font-weight: 600; }
.navlink.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.5rem;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}
/* Üst bardaki birincil eylem — mavi zeminde beyaz buton (kontrast).
   Seçici .mainnav ile özgülenir; aksi halde .btn-primary:hover bunu ezip
   hover'da koyu zemin + koyu metin (okunmaz) üretiyordu. */
.mainnav .navcta {
    margin-left: 0.35rem;
    background: #fff;
    color: var(--brand);
    border-color: #fff;
}
.mainnav .navcta:hover {
    background: var(--brand-tint-strong);
    color: var(--brand-strong);
    border-color: var(--brand-tint-strong);
}

.sitefooter {
    flex-shrink: 0;
    border-top: 1px solid var(--line);
    background: var(--surface);
}
.sitefooter__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.sitefooter__brand { font-size: 0.82rem; color: var(--ink-3); }
.classification {
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    padding: 0.3rem 0.62rem;
}

.container {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--maxw);
    margin: 2.25rem auto 0;
    padding: 0 1.5rem 3.5rem;
}

/* ── 4. SAYFA BAŞLIĞI ────────────────────────────────────────────────────── */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--line);
}
.page-head h1, .page-head .page-title { margin: 0; }
.page-head__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand);
    margin: 0 0 0.55rem;
}
.eyebrow::before {
    content: "";
    width: 1.6rem;
    height: 2px;
    background: var(--brand);
    border-radius: 2px;
    flex: none;
}

.page-sub {
    font-size: 0.95rem;
    color: var(--ink-2);
    margin: 0.55rem 0 0;
    max-width: 56ch;
}

/* ── 5. KART ─────────────────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 1.5rem 1.6rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* AI Rapor Özeti — içerik markdown'dan GÜVENLİ HTML'e çevrilir (md filtresi:
   <p>/<strong>/<ul>). Blok elemanlar için okunur aralık. */
.report-summary-text {
    line-height: 1.65;
    color: var(--text);
}
.report-summary-text p { margin: 0 0 0.85rem; }
.report-summary-text p:last-child { margin-bottom: 0; }
.report-summary-text ul { margin: 0 0 0.85rem 1.25rem; padding: 0; }
.report-summary-text li { margin: 0.2rem 0; }

/* Formlar tablosu — satır içi dosya önizlemesi (ayrı "Yüklenen Dosyalar" kartı
   buraya taşındı; tekrar önlendi). */
.form-file-cell { display: flex; gap: 0.6rem; align-items: flex-start; }
.form-file-thumb { flex: 0 0 auto; display: block; width: 44px; height: 56px;
    border: 1px solid var(--border, #ddd); border-radius: 4px; overflow: hidden;
    background: #f3f2ef; }
.form-file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.form-file-info { min-width: 0; }

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.card-header h2, .card-header h3 { margin: 0; border: 0; padding: 0; }

.card-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.008em;
    color: var(--ink);
    margin: 0;
}

.report-section { margin-bottom: 1.25rem; }

/* Kategori-bazlı AI önerisi — rapor bölümünde başlığın altında belirgin kutu (#).
   PDF'teki "Öneri:" satırının web karşılığı. */
.report-oneri {
    margin: 0.7rem 0 0;
    padding: 0.55rem 0.7rem;
    background: var(--brand-tint, #eef0f7);
    border-left: 3px solid var(--brand, #263685);
    border-radius: var(--r-sm, 4px);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* ── 6. METRİK KUTULARI ──────────────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat-card {
    --metric: var(--brand);
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 1.35rem 1.3rem 1.2rem;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.3rem;
    width: 1.7rem;
    height: 3px;
    background: var(--metric);
    border-radius: 0 0 3px 3px;
}
.stat-card:hover {
    border-color: #d9d7d3;
    box-shadow: var(--shadow-sm);
}
.stat-card .num {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.022em;
    color: var(--metric);
    font-variant-numeric: tabular-nums;
    margin: 0;
}
.stat-card .label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0.55rem 0 0;
}
.stat-card--neutral { --metric: var(--ink); }
.stat-card--success { --metric: var(--success); }
.stat-card--warning { --metric: var(--warning); }
.stat-card--danger  { --metric: var(--danger); }

/* ── 7. TABLO ────────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
thead th {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* WCAG AA kontrast — küçük büyük-harf başlık (T-012 U-2 / T-018 G-1). */
    color: var(--ink-2);
    text-align: left;
    padding: 0.7rem 0.9rem;
    border-bottom: 1.5px solid var(--line);
    white-space: nowrap;
}
tbody td {
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--line-2);
    color: var(--ink-2);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: var(--brand-tint); }
tbody tr:last-child td { border-bottom: 0; }
td a { font-weight: 600; }

/* İşlem (aksiyon) sütunu: içeriğe küçülür + sağa yaslanır → diğer sütunlar
   kalan genişliği paylaşır, "sağ yarı boş" görünümü engellenir. Az sütunlu
   tablolarda (Düzenle/Sil gibi tek aksiyon kümesi) tutarlı hizalama sağlar. */
th.col-actions, td.col-actions { width: 1%; white-space: nowrap; text-align: right; }
td.col-actions .actions { justify-content: flex-end; }

/* Öz (kendi/öz değerlendirme) formu satırı — sol marka aksanı (hover'da kalır). */
.row-self-form td:first-child { box-shadow: inset 3px 0 0 var(--brand); }

/* ── 8. FORM ALANLARI ────────────────────────────────────────────────────── */
.field { margin-bottom: 1.1rem; }
.field:last-child { margin-bottom: 0; }

label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.4rem;
}

input[type=text], input[type=email], input[type=number],
input[type=password], input[type=search], input[type=file],
select, textarea {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--field-border);
    border-radius: var(--r-sm);
    padding: 0.6rem 0.75rem;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
textarea { resize: vertical; min-height: 5rem; line-height: 1.55; }

input::placeholder, textarea::placeholder { color: var(--ink-3); }

input[readonly], input:disabled, select:disabled, textarea[readonly] {
    background: var(--surface-2);
    color: var(--ink-2);
    cursor: not-allowed;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3.5px var(--brand-tint-strong);
}

select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.1rem;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='9'%20viewBox='0%200%2014%209'%3E%3Cpath%20d='M1%201.6L7%207.4L13%201.6'%20fill='none'%20stroke='%23837f7a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    cursor: pointer;
}

input[type=file] { padding: 0.5rem 0.55rem; cursor: pointer; }
input[type=file]::file-selector-button {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    margin-right: 0.8rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--field-border);
    border-radius: var(--r-xs);
    background: var(--brand-tint);
    color: var(--brand-ink);
    cursor: pointer;
    transition: background 0.14s ease;
}
input[type=file]::file-selector-button:hover { background: var(--brand-tint-strong); }

/* Şifre alanı — göster/gizle düğmesi (login). Düğme input içine konumlanır;
   global `button` stilini sıfırlayıp metin-bağlantı görünümü verir. */
.pw-field { position: relative; display: block; }
.pw-field input { padding-right: 4.6rem; }
.pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: inline-flex;
    align-items: center;
    padding: 0 0.7rem;
    background: none;
    border: 0;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
}
.pw-toggle:hover { background: none; color: var(--brand); }
.pw-toggle:active { transform: none; }

/* ── 9. BUTONLAR ─────────────────────────────────────────────────────────── */
.btn, button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    padding: 0.62rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--shadow-xs);
    transition: background 0.14s ease, transform 0.08s ease,
                border-color 0.14s ease, box-shadow 0.14s ease, color 0.14s ease;
}
.btn:hover, button:hover { background: var(--brand-strong); text-decoration: none; }
.btn:active, button:active { transform: translateY(1px); }

/* Varyantlar — .btn'den SONRA tanımlı; çoklu sınıfta varyant kazanır. */
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-strong); }

.btn-secondary {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--field-border);
}
.btn-secondary:hover {
    background: var(--brand-tint);
    border-color: var(--brand);
    color: var(--brand-ink);
}

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-strong); }

/* Birincil eylemle aynı görsel — "başarı" yeşili buton yüzeyinde kullanılmaz */
.btn-success { background: var(--brand); color: #fff; }
.btn-success:hover { background: var(--brand-strong); }

.btn-ghost { background: transparent; color: var(--brand-ink); box-shadow: none; }
.btn-ghost:hover { background: var(--brand-tint); }

.btn-sm { padding: 0.43rem 0.82rem; font-size: 0.8rem; }
.btn-lg { padding: 0.78rem 1.5rem; font-size: 0.95rem; }
.btn-block { display: flex; width: 100%; }

.btn:disabled, button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ── 10. ROZET (BADGE) & ETİKET (TAG) ────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.27rem 0.6rem 0.25rem;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    white-space: nowrap;
}
.badge::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.badge-pending    { color: var(--warning-ink); background: var(--warning-tint); border-color: #ecdca6; }
.badge-processing { color: var(--info-ink);    background: var(--info-tint);    border-color: #ccd2e6; }
.badge-reviewed   { color: var(--success-ink); background: var(--success-tint); border-color: #c6ddcc; }
.badge-error      { color: var(--danger-ink);  background: var(--danger-tint);  border-color: #f3c8c5; }
.badge-hr3        { color: var(--hr3);          background: var(--hr3-tint);     border-color: #d3d1da; }
.badge-sosyo      { color: var(--sosyo);        background: var(--sosyo-tint);   border-color: #dbd9d5; }
/* Anlamsal alias rozetleri — değerlendirme iş akışından bağımsız durumlar.
   Görsel olarak reviewed/pending/hr3 ile aynı; semantik ayrı tutulur ki o
   sınıfların stili değişince kullanıcı/org listeleri etkilenmesin (T-018 TU-2, P-2). */
.badge-active     { color: var(--success-ink); background: var(--success-tint); border-color: #c6ddcc; }
.badge-inactive   { color: var(--warning-ink); background: var(--warning-tint); border-color: #ecdca6; }
.badge-platform   { color: var(--hr3);          background: var(--hr3-tint);     border-color: #d3d1da; }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25rem 0.62rem;
    border-radius: var(--r-sm);
    background: var(--brand-tint);
    color: var(--brand-ink);
    border: 1px solid var(--brand-tint-strong);
}
.tag-warn   { background: var(--warning-tint); color: var(--warning-ink); border-color: #ecdca6; }
.tag-danger { background: var(--danger-tint);  color: var(--danger-ink);  border-color: #f3c8c5; }

/* ── 11. UYARI (NOTICE) ──────────────────────────────────────────────────── */
.notice {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 0.9rem;
}
.notice--success { background: var(--success-tint); border-color: #c6ddcc; border-left-color: var(--success); }
.notice--warning { background: var(--warning-tint); border-color: #ecdca6; border-left-color: var(--warning); }
.notice--danger  { background: var(--danger-tint);  border-color: #f3c8c5; border-left-color: var(--danger); }
.notice--info    { background: var(--info-tint);    border-color: #ccd2e6; border-left-color: var(--info); }

/* ── 12. YÜKLEME ALANI / BOŞ DURUM / ADIMLAR ─────────────────────────────── */
.upload-area {
    border: 1.5px dashed var(--brand-tint-strong);
    border-radius: var(--r-md);
    padding: 2.2rem 1.5rem;
    text-align: center;
    background: var(--brand-tint);
    margin-bottom: 1rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.upload-area:hover { border-color: var(--brand); background: #e3e6f2; }

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    padding: 3rem 1.5rem;
    color: var(--ink-3);
}
.empty-state__icon { color: var(--brand-tint-strong); margin-bottom: 0.5rem; }
.empty-state__icon svg { width: 48px; height: 48px; display: block; }
.empty-state__title {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}
.empty-state__text { font-size: 0.9rem; color: var(--ink-3); margin: 0 0 0.95rem; }

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.step {
    padding: 1.2rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-2);
}
.step__n {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--brand);
    margin: 0 0 0.5rem;
}
.step__n::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-tint);
    flex: none;
}
.step__t {
    font-family: var(--font-display);
    font-size: 1.0rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 0.3rem;
}
.step__d { font-size: 0.85rem; color: var(--ink-2); margin: 0; line-height: 1.55; }

/* ── 13. İNCELEME YERLEŞİMİ / SIFAT IZGARASI / SOSYOGRAM ─────────────────── */
.review-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    align-items: start;
}
/* T-023 — sol panel (orijinal form) yapışkan: sağdaki uzun sıfat listesi
   kaydırılırken orijinal görsel viewport'ta kalsın diye. top, yapışkan üst
   barın yüksekliğini aşar (üst bar z-index 50; alttan geçmesin). Form
   viewport'tan uzunsa panel kendi içinde kayar (max-height + overflow).
   Mobilde (≤680px, tek sütun) devre dışı — bkz. §17. */
.review-pages {
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6.5rem);
    overflow-y: auto;
}
/* Review sayfa galerisi (#1) — kağıtlar ALT ALTA yerine YAN YANA grid; tıklayınca
   tam boyut açılır. Tek sayfa → sütunu doldurur (okunur); çok sayfa → yan yana sarar. */
.review-page-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.6rem;
}
.review-page-item {
    display: block;
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: #f3f2ef;
}
.review-page-item img { display: block; width: 100%; height: auto; }
.review-page-no {
    position: absolute; left: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.55); color: #fff;
    font-size: 0.72rem; padding: 0.1rem 0.45rem;
    border-top-right-radius: var(--r-sm);
}

/* ── Görsel lightbox (yön doğrulama thumbnail + review sayfa görselleri) ───
   Tıklanınca tam ekran modalda; ekran boyutuna SIĞAR (taşmaz), yeni sekme açmaz. */
[data-zoom-src] { cursor: zoom-in; }
.img-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5vmin;
    background: rgba(0, 0, 0, 0.85);
}
.img-modal[hidden] { display: none; }
.img-modal__img {
    max-width: 96vw;
    max-height: 96vh;
    object-fit: contain;       /* en-boy korunur, ekrandan taşmaz */
    background: #fff;
    border-radius: var(--r-sm);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.img-modal__close {
    position: fixed;
    top: 1rem;
    right: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
}
.img-modal__close:hover { background: rgba(0, 0, 0, 0.7); }

/* ── 5b. ÇALIŞANLAR EKRANI — Rafine Roster (ekip paneli + avatarlı liste) ────
   Mevcut jetonlarla (lacivert, kart, gölge) kompoze; davranış değişmez. */
.emp-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    padding: 0.85rem 1.4rem;
    margin-bottom: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
}
.emp-summary__item { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.emp-summary__num {
    font-size: 1.4rem; font-weight: 700; color: var(--brand);
    font-variant-numeric: tabular-nums; line-height: 1;
}
.emp-summary__label { font-size: 0.82rem; color: var(--ink-3); }
.emp-summary__sep { width: 1px; align-self: stretch; background: var(--line); }

.team-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.team-panel__head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--line-2);
    border-left: 3px solid var(--brand);
    background: linear-gradient(180deg, var(--brand-tint), var(--surface));
}
.team-monogram {
    flex: none;
    width: 2.7rem; height: 2.7rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand); color: #fff;
    font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
}
.team-panel__id { flex: 1; min-width: 0; }
.team-panel__name { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.team-panel__meta { margin: 0.25rem 0 0; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.team-panel__count { font-size: 0.82rem; color: var(--ink-3); }
.team-panel__del { flex: none; margin-left: auto; }

/* Çip rozetler (departman, cinsiyet, takma ad) */
.chip {
    display: inline-flex; align-items: center;
    font-size: 0.72rem; font-weight: 600;
    padding: 0.13rem 0.6rem;
    border-radius: var(--r-pill);
    background: var(--surface-2); color: var(--ink-2);
    border: 1px solid var(--line);
    white-space: nowrap;
}
.chip--dept { background: var(--brand-tint); color: var(--brand-strong); border-color: var(--brand-tint-strong); }
.chip--m { background: var(--info-tint); color: var(--info-ink); border-color: var(--brand-tint-strong); }
.chip--f { background: #f6e8ee; color: #8a3b57; border-color: #ebd3dc; }

/* Roster — başlık hücreleri panel kenarıyla hizalı, avatarlı isim */
.team-panel thead th:first-child,
.team-panel tbody td:first-child { padding-left: 1.4rem; }
.team-panel thead th:last-child,
.team-panel tbody td:last-child { padding-right: 1.4rem; }
.emp-cell { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.emp-avatar {
    flex: none;
    width: 2.05rem; height: 2.05rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 700;
    color: var(--brand-strong); background: var(--brand-tint);
    border: 1px solid var(--brand-tint-strong);
    border-radius: var(--r-pill);
}
.emp-avatar--mgr { color: #fff; background: var(--brand); border-color: var(--brand); }
.emp-name { font-weight: 600; color: var(--ink); }

.alias-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.alias-chip {
    font-size: 0.7rem; color: var(--ink-3);
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r-pill); padding: 0.05rem 0.5rem;
}

.team-panel__foot {
    padding: 0.2rem 1.4rem 0.85rem;
    background: var(--surface-2);
    border-top: 1px solid var(--line-2);
}
.team-panel__foot .disclosure { border-top: 0; }
.team-panel__foot .disclosure + .disclosure { border-top: 1px solid var(--line); }
.team-panel__empty { padding: 1.4rem; margin: 0; text-align: center; }

/* ── AI işlem akışı (pipeline stepper) — oturum sayfası (C) ──────────────────
   Formlar → AI Okuma → AI Rapor Özeti → Rapor. Durumlar canlı (polling) güncellenir. */
.pipeline { list-style: none; display: flex; margin: 0 0 1.4rem; padding: 0; }
.pipeline__step { flex: 1; position: relative; text-align: center; padding: 0 0.3rem; }
.pipeline__step::before {
    content: ""; position: absolute; top: 0.8rem; right: 50%; width: 100%; height: 2px;
    background: var(--line); z-index: 0;
}
.pipeline__step:first-child::before { display: none; }
.pipeline__dot {
    position: relative; z-index: 1; margin: 0 auto 0.45rem;
    width: 1.7rem; height: 1.7rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700;
    background: var(--surface); color: var(--ink-3); border: 2px solid var(--line);
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.pipeline__title { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.pipeline__sub { display: block; font-size: 0.72rem; color: var(--ink-3); margin-top: 0.1rem; }
/* tamamlandı */
.pipeline__step.is-done .pipeline__dot { background: var(--brand); border-color: var(--brand); color: #fff; font-size: 0; }
.pipeline__step.is-done .pipeline__dot::after { content: "✓"; font-size: 0.95rem; }
.pipeline__step.is-done::before { background: var(--brand); }
/* aktif (işleniyor) */
.pipeline__step.is-active .pipeline__dot { border-color: var(--brand); color: var(--brand); animation: pipe-pulse 1.5s ease-in-out infinite; }
.pipeline__step.is-active::before { background: var(--brand); }
.pipeline__step.is-active .pipeline__title { color: var(--brand); }
/* hata */
.pipeline__step.is-error .pipeline__dot { background: var(--danger-tint); border-color: var(--danger); color: var(--danger-ink); }
.pipeline__step.is-error .pipeline__title { color: var(--danger-ink); }
@keyframes pipe-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(38, 54, 133, 0.25); }
    50%      { box-shadow: 0 0 0 5px rgba(38, 54, 133, 0.10); }
}
@media (max-width: 680px) {
    .pipeline { flex-direction: column; gap: 0.55rem; }
    .pipeline__step { display: flex; align-items: center; gap: 0.65rem; text-align: left; padding: 0; }
    .pipeline__step::before { display: none; }
    .pipeline__dot { margin: 0; }
}

.trait-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.15rem;
}
.trait-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid var(--line-2);
    font-size: 0.85rem;
}
.trait-row select { padding: 0.25rem 0.4rem; font-size: 0.8rem; }

/* T-030 — statik SVG sosyogram. Eski #sosyogram vis-network tuvali (sabit
   600px) kaldırıldı; SVG kendi viewBox'ı + width:100% + height:auto ile
   ölçeklenir. Sarmalayıcı yalnız blok yerleşim sağlar. */
.sosyogram { margin-top: 0.5rem; }
.sosyogram svg { display: block; max-width: 100%; height: auto; }

/* ── 13b. YÖN ONAY IZGARASI (upload_review) ─────────────────────────────── */
/* (#) Galeri görünümü: tüm dosyaların sayfaları TEK ızgarada yan yana akar
   (eskiden dosya başına .card → kartlar alt alta = liste). auto-FILL (auto-fit
   DEĞİL) kullanıyoruz: az döşemede hücreler min genişlikte kalır, devasa
   büyümez ("preview çok büyük" regresyonuna düşmez). .orient-page kompakt
   kart; .orient-thumb küçültüldü. Mobil: §17. */
.orient-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 0.5rem;
    align-items: start;
}

.orient-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    text-align: center;
    padding: 0.85rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}

/* KARE kutu: aspect-ratio 1/1 ile sabit kare, overflow:hidden ile kırpar.
   İçindeki img max-width/max-height ile kareye sığar; CSS rotate sonrası
   aynı kareye sığmaya devam eder — ölçek hesabı gerekmez. */
.orient-thumb {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 150px;          /* T-028 — kompakt thumbnail */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.orient-thumb img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    transition: transform .2s ease;
}

/* Dosya adı etiketi — galeride her döşemenin hangi forma ait olduğunu gösterir.
   Tek satır, uzun adlar ellipsis ile kırpılır (tam ad: title attribute). */
.orient-file {
    font-size: 0.72rem;
    color: var(--ink-3);
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orient-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-2);
    margin: 0;
}

/* Döndürme butonları — .btn.btn-secondary.btn-sm yeterli;
   global :focus-visible kuralı (~satır 188) odak çerçevesini zaten verir. */
.orient-controls {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: center;
}

.orient-status {
    font-size: 0.75rem;
    color: var(--ink-3);
    margin: 0;
}

/* Salt-görüntüleme thumbnail — tıklanabilir link varyantı (T-017) */
.orient-thumb--link {
    text-decoration: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.orient-thumb--link:hover {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand-tint-strong);
}

/* Yönetici formu seçici — upload_review (T-021). Kompakt radyo listesi;
   global `label` stilini (block + 600 + margin) sıfırlar. */
.manager-pick { display: flex; flex-direction: column; gap: 0.15rem; }
.manager-pick__opt {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0;
    padding: 0.55rem 0.7rem;
    border-radius: var(--r-sm);
    font-weight: 400;
    cursor: pointer;
    transition: background 0.12s ease;
}
.manager-pick__opt:hover { background: var(--brand-tint); }
.manager-pick__opt:has(input:checked) { background: var(--brand-tint); }
.manager-pick__opt input { width: auto; flex: none; margin: 0; }

/* ── 13c. OTURUM ÖZETİ / DOSYA LİSTESİ (session_detail · T-019) ──────────── */

/* Oturum Özeti kartı — sayfa başlığından sonra hafif giriş animasyonu */
.session-summary { animation: hl-rise 0.5s cubic-bezier(.2,.7,.2,1) both; animation-delay: 0.08s; }

/* Genel durum pill — Oturum Özeti kart başlığında, sağda. JS class+metni günceller. */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.32rem 0.72rem;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    white-space: nowrap;
}
.status-pill::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.status-pill--success    { color: var(--success-ink); background: var(--success-tint); border-color: #c6ddcc; }
.status-pill--danger     { color: var(--danger-ink);  background: var(--danger-tint);  border-color: #f3c8c5; }
.status-pill--processing { color: var(--info-ink);    background: var(--info-tint);    border-color: #ccd2e6; }
.status-pill--processing::before { animation: hl-pulse 1.4s ease-in-out infinite; }

@keyframes hl-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.3; transform: scale(0.62); }
}

/* Özet metrik satırı — kompakt sayı blokları (stat-card'tan hafif varyant) */
.summary-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
    gap: 0.55rem 1.1rem;
    margin-bottom: 1.35rem;
}
.summary-metric {
    --metric: var(--brand);
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.28rem 0.2rem 0.28rem 0.85rem;
    border-left: 3px solid var(--metric);
}
.summary-metric--success { --metric: var(--success); }
.summary-metric--warning { --metric: var(--warning); }
.summary-metric--danger  { --metric: var(--danger); }

/* `hidden` attr geri kazanımı — .notice/.summary-metric/.btn'in display kuralı
   (inline-flex vb.) tarayıcının UA [hidden]{display:none}'ını ezer; JS bu
   öğeleri attr ile toggle ettiği için açıkça geri verilir. .btn: rapor
   butonları ≥1 form REVIEWED olunca polling ile gösterilir (session_detail.html). */
.notice[hidden],
.summary-metric[hidden],
.btn[hidden] { display: none; }

/* ── Sosyometri katılımcı seçici (çoklu-ekip + kişi) ─────────────────────── */
.participant-picker {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid #d9dee8;
    border-radius: var(--r-sm);
    padding: 0.5rem 0.85rem;
    background: #fff;
}
.participant-group { border: none; margin: 0 0 0.4rem; padding: 0; }
.participant-group:not(:first-child) {
    border-top: 1px solid #eef1f6; padding-top: 0.4rem;
}
.participant-group__head { padding: 0.3rem 0; font-size: 0.9rem; }
.participant-checkbox {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.22rem 0; margin: 0; font-size: 0.875rem; cursor: pointer;
    font-weight: 400;
}
.participant-checkbox input { width: auto; margin: 0; flex: none; }
.participant-checkbox--member { padding-left: 1.5rem; }

/* ── Özel açılır liste (.ui-select → JS ile .uisel) ──────────────────────────
   Native <select> sr-only gizlenir (formda kalır), yerine erişilebilir custom
   listbox çizilir. select.js + bu stiller tek komponent (DRY). */
.uisel { position: relative; display: block; }
.uisel__native {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.uisel__btn {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    width: 100%; text-align: left; font: inherit; font-size: 0.9rem; font-weight: 400;
    padding: 0.55rem 0.7rem; background: #fff; color: var(--brand-ink, #1a2233);
    border: 1px solid #cfd6e4; border-radius: var(--r-sm); cursor: pointer; box-shadow: none;
}
.uisel__btn:hover { border-color: #aab4c8; }
.uisel__btn:focus-visible { outline: 2px solid var(--brand, #263685); outline-offset: 1px; }
.uisel.is-open .uisel__btn { border-color: var(--brand, #263685); }
.uisel.is-invalid .uisel__btn { border-color: var(--danger, #dd140e); }
.uisel.is-disabled { opacity: 0.6; }
.uisel__btn:disabled { cursor: not-allowed; }
.uisel__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uisel__txt--placeholder { color: #8a93a6; }
.uisel__caret { flex: none; font-size: 0.7rem; color: #8a93a6; transition: transform 0.12s ease; }
.uisel.is-open .uisel__caret { transform: rotate(180deg); }
.uisel__list {
    position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0;
    margin: 0; padding: 0.25rem; list-style: none; max-height: 260px; overflow-y: auto;
    background: #fff; border: 1px solid #cfd6e4; border-radius: var(--r-sm);
    box-shadow: 0 8px 24px rgba(20, 30, 60, 0.14);
}
.uisel__opt {
    padding: 0.45rem 0.6rem; border-radius: 6px; font-size: 0.875rem; cursor: pointer;
    color: var(--brand-ink, #1a2233);
}
.uisel__opt:hover, .uisel__opt.is-active { background: var(--brand-tint, #eef1fb); }
.uisel__opt.is-selected { font-weight: 600; }
.uisel__opt.is-selected::after { content: '✓'; float: right; color: var(--brand, #263685); }
.uisel__opt[aria-disabled="true"] { color: #b6bdca; cursor: default; }
.uisel__opt:focus-visible { outline: 2px solid var(--brand, #263685); outline-offset: -2px; }

.summary-metric__num {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--metric);
    font-variant-numeric: tabular-nums;
}
.summary-metric__label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* İlerleme çubuğu — Oturum Özeti kartında tam genişlik */
.summary-progress {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.summary-progress__track {
    flex: 1;
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    overflow: hidden;
}
.summary-progress__fill {
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--success);
    transition: width 0.45s cubic-bezier(.2,.7,.2,1);
}
.summary-progress__label {
    flex: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Yüklenen dosya listesi — satır başına ilk-sayfa önizleme + dosya-başı durum */
.file-list { display: flex; flex-direction: column; gap: 0.85rem; }

.file-row {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 0.9rem 1rem;
    background: var(--surface);
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.file-row:hover { border-color: #d9d7d3; box-shadow: var(--shadow-xs); }

.file-row__main {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
/* İlk-sayfa önizleme kutusu — içindeki .orient-thumb (§13b) kareye sığar */
.file-row__thumb { width: 88px; flex: none; }
.file-thumb--empty {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.file-row__body {
    flex: 1;
    min-width: 11rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.32rem;
}
.file-row__name {
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    word-break: break-word;
}
.file-row__meta {
    font-size: 0.82rem;
    color: var(--ink-3);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.file-row__actions { flex: none; }

/* ── 13d. YÜKLEME KUYRUĞU (session_detail · T-022) ──────────────────────────
   Async per-dosya yükleme kartları. Dropzone JS-yönetimli; her dosya ayrı
   XHR ile yüklenir, kart progress → ✓/hata gösterir. Token-only. */

/* Sürükleme görsel vurgusu — .upload-area:hover ile aynı dilde, biraz güçlü */
.dropzone--dragover {
    border-color: var(--brand);
    border-style: solid;
    background: var(--brand-tint-strong);
}

.upload-queue {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.upload-queue[hidden] { display: none; }

.uq-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}
.uq-item--uploading,
.uq-item--processing { border-left-color: var(--brand); }
.uq-item--done       { border-left-color: var(--success); }
.uq-item--error      { border-left-color: var(--danger); }

/* Küçük kare ilk-sayfa önizleme kutusu */
.uq-item__thumb {
    width: 56px;
    height: 56px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.uq-item__thumb img { max-width: 100%; max-height: 100%; display: block; }

.uq-item__body {
    flex: 1;
    min-width: 9rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.uq-item__name {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
    font-size: 0.9rem;
    word-break: break-word;
}
.uq-item__status { display: flex; align-items: center; gap: 0.6rem; }
.uq-item__actions { flex: none; display: flex; gap: 0.4rem; }

/* Per-dosya ilerleme çubuğu — .summary-progress'in kompakt varyantı */
.uq-progress {
    flex: 1;
    height: 6px;
    min-width: 5rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    overflow: hidden;
}
.uq-progress__fill {
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--brand);
    transition: width 0.2s ease;
}
.uq-progress__label {
    flex: none;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* Durum metni — bekliyor/işleniyor/tamam/hata */
.uq-msg { font-size: 0.82rem; font-weight: 600; color: var(--ink-3); }
.uq-msg--processing { color: var(--brand); }
.uq-msg--done       { color: var(--success-ink); }
.uq-msg--error      { color: var(--danger-ink); }

/* Yükleme dönen göstergesi (reduced-motion §15 global kuralıyla durur) */
.uq-spinner {
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--brand-tint-strong);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: hl-spin 0.7s linear infinite;
}
@keyframes hl-spin { to { transform: rotate(360deg); } }

/* "İncele ve Devam" satırı */
.upload-next {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}
.upload-next[hidden] { display: none; }
.upload-next__hint {
    font-size: 0.84rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* ── 14. YARDIMCI SINIFLAR ───────────────────────────────────────────────── */
.muted { color: var(--ink-3); font-size: 0.85rem; }
a.muted { color: var(--ink-3); }
a.muted:hover { color: var(--brand); }

.flex-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
/* Tablo hücresindeki aksiyon grupları (Aç/Rapor/Sil vb.) SARMAZ — dar alanda
   butonlar alta kaymak yerine tablo yatay kayar (.table-scroll). Form buton
   satırlarındaki .actions (Kaydet/İptal) sarmaya devam eder. T-010. */
td .actions { flex-wrap: nowrap; }

.num-cell { text-align: right; font-variant-numeric: tabular-nums; }
/* Tablo metin hücresi — uzun serbest metni sınırlar (örn. AI notları). T-010. */
.cell-notes { max-width: 320px; font-size: 0.85rem; }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }

/* Satır-içi iki aşamalı onay — yıkıcı aksiyonlar (T-018 G-2).
   confirm.js tarafından enjekte edilir; native confirm() yedeği yerine geçer. */
.confirm-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
}
.confirm-inline__q {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--danger-ink);
    white-space: nowrap;
}

/* FIX-013 (R-008 F-1) — Tablo hücresinde silme onayı reflow düzeltmesi.
   confirm.js'in enjekte ettiği .confirm-inline ("Emin misiniz? Sil Vazgeç")
   tek "Sil" butonundan kat kat geniş; dar bir <td>'de auto-layout tablo TÜM
   sütunları yeniden hesaplıyor → satırlar zıplıyordu. Çözüm, yalnız tablo
   bağlamında (.savebar vb. tablo-dışı kullanım ETKİLENMEZ):
     1) confirm.js gizlenen "Sil" butonunu [hidden] yapar → UA display:none.
        Bunu ezip visibility:hidden'a çeviriyoruz: buton kutusu yerinde kalır,
        hücre genişliği hiç değişmez.
     2) .confirm-inline layout akışından çıkarılır (position:absolute) → sütun
        genişlik hesabına girmez. Opak popover olarak silme butonunun sağ
        kenarına demirlenir, sola doğru açılır → tablo sağ kenarı taşmaz.
   İkisi birlikte: tablo HİÇ zıplamaz. */
td form[data-confirm] { position: relative; }
td form[data-confirm] button[hidden] {
    display: inline-flex;          /* UA [hidden]{display:none}'ı ez */
    visibility: hidden;            /* görünmez + inert; kutusu yerini korur */
}
td form[data-confirm] .confirm-inline {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 5;
    padding: 0.4rem 0.55rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
}

/* ── 14b. FAZ 3 EK BİLEŞENLERİ ───────────────────────────────────────────── */

/* Geri bağlantısı */
.backlink {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-3);
    margin-bottom: 0.7rem;
}
.backlink:hover { color: var(--brand); text-decoration: none; }
.backlink::before { content: "\2039"; font-size: 1.15em; line-height: 1; }

/* Üst-veri satırı (rozet • alan • alan) */
.meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.8rem;
    margin: 0.55rem 0 0;
    color: var(--ink-2);
    font-size: 0.88rem;
}

/* Seçim kartları — radyo/onay kutusu kartı */
.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.85rem;
}
.choice-card {
    position: relative;
    display: block;
    cursor: pointer;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1.5px solid var(--field-border);
    border-radius: var(--r-md);
    transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.choice-card:hover { border-color: var(--brand); }
/* Klavye odağı — gizli radyo input'u odaklanınca görünür kartı çerçevele
   (T-012 U-1; opacity:0 input'un kendi outline'ı görünmez). */
.choice-card:has(input:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-tint);
    box-shadow: inset 0 0 0 1px var(--brand);
}
.choice-card__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 0.25rem;
}
.choice-card__title::before {
    content: "";
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    border: 2px solid var(--field-border);
    background: var(--surface);
    flex: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.choice-card:has(input:checked) .choice-card__title::before {
    border-color: var(--brand);
    background: var(--brand);
    box-shadow: inset 0 0 0 3px #fff;
}
.choice-card__desc { margin: 0 0 0 1.55rem; font-size: 0.83rem; color: var(--ink-2); }

/* Dosya yükleme bölgesi — sürükle-bırak doğal çalışır (etiket sarmalı input) */
.dropzone { position: relative; display: block; cursor: pointer; }
.dropzone input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    padding: 0;
}
/* Klavye odağı — gizli dosya input'u odaklanınca yükleme alanını çerçevele
   (T-012 U-1; opacity:0 input'un kendi outline'ı görünmez). */
.dropzone:has(input:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.dropzone__icon { color: var(--brand); margin-bottom: 0.5rem; }
.dropzone__icon svg { width: 34px; height: 34px; display: block; margin: 0 auto; }
.dropzone__title { font-weight: 600; color: var(--ink); margin: 0 0 0.2rem; }
.dropzone__hint { font-size: 0.84rem; color: var(--ink-3); margin: 0; }

/* Yapışkan eylem çubuğu — inceleme sayfaları */
.savebar {
    position: sticky;
    bottom: 1rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding: 0.85rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
}
.savebar__hint { margin: 0 auto 0 0; font-size: 0.85rem; color: var(--ink-3); }

/* Açılır bölüm — details/summary */
.disclosure { border-top: 1px solid var(--line-2); margin-top: 0.9rem; }
.disclosure > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 0 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before {
    content: "+";
    display: inline-grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: var(--r-xs);
    background: var(--brand-tint);
    color: var(--brand);
    font-weight: 700;
    line-height: 1;
}
.disclosure[open] > summary::before { content: "\2212"; }
.disclosure__body { padding: 0.85rem 0 0.4rem; }

/* §13e — Platform içerik denetimi akordeonu (T-007 Faz 3).
   L1 org grubu + L2/L3 lazy panel + skeleton placeholder. */
.audit-org {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    margin-bottom: 0.85rem;
}
.audit-org > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.95rem 1.15rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}
.audit-org > summary::-webkit-details-marker { display: none; }
.audit-org > summary::before {
    content: "+";
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: var(--r-xs);
    background: var(--brand-tint);
    color: var(--brand);
    font-weight: 700;
    line-height: 1;
}
.audit-org[open] > summary::before { content: "\2212"; }
.audit-org__name { flex: 1; }
.audit-org__meta { font-size: 0.82rem; font-weight: 500; color: var(--ink-3); }
.audit-org__body { padding: 0.1rem 1.15rem 0.9rem; }

/* L2/L3 lazy panel — iç içe açılabilir */
.lazy-panel { border-top: 1px solid var(--line-2); }
.lazy-panel:first-child { border-top: none; }
.lazy-panel > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.7rem 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--brand);
}
.lazy-panel > summary::-webkit-details-marker { display: none; }
.lazy-panel > summary::before {
    content: "+";
    flex: none;
    align-self: center;
    display: inline-grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: var(--r-xs);
    background: var(--brand-tint);
    color: var(--brand);
    font-weight: 700;
    line-height: 1;
    font-size: 0.82rem;
}
.lazy-panel[open] > summary::before { content: "\2212"; }
.lazy-panel__meta { font-size: 0.8rem; font-weight: 500; color: var(--ink-3); }
.lazy-panel__body { padding: 0.15rem 0 0.85rem 1.65rem; }
.audit-subgroup { margin: 0.3rem 0 1rem; }
.audit-subgroup:last-child { margin-bottom: 0.2rem; }
.audit-subgroup__head { font-size: 0.9rem; margin: 0 0 0.4rem; }

/* Skeleton placeholder — shimmer. reduced-motion'da düz bloğa düşer (§15). */
.skeleton { display: grid; gap: 0.5rem; padding: 0.35rem 0; }
.skeleton-line {
    display: block;
    height: 0.8rem;
    border-radius: var(--r-xs);
    background: linear-gradient(90deg, var(--line-2) 25%, var(--surface-2) 50%, var(--line-2) 75%);
    background-size: 200% 100%;
    animation: hl-shimmer 1.3s ease-in-out infinite;
}
.skeleton-line:nth-child(2) { width: 82%; }
.skeleton-line:nth-child(3) { width: 56%; }
@keyframes hl-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton-line { background: var(--line-2); }
}

/* Lazy yükleme hatası — satır içi, zarif */
.lazy-error {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--danger-ink);
    padding: 0.5rem 0;
}

/* İlerleme — küçük çubuk (oturum listesi) */
.progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.progress__track {
    width: 4.5rem;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--line);
    overflow: hidden;
    flex: none;
}
.progress__fill {
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--success);
}

/* Onboarding adım listesi (boş dashboard) */
.checklist { display: grid; gap: 0.6rem; }
.checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-2);
}
.checklist__n {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
}
.checklist__body { flex: 1; }
.checklist__title { font-weight: 600; color: var(--ink); margin: 0 0 0.15rem; }
.checklist__text { font-size: 0.85rem; color: var(--ink-2); margin: 0; }

/* Kullanıcı menüsü — üst bardaki açılır menü (details/summary, JS'siz) */
.usermenu { position: relative; }
.usermenu > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem 0.3rem 0.35rem;
    border-radius: var(--r-sm);
    color: #fff;
    transition: background 0.14s ease;
}
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover,
.usermenu[open] > summary { background: rgba(255,255,255,.12); }
.usermenu__avatar {
    width: 1.8rem;
    height: 1.8rem;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.20);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}
.usermenu__name {
    font-size: 0.85rem;
    font-weight: 500;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.usermenu__caret { font-size: 0.55rem; opacity: 0.8; }
.usermenu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    min-width: 232px;
    padding: 0.4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    z-index: 60;
}
.usermenu__id {
    padding: 0.55rem 0.65rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--line-2);
}
.usermenu__id strong { display: block; font-size: 0.9rem; color: var(--ink); }
.usermenu__id span {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.8rem;
    color: var(--ink-3);
    word-break: break-all;
}
.usermenu__link {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.65rem;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink-2);
}
.usermenu__link:hover {
    background: var(--brand-tint);
    color: var(--brand-ink);
    text-decoration: none;
}
.usermenu__link--danger:hover { background: var(--danger-tint); color: var(--danger-ink); }

/* Kimlik doğrulama sayfası — login (base.html'i genişletmez, bağımsız) */
.authpage {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    padding: 3rem 1.25rem;
}
.authpage__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
}
.authmark {
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
}
.authmark .lens { width: 30px; height: 30px; }
.authwordmark {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.01em;
}
.authcard {
    width: 100%;
    max-width: 25rem;
    padding: 1.9rem 1.8rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}
.authcard h1 { font-size: 1.35rem; margin: 0 0 0.3rem; }
.authpage__foot {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* İç panel — kart içinde gruplanmış içerik (rapor detayları) */
.panel {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 1.1rem 1.2rem;
    background: var(--surface-2);
    margin-bottom: 0.85rem;
}
.panel:last-child { margin-bottom: 0; }
.panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

/* İki kolonlu içerik ızgarası (rapor bölümleri) */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 680px) {
    .grid-2 { grid-template-columns: 1fr; }
}

/* ── 15. HAREKET (ANİMASYON) ─────────────────────────────────────────────── */
@keyframes hl-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.page-head { animation: hl-rise 0.5s cubic-bezier(.2,.7,.2,1) both; }
.stats-grid .stat-card { animation: hl-rise 0.5s cubic-bezier(.2,.7,.2,1) both; }
.stats-grid .stat-card:nth-child(1) { animation-delay: 0.05s; }
.stats-grid .stat-card:nth-child(2) { animation-delay: 0.10s; }
.stats-grid .stat-card:nth-child(3) { animation-delay: 0.15s; }
.stats-grid .stat-card:nth-child(4) { animation-delay: 0.20s; }
.stats-grid .stat-card:nth-child(5) { animation-delay: 0.25s; }
.stats-grid .stat-card:nth-child(6) { animation-delay: 0.30s; }
.stats-grid .stat-card:nth-child(7) { animation-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0s !important;
        transition-duration: 0.001ms !important;
    }
}

/* ── 16. YAZDIRMA ────────────────────────────────────────────────────────── */
@media print {
    .topbar, .sitefooter, .skip-link, .btn, button { display: none !important; }
    body { background: #fff; }
    .container { margin-top: 0; max-width: none; }
    .card, .stat-card {
        box-shadow: none;
        border-color: #ccc;
        break-inside: avoid;
    }
    a { color: inherit; }
}

/* ── 17. DUYARLI (RESPONSIVE) ────────────────────────────────────────────── */
@media (max-width: 860px) {
    .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
    .topbar__inner { padding: 0.7rem 1rem; }
    .mainnav { gap: 1.1rem; width: 100%; flex-wrap: wrap; }
    .usermenu__name { display: none; }
    .container { padding: 0 1rem 2.5rem; margin-top: 1.5rem; }
    h1, .page-title { font-size: 1.65rem; }
    .page-head { align-items: flex-start; }
    .card { padding: 1.25rem 1.15rem; }
    .stat-card .num { font-size: 2.05rem; }
    .review-layout { grid-template-columns: 1fr; }
    /* T-023 — tek sütun yığında yapışkanlık anlamsız (panel formu kapatır). */
    .review-pages { position: static; max-height: none; overflow-y: visible; }
    .orient-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }   /* (#) mobil: dar döşeme, oto-sarma */
    .steps { grid-template-columns: 1fr; }
    .sitefooter__inner { padding: 1.25rem 1rem; }
}