/**
 * Bozok Sac Metal - Ana Stil Dosyası
 *
 * Tailwind CDN ile birlikte kullanılır.
 * Burada Tailwind'in kapsamadığı özel stiller,
 * animasyonlar ve override'lar yer alır.
 */

/* ═══════════════════════════════════════════════════════════
   1. TEMEL AYARLAR
   ═══════════════════════════════════════════════════════════ */

/* ── Tema Değişkenleri ─────────────────────────────────── */

/* Koyu tema (varsayılan) */
:root {
    --color-primary: #137fec;
    --color-background: #09090b;
    --color-surface: #1a2430;
    --color-surface-high: #27272a;
    --color-surface-highest: #3f3f46;
    --color-surface-lowest: #050505;
    --color-outline: #27272a;
    --color-text: #f4f4f5;
    --color-text-muted: #71717a;
    --color-text-secondary: #a1a1aa;
    --color-card-bg: rgba(9, 9, 11, 0.8);
    --color-card-border: rgba(39, 39, 42, 0.5);
    --color-header-bg: rgba(9, 9, 11, 0.8);
    --color-header-scrolled: rgba(9, 9, 11, 0.95);
    --color-overlay: rgba(0, 0, 0, 0.5);
    --ease-mechanical: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    color-scheme: dark;
}

/* Açık tema */
html.light {
    --color-background: #f8f9fa;
    --color-surface: #e9ecef;
    --color-surface-high: #dee2e6;
    --color-surface-highest: #ced4da;
    --color-surface-lowest: #ffffff;
    --color-outline: #ced4da;
    --color-text: #1a1a2e;
    --color-text-muted: #6c757d;
    --color-text-secondary: #495057;
    --color-card-bg: rgba(255, 255, 255, 0.85);
    --color-card-border: rgba(0, 0, 0, 0.08);
    --color-header-bg: rgba(248, 249, 250, 0.85);
    --color-header-scrolled: rgba(248, 249, 250, 0.95);
    --color-overlay: rgba(255, 255, 255, 0.5);
    color-scheme: light;
}

/* ── Tema Geçiş Animasyonu ──────────────────────────────── */
/* Sadece arka plan ve border geçişi - text anında değişir (shutter yok) */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.4s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}

/* Temel body stilleri */
body {
    font-family: 'Space Grotesk', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--color-background);
    color: var(--color-text);
}

/* Seçim rengi */
::selection {
    background-color: rgba(19, 127, 236, 0.3);
    color: #ffffff;
}

/* Scrollbar stilleri */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--color-background);
}
::-webkit-scrollbar-thumb {
    background: var(--color-outline);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-outline) var(--color-background);
}

/* ═══════════════════════════════════════════════════════════
   2. MATERIAL SYMBOLS AYARLARI
   ═══════════════════════════════════════════════════════════ */

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 200,
        'GRAD' 0,
        'opsz' 24;
    user-select: none;
}

/* ═══════════════════════════════════════════════════════════
   3. HEADER STİLLERİ
   ═══════════════════════════════════════════════════════════ */

#site-header {
    transition: transform 0.4s var(--ease-mechanical);
}

#site-header.header-scrolled nav {
    background-color: rgba(9, 9, 11, 0.95);
    border-bottom-color: rgba(39, 39, 42, 0.8);
}

/* Hamburger çizgileri geçişi */
.hamburger-lines span {
    transition: transform 0.3s var(--ease-mechanical),
                opacity 0.2s ease;
}

/* Mobil menü öğeleri başlangıç durumu */
.mobile-nav-item {
    opacity: 0;
    transform: translateX(-20px);
}

/* Mobil accordion geçişi */
.mobile-accordion-content {
    transition: max-height 0.5s var(--ease-mechanical);
}

.accordion-icon {
    transition: transform 0.3s var(--ease-mechanical);
}

.mobile-accordion-toggle[aria-expanded="true"] .accordion-icon {
    transform: rotate(90deg);
}

/* ═══════════════════════════════════════════════════════════
   4. DİKEY YAZI
   ═══════════════════════════════════════════════════════════ */

