/* =============================================================
   RusLearn – Design System v3.0
   Dual-mode (light/dark), creative animations, artistic effects
   ============================================================= */

/* ─────────────── 1. LIGHT MODE (default) ─────────────── */
:root {
    /* surfaces */
    --app-bg: #f4f6fb;
    --app-bg-soft: #eef1f8;
    --app-surface: rgba(255, 255, 255, 0.82);
    --app-surface-strong: rgba(255, 255, 255, 0.94);
    --app-surface-glass: rgba(255, 255, 255, 0.58);
    --app-surface-rgb: 255, 255, 255;

    /* borders */
    --app-border: rgba(30, 50, 90, 0.08);
    --app-border-strong: rgba(30, 50, 90, 0.14);
    --app-border-soft: rgba(30, 50, 90, 0.08);

    /* text */
    --app-text: #3a4560;
    --app-text-soft: #6b7a94;
    --app-title: #1a2540;
    /* İkincil/soluk metin. `--app-text-soft` TEK BAŞINA AA'yı geçmiyor: en zorlu
       zeminde (oyun ipucu hapı) gündüz 3,00:1, gece 3,57:1 ölçüldü. Başlığa doğru
       %60 karıştırılınca her iki temada da en kötü durumda 4,9:1'in üstüne çıkıyor.
       Tek tanım yeter — içindeki iki değişken de gece bloğunda aynı `html`
       öğesinde değiştiği için değer temayla birlikte kendiliğinden dönüyor. */
    --app-muted: color-mix(in srgb, var(--app-text-soft) 60%, var(--app-title));

    /* palette */
    --app-primary: #5f6fff;
    --app-primary-rgb: 95, 111, 255;
    --app-secondary: #5ca7e8;
    --app-secondary-rgb: 92, 167, 232;
    --app-accent: #3bbf98;
    --app-accent-rgb: 59, 191, 152;
    --app-success-rgb: 59, 191, 152;
    --app-warning: #f0a030;
    --app-warning-rgb: 240, 160, 48;
    --app-danger: #ef5070;
    --app-danger-rgb: 239, 80, 112;

    /* glow / aurora */
    --app-glow-a: rgba(95, 111, 255, 0.10);
    --app-glow-b: rgba(92, 167, 232, 0.08);
    --app-glow-c: rgba(59, 191, 152, 0.06);

    /* shadows */
    --app-shadow: 0 16px 40px rgba(30, 50, 90, 0.08);
    --app-shadow-soft: 0 8px 24px rgba(30, 50, 90, 0.06);
    --app-shadow-glow: 0 8px 32px rgba(95, 111, 255, 0.10);

    /* radii */
    --app-radius-xl: 24px;
    --app-radius-lg: 18px;
    --app-radius-md: 14px;
    --app-radius-sm: 12px;

    /* navbar */
    --nav-bg: rgba(255, 255, 255, 0.72);
    --nav-border: rgba(30, 50, 90, 0.08);
    --nav-text: #3a4560;
    --nav-hover-bg: rgba(95, 111, 255, 0.06);

    /* misc */
    --app-font: "Manrope", Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: "Unbounded", "Manrope", "Segoe UI", system-ui, sans-serif;

    /* motion — TEK dil: iki easing + üç süre. Overshoot/bounce yalnız ödül
       anlarına (rozet pop) aittir; arayüz geçişleri sakin ve kararlıdır. */
    --dur-fast: 140ms;
    --dur-base: 240ms;
    --dur-slow: 420ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft: cubic-bezier(0.45, 0, 0.2, 1);

    --app-backdrop-grid: rgba(30, 50, 90, 0.03);
    --app-footer-bg: rgba(255, 255, 255, 0.72);
    --app-footer-border: rgba(30, 50, 90, 0.06);

    /* Buton dolgusu. 2026-08-06: iki-renkli gradyanlar DÜZ renge çevrildi.
       İndigo→gökmavisi geçişi butonun kendi içinde bir yön uyduruyordu ve
       markanın tek rengini bulanıklaştırıyordu; düz dolgu hem daha güncel
       hem de kimliği net tutuyor. Değişken adları geriye dönük korundu. */
    --btn-gradient: #5f6fff;
    --btn-gradient-hover: #4f5fef;
    --btn-success-gradient: #2fa77f;
    --btn-ghost-bg: rgba(95, 111, 255, 0.06);
    --btn-ghost-border: rgba(95, 111, 255, 0.18);

    /* form */
    --input-bg: rgba(255, 255, 255, 0.7);
    --input-border: rgba(30, 50, 90, 0.12);
    --input-focus-border: rgba(95, 111, 255, 0.5);
    --input-focus-ring: rgba(95, 111, 255, 0.12);

    /* card overlay shimmer */
    --card-shimmer: linear-gradient(135deg, rgba(255, 255, 255, 0.6), transparent 40%);

    /* badge / kicker */
    --kicker-bg: rgba(95, 111, 255, 0.08);
    --kicker-text: #5f6fff;
    --kicker-border: rgba(95, 111, 255, 0.12);

    /* alert */
    --alert-bg: rgba(255, 255, 255, 0.8);
    --alert-border: rgba(30, 50, 90, 0.06);

    /* leaderboard rank */
    --rank-bg: rgba(95, 111, 255, 0.10);

    /* table */
    --table-bg: transparent;
    --table-stripe: rgba(95, 111, 255, 0.03);
    --table-hover: rgba(95, 111, 255, 0.06);
    --table-header-bg: rgba(95, 111, 255, 0.04);

    /* accordion inside dropdown */
    --accord-bg: rgba(95, 111, 255, 0.04);
    --accord-active-bg: linear-gradient(135deg, rgba(95, 111, 255, 0.12), rgba(92, 167, 232, 0.08));
    --accord-body-bg: rgba(95, 111, 255, 0.02);
    --accord-arrow-filter: none;

    /* dropdown */
    --dropdown-bg: rgba(255, 255, 255, 0.96);
    --dropdown-hover: rgba(95, 111, 255, 0.08);

    /* flash pill */
    --flash-pill-bg: rgba(95, 111, 255, 0.10);
    --flash-pill-text: #5f6fff;

    /* hero ders sahnesi (video alanı) — sahne her iki temada da sinematik
       koyu kalır (video çerçevesi doğası gereği koyudur); overlay'ler sabit. */
    --stage-bg: linear-gradient(160deg, #26304b 0%, #1b2338 52%, #151c2e 100%);
    --stage-border: rgba(148, 168, 210, 0.22);
    --stage-shadow: 0 24px 60px -18px rgba(24, 34, 62, 0.45);

    /* hero visual panel */
    --hero-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(245, 247, 255, 0.95));
    --hero-panel-border: rgba(95, 111, 255, 0.08);
    --mini-card-bg: rgba(95, 111, 255, 0.04);
    --mini-card-border: rgba(95, 111, 255, 0.08);

    /* current user highlight */
    --current-user-bg: linear-gradient(135deg, rgba(59, 191, 152, 0.06), rgba(92, 167, 232, 0.04));
    --current-user-border: rgba(59, 191, 152, 0.22);

    /* metric card */
    --metric-bg: rgba(255, 255, 255, 0.6);
    --metric-border: rgba(30, 50, 90, 0.06);

    /* auth feature */
    --feature-item-bg: rgba(95, 111, 255, 0.03);
    --feature-item-border: rgba(95, 111, 255, 0.06);
}

