/* ============================================================================
   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 (Google Fonts) — 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:            #837f7a;
    --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%; }

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; }

.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; }

/* ── 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;
    color: var(--ink-3);
    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; }

/* ── 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); }

/* ── 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; }

.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;
}
.review-pages img {
    display: block;
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    margin-bottom: 0.6rem;
}

.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; }

#sosyogram {
    width: 100%;
    height: 600px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}

/* ── 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); }

/* ── 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); }
.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;
}
.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; }

/* İ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; }
    .steps { grid-template-columns: 1fr; }
    .sitefooter__inner { padding: 1.25rem 1rem; }
}