/* ==========================================================================
   AI REPETİTOR — brend qatı
   Palitra: Şirvanşah kaşı ənənəsi — kobalt, firuzə, zəfəran, nar.
   Bu fayl brend kitindən gəlir. RƏNGLƏRİ DƏYİŞMƏ.
   ========================================================================== */

/* ---------- Şrift: Archivo (SIL OFL, tam Azərbaycan dəstəyi) ---------- */
@font-face {
    font-family: 'Archivo';
    src: url('/fonts/Archivo-Body.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    src: url('/fonts/Archivo-Medium.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo Expanded';
    src: url('/fonts/Archivo-Display.ttf') format('truetype');
    font-weight: 800;
    font-display: swap;
}

:root {
    /* ---------- XAM TOKENLƏR (brend kitindən — toxunma) ---------- */
    --air-ink: #0A1B4D; /* Gecə */
    --air-cobalt: #1F3BB3; /* Kobalt */
    --air-pale: #8CA5F5; /* Solğun kobalt */
    --air-wash: #E8EDFB; /* Açıq səth */
    --air-firuze: #16C4C0; /* Firuzə */
    --air-zefer: #FFB01F; /* Zəfəran */
    --air-nar: #E23A57; /* Nar */
    --air-paper: #F2F4F9;
    --air-white: #FFFFFF;
    --air-line: #D8DEEC;
    --air-muted: #5C6789;

    /* Yumşaq fonlar — xam tokenlərdən törəyir */
    --air-firuze-soft: #E1F8F7;
    --air-zefer-soft: #FFF3DC;
    --air-nar-soft: #FCE8EC;

    /* ---------- SEMANTİK QAT ----------
       Qayda burada yaşayır. Görünüşlərdə birbaşa rəng yazılmır. */

    --ink: var(--air-ink);
    --muted: var(--air-muted);
    --paper: var(--air-paper);
    --card: var(--air-white);
    --line: var(--air-line);
    --surface: #FAFBFD; /* çox açıq səth: hover, zebra */

    /* Tünd (gecə) fonda mətn — brend kiti bunu nəzərdə tutub:
       solğun kobalt tünd fonda ikinci dərəcəli elementlər üçündür. */
    --on-ink: var(--air-wash); /* əsas mətn */
    --on-ink-muted: var(--air-pale); /* ikinci dərəcəli */
    --on-ink-dim: #5E6E9E; /* bölmə başlıqları */

    /* Düymələr, linklər, marka */
    --accent: var(--air-cobalt);
    --accent-soft: var(--air-wash);
    --accent-dark: #16299A;
    --accent-line: #C9D5F5; /* kobalt kənar */

    /* Güclənmə: düz cavab, streak, irəliləyiş, qrafiklər */
    --ok: var(--air-firuze);
    --ok-soft: var(--air-firuze-soft);
    --ok-deep: #0E8F8C; /* firuzə mətn — ağ fonda oxunaqlı */
    --ok-line: #A8E9E7; /* firuzə kənar */

    /* AI-NIN TAPDIĞI CAVAB — YALNIZ bunun üçün.
       Düymə, hover, xəbərdarlıq, dekorasiya — QADAĞAN.
       Yalnız şagird cavabı BİLMƏYƏNDƏ açıqlanır: səhv və ya boş.
       Nadirliyi mənasıdır: zəfəran hara düşürsə, məhz ora oxumaq lazımdır. */
    --answer: var(--air-zefer);
    --answer-soft: var(--air-zefer-soft);
    --answer-deep: #8A5A00; /* zəfəran mətn — ağ fonda oxunaqlı */
    --answer-line: #F5D08A; /* zəfəran kənar — yumşaq fonda sərhəd */

    /* Zəif nöqtə və səhv cavab */
    --bad: var(--air-nar);
    --bad-soft: var(--air-nar-soft);
    --bad-line: #F5C7D0; /* nar kənar */

    /* Diqqət tələb edən, amma səhv olmayan (admin) — neytral */
    --warn: var(--air-muted);
    --warn-soft: var(--air-wash);

    /* ---------- Forma ---------- */
    --r-sm: 8px;
    --r: 14px;
    --r-lg: 22px;
    --shadow: 0 1px 2px rgba(10, 27, 77, .06), 0 8px 24px rgba(10, 27, 77, .08);

    /* ---------- Tipoqrafiya ---------- */
    --font-display: 'Archivo Expanded', 'Archivo', system-ui, sans-serif;
    --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Consolas, monospace;
}

/* ---------- Başlıqlar: Expanded 800, sıx tracking ---------- */
h1, h2, h3, .display {
    font-family: var(--font-display);
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: -0.022em;
}

body {
    font-family: var(--font-body);
}

.num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ---------- Loqo ---------- */
.brand-logo {
    display: block;
    height: 30px;
    width: auto;
}

.brand-mark {
    display: block;
    height: 30px;
    width: 30px;
}

/* Dar ekranda tam kilid yerinə yalnız marka */
.brand-mark-only {
    display: none;
}

@media (max-width: 560px) {
    .brand-logo {
        display: none;
    }

    .brand-mark-only {
        display: block;
    }
}

/* ---------- AI yükləyici: marka canlanır, zəfəran xanası açılır ---------- */
.ai-loader {
    display: inline-block;
    width: 26px;
    height: 26px;
    vertical-align: -7px;
    margin-right: 9px;
}

/* ---------- Naxış: yalnız fon, 10-16% şəffaflıq ---------- */
.pattern-bg {
    background-image: url('/brand/pattern-bubbles.svg');
    background-size: 460px;
    background-repeat: repeat;
    opacity: 0.12;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ==========================================================================
   CİLALANMA QATI (2-E) — qlobal mikro-interaksiyalar, fokus, hərəkət tənzimi.
   brand.css bütün panellərdə yükləndiyi üçün bu, saytın hər yerinə tətbiq olunur.
   ========================================================================== */

/* Şəkillər heç vaxt konteynerdən daşmır (mobil təhlükəsizlik) */
img {
    max-width: 100%;
    height: auto;
}

/* Yumşaq keçidlər — ani/kobud hover əvəzinə axıcı hiss */
.btn, button, a, .card, .tag, .opt,
input, select, textarea {
    transition: background-color .16s ease, border-color .16s ease,
    color .16s ease, box-shadow .18s ease, transform .12s ease;
}

/* Düymə mikro-interaksiyası — hoverdə yüngül qalxma, basanda enmə */
.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled, button:disabled, .btn.disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Yalnız klik-oluna bilən kartlar hoverdə yüngül qalxır (statik kartlar toxunulmur) */
a > .card:hover, a.card:hover, .card.clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(16, 27, 45, .12);
}

/* Klaviatura fokusu — əlçatanlıq (yalnız Tab ilə, siçan klikində yox) */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Sahə fokusu — vurğu haşiyəsi + yumşaq halqa */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Mətn seçimi — brend çaları */
::selection {
    background: var(--accent-soft);
    color: var(--ink);
}

/* Yumşaq səhifə sürüşməsi (lövbər keçidləri, məs. landing FAQ) */
html {
    scroll-behavior: smooth;
}

/* Zərif giriş animasiyası — istəyə bağlı: elementə .rise class-ı verin */
@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rise {
    animation: rise .34s ease both;
}

/* Hərəkət tənzimi — istifadəçi "az hərəkət" seçibsə hər şey dayanır (əlçatanlıq) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}