/* =====================================================
   Vibe Coding — Liquid Glass Theme
   Mevcut style.css'i BOZMAZ. body.vibe scope'unda calisir.
   Sayfalar bu temaya tek tek gecirilir, geri donus kolaydir.
   ===================================================== */

/* === Font: Instrument Serif (heading), Inter (mevcut, body) === */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Serif+Display:ital@0;1&display=swap');

/* === DESIGN TOKENS === */
body.vibe {
    /* Surface */
    --vg-bg:           #000000;
    --vg-bg-elevated:  #0a0a0f;
    --vg-bg-overlay:   rgba(0, 0, 0, 0.6);

    /* Text */
    --vg-text:         #ffffff;
    --vg-text-muted:   rgba(255, 255, 255, 0.7);
    --vg-text-soft:    rgba(255, 255, 255, 0.6);
    --vg-text-subtle:  rgba(255, 255, 255, 0.5);
    --vg-text-faint:   rgba(255, 255, 255, 0.4);
    --vg-text-ghost:   rgba(255, 255, 255, 0.05);

    /* Glass */
    --vg-glass-bg:           rgba(255, 255, 255, 0.01);
    --vg-glass-bg-hover:     rgba(255, 255, 255, 0.05);
    --vg-glass-border-top:   rgba(255, 255, 255, 0.45);
    --vg-glass-border-mid:   rgba(255, 255, 255, 0.15);
    --vg-glass-shadow-inset: rgba(255, 255, 255, 0.10);
    --vg-glass-divider:      rgba(255, 255, 255, 0.10);

    /* Accent (Vibe purple kept for CTAs) */
    --vg-accent:       #a78bfa;
    --vg-accent-deep:  #7c3aed;

    /* Backgrounds */
    --vg-radial-soft:  radial-gradient(ellipse at top, rgba(255,255,255,0.03) 0%, transparent 70%);
    --vg-radial-mid:   radial-gradient(ellipse at center, rgba(255,255,255,0.02) 0%, transparent 60%);

    /* Fonts */
    --vg-font-display: 'Instrument Serif', 'DM Serif Display', 'Cormorant Garamond', Georgia, serif;
    --vg-font-body:    'Inter', 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* === LIGHT THEME (sonradan refine edilebilir) === */
html[data-theme="light"] body.vibe {
    --vg-bg:           #fafbfc;
    --vg-bg-elevated:  #ffffff;
    --vg-bg-overlay:   rgba(255, 255, 255, 0.6);

    --vg-text:         #0a0a0f;
    --vg-text-muted:   rgba(10, 10, 15, 0.7);
    --vg-text-soft:    rgba(10, 10, 15, 0.6);
    --vg-text-subtle:  rgba(10, 10, 15, 0.5);
    --vg-text-faint:   rgba(10, 10, 15, 0.4);
    --vg-text-ghost:   rgba(10, 10, 15, 0.05);

    --vg-glass-bg:           rgba(255, 255, 255, 0.4);
    --vg-glass-bg-hover:     rgba(255, 255, 255, 0.7);
    --vg-glass-border-top:   rgba(255, 255, 255, 0.9);
    --vg-glass-border-mid:   rgba(0, 0, 0, 0.08);
    --vg-glass-shadow-inset: rgba(255, 255, 255, 0.5);
    --vg-glass-divider:      rgba(0, 0, 0, 0.08);

    --vg-radial-soft:  radial-gradient(ellipse at top, rgba(0,0,0,0.04) 0%, transparent 70%);
    --vg-radial-mid:   radial-gradient(ellipse at center, rgba(0,0,0,0.03) 0%, transparent 60%);
}

/* === BODY === */
body.vibe {
    background: var(--vg-bg);
    color: var(--vg-text);
    font-family: var(--vg-font-body);
}

/* === DISPLAY TYPOGRAPHY === */
.vibe-display {
    font-family: var(--vg-font-display);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.vibe-display em,
.vibe-italic {
    font-family: var(--vg-font-display);
    font-style: italic;
    font-weight: 400;
}
.vibe-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vg-text-faint);
}

/* === LIQUID GLASS — core class === */
.liquid-glass {
    background: var(--vg-glass-bg);
    background-blend-mode: luminosity;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: none;
    box-shadow: inset 0 1px 1px var(--vg-glass-shadow-inset);
    position: relative;
    overflow: hidden;
}
.liquid-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.4px;
    background: linear-gradient(
        180deg,
        var(--vg-glass-border-top) 0%,
        var(--vg-glass-border-mid) 20%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0) 60%,
        var(--vg-glass-border-mid) 80%,
        var(--vg-glass-border-top) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

/* Shape modifiers */
.lg-pill   { border-radius: 9999px; }
.lg-card   { border-radius: 24px; }
.lg-soft   { border-radius: 16px; }
.lg-tight  { border-radius: 12px; }

