/* --- Değişkenler ve Reset --- */
:root {
    --sportik-dark: #1e3a5f;
    --sportik-orange: #f39200;
    --sportik-light: #f8f9fa;
}

body { 
    font-family: 'Poppins', sans-serif; 
    background-color: var(--sportik-light); 
    overflow-x: hidden; 
}

/* --- Navbar: Floating (Asılı) ve Çerçevesiz Yapı --- */
.navbar.floating-nav {
    background: transparent !important; /* Beyaz bandı yok ettik */
    box-shadow: none !important;
    border: none !important;
    padding: 0;
    z-index: 1100;
    pointer-events: none; /* Navbar alanının boş yerleri tıklamayı engellemesin */
}

/* Sadece logo ve butonu tıklanabilir yapıyoruz */
.fixed-logo, .fixed-button-wrapper {
    pointer-events: auto;
}

/* Logo: Sola Çivili ve Görkemli Boyut */
/* --- Logo: Köşeye Sıfırlama ve Yuvarlatma --- */
.fixed-logo {
    position: fixed;
    left: 0 !important;   /* Sola tam sıfır */
    top: 0 !important;    /* Üste tam sıfır */
    z-index: 1200;
    background: white;     /* Logonun arkasındaki beyaz kutu */
    padding: 15px 20px;    /* Kutunun iç genişliği (Logo nefes alsın) */
    
    /* Köşeleri Yuvarlatma: 
       Sol ve üst köşeler sıfıra dayandığı için sadece sağ alt köşeyi 
       yuvarlatmak "modern bir sekme" hissi verir. 
    */
    border-bottom-right-radius: 30px; 
    
    /* İsteğe bağlı: Eğer logonun bir yüzen çip gibi durmasını istersen
       Aşağıdaki satırı kullanabilirsin (Tüm köşeler yuvarlak):
       border-radius: 0 0 30px 0; 
    */
    
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1); /* Hafif bir derinlik */
    transition: all 0.3s ease;
}

.fixed-logo img {
    height: 100px; /* Logo boyutunu ihtiyaca göre buradan ayarla */
    width: auto;
    filter: none; /* Arka plan beyaz olduğu için drop-shadow'a gerek kalmadı */
}

/* --- Sağdaki Butonu da Üste Yaklaştıralım (Denge için) --- */
.fixed-button-wrapper {
    position: fixed;
    right: 30px;
    top: 30px; /* Köşeye daha yakın ve dengeli */
    z-index: 1200;
}

/* --- Hero Section: Video & Blur --- */
.hero-section {
    position: relative;
    min-height: 40vh; /* 20'den 70'e çektik, görkemli dursun */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: white;
    padding: 50px 0 60px 0; /* Logo ile metin arasında nefes payı */
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
    background-color: var(--sportik-dark);
}

.hero-section h1 {
    font-size: clamp(1.5rem, 3.7vw, 3.5rem); 
    font-weight: 700;
	white-space: normal; /* <br> kullandığın için nowrap özelliğini mutlaka silmelisiniz */
    line-height: 1.2;    /* Satır aralığını daraltarak metni toplar */
    position: relative;
    z-index: 3;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Hem karartma hem de metnin altına derinlik katma */
    background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0.4) 0%,   /* Üst taraf bir tık açık */
        rgba(0, 0, 0, 0.7) 50%,  /* Metnin olduğu orta alan en koyu (Okunabilirlik için) */
        rgba(0, 0, 0, 0.5) 100%  /* Alt taraf orta koyulukta */
    );
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 3;
}

/* --- Butonlar --- */
.btn-sportik {
    background-color: var(--sportik-orange);
    color: white;
    font-weight: 600;
    border-radius: 50px;
    padding: 14px 35px;
    border: none;
    transition: 0.3s;
}
.hero-pre-title {
    display: inline-block;
    padding-top: 40px;          /* İstediğin o üst boşluk */
    margin-bottom: 20px !important;
    font-size: 1.7rem !important; /* Bir tık daha büyük */
    font-weight: 700 !important;
    color: var(--sportik-orange); /* Beyaz yerine turuncu yaparak vurguyu artırabilirsin */
    letter-spacing: 3px;         /* Daha kurumsal bir hava katar */
    text-transform: uppercase;
    border-bottom: 2px solid var(--sportik-orange); /* Altına ince bir çizgi ile vurgu tavan yapar */
    padding-bottom: 5px;
}
.btn-sportik:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 10px 20px rgba(243, 146, 0, 0.4);
    background-color: #d68100;
}

/* --- Kartlar (Ortalanmış) --- */
.features-section {
    padding: 20px 0;
    margin-top: -10px; 
    z-index: 10;
    position: relative;
}

.feature-card {
    background: white;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 0.3s;
    height: 100%;
}

.feature-card:hover { transform: translateY(-12px); }

.icon-box {
    width: 100px; height: 100px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sportik-light);
    border-radius: 5px; margin-bottom: 6px;
}

.icon-img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* --- Responsive (Mobil) --- */
@media (max-width: 768px) {
    .navbar.floating-nav {
        background: white !important; /* Mobilde okunurluk için bant geri gelir */
        padding: 10px 0;
        pointer-events: auto;
    }
    
    .fixed-logo, .fixed-button-wrapper {
        position: static;
        margin: 10px auto;
        text-align: center;
        display: block;
    }

    .fixed-logo img { height: 70px; }
}