.text-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* ═══════════════════════════════════════════════════════════
   5. SCROLL ANİMASYONLARI
   ═══════════════════════════════════════════════════════════ */

/* Aşağıdan yukarı belirme */
[data-animate="fade-up"] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--ease-smooth),
                transform 0.8s var(--ease-smooth);
}
[data-animate="fade-up"].animate-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Soldan sağa belirme */
[data-animate="fade-right"] {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s var(--ease-smooth),
                transform 0.8s var(--ease-smooth);
}
[data-animate="fade-right"].animate-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Sağdan sola belirme */
[data-animate="fade-left"] {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s var(--ease-smooth),
                transform 0.8s var(--ease-smooth);
}
[data-animate="fade-left"].animate-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Ölçeklenerek belirme */
[data-animate="scale-up"] {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s var(--ease-smooth),
                transform 0.6s var(--ease-smooth);
}
[data-animate="scale-up"].animate-visible {
    opacity: 1;
    transform: scale(1);
}

/* Gecikmeli animasyonlar - sıralı gösterim için */
[data-animate-delay="100"] { transition-delay: 100ms; }
[data-animate-delay="200"] { transition-delay: 200ms; }
[data-animate-delay="300"] { transition-delay: 300ms; }
[data-animate-delay="400"] { transition-delay: 400ms; }
[data-animate-delay="500"] { transition-delay: 500ms; }
[data-animate-delay="600"] { transition-delay: 600ms; }

/* ═══════════════════════════════════════════════════════════
   6. GÖRSEL ETKİLERİ
   ═══════════════════════════════════════════════════════════ */

/* Siyah-beyaz -> Renkli geçiş (hover) */
.img-grayscale-hover {
    filter: grayscale(100%) brightness(0.7);
    transition: filter 0.7s ease, transform 0.7s ease;
}
.group:hover .img-grayscale-hover,
.img-grayscale-hover:hover {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.03);
}

/* Teknik grid arka planı */
.technical-grid {
    background-image:
        linear-gradient(to right, rgba(39, 39, 42, 0.3) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(39, 39, 42, 0.3) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Primary glow efekti */
.glow-primary {
    box-shadow: 0 0 20px rgba(19, 127, 236, 0.15),
                0 0 60px rgba(19, 127, 236, 0.05);
}

/* ═══════════════════════════════════════════════════════════
   7. BUTON STİLLERİ
   ═══════════════════════════════════════════════════════════ */

/* Pill buton hover efekti */
.btn-primary {
    position: relative;
    overflow: hidden;
}
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.btn-primary:hover::after {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   8. HERO ANİMASYONLARI
   ═══════════════════════════════════════════════════════════ */

/* Hero reveal - sıralı belirme (yavaş, zarif) */
.hero-reveal {
    opacity: 0;
    transform: translateY(40px);
    animation: heroReveal 1.4s var(--ease-smooth) forwards;
    animation-delay: var(--delay, 0s);
}

@keyframes heroReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll çizgisi animasyonu */
.scroll-line {
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.4; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.2); transform-origin: top; }
}

/* Hero video/görsel parallax */
.hero-parallax {
    transition: transform 0.1s linear;
}

/* Hero video overlay */
#hero video {
    filter: brightness(0.5) saturate(0.8);
}

/* ── Hero Marquee Bant ── */
.hero-marquee-track {
    will-change: transform;
}

/* Counter animasyonu */
.counter {
    display: inline-block;
}

/* ═══════════════════════════════════════════════════════════
   9. RESPONSIVE DÜZELTMELER
   ═══════════════════════════════════════════════════════════ */

/* Mobilde canvas animasyonunu hafiflet */
@media (max-width: 768px) {
    #bg-animation {
        opacity: 0.4;
    }
}

/* Küçük ekranlarda aşırı büyük yazıları sınırla */
@media (max-width: 480px) {
    .text-6xl {
        font-size: 2.5rem;
    }
}

/* Hareket azaltma tercihi - erişilebilirlik */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    #bg-animation {
        display: none;
    }

    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   9. LENIS SMOOTH SCROLL OVERRIDE
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   10. LIGHT MODE OVERRIDE'LARI
   ═══════════════════════════════════════════════════════════ */