/* ─────────────── 2. DARK MODE OVERRIDES ─────────────── */
html.dark-mode {
    color-scheme: dark;

    /* Softened dark palette: a calm slate-navy, not near-black.
       Surfaces sit clearly above the canvas so panels read as elevated. */
    --app-bg: #161d2c;
    --app-bg-soft: #1b2335;
    --app-surface: rgba(33, 44, 66, 0.74);
    --app-surface-strong: rgba(38, 50, 74, 0.90);
    --app-surface-glass: rgba(33, 44, 66, 0.56);
    --app-surface-rgb: 33, 44, 66;

    --app-border: rgba(170, 184, 208, 0.13);
    --app-border-strong: rgba(170, 184, 208, 0.20);
    --app-border-soft: rgba(170, 184, 208, 0.13);

    --app-text: #cdd9ea;
    --app-text-soft: #94a4bd;
    --app-title: #edf2f8;

    --app-glow-a: rgba(95, 111, 255, 0.13);
    --app-glow-b: rgba(92, 167, 232, 0.10);
    --app-glow-c: rgba(59, 191, 152, 0.06);
    --app-success-rgb: 59, 191, 152;
    --app-warning-rgb: 240, 160, 48;
    --app-danger-rgb: 239, 80, 112;

    --app-shadow: 0 16px 40px rgba(8, 13, 26, 0.34);
    --app-shadow-soft: 0 10px 26px rgba(8, 13, 26, 0.24);
    --app-shadow-glow: 0 8px 32px rgba(95, 111, 255, 0.16);

    --nav-bg: rgba(27, 36, 54, 0.84);
    --nav-border: rgba(255, 255, 255, 0.09);
    --nav-text: #cdd9ea;
    --nav-hover-bg: rgba(255, 255, 255, 0.07);

    --app-backdrop-grid: rgba(255, 255, 255, 0.03);
    --app-footer-bg: rgba(20, 27, 42, 0.74);
    --app-footer-border: rgba(255, 255, 255, 0.07);

    /* Gece modunda da düz dolgu; koyu zeminde biraz açılır ki kontrast tutsun. */
    --btn-gradient: #6b79ff;
    --btn-gradient-hover: #7d89ff;
    --btn-success-gradient: #35b48b;
    --btn-ghost-bg: rgba(255, 255, 255, 0.05);
    --btn-ghost-border: rgba(255, 255, 255, 0.16);

    --input-bg: rgba(255, 255, 255, 0.04);
    --input-border: rgba(255, 255, 255, 0.10);
    --input-focus-border: rgba(124, 92, 255, 0.55);
    --input-focus-ring: rgba(124, 92, 255, 0.16);

    --card-shimmer: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 38%);

    --kicker-bg: rgba(255, 255, 255, 0.04);
    --kicker-text: #b4c2da;
    --kicker-border: rgba(255, 255, 255, 0.10);

    --alert-bg: rgba(30, 40, 60, 0.82);
    --alert-border: rgba(255, 255, 255, 0.07);

    --rank-bg: rgba(124, 92, 255, 0.18);

    --table-bg: transparent;
    --table-stripe: rgba(255, 255, 255, 0.02);
    --table-hover: rgba(124, 92, 255, 0.06);
    --table-header-bg: rgba(255, 255, 255, 0.04);

    --accord-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    --accord-active-bg: linear-gradient(180deg, rgba(95, 111, 255, 0.14), rgba(92, 167, 232, 0.08));
    --accord-body-bg: rgba(255, 255, 255, 0.02);
    --accord-arrow-filter: invert(1) opacity(0.85);

    --dropdown-bg: rgba(30, 40, 60, 0.97);
    --dropdown-hover: rgba(95, 111, 255, 0.14);

    --flash-pill-bg: rgba(124, 92, 255, 0.16);
    --flash-pill-text: #d8d2ff;

    --stage-bg: linear-gradient(160deg, #1f2740 0%, #171e32 52%, #111726 100%);
    --stage-border: rgba(255, 255, 255, 0.12);
    --stage-shadow: 0 24px 60px -18px rgba(4, 8, 18, 0.6);

    --hero-panel-bg: linear-gradient(180deg, rgba(12, 18, 30, 0.86), rgba(10, 16, 26, 0.96));
    --hero-panel-border: rgba(255, 255, 255, 0.08);
    --mini-card-bg: rgba(255, 255, 255, 0.03);
    --mini-card-border: rgba(255, 255, 255, 0.08);

    --current-user-bg: linear-gradient(135deg, rgba(102, 211, 176, 0.06), rgba(92, 167, 232, 0.03));
    --current-user-border: rgba(75, 240, 180, 0.28);

    --metric-bg: rgba(255, 255, 255, 0.025);
    --metric-border: rgba(255, 255, 255, 0.08);

    --feature-item-bg: rgba(255, 255, 255, 0.03);
    --feature-item-border: rgba(255, 255, 255, 0.06);
}

/* ─────────────── 3. KEYFRAME ANIMATIONS ─────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.97) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--app-primary-rgb), 0.25); }
    50% { box-shadow: 0 0 0 10px rgba(var(--app-primary-rgb), 0); }
}

@keyframes borderGlow {
    0%, 100% { border-color: rgba(var(--app-primary-rgb), 0.12); }
    50% { border-color: rgba(var(--app-primary-rgb), 0.28); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes gradientRotate {
    0% { --gradient-angle: 135deg; }
    100% { --gradient-angle: 495deg; }
}

@keyframes rippleOut {
    0% { transform: scale(0); opacity: 0.5; }
    100% { transform: scale(4); opacity: 0; }
}

@keyframes dropdownReveal {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes staggerFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────── 4. GLOBAL / BODY ─────────────── */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

html:not(.dark-mode) {
    color-scheme: light;
}

body.app-shell {
    position: relative;
    background: var(--app-bg);
    color: var(--app-text);
    font-family: var(--app-font);
    padding-bottom: 0;
    /* clip (not hidden): keep horizontal bleed contained WITHOUT turning the
       body into a scroll container — `hidden` silently flips overflow-y to
       `auto`, clamping body height to the viewport and desyncing the fixed
       backdrop / page background from taller content. */
    overflow-x: clip;
    transition: background 0.5s ease, color 0.4s ease;
}

/* mode-switch transition helper — added/removed by JS */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
    transition: background 0.5s ease, color 0.4s ease, border-color 0.4s ease,
                box-shadow 0.4s ease, fill 0.4s ease, stroke 0.4s ease !important;
}

/* ─────────────── 5. BACKDROP (ambient effects) ─────────────── */
.page-backdrop {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.page-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 15%, var(--app-glow-a), transparent 18%),
        radial-gradient(circle at 80% 22%, var(--app-glow-b), transparent 16%),
        radial-gradient(circle at 30% 80%, var(--app-glow-c), transparent 18%);
}

.page-grid {
    position: absolute;
    inset: 0;
    opacity: 1;
    background-image:
        linear-gradient(var(--app-backdrop-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--app-backdrop-grid) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: radial-gradient(circle at center, black 30%, transparent 88%);
}

/* ─────────────── 6. Z-INDEX LAYERS ─────────────── */
.site-navbar,
.app-main,
.site-footer {
    position: relative;
    z-index: 1;
}

.site-navbar { z-index: 30; }
.app-main    { z-index: 1;  }
.site-footer { z-index: 2;  }

/* ─────────────── 7. NAVBAR ─────────────── */
.site-navbar {
    padding: 0.8rem 0 0;
    background: transparent !important;
    box-shadow: none !important;
}

.site-nav-shell {
    min-height: 72px;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--nav-border);
    border-radius: 26px;
    background: var(--nav-bg);
    backdrop-filter: blur(20px) saturate(1.3);
    box-shadow: var(--app-shadow-soft);
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    /* Kademeli küçültme merdiveni bu hapın KENDİ genişliğini sorgular
       (aşağıdaki `@container navshell` kuralları). Görünüm alanına bakmak
       yanlış eksendi: hap `--nav-max`te sabitlenince ekran büyüdükçe merdiven
       kapanıyor, içerik tam boya dönüyor ve hapı taşırıyordu. */
    container: navshell / inline-size;
}

