/* ============================================================================
 * Moxa Panel — Liquid Glass Chrome (Header + Footer)
 *
 * Aktifleştirme:
 *   <header class="site-header is-glass" data-glass-tint="cool|warm|dark|brand">
 *   <footer class="site-footer is-glass">
 *
 * Scroll-aware: sayfa kaydırıldıkça header daha katı olur (.is-scrolled).
 * Mobil cihazlarda blur düşürülür (performans). reduced-motion altında
 * animasyon yapılmaz.
 * ========================================================================== */

/* ─── Genel cam değişkenleri ─────────────────────────────────────────────── */
:root {
    --glass-blur: 16px;
    --glass-saturate: 160%;
    --glass-tint: rgba(255, 255, 255, 0.55);
    --glass-tint-scroll: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(255, 255, 255, 0.35);
    --glass-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.18);
}

/* ─── Tint paletleri (data-glass-tint ile seçilir) ───────────────────────── */
[data-glass-tint="cool"] {
    --glass-tint: rgba(219, 234, 254, 0.45);
    --glass-tint-scroll: rgba(219, 234, 254, 0.75);
    --glass-border: rgba(147, 197, 253, 0.30);
}
[data-glass-tint="warm"] {
    --glass-tint: rgba(254, 226, 226, 0.42);
    --glass-tint-scroll: rgba(254, 226, 226, 0.72);
    --glass-border: rgba(253, 186, 116, 0.30);
}
[data-glass-tint="dark"] {
    --glass-tint: rgba(15, 23, 42, 0.55);
    --glass-tint-scroll: rgba(8, 11, 22, 0.85);
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.45);
    --header-text-on-glass: #f5f7fb;
}
[data-glass-tint="brand"] {
    --glass-tint: color-mix(in oklab, var(--color-primary, #1a365d) 35%, transparent);
    --glass-tint-scroll: color-mix(in oklab, var(--color-primary, #1a365d) 80%, transparent);
    --glass-border: color-mix(in oklab, var(--color-secondary, #c9a227) 30%, transparent);
    --header-text-on-glass: #fff;
}
[data-glass-tint="gold"] {
    --glass-tint: rgba(255, 184, 0, 0.18);
    --glass-tint-scroll: rgba(34, 22, 6, 0.85);
    --glass-border: rgba(255, 184, 0, 0.35);
    --header-text-on-glass: #fef3c7;
}

/* ─── HEADER ─────────────────────────────────────────────────────────────── */
.site-header.is-glass {
    background: var(--glass-tint) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border-bottom: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow);
    transition: background-color .35s ease, backdrop-filter .35s ease, border-color .35s ease;
}
.site-header.is-glass.is-scrolled {
    background: var(--glass-tint-scroll) !important;
    --glass-blur: 22px;
    box-shadow: 0 14px 40px -14px rgba(15, 23, 42, 0.28);
}
.site-header.is-glass[data-glass-tint="dark"],
.site-header.is-glass[data-glass-tint="brand"],
.site-header.is-glass[data-glass-tint="gold"] {
    color: var(--header-text-on-glass, #f5f7fb);
    --header-text: var(--header-text-on-glass, #f5f7fb);
}

/* Hafif ışıltı katmanı — sürekli yavaşça akar */
.site-header.is-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(40% 100% at 15% 50%, rgba(255, 255, 255, 0.18) 0%, transparent 60%),
        radial-gradient(35% 100% at 85% 50%, rgba(255, 255, 255, 0.10) 0%, transparent 60%);
    opacity: 0.55;
    transition: opacity .4s ease;
}
.site-header.is-glass.is-scrolled::before {
    opacity: 0.2;
}

/* Topbar üzerine cam */
.site-header.is-glass + * .site-topbar,
.site-topbar.is-glass {
    background: var(--glass-tint) !important;
    backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-saturate));
    border-bottom: 1px solid var(--glass-border);
}

/* Mobile menu — cam içinde */
.site-header.is-glass #mobile-menu {
    background: var(--glass-tint-scroll) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border-color: var(--glass-border) !important;
}

/* Logo + CTA hafif glow */
.site-header.is-glass[data-glass-tint="dark"] .btn-primary,
.site-header.is-glass[data-glass-tint="brand"] .btn-primary {
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.6);
}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
.site-footer.is-glass {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(60% 60% at 50% 0%, rgba(99, 102, 241, 0.15) 0%, transparent 60%),
        var(--footer-base-bg, #0b0f1d) !important;
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.10));
}
.site-footer.is-glass::before {
    content: "";
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(35% 35% at 25% 30%, rgba(120, 180, 255, 0.20) 0%, transparent 60%),
        radial-gradient(30% 30% at 80% 70%, rgba(255, 160, 220, 0.18) 0%, transparent 60%),
        radial-gradient(45% 45% at 50% 100%, rgba(180, 255, 220, 0.18) 0%, transparent 60%);
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
    animation: chrome-glass-drift 26s ease-in-out infinite alternate;
}
.site-footer.is-glass > * { position: relative; z-index: 1; }

.site-footer.is-glass .footer-widget h4 {
    color: #fff !important;
    letter-spacing: 0.02em;
}
.site-footer.is-glass a {
    transition: color .2s ease, opacity .2s ease;
}
.site-footer.is-glass a:hover {
    color: var(--color-secondary, #c9a227);
    opacity: 1;
}

/* WhatsApp baloncuğu cam altına çekilmesin */
body .fixed[href^="https://wa.me"] { z-index: 60; }

/* ─── Mobil optimizasyon ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .site-header.is-glass,
    .site-footer.is-glass::before {
        --glass-blur: 10px;
    }
    .site-footer.is-glass::before { filter: blur(40px); }
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .site-footer.is-glass::before,
    .site-header.is-glass::before { animation: none !important; }
    .site-header.is-glass { transition: none !important; }
}

/* ─── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes chrome-glass-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .8; }
    50%  { transform: translate3d(2%, -3%, 0) scale(1.05); opacity: 1; }
    100% { transform: translate3d(-3%, 4%, 0) scale(1.08); opacity: .85; }
}