/*
 * Strateji: Tailwind config artık CSS değişkenlerini kullanıyor,
 * bu yüzden bg-background, bg-surface-container vb. otomatik değişir.
 * Ama hardcoded zinc-*/white class'ları için override gerekiyor.
 * Hero (#hero) ve footer her zaman koyu kalır.
 */

/* ── Genel Tailwind class override'ları (hero & footer hariç) ── */

/* Ana içerik arka planları */
html.light #main-content .bg-zinc-950 { background-color: var(--color-background) !important; }
html.light #main-content .bg-zinc-900 { background-color: var(--color-surface) !important; }
html.light #main-content .bg-zinc-800 { background-color: var(--color-surface-high) !important; }

/* Metin renkleri - tüm section'lar (hero dahil) */
html.light #main-content .text-white { color: var(--color-text) !important; }
html.light #main-content .text-zinc-100 { color: var(--color-text) !important; }
html.light #main-content .text-zinc-200 { color: var(--color-text) !important; }
html.light #main-content .text-zinc-300 { color: var(--color-text-secondary) !important; }
html.light #main-content .text-zinc-400 { color: var(--color-text-muted) !important; }
html.light #main-content .text-zinc-500 { color: var(--color-text-muted) !important; }
html.light #main-content .text-zinc-600 { color: var(--color-text-muted) !important; }

/* Border renkleri */
html.light #main-content .border-zinc-800,
html.light #main-content .border-zinc-700 {
    border-color: var(--color-outline) !important;
}
html.light #main-content .border-zinc-800\/50 { border-color: rgba(206, 212, 218, 0.5) !important; }

/* Opaklıklı arka planlar */
html.light #main-content .bg-zinc-950\/80 { background-color: var(--color-card-bg) !important; }
html.light #main-content .bg-zinc-950\/95 { background-color: rgba(255, 255, 255, 0.95) !important; }
html.light #main-content .bg-white\/5 { background-color: rgba(0, 0, 0, 0.04) !important; }
html.light #main-content .bg-white\/10 { background-color: rgba(0, 0, 0, 0.06) !important; }

/* Scrollbar - light */
html.light ::-webkit-scrollbar-track { background: var(--color-background); }
html.light ::-webkit-scrollbar-thumb { background: var(--color-outline); }
html.light ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
html.light * { scrollbar-color: var(--color-outline) var(--color-background); }

/* ── Header - light ── */
html.light #site-header nav {
    background-color: var(--color-header-bg);
    border-bottom-color: var(--color-card-border);
}
html.light #site-header.header-scrolled nav {
    background-color: var(--color-header-scrolled);
    border-bottom-color: rgba(0, 0, 0, 0.1);
}
html.light #site-header .text-zinc-400,
html.light #site-header .text-zinc-500 {
    color: var(--color-text-muted) !important;
}

/* Navigasyon linkleri - light */
html.light .nav-link { color: var(--color-text-muted); }
html.light .nav-link:hover { color: var(--color-text); background-color: rgba(0, 0, 0, 0.05); }

