/* ===================================================================
   Sunix Yeni Tema — theme.css
   Brand palette, typography, atoms, breakpoints
   Dark/Light mode token sistemi (html[data-theme="dark|light"])
   =================================================================== */

:root {
    /* Brand colors (mod bağımsız) */
    --c-navy:        #101014;
    --c-navy-deep:   #08080c;
    --c-navy-mid:    #1e1e24;
    --c-navy-soft:   #3a3a44;
    --c-red:         #e30613;
    --c-red-dark:    #b3040f;
    --c-red-glow:    rgba(227, 6, 19, 0.35);
    --c-white:       #ffffff;

    /* DARK THEME (default — data-theme yoksa da çalışır) */
    --c-bg:          #08080c;                    /* ana zemin — saf siyah değil, hafif soğuk tint */
    --c-bg-alt:      #0d0d12;                    /* alternatif bölüm zemini */
    --c-surface:     rgba(255, 255, 255, 0.045); /* kart zemin — görünür elevation */
    --c-surface-2:   rgba(255, 255, 255, 0.09);  /* hover + ikinci katman */
    --c-surface-3:   rgba(255, 255, 255, 0.13);  /* üçüncü katman — modal/dropdown */
    --c-surface-media: transparent;
    --c-media-glow:  radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.08) 0%, transparent 55%);
    --c-media-shadow: radial-gradient(ellipse at 50% 110%, rgba(4,4,8,0.4), transparent 55%);
    --c-line:        rgba(255, 255, 255, 0.07);
    --c-line-strong: rgba(255, 255, 255, 0.14);
    --c-line-glow:   rgba(255, 255, 255, 0.22);  /* hover/focus border */
    --c-text:        #eaecf4;
    --c-text-soft:   rgba(255, 255, 255, 0.70);
    --c-muted:       rgba(255, 255, 255, 0.48);
    --c-off:         var(--c-bg-alt);            /* geriye dönük uyum */

    /* Mode-aware yardımcı tokenlar */
    --c-nav-text:    #ffffff;                    /* header nav link text */
    --c-hero-text:   #ffffff;                    /* hero/CTA/dark section text */
    --c-hero-text-soft: rgba(255, 255, 255, 0.75);
    --c-stat-text:   #ffffff;                    /* stat box text */
    --c-stat-bg:     var(--c-navy);              /* stat box/ribbon bg */
    --c-on-brand:    #ffffff;                    /* navy/kırmızı üzerine yazı */
    --c-form-input-bg: rgba(255, 255, 255, 0.04);
    --c-form-input-border: rgba(255, 255, 255, 0.16);
    --overlay-bg:    rgba(8, 8, 12, 0.96);        /* search overlay backdrop */
    --g-icon-gradient: linear-gradient(135deg, rgba(28, 26, 48, 0.7), rgba(227, 6, 19, 0.25));
    --g-hero-title:  linear-gradient(120deg, #ffffff 0%, #c4c6d6 100%);
    --g-card-shine:  linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.04) 100%);

    /* Header/Nav/Drawer/Panel tokenları (dark) */
    --c-header-bg:            var(--c-navy);
    --c-header-bg-scrolled:   var(--c-navy-deep);
    --c-header-glass:         rgba(8, 8, 12, 0.6);
    --c-header-glass-scrolled:rgba(8, 8, 12, 0.95);
    --c-header-border:        rgba(255, 255, 255, 0.08);
    --c-nav-text-soft:        rgba(255, 255, 255, 0.82);
    --c-mega-panel-bg:        rgba(12, 12, 16, 0.97);
    --c-mega-panel-shadow:    0 30px 80px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
    --c-mega-grid-hover-bg:   rgba(255, 255, 255, 0.06);
    /* Glass modern tokenları (dark) */
    --c-glass-item-bg:        rgba(255, 255, 255, 0.04);
    --c-glass-item-border:    rgba(255, 255, 255, 0.08);
    --c-glass-item-hover-border: rgba(227, 6, 19, 0.4);
    --c-glass-img-bg:         rgba(255, 255, 255, 0.06);
    --c-glass-img-border:     rgba(255, 255, 255, 0.10);
    --c-glass-highlight:      linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent);
    --c-drawer-bg:            var(--c-navy);
    --c-drawer-border:        rgba(255, 255, 255, 0.08);
    --c-drawer-hover-bg:      rgba(255, 255, 255, 0.04);
    --c-drawer-sub-bg:        rgba(0, 0, 0, 0.22);
    --c-drawer-backdrop:      rgba(4, 4, 8, 0.65);
    --c-icon-btn-hover-bg:    rgba(255, 255, 255, 0.12);
    --c-arrow-btn-bg:         rgba(255, 255, 255, 0.08);
    --c-product-card-bg:      #16161e;
    --c-product-card-border:  rgba(255, 255, 255, 0.13);
    --c-product-card-hover-bg:#1c1c26;
    --c-card-body-bg:         #1c1c26;
    --c-card-body-hover-bg:   #24242e;
    --c-card-body-border:     rgba(255, 255, 255, 0.07);
    --c-search-close-bg:      rgba(255, 255, 255, 0.08);
    --c-search-close-hover:   rgba(255, 255, 255, 0.18);
    --c-search-input-border:  rgba(255, 255, 255, 0.25);
    --c-search-placeholder:   rgba(255, 255, 255, 0.35);
    --c-search-label:         rgba(255, 255, 255, 0.55);
    --c-footer-bg:            var(--c-navy-deep);
    --c-footer-text:          rgba(255, 255, 255, 0.72);
    --c-footer-text-soft:     rgba(255, 255, 255, 0.6);
    --c-footer-link:          rgba(255, 255, 255, 0.65);
    --c-footer-border:        rgba(255, 255, 255, 0.08);
    --c-footer-social-bg:     rgba(255, 255, 255, 0.06);
    --c-footer-title:         #ffffff;
    --c-footer-bottom-text:   rgba(255, 255, 255, 0.55);
    --c-card-media-overlay:   radial-gradient(ellipse at 50% 110%, rgba(8, 8, 12, 0.18), transparent 55%);
    --c-page-hero-text-soft:  rgba(255, 255, 255, 0.72);
    --c-page-hero-bc-soft:    rgba(255, 255, 255, 0.55);
    --c-page-hero-bc-link:    rgba(255, 255, 255, 0.65);
    --c-page-hero-dots:       rgba(255, 255, 255, 0.05);

    /* Hero slider + dekor tokenları (dark) */
    --c-hero-line:            rgba(255, 255, 255, 0.30);
    --c-hero-num-stroke:      rgba(255, 255, 255, 0.05);
    --c-hero-nav-bg:          rgba(255, 255, 255, 0.08);
    --c-hero-nav-border:      rgba(255, 255, 255, 0.15);
    --c-hero-dot-bg:          rgba(255, 255, 255, 0.15);
    --c-hero-dot-hover:       rgba(255, 255, 255, 0.28);
    --c-hero-dot-active:      rgba(255, 255, 255, 0.22);
    --c-hero-visual-glow-1:   rgba(255, 255, 255, 0.08);
    --c-hero-visual-glow-2:   rgba(227, 6, 19, 0.10);
    --c-hero-visual-inset:    rgba(8, 8, 12, 0.3);
    --c-hero-visual-outset:   rgba(4, 4, 8, 0.4);

    /* Gradient zemin — premium black: çok ince renkli halo'larla derinlik */
    --g-dark-hero:
        radial-gradient(ellipse at 75% 35%, rgba(25, 20, 55, 0.55) 0%, transparent 55%),
        radial-gradient(ellipse at 5% 90%, rgba(227, 6, 19, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 95% 95%, rgba(18, 16, 40, 0.25) 0%, transparent 50%),
        linear-gradient(160deg, #06060a 0%, #0a0a10 40%, #0e0d14 70%, #100f18 100%);
    --g-dark-panel: linear-gradient(145deg, #07070b 0%, #0c0b12 50%, #12111a 100%);

    /* Type scale */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Space Grotesk', 'SF Mono', Menlo, monospace;

    /* Sizing */
    --container-max: 1400px;
    --container-pad-desktop: 40px;
    --container-pad-tablet: 28px;
    --container-pad-mobile: 20px;

    --header-height: 70px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --radius-pill: 100px;

    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-hover: 0 24px 56px -16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --shadow-glow: 0 20px 60px -15px rgba(227, 6, 19, 0.35);
    --shadow-ambient: 0 0 80px -20px rgba(25, 20, 55, 0.3);

    --easing: cubic-bezier(.2,.8,.2,1);
    --dur-fast: .18s;
    --dur: .28s;
    --dur-slow: .6s;
}

/* ===== LIGHT THEME (html[data-theme="light"]) =====
   Yalnızca mode-aware tokenlar override edilir. Brand renkleri,
   typography, sizing, easing aynen kalır. */
html[data-theme="light"] {
    --c-bg:          #ffffff;
    --c-bg-alt:      #f4f6fb;
    --c-surface:     rgba(13, 30, 58, 0.03);
    --c-surface-2:   rgba(13, 30, 58, 0.06);
    --c-surface-media: transparent;
    --c-media-glow:  radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.9) 0%, transparent 60%);
    --c-media-shadow: radial-gradient(ellipse at 50% 110%, rgba(13,30,58,0.12), transparent 55%);
    --c-line:        rgba(13, 30, 58, 0.10);
    --c-line-strong: rgba(13, 30, 58, 0.20);
    --c-text:        #0d1e3a;
    --c-text-soft:   rgba(13, 30, 58, 0.78);
    --c-muted:       rgba(13, 30, 58, 0.58);

    --c-nav-text:    #0d1e3a;
    --c-hero-text:   #0d1e3a;
    --c-hero-text-soft: rgba(13, 30, 58, 0.72);
    --c-stat-text:   #ffffff;
    --c-stat-bg:     var(--c-navy);
    --c-on-brand:    #ffffff;
    --c-form-input-bg: rgba(13, 30, 58, 0.03);
    --c-form-input-border: rgba(13, 30, 58, 0.18);
    --overlay-bg:    rgba(255, 255, 255, 0.96);
    --g-icon-gradient: linear-gradient(135deg, rgba(26, 58, 125, 0.14), rgba(227, 6, 19, 0.08));
    --g-hero-title:  linear-gradient(120deg, #0d1e3a 0%, #1a3a7d 100%);

    --g-dark-hero:
        radial-gradient(ellipse at 70% 40%, rgba(26, 58, 125, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 10% 100%, rgba(227, 6, 19, 0.05) 0%, transparent 45%),
        radial-gradient(ellipse at 100% 100%, rgba(10, 100, 200, 0.06) 0%, transparent 45%),
        linear-gradient(135deg, #f8faff 0%, #eef2fc 50%, #e4ecfa 100%);
    --g-dark-panel: linear-gradient(135deg, #ffffff 0%, #f4f6fb 60%, #e8eef8 100%);

    --shadow-card: 0 2px 10px rgba(13, 30, 58, 0.08), 0 1px 3px rgba(13, 30, 58, 0.04);
    --shadow-hover: 0 24px 56px -16px rgba(13, 30, 58, 0.22);
    --shadow-glow:  0 20px 60px -15px rgba(227, 6, 19, 0.22);

    /* Header/Nav/Drawer/Panel tokenları (light) */
    --c-header-bg:            #ffffff;
    --c-header-bg-scrolled:   #ffffff;
    --c-header-glass:         rgba(255, 255, 255, 0.78);
    --c-header-glass-scrolled:rgba(255, 255, 255, 0.96);
    --c-header-border:        rgba(13, 30, 58, 0.08);
    --c-nav-text-soft:        rgba(13, 30, 58, 0.70);
    --c-mega-panel-bg:        rgba(255, 255, 255, 0.98);
    --c-mega-panel-shadow:    0 30px 80px rgba(13, 30, 58, 0.15), 0 4px 16px rgba(13, 30, 58, 0.08);
    --c-mega-grid-hover-bg:   rgba(13, 30, 58, 0.05);
    /* Glass modern tokenları (light) — cam hissiyatı daha belirgin */
    --c-glass-item-bg:        rgba(255, 255, 255, 0.55);
    --c-glass-item-border:    rgba(13, 30, 58, 0.08);
    --c-glass-item-hover-border: rgba(227, 6, 19, 0.5);
    --c-glass-img-bg:         rgba(255, 255, 255, 0.85);
    --c-glass-img-border:     rgba(13, 30, 58, 0.10);
    --c-glass-highlight:      linear-gradient(135deg, rgba(255, 255, 255, 0.6), transparent);
    --c-drawer-bg:            #ffffff;
    --c-drawer-border:        rgba(13, 30, 58, 0.08);
    --c-drawer-hover-bg:      rgba(13, 30, 58, 0.04);
    --c-drawer-sub-bg:        rgba(13, 30, 58, 0.04);
    --c-drawer-backdrop:      rgba(13, 30, 58, 0.45);
    --c-icon-btn-hover-bg:    rgba(13, 30, 58, 0.08);
    --c-arrow-btn-bg:         rgba(13, 30, 58, 0.06);
    --c-product-card-bg:      var(--c-surface);
    --c-product-card-border:  var(--c-line);
    --c-product-card-hover-bg:var(--c-surface-2);
    --c-card-body-bg:         transparent;
    --c-card-body-hover-bg:   transparent;
    --c-card-body-border:     transparent;
    --c-product-card-border:  var(--c-line);
    --c-product-card-hover-bg: var(--c-surface-2);
    --c-search-close-bg:      rgba(13, 30, 58, 0.06);
    --c-search-close-hover:   rgba(13, 30, 58, 0.12);
    --c-search-input-border:  rgba(13, 30, 58, 0.2);
    --c-search-placeholder:   rgba(13, 30, 58, 0.35);
    --c-search-label:         rgba(13, 30, 58, 0.55);
    --c-footer-bg:            #0d2a5e; /* Beyaz temada footer = derin lacivert-mavi (logo mavisinin koyu/şık tonu) */
    --c-footer-text:          rgba(255, 255, 255, 0.78);
    --c-footer-text-soft:     rgba(255, 255, 255, 0.65);
    --c-footer-link:          rgba(255, 255, 255, 0.72);
    --c-footer-border:        rgba(255, 255, 255, 0.10);
    --c-footer-social-bg:     rgba(255, 255, 255, 0.08);
    --c-footer-title:         #ffffff;
    --c-footer-bottom-text:   rgba(255, 255, 255, 0.55);
    --c-card-media-overlay:   radial-gradient(ellipse at 50% 110%, rgba(13, 30, 58, 0.08), transparent 55%);
    --c-page-hero-text-soft:  rgba(13, 30, 58, 0.72);
    --c-page-hero-bc-soft:    rgba(13, 30, 58, 0.55);
    --c-page-hero-bc-link:    rgba(13, 30, 58, 0.70);
    --c-page-hero-dots:       rgba(13, 30, 58, 0.06);

    /* Hero slider + dekor tokenları (light) */
    --c-hero-line:            rgba(13, 30, 58, 0.28);
    --c-hero-num-stroke:      rgba(13, 30, 58, 0.09);
    --c-hero-nav-bg:          rgba(13, 30, 58, 0.08);
    --c-hero-nav-border:      rgba(13, 30, 58, 0.22);
    --c-hero-dot-bg:          rgba(13, 30, 58, 0.20);
    --c-hero-dot-hover:       rgba(13, 30, 58, 0.38);
    --c-hero-dot-active:      rgba(13, 30, 58, 0.30);
    --c-hero-visual-glow-1:   rgba(26, 58, 125, 0.10);
    --c-hero-visual-glow-2:   rgba(227, 6, 19, 0.06);
    --c-hero-visual-inset:    rgba(13, 30, 58, 0.08);
    --c-hero-visual-outset:   rgba(13, 30, 58, 0.14);
}

/* Mod geçiş animasyonu */
html {
    scroll-behavior: smooth;
    transition: background-color .25s ease;
}
body {
    transition: background-color .25s ease, color .25s ease;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.55;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.028;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 128px 128px;
}
html[data-theme="light"] body::after { opacity: 0; }
/* Global: section zemini ana zeminin aynısı */
.th-section {
    background: var(--c-bg);
    color: var(--c-text);
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }

/* ---- Container ---- */
.th-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad-desktop);
    padding-right: var(--container-pad-desktop);
}

/* ---- Typography ---- */
.th-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--c-text-soft);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.th-eyebrow::before {
    content: '';
    width: 28px; height: 2px;
    background: var(--c-red);
}
.th-eyebrow--light { color: var(--c-hero-text-soft); }
.th-eyebrow--light::before { background: var(--c-red); }

.th-h1 {
    font-size: clamp(40px, 5.5vw, 72px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: var(--c-text);
    text-wrap: balance;
}
.th-h2 {
    font-size: clamp(28px, 3.8vw, 48px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--c-text);
    text-wrap: balance;
}
.th-h3 {
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--c-text);
}
.th-lead {
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.65;
    color: var(--c-text-soft);
    max-width: 620px;
}

/* ---- Buttons ---- */
.th-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all var(--dur) var(--easing);
    white-space: nowrap;
    cursor: pointer;
}
.th-btn i { transition: transform var(--dur-fast); }
.th-btn:hover i { transform: translateX(4px); }

