/* --- GENEL AYARLAR --- */
html, body {
    background-color: #12171C;
    font-family: 'Inter', sans-serif;
    color: #fff;
    margin: 0; padding: 0;
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* --- ORTAK ANİMASYONLAR --- */
@keyframes star-float-up {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(-50px); opacity: 0; }
}

@keyframes glow-pulse {
    0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1, 0.95); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.15, 1.1); } 
}

@keyframes btn-shine { 
    0% { left: -100%; } 25% { left: 150%; } 100% { left: 150%; } 
}

@keyframes breath-effect {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(0.95); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.05); } 
}

@keyframes fast-fade-in { 
    0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } 
}

/* --- ORTAK BUTON STİLLERİ (HER YERDE KULLANILABİLİR) --- */
.hero-btns { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; }

.btn-pressed-style {
    position: relative; padding: 14px 35px; border-radius: 50px; font-weight: 700; 
    text-decoration: none; display: inline-block; transition: all 0.3s ease; 
    color: #ffffff; overflow: hidden; 
}

.btn-green { 
    background-color: #C8FF1A; color: #12171C !important; 
    box-shadow: inset 0 4px 8px rgba(40, 51, 5, 0.2), 0 4px 15px rgba(200, 255, 26, 0.3); 
}

.btn-green::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg); animation: btn-shine 4s infinite ease-in-out;
}

.btn-dark { 
    background-color: rgba(255, 255, 255, 0.05); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
}

/* MOBİL İÇİN GENEL AYAR */
@media (max-width: 768px) {
    .hero-btns { flex-direction: column; align-items: center; gap: 12px; }
    .btn-pressed-style { width: 90%; text-align: center; }
}