/* =============================================================================
   Kalite Denetim (Quality Audit) — "Refined Atelier" premium tasarim katmani
   -----------------------------------------------------------------------------
   Kapsam: yalniz .qa-scope koku altindaki sayfalar (modul disini ETKILEMEZ).
   Yaklasim: MudBlazor bilesenlerinin ustune CSS-first rafine katman —
   lacivert derinlik + altin muhur vurgusu + editoryal tipografi + hafif doku.
   Kullanilabilirlik birincildir: kontrast korunur, dokunma hedefleri buyur,
   animasyonlar kisa ve amacli tutulur (prefers-reduced-motion desteklenir).
   ============================================================================= */

.qa-scope {
    /* ---- Palet: lacivert derinlik + altin + krem kagit ---- */
    --qa-navy-950: #0E1B2C;
    --qa-navy-900: #16263D;
    --qa-navy-800: #1E3A5F;   /* modulun mevcut kimlik rengi */
    --qa-navy-600: #33517A;
    --qa-navy-100: #E2E9F2;
    --qa-gold: #B98A2F;
    --qa-gold-soft: #D9B45C;
    --qa-gold-faint: rgba(185, 138, 47, .12);
    --qa-paper: #FBFAF7;
    --qa-card: #FFFFFF;
    --qa-line: #E4E1D8;
    --qa-ink: #1C2B3A;
    --qa-ink-soft: #5C6B7A;

    /* ---- Semantik (not/durum renkleri mevcut contracts ile uyumlu) ---- */
    --qa-ok: #2E7D32;
    --qa-warn: #E08700;
    --qa-bad: #D64541;

    /* ---- Tipografi ---- */
    --qa-font-display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
    --qa-font-body: 'Instrument Sans', 'Segoe UI', sans-serif;

    /* ---- Ritim ---- */
    --qa-radius: 14px;
    --qa-radius-sm: 10px;
    --qa-shadow-1: 0 1px 2px rgba(14, 27, 44, .05), 0 4px 16px rgba(14, 27, 44, .06);
    --qa-shadow-2: 0 2px 4px rgba(14, 27, 44, .07), 0 12px 32px rgba(14, 27, 44, .10);
    --qa-ease: cubic-bezier(.22, .8, .36, 1);

    font-family: var(--qa-font-body);
    color: var(--qa-ink);
}

/* Sayfa fonu: krem kagit + cok hafif dokuma dokusu (tekstil gondermesi).
   Doku %2 opaklikta — icerigi asla yormaz. */
.qa-scope.qa-page {
    background:
        radial-gradient(1200px 500px at 85% -10%, var(--qa-gold-faint), transparent 60%),
        repeating-linear-gradient(45deg, rgba(30, 58, 95, .018) 0 1px, transparent 1px 7px),
        var(--qa-paper);
    border-radius: var(--qa-radius);
    padding-bottom: 24px;
}

/* =============================================================================
   1) SAYFA BASLIGI — editoryal kimlik
   ============================================================================= */
.qa-page-header {
    position: relative;
    padding: 22px 26px 18px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, var(--qa-navy-950) 0%, var(--qa-navy-800) 68%, var(--qa-navy-600) 100%);
    border-radius: var(--qa-radius);
    box-shadow: var(--qa-shadow-2);
    overflow: hidden;
    color: #fff;
}

/* Baslikta koseye islenmis buyuk "QA" filigrani — atolye damgasi */
.qa-page-header::after {
    content: "QA";
    position: absolute;
    right: -6px;
    top: -34px;
    font-family: var(--qa-font-display);
    font-size: 148px;
    font-weight: 800;
    letter-spacing: -6px;
    color: rgba(255, 255, 255, .045);
    pointer-events: none;
    user-select: none;
}

.qa-page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 6px);
    pointer-events: none;
}

.qa-page-header .qa-title {
    font-family: var(--qa-font-display);
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.15;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.qa-page-header .qa-subtitle {
    color: rgba(255, 255, 255, .72);
    font-size: .8rem;
    letter-spacing: .35px;
    margin-top: 3px;
}

/* Baslik altin cizgisi — muhur seridi */
.qa-page-header .qa-title::before {
    content: "";
    width: 5px;
    height: 30px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--qa-gold-soft), var(--qa-gold));
    box-shadow: 0 0 12px rgba(217, 180, 92, .5);
    flex: 0 0 auto;
}

/* Baslik icindeki buton grubu koyu zeminde okunur kalsin */
.qa-page-header .mud-button-outlined {
    border-color: rgba(255, 255, 255, .35) !important;
    color: #fff !important;
}
.qa-page-header .mud-button-outlined:hover {
    background: rgba(255, 255, 255, .08) !important;
    border-color: var(--qa-gold-soft) !important;
}

