/*
 * Webmind ortak görsel dili.
 * Anasayfadaki petrol / turkuaz paletini tüm ürün ekranlarında tek kaynaktan
 * kullanır. Sayfa içindeki eski Bootstrap stillerinin üzerine son katman olarak
 * yüklenir; düzeni değil, renk ve yüzey dilini birleştirir.
 */
:root {
    /* Exact logo anchors: Web #00C6AA, Mind #202D70. */
    --wm-brand-web: #00c6aa;
    --wm-brand-web-bright: #20d9c0;
    --wm-brand-mind: #202d70;
    --wm-brand-mind-bright: #465290;
    --wm-brand-sky: #5f78d6;
    --wm-brand-violet: #786ed0;
    --wm-brand-amber: #b87916;
    --wm-brand-coral: #c95160;
    --wm-ui-navy: #293452;
    --wm-ui-navy-deep: #18233f;
    --wm-bg: #f3f7fc;
    --wm-surface: #ffffff;
    --wm-surface-strong: #edf2fb;
    --wm-ink: var(--wm-ui-navy);
    --wm-muted: #5d6788;
    --wm-line: rgba(41, 52, 82, .15);
    --wm-accent: var(--wm-brand-web);
    --wm-accent-bright: var(--wm-brand-web-bright);
    --wm-accent-ink: #062b24;
    --wm-control-label: #f1f4ff;
    --wm-accent-soft: rgba(0, 198, 170, .14);
    --wm-secondary: var(--wm-brand-sky);
    --wm-secondary-soft: rgba(95, 120, 214, .13);
    --wm-highlight: var(--wm-brand-violet);
    --wm-highlight-soft: rgba(120, 110, 208, .13);
    --wm-hero-bg: radial-gradient(circle at 76% 28%, rgba(0, 198, 170, .18), transparent 23rem), linear-gradient(135deg, #eefafa 0%, #f7f9ff 58%, #e8edfc 100%);
    --wm-hero-ink: var(--wm-ui-navy);
    --wm-hero-muted: #556284;
    --wm-hero-grid: rgba(41, 52, 82, .065);
    --wm-cta-bg: var(--wm-ui-navy-deep);
    --wm-shadow: 0 18px 48px rgba(41, 52, 82, .12);
    --wm-danger: var(--wm-brand-coral);
    --wm-danger-soft: rgba(201, 81, 96, .12);
    --wm-danger-line: rgba(201, 81, 96, .32);
    --wm-success: var(--wm-brand-web);
    --wm-warning: var(--wm-brand-amber);
    --wm-warning-soft: rgba(184, 121, 22, .13);
    --wm-code-bg: #f5f8ff;
    --wm-code-surface: #edf2fb;
    --wm-code-line: rgba(41, 52, 82, .14);
    --text-primary: var(--wm-ink);
    --editor-bg: var(--wm-surface);
    --editor-line-bg: var(--wm-surface-strong);
    --editor-line-color: var(--wm-muted);
    --editor-line-border: var(--wm-line);
    --editor-text: var(--wm-ink);
    --editor-caret: var(--wm-accent);
    --border: var(--wm-line);
    --transition-speed: .3s;

    --brand: var(--wm-accent-bright);
    --brand-dark: var(--wm-accent);
    --shell-bg: rgba(255, 255, 255, .9);
    --shell-surface: var(--wm-surface);
    --shell-ink: var(--wm-ink);
    --shell-muted: var(--wm-muted);
    --shell-line: var(--wm-line);
    --shell-accent: var(--wm-accent);
    --shell-accent-soft: var(--wm-accent-soft);

    --bs-primary: var(--wm-accent);
    --bs-primary-rgb: 0, 198, 170;
    --bs-body-bg: var(--wm-bg);
    --bs-body-color: var(--wm-ink);
    --bs-light: var(--wm-surface-strong);
    --bs-dark: var(--wm-cta-bg);
    --bs-link-color: var(--wm-ui-navy);
    --bs-link-hover-color: var(--wm-accent);
}

html.dark-theme {
    --wm-bg: #090e20;
    --wm-surface: #111a37;
    --wm-surface-strong: #18244a;
    --wm-ink: #f1f4ff;
    --wm-muted: #aab5d6;
    --wm-line: rgba(225, 232, 255, .14);
    --wm-accent: var(--wm-brand-web);
    --wm-accent-bright: var(--wm-brand-web-bright);
    --wm-accent-ink: #062b24;
    --wm-control-label: #062b24;
    --wm-accent-soft: rgba(0, 198, 170, .16);
    --wm-brand-sky: #8ea5ff;
    --wm-brand-violet: #b3a9ff;
    --wm-brand-amber: #f3c56b;
    --wm-brand-coral: #ff9aa1;
    --wm-ui-navy: #1b2745;
    --wm-ui-navy-deep: #131c33;
    --wm-secondary: var(--wm-brand-sky);
    --wm-secondary-soft: rgba(142, 165, 255, .18);
    --wm-highlight: var(--wm-brand-violet);
    --wm-highlight-soft: rgba(179, 169, 255, .18);
    --wm-hero-bg: radial-gradient(circle at 78% 30%, rgba(0, 198, 170, .2), transparent 24rem), linear-gradient(135deg, #0a1022 0%, #111b3b 58%, #090d1c 100%);
    --wm-hero-ink: #f1f4ff;
    --wm-hero-muted: #b7c0d8;
    --wm-hero-grid: rgba(215, 224, 255, .07);
    --wm-cta-bg: var(--wm-ui-navy-deep);
    --wm-shadow: 0 18px 48px rgba(0, 0, 0, .32);
    --wm-danger: var(--wm-brand-coral);
    --wm-danger-soft: rgba(255, 154, 161, .16);
    --wm-danger-line: rgba(255, 154, 161, .38);
    --wm-success: var(--wm-brand-web-bright);
    --wm-warning: var(--wm-brand-amber);
    --wm-warning-soft: rgba(243, 197, 107, .18);
    --wm-code-bg: #090e20;
    --wm-code-surface: #111a37;
    --wm-code-line: rgba(225, 232, 255, .14);

    --shell-bg: rgba(17, 26, 55, .9);
    --shell-surface: var(--wm-surface);
    --shell-ink: var(--wm-ink);
    --shell-muted: var(--wm-muted);
    --shell-line: var(--wm-line);
    --shell-accent: var(--wm-brand-web);
    --shell-accent-soft: var(--wm-accent-soft);

    --bs-primary: var(--wm-accent);
    --bs-primary-rgb: 0, 198, 170;
    --bs-body-bg: var(--wm-bg);
    --bs-body-color: var(--wm-ink);
    --bs-light: var(--wm-surface-strong);
    --bs-dark: var(--wm-code-bg);
    --bs-link-color: var(--wm-brand-web);
    --bs-link-hover-color: var(--wm-brand-web-bright);
}

html,
body {
    background: var(--wm-bg) !important;
    color: var(--wm-ink);
}


body:not(.home-page) #pageContent {
    background: var(--wm-bg);
    color: var(--wm-ink);
}

body:not(.home-page) a {
    color: var(--wm-accent);
}

body:not(.home-page) a:hover {
    color: var(--wm-accent-bright);
}

/* QR ekranı ortak paletin kendi sayfa yüzeyini açıkça taşır. */
body.qr-page,
body.qr-page #pageContent,
body.qr-page .qr-page-section {
    background: var(--wm-bg) !important;
    color: var(--wm-ink) !important;
}

body.qr-page .qr-tool-box,
body.qr-page .qr-preview-box {
    background: var(--wm-surface) !important;
    border-color: var(--wm-line) !important;
    box-shadow: var(--wm-shadow) !important;
}

body.qr-page .qr-form-control,
body.qr-page .qr-form-select,
body.qr-page .qr-option-box,
body.qr-page .qr-icon-btn {
    background: var(--wm-surface-strong) !important;
    border-color: var(--wm-line) !important;
    color: var(--wm-ink) !important;
}

body.qr-page .qr-nav-tabs .nav-link.active,
body.qr-page .qr-option-box.active,
body.qr-page .qr-icon-btn.active {
    background: var(--wm-accent-soft) !important;
    border-color: var(--wm-accent) !important;
    color: var(--wm-accent) !important;
}

body.qr-page .qr-preview-stage {
    background: var(--wm-surface-strong) !important;
    border-color: var(--wm-line) !important;
}

body.qr-page .form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px var(--wm-surface), 0 0 0 .25rem var(--wm-accent-soft) !important;
}