/* Hover */
.liquid-glass-hover { transition: background .3s ease; }
.liquid-glass-hover:hover { background: var(--vg-glass-bg-hover); }

/* === SECTIONS === */
.vibe-section {
    background: var(--vg-bg);
    position: relative;
    overflow: hidden;
}
.vibe-section--pad-lg { padding: 7rem 1.5rem; }
.vibe-section--pad-md { padding: 5rem 1.5rem; }
.vibe-section--pad-sm { padding: 3rem 1.5rem; }
@media (max-width: 768px) {
    .vibe-section--pad-lg { padding: 4.5rem 1.25rem; }
    .vibe-section--pad-md { padding: 3rem 1.25rem; }
}

.vibe-radial-top::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--vg-radial-soft);
    pointer-events: none;
    z-index: 0;
}
.vibe-radial-mid::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--vg-radial-mid);
    pointer-events: none;
    z-index: 0;
}

.vibe-container       { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; }
.vibe-container-tight { max-width: 1024px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; }
.vibe-container-wide  { max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; }

/* === GRID HELPERS === */
.vibe-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}
@media (max-width: 768px) {
    .vibe-grid-2 { grid-template-columns: 1fr; gap: 1.5rem; }
}

.vibe-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* === SCROLL ANIMATIONS — IntersectionObserver === */
.vg-anim {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1);
    will-change: opacity, transform;
}
.vg-anim.is-visible { opacity: 1; transform: none; }

.vg-anim-fade  { transform: translateY(20px); }
.vg-anim-up    { transform: translateY(60px); }
.vg-anim-left  { transform: translateX(-40px); }
.vg-anim-right { transform: translateX(40px); }

.vg-delay-1 { transition-delay: 0.10s; }
.vg-delay-2 { transition-delay: 0.20s; }
.vg-delay-3 { transition-delay: 0.30s; }
.vg-delay-4 { transition-delay: 0.40s; }
.vg-delay-5 { transition-delay: 0.50s; }

@media (prefers-reduced-motion: reduce) {
    .vg-anim { transition: none; opacity: 1; transform: none; }
}

/* === HERO VIDEO === */
.vibe-hero {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--vg-bg);
}
.vibe-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    pointer-events: none;
    z-index: 0;
}
.vibe-hero-video[data-fade-in] {
    opacity: 0;
    transition: opacity .5s ease;
}
.vibe-hero-fade-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;
    background: linear-gradient(180deg, transparent 0%, var(--vg-bg) 100%);
    pointer-events: none;
    z-index: 1;
}

/* === BUTTONS === */
.vibe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 28px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform .2s ease, background .3s ease;
    font-family: inherit;
}
.vibe-btn-primary {
    background: var(--vg-text);
    color: var(--vg-bg);
}
.vibe-btn-primary:hover { transform: scale(1.03); }
.vibe-btn-primary:active { transform: scale(0.97); }

.vibe-btn-glass {
    /* Boş — .liquid-glass + .lg-pill ile birleştirilir */
    color: var(--vg-text);
    background: var(--vg-glass-bg);
}
.vibe-btn-glass:hover { background: var(--vg-glass-bg-hover); }

/* Circle button (inline submit) */
.vibe-circle-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--vg-text);
    color: var(--vg-bg);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
    flex-shrink: 0;
}
.vibe-circle-btn:hover { transform: scale(1.06); }

/* === GLASS INPUT === */
.vibe-glass-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--vg-text);
    font-size: 14px;
    width: 100%;
    padding: 12px 4px;
    font-family: inherit;
}
.vibe-glass-input::placeholder { color: var(--vg-text-faint); }

/* === DIVIDER === */
.vibe-divider {
    width: 100%;
    height: 1px;
    background: var(--vg-glass-divider);
    border: none;
    margin: 0;
}

/* === LINK === */
.vibe-link {
    color: var(--vg-text);
    text-decoration: none;
    transition: opacity .2s ease;
}
.vibe-link:hover { opacity: 0.7; }

/* === GLASS SOCIAL ICON === */
.vibe-social-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding-bottom: 3rem;
    position: relative;
    z-index: 2;
}
.vibe-social-btn {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vg-text-muted);
    text-decoration: none;
    transition: color .2s, background .3s;
}
.vibe-social-btn:hover { color: var(--vg-text); background: var(--vg-glass-bg-hover); }

/* === RESPONSIVE TYPOGRAPHY === */
.vibe-hero-title {
    font-family: var(--vg-font-display);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--vg-text);
    font-size: clamp(2.75rem, 9vw, 8rem);
    margin: 0 0 1.5rem;
}
.vibe-hero-subtitle {
    color: var(--vg-text);
    font-size: clamp(0.875rem, 1.4vw, 1rem);
    line-height: 1.7;
    max-width: 36rem;
    margin: 0 auto 1.5rem;
    padding: 0 1rem;
}