.site-brand {
    gap: 0.85rem;
}

.site-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(var(--app-primary-rgb), 0.18), rgba(var(--app-secondary-rgb), 0.10));
    border: 1px solid var(--app-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform 0.3s ease;
}

.site-brand-mark:hover {
    transform: scale(1.04);
}

.site-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.site-brand-name {
    color: var(--app-title);
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.015em;
}

.site-brand-tag {
    color: var(--app-text-soft);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Nav links */
.site-nav-link {
    color: var(--nav-text) !important;
    padding: 0.72rem 0.95rem !important;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease,
                padding 0.2s ease, font-size 0.2s ease;
    position: relative;
    overflow: hidden;
    /* Yatay navda ikon + etiket asla alt satıra kırılmaz; dar ekranda
       sarmak yerine küçülür (aşağıdaki kademeli media query'ler). */
    white-space: nowrap;
}

.site-nav-link:hover,
.site-nav-link:focus {
    color: var(--app-title) !important;
    background: var(--nav-hover-bg);
    transform: translateY(-1px);
}

.site-nav-cta {
    background: var(--btn-gradient) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(var(--app-primary-rgb), 0.18);
}

.site-nav-cta:hover {
    box-shadow: 0 12px 28px rgba(var(--app-primary-rgb), 0.28);
}

/* Bildirim noktası: avatarın köşesinde, menü açılmadan görünür. Sayı taşımaz —
   «bir şey var, bak» demesi yeterli; sayılar menünün içindeki rozetlerde. */
.site-nav-avatar-wrap {
    position: relative;
    display: inline-flex;
    flex: none;
}

.site-nav-alert-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #e5484d;
    border: 2px solid var(--nav-bg);
    box-shadow: 0 0 0 1px rgba(229, 72, 77, 0.35);
}

@media (prefers-reduced-motion: no-preference) {
    .site-nav-alert-dot { animation: navAlertPulse 2.4s ease-in-out infinite; }
    @keyframes navAlertPulse {
        0%, 100% { box-shadow: 0 0 0 1px rgba(229, 72, 77, 0.35); }
        50%      { box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.18); }
    }
}

/* ─────────────── 8. DROPDOWN MENUS ─────────────── */
.site-dropdown-menu {
    margin-top: 0.8rem !important;
    padding: 0.65rem !important;
    border: 1px solid var(--app-border-strong) !important;
    border-radius: 22px !important;
    background: var(--dropdown-bg) !important;
    backdrop-filter: blur(24px) saturate(1.4);
    box-shadow: var(--app-shadow);
    z-index: 1080;
    animation: dropdownReveal 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Bootstrap navbar İÇİNDEKİ dropdown'larda Popper'ı bilinçli kapatır
   (`_inNavbar` → `applyStyles: false`, menüye `data-bs-popper="static"` yazar;
   ölçüldü: menünün inline style'ı boş). Yani çarpışma tespiti / kaydırma YOK —
   menü yalnız CSS ile `left: 0`'dan sağa doğru açılır ve en sağdaki
   tetikleyicide (kullanıcı menüsü) sayfa dışına taşar. Navbar menülerini
   tetikleyicinin SAĞ kenarına sabitle; böylece sola doğru açılırlar. */
.site-navbar .navbar-nav .dropdown-menu[data-bs-popper] {
    right: 0;
    left: auto;
}

.site-dropdown-menu .dropdown-item {
    padding: 0.8rem 0.95rem;
    border-radius: 14px;
    color: var(--app-text);
    transition: background 0.2s ease, transform 0.2s ease;
}

.site-dropdown-menu .dropdown-item:hover {
    background: var(--dropdown-hover);
    transform: translateX(4px);
}

.site-dropdown-menu .accordion-item {
    overflow: hidden;
    border-radius: 16px !important;
    background: transparent !important;
}

.site-dropdown-menu .accordion-item + .accordion-item {
    margin-top: 0.45rem;
}

.site-dropdown-menu .accordion-button {
    padding: 0.92rem 1rem;
    border-radius: 16px !important;
    background: var(--accord-bg) !important;
    color: var(--app-title) !important;
    font-size: 0.92rem;
    font-weight: 700;
    box-shadow: none !important;
    transition: background 0.25s ease;
}

.site-dropdown-menu .accordion-button::after {
    filter: var(--accord-arrow-filter);
    transition: transform 0.3s var(--ease-out);
}

.site-dropdown-menu .accordion-button:not(.collapsed) {
    background: var(--accord-active-bg) !important;
}

.site-dropdown-menu .accordion-body {
    margin-top: 0.3rem;
    padding: 0.45rem;
    border-radius: 16px;
    background: var(--accord-body-bg) !important;
}

/* ─────────────── 9. MAIN CONTENT ─────────────── */
.app-main {
    padding: 2rem 0 4rem;
}

.app-content {
    position: relative;
}

.fade-in {
    /* fill-mode "backwards" (not "both"): the intro keyframes still play,
       but no transform lingers after the animation ends. A persistent
       transform on <body> would turn it into the containing block for
       position:fixed children (e.g. #scrollTopBtn), breaking them. */
    animation: fadeInScale 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* ─────────────── 10. PAGE SECTIONS ─────────────── */
.page-section {
    display: grid;
    gap: 2rem;
}

.page-section-block {
    display: grid;
    gap: 1.5rem;
}

.section-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 2rem;
}

.section-title,
.home-hero-title,
.profile-title,
.quiz-start-title,
.quiz-header {
    margin: 0;
    color: var(--app-title);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.02;
}

.section-title,
.quiz-header {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
}

/* Display yüzü (Unbounded) bilinçli olarak DAR bir yüzeyde: marka adı,
   hero başlığı ve bölüm başlıkları. Unbounded geniş koştuğu için ölçüler
   Golos başlıklarından bir kademe küçük, satır aralığı daha ferah. */
.section-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.4rem, 2.6vw, 2.05rem);
    letter-spacing: -0.01em;
    line-height: 1.18;
}

/* Sayfa-h1 hiyerarşisi: her sayfanın TEK üst başlığı display yüzünü taşır
   (quiz listesi + quiz başlangıcı; soru ekranındaki "Soru 1/6" fonksiyonel
   sayaçtır, bilinçli olarak Manrope kalır → .page-quiz-list ile kapsandı). */
.page-quiz-list .quiz-header,
.quiz-start-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.8vw, 2.15rem);
    letter-spacing: -0.01em;
    line-height: 1.16;
}

.section-copy,
.home-hero-text,
.quiz-start-copy {
    margin: 0;
    max-width: 58rem;
    color: var(--app-text-soft);
    font-size: 1.03rem;
    line-height: 1.75;
}