/* =============================================================================
   2) KARTLAR — kagit uzerinde kagit
   ============================================================================= */
.qa-scope .mud-paper {
    border-radius: var(--qa-radius) !important;
    border: 1px solid var(--qa-line);
    box-shadow: var(--qa-shadow-1) !important;
    transition: box-shadow .25s var(--qa-ease), transform .25s var(--qa-ease);
}

.qa-card-hover:hover {
    box-shadow: var(--qa-shadow-2) !important;
    transform: translateY(-2px);
}

/* KPI karti: sol serit yerine ust-ince altin isik + buyuk display rakam */
.qa-kpi {
    position: relative;
    overflow: hidden;
}
.qa-kpi::before {
    content: "";
    position: absolute;
    top: 0; left: 14px; right: 14px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--qa-gold-soft), transparent);
    opacity: .8;
}
.qa-kpi .qa-kpi-value {
    font-family: var(--qa-font-display);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
}

/* =============================================================================
   3) NOT MUHRU (GradeBadge v2) — modulun ikonik varligi
   Cift halkali damga: dis altin cember + not renkli govde + display harf.
   ============================================================================= */
.qa-seal {
    --seal-size: 34px;
    --seal-color: #9E9E9E;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--seal-size);
    height: var(--seal-size);
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .35), transparent 46%),
        var(--seal-color);
    color: #fff;
    font-family: var(--qa-font-display);
    font-weight: 800;
    font-size: calc(var(--seal-size) * .5);
    line-height: 1;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, .28),
        inset 0 -4px 8px rgba(0, 0, 0, .18),
        0 2px 6px rgba(14, 27, 44, .28);
    flex: 0 0 auto;
    user-select: none;
}

/* Dis altin cember — muhur cercevesi */
.qa-seal::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid var(--qa-gold-soft);
    opacity: .85;
}

/* Testere-dis muhur kenari hissi: kesikli ince ikinci halka */
.qa-seal::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px dashed rgba(185, 138, 47, .38);
}

.qa-seal--sm { --seal-size: 26px; }
.qa-seal--sm::after { inset: -5px; }
.qa-seal--lg { --seal-size: 52px; }
.qa-seal--xl { --seal-size: 84px; }
.qa-seal--xl::before { inset: -6px; border-width: 2px; }
.qa-seal--xl::after { inset: -12px; }

/* Bos not (-) icin sade nokta */
.qa-seal-empty {
    color: #94A3B8;
    font-size: .85rem;
    padding: 0 6px;
}

/* =============================================================================
   4) SKOR KOKPITI (AuditExecute sag raili) — conic-gradient ilerleme halkasi
   Kullanim: <div class="qa-ring" style="--qa-pct:78; --qa-ring-color:#66BB6A">
   ============================================================================= */
.qa-cockpit {
    background:
        radial-gradient(320px 160px at 110% -20%, var(--qa-gold-faint), transparent 70%),
        linear-gradient(160deg, var(--qa-navy-950), var(--qa-navy-800)) !important;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .06) !important;
}
.qa-cockpit .mud-typography { color: #fff; }
.qa-cockpit .qa-muted { color: rgba(255, 255, 255, .62) !important; }
.qa-cockpit .mud-divider { border-color: rgba(255, 255, 255, .12) !important; }

.qa-ring {
    --qa-pct: 0;
    --qa-ring-color: var(--qa-gold-soft);
    position: relative;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background:
        conic-gradient(var(--qa-ring-color) calc(var(--qa-pct) * 1%), rgba(255, 255, 255, .13) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background .6s var(--qa-ease);
}
.qa-ring::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--qa-navy-900);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35);
}
.qa-ring > * { position: relative; z-index: 1; }
.qa-ring .qa-ring-value {
    font-family: var(--qa-font-display);
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.5px;
}
.qa-ring .qa-ring-label {
    font-size: .58rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
    text-align: center;
}

/* Bolum ilerleme satirlari (kokpit ici mini liste) */
.qa-cockpit .qa-sec-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: .78rem;
    padding: 3px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, .08);
}
.qa-cockpit .qa-sec-row:last-child { border-bottom: 0; }

/* =============================================================================
   5) TABLOLAR — editoryal satir ritmi
   ============================================================================= */
.qa-scope .mud-table {
    border-radius: var(--qa-radius) !important;
    overflow: hidden;
}
.qa-scope .mud-table-head .mud-table-cell {
    background: var(--qa-navy-950) !important;
    color: rgba(255, 255, 255, .88) !important;
    font-family: var(--qa-font-body);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .8px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--qa-gold) !important;
}
.qa-scope .mud-table-head .mud-table-sort-label,
.qa-scope .mud-table-head .mud-table-sort-label:hover,
.qa-scope .mud-table-head .mud-icon-root {
    color: rgba(255, 255, 255, .88) !important;
}
.qa-scope .mud-table-row:hover .mud-table-cell {
    background: var(--qa-gold-faint) !important;
}
.qa-scope .mud-table-row .mud-table-cell {
    transition: background .18s var(--qa-ease);
    border-bottom: 1px solid #EFEDE6;
}