.vibe-h2 {
    font-family: var(--vg-font-display);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--vg-text);
    font-size: clamp(2rem, 5vw, 4.5rem);
    margin: 0 0 1rem;
}
.vibe-h3 {
    font-family: var(--vg-font-display);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--vg-text);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin: 0 0 0.75rem;
}
.vibe-prose {
    color: var(--vg-text-muted);
    font-size: 1rem;
    line-height: 1.7;
}

/* === TAG / LABEL === */
.vibe-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vg-text-faint);
}

/* === CARD === */
.vibe-card {
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}
.vibe-card-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}
.vibe-card-media img,
.vibe-card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(.2,.6,.2,1);
}
.vibe-card:hover .vibe-card-media img,
.vibe-card:hover .vibe-card-media video { transform: scale(1.05); }

.vibe-card-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 60%);
    pointer-events: none;
}
.vibe-card-body { padding: 1.5rem; }
@media (min-width: 768px) {
    .vibe-card-body { padding: 2rem; }
}

/* === MOBILE TWEAKS === */
@media (max-width: 768px) {
    .vibe-section--pad-lg,
    .vibe-section--pad-md { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* =====================================================
   LEGACY OVERRIDE — Mevcut class'lari Vibe-Glass temasina cevir
   body.vibe scope'unda calisir, baska temalar etkilenmez.
   ===================================================== */

/* === NAVBAR — Full-width Glass Bar (kenardan kenara) ===
   Mevcut style.css'in navbar'ini tamamen override eder. Top: 0,
   sayfanın üstüne yapışik, arkasinda hero video net gorunur. */
body.vibe .navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(18px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
    border: none !important;
    border-bottom: 1px solid var(--vg-glass-border-mid) !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 64px;
    padding: 10px 20px !important;
    z-index: 10000;
}

/* Light tema — beyaza yakin glass */
html[data-theme="light"] body.vibe .navbar {
    background: rgba(255, 255, 255, 0.55) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06) !important;
}

/* nav-inner — sadece flex container (pill artık navbar'in kendisi) */
body.vibe .nav-inner {
    height: auto !important;
    min-height: 44px;
    padding: 0 !important;
    max-width: 1320px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.vibe .nav-inner::before { display: none !important; }

/* nav-right pill icine sigsin */
body.vibe .nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0;
}
body.vibe .nav-right .btn {
    height: 38px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    border-radius: 9999px !important;
}
body.vibe .nav-right .theme-toggle {
    width: 38px !important;
    height: 38px !important;
}
body.vibe .nav-lang {
    display: flex !important;
    gap: 0 !important;
    padding: 3px !important;
    background: rgba(255,255,255,0.04) !important;
    border-radius: 9999px !important;
}
body.vibe .nav-lang a {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 11px !important;
    font-weight: 600;
    text-decoration: none;
    border-radius: 9999px !important;
}
body.vibe .nav-logo-img {
    filter: none;
    height: 36px !important;
    width: auto !important;
    max-width: 180px;
    object-fit: contain;
    display: block;
}

/* Mobile menu header logo (mobil panel ici) — biraz daha kucuk */
body.vibe .mobile-nav-header img {
    height: 32px !important;
    width: auto !important;
    max-width: 160px;
    object-fit: contain;
}

/* === LOGO theme switching ===
   Default (dark theme): logodark gosterilir, logolight gizli
   Light theme: logolight gosterilir, logodark gizli */
.nav-logo .logo-dark,
.mobile-nav-header .logo-dark { display: block !important; }
.nav-logo .logo-light,
.mobile-nav-header .logo-light { display: none !important; }
html[data-theme="light"] .nav-logo .logo-dark,
html[data-theme="light"] .mobile-nav-header .logo-dark { display: none !important; }
html[data-theme="light"] .nav-logo .logo-light,
html[data-theme="light"] .mobile-nav-header .logo-light { display: block !important; }

/* Nav-logo wrapper — flex align */
body.vibe .nav-logo {
    display: inline-flex !important;
    align-items: center;
    height: 100%;
    text-decoration: none;
    flex-shrink: 0;
}

/* Mobile breakpoint — biraz daha kucuk */
@media (max-width: 768px) {
    body.vibe .nav-logo-img {
        height: 30px !important;
        max-width: 140px;
    }
}
body.vibe .nav-links a,
body.vibe .nav-dropdown-toggle {
    color: var(--vg-text-muted) !important;
    font-weight: 500;
    background: transparent !important;
}
body.vibe .nav-links a:hover,
body.vibe .nav-dropdown-toggle:hover,
body.vibe .nav-links a.active,
body.vibe .nav-dropdown-toggle.active { color: var(--vg-text) !important; }

body.vibe .nav-dropdown-menu {
    background: rgba(20, 20, 24, 0.92) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--vg-glass-border-mid) !important;
    border-radius: 16px !important;
}
body.vibe .nav-dropdown-menu a {
    color: var(--vg-text-muted) !important;
    border-radius: 8px;
}
body.vibe .nav-dropdown-menu a:hover {
    background: var(--vg-glass-bg-hover) !important;
    color: var(--vg-text) !important;
}
body.vibe .nav-dropdown-divider { background: var(--vg-glass-divider) !important; }
body.vibe .nav-dropdown-label { color: var(--vg-text-faint) !important; }