body.qr-page .form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px var(--wm-surface), 0 0 0 .25rem var(--wm-accent-soft) !important;
}

body.qr-page .form-range {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.qr-page .form-range::-webkit-slider-thumb {
    background-color: var(--wm-accent) !important;
}

body.qr-page .form-range::-moz-range-thumb {
    background-color: var(--wm-accent) !important;
}

body.qr-page .form-range::-webkit-slider-thumb:active {
    background-color: var(--wm-accent-bright) !important;
}

body.qr-page .form-range::-moz-range-thumb:active {
    background-color: var(--wm-accent-bright) !important;
}

body.qr-page .form-range::-webkit-slider-runnable-track {
    height: .5rem !important;
    background-color: var(--wm-surface-strong) !important;
    border-color: transparent !important;
    border-radius: 999px !important;
}

body.qr-page .form-range::-moz-range-track {
    height: .5rem !important;
    background-color: var(--wm-surface-strong) !important;
    border-color: transparent !important;
    border-radius: 999px !important;
}

/* Anasayfa ile aynı token'lar, home.css içindeki mevcut bileşen adlarına bağlanır. */
.home-page {
    --home-nav-bg: var(--wm-surface);
    --home-nav-line: var(--wm-line);
    --home-nav-ink: var(--wm-ink);
    --home-nav-muted: var(--wm-muted);
    --home-bg: var(--wm-bg);
    --home-surface: var(--wm-surface);
    --home-surface-strong: var(--wm-surface-strong);
    --home-ink: var(--wm-ink);
    --home-muted: var(--wm-muted);
    --home-line: var(--wm-line);
    --home-accent: var(--wm-accent);
    --home-accent-bright: var(--wm-accent-bright);
    --home-accent-ink: var(--wm-accent-ink);
    --home-accent-soft: var(--wm-accent-soft);
    --home-hero-bg: var(--wm-hero-bg);
    --home-hero-ink: var(--wm-hero-ink);
    --home-hero-muted: var(--wm-hero-muted);
    --home-hero-grid: var(--wm-hero-grid);
    --home-cta-bg: var(--wm-cta-bg);
    --home-shadow: var(--wm-shadow);
}

/* Tüm sayfalarda kullanılan tek navbar görünümü. */
body #siteNavbar.navbar {
    position: relative !important;
    top: auto !important;
    z-index: 100;
    width: 100% !important;
    max-width: none !important;
    min-height: 80px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--wm-line) !important;
    border-radius: 0 !important;
    background: var(--wm-surface) !important;
    box-shadow: 0 4px 18px rgba(19, 53, 64, .045);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: wm-navbar-enter .48s cubic-bezier(.22, 1, .36, 1) both;
}

body #siteNavbar .container {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    align-items: center;
    width: min(100%, 1480px) !important;
    max-width: 1480px !important;
    min-height: 80px;
    margin-inline: auto !important;
    padding-inline: clamp(1.25rem, 2.5vw, 2.5rem) !important;
}

body #siteNavbar .navbar-logo {
    grid-column: 1;
    justify-self: start;
    margin: 0 !important;
    animation: wm-navbar-item-enter .4s .08s cubic-bezier(.22, 1, .36, 1) both;
    transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}

body #siteNavbar .navbar-logo img {
    width: auto !important;
    height: 34px !important;
    max-width: 150px !important;
}

body #siteNavbar .mobile-menu {
    grid-column: 2;
    justify-self: center;
}

