/* =========================================================
   FAFUER INDEX — OBSIDIAN NEON (premium dark)
   file: /public_html/css/index.obsidian-neon.css
   ========================================================= */

/* -------------------------
   TOKENS
------------------------- */
:root {
    --bg-page: #070A10;
    --bg-veil: rgba(10, 12, 20, .55);
    --bg-card: rgba(12, 16, 28, .58);
    --bg-card-strong: rgba(10, 12, 20, .78);

    --txt-0: #EAF2FF;
    --txt-1: #B7C6E2;
    --txt-2: #7F90B3;

    --a-0: #7C3AED;
    /* purple */
    --a-1: #22D3EE;
    /* ice cyan */
    --a-2: #A78BFA;
    /* soft purple */
    --a-3: #60A5FA;
    /* blue */

    --bd-0: rgba(124, 58, 237, .40);
    --bd-1: rgba(34, 211, 238, .32);
    --bd-2: rgba(231, 242, 255, .12);

    --r-xl: 34px;
    --r-lg: 24px;
    --r-md: 18px;
    --r-pill: 999px;

    --sh-0: 0 30px 90px rgba(0, 0, 0, .78);
    --sh-1: 0 18px 50px rgba(0, 0, 0, .60);
    --sh-2: 0 10px 26px rgba(0, 0, 0, .45);

    --t-fast: 160ms ease-out;
    --t-mid: 220ms ease;
}

/* -------------------------
   RESET / BASE
------------------------- */
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    display: block;
}

body {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-page);
    color: var(--txt-0);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Aurora / nebula background (unique look) */
body::before {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: -3;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 22%, rgba(124, 58, 237, .32), transparent 42%),
        radial-gradient(circle at 78% 34%, rgba(34, 211, 238, .22), transparent 44%),
        radial-gradient(circle at 52% 86%, rgba(96, 165, 250, .18), transparent 48%),
        radial-gradient(circle at 24% 80%, rgba(167, 139, 250, .14), transparent 52%),
        linear-gradient(180deg, rgba(7, 10, 16, 0) 0%, rgba(7, 10, 16, .65) 70%, rgba(7, 10, 16, .95) 100%);
    filter: blur(18px);
    opacity: .95;
}

/* Subtle grid + noise vibe */
/* Subtle PCB circuit vibe (grid yok) */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    /* ✅ Devre izi (SVG tile) + hafif nebula dokusu */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 44 H96 Q112 44 112 60 V96' stroke='%2322D3EE' stroke-opacity='.14' stroke-width='1'/%3E%3Cpath d='M112 96 H154 Q170 96 170 112 V146' stroke='%237C3AED' stroke-opacity='.10' stroke-width='1'/%3E%3Cpath d='M46 190 H126 Q142 190 142 174 V150' stroke='%2360A5FA' stroke-opacity='.10' stroke-width='1'/%3E%3Cpath d='M198 54 V122 Q198 138 182 138 H154' stroke='%23A78BFA' stroke-opacity='.09' stroke-width='1'/%3E%3Cpath d='M72 74 V112 Q72 128 88 128 H120' stroke='%23E7F2FF' stroke-opacity='.07' stroke-width='1'/%3E%3Cpath d='M212 172 H176 Q160 172 160 188 V216' stroke='%2322D3EE' stroke-opacity='.08' stroke-width='1'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='18' cy='44' r='2' fill='%23E7F2FF' fill-opacity='.12'/%3E%3Ccircle cx='112' cy='96' r='2' fill='%2322D3EE' fill-opacity='.14'/%3E%3Ccircle cx='170' cy='146' r='2' fill='%237C3AED' fill-opacity='.10'/%3E%3Ccircle cx='46' cy='190' r='2' fill='%2360A5FA' fill-opacity='.10'/%3E%3Ccircle cx='142' cy='150' r='2' fill='%23A78BFA' fill-opacity='.10'/%3E%3Ccircle cx='198' cy='54' r='2' fill='%23A78BFA' fill-opacity='.09'/%3E%3Ccircle cx='154' cy='138' r='2' fill='%2322D3EE' fill-opacity='.10'/%3E%3Ccircle cx='72' cy='74' r='2' fill='%23E7F2FF' fill-opacity='.08'/%3E%3Ccircle cx='120' cy='128' r='2' fill='%23E7F2FF' fill-opacity='.07'/%3E%3Ccircle cx='212' cy='172' r='2' fill='%2322D3EE' fill-opacity='.08'/%3E%3Ccircle cx='160' cy='216' r='2' fill='%2322D3EE' fill-opacity='.07'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(circle at 40% 10%, rgba(34, 211, 238, .10), transparent 55%),
        radial-gradient(circle at 80% 90%, rgba(124, 58, 237, .10), transparent 55%);

    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 240px 240px, 100% 100%, 100% 100%;

    /* “devre” daha premium dursun */
    mix-blend-mode: screen;
    opacity: .32;
    /* istersen .22 daha sakin, .40 daha belirgin */
    filter: blur(.15px);
    /* banding kırar, grid hissi üretmez */
}

h1,
h2,
h3,
h4,
p,
li,
a,
span {
    text-shadow: none;
}

a {
    color: inherit;
}

/* -------------- layout */
.page {
    max-width: 1220px;
    margin: 0 auto;
    padding: 18px 16px 44px;
    position: relative;
    z-index: 1;
}

/* =========================
   AQUARIUM BUBBLES (CLEAN)
   layer: #spark-layer
========================= */
.spark-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;

    /* arka planda dursun ama “üstüne binmesin” */
    isolation: isolate;
}