body.vibe .nav-right .btn {
    border-radius: 9999px !important;
    font-weight: 500 !important;
}
body.vibe .nav-right .btn-secondary {
    background: transparent !important;
    color: var(--vg-text) !important;
    border: 1px solid var(--vg-glass-border-mid) !important;
}
body.vibe .nav-right .btn-primary {
    background: var(--vg-text) !important;
    color: var(--vg-bg) !important;
    border: none !important;
}
body.vibe .nav-lang a {
    color: var(--vg-text-faint) !important;
    border-radius: 9999px;
}
body.vibe .nav-lang a.active {
    background: var(--vg-glass-bg-hover) !important;
    color: var(--vg-text) !important;
}

body.vibe .theme-toggle,
body.vibe .theme-toggle-mobile {
    background: var(--vg-glass-bg-hover) !important;
    color: var(--vg-text) !important;
    border-radius: 50% !important;
    border: 1px solid var(--vg-glass-border-mid) !important;
}

/* Light tema icin nav arkaplan biraz daha opak */
html[data-theme="light"] body.vibe .nav-inner {
    background: rgba(255,255,255,0.5);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.5),
                0 8px 32px rgba(0,0,0,0.08);
}
html[data-theme="light"] body.vibe .nav-dropdown-menu {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
}

/* Default: Tum sayfalarin icerigi navbar altina dussun. */
body.vibe main { padding-top: 80px !important; }

/* Homepage / Hero'lu sayfalar — video navbar arkasindan gecsin diye
   negative margin ile main padding'i geri alıp icerigi padding ile geri it. */
body.vibe .w3-hero,
body.vibe .vibe-hero {
    margin-top: -80px;
    padding-top: 80px;
}

@media (max-width: 768px) {
    body.vibe .navbar {
        padding: 8px 12px !important;
        min-height: 56px;
    }
    body.vibe main { padding-top: 64px !important; }
    body.vibe .w3-hero,
    body.vibe .vibe-hero {
        margin-top: -64px;
        padding-top: 64px;
    }
    body.vibe .nav-right .btn {
        height: 36px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
    }
    /* Mobilde nav-lang ve theme toggle desktop'tan gizle (zaten mobilde menüde var) */
    body.vibe .navbar > .nav-inner > .nav-right > .nav-lang { display: none !important; }
    body.vibe .navbar > .nav-inner > .nav-right > .theme-toggle { display: none !important; }
}

/* === MOBILE MENU OVERLAY ===
   Mevcut style.css'te mobil menü 1200px altında devreye giriyor.
   Ayni breakpoint'i kullaniyoruz ki cakisma olmasin. */
