/* ====================== GENEL RESET VE MOBİL DÜZELTMELER ====================== */
html, body {
    overflow-x: hidden;     /* Yatay scroll engelleme - Navbar kayma sorunu için */
    margin: 0;
    padding: 0;
}

/* ====================== GERİ KALAN TÜM CSS'LERİNİZ ====================== */

/* ====================== GENEL AYARLAR ====================== */
h1, h2 {
    font-family: 'Playfair Display', serif;
}

body {
    font-family: 'Inter', sans-serif;
}


/* ====================== HEADER NAVIGATION ====================== */
@media (min-width: 768px) {
    .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #2563eb;
        transition: width 0.3s ease;
    }

    .nav-link:hover::after {
        width: 100%;
    }
}

.nav-scrolled {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* ====================== BLOBS & ANIMATIONS ====================== */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
    animation: blob 10s infinite alternate;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* İkon glow efekti */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
    50% { box-shadow: 0 0 0 15px rgba(59, 130, 246, 0); }
}

.group:hover .icon-glow {
    animation: pulse-glow 1.5s infinite;
}

/* ====================== NEON MAVİ DÖNEN BORDER (KUMAŞ KARTLARI) ====================== */
.animate-border {
    position: relative;
    overflow: hidden;
    background: #1e2937;
    border-radius: 2.75rem;
    padding: 4px;
    transition: transform 0.4s ease;
}

.animate-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(#00f0ff, #00bfff, #1e90ff, #00f0ff);
    border-radius: 2.85rem;
    animation: border-rotate 8s linear infinite;
    z-index: -1;
    filter: brightness(1.3) saturate(1.9);
    box-shadow: 0 0 15px #00f0ff,
                0 0 30px rgba(0, 191, 255, 0.7);
}

.animate-border .inner-card {
    background: #ffffff !important;        /* ← Beyaz yaptık */
    border-radius: 2.5rem;
    height: 100%;
    padding: 1rem;
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.08);   /* Hafif güzel gölge */
}

@keyframes border-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.animate-border:hover {
    transform: translateY(-8px);
}

.animate-border:hover::before {
    animation-duration: 4.5s;
    filter: brightness(1.5) saturate(2.2);
    box-shadow: 0 0 20px #00f0ff,
               0 0 40px #00bfff;
}

/* Sayfa kaydırıldığında devreye giren Kavisli & Yüzen Navbar */
.nav-scrolled {
    /* Navbar'ı bir kapsül haline getirir */
    width: 90% !important; /* Ekranın %90'ını kaplar, yanlardan boşluk bırakır */
    left: 5% !important;   /* Tam ortada durması için yan boşluk */
    margin-top: 15px !important; /* Üstten biraz boşluk bırakarak havada süzülür */
    border-radius: 50px !important; /* Köşeleri tamamen oval yapar */
    
    /* Arka plan: Ultra şeffaf cam efekti */
    background-color: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(25px) brightness(1.1) !important;
    -webkit-backdrop-filter: blur(25px) brightness(1.1) !important;

    /* Estetik detaylar */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}

/* Koyu arka plan üzerinde navbar */
.nav-dark .nav-link,
.nav-dark span.text-white,
.nav-dark #mobile-menu-btn {
    color: #ffffff !important;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Açık arka plan üzerinde navbar */
.nav-light .nav-link,
.nav-light span.text-white,
.nav-light #mobile-menu-btn {
    color: #1e293b !important;
    text-shadow: none !important;
}

.nav-light span.text-blue-400 {
    color: #2563eb !important;
}

/* Nav-link animasyonunun video üzerinde daha net görünmesi için renk ayarı */
@media (min-width: 768px) {
    .nav-link::after {
        background-color: #60a5fa; /* Daha açık, neonumsu bir mavi (blue-400) video üzerinde daha iyi durur */
    }
}

/* Mobilde kapsülün çok daralmaması için ayar */
@media (max-width: 768px) {
    .nav-scrolled {
        width: 95% !important;
        left: 2.5% !important;
    }
}



/* Sayfanın tamamında scroll snap özelliğini aktif et */
html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    /* Navbar'ın kartın üstüne binmesini önlemek için navbar yüksekliği kadar boşluk bırakırız */
    scroll-padding-top: 80px; 
}

/* Her bir ana section'ın ekranın başına yapışmasını sağla */
section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}




/* ====================== TEK RENK NEON BORDER ====================== */

.animate-border {
    position: relative;
    overflow: hidden;
    background: #1e2937;
    border-radius: 2.75rem;
    padding: 4px;
    transition: transform 0.4s ease;
}

.animate-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--neon-color);
    border-radius: 2.85rem;
    animation: border-rotate 8s linear infinite;
    z-index: -1;
    box-shadow: 0 0 25px var(--neon-color),
                0 0 50px var(--neon-color);
    filter: brightness(1.4);
}

.animate-border:hover::before {
    animation-duration: 4s;
    filter: brightness(1.7);
    box-shadow: 0 0 35px var(--neon-color),
                0 0 70px var(--neon-color);
}

/* ====================== KARTLARIN KENDİ NEON RENKLERİ ====================== */

.keten-card       { --neon-color: #cf6943; }   /* Keten */

.pamuk-card       { --neon-color: #1b637d; }   /* Pamuk Velvet */

.yun-kumas-card   { --neon-color: #c4b1a0; }   /* Yün Kumaş - #a0a0a0 → şimdi #c4b1a0 ile uyumlu */

.viscon-card      { --neon-color: #c47cff; }   /* Viscon Polyester */

.yun-poly-card    { --neon-color: #64584d; }   /* Yün Polyester */