/* wrapper: hem yükselir hem drift yapar */
.aq-bubble {
    position: absolute;
    pointer-events: none;
    opacity: var(--alpha, .45);
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
    animation: aq-rise var(--dur, 12s) linear infinite;
    animation-delay: var(--delay, 0s);
}

/* iç: kabarcık görünümü + yalpa (mikro hareket) */
.aq-bubble-i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;

    /* cam baloncuk */
    background:
        radial-gradient(circle at 28% 28%,
            rgba(255, 255, 255, .85) 0%,
            rgba(255, 255, 255, .34) 16%,
            rgba(255, 255, 255, .10) 34%,
            rgba(34, 211, 238, .10) 56%,
            rgba(0, 0, 0, 0) 78%),
        radial-gradient(circle at 72% 78%,
            rgba(34, 211, 238, .10) 0%,
            rgba(124, 58, 237, .06) 38%,
            rgba(0, 0, 0, 0) 70%);

    border: 1px solid rgba(231, 242, 255, .16);
    box-shadow:
        inset 0 -6px 12px rgba(0, 0, 0, .22),
        inset 0 6px 12px rgba(255, 255, 255, .08),
        0 0 16px rgba(34, 211, 238, .10);

    filter: saturate(1.08) blur(.25px);
    will-change: transform;
    transform: translate3d(0, 0, 0);
    animation: aq-wobble var(--wobble, 4.2s) ease-in-out infinite;
}

/* Yukarı çıkış + drift (sağa sola savrulma) */
@keyframes aq-rise {
    0% {
        opacity: 0;
        transform: translate3d(0, 28px, 0) scale(var(--s0, .9));
    }

    10% {
        opacity: var(--alpha, .45);
    }

    35% {
        opacity: calc(var(--alpha, .45) * .70);
        transform: translate3d(calc(var(--drift, 22px) * .35), -26vh, 0) scale(var(--s1, 1.02));
    }

    70% {
        opacity: calc(var(--alpha, .45) * .45);
        transform: translate3d(calc(var(--drift, 22px) * -.55), -68vh, 0) scale(var(--s2, 1.10));
    }

    100% {
        opacity: 0;
        transform: translate3d(calc(var(--drift, 22px) * .85), -118vh, 0) scale(var(--s2, 1.12));
    }
}

/* Kabarcığın kendi mikro “salınımı” */
@keyframes aq-wobble {
    0% {
        transform: translate3d(0, 0, 0);
    }

    25% {
        transform: translate3d(6px, 0, 0);
    }

    50% {
        transform: translate3d(-10px, 0, 0);
    }

    75% {
        transform: translate3d(7px, 0, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

/* iOS Safari stabilite */
@supports (-webkit-touch-callout: none) {
    .spark-layer {
        contain: layout paint;
        transform: translateZ(0);
    }
}

/* motion azaltma */
@media (prefers-reduced-motion: reduce) {

    .aq-bubble,
    .aq-bubble-i {
        animation: none !important;
    }
}

/* iOS Safari stabilite */
@supports (-webkit-touch-callout: none) {
    .spark-layer {
        contain: layout paint;
        transform: translateZ(0);
    }
}

/* -------------------------
   COMPONENTS — Cards / Glow
------------------------- */
.glow-box {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(12, 16, 28, .72), rgba(10, 12, 20, .58));
    border: 1px solid rgba(231, 242, 255, .12);
    box-shadow: var(--sh-1);
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.glow-box::before {
    content: "";
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(circle at 20% 20%, rgba(34, 211, 238, .18), transparent 55%),
        radial-gradient(circle at 80% 40%, rgba(124, 58, 237, .16), transparent 55%),
        linear-gradient(120deg, rgba(231, 242, 255, 0) 0%, rgba(231, 242, 255, .10) 40%, rgba(231, 242, 255, 0) 70%);
    opacity: .75;
    filter: blur(10px);
    mix-blend-mode: screen;
    pointer-events: none;
}

.glow-box:hover {
    transform: translateY(-3px);
    border-color: rgba(34, 211, 238, .38);
    box-shadow: var(--sh-0);
}

/* Sections */
.section {
    margin-top: 40px;
    padding: 4px 2px;
}

.section-header {
    max-width: 720px;
    margin-bottom: 18px;
}

.section-header h2 {
    margin: 0 0 6px;
    font-size: 1.55rem;
    font-family: "Space Grotesk", system-ui, sans-serif;
    letter-spacing: .01em;
}

.section-header p {
    margin: 0;
    font-size: .95rem;
    color: var(--txt-1);
}

.section-dashboard,
.section-core,
.section-scenes,
.section-automation,
.section-products,
.section-contact {
    border-radius: var(--r-xl);
    border: 1px solid rgba(231, 242, 255, .10);
    background: linear-gradient(180deg, rgba(12, 16, 28, .50), rgba(7, 10, 16, .35));
    box-shadow: var(--sh-0);
    padding: 22px 18px 20px;
    position: relative;
    overflow: hidden;
}

.section-dashboard::before,
.section-core::before,
.section-scenes::before,
.section-automation::before,
.section-products::before,
.section-contact::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 0%, rgba(34, 211, 238, .10), transparent 55%),
        radial-gradient(circle at 88% 20%, rgba(124, 58, 237, .10), transparent 55%),
        linear-gradient(180deg, rgba(231, 242, 255, .06), transparent 30%);
    opacity: .9;
}

/* -------------------------
   HEADER / NAV
------------------------- */
.header {
    margin-bottom: 26px;
    position: relative;
    z-index: 100;
}

.header-glow {
    position: relative;
    border-radius: 999px;
    padding: 2px;
}

.header-glow::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 18% 50%, rgba(34, 211, 238, .28), transparent 65%),
        radial-gradient(circle at 82% 50%, rgba(124, 58, 237, .28), transparent 65%);
    filter: blur(16px);
    opacity: .55;
    z-index: 0;
}