@media (max-width: 1200px) {
    /* Slide-in panel — TAMAMEN OPAQUE arkaplan */
    body.vibe .nav-links {
        background: #0a0a14 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-left: 1px solid rgba(255,255,255,0.08) !important;
        box-shadow: -16px 0 48px rgba(0,0,0,0.6) !important;
        z-index: 99999 !important;
    }

    /* Li elementlerin opacity'sini ZORLA — mevcut .nav-links li {opacity:0} kuralini bozar */
    body.vibe .nav-links li {
        opacity: 1 !important;
        transform: none !important;
    }
    body.vibe .nav-links.open li {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Linkler — beyaz, okunur, tiklanabilir */
    body.vibe .nav-links a,
    body.vibe .nav-links .nav-dropdown-toggle {
        color: #ffffff !important;
        background: transparent !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        padding: 12px 16px !important;
        border-radius: 10px !important;
        width: 100%;
        display: flex !important;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    body.vibe .nav-links a:hover,
    body.vibe .nav-links .nav-dropdown-toggle:hover {
        background: rgba(255,255,255,0.06) !important;
        color: #ffffff !important;
    }
    body.vibe .nav-links a.active,
    body.vibe .nav-links .nav-dropdown-toggle.active {
        background: rgba(255,255,255,0.08) !important;
        color: #ffffff !important;
    }

    /* Mobile menu header (logo + close) */
    body.vibe .mobile-nav-header {
        padding: 14px 16px !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        margin-bottom: 8px;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        background: transparent !important;
    }
    body.vibe .mobile-nav-close {
        background: rgba(255,255,255,0.08) !important;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        font-size: 20px !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer !important;
        opacity: 1 !important;
    }
    body.vibe .mobile-nav-close:hover {
        background: rgba(255,255,255,0.14) !important;
    }

    /* Divider */
    body.vibe .mobile-nav-divider {
        background: rgba(255,255,255,0.08) !important;
        height: 1px !important;
        margin: 12px 16px !important;
        opacity: 1 !important;
    }

    /* Mobile dropdown menu (accordion) */
    body.vibe .nav-dropdown-menu {
        background: rgba(255,255,255,0.04) !important;
        backdrop-filter: none !important;
        border: none !important;
        border-radius: 10px !important;
        margin: 4px 8px !important;
        padding: 4px 0 !important;
    }
    body.vibe .nav-dropdown-menu a {
        color: rgba(255,255,255,0.75) !important;
        font-size: 13px !important;
        padding: 10px 16px !important;
    }
    body.vibe .nav-dropdown-menu a:hover {
        color: #fff !important;
        background: rgba(255,255,255,0.05) !important;
    }
    body.vibe .nav-dropdown-divider {
        background: rgba(255,255,255,0.08) !important;
    }
    body.vibe .nav-dropdown-label {
        color: rgba(255,255,255,0.4) !important;
    }

    /* Auth buttons — mobile */
    body.vibe .mobile-nav-auth {
        list-style: none;
        padding: 4px 8px !important;
    }
    body.vibe .mobile-nav-auth a {
        background: rgba(255,255,255,0.06) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        color: #fff !important;
        text-align: center !important;
        justify-content: center;
        margin: 4px 0 !important;
        border-radius: 10px !important;
        opacity: 1 !important;
    }

    /* Theme toggle mobile */
    body.vibe .theme-toggle-mobile {
        background: rgba(255,255,255,0.06) !important;
        color: #fff !important;
        margin: 4px 8px !important;
        border-radius: 10px !important;
        height: 44px !important;
        width: calc(100% - 16px) !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer !important;
        opacity: 1 !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
    }

    /* Nav lang inside mobile menu */
    body.vibe .mobile-nav-auth .nav-lang {
        background: transparent !important;
        padding: 0 !important;
        justify-content: center;
        gap: 4px !important;
    }
    body.vibe .mobile-nav-auth .nav-lang a {
        background: rgba(255,255,255,0.06) !important;
        color: #fff !important;
        width: auto !important;
        padding: 8px 16px !important;
        border-radius: 9999px !important;
        margin: 0 !important;
    }
    body.vibe .mobile-nav-auth .nav-lang a.active {
        background: #fff !important;
        color: #000 !important;
    }

    /* Nav-overlay arka karartma */
    body.vibe .nav-overlay {
        background: rgba(0,0,0,0.6) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
    }

    /* Hamburger renk */
    body.vibe .hamburger span {
        background: #fff !important;
    }

    /* Desktop'ta gosterilen nav-right'in mobil versiyonu icin gizleme */
    body.vibe .navbar > .nav-inner > .nav-right > .nav-lang,
    body.vibe .navbar > .nav-inner > .nav-right > .theme-toggle {
        display: none !important;
    }
    /* Auth butonlarini mobilde de gizle (mevcut style'a uy) */
    body.vibe .navbar > .nav-inner > .nav-right > .btn-secondary {
        display: none !important;
    }
}

/* === LIGHT THEME — mobile menu === */
@media (max-width: 1200px) {
    html[data-theme="light"] body.vibe .nav-links {
        background: #ffffff !important;
        border-left: 1px solid rgba(0,0,0,0.08) !important;
    }
    html[data-theme="light"] body.vibe .nav-links a,
    html[data-theme="light"] body.vibe .nav-links .nav-dropdown-toggle {
        color: #0a0a0f !important;
    }
    html[data-theme="light"] body.vibe .nav-links a:hover,
    html[data-theme="light"] body.vibe .nav-links .nav-dropdown-toggle:hover {
        background: rgba(0,0,0,0.04) !important;
    }
    html[data-theme="light"] body.vibe .mobile-nav-close {
        background: rgba(0,0,0,0.06) !important;
        color: #0a0a0f !important;
        border-color: rgba(0,0,0,0.08) !important;
    }
    html[data-theme="light"] body.vibe .mobile-nav-divider,
    html[data-theme="light"] body.vibe .nav-dropdown-divider {
        background: rgba(0,0,0,0.08) !important;
    }
    html[data-theme="light"] body.vibe .nav-dropdown-menu {
        background: rgba(0,0,0,0.03) !important;
    }
    html[data-theme="light"] body.vibe .nav-dropdown-menu a {
        color: rgba(10,10,15,0.7) !important;
    }
    html[data-theme="light"] body.vibe .mobile-nav-auth a,
    html[data-theme="light"] body.vibe .theme-toggle-mobile {
        background: rgba(0,0,0,0.04) !important;
        color: #0a0a0f !important;
        border-color: rgba(0,0,0,0.08) !important;
    }
    html[data-theme="light"] body.vibe .nav-overlay {
        background: rgba(0,0,0,0.3) !important;
    }
    html[data-theme="light"] body.vibe .hamburger span {
        background: #0a0a0f !important;
    }
}

/* === MOBILE BOTTOM NAV === */
body.vibe .mobile-bottom-nav {
    background: rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-top: 1px solid var(--vg-glass-border-mid) !important;
}
body.vibe .mobile-bottom-nav a { color: var(--vg-text-muted) !important; }
body.vibe .mobile-bottom-nav a.active { color: var(--vg-text) !important; }

/* === HERO SECTIONS — common === */
body.vibe .hero-section,
body.vibe .w3-hero,
body.vibe .page-hero,
body.vibe .courses-hero,
body.vibe .projects-hero,
body.vibe .blog-hero,
body.vibe .marketing-hero {
    background: var(--vg-bg) !important;
    color: var(--vg-text);
}

/* W3 Hero — Vibe styling */
body.vibe .w3-hero-title {
    font-family: var(--vg-font-display) !important;
    font-weight: 400 !important;
    letter-spacing: -0.025em !important;
    line-height: 1 !important;
}
body.vibe .w3-hero-subtitle { color: var(--vg-text-muted) !important; }
body.vibe .w3-hero-badge {
    background: var(--vg-glass-bg) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--vg-glass-border-mid) !important;
    color: var(--vg-text) !important;
}
body.vibe .w3-hero-cta .w3-btn-inner-white {
    background: var(--vg-text) !important;
    color: var(--vg-bg) !important;
    font-family: var(--vg-font-body) !important;
}
body.vibe .w3-hero-search {
    background: var(--vg-glass-bg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--vg-glass-border-mid) !important;
    border-radius: 9999px !important;
}
body.vibe .w3-hero-search .search-input { color: var(--vg-text) !important; }
body.vibe .w3-hero-stats { color: var(--vg-text-muted); }
body.vibe .w3-stat-num { color: var(--vg-text) !important; }
body.vibe .w3-stat-label { color: var(--vg-text-faint) !important; }

/* === CARDS === */
body.vibe .card,
body.vibe .course-card,
body.vibe .project-card,
body.vibe .blog-card,
body.vibe .tool-card,
body.vibe .ai-tool-card {
    background: var(--vg-glass-bg) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--vg-glass-border-mid) !important;
    border-radius: 20px !important;
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
body.vibe .card:hover,
body.vibe .course-card:hover,
body.vibe .project-card:hover,
body.vibe .blog-card:hover,
body.vibe .tool-card:hover,
body.vibe .ai-tool-card:hover {
    background: var(--vg-glass-bg-hover) !important;
    border-color: rgba(255,255,255,0.25) !important;
    transform: translateY(-4px);
}
html[data-theme="light"] body.vibe .card:hover,
html[data-theme="light"] body.vibe .course-card:hover,
html[data-theme="light"] body.vibe .project-card:hover,
html[data-theme="light"] body.vibe .blog-card:hover,
html[data-theme="light"] body.vibe .tool-card:hover,
html[data-theme="light"] body.vibe .ai-tool-card:hover {
    border-color: rgba(0,0,0,0.15) !important;
}

/* Card titles → vibe display */
body.vibe .course-card-title,
body.vibe .project-card-title,
body.vibe .blog-card-title,
body.vibe .tool-card-title,
body.vibe .card-title { color: var(--vg-text) !important; }

/* === SECTION HEADINGS — vibe display font === */
body.vibe .section-title,
body.vibe .section-title-large,
body.vibe .promo-title,
body.vibe .ft-title,
body.vibe .hero-title,
body.vibe h1.page-title {
    font-family: var(--vg-font-display) !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
}

/* === BUTTONS === */
body.vibe .btn-primary {
    background: var(--vg-text) !important;
    color: var(--vg-bg) !important;
    border: none !important;
}
body.vibe .btn-secondary {
    background: var(--vg-glass-bg) !important;
    color: var(--vg-text) !important;
    border: 1px solid var(--vg-glass-border-mid) !important;
    backdrop-filter: blur(8px);
}

/* === FOOTER === */
body.vibe footer,
body.vibe .footer-section {
    background: var(--vg-bg) !important;
    border-top: 1px solid var(--vg-glass-divider) !important;
}
body.vibe .footer-section h3,
body.vibe .footer-title { color: var(--vg-text) !important; font-family: var(--vg-font-display); }
body.vibe .footer-section a { color: var(--vg-text-muted) !important; }
body.vibe .footer-section a:hover { color: var(--vg-text) !important; }

/* === FORMS / INPUTS in body content === */
body.vibe input[type="text"]:not(.mail-input):not(.search-input):not(.vibe-glass-input),
body.vibe input[type="email"]:not(.mail-input),
body.vibe input[type="search"]:not(.search-input),
body.vibe textarea:not(.mail-textarea) {
    background: var(--vg-glass-bg) !important;
    backdrop-filter: blur(6px);
    border: 1px solid var(--vg-glass-border-mid) !important;
    color: var(--vg-text);
}

/* === SCROLLBAR === */
body.vibe::-webkit-scrollbar { width: 10px; }
body.vibe::-webkit-scrollbar-track { background: var(--vg-bg); }
body.vibe::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
}
body.vibe::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* === REMOVE existing hero overlays when on vibe so video shines === */
body.vibe .w3-hero-overlay { background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.85) 100%) !important; }