body #siteNavbar .navbar-nav {
    justify-content: center !important;
    gap: .35rem !important;
    margin: 0 !important;
}

body #siteNavbar .navbar-nav .nav-item {
    animation: wm-navbar-item-enter .38s cubic-bezier(.22, 1, .36, 1) both;
}

body #siteNavbar .navbar-nav .nav-item:nth-child(1) { animation-delay: .11s; }
body #siteNavbar .navbar-nav .nav-item:nth-child(2) { animation-delay: .14s; }
body #siteNavbar .navbar-nav .nav-item:nth-child(3) { animation-delay: .17s; }
body #siteNavbar .navbar-nav .nav-item:nth-child(4) { animation-delay: .20s; }
body #siteNavbar .navbar-nav .nav-item:nth-child(5) { animation-delay: .23s; }
body #siteNavbar .navbar-nav .nav-item:nth-child(6) { animation-delay: .26s; }

body #siteNavbar .navbar-nav .nav-link {
    position: relative;
    padding: .75rem .65rem !important;
    border-radius: 0 !important;
    color: var(--wm-muted) !important;
    font-size: .8rem !important;
    font-weight: 650 !important;
    letter-spacing: -.01em;
    transition: color .18s ease, transform .18s ease;
}

body #siteNavbar .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    right: .65rem;
    bottom: .38rem;
    left: .65rem;
    display: block !important;
    width: auto !important;
    height: 2px;
    border-radius: 999px;
    background: var(--wm-accent);
    opacity: 0;
    transform: scaleX(.35);
    transform-origin: center;
    transition: opacity .18s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
}

body #siteNavbar .navbar-nav .nav-link:hover,
body #siteNavbar .navbar-nav .nav-link.active {
    background: transparent !important;
    color: var(--wm-accent) !important;
    box-shadow: none;
}

body #siteNavbar .navbar-nav .nav-link:hover::after,
body #siteNavbar .navbar-nav .nav-link.active::after {
    opacity: 1;
    transform: scaleX(1);
}

body #siteNavbar .nav-actions {
    grid-column: 3;
    justify-self: end;
    gap: .65rem !important;
    margin: 0 !important;
    animation: wm-navbar-item-enter .4s .25s cubic-bezier(.22, 1, .36, 1) both;
}

body #siteNavbar .auth-button,
body #siteNavbar .navbar-toggler {
    min-height: 40px !important;
    padding-inline: 1rem !important;
    border-color: var(--wm-line) !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--wm-ink) !important;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s ease;
}

body #siteNavbar .auth-user {
    min-height: 40px;
    padding-inline: .75rem;
    border-color: var(--wm-line);
    border-radius: 10px;
    background: transparent;
    color: var(--wm-muted);
}

body #siteNavbar .theme-switch {
    width: 40px;
    height: 40px;
    min-height: 40px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--wm-ink) !important;
    transition: color .18s ease, background-color .18s ease, transform .18s cubic-bezier(.22, 1, .36, 1);
}

body #siteNavbar .auth-actions > a.auth-button:first-of-type {
    border-color: color-mix(in srgb, var(--wm-accent) 65%, var(--wm-line)) !important;
    color: var(--wm-accent) !important;
}

body #siteNavbar .auth-actions > a.auth-button:last-of-type {
    border-color: var(--wm-accent) !important;
    background: var(--wm-accent) !important;
    color: var(--wm-accent-ink) !important;
    box-shadow: 0 7px 18px rgba(0, 198, 170, .17);
}

@media (hover: hover) and (pointer: fine) {
    body #siteNavbar .navbar-logo:hover { transform: translateY(-1px) scale(1.015); }

    body #siteNavbar .navbar-nav .nav-link:hover,
    body #siteNavbar .auth-button:hover,
    body #siteNavbar .theme-switch:hover,
    body #siteNavbar .navbar-toggler:hover { transform: translateY(-1px); }
}

body #siteNavbar .auth-button:hover,
body #siteNavbar .theme-switch:hover,
body #siteNavbar .navbar-toggler:hover {
    border-color: color-mix(in srgb, var(--wm-accent) 32%, var(--wm-line)) !important;
    background: var(--wm-accent-soft) !important;
    color: var(--wm-accent) !important;
    box-shadow: 0 5px 14px rgba(0, 198, 170, .1);
}

body #siteNavbar .auth-actions > a.auth-button:last-of-type:hover {
    border-color: var(--wm-accent-bright) !important;
    background: var(--wm-accent-bright) !important;
    color: var(--wm-accent-ink) !important;
    box-shadow: 0 9px 22px rgba(0, 198, 170, .22);
}

html.dark-theme body #siteNavbar.navbar {
    border-bottom-color: #28444a !important;
    background: #10282e !important;
    box-shadow: 0 5px 22px rgba(2, 12, 17, .18);
}

html.dark-theme body #siteNavbar .auth-button,
html.dark-theme body #siteNavbar .auth-user,
html.dark-theme body #siteNavbar .navbar-toggler {
    border-color: #355158 !important;
    background: transparent !important;
}

html.dark-theme body #siteNavbar .auth-actions > a.auth-button:last-of-type {
    border-color: var(--wm-accent) !important;
    background: var(--wm-accent) !important;
    color: #062b24 !important;
}

body #siteNavbar .navbar-nav .nav-link:active,
body #siteNavbar .auth-button:active,
body #siteNavbar .theme-switch:active,
body #siteNavbar .navbar-toggler:active { transform: translateY(1px) scale(.98); }