/* glass header */
.header-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 18px;
    border-radius: 999px;

    background: linear-gradient(180deg, rgba(12, 16, 28, .70), rgba(10, 12, 20, .35));
    border: 1px solid rgba(231, 242, 255, .14);
    box-shadow: var(--sh-2);
    backdrop-filter: blur(14px);
}

.brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
}

.brand-logo {
    height: 74px;
    width: auto;
}

/* Desktop nav */
.nav {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: .9rem;
}

.nav a {
    position: relative;
    text-decoration: none;
    color: var(--txt-0);
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition:
        transform var(--t-fast),
        border-color var(--t-fast),
        background-color var(--t-fast),
        box-shadow var(--t-fast);
}

.nav a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 20% 50%, rgba(34, 211, 238, .22), transparent 62%),
        radial-gradient(circle at 80% 50%, rgba(124, 58, 237, .18), transparent 62%);
    opacity: 0;
    transition: opacity var(--t-fast);
    z-index: -1;
}

.nav a:hover {
    border-color: rgba(231, 242, 255, .18);
    background-color: rgba(231, 242, 255, .06);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
    transform: translateY(-1px);
}

.nav a:hover::before {
    opacity: 1;
}

.nav-cta {
    border-color: rgba(34, 211, 238, .28);
    background: rgba(34, 211, 238, .08);
}

.nav-cta:hover {
    border-color: rgba(34, 211, 238, .45);
    background: rgba(34, 211, 238, .12);
}

/* mobile toggle */
.nav-toggle {
    display: none;
}

.nav-toggle-label {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}

.nav-toggle-label span {
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: rgba(231, 242, 255, .85);
    transition: transform var(--t-fast), opacity var(--t-fast);
}

/* -------------------------
   NAV USER (dropdown)
------------------------- */
.nav-user {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 12px;
}

.nav-user-trigger {
    border: none;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.nav-user-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    line-height: 1;
}

.nav-user-hello {
    font-size: .88rem;
    color: var(--txt-1);
    font-weight: 500;
}

.nav-user-name {
    font-size: .95rem;
    font-weight: 800;
    color: var(--txt-0);
    letter-spacing: .01em;
}

.nav-user-avatar {
    width: 54px;
    height: 52px;
    border-radius: 999px;
    border: 1px solid rgba(231, 242, 255, .18);
    object-fit: cover;
    background: rgba(12, 16, 28, .9);
    box-shadow: 0 0 0 1px rgba(124, 58, 237, .18), 0 0 18px rgba(34, 211, 238, .10);
}

.nav-user-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 210px;
    border-radius: 18px;
    background: rgba(10, 12, 20, .70);
    border: 1px solid rgba(231, 242, 255, .14);
    box-shadow: var(--sh-1);
    padding: 10px;
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 200;
    backdrop-filter: blur(18px);
}

.nav-user.is-open .nav-user-menu {
    display: flex;
}