/* === PAGE HEADER (courses, projects, ai-tools, marketing, guides, free-tools) === */
body.vibe .page-header {
    text-align: center;
    padding: 5rem 1.5rem 3rem !important;
    background: var(--vg-bg) !important;
    position: relative;
    overflow: hidden;
}
body.vibe .page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--vg-radial-soft);
    pointer-events: none;
    z-index: 0;
}
body.vibe .page-header > * { position: relative; z-index: 1; }
body.vibe .page-header h1,
body.vibe .page-header .page-title,
body.vibe .page-header h2 {
    font-family: var(--vg-font-display) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    color: var(--vg-text) !important;
    font-size: clamp(2.5rem, 6vw, 5rem) !important;
    margin: 0 0 1rem !important;
}
body.vibe .page-header p,
body.vibe .page-header .page-subtitle,
body.vibe .page-header .subtitle {
    color: var(--vg-text-muted) !important;
    font-size: clamp(0.95rem, 1.3vw, 1.0625rem) !important;
    line-height: 1.6 !important;
    max-width: 36rem;
    margin: 0 auto !important;
}
body.vibe .page-header .breadcrumb,
body.vibe .page-header .badge {
    color: var(--vg-text-faint) !important;
}

/* === Section / promo titles → vibe display === */
body.vibe .promo-title,
body.vibe .ft-title,
body.vibe .section-heading,
body.vibe .home-section-title {
    font-family: var(--vg-font-display) !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
}