@keyframes wm-navbar-enter {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes wm-navbar-item-enter {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1199.98px) {
    body #siteNavbar .auth-button-text,
    body #siteNavbar .auth-user { display: none !important; }
    body #siteNavbar .navbar-nav { gap: .08rem !important; }
    body #siteNavbar .navbar-nav .nav-link { padding-inline: .5rem !important; font-size: .75rem !important; }
}

@media (max-width: 991.98px) {
    body #siteNavbar.navbar {
        width: 100% !important;
        min-height: 68px;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    body #siteNavbar .container {
        display: flex !important;
        flex-wrap: wrap;
        min-height: 68px;
        padding-inline: 1rem !important;
    }
    body #siteNavbar .navbar-logo { grid-column: auto; }
    body #siteNavbar .nav-actions { margin-left: auto !important; }
    body #siteNavbar .mobile-menu {
        top: 100% !important;
        left: 0;
        right: 0;
        width: 100%;
        grid-column: auto;
        justify-self: auto;
        border-color: var(--wm-line) !important;
        border-radius: 0 0 14px 14px !important;
        background: var(--wm-surface) !important;
        box-shadow: 0 18px 42px rgba(19, 53, 64, .13);
    }

    html.dark-theme body #siteNavbar .mobile-menu { background: #10282e !important; }
}

@media (max-width: 575.98px) {
    body #siteNavbar.navbar { width: 100% !important; margin: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
    body #siteNavbar.navbar,
    body #siteNavbar .navbar-logo,
    body #siteNavbar .navbar-nav .nav-item,
    body #siteNavbar .nav-actions { animation: none !important; }

    body #siteNavbar .navbar-logo,
    body #siteNavbar .navbar-nav .nav-link,
    body #siteNavbar .auth-button,
    body #siteNavbar .theme-switch,
    body #siteNavbar .navbar-toggler { transition-duration: .01ms !important; }
}

@media (prefers-reduced-transparency: reduce) {
    body #siteNavbar.navbar {
        background: var(--wm-surface) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

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

@supports (view-transition-name: root) {
    :root { view-transition-name: root; }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
        mix-blend-mode: normal;
    }
}

/* Reference navbar: UI Labs yerleşimi, tam genişlik Webmind kabuğu. */
body #siteNavbar.navbar {
    --wm-nav-bg: #ffffff;
    --wm-nav-border: #e7e9ef;
    --wm-nav-text: #626a7a;
    --wm-nav-text-strong: #202d70;
    --wm-nav-accent: #007f70;
    --wm-nav-hover: var(--wm-nav-accent);
    --wm-nav-soft: #edfaf7;
    --wm-nav-control: #f8f9fb;
    --wm-nav-control-border: #d7dbe4;
    --wm-nav-primary: #202d70;
    --wm-nav-primary-text: #ffffff;
    --wm-nav-primary-hover: #172052;
    --wm-nav-primary-hover-text: #ffffff;
    --wm-nav-focus: #007f70;
    --wm-nav-shadow: rgba(28, 35, 54, .04);
    --wm-nav-control-shadow: rgba(28, 35, 54, .08);
    width: 100% !important;
    max-width: none !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--wm-nav-border) !important;
    border-radius: 0 !important;
    background: var(--wm-nav-bg) !important;
    box-shadow: 0 1px 0 var(--wm-nav-shadow) !important;
    animation: wm-reference-navbar-enter .34s cubic-bezier(.22, 1, .36, 1) both;
}

html.dark-theme body #siteNavbar.navbar {
    --wm-nav-bg: #0b0d14;
    --wm-nav-border: #262a35;
    --wm-nav-text: #a7afbf;
    --wm-nav-text-strong: #f3f5f8;
    --wm-nav-accent: #00c6aa;
    --wm-nav-hover: var(--wm-nav-accent);
    --wm-nav-soft: #172321;
    --wm-nav-control: #141821;
    --wm-nav-control-border: #303644;
    --wm-nav-primary: #f3f5f8;
    --wm-nav-primary-text: #10131b;
    --wm-nav-primary-hover: #00c6aa;
    --wm-nav-primary-hover-text: #071b17;
    --wm-nav-focus: #00c6aa;
    --wm-nav-shadow: rgba(0, 0, 0, .24);
    --wm-nav-control-shadow: rgba(0, 0, 0, .2);
    color-scheme: dark;
    border-bottom-color: var(--wm-nav-border) !important;
    background: var(--wm-nav-bg) !important;
    box-shadow: none !important;
}

body #siteNavbar .container {
    display: grid !important;
    grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 76px !important;
    margin-inline: auto !important;
    padding-inline: clamp(1.5rem, 2.5vw, 3rem) !important;
}

body #siteNavbar .navbar-logo {
    grid-column: 1 !important;
    justify-self: start !important;
    margin: 0 !important;
    animation: none !important;
}

body #siteNavbar .navbar-logo img {
    width: auto !important;
    height: 32px !important;
    max-width: 145px !important;
}

body #siteNavbar .mobile-menu {
    grid-column: 2 !important;
    justify-self: center !important;
}

body #siteNavbar .navbar-nav {
    justify-content: center !important;
    gap: clamp(.7rem, 1.25vw, 1.35rem) !important;
    margin: 0 !important;
}

body #siteNavbar .navbar-nav .nav-item { animation: none !important; }

body #siteNavbar .navbar-nav .nav-item > form { margin: 0 !important; }

body #siteNavbar .navbar-nav .nav-link {
    padding: .72rem .2rem .84rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--wm-nav-text) !important;
    cursor: pointer;
    font-family: inherit;
    font-size: .79rem !important;
    font-weight: 620 !important;
    letter-spacing: -.01em !important;
    box-shadow: none !important;
    transition: color 160ms ease, transform 160ms ease !important;
}

body #siteNavbar .navbar-nav .nav-link::after {
    content: "" !important;
    position: absolute !important;
    right: .15rem !important;
    bottom: .34rem !important;
    left: .15rem !important;
    display: block !important;
    width: auto !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: var(--wm-nav-accent) !important;
    opacity: 0;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    transition: transform 220ms cubic-bezier(.16, 1, .3, 1), opacity 120ms ease !important;
}

body #siteNavbar .navbar-nav .nav-link:hover {
    background: transparent !important;
    color: var(--wm-nav-hover) !important;
    box-shadow: none !important;
}