.th-btn--primary {
    background: var(--c-red);
    color: var(--c-white);
    box-shadow: 0 14px 30px -12px var(--c-red-glow);
}
.th-btn--primary:hover {
    background: var(--c-red-dark);
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -12px rgba(227, 6, 19, 0.55);
}

.th-btn--ghost-dark {
    background: transparent;
    color: var(--c-text);
    border: 1.5px solid var(--c-line-strong);
}
.th-btn--ghost-dark:hover {
    background: var(--c-surface-2);
    color: var(--c-text);
    border-color: var(--c-text);
}

.th-btn--ghost-light {
    background: transparent;
    color: var(--c-hero-text);
    border: 1.5px solid var(--c-hero-line);
}
.th-btn--ghost-light:hover {
    background: var(--c-hero-nav-bg);
    border-color: var(--c-hero-text);
}

.th-btn--sm { padding: 11px 20px; font-size: 13.5px; }
.th-btn--lg { padding: 17px 32px; font-size: 16px; }

/* ---- Link arrow (editorial) ---- */
.th-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--c-text);
    padding-bottom: 2px;
    border-bottom: 1px solid var(--c-line-strong);
    transition: color var(--dur-fast), border-color var(--dur-fast), gap var(--dur-fast);
}
.th-link-arrow:hover {
    color: var(--c-red);
    border-bottom-color: var(--c-red);
    gap: 14px;
}