/* === Container backgrounds — ensure solid black === */
body.vibe .edu-promo-section,
body.vibe .featured-tools-section,
body.vibe .latest-blog-section,
body.vibe .home-section,
body.vibe .promo-section {
    background: var(--vg-bg) !important;
}

/* === Filter bars / search === */
body.vibe .filter-bar,
body.vibe .filters,
body.vibe .search-bar {
    background: var(--vg-glass-bg) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid var(--vg-glass-border-mid) !important;
    border-radius: 16px !important;
}

/* === Tags / badges === */
body.vibe .tag,
body.vibe .badge,
body.vibe .category-pill {
    background: var(--vg-glass-bg) !important;
    border: 1px solid var(--vg-glass-border-mid) !important;
    color: var(--vg-text-muted) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* === Pagination === */
body.vibe .pagination a,
body.vibe .pagination span {
    background: var(--vg-glass-bg) !important;
    color: var(--vg-text-muted) !important;
    border: 1px solid var(--vg-glass-border-mid) !important;
}
body.vibe .pagination .active,
body.vibe .pagination .current {
    background: var(--vg-text) !important;
    color: var(--vg-bg) !important;
}

/* === Code blocks (guides) === */
body.vibe .code-block,
body.vibe pre {
    background: rgba(10, 10, 14, 0.95) !important;
    border: 1px solid var(--vg-glass-border-mid) !important;
}
html[data-theme="light"] body.vibe .code-block,
html[data-theme="light"] body.vibe pre {
    background: rgba(245, 246, 248, 0.95) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
}

/* === Generic links — keep accessible === */
body.vibe a:not(.nav-links a):not(.nav-dropdown-menu a):not(.btn):not(.liquid-glass):not(.course-card):not(.project-card):not(.blog-card):not(.tool-card):not(.vibe-card):not(.ai-tool-card):not(.footer-section a):not(.nav-logo):not(.search-bar a) {
    color: inherit;
    text-decoration: none;
}

/* === Disable existing animations that conflict === */
body.vibe .section-animate { animation-name: none; }

/* === Inline icons / SVG === */
body.vibe svg { color: inherit; }

/* === CTA glows (existing) keep but soften === */
body.vibe .w3-btn-glow {
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%) !important;
    filter: blur(20px);
}

/* === Hero-promo / Promo cards (homepage existing sections) === */
body.vibe .promo-stat-pill,
body.vibe .promo-feature-card,
body.vibe .ft-circle {
    background: var(--vg-glass-bg) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--vg-glass-border-mid) !important;
    color: var(--vg-text) !important;
}