/* ─────────────── 11. FLASH MESSAGES ─────────────── */
.flash-stack {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.flash-stack .alert {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--alert-border);
    border-radius: 18px;
    background: var(--alert-bg);
    color: var(--app-text);
    box-shadow: var(--app-shadow-soft);
    backdrop-filter: blur(12px);
    animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.flash-pill {
    display: inline-flex;
    padding: 0.38rem 0.68rem;
    border-radius: 999px;
    background: var(--flash-pill-bg);
    color: var(--flash-pill-text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ─────────────── 12. CARDS ─────────────── */
.card,
.surface-card,
.stats-box,
.leaderboard-column,
.leader-card-panel,
.profile-summary-card,
.profile-metric-card,
.profile-chart-card,
.profile-history-table,
.auth-brand-panel,
.auth-form-card {
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius-xl) !important;
    background: var(--app-surface) !important;
    box-shadow: var(--app-shadow);
    backdrop-filter: blur(14px);
    transition: transform 0.35s var(--ease-out),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--app-shadow), var(--app-shadow-glow);
}

.card-header,
.card-footer,
.table-light,
.table-light > :not(caption) > * > * {
    background: var(--table-header-bg) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

.card-title,
.card h1, .card h2, .card h3,
.card h4, .card h5, .card h6 {
    color: var(--app-title);
}

.card-text,
.card p, .card li, .card small,
.table,
.table > :not(caption) > * > * {
    color: var(--app-text-soft);
}

/* ─────────────── 13. BUTTONS ─────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 999px !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-width: 1px !important;
    box-shadow: none;
    text-align: center;
    position: relative;
    overflow: hidden;
    line-height: 1.25;
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-soft),
                background var(--dur-base) var(--ease-soft),
                border-color var(--dur-base) var(--ease-soft);
}

.btn:not(.btn-sm) {
    min-height: 44px;
}

.btn-lg {
    min-height: 48px;
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
}

/* klavye odağı her zaman görünür — fare odağını Bootstrap zaten yönetiyor */
:focus-visible {
    outline: 2px solid rgba(var(--app-primary-rgb), 0.65);
    outline-offset: 2px;
}

.btn:focus-visible {
    outline-offset: 3px;
}

.btn-primary,
.btn-success,
.btn-luxe {
    border: none !important;
    color: #fdfdff !important;
    background: var(--btn-gradient) !important;
    /* Renkli «parlama» gölgesi yerine dar, nötr bir yükseklik. Butonun kendi
       renginde 20px yayılan gölge 2019 dönemi imzasıdır (2026-08-06). */
    box-shadow: 0 1px 2px rgba(20, 28, 50, 0.10);
}

.btn-success {
    background: var(--btn-success-gradient) !important;
    box-shadow: 0 1px 2px rgba(20, 28, 50, 0.10);
}

.btn-outline-primary,
.btn-ghost-luxe,
.btn-luxe-surface {
    color: var(--app-title) !important;
    border-color: var(--btn-ghost-border) !important;
    background: var(--btn-ghost-bg) !important;
}

/* Hover'da «havalanma» yok: buton yerinde kalır, yalnız rengi koyulaşır.
   translateY + büyüyen renkli gölge kombinasyonu tarih atan bir imza (2026-08-06). */
.btn-outline-primary:hover,
.btn-ghost-luxe:hover,
.btn-luxe-surface:hover {
    background: rgba(var(--app-primary-rgb), 0.12) !important;
    border-color: rgba(var(--app-primary-rgb), 0.32) !important;
}

.btn-primary:hover,
.btn-luxe:hover {
    background: var(--btn-gradient-hover) !important;
}

.btn-success:hover {
    filter: brightness(0.94);
}

.btn-primary:active,
.btn-success:active,
.btn-luxe:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
}

/* ─────────────── 14. FORM CONTROLS ─────────────── */
/* checkbox/radio/range gibi kompakt kontroller bilinçli olarak DIŞARIDA:
   yalnız metin benzeri girdiler input yüksekliği/radius'u alır.
   `[data-grid-cell]` de dışarıda: bulmaca hücresi bir FORM KONTROLÜ değil,
   ızgaranın bir karesidir. Bu kuralın özgüllüğü (0,9,1) ve `!important`ları
   hücrenin kendi stilini sessizce eziyordu — 3.2rem taban yükseklik 26 px'lik
   hücreyi 50 px'lik kapsüle çeviriyor, `border`/`background` saydamlığı
   kalkıyor, odakta 0.28rem'lik ikinci bir halka biniyordu (ölçüldü). */
.form-control,
.form-select,
textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([data-grid-cell]),
select {
    min-height: 3.2rem;
    border: 1px solid var(--input-border) !important;
    border-radius: 16px !important;
    background: var(--input-bg) !important;
    color: var(--app-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

textarea.form-control {
    min-height: auto;
}

.form-control::placeholder,
textarea::placeholder {
    color: var(--app-text-soft) !important;
    opacity: 0.7;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus:not([data-grid-cell]),
select:focus {
    border-color: var(--input-focus-border) !important;
    box-shadow: 0 0 0 0.28rem var(--input-focus-ring) !important;
}

/* The grouped rule above overrides `background` wholesale, which strips
   Bootstrap's native <select> chevron and leaves selects looking like flat
   text inputs. Restore a crisp custom chevron + room for it, and a pointer. */
.form-select {
    padding-right: 2.85rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7a99' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1.05rem center !important;
    background-size: 1.05rem 1.05rem !important;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-select:hover {
    border-color: var(--input-focus-border) !important;
}

html.dark-mode .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a4bd' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
}

/* Small variant keeps the chevron proportional. */
.form-select-sm {
    min-height: 2.5rem;
    padding-right: 2.4rem !important;
    background-position: right 0.8rem center !important;
    background-size: 0.9rem 0.9rem !important;
}

/* Native <option> menus pick up the dark surface where the OS honors it. */
html.dark-mode .form-select option {
    background-color: #1b2335;
    color: var(--app-text);
}

/* ─────────────── 15. TABLE ─────────────── */
.table {
    --bs-table-bg: var(--table-bg);
    --bs-table-striped-bg: var(--table-stripe);
    --bs-table-hover-bg: var(--table-hover);
    margin-bottom: 0;
}

.badge {
    border-radius: 999px;
}

/* ─────────────── 16. ALERTS ─────────────── */
.alert-info,
.alert-warning,
.alert-danger,
.alert-success,
.alert-secondary {
    border: 1px solid var(--alert-border);
    border-radius: 18px;
}

/* ─────────────── 17. FOOTER ─────────────── */
.site-footer {
    margin-top: auto;
    border-top: 1px solid var(--app-footer-border) !important;
    background: var(--app-footer-bg) !important;
    backdrop-filter: blur(22px);
    transition: background 0.4s ease, border-color 0.4s ease;
}

.site-footer-shell {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    min-height: 52px;
}

.site-footer-spacer {
    flex: 1 1 auto;
}

.site-footer-brand {
    color: var(--app-title);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.site-footer-copy {
    position: relative;
    padding-left: 0.7rem;
    color: var(--app-text-soft);
    font-size: 0.82rem;
}

.site-footer-copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 0.9rem;
    transform: translateY(-50%);
    background: var(--app-footer-border);
}

.site-footer-meta {
    color: var(--app-text-soft);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575px) {
    .site-footer-shell {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.45rem 0.65rem;
    }

    .site-footer-copy,
    .site-footer-spacer {
        display: none;
    }

    .site-footer-meta {
        font-size: 0.74rem;
    }

    .dark-toggle-btn {
        width: 38px !important;
        height: 38px !important;
    }
}

.dark-toggle-btn {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--btn-ghost-bg) !important;
    color: var(--app-title) !important;
    border: 1px solid var(--app-border);
    cursor: pointer;
    transition: transform 0.4s var(--ease-out),
                background 0.3s ease;
}

.dark-toggle-btn:hover {
    transform: scale(1.06);
    background: rgba(var(--app-primary-rgb), 0.1) !important;
}

/* Destek modu anahtarı: gece moduyla aynı gövde, açıkken marka dolgusu.
   Açık/kapalı ayrımı YALNIZ renkle verilmez — `aria-pressed` ekran
   okuyucuya durumu söyler, kenarlık da görsel olarak kalınlaşır. */
.support-toggle-btn.is-active {
    background: rgba(var(--app-primary-rgb), 0.16) !important;
    border-color: rgba(var(--app-primary-rgb), 0.55);
    color: var(--app-primary) !important;
}

/* Baloncuk: alt bilgideki anahtarların ne işe yaradığını söyler. Bootstrap
   tooltip'i JS başlatma ister ve `title` özniteliği tarayıcının kendi geç
   açılan kutucuğuyla çakışır; bu yüzden saf CSS. */
.dark-toggle-btn[data-bubble] { position: relative; }

.dark-toggle-btn[data-bubble]::after {
    content: attr(data-bubble);
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: max-content;
    max-width: min(19rem, 70vw);
    padding: .55rem .75rem;
    border-radius: .75rem;
    background: var(--app-title);
    color: var(--app-surface);
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .18s var(--ease-out), transform .18s var(--ease-out),
                visibility .18s;
    pointer-events: none;
    z-index: 40;
}

.dark-toggle-btn[data-bubble]:hover::after,
.dark-toggle-btn[data-bubble]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .dark-toggle-btn[data-bubble]::after { transition: none; }
}

/* ─────────────── 18. HOME HERO ─────────────── */
.home-hero,
.auth-card-grid,
.profile-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: 1.75rem;
    align-items: stretch;
}

/* hero düzeni: metin sütunu + ders sahnesi (video alanı) */
.home-hero {
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
    gap: 2.25rem;
    align-items: center;
}

.home-hero-copy > * {
    animation: fadeInUp var(--dur-slow) var(--ease-out) both;
}

.home-hero-copy > *:nth-child(1) { animation-delay: 0.04s; }
.home-hero-copy > *:nth-child(2) { animation-delay: 0.1s; }
.home-hero-copy > *:nth-child(3) { animation-delay: 0.16s; }
.home-hero-copy > *:nth-child(4) { animation-delay: 0.22s; }
.home-hero-copy > *:nth-child(5) { animation-delay: 0.28s; }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--kicker-border);
    border-radius: 999px;
    background: var(--kicker-bg);
    color: var(--kicker-text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

/* ── ders sahnesi: gelecekteki loop ders videosunun evi.
      Video hazır olana dek poster durumu sahneyi taşır; kaynak eklendiğinde
      js/home.js sahneyi videoya çevirir. Overlay'ler (canlı rozeti, altyazı,
      patika kapısı) her iki durumda da yayın-ekranı gibi üstte kalır. ── */
.home-hero-stage {
    animation: fadeInScale 0.65s var(--ease-out) 0.16s both;
}

.lesson-stage {
    position: relative;
    margin: 0;
}

.lesson-stage-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--stage-border);
    border-radius: var(--app-radius-xl);
    background: var(--stage-bg);
    box-shadow: var(--stage-shadow);
}