.nav-user-menu-item {
    display: block;
    width: 100%;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
    text-align: left;

    background: rgba(231, 242, 255, .05);
    border: 1px solid rgba(231, 242, 255, .10);
    color: var(--txt-0);

    transition: transform var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.nav-user-menu .nav-user-menu-item::before {
    content: none;
}

.nav-user-menu-item:hover {
    background: rgba(34, 211, 238, .08);
    border-color: rgba(34, 211, 238, .22);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
    transform: translateY(-1px);
}

.nav-user-menu-logout {
    background: rgba(124, 58, 237, .10);
    border-color: rgba(124, 58, 237, .22);
}

.nav-user-menu-logout:hover {
    background: rgba(248, 113, 113, .10);
    border-color: rgba(248, 113, 113, .28);
}

/* -------------------------
   HERO
------------------------- */
.hero {
    margin-top: 20px;
    border-radius: var(--r-xl);
    padding: 32px 26px 26px;
    background: linear-gradient(180deg, rgba(12, 16, 28, .62), rgba(7, 10, 16, .30));
    border: 1px solid rgba(231, 242, 255, .12);
    box-shadow: var(--sh-0);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 20%, rgba(34, 211, 238, .10), transparent 45%),
        radial-gradient(circle at 80% 35%, rgba(124, 58, 237, .12), transparent 45%),
        linear-gradient(120deg, rgba(231, 242, 255, .06) 1px, transparent 1px),
        linear-gradient(300deg, rgba(231, 242, 255, .04) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 120px 120px, 120px 120px;
    opacity: .95;
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 26px;
    align-items: center;
}

.hero-copy {
    max-width: 600px;
}

/* kicker */
.hero-kicker {
    margin: 0 0 10px;
    font-size: .82rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    font-family: "Space Grotesk", system-ui, sans-serif;
    background: linear-gradient(90deg, var(--a-1), var(--a-3), var(--a-0));
    -webkit-background-clip: text;
    color: transparent;
}

.hero h1 {
    margin: 0 0 10px;
    font-size: clamp(2.15rem, 3vw, 2.85rem);
    line-height: 1.12;
    font-family: "Space Grotesk", system-ui, sans-serif;
    color: var(--txt-0);
}

.hero h1 span {
    background: linear-gradient(120deg, var(--a-1), var(--a-0));
    -webkit-background-clip: text;
    color: transparent;
}

.hero-sub {
    margin: 0 0 16px;
    font-size: 1.0rem;
    color: var(--txt-1);
}

/* buttons */
.btn {
    border-radius: var(--r-pill);
    padding: 10px 18px;
    font-size: .95rem;
    font-weight: 800;
    border: 1px solid rgba(231, 242, 255, .14);
    color: var(--txt-0);
    background: rgba(231, 242, 255, .05);
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-shadow: 0 0 0 1px rgba(124, 58, 237, .12), 0 0 22px rgba(34, 211, 238, .08);
    transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.btn:hover {
    background: rgba(34, 211, 238, .10);
    border-color: rgba(34, 211, 238, .22);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, .20), 0 0 32px rgba(124, 58, 237, .12);
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(90deg, rgba(34, 211, 238, .16), rgba(124, 58, 237, .14));
    border-color: rgba(34, 211, 238, .18);
}

.btn-primary:hover {
    background: linear-gradient(90deg, rgba(34, 211, 238, .22), rgba(124, 58, 237, .20));
}

.btn-ghost {
    background: rgba(231, 242, 255, .04);
}

.full-width {
    width: 100%;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.hero-pills {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    font-size: .82rem;
}

.pill {
    border-radius: 18px;
    padding: 10px 12px;
    background: rgba(231, 242, 255, .04);
    border: 1px solid rgba(231, 242, 255, .10);
}

.pill-title {
    display: block;
    font-weight: 800;
    margin-bottom: 3px;
    color: var(--txt-0);
}

.pill-text {
    color: var(--txt-2);
}

/* Orbit */
.hero-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.orbit {
    position: relative;
    width: 270px;
    height: 270px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    border: 1px dashed rgba(231, 242, 255, .20);
    box-shadow: 0 0 28px rgba(0, 0, 0, .65);
}

.ring-1 {
    width: 270px;
    height: 270px;
    animation: orbit-spin-cw 22s linear infinite;
}

.ring-2 {
    width: 206px;
    height: 206px;
    animation: orbit-spin-ccw 22s linear infinite;
}

.ring-3 {
    width: 146px;
    height: 146px;
    animation: orbit-spin-cw 22s linear infinite;
}

.electron {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(231, 242, 255, .95);
    box-shadow:
        0 0 18px rgba(34, 211, 238, .55),
        0 0 24px rgba(124, 58, 237, .35);
}

.orbit-core {
    position: relative;
    z-index: 2;
    width: 136px;
    height: 136px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 20%, rgba(231, 242, 255, .95), rgba(12, 16, 28, .92));
    border: 1px solid rgba(231, 242, 255, .14);
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, .18),
        0 0 34px rgba(34, 211, 238, .16),
        0 0 46px rgba(124, 58, 237, .14);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    animation: core-glow 4.5s ease-in-out infinite;
}

.core-image {
    width: 100%;
    max-height: 78%;
    object-fit: contain;
}

.core-label {
    font-size: .7rem;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: rgba(231, 242, 255, .75);
}

.orbit-node {
    position: absolute;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(231, 242, 255, .92);
    border: 1px solid rgba(34, 211, 238, .18);
    font-size: .75rem;
    color: #0b1020;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .35);
}

.node-home {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    animation: node-pulse-home 22s linear infinite;
}

.node-office {
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    animation: node-pulse-office 22s linear infinite;
}

.node-site {
    bottom: 16px;
    left: 14%;
    animation: node-pulse-site 22s linear infinite;
}

.node-city {
    bottom: 16px;
    right: 14%;
    animation: node-pulse-city 22s linear infinite;
}

.hero-visual-note {
    font-size: .78rem;
    color: var(--txt-2);
    text-align: center;
}

/* -------------------------
   GRIDS
------------------------- */
.core-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.scene-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.tier-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.core-card,
.scene-card,
.tier-card,
.product-card,
.contact-info,
.login-strip,
.contact-form {
    padding: 16px 18px;
    font-size: .92rem;
    color: var(--txt-0);
}

/* -------------------------
   DASHBOARD (gauge + metrics)
------------------------- */
.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    justify-items: flex-start;
}

.dash-gauge-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dash-gauge {
    --gauge-value: 60;
    position: relative;
    width: 182px;
    height: 182px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 50%, rgba(7, 10, 16, 1) 0 58%, transparent 60%),
        conic-gradient(from -120deg,
            rgba(34, 211, 238, .85) 0 calc(var(--gauge-value) * 1%),
            rgba(124, 58, 237, .20) calc(var(--gauge-value) * 1%) 100%);
    box-shadow: 0 0 36px rgba(0, 0, 0, .80);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-gauge::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: inherit;
    border: 1px solid rgba(231, 242, 255, .14);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .75);
}

.dash-gauge-inner {
    position: relative;
    z-index: 1;
    width: 60%;
    height: 60%;
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 0%, rgba(231, 242, 255, .92), rgba(12, 16, 28, .95));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dash-gauge-value {
    font-size: 1.8rem;
    font-weight: 900;
    color: #0b1020;
}

.dash-gauge-unit {
    font-size: .8rem;
    color: rgba(231, 242, 255, .82);
}

.dash-gauge-label {
    margin-top: 8px;
    text-align: center;
    font-size: .92rem;
    color: var(--txt-1);
}

.dash-metrics-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.dash-metric {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-md);
    border: 1px solid rgba(231, 242, 255, .12);

    background:
        radial-gradient(circle at 0% 0%, rgba(34, 211, 238, .10), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(124, 58, 237, .10), rgba(10, 12, 20, .95));

    display: grid;
    grid-template-columns: minmax(0, 1.6fr) auto auto;
    align-items: baseline;
    column-gap: 8px;
    padding: 10px 12px;

    box-shadow: 0 16px 40px rgba(0, 0, 0, .60);
}