/* Dropdown - light */
html.light .dropdown-panel > div {
    background-color: rgba(255, 255, 255, 0.95);
    border-color: var(--color-card-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}
html.light .dropdown-panel a { color: var(--color-text-muted); }
html.light .dropdown-panel a:hover { color: var(--color-text); background-color: rgba(0, 0, 0, 0.04); }

/* ── Mobil menü - light ── */
html.light #mobile-menu { background-color: rgba(248, 249, 250, 0.98); }
html.light .mobile-accordion-toggle,
html.light .mobile-menu-link,
html.light #mobile-menu a { color: var(--color-text-muted); }
html.light .mobile-accordion-toggle:hover,
html.light .mobile-menu-link:hover,
html.light #mobile-menu a:hover { color: var(--color-text); }
html.light #mobile-menu .border-zinc-800\/50 { border-color: rgba(0, 0, 0, 0.1) !important; }
html.light #mobile-menu .text-zinc-700 { color: var(--color-outline) !important; }

/* ── Footer - her zaman koyu (override yok) ── */

/* ── Hero - light mode ── */
/* Overlay'ler beyaza döner */
html.light .hero-overlay { background-color: rgba(248, 249, 250, 0.65) !important; }
html.light .hero-vignette { background: radial-gradient(ellipse at center, transparent 0%, rgba(248, 249, 250, 0.9) 75%) !important; }
html.light .hero-gradient { background: linear-gradient(to top, var(--color-background), transparent, rgba(248, 249, 250, 0.4)) !important; }
/* Hero grid hafifleşir */
html.light #hero-grid { opacity: 0.06 !important; }
/* Marquee bandı */
html.light #hero .bg-\[\#09090b\]\/60 { background-color: rgba(248, 249, 250, 0.7) !important; }
html.light #hero .border-white\/\[0\.06\] { border-color: rgba(0, 0, 0, 0.08) !important; }
/* Buton border */
html.light #hero .border-zinc-600 { border-color: var(--color-outline) !important; }
html.light #hero .text-zinc-300 { color: var(--color-text-secondary) !important; }
/* Scroll ipucu */
html.light #hero .bg-zinc-700\/50 { background-color: rgba(206, 212, 218, 0.5) !important; }
html.light #hero .text-zinc-800 { color: var(--color-text-muted) !important; }

/* ── Koyu arka planlı section'lardaki gradient'ler - light mode ── */
html.light #main-content section:not(#hero) [class*="bg-gradient"] {
    --tw-gradient-from: var(--color-surface) !important;
    --tw-gradient-to: var(--color-surface) !important;
}
html.light #main-content section:not(#hero) > .absolute[class*="bg-gradient"] {
    background-image: linear-gradient(to right, var(--color-surface), var(--color-surface-high), var(--color-surface)) !important;
}

/* ── Blog prose - light mode ── */
html.light .blog-prose { --tw-prose-body: var(--color-text-muted); --tw-prose-headings: var(--color-text); --tw-prose-bold: var(--color-text); --tw-prose-counters: var(--color-text-muted); --tw-prose-bullets: var(--color-text-muted); }
html.light .blog-prose h2, html.light .blog-prose h3 { color: var(--color-text) !important; }
html.light .blog-prose strong { color: var(--color-text) !important; }
html.light .blog-prose p, html.light .blog-prose li { color: var(--color-text-muted) !important; }

/* ── Canvas animasyonu - light modda opaklığı düşür ── */
html.light #bg-animation { opacity: 0.08; }

/* ── Hero video - light modda overlay ayarı ── */
html.light #hero video { filter: brightness(0.6) saturate(0.9); }

/* ── Teknik grid - light ── */
html.light .technical-grid {
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
}

/* ── Selection - light ── */
html.light ::selection { background-color: rgba(19, 127, 236, 0.2); color: #1a1a2e; }

/* ── Glow efektleri - light ── */
html.light .glow-primary {
    box-shadow: 0 0 20px rgba(19, 127, 236, 0.1),
                0 0 60px rgba(19, 127, 236, 0.03);
}

/* Logo crossfade */
.logo-swap {
    position: relative;
}
.logo-swap img {
    transition: opacity 0.4s ease;
}
.logo-swap .logo-dark-img {
    opacity: 1;
}
.logo-swap .logo-light-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
html.light .logo-swap .logo-dark-img {
    opacity: 0;
}
html.light .logo-swap .logo-light-img {
    opacity: 1;
}

/* Tema toggle butonu */
.theme-toggle {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid var(--color-outline);
    background: transparent;
    color: var(--color-text-muted);
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.theme-toggle:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: rgba(19, 127, 236, 0.08);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}
.theme-toggle .icon-moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}
html.light .theme-toggle .icon-sun {
    opacity: 1;
    transform: rotate(0) scale(1);
}
html.light .theme-toggle .icon-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

/* ═══════════════════════════════════════════════════════════
   11. DİL TOGGLE SİSTEMİ (İki dil aynı anda render, CSS ile toggle)
   ═══════════════════════════════════════════════════════════ */

html[data-lang="tr"] .lang-en { display: none !important; }
html[data-lang="en"] .lang-tr { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   12. LENIS SMOOTH SCROLL OVERRIDE
   ═══════════════════════════════════════════════════════════ */

html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}