/* ---- Sections ---- */
.th-section {
    padding: clamp(60px, 8vw, 110px) 0;
}
.th-section--tight { padding: clamp(40px, 6vw, 70px) 0; }
.th-section__head {
    margin-bottom: clamp(36px, 5vw, 60px);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    flex-wrap: wrap;
}
.th-section__head-main { max-width: 680px; }
.th-section__head-main .th-eyebrow { margin-bottom: 18px; }
.th-section__head-main .th-h2 { margin-bottom: 16px; }

.th-section--alt {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(20, 18, 40, 0.15) 0%, transparent 60%),
        var(--c-bg-alt);
}
.th-section--dark {
    background: var(--g-dark-hero);
    color: var(--c-hero-text);
}
.th-section--dark .th-h2 { color: var(--c-hero-text); }
.th-section--dark .th-lead { color: var(--c-hero-text-soft); }

/* ---- Responsive breakpoints ---- */
@media (max-width: 1024px) {
    .th-container {
        padding-left: var(--container-pad-tablet);
        padding-right: var(--container-pad-tablet);
    }
}
@media (max-width: 480px) {
    .th-container {
        padding-left: var(--container-pad-mobile);
        padding-right: var(--container-pad-mobile);
    }
    .th-section__head {
        align-items: flex-start;
        gap: 18px;
    }
}