/* styles.css */

/* 1. TEMEL AYARLAR VE CLOAK */
[x-cloak] { display: none !important; }
body { transition: background-color 0.3s; }

/* Ana sayfa scroll kilidi (bottom sheet açıkken) */
body.menu-open {
    overflow: hidden;
}

/* 2. NAVIGASYON VE GLASS EFFECT */
.glass-nav { 
    background: rgba(255, 255, 255, 0.8); 
    backdrop-filter: blur(12px); 
    border-bottom: 1px solid rgba(66, 71, 112, 0.08); 
}
.dark .glass-nav { 
    background: rgba(10, 37, 64, 0.8); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
}

/* 3. KARTLAR VE ETKİLEŞİMLER */
.stripe-card { transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }
.glow-text { 
    color: #635BFF; 
    background: rgba(99, 91, 255, 0.1); 
    padding: 2px 4px; 
    border-radius: 4px; 
    font-weight: 600; 
}
.btn-primary { 
    background-color: #635BFF; 
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11); 
}

.platform-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.platform-card:hover { transform: translateY(-5px); }
.dark .platform-card { background: rgba(255, 255, 255, 0.03); }

/* 4. SCROLLBAR VE ANİMASYONLAR */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes shine {
    100% { left: 125%; }
}
.animate-shine {
    animation: shine 0.8s ease-in-out infinite;
}

.coffee-btn:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(255, 221, 0, 0.4);
}

/* 5. BOTTOM SHEET SCROLL */
.bottom-sheet-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.bottom-sheet-scroll::-webkit-scrollbar {
    width: 4px;
}
.bottom-sheet-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.bottom-sheet-scroll::-webkit-scrollbar-thumb {
    background: rgba(99, 91, 255, 0.3);
    border-radius: 10px;
}

/* 6. MOBİL RESPONSIVE BAŞLIKLAR VE BUTONLAR */
@media (max-width: 768px) {
    /* Hero başlık */
    h1 {
        font-size: 2.5rem !important;
        line-height: 1.1;
    }
    
    /* Hero alt başlık */
    header > p {
        font-size: 1rem !important;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Header padding */
    header {
        padding-top: 4rem !important;
        padding-bottom: 3rem !important;
    }
    
    /* Step numaraları */
    header .flex-shrink-0 {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Step başlıkları */
    header h4 {
        font-size: 1rem !important;
    }
    
    /* Step açıklamaları */
    header .grid p {
        font-size: 0.75rem !important;
        padding-left: 2.75rem !important;
    }
    
    /* Step gap */
    header .flex.items-center {
        gap: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    header .grid {
        gap: 1.5rem !important;
        margin-top: 3rem !important;
        padding-top: 3rem !important;
    }
    
    /* Mobil navigation butonları - HORIZONTAL SCROLL */
    nav .md\:hidden button {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.5625rem !important;
    }
    
    nav .md\:hidden button svg {
        width: 0.625rem !important;
        height: 0.625rem !important;
    }
    
    /* Bottom Sheet kategori butonları */
    .bottom-sheet-scroll .grid {
        gap: 0.625rem !important;
    }
    
    .bottom-sheet-scroll button {
        padding: 0.75rem !important;
    }
    
    .bottom-sheet-scroll button > div:first-child {
        font-size: 1.25rem !important;
        margin-bottom: 0.375rem !important;
    }
    
    .bottom-sheet-scroll button span {
        font-size: 0.5625rem !important;
    }
    
    /* Badge */
    header > div:first-child {
        font-size: 0.625rem !important;
        margin-bottom: 1.5rem !important;
    }
}