.dash-metric-label,
.dash-metric-value,
.dash-metric-unit {
    position: relative;
    z-index: 2;
}

.dash-metric-label {
    font-size: .86rem;
    color: var(--txt-1);
}

.dash-metric-value {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--txt-0);
}

.dash-metric-unit {
    font-size: .8rem;
    color: var(--txt-2);
}

.dash-metric::before {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: 1;
    background-image:
        linear-gradient(120deg,
            rgba(231, 242, 255, 0) 0%,
            rgba(231, 242, 255, .10) 35%,
            rgba(34, 211, 238, .16) 50%,
            rgba(231, 242, 255, 0) 72%),
        radial-gradient(circle at 20% 0%, rgba(124, 58, 237, .14), transparent 55%);
    background-size: 220% 120%, 180% 180%;
    background-position: -60% 0%, 0% 0%;
    mix-blend-mode: screen;
    opacity: .7;
    pointer-events: none;
    animation: dash-metric-glow 9s ease-in-out infinite;
}

.dash-metric::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    pointer-events: none;
    animation: dash-metric-border 8s ease-in-out infinite;
}

@keyframes dash-metric-glow {
    0% {
        background-position: -60% 0%, 0% 0%;
    }

    50% {
        background-position: 20% 0%, 30% 0%;
    }

    100% {
        background-position: 80% 0%, 60% 0%;
    }
}

@keyframes dash-metric-border {

    0%,
    100% {
        border-color: rgba(231, 242, 255, .12);
        box-shadow: 0 0 18px rgba(0, 0, 0, .65);
    }

    50% {
        border-color: rgba(34, 211, 238, .22);
        box-shadow: 0 0 28px rgba(124, 58, 237, .12);
    }
}

/* -------------------------
   HOME/OFFICE PANEL
------------------------- */
.section-homeoffice {
    margin-top: 40px;
}

.homeoffice-card .section-header {
    margin-bottom: 14px;
}

.homeoffice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ho-tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 12px;
    border-radius: var(--r-lg);
    background: rgba(231, 242, 255, .03);
    border: 1px solid rgba(231, 242, 255, .10);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
}

.ho-tile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ho-tile-title {
    display: block;
    font-size: 1rem;
    font-weight: 900;
}

.ho-tile-sub {
    display: block;
    font-size: .78rem;
    color: var(--txt-2);
}

.ho-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(34, 211, 238, .35);
    background: radial-gradient(circle, rgba(231, 242, 255, 1) 0, rgba(34, 211, 238, .85) 55%, rgba(124, 58, 237, .25) 100%);
    box-shadow: 0 0 14px rgba(34, 211, 238, .22);
}

.ho-rooms {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    margin-bottom: 4px;
}

.ho-room {
    flex: 1 1 0;
    border-radius: 16px;
    padding: 7px 8px 6px;
    border: 1px solid rgba(231, 242, 255, .10);
    background: rgba(10, 12, 20, .70);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    cursor: pointer;
    transition: background var(--t-mid), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.ho-room-icon,
.ho-chip-icon {
    display: inline-flex;
    width: 20px;
    justify-content: center;
}

.ho-room-name {
    font-size: .78rem;
    color: var(--txt-1);
}

.ho-room-light.is-on {
    background: linear-gradient(135deg, rgba(34, 211, 238, .20), rgba(124, 58, 237, .18));
    border-color: rgba(34, 211, 238, .22);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, .12), 0 18px 50px rgba(0, 0, 0, .55);
    transform: translateY(-1px);
}

.ho-room-light.is-on .ho-room-name {
    color: var(--txt-0);
}

.ho-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    font-size: .84rem;
}

.ho-row+.ho-row {
    border-top: 1px solid rgba(231, 242, 255, .08);
    padding-top: 6px;
}

.ho-row-label {
    color: var(--txt-1);
}

.ho-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 6px 10px;
    border: 1px solid rgba(231, 242, 255, .10);
    background: rgba(10, 12, 20, .70);
    font-size: .8rem;
    color: var(--txt-0);
    cursor: pointer;
    width: 170px;
    justify-content: space-between;
    transition: background var(--t-mid), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.ho-chip-static {
    cursor: default;
}

.ho-chip:hover:not(.ho-chip-static) {
    background: rgba(231, 242, 255, .06);
    border-color: rgba(34, 211, 238, .18);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
    transform: translateY(-1px);
}

.ho-chip-value {
    white-space: nowrap;
}

.ho-chip-lock.is-unlocked {
    border-color: rgba(34, 211, 238, .30);
    background: linear-gradient(135deg, rgba(34, 211, 238, .25), rgba(124, 58, 237, .18));
    color: var(--txt-0);
}

/* -------------------------
   CONTACT (minimal)
------------------------- */
.section-contact-minimal {
    margin-top: 32px;
}

.contact-card-minimal {
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, rgba(10, 12, 20, .92), rgba(7, 10, 16, .92));
    border: 1px solid rgba(231, 242, 255, .12);
    box-shadow: var(--sh-0);
    padding: 18px 18px 16px;
}

.contact-minimal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 18px;
    align-items: flex-start;
}

.contact-minimal-info h2 {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-family: "Space Grotesk", system-ui, sans-serif;
}

.contact-minimal-info p {
    margin: 0 0 6px;
    font-size: .92rem;
    color: var(--txt-1);
}

.contact-minimal-line {
    font-size: .82rem;
}

.contact-minimal-line strong {
    color: var(--txt-0);
}