body #siteNavbar .navbar-nav .nav-link.active {
    background: transparent !important;
    color: var(--wm-nav-accent) !important;
    box-shadow: none !important;
}

body #siteNavbar .navbar-nav .nav-link:hover::after,
body #siteNavbar .navbar-nav .nav-link.active::after,
body #siteNavbar .navbar-nav .nav-link:focus-visible::after {
    opacity: 1;
    transform: scaleX(1) !important;
}

body #siteNavbar .navbar-nav .nav-link.active::after {
    height: 3px !important;
    box-shadow: none !important;
}

body #siteNavbar .navbar-nav .nav-link:focus-visible {
    border-radius: 6px !important;
    outline: 3px solid var(--wm-nav-focus) !important;
    outline-offset: 3px;
    color: var(--wm-nav-accent) !important;
}

body #siteNavbar .nav-actions {
    grid-column: 3 !important;
    justify-self: end !important;
    gap: .65rem !important;
    margin: 0 !important;
    animation: none !important;
}

body #siteNavbar .auth-actions {
    order: 2;
    gap: .5rem !important;
}

body #siteNavbar .theme-switch {
    order: 1;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid var(--wm-nav-control-border) !important;
    border-radius: 999px !important;
    background: var(--wm-nav-control) !important;
    color: var(--wm-nav-text-strong) !important;
    box-shadow: 0 2px 8px var(--wm-nav-control-shadow) !important;
}

body #siteNavbar .theme-switch i {
    display: inline-block;
    font-size: .95rem;
    line-height: 1;
}

html:not(.dark-theme) body #siteNavbar .theme-switch {
    border-color: #dfe4e8 !important;
    background: #ffffff !important;
    color: #59636d !important;
    box-shadow: 0 2px 8px rgba(24, 39, 49, .08) !important;
}

html:not(.dark-theme) body #siteNavbar .theme-switch .moon-icon {
    color: #59636d !important;
}

html.dark-theme body #siteNavbar .theme-switch {
    border-color: #2f3945 !important;
    background: #121820 !important;
    color: #c5ced8 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22) !important;
}

html.dark-theme body #siteNavbar .theme-switch .sun-icon {
    color: #c5ced8 !important;
}

body #siteNavbar .auth-user {
    min-height: 40px !important;
    padding: 0 .8rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--wm-nav-text) !important;
}

html.dark-theme body #siteNavbar .auth-user { color: var(--wm-nav-text) !important; }

body #siteNavbar .auth-button,
body #siteNavbar .navbar-toggler {
    min-height: 40px !important;
    padding: 0 1.2rem !important;
    border: 1px solid var(--wm-nav-control-border) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--wm-nav-text-strong) !important;
    box-shadow: none !important;
    font-size: .78rem !important;
    font-weight: 650 !important;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease !important;
}

body #siteNavbar .auth-button-icon {
    flex: 0 0 auto;
    font-size: .9rem;
    line-height: 1;
}

html.dark-theme body #siteNavbar .auth-button,
html.dark-theme body #siteNavbar .navbar-toggler {
    border-color: var(--wm-nav-control-border) !important;
    background: transparent !important;
    color: var(--wm-nav-text-strong) !important;
}

body #siteNavbar .auth-actions > a.auth-button:last-of-type,
body #siteNavbar .auth-button--logout {
    border-color: var(--wm-nav-primary) !important;
    background: var(--wm-nav-primary) !important;
    color: var(--wm-nav-primary-text) !important;
    box-shadow: 0 3px 10px var(--wm-nav-control-shadow) !important;
}

html.dark-theme body #siteNavbar .auth-actions > a.auth-button:last-of-type,
html.dark-theme body #siteNavbar .auth-button--logout {
    border-color: var(--wm-nav-primary) !important;
    background: var(--wm-nav-primary) !important;
    color: var(--wm-nav-primary-text) !important;
    box-shadow: none !important;
}

html:not(.dark-theme) body #siteNavbar .auth-button--logout {
    border-color: var(--wm-nav-control-border) !important;
    background: transparent !important;
    color: var(--wm-nav-text-strong) !important;
    box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
    body #siteNavbar .navbar-logo:hover { transform: translateY(-1px) !important; }
    body #siteNavbar .navbar-nav .nav-link:hover { transform: translateY(-1px) !important; }
    body #siteNavbar .theme-switch:hover,
    body #siteNavbar .auth-button:hover,
    body #siteNavbar .navbar-toggler:hover {
        border-color: var(--wm-nav-accent) !important;
        background: var(--wm-nav-soft) !important;
        color: var(--wm-nav-text-strong) !important;
        transform: translateY(-1px) !important;
        box-shadow: none !important;
    }

    html.dark-theme body #siteNavbar .theme-switch:hover,
    html.dark-theme body #siteNavbar .auth-button:hover,
    html.dark-theme body #siteNavbar .navbar-toggler:hover {
        border-color: var(--wm-nav-accent) !important;
        background: var(--wm-nav-soft) !important;
        color: var(--wm-nav-text-strong) !important;
    }

    body #siteNavbar .auth-actions > a.auth-button:last-of-type:hover,
    body #siteNavbar .auth-button--logout:hover {
        border-color: var(--wm-nav-primary-hover) !important;
        background: var(--wm-nav-primary-hover) !important;
        color: var(--wm-nav-primary-hover-text) !important;
    }

    html.dark-theme body #siteNavbar .auth-actions > a.auth-button:last-of-type:hover,
    html.dark-theme body #siteNavbar .auth-button--logout:hover {
        border-color: var(--wm-nav-primary-hover) !important;
        background: var(--wm-nav-primary-hover) !important;
        color: var(--wm-nav-primary-hover-text) !important;
    }

    html:not(.dark-theme) body #siteNavbar .auth-button--logout:hover {
        border-color: var(--wm-nav-accent) !important;
        background: var(--wm-nav-soft) !important;
        color: var(--wm-nav-accent) !important;
    }
}