.lesson-stage-frame::after {
    /* ince iç çerçeve — sahneye "ekran" hissi verir */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.lesson-stage-video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lesson-stage-video[hidden] { display: none; }

.lesson-stage-poster {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.lesson-stage-poster.is-video-live { display: none; }

/* zemin dokusu: seyrek nokta ızgarası, kenarlara doğru eriyen */
.stage-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(214, 226, 248, 0.16) 1px, transparent 1.6px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse at 50% 45%, black 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 45%, black 20%, transparent 78%);
}

/* Kiril filigran — dersin kendisi sahnenin imzası */
.stage-word {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(4.2rem, 11vw, 7.6rem);
    letter-spacing: 0.04em;
    color: rgba(226, 236, 255, 0.07);
    user-select: none;
}

.stage-entry {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    color: rgba(240, 246, 255, 0.88);
    text-decoration: none;
}

.stage-play {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(10px);
    color: rgba(240, 246, 255, 0.88);
    font-size: 1.8rem;
    box-shadow: 0 14px 40px rgba(5, 10, 22, 0.45);
    transition: background var(--dur-base) var(--ease-soft),
                border-color var(--dur-base) var(--ease-soft),
                transform var(--dur-base) var(--ease-out);
}

.stage-play .bi { transform: translateX(2px); }

.stage-entry:hover,
.stage-entry:focus-visible {
    color: #fff;
}

.stage-entry:hover .stage-play,
.stage-entry:focus-visible .stage-play {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.14);
    transform: scale(1.05);
}

.stage-entry-label {
    color: currentColor;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.lesson-stage-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.85rem 1rem;
}

.stage-live,
.stage-open {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(9, 13, 24, 0.55);
    backdrop-filter: blur(8px);
    color: rgba(233, 240, 250, 0.88);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.stage-open {
    color: rgba(255, 255, 255, 0.92);
    border-color: rgba(var(--app-success-rgb), 0.45);
    background: rgba(var(--app-success-rgb), 0.18);
}

.stage-live-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #ff6982;
}

.home-hero-copy,
.quiz-list-hero,
.leaderboard-hero,
.quiz-start-card,
.result-hero {
    display: grid;
    gap: 1rem;
}

.home-hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    max-width: 15ch;
}