.contact-minimal-line a {
    color: rgba(34, 211, 238, .90);
    text-decoration: none;
}

.contact-minimal-line a:hover {
    text-decoration: underline;
}

.contact-form-minimal {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-form-minimal input,
.contact-form-minimal textarea {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(231, 242, 255, .12);
    background: rgba(10, 12, 20, .75);
    color: var(--txt-0);
    font-size: 16px;
    /* iOS zoom yok */
    outline: none;
}

.contact-form-minimal input:focus,
.contact-form-minimal textarea:focus {
    border-color: rgba(34, 211, 238, .22);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, .12);
}

.contact-form-minimal textarea {
    border-radius: 18px;
    min-height: 70px;
    resize: vertical;
}

.contact-form-minimal input::placeholder,
.contact-form-minimal textarea::placeholder {
    color: var(--txt-2);
}

/* -------------------------
   FOOTER + PARTNERS
------------------------- */
.footer {
    margin-top: 40px;
    padding-top: 16px;
    border-top: 1px solid rgba(231, 242, 255, .10);
    text-align: center;
    font-size: .78rem;
    color: var(--txt-2);
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.footer-links a {
    color: var(--txt-1);
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer-partners {
    margin-bottom: 24px;
}

.footer-partners h2 {
    margin: 0 0 8px;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--txt-1);
}

.partners-slider {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(231, 242, 255, .10);
    background: rgba(10, 12, 20, .55);
    padding: 6px 0;
    white-space: nowrap;
}

.partners-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 24px;
    padding-inline: 18px;
    width: max-content;
    animation: partners-scroll 26s linear infinite;
    will-change: transform;
}

.partners-track img {
    height: 32px;
    width: auto;
    object-fit: contain;
    opacity: .9;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, .60));
    transition: opacity var(--t-fast), transform var(--t-fast);
}

.partners-track img:hover {
    opacity: 1;
    transform: translateY(-1px) scale(1.03);
}