body #siteNavbar .auth-button:focus-visible,
body #siteNavbar .theme-switch:focus-visible,
body #siteNavbar .navbar-toggler:focus-visible {
    outline: 3px solid var(--wm-nav-focus) !important;
    outline-offset: 3px;
    box-shadow: none !important;
}

body #siteNavbar a,
body #siteNavbar button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

body #siteNavbar .navbar-nav .nav-link:active,
body #siteNavbar .auth-button:active,
body #siteNavbar .theme-switch:active,
body #siteNavbar .navbar-toggler:active { transform: translateY(1px) scale(.98) !important; }

@keyframes wm-reference-navbar-enter {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1199.98px) {
    body #siteNavbar .auth-user,
    body #siteNavbar .auth-button-text { display: none !important; }

    body #siteNavbar .auth-button {
        width: 40px !important;
        padding: 0 !important;
    }

    body #siteNavbar .navbar-nav { gap: .55rem !important; }
    body #siteNavbar .navbar-nav .nav-link { font-size: .74rem !important; }
}

@media (max-width: 991.98px) {
    body #siteNavbar.navbar { min-height: 66px !important; }

    body #siteNavbar .container {
        display: flex !important;
        min-height: 66px !important;
        padding-inline: 1rem !important;
    }

    body #siteNavbar .navbar-logo { grid-column: auto !important; }
    body #siteNavbar .navbar-logo img { height: 30px !important; max-width: 136px !important; }
    body #siteNavbar .nav-actions { grid-column: auto !important; margin-left: auto !important; }

    body #siteNavbar .navbar-toggler {
        width: 40px !important;
        padding: 0 !important;
    }

    body #siteNavbar .mobile-menu {
        top: 100% !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        border: 0 !important;
        border-top: 1px solid var(--wm-nav-border) !important;
        border-bottom: 1px solid var(--wm-nav-border) !important;
        border-radius: 0 !important;
        background: var(--wm-nav-bg) !important;
        box-shadow: 0 18px 32px rgba(19, 44, 49, .09) !important;
    }

    html.dark-theme body #siteNavbar .mobile-menu {
        border-color: var(--wm-nav-border) !important;
        background: var(--wm-nav-bg) !important;
        box-shadow: 0 18px 32px rgba(0, 0, 0, .26) !important;
    }

    body #siteNavbar .mobile-menu .nav-link {
        padding: .8rem 1rem !important;
        border-radius: 8px !important;
    }

    body #siteNavbar .mobile-menu .nav-link:hover,
    body #siteNavbar .mobile-menu .nav-link.active { background: var(--wm-nav-soft) !important; }

    html.dark-theme body #siteNavbar .mobile-menu .nav-link:hover,
    html.dark-theme body #siteNavbar .mobile-menu .nav-link.active { background: var(--wm-nav-soft) !important; }
}

@media (prefers-reduced-motion: reduce) {
    body #siteNavbar.navbar { animation: none !important; }
    body #siteNavbar .navbar-logo,
    body #siteNavbar .navbar-nav .nav-link,
    body #siteNavbar .auth-button,
    body #siteNavbar .theme-switch,
    body #siteNavbar .navbar-toggler { transition: none !important; }
    body #siteNavbar .navbar-nav .nav-link::after { transition: none !important; }
}

/* Ortak kart, form ve modal yüzeyleri. */
body:not(.home-page) .card,
body:not(.home-page) .modal-content,
body:not(.home-page) .code-tool-box,
body:not(.home-page) .code-card,
body:not(.home-page) .bulk-action-bar,
body:not(.home-page) .qr-tool-box,
body:not(.home-page) .qr-preview-box {
    background: var(--wm-surface) !important;
    border-color: var(--wm-line) !important;
    color: var(--wm-ink) !important;
    box-shadow: var(--wm-shadow) !important;
}

body:not(.home-page) .card-header,
body:not(.home-page) .card-footer,
body:not(.home-page) .modal-header,
body:not(.home-page) .modal-footer {
    background: transparent !important;
    border-color: var(--wm-line) !important;
    color: var(--wm-ink) !important;
}

body:not(.home-page) h1,
body:not(.home-page) h2,
body:not(.home-page) h3,
body:not(.home-page) h4,
body:not(.home-page) h5,
body:not(.home-page) h6,
body:not(.home-page) .text-dark,
body:not(.home-page) .form-label {
    color: var(--wm-ink) !important;
}

body:not(.home-page) .text-secondary,
body:not(.home-page) .text-muted {
    color: var(--wm-muted) !important;
}

body:not(.home-page) .form-control,
body:not(.home-page) .form-select,
body:not(.home-page) input,
body:not(.home-page) textarea,
body:not(.home-page) select {
    background-color: var(--wm-surface-strong) !important;
    border-color: var(--wm-line) !important;
    color: var(--wm-ink) !important;
}

body:not(.home-page) .form-control::placeholder,
body:not(.home-page) input::placeholder,
body:not(.home-page) textarea::placeholder {
    color: var(--wm-muted) !important;
    opacity: .9;
}

body:not(.home-page) .form-control:focus,
body:not(.home-page) .form-select:focus,
body:not(.home-page) input:focus,
body:not(.home-page) textarea:focus,
body:not(.home-page) select:focus {
    border-color: var(--wm-accent) !important;
    box-shadow: 0 0 0 3px var(--wm-accent-soft) !important;
}

body:not(.home-page) .btn-primary,
body:not(.home-page) .btn-share,
body:not(.home-page) .code-btn-primary,
body:not(.home-page) .qr-generate-btn,
body:not(.home-page) .auth-submit {
    background: var(--wm-accent) !important;
    border-color: var(--wm-accent) !important;
    color: var(--wm-control-label) !important;
}

body:not(.home-page) .btn-primary:hover,
body:not(.home-page) .btn-share:hover,
body:not(.home-page) .code-btn-primary:hover,
body:not(.home-page) .qr-generate-btn:hover,
body:not(.home-page) .auth-submit:hover {
    background: var(--wm-accent-bright) !important;
    border-color: var(--wm-accent-bright) !important;
}