.home-hero-copy {
    align-content: center;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

/* hero metrics */
.hero-metrics,
.profile-metrics-grid,
.quiz-start-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.hero-metric-card,
.profile-metric-card,
.quiz-start-metric {
    padding: 1rem;
    border: 1px solid var(--metric-border);
    border-radius: 20px;
    background: var(--metric-bg);
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}

.hero-metric-card:hover,
.profile-metric-card:hover,
.quiz-start-metric:hover {
    transform: translateY(-3px);
    box-shadow: var(--app-shadow-glow);
}

.hero-metric-value,
.profile-metric-value,
.metric-value {
    display: block;
    color: var(--app-title);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 800;
}

.hero-metric-label,
.profile-metric-label,
.metric-label {
    display: block;
    color: var(--app-text-soft);
    font-size: 0.84rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* hero visual panel */
.home-hero-visual,
.auth-brand-panel,
.profile-summary-card {
    position: relative;
    overflow: hidden;
}

.hero-visual-shell,
.auth-brand-panel {
    min-height: 100%;
    padding: 1.7rem;
    border: 1px solid var(--hero-panel-border);
    border-radius: var(--app-radius-xl);
    background: var(--hero-panel-bg);
    box-shadow: var(--app-shadow);
}

.hero-visual-shell {
    display: grid;
    place-items: center;
}

.hero-orbit-card {
    position: absolute;
    padding: 0.9rem 1rem;
    max-width: 210px;
    border: 1px solid var(--app-border);
    border-radius: 18px;
    background: var(--app-surface-glass);
    box-shadow: var(--app-shadow-soft);
    backdrop-filter: blur(16px);
    animation: float 6s ease-in-out infinite;
}

.orbit-primary {
    top: 2rem;
    left: 1.6rem;
}

.orbit-secondary {
    right: 1.8rem;
    bottom: 2.2rem;
    animation-delay: -3s;
}

.orbit-label,
.hero-core-kicker,
.leader-panel-kicker,
.leaderboard-column-kicker {
    display: inline-block;
    margin-bottom: 0.55rem;
    color: var(--app-text-soft);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-core-panel {
    max-width: 360px;
    padding: 1.8rem;
    text-align: center;
    border: 1px solid var(--app-border-strong);
    border-radius: 28px;
    background: var(--app-surface-glass);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero-core-logo {
    width: 92px;
    margin-bottom: 1rem;
}

.hero-core-panel h2,
.auth-brand-panel h1,
.leaderboard-column-head h2,
.profile-chart-panel h2,
.profile-history-panel h2 {
    margin: 0 0 0.6rem;
    color: var(--app-title);
    font-size: clamp(1.4rem, 2.4vw, 2.2rem);
    font-weight: 800;
}

.hero-core-panel p,
.auth-brand-panel p {
    margin: 0;
    color: var(--app-text-soft);
    line-height: 1.7;
}

/* ─────────────── 19. SKILL GRID & LEADER GRIDS ─────────────── */
.skill-grid,
.leader-showcase-grid,
.leaderboard-columns {
    display: grid;
    gap: 1.2rem;
}

.skill-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.leader-showcase-grid,
.leaderboard-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.leader-showcase-grid.is-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.leaderboard-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* card shared shimmer overlay */
.skill-card,
.leader-card-panel,
.leaderboard-column {
    position: relative;
    overflow: hidden;
    padding: 1.35rem;
}

/* Skill kartları eşit yükseklikte (grid stretch) + içerik dikey akış;
   başlık/açıklama uzunluğu değişse de "…'ya Geç" butonları alta sabitlenip
   kartlar arasında AYNI hizada durur. */
.skill-card {
    display: flex;
    flex-direction: column;
}

.skill-card .btn {
    margin-top: auto;
    align-self: flex-start;
}

.skill-card::before,
.leader-card-panel::before,
.leaderboard-column::before,
.auth-form-card::before,
.profile-summary-card::before,
.quiz-start-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--card-shimmer);
    pointer-events: none;
}

.skill-card-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    margin-bottom: 1rem;
    font-size: 1.45rem;
    color: var(--app-title);
    background: rgba(var(--app-primary-rgb), 0.08);
    transition: transform 0.35s var(--ease-out);
}

.skill-card:hover .skill-card-icon {
    transform: scale(1.08);
}

.skill-card h3 {
    margin: 0.25rem 0 0.65rem;
    color: var(--app-title);
    font-size: 1.4rem;
    font-weight: 800;
}

.skill-card p,
.leader-list-empty,
.leaderboard-empty,
.auth-feature-item,
.profile-summary-line span {
    color: var(--app-text-soft);
}

.skill-card p {
    margin-bottom: 1.4rem;
    line-height: 1.7;
}

.skill-card-listening { box-shadow: 0 18px 36px rgba(var(--app-secondary-rgb), 0.10); }
.skill-card-speaking  { box-shadow: 0 18px 36px rgba(var(--app-primary-rgb), 0.10); }
.skill-card-reading   { box-shadow: 0 18px 36px rgba(var(--app-accent-rgb), 0.08); }
.skill-card-writing   { box-shadow: 0 18px 36px rgba(var(--app-secondary-rgb), 0.08); }

/* ─────────────── 20. LEADERBOARD ENTRIES ─────────────── */
.leader-panel-header,
.leaderboard-column-head,
.panel-heading {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.8rem;
}

.leader-list-modern,
.leaderboard-entries {
    display: grid;
    gap: 0.75rem;
}

.leader-list-row,
.leaderboard-entry,
.profile-summary-line {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.9rem;
    align-items: center;
    padding: 0.95rem 1rem;
    border: 1px solid var(--app-border);
    border-radius: 18px;
    background: var(--metric-bg);
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.leader-list-row:hover,
.leaderboard-entry:hover {
    transform: translateX(4px);
    border-color: rgba(var(--app-primary-rgb), 0.15);
}

.leader-showcase-actions {
    display: flex;
    justify-content: center;
}

.profile-summary-line {
    grid-template-columns: 90px 1fr;
}

.leader-rank,
.leaderboard-rank {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--app-title);
    background: var(--rank-bg);
    font-weight: 800;
}

.leader-name,
.leaderboard-name,
.leader-score,
.leaderboard-points,
.profile-summary-line strong {
    color: var(--app-title);
    font-weight: 700;
}

/* Cüzdan eylemi: özet satırlarının hemen altında, onlarla aynı hizada ama
   satır kutusu DEĞİL — bakiye bir bilgi, bu bir eylem. */
.profile-wallet-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.15rem;
    /* Yatay iç boşluk özet SATIRLARIYLA aynı (1rem): 0.2rem'de link metni
       satır etiketlerinin soluna taşıyor ve hizasız görünüyordu. */
    padding: 0.6rem 1rem;
    color: var(--app-primary);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: gap var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.profile-wallet-link:hover {
    gap: 0.75rem;
    color: var(--app-primary);
    text-decoration: underline;
}

.profile-details-toggle {
    margin-top: 0.35rem;
    border-top: 1px solid var(--app-border);
}

.profile-details-toggle > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0;
    color: var(--app-primary);
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.profile-details-toggle > summary::-webkit-details-marker { display: none; }
.profile-details-toggle > summary span { display: inline-flex; align-items: center; gap: 0.45rem; }
.profile-details-chevron { transition: transform var(--dur-base) var(--ease-out); }
.profile-details-toggle[open] .profile-details-chevron { transform: rotate(180deg); }

.profile-details-form {
    display: grid;
    gap: 0.7rem;
    padding: 0.1rem 0 0.85rem;
}

.profile-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.profile-details-grid label {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
    color: var(--app-text-soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.profile-details-grid label small { font-weight: 500; opacity: 0.72; }
.profile-details-privacy {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    color: var(--app-text-soft);
    font-size: 0.76rem;
    line-height: 1.45;
}
.profile-details-form .btn { min-height: 44px; justify-self: start; }

@media (max-width: 520px) {
    .profile-details-grid { grid-template-columns: 1fr; }
    .profile-details-form .btn { width: 100%; }
}

.is-current-user {
    border-color: var(--current-user-border) !important;
    background: var(--current-user-bg) !important;
}

/* ─────────────── 21. AUTH PAGES ─────────────── */
.auth-feature-list {
    display: grid;
    gap: 0.8rem;
    margin-top: 1.4rem;
}

.auth-feature-item {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    background: var(--feature-item-bg);
    border: 1px solid var(--feature-item-border);
    transition: transform 0.25s ease;
}

.auth-feature-item:hover {
    transform: translateX(4px);
}

.auth-feature-item i {
    color: var(--app-accent);
}

/* ─────────────── 22. PROFILE ─────────────── */
.profile-shell {
    display: grid;
    gap: 1.5rem;
}

.profile-chart-card,
.profile-history-table {
    padding: 1.1rem;
}

.profile-score-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1rem, 2vw, 1.35rem);
    background:
        radial-gradient(circle at 8% 0%, rgba(var(--app-primary-rgb), 0.12), transparent 34%),
        radial-gradient(circle at 100% 10%, rgba(var(--app-accent-rgb), 0.10), transparent 30%),
        var(--app-surface) !important;
}

.profile-score-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(var(--app-primary-rgb), 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(var(--app-primary-rgb), 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at 55% 50%, black 0 35%, transparent 78%);
    opacity: 0.55;
}

html.dark-mode .profile-score-card::before {
    opacity: 0.28;
}

.profile-score-head,
.profile-score-canvas-wrap {
    position: relative;
    z-index: 1;
}

.profile-score-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.8rem;
}