/* =============================================================================
   6) DURUM CIPLERI — dolgun pill yerine ince "etiket" dili
   Mevcut inline renkler korunur; sadece bicim rafine edilir.
   ============================================================================= */
.qa-scope .mud-chip {
    border-radius: 999px !important;
    font-weight: 600;
    letter-spacing: .3px;
}
.qa-scope .mud-chip.mud-chip-size-small {
    height: 22px;
    font-size: .68rem;
}

/* =============================================================================
   7) SAYFA GIRIS ANIMASYONU — tek, iyi yonetilmis an (staggered fade-up)
   ============================================================================= */
@keyframes qa-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
.qa-scope .qa-rise { animation: qa-rise .5s var(--qa-ease) both; }
.qa-scope .qa-rise-1 { animation-delay: .04s; }
.qa-scope .qa-rise-2 { animation-delay: .1s; }
.qa-scope .qa-rise-3 { animation-delay: .16s; }
.qa-scope .qa-rise-4 { animation-delay: .22s; }

/* =============================================================================
   8) SAHA MODU (/saha) — gunes altinda okunur, dokunsal, premium
   ============================================================================= */
.qa-field {
    font-family: var(--qa-font-body, 'Instrument Sans', sans-serif);
}

/* Yapiskan saha basligi: lacivert cam + altin alt cizgi */
.qa-field-header {
    background: linear-gradient(160deg, rgba(14, 27, 44, .97), rgba(30, 58, 95, .97)) !important;
    -webkit-backdrop-filter: saturate(1.2) blur(6px);
    backdrop-filter: saturate(1.2) blur(6px);
    border-bottom: 2px solid #B98A2F !important;
    box-shadow: 0 6px 20px rgba(14, 27, 44, .25) !important;
    color: #fff;
}
.qa-field-header .mud-typography { color: #fff; }
.qa-field-header .qa-muted { color: rgba(255, 255, 255, .65) !important; }
.qa-field-header .mud-icon-button { color: rgba(255, 255, 255, .9); }

/* Saha cevap butonlari: buyuk, dokunsal, belirgin secim (48px+ hedef korunur) */
.qa-answer-btn {
    min-width: 64px !important;
    min-height: 50px !important;
    border-radius: 14px !important;
    font-family: var(--qa-font-display, inherit) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    border-width: 2px !important;
    transition: transform .12s var(--qa-ease), box-shadow .12s var(--qa-ease) !important;
}
.qa-answer-btn:active { transform: scale(.94); }
.qa-answer-btn.mud-button-filled {
    box-shadow: 0 4px 14px rgba(14, 27, 44, .22) !important;
}

/* Saha soru karti: sol ince aksan seridi ile taranabilir ritim */
.qa-question-card {
    border-left: 3px solid #E4E1D8 !important;
    transition: border-color .2s var(--qa-ease), box-shadow .2s var(--qa-ease);
}
.qa-question-card.qa-answered { border-left-color: #2E7D32 !important; }
.qa-question-card.qa-answered-zero { border-left-color: #D64541 !important; }
.qa-question-card.qa-answered-na { border-left-color: #94A3B8 !important; }

/* Saha bolum cipleri: dokunsal hap seridi */
.qa-section-chip .mud-chip {
    min-height: 34px;
    border-radius: 999px !important;
    font-weight: 600;
}

/* Saha alt bar: cam efekti */
.qa-field-bottombar {
    background: rgba(255, 255, 255, .92) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid #E4E1D8 !important;
    box-shadow: 0 -6px 20px rgba(14, 27, 44, .08);
}

/* =============================================================================
   9) BOS DURUMLAR + YARDIMCILAR
   ============================================================================= */
.qa-empty {
    text-align: center;
    padding: 36px 16px;
    color: var(--qa-ink-soft);
}
.qa-empty .mud-icon-root {
    font-size: 44px;
    color: var(--qa-gold-soft);
    opacity: .8;
    margin-bottom: 8px;
}

.qa-display { font-family: var(--qa-font-display) !important; }
.qa-num { font-variant-numeric: tabular-nums; }

/* Denetim numarasi rozeti (QA-2026-0009 gibi) — monogram etiket */
.qa-no {
    font-family: var(--qa-font-display);
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--qa-navy-800);
}

/* =============================================================================
   10) ERISILEBILIRLIK / HAREKET TERCIHI
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .qa-scope *, .qa-field * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}