/* -------------------------
   ANIMATIONS
------------------------- */
@keyframes orbit-spin-cw {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes orbit-spin-ccw {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes core-glow {

    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(34, 211, 238, .14),
            0 0 34px rgba(34, 211, 238, .14),
            0 0 46px rgba(124, 58, 237, .12);
    }

    50% {
        box-shadow:
            0 0 0 1px rgba(34, 211, 238, .18),
            0 0 44px rgba(34, 211, 238, .20),
            0 0 70px rgba(124, 58, 237, .16);
    }
}

@keyframes node-pulse-home {

    0%,
    4% {
        box-shadow: 0 0 22px rgba(34, 211, 238, .28);
        border-color: rgba(34, 211, 238, .20);
        transform: translateX(-50%) scale(1.08);
    }

    8%,
    96% {
        box-shadow: 0 0 14px rgba(0, 0, 0, .35);
        border-color: rgba(231, 242, 255, .14);
        transform: translateX(-50%) scale(1.00);
    }

    100% {
        box-shadow: 0 0 22px rgba(34, 211, 238, .28);
        border-color: rgba(34, 211, 238, .20);
        transform: translateX(-50%) scale(1.08);
    }
}

@keyframes node-pulse-office {

    24%,
    28% {
        box-shadow: 0 0 22px rgba(124, 58, 237, .26);
        border-color: rgba(124, 58, 237, .18);
        transform: translateY(-50%) scale(1.08);
    }

    30%,
    100% {
        box-shadow: 0 0 14px rgba(0, 0, 0, .35);
        border-color: rgba(231, 242, 255, .14);
        transform: translateY(-50%) scale(1.00);
    }
}

@keyframes node-pulse-site {

    60%,
    64% {
        box-shadow: 0 0 22px rgba(34, 211, 238, .22);
        border-color: rgba(34, 211, 238, .18);
        transform: scale(1.08);
    }

    66%,
    100% {
        box-shadow: 0 0 14px rgba(0, 0, 0, .35);
        border-color: rgba(231, 242, 255, .14);
        transform: scale(1.00);
    }
}

@keyframes node-pulse-city {

    86%,
    90% {
        box-shadow: 0 0 22px rgba(124, 58, 237, .22);
        border-color: rgba(124, 58, 237, .18);
        transform: scale(1.08);
    }

    92%,
    100% {
        box-shadow: 0 0 14px rgba(0, 0, 0, .35);
        border-color: rgba(231, 242, 255, .14);
        transform: scale(1.00);
    }
}

@keyframes partners-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes dash-metric-glow {
    0% {
        background-position: -60% 0%, 0% 0%;
    }

    50% {
        background-position: 20% 0%, 30% 0%;
    }

    100% {
        background-position: 80% 0%, 60% 0%;
    }
}

/* -------------------------
   RESPONSIVE
------------------------- */
@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
    }

    .hero-pills {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .scene-grid {
        grid-template-columns: 1fr;
    }

    .tier-grid,
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .homeoffice-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .header-inner {
        padding-inline: 12px;
        justify-content: center;
        position: relative;
        flex-direction: column;
        gap: 4px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .brand {
        margin: 0;
    }

    .brand-logo {
        height: 90px;
    }

    .nav-toggle-label {
        display: flex;
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
    }

    .nav {
        position: fixed;
        inset: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 140px 18px 24px;
        background: linear-gradient(180deg, rgba(7, 10, 16, .98) 0%, rgba(10, 12, 20, .98) 60%, rgba(7, 10, 16, .98) 100%);
        border: none;
        box-shadow: none;
        z-index: 4;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity var(--t-fast), transform var(--t-fast);
    }

    .nav::before {
        content: "";
        position: absolute;
        top: 32px;
        left: 50%;
        transform: translateX(-50%);
        width: 160px;
        height: 60px;
        background-image: url("../assets/img/fafuer-logo.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        pointer-events: none;
        opacity: .98;
        filter: drop-shadow(0 0 16px rgba(34, 211, 238, .10));
    }

    .nav-toggle:checked~.nav {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* iOS/Safari: varsa body:has ile kilitle, yoksa da sorun değil */
    body:has(.nav-toggle:checked) {
        overflow: hidden;
    }

    .nav a {
        width: 100%;
        color: var(--txt-0);
        font-size: 1rem;
        padding: 10px 12px;
        border-radius: 999px;
        background: rgba(231, 242, 255, .05);
        border: 1px solid rgba(231, 242, 255, .12);
        box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
        transform: none;
    }

    .nav a:hover {
        background: rgba(34, 211, 238, .10);
        border-color: rgba(34, 211, 238, .18);
        box-shadow: 0 12px 32px rgba(0, 0, 0, .60);
        transform: none;
    }

    /* nav-user mobile */
    .nav-user {
        order: 1;
        margin: 6px auto 0;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .nav-user-trigger {
        flex-direction: column-reverse;
    }

    .nav-user-avatar {
        width: 72px;
        height: 72px;
    }

    .nav-user-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.2;
    }

    .nav-user-hello {
        color: rgba(34, 211, 238, .85);
    }

    .nav-user-name {
        color: var(--txt-0);
        font-size: 1rem;
    }

    .nav-user-menu {
        position: static;
        width: 100%;
        margin-top: 4px;
    }

    .nav-user-menu-item {
        text-align: center;
    }

    /* HERO & GRIDS */
    .hero {
        padding: 24px 18px 18px;
        margin-top: 20px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        margin-top: 8px;
    }

    .hero-pills,
    .core-grid,
    .scene-grid,
    .tier-grid,
    .products-grid {
        grid-template-columns: 1fr;
    }

    .homeoffice-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ho-tile {
        padding: 12px 10px 10px;
    }

    .ho-chip {
        width: 100%;
        justify-content: space-between;
    }

    .ho-rooms {
        gap: 6px;
        flex-wrap: wrap;
    }

    /* Contact minimal */
    .contact-card-minimal {
        padding: 14px 12px 12px;
        border-radius: 22px;
    }

    .contact-minimal-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* partners */
    .footer-partners {
        margin-bottom: 16px;
    }

    .partners-slider {
        padding: 4px 0;
        border-radius: 18px;
    }

    .partners-track {
        gap: 16px;
        padding-inline: 12px;
        animation: partners-scroll 22s linear infinite;
    }

    .partners-track img {
        height: 22px;
    }

    .page {
        padding-inline: 10px;
    }

    /* dashboard gauge center */
    .dash-gauge-block {
        align-items: center;
        text-align: center;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.9rem;
    }
}

/* === BRAND LOGO: MOR AURA (header logo altı) === */
.brand {
    position: relative;
    /* pseudo element için */
}

/* === BRAND LOGO: v2 — strong core + soft spread (senin istediğin) === */
.brand::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -36%);
    width: 150px;
    /* ✅ çap küçüldü */
    height: 150px;
    border-radius: 999px;
    pointer-events: none;
    z-index: 0;

    /* ✅ core eski kadar güçlü, dış katmanlar yumuşak */
    background:
        radial-gradient(circle at 50% 46%,
            rgba(255, 255, 255, .92) 0%,
            /* ✅ ESKİ CORE */
            rgba(231, 242, 255, .58) 18%,
            /* ✅ ESKİ CORE */
            rgba(167, 139, 250, .26) 40%,
            /* halo biraz kısık */
            rgba(0, 0, 0, 0) 66%),
        radial-gradient(circle at 50% 54%,
            rgba(167, 139, 250, .46) 0%,
            rgba(124, 58, 237, .34) 40%,
            rgba(124, 58, 237, .12) 64%,
            rgba(0, 0, 0, 0) 86%),
        radial-gradient(circle at 50% 50%,
            rgba(34, 211, 238, .18) 0%,
            rgba(34, 211, 238, .08) 44%,
            rgba(0, 0, 0, 0) 78%);

    /* ✅ yayılım arttı, ama core etkili */
    filter: blur(24px) saturate(1.12);
    opacity: .78;
    mix-blend-mode: screen;

    /* ✅ daha sakin nefes */
    animation: brand-aura-breathe 9s ease-in-out infinite;
}

@keyframes brand-aura-breathe {

    0%,
    100% {
        transform: translate(-50%, -36%) scale(1);
        opacity: .74;
        filter: blur(26px) saturate(1.10);
    }

    50% {
        transform: translate(-50%, -36%) scale(1.03);
        opacity: .84;
        filter: blur(22px) saturate(1.16);
    }
}

@media (max-width: 768px) {
    .brand::after {
        width: 132px;
        height: 132px;
        filter: blur(20px) saturate(1.10);
        opacity: .80;
    }
}

/* logo üstte kalsın */
.brand-logo {
    position: relative;
    z-index: 1;
    filter:
        drop-shadow(0 0 10px rgba(124, 58, 237, .55)) drop-shadow(0 0 24px rgba(124, 58, 237, .35));
}

.brand-logo {
    filter:
        drop-shadow(0 0 10px rgba(124, 58, 237, .55)) drop-shadow(0 0 22px rgba(34, 211, 238, .20));
}

/* mobilde glow biraz küçülsün */
@media (max-width: 768px) {
    .brand::after {
        width: 130px;
        height: 130px;
        filter: blur(16px);
        opacity: .85;
    }
}
/* =========================================================
   MOBILE NAV FIX (OBSIDIAN)
   - Hamburger görünür + mor ton
   - Menü açılınca kesin görünür (z-index + bg + opacity)
   - 3 çizgi -> X dönüşümü
========================================================= */
@media (max-width: 768px) {

    /* Hamburger (3 çizgi) görünür */
    .nav-toggle-label {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        cursor: pointer !important;

        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;

        z-index: 10002 !important;
        /* menünün üstünde */
    }

    .nav-toggle-label span {
        width: 26px !important;
        height: 2px !important;
        border-radius: 999px !important;

        /* ✅ mor ton uyum */
        background: linear-gradient(90deg, rgba(167, 139, 250, .95), rgba(34, 211, 238, .85)) !important;
        box-shadow: 0 0 14px rgba(124, 58, 237, .22) !important;

        transition: transform 180ms ease, opacity 180ms ease !important;
        transform-origin: center !important;
    }

    /* Menü overlay kesin görünür */
    .nav {
        position: fixed !important;
        inset: 0 !important;
        z-index: 10001 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        padding: 150px 18px 24px !important;
        /* logo için boşluk */
        gap: 10px !important;

        /* ✅ görünürlük fix */
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(-10px) !important;

        /* ✅ arka plan koyu + mor aura */
        background:
            radial-gradient(circle at 18% 12%, rgba(124, 58, 237, .18), transparent 55%),
            radial-gradient(circle at 82% 22%, rgba(34, 211, 238, .10), transparent 55%),
            linear-gradient(180deg, rgba(7, 10, 16, .985) 0%, rgba(10, 12, 20, .985) 60%, rgba(7, 10, 16, .985) 100%) !important;

        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;

        transition: opacity var(--t-fast), transform var(--t-fast) !important;
    }

    /* Açıkken */
    .nav-toggle:checked~.nav {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    /* Menü üst logo */
    .nav::before {
        content: "" !important;
        position: absolute !important;
        top: 34px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;

        width: 170px !important;
        height: 64px !important;

        background-image: url("../assets/img/fafuer-logo.png") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;

        opacity: .98 !important;
        pointer-events: none !important;

        filter:
            drop-shadow(0 0 14px rgba(124, 58, 237, .22)) drop-shadow(0 0 24px rgba(34, 211, 238, .10)) !important;
    }

    /* Linkler görünür + premium */
    .nav a {
        width: 100% !important;
        font-size: 1rem !important;
        color: #fff !important;

        padding: 12px 14px !important;
        border-radius: 16px !important;

        background: rgba(231, 242, 255, .06) !important;
        border: 1px solid rgba(231, 242, 255, .14) !important;

        box-shadow: 0 10px 26px rgba(0, 0, 0, .55) !important;
        transform: none !important;
    }

    .nav a:hover {
        background:
            radial-gradient(circle at 20% 0%, rgba(124, 58, 237, .18), transparent 55%),
            rgba(34, 211, 238, .10) !important;
        border-color: rgba(34, 211, 238, .22) !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .60) !important;
    }

    /* Menü açıkken body kaymasın */
    body:has(.nav-toggle:checked) {
        overflow: hidden !important;
    }

    /* ✅ 3 çizgi -> X */
    .nav-toggle:checked~.nav-toggle-label span:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }

    .nav-toggle:checked~.nav-toggle-label span:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(.6) !important;
    }

    .nav-toggle:checked~.nav-toggle-label span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }
}