/* === Newsletter form / forms === */
body.vibe .newsletter-form input,
body.vibe .nav-form input {
    background: var(--vg-glass-bg) !important;
    backdrop-filter: blur(6px);
    border: 1px solid var(--vg-glass-border-mid) !important;
    color: var(--vg-text) !important;
}

/* === Carousels / horizontal scroll === */
body.vibe .home-carousel-card,
body.vibe .vce-carousel-card {
    background: var(--vg-glass-bg) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--vg-glass-border-mid) !important;
    border-radius: 18px !important;
}

/* =====================================================
   LIGHT THEME — Refinements
   Dark tema bg-black, light tema bg-white. Liquid glass'in
   light versiyonu daha az bulanik, daha soluk gri border'lar.
   ===================================================== */
html[data-theme="light"] body.vibe {
    color: var(--vg-text);
}
html[data-theme="light"] body.vibe .navbar { /* nav padding okay */ }

html[data-theme="light"] body.vibe .nav-links a,
html[data-theme="light"] body.vibe .nav-dropdown-toggle {
    color: rgba(10,10,15,0.7) !important;
}
html[data-theme="light"] body.vibe .nav-links a:hover,
html[data-theme="light"] body.vibe .nav-dropdown-toggle:hover { color: rgba(10,10,15,1) !important; }

html[data-theme="light"] body.vibe .card,
html[data-theme="light"] body.vibe .course-card,
html[data-theme="light"] body.vibe .project-card,
html[data-theme="light"] body.vibe .blog-card,
html[data-theme="light"] body.vibe .tool-card,
html[data-theme="light"] body.vibe .ai-tool-card,
html[data-theme="light"] body.vibe .liquid-glass {
    background: rgba(255,255,255,0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-color: rgba(0,0,0,0.08) !important;
}

html[data-theme="light"] body.vibe .liquid-glass::before {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.9) 0%,
        rgba(0,0,0,0.05) 20%,
        rgba(0,0,0,0) 40%,
        rgba(0,0,0,0) 60%,
        rgba(0,0,0,0.05) 80%,
        rgba(255,255,255,0.9) 100%
    ) !important;
}

html[data-theme="light"] body.vibe .nav-dropdown-menu {
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] body.vibe .nav-dropdown-menu a { color: rgba(10,10,15,0.75) !important; }
html[data-theme="light"] body.vibe .nav-dropdown-menu a:hover {
    background: rgba(0,0,0,0.04) !important;
    color: rgba(10,10,15,1) !important;
}

html[data-theme="light"] body.vibe .btn-primary {
    background: #0a0a0f !important;
    color: #fff !important;
}
html[data-theme="light"] body.vibe .vibe-btn-primary {
    background: #0a0a0f;
    color: #fff;
}
html[data-theme="light"] body.vibe .vibe-circle-btn {
    background: #0a0a0f;
    color: #fff;
}

html[data-theme="light"] body.vibe .mobile-bottom-nav {
    background: rgba(255,255,255,0.85) !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] body.vibe .mobile-bottom-nav a { color: rgba(10,10,15,0.7) !important; }
html[data-theme="light"] body.vibe .mobile-bottom-nav a.active { color: rgba(10,10,15,1) !important; }

html[data-theme="light"] body.vibe::-webkit-scrollbar-track { background: var(--vg-bg); }
html[data-theme="light"] body.vibe::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
html[data-theme="light"] body.vibe::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }

/* Hero overlay light mode — beyaz fade'e geç */
html[data-theme="light"] body.vibe .w3-hero-overlay {
    background: linear-gradient(180deg, transparent 0%, rgba(250,251,252,0.4) 60%, rgba(250,251,252,0.95) 100%) !important;
}
html[data-theme="light"] body.vibe .vibe-hero-fade-bottom {
    background: linear-gradient(180deg, transparent 0%, var(--vg-bg) 100%) !important;
}

/* Light radial */
html[data-theme="light"] body.vibe .vibe-radial-top::after,
html[data-theme="light"] body.vibe .page-header::after {
    background: var(--vg-radial-soft);
}

/* Light theme: hero text needs to stay white over video, but page-header text dark */
html[data-theme="light"] body.vibe .w3-hero-title,
html[data-theme="light"] body.vibe .w3-hero-subtitle {
    color: #fff !important;
    text-shadow: 0 2px 30px rgba(0,0,0,0.3);
}

/* Newsletter / form inputs in light */
html[data-theme="light"] body.vibe input[type="text"]:not(.mail-input):not(.search-input):not(.vibe-glass-input),
html[data-theme="light"] body.vibe input[type="email"]:not(.mail-input),
html[data-theme="light"] body.vibe textarea:not(.mail-textarea) {
    background: rgba(255,255,255,0.6) !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: #0a0a0f !important;
}

/* === END LIGHT THEME === */