body:not(.home-page) .btn-outline-secondary,
body:not(.home-page) .code-btn-outline,
body:not(.home-page) .qr-download-btn,
body:not(.home-page) .qr-mini-btn {
    background: var(--wm-surface-strong) !important;
    border: 1px solid var(--wm-line) !important;
    color: var(--wm-accent) !important;
}

body:not(.home-page) .btn-outline-secondary:hover,
body:not(.home-page) .code-btn-outline:hover,
body:not(.home-page) .qr-download-btn:hover,
body:not(.home-page) .qr-mini-btn:hover {
    background: var(--wm-accent-soft) !important;
    border-color: var(--wm-accent) !important;
    color: var(--wm-accent-bright) !important;
}

body:not(.home-page) .btn-danger,
body:not(.home-page) .code-btn-danger {
    background: var(--wm-danger-soft) !important;
    border-color: var(--wm-danger-line) !important;
    color: var(--wm-danger) !important;
}

body:not(.home-page) .btn-danger:hover,
body:not(.home-page) .code-btn-danger:hover {
    background: var(--wm-danger) !important;
    border-color: var(--wm-danger) !important;
    color: #ffffff !important;
}

body:not(.home-page) .alert-danger {
    background: var(--wm-danger-soft) !important;
    border-color: var(--wm-danger-line) !important;
    color: var(--wm-danger) !important;
}

body:not(.home-page) .badge,
body:not(.home-page) .qr-slider-val {
    background: var(--wm-accent-soft) !important;
    color: var(--wm-accent) !important;
}

body:not(.home-page) .code-badge {
    background: var(--wm-highlight-soft) !important;
    color: var(--wm-highlight) !important;
}

body:not(.home-page) .text-info,
body:not(.home-page) .link-info {
    color: var(--wm-secondary) !important;
}

body:not(.home-page) .bg-info {
    background-color: var(--wm-secondary) !important;
    color: #ffffff !important;
}

/* QR üretici */
body:not(.home-page) .qr-page-section {
    background: var(--wm-bg) !important;
    color: var(--wm-ink);
}

body:not(.home-page) .qr-hero-title,
body:not(.home-page) .qr-tool-title,
body:not(.home-page) .qr-label,
body:not(.home-page) .qr-history-info strong {
    color: var(--wm-ink) !important;
}

body:not(.home-page) .qr-hero-text,
body:not(.home-page) .qr-tool-subtitle,
body:not(.home-page) .qr-option-text {
    color: var(--wm-muted) !important;
}

body:not(.home-page) .qr-nav-tabs {
    border-color: var(--wm-line) !important;
}

body:not(.home-page) .qr-nav-tabs .nav-link {
    color: var(--wm-muted) !important;
}

body:not(.home-page) .qr-nav-tabs .nav-link.active {
    background: var(--wm-accent-soft) !important;
    color: var(--wm-accent) !important;
}

body:not(.home-page) .qr-form-control,
body:not(.home-page) .qr-form-select,
body:not(.home-page) .qr-option-box,
body:not(.home-page) .qr-icon-btn {
    background: var(--wm-surface-strong) !important;
    border-color: var(--wm-line) !important;
    color: var(--wm-ink) !important;
}

body:not(.home-page) .qr-option-box.active,
body:not(.home-page) .qr-icon-btn.active {
    background: var(--wm-accent-soft) !important;
    border-color: var(--wm-accent) !important;
}

body:not(.home-page) .qr-option-box.active .qr-option-text,
body:not(.home-page) .qr-icon-btn.active .qr-option-text,
body:not(.home-page) .qr-option-box.active .qr-option-icon,
body:not(.home-page) .qr-icon-btn.active .qr-option-icon,
body:not(.home-page) .qr-option-icon {
    color: var(--wm-accent) !important;
}

body:not(.home-page) .qr-preview-stage {
    background: var(--wm-surface-strong) !important;
    border-color: var(--wm-line) !important;
}

body:not(.home-page) .qr-placeholder,
body:not(.home-page) .qr-history-info small {
    color: var(--wm-muted) !important;
}

body:not(.home-page) .qr-history-item {
    border-color: var(--wm-line) !important;
}

body:not(.home-page) .qr-history-thumb,
body:not(.home-page) .form-control-color {
    background: var(--wm-surface-strong) !important;
    border-color: var(--wm-line) !important;
}

body:not(.home-page) .qr-theme-btn.active {
    border-color: var(--wm-accent) !important;
}

body:not(.home-page) .qr-form-control::file-selector-button,
body:not(.home-page) input[type="file"]::file-selector-button {
    background: var(--wm-accent) !important;
    color: var(--wm-control-label) !important;
}

/* Kod listesi */
body:not(.home-page) .code-page-section {
    background: var(--wm-bg) !important;
    color: var(--wm-ink);
}

body:not(.home-page) .code-hero-title,
body:not(.home-page) .code-tool-title {
    color: var(--wm-ink) !important;
}

body:not(.home-page) .code-hero-text,
body:not(.home-page) .bulk-action-info,
body:not(.home-page) .code-meta-text {
    color: var(--wm-muted) !important;
}

body:not(.home-page) .code-form-control,
body:not(.home-page) .folder-title-input,
body:not(.home-page) .folder-card-input {
    background: var(--wm-surface-strong) !important;
    border-color: var(--wm-line) !important;
    color: var(--wm-ink) !important;
}

body:not(.home-page) .code-card-preview {
    background: var(--wm-code-surface) !important;
    border-bottom-color: var(--wm-line) !important;
    color: var(--wm-ink) !important;
}

body:not(.home-page) .code-card-preview::after {
    background: linear-gradient(transparent, var(--wm-code-surface)) !important;
}

body:not(.home-page) .code-card-preview pre {
    color: var(--wm-muted) !important;
}

body:not(.home-page) .code-badge-muted {
    background: var(--wm-surface-strong) !important;
    color: var(--wm-muted) !important;
}

