/* =============================================
   Arzu Mikdan - Global Stil Dosyası
   Awwwards Premium UI
   ============================================= */

/* ---- Temel Sıfırlama ---- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* Lenis pürüzsüz kaydırma için scroll davranışı kapalı bırakılır */
    scroll-behavior: auto;
    /* iOS/Android overscroll bounce beyazlığını engelle */
    background-color: #1c1c1a;
}

body {
    cursor: none; /* Varsayılan imleci gizle, özel imleç kullanılacak */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Dokunmatik cihazlarda varsayılan imleç geri gelsin */
@media (hover: none) {
    body { cursor: auto; }
    .custom-cursor-dot,
    .custom-cursor-ring { display: none; }
}

/* =============================================
   ÖZEL İMLEÇ (Custom Cursor)
   ============================================= */
.custom-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background: #8B6F47;     /* zen-bark */
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease, opacity 0.3s ease;
    will-change: transform;
}

.custom-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border: 1.5px solid #8B6F47;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: transform 0.08s linear, width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
    will-change: transform;
    opacity: 0.6;
}

/* Hover durumunda imleç büyür */
body.cursor-hover .custom-cursor-ring {
    width: 64px;
    height: 64px;
    opacity: 0.4;
}

/* Tıklamada küçülür */
body.cursor-click .custom-cursor-dot {
    transform: translate(-50%, -50%) scale(1.8);
}

/* =============================================
   SAYFA GEÇİŞ OVERLAY
   ============================================= */
.page-overlay {
    position: fixed;
    inset: 0;
    background: #F5F0E8;     /* zen-cream */
    z-index: 8000;
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: bottom;
}

/* =============================================
   HERO SECTION
   ============================================= */
.hero-section {
    will-change: transform;
}

/* Clip-path maskesi (JS ile kontrol edilir) */
.hero-mask {
    transform-origin: top;
    /* Başlangıçta tam ekranı kapatır, JS animasyonu açar */
}

/* Başlık satırlarının overflow-hidden içindeki span'ları */
.hero-line {
    display: block;
    transform: translateY(110%);
    will-change: transform;
}

/* =============================================
   NAVİGASYON
   ============================================= */
#main-nav {
    /* Mix-blend-difference: nav, açık zeminde koyu, koyu zeminde açık görünür */
    will-change: transform;
    transition: background 0.4s ease;
}

/* Scroll sonrası nav arka planı */
#main-nav.scrolled {
    background: rgba(44, 44, 44, 0.95);
    backdrop-filter: blur(8px);
    mix-blend-mode: normal;
}

/* =============================================
   MAGNETİK BUTONLAR
   ============================================= */
.magnetic-btn {
    position: relative;
    display: inline-block;
    cursor: none;
    /* JS ile transform uygulanacak */
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
}

/* =============================================
   MARQUEE (Kayan Yazı Şeridi)
   ============================================= */
.marquee-track {
    animation: marquee-scroll 25s linear infinite;
    /* Öğelerin toplam genişliğinin iki katı kadar container gerekir */
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* =============================================
   SCROLL GÖSTERGE ANİMASYONU
   ============================================= */
.scroll-line-inner {
    animation: scroll-bounce 1.8s ease-in-out infinite;
}

@keyframes scroll-bounce {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(200%); }
}

/* =============================================
   GENEL YARDIMCI SINIFLAR
   ============================================= */

/* Reveal animasyonları için başlangıç durumu (JS ekler) */
.reveal-hidden {
    opacity: 0;
    transform: translateY(40px);
}

/* Smooth geçiş */
.reveal-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Görsel maskeleme (intro resim) */
.intro-img-wrap {
    overflow: hidden;
    will-change: clip-path;
}

/* =============================================
   ERİŞİLEBİLİRLİK: Hareket azaltma
   ============================================= */
@media (prefers-reduced-motion: reduce) {
    .hero-line,
    .hero-mask,
    .marquee-track,
    .scroll-line-inner,
    .magnetic-btn {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        clip-path: none !important;
    }
}

/* =============================================
   MOBİL: VIEWPORT YÜKSEKLİĞİ DÜZELTMESİ
   100vh, mobil tarayıcı toolbar'ını hesaba KATMAZ.
   İlk açılışta hero tam viewport'a sığsın diye
   100svh (small viewport height) kullanılır.
   Eski tarayıcılar için 100vh fallback önce yazılır.
   ============================================= */
@supports (min-height: 100svh) {
    @media (max-width: 767px) {
        #hero {
            min-height: 100svh;
        }
    }
}

/* Hero metin alanı alt padding: alt nav (≈70px) + safe-area + boşluk.
   md ve üzerinde Tailwind'in kendi py-32 değeri geçerlidir. */
@media (max-width: 767px) {
    .pb-hero-mobile {
        padding-bottom: max(6rem, calc(4.5rem + env(safe-area-inset-bottom, 0px)));
    }
}

/* =============================================
   MOBİL ALT NAVİGASYON — Cross-browser Düzeltmesi
   Bazı tarayıcılarda (GSAP transform uygulanan
   ata element varsa) fixed konumlama bozulabilir.
   GPU katmanına alarak bu sorun önlenir.
   ============================================= */
#bottom-nav {
    /* GPU layer — fixed positioning'i atadan bağımsız kılar */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    /* iOS momentum scroll sırasında kaymaması için */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}