/* =========================================================
   MOBILE NAV — ONLY FIRST LINK VISIBLE FIX
   (nav overlay kesin full-screen olsun)
========================================================= */
@media (max-width: 768px) {

    /* ✅ nav'ı header içinde kalmaktan çıkar, full screen yap */
    header.header .header-inner .nav {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        padding: 150px 18px 24px !important;
        gap: 10px !important;

        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;

        z-index: 10001 !important;

        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(-10px) !important;

        background:
            radial-gradient(circle at 18% 12%, rgba(124, 58, 237, .18), transparent 55%),
            radial-gradient(circle at 82% 22%, rgba(34, 211, 238, .10), transparent 55%),
            linear-gradient(180deg, rgba(7, 10, 16, .985) 0%, rgba(10, 12, 20, .985) 60%, rgba(7, 10, 16, .985) 100%) !important;
    }

    /* ✅ checkbox açınca görünür */
    header.header .header-inner .nav-toggle:checked~.nav {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    /* ✅ linkler tek tek satır olsun (bazı cihazlarda inline kalıp kırpıyor) */
    header.header .header-inner .nav a {
        display: block !important;
        width: 100% !important;
    }
}
/* ✅ 3 çizgi hamburger -> X (obsidian) */
@media (max-width: 768px) {
    .nav-toggle-label {
        display: flex !important;
    }

    .nav-toggle-label span {
        transition: transform 180ms ease, opacity 180ms ease !important;
    }

    .nav-toggle:checked~.nav-toggle-label span:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }

    .nav-toggle:checked~.nav-toggle-label span:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(.6) !important;
    }

    .nav-toggle:checked~.nav-toggle-label span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }
}

/* iOS Safari: fixed + blur + blend katman bug fix */
@supports (-webkit-touch-callout: none) {
    body::before {
        filter: blur(12px) !important;
        opacity: .85 !important;
    }

    body::after {
        filter: none !important;
        opacity: .26 !important;
    }

    /* devre deseni daha stabil */
    .spark-layer {
        contain: layout paint;
        transform: translateZ(0);
    }
}