body:not(.home-page) .code-folder-badge {
    background: var(--wm-warning-soft) !important;
    color: var(--wm-warning) !important;
}

body:not(.home-page) .code-select-check {
    background: var(--wm-surface) !important;
    border-color: var(--wm-line) !important;
}

body:not(.home-page) .code-select-check:checked {
    background: var(--wm-accent) !important;
    border-color: var(--wm-accent) !important;
}

body:not(.home-page) .folder-card,
body:not(.home-page) .back-to-root {
    background: var(--wm-surface) !important;
    border-color: var(--wm-line) !important;
    color: var(--wm-accent) !important;
}

body:not(.home-page) .folder-card:hover,
body:not(.home-page) .back-to-root:hover,
body:not(.home-page) .folder-card-edit-button:hover,
body:not(.home-page) .folder-card-edit-button:focus-visible {
    background: var(--wm-accent-soft) !important;
    border-color: var(--wm-accent) !important;
    color: var(--wm-accent-bright) !important;
}

body:not(.home-page) .folder-title-edit-button,
body:not(.home-page) .folder-icon,
body:not(.home-page) .empty-state-icon {
    color: var(--wm-accent) !important;
}

body:not(.home-page) .pagination .page-link {
    background: var(--wm-surface) !important;
    border-color: var(--wm-line) !important;
    color: var(--wm-accent) !important;
}

body:not(.home-page) .pagination .page-item.active .page-link {
    background: var(--wm-accent) !important;
    border-color: var(--wm-accent) !important;
    color: var(--wm-control-label) !important;
}

/* Kod görüntüleme / editör */
body:not(.home-page) .code-page-header,
body:not(.home-page) .code-editor-wrapper {
    --code-panel: var(--wm-surface-strong) !important;
    --code-editor-bg: var(--wm-code-bg) !important;
    --code-surface: var(--wm-surface) !important;
    --code-border: var(--wm-line) !important;
}

body:not(.home-page) .code-page-header {
    background: var(--wm-surface-strong) !important;
    border-color: var(--wm-line) !important;
    color: var(--wm-ink) !important;
}

body:not(.home-page) .code-editor-wrapper {
    background: var(--wm-code-bg) !important;
    border-color: var(--wm-line) !important;
}

body:not(.home-page) .code-breadcrumb a {
    color: var(--wm-muted) !important;
}

body:not(.home-page) .code-breadcrumb a:hover,
body:not(.home-page) .code-breadcrumb a:focus-visible {
    background: var(--wm-accent-soft) !important;
    color: var(--wm-accent-bright) !important;
}

body:not(.home-page) .code-breadcrumb-current,
body:not(.home-page) .code-language {
    background: var(--wm-surface) !important;
    border-color: var(--wm-line) !important;
    color: var(--wm-ink) !important;
}

body:not(.home-page) .code-breadcrumb-separator {
    color: var(--wm-muted) !important;
}

body:not(.home-page) .code-save-button {
    background: var(--wm-accent) !important;
    color: var(--wm-control-label) !important;
}

body:not(.home-page) .code-save-button:hover {
    background: var(--wm-accent-bright) !important;
}

body:not(.home-page) .code-save-button:focus-visible,
body:not(.home-page) .code-language:focus-visible {
    box-shadow: 0 0 0 3px var(--wm-accent-soft) !important;
}

body:not(.home-page) .code-status,
body:not(.home-page) .code-editor-message {
    color: var(--wm-muted) !important;
}

body:not(.home-page) .code-status[data-state="saved"] {
    color: var(--wm-success) !important;
}

body:not(.home-page) .code-status[data-state="error"] {
    color: var(--wm-danger) !important;
}

/* Silme / önizleme ekranı */
body:not(.home-page) .code-preview-card {
    background: var(--wm-code-surface) !important;
    color: var(--wm-ink) !important;
}

body:not(.home-page) .code-preview-card::-webkit-scrollbar-thumb {
    background: var(--wm-accent) !important;
}

/* Giriş ve kayıt kartları da aynı yüzey, çizgi ve vurgu değerlerini kullanır. */
body:not(.home-page) .auth-page {
    --auth-bg: var(--wm-bg);
    --auth-surface: var(--wm-surface);
    --auth-border: var(--wm-line);
    --auth-text: var(--wm-ink);
    --auth-soft: var(--wm-muted);
    --auth-muted: var(--wm-muted);
    --auth-input-bg: var(--wm-surface-strong);
    --auth-input-border: var(--wm-line);
    --auth-placeholder: var(--wm-muted);
    --auth-brand: var(--wm-accent);
    --auth-brand-dark: var(--wm-accent-bright);
    background: var(--wm-bg) !important;
    color: var(--wm-ink) !important;
}

body:not(.home-page) .auth-card,
body:not(.home-page) .auth-frame {
    background: var(--wm-surface) !important;
    border-color: var(--wm-line) !important;
    box-shadow: var(--wm-shadow) !important;
}

body:not(.home-page) .auth-heading__icon {
    background: var(--wm-accent-soft) !important;
    color: var(--wm-accent) !important;
}

body:not(.home-page) .auth-card__accent {
    background: linear-gradient(90deg, var(--wm-accent), var(--wm-accent-bright)) !important;
}

/* Eski Bootstrap durum sınıfları için aynı paletin kontrollü karşılıkları. */
body:not(.home-page) .bg-light {
    background-color: var(--wm-surface-strong) !important;
}

body:not(.home-page) .bg-danger {
    background-color: var(--wm-danger) !important;
}

body:not(.home-page) .text-danger {
    color: var(--wm-danger) !important;
}

body:not(.home-page) .border,
body:not(.home-page) .border-top {
    border-color: var(--wm-line) !important;
}

@media (prefers-reduced-motion: reduce) {
    body:not(.home-page) *,
    body:not(.home-page) *::before,
    body:not(.home-page) *::after {
        transition-duration: .01ms !important;
    }
}