.profile-score-head h2 {
    margin: 0.35rem 0 0.25rem;
}

.profile-score-head p {
    margin: 0;
    color: var(--app-text-soft);
}

.profile-score-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.profile-score-pills span {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.68rem;
    border: 1px solid rgba(var(--app-primary-rgb), 0.16);
    border-radius: 999px;
    background: rgba(var(--app-primary-rgb), 0.07);
    color: var(--app-text-soft);
    font-size: 0.78rem;
    font-weight: 800;
}

.profile-score-pills strong {
    color: var(--app-title);
    font-size: 0.95rem;
}

.profile-score-canvas-wrap {
    min-height: 260px;
    padding: 0.45rem 0.2rem 0;
}

.profile-score-empty {
    min-height: 240px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.35rem;
    text-align: center;
    color: var(--app-text-soft);
}

.profile-score-empty i {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 1rem;
    background: rgba(var(--app-primary-rgb), 0.1);
    color: var(--app-primary);
    font-size: 1.35rem;
}

.profile-score-empty strong {
    color: var(--app-title);
}

.profile-history-table table {
    margin-bottom: 0;
}

/* ─────────────── 23. MAX-WIDTH PER PAGE ─────────────── */
/* Sayfa genişliği TEK token'dan gelir. Navbar pill'i de bunu okur; iki ayrı
   sayı tutulduğunda (shell 1360, içerik 1280) pill alttaki kartlarla
   hizalanmıyordu — ölçüldü: pill 33→1132, kart 29→1136 (kullanıcı
   bulgusu 2026-07-28 «navbar kaydı»). */
body {
    --page-max: 1360px;

    /* Navbar pill'inin ölçüsü BİLEREK `--page-max`ten ayrıdır (kullanıcı
       kararı 2026-08-03). `--page-max` sayfa-başına EDİTORYAL bir seçimdir
       (ana sayfa kasten bir kademe dar: 1160); navbar ise global kabuktur ve
       sabit bir öğe kümesini taşımak zorundadır. İkisi birbirine bağlanınca
       ana sayfa 1339px'lik navbar'ı 1136px'lik hapa sıkıştırıyordu.
       1360 seçildi çünkü varsayılan `--page-max` ile aynı: normal sayfalarda
       hap bugünkü yerinde kalır (kart iç kenarından 12px içeride), yalnız
       daha dar ölçülü sayfalarda (ana sayfa, profil) bilinçli olarak daha
       geniş durur. 1380/1400 denenmedi DEĞİL — elendi: hap içerikten 2–8px
       taşıyıp "hizalanmaya çalışmış ama tutturamamış" gibi görünüyor. */
    --nav-max: 1360px;
}

body.page-auth,
body.page-profile,
body.page-leaderboard,
body.page-quiz-list,
body.page-quiz-start,
body.page-quiz-result,
body.page-quiz-question,
body.page-quiz-details {
    --page-max: 1280px;
}

/* Ana sayfa bilinçli olarak bir kademe dar: landing ölçüsü geniş ekranda
   kenardan kenara yayılmasın, kompozisyon toplu dursun. */
body.page-home {
    --page-max: 1160px;
}

.app-content {
    max-width: var(--page-max);
}

/* ─────────────── 24. STAGGERED ENTRY ANIMATIONS ─────────────── */
.skill-card,
.quiz-list-card,
.leader-card-panel,
.leaderboard-column,
.hero-metric-card,
.profile-metric-card,
.quiz-start-metric,
.auth-feature-item,
.drag-result-stat,
.drag-result-card {
    animation: staggerFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.skill-card:nth-child(1),
.quiz-list-card:nth-child(1),
.auth-feature-item:nth-child(1) { animation-delay: 0.05s; }
.skill-card:nth-child(2),
.quiz-list-card:nth-child(2),
.auth-feature-item:nth-child(2) { animation-delay: 0.1s; }
.skill-card:nth-child(3),
.quiz-list-card:nth-child(3),
.auth-feature-item:nth-child(3) { animation-delay: 0.15s; }
.skill-card:nth-child(4),
.quiz-list-card:nth-child(4),
.auth-feature-item:nth-child(4) { animation-delay: 0.2s; }
.skill-card:nth-child(5),
.quiz-list-card:nth-child(5) { animation-delay: 0.25s; }
.skill-card:nth-child(6),
.quiz-list-card:nth-child(6) { animation-delay: 0.3s; }

.hero-metric-card:nth-child(1),
.profile-metric-card:nth-child(1),
.quiz-start-metric:nth-child(1),
.drag-result-stat:nth-child(1) { animation-delay: 0.08s; }
.hero-metric-card:nth-child(2),
.profile-metric-card:nth-child(2),
.quiz-start-metric:nth-child(2),
.drag-result-stat:nth-child(2) { animation-delay: 0.14s; }
.hero-metric-card:nth-child(3),
.profile-metric-card:nth-child(3),
.quiz-start-metric:nth-child(3),
.drag-result-stat:nth-child(3) { animation-delay: 0.2s; }

.leaderboard-column:nth-child(1),
.leader-card-panel:nth-child(1) { animation-delay: 0.06s; }
.leaderboard-column:nth-child(2),
.leader-card-panel:nth-child(2) { animation-delay: 0.12s; }
.leaderboard-column:nth-child(3) { animation-delay: 0.18s; }

/* ─────────────── 25. RESPONSIVE ─────────────── */
@media (max-width: 1199px) {
    .skill-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .leaderboard-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── lg yatay nav (992px+): hap KENDİ genişliğini sorgular ──────────────────
   Önceki tasarımda iki AYRI eksen vardı ve birbirini hiç görmüyordu:
     • hapın genişliği `--page-max`ten geliyordu (ana sayfada 1160 → hap 1136),
     • hapı daraltan merdiven ise GÖRÜNÜM ALANI genişliğine bakıyordu.
   Ekran 1440'ı geçince merdivenin son kademesi kapanıp yazılar tam boya
   dönüyor, hap ise 1136'da kalıyordu → «Kategoriler» ve avatar hapın dışına
   taşıyordu (kullanıcı bulgusu 2026-08-03). Ölçüm: içerik 1339px, hap 1134px,
   205px taşma; alt uçta da (vw 1000) 26px taşıyordu — merdiven iki uçta da
   yetmiyordu.

   Düzeltme iki parçalı:
   1) Hap artık `--nav-max` okur — global kabuk, sayfa-başına editoryal
      ölçüden bağımsız.
   2) Sıkışma `@container` ile HAPIN kendi genişliğine bağlandı; iki eksen
      artık ayrışamaz. Ölçüler AKIŞKAN (clamp + cqi): kademe sınırı yok,
      dolayısıyla "kademe kapsamıyor" hatası da yok. */
@media (min-width: 992px) {
    .site-navbar .site-nav-shell {
        max-width: min(calc(var(--nav-max) - 24px), calc(100% - 24px));
        margin-left: auto;
        margin-right: auto;
    }

    /* Akışkan sıkışma. Eğrinin iki ucu ÖLÇÜLEREK kalibre edildi (2026-08-03):
       hapın iç kutusu 1360px iken tam boy, en dar yatay hapta (vw 992 →
       iç kutu 934px) en sıkı. `cqi` = hapın iç kutusunun %1'i. Dikey padding
       bilinçli olarak sabit — satır ritmi ve dokunma hedefi korunsun.
       DİKKAT: bu değerleri değiştirirken tarayıcıda ölç. `scrollWidth` taşma
       yokken `clientWidth`e kırpılır, yani PAYI göstermez ve "sığıyor" yalanı
       söyler; doğru metrik çocukların gerçek toplamıdır. */
    @container navshell (max-width: 1359px) {
        .site-nav-link {
            padding-inline: clamp(0.27rem, calc(2.559cqi - 19.6px), 0.95rem) !important;
            font-size: clamp(0.76rem, calc(0.892cqi + 3.87px), 1rem);
        }
    }

    /* Yazıyı küçültmenin yetmediği yerde ÖĞE DÜŞÜR — orantısız küçük tipografi
       yerine daha az öğe. Sıra: önce kullanıcı adı (avatar kimliği zaten
       taşıyor), sonra marka alt-etiketi, en sonda logo karesi.
       1230 eşiği ölçümle bulundu: akışkan eğri tek başına 1220–1300px görünüm
       alanı bandında 16px'e kadar açık veriyordu. */
    @container navshell (max-width: 1230px) {
        .site-nav-username { display: none; }
    }

    @container navshell (max-width: 1080px) {
        .site-brand-tag { display: none; }
        .site-brand-name { font-size: 0.95rem; }
        .site-nav-link .bi { font-size: 0.9em; }

        .site-brand-mark {
            width: 46px;
            height: 46px;
            border-radius: 14px;
        }

        .site-brand-mark img { height: 34px; }
    }

    @container navshell (max-width: 990px) {
        .site-brand-mark {
            width: 42px;
            height: 42px;
            border-radius: 13px;
        }

        .site-brand-mark img { height: 30px; }
    }
}

@media (max-width: 991px) {
    .site-nav-shell {
        min-height: 68px;
        border-radius: 18px;
        padding: 0.55rem 0.75rem;
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    /* Collapsed (hamburger) durumda menü, pill kutusunun içinde temiz bir
       dikey liste olarak açılsın; öğeler tam genişlik + soldan hizalı. */
    .site-navbar .navbar-collapse {
        flex-basis: 100%;
        margin-top: 0.4rem;
        padding-top: 0.6rem;
        border-top: 1px solid var(--nav-border);
    }

    .site-navbar .navbar-nav {
        width: 100%;
        gap: 0.15rem;
        align-items: stretch !important;
    }

    .site-navbar .navbar-nav .nav-item {
        width: 100%;
    }

    .site-nav-link {
        display: flex;
        align-items: center;
        width: 100%;
        border-radius: 14px;
    }

    .site-nav-link.dropdown-toggle::after {
        margin-left: auto;
    }

    /* Açılır menüler (Kategoriler/kullanıcı) collapsed modda taşmasın:
       statik akışta, tam genişlikte ve hafif girintili göster. */
    .site-navbar .navbar-nav .dropdown-menu {
        position: static !important;
        width: 100%;
        margin: 0.2rem 0 0.35rem !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .site-navbar .dropdown-menu-wide {
        min-width: 0;
    }

    .site-nav-cta {
        justify-content: center;
    }

    .home-hero,
    .auth-card-grid,
    .profile-hero,
    .leader-showcase-grid,
    .leaderboard-columns,
    .section-heading-row {
        grid-template-columns: 1fr;
    }

    .section-heading-row {
        align-items: start;
    }

    .hero-orbit-card {
        position: static;
        max-width: none;
        animation: none;
    }

    .hero-visual-shell {
        gap: 1rem;
    }

    .leader-showcase-grid.is-compact {
        grid-template-columns: 1fr;
    }

    .profile-score-head {
        flex-direction: column;
    }

    .profile-score-pills {
        justify-content: flex-start;
    }

    .profile-score-canvas-wrap {
        min-height: 220px;
    }

    .home-hero {
        gap: 1.4rem;
    }
}

@media (max-width: 767px) {
    .app-main {
        padding-top: 1.4rem;
    }

    .home-hero-title {
        font-size: clamp(1.75rem, 8.5vw, 2.4rem);
    }

    /* filigran dar sahnede taşmasın */
    .stage-word {
        font-size: clamp(2.6rem, 14vw, 4rem);
    }

    .stage-play {
        width: 58px;
        height: 58px;
        font-size: 1.4rem;
    }

    .hero-metrics,
    .profile-metrics-grid,
    .quiz-start-metrics,
    .skill-grid,
    .leader-showcase-grid,
    .leaderboard-columns {
        grid-template-columns: 1fr;
    }

    .site-brand-tag {
        display: none;
    }

    .site-brand {
        gap: 0.65rem;
    }

    .site-brand-mark {
        width: 46px;
        height: 46px;
        border-radius: 12px;
    }

    .site-brand-mark img {
        height: 34px;
    }

    .site-brand-name {
        font-size: 0.94rem;
    }

    .navbar-toggler {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        padding: 0;
        border-radius: 12px;
    }

    .home-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .home-hero-actions .btn {
        width: 100%;
        min-width: 0;
        padding-inline: 0.7rem;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .site-footer {
        text-align: center;
    }
}

@media (max-width: 359px) {
    .home-hero-actions {
        grid-template-columns: 1fr;
    }
}

/* ─────────────── 26. DARK-MODE BODY BG ─────────────── */
html.dark-mode body.app-shell {
    background:
        radial-gradient(circle at top left, rgba(95, 111, 255, 0.10), transparent 26%),
        radial-gradient(circle at 85% 18%, rgba(92, 167, 232, 0.08), transparent 22%),
        radial-gradient(circle at 50% 100%, rgba(59, 191, 152, 0.04), transparent 24%),
        linear-gradient(180deg, #161d2c 0%, #19223a 45%, #141a29 100%);
}

/* make dark navbar toggler visible */
html.dark-mode .navbar-toggler {
    background: rgba(255, 255, 255, 0.06);
}

html.dark-mode .navbar-toggler-icon {
    filter: invert(1) brightness(1.2);
}

/* dark mode alert tints */
html.dark-mode .alert-info    { background: rgba(14, 116, 144, 0.16); color: #c7eef8; }
html.dark-mode .alert-warning { background: rgba(161, 98, 7, 0.16);  color: #f8e3b1; }
html.dark-mode .alert-success { background: rgba(21, 128, 61, 0.16); color: #c9f1d6; }
html.dark-mode .alert-secondary { background: rgba(71, 85, 105, 0.20); color: #d8e0e9; }

html.dark-mode .badge.bg-info { color: #eaf6ff !important; }

html.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: #8dc4ff;
}
html.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: #b2dbff;
}

/* ─────────────── 27. PREFERS-REDUCED-MOTION ─────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Profil: saat dilimi seçici ────────────────────────────────────────────
   Saat dilimi kozmetik bir tercih değil: ders randevusunun hangi ANI
   kastettiğini bu belirler (2026-08-21 canlı bulgusu). Bu yüzden özet
   satırında görünür, altında da tek tıkla değiştirilebilir. */
.profile-timezone-form {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .35rem;
    padding-top: .75rem;
    border-top: 1px solid var(--app-border, rgba(120, 130, 160, .22));
}

.profile-timezone-label {
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--app-muted, #6b7a94);
    font-weight: 700;
}

.profile-timezone-row {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

.profile-timezone-row .form-select {
    flex: 1 1 14rem;
    min-width: 0;
}

.profile-timezone-row .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.profile-timezone-hint {
    margin: 0;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--app-muted, #6b7a94);
    display: flex;
    gap: .4rem;
    align-items: flex-start;
}

.profile-timezone-hint i {
    margin-top: .15rem;
    flex: 0 0 auto;
}