/* public/style.css */
:root {
    /* Ana Tema Renkleri (Turkuaz Deniz & Mavi Gökyüzü) */
    --sky-blue-light: #A0D2DB;   /* Açık, yumuşak gökyüzü mavisi */
    --sky-blue-medium: #74B4C4;  /* Orta ton gökyüzü mavisi (ana etkileşim) */
    --sky-blue-rgb: 160, 210, 219; /* --sky-blue-light için RGB (rgba() içinde kullanılır) */
    --turquoise-sea: #48D1CC;     /* Canlı turkuaz */
    --turquoise-sea-rgb: 72, 209, 204; /* --turquoise-sea için RGB */
    --deep-sea-blue: #2E4F60;   /* Koyu, tok deniz mavisi (Navbar, Footer) */
    --deep-sea-blue-rgb: 46, 79, 96; /* --deep-sea-blue'nun RGB karşılığı (rgba için) */
    
    /* Gri Tonları */
    --sand-gray: #f4f6f8;         /* Çok açık kum grisi (Sayfa Arka Planı) */
    --cloud-gray: #e9ecef;        /* Bulut grisi (Kartlar, alternatif bg) */
    --rock-gray: #869099;         /* Kaya grisi (İkincil butonlar, metinler) */
    --border-gray: #ced4da;       /* Sınır çizgileri için gri */
    
    /* Metin Renkleri */
    --text-dark: #2E4052;         /* Koyu metin (hafif maviye çalan) */
    --text-light: #f8f9fa;        /* Açık metin */
    --text-muted: #6c757d;       /* Sönük metin */

    /* Buton Renkleri (Yüklenen CSS'den gelenler ve eklenenler) */
    --button-secondary-bg: var(--rock-gray);
    --button-secondary-text: var(--text-light);
    --button-secondary-hover-bg: #707880; 
    --button-secondary-hover-border: #60676d;

    --button-primary-bg: var(--sky-blue-medium); /* Modallardaki ana butonlar için */
    --button-primary-text: var(--deep-sea-blue);
    --button-primary-border: var(--sky-blue-medium);
    --button-primary-hover-bg: #63a1b0; 
    --button-primary-hover-border: #5a93a2;

    --button-cta-bg: var(--turquoise-sea); /* Hero ve Üyelik ana CTA */
    --button-cta-text: var(--deep-sea-blue);
    --button-cta-border: var(--turquoise-sea);
    --button-cta-hover-bg: #3dbbb6;
    --button-cta-hover-border: #3aa9a4;
    
    --button-success-bg: #198754; /* Bootstrap success yeşili - İletişim formu */
    --button-success-text: #FFFFFF;
    --button-success-border: #198754;
    --button-success-hover-bg: #157347;
    --button-success-hover-border: #146940;

    --button-outline-light-text: var(--text-light);
    --button-outline-light-border: rgba(255, 255, 255, 0.5);
    --button-outline-light-hover-text: var(--deep-sea-blue);
    --button-outline-light-hover-bg: var(--text-light);

    /* Navbar Yüksekliği */
    --navbar-height: 65px; 
}

body {
    padding-top: var(--navbar-height); 
    scroll-behavior: smooth;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--sand-gray); 
    color: var(--text-dark);
    line-height: 1.7;
}

/* Navbar Stilleri */
#mainNavbar, #appNavbar {
    background-color: var(--deep-sea-blue) !important;
    transition: background-color 0.3s ease-in-out;
    padding-top: 0.65rem; 
    padding-bottom: 0.65rem;
    border-bottom: 2px solid var(--turquoise-sea);
    z-index: 1050; /* Diğer sticky elementlerin üzerinde kalması için */
}
#appNavbar .dropdown-menu {
    background-color: var(--deep-sea-blue) !important;
    position: absolute; /* Bootstrap zaten bunu yapar ama teyit edelim */
    z-index: 1060;  /* Navbar'ın z-index'inden (1050) daha yüksek olmalı */
    /* Bootstrap'in dropdown-menu-end sınıfı sağa hizalamayı yapar,
       ekstra konumlandırmaya genellikle gerek kalmaz. */
}
#appNavbar .nav-item.dropdown .nav-link.dropdown-toggle {
    display: flex;
    align-items: center;
    padding-top: 0.5rem; /* Navbar linkleriyle aynı hizada olması için */
    padding-bottom: 0.5rem;
}
#mainNavbar .navbar-brand, #appNavbar .navbar-brand {
    color: var(--text-light) !important; 
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}
#navbarLogo, #offcanvasNavbarLogo, #navbarAppLogo {
    max-height: 45px; /* Yüklediğiniz CSS'de 60px idi, navbar için 35px daha uygun */
    width: auto;      
    border-radius: 4px; 
    margin-right: 10px;
}
#mainNavbar .nav-link, #appNavbar .nav-link,
#mainNavbar .dropdown-item, #appNavbar .dropdown-item {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    padding: 0.6rem 1rem;
    border-radius: 4px;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, transform 0.2s ease-out;
}
#mainNavbar .nav-link:hover, #mainNavbar .nav-link.active,
#appNavbar .nav-link:hover, #appNavbar .nav-link.active,
#mainNavbar .dropdown-item:hover, #appNavbar .dropdown-item:hover,
#mainNavbar .dropdown-item:focus, #appNavbar .dropdown-item:focus {
    color: #FFFFFF !important;
    background-color: rgba(var(--sky-blue-rgb), 0.15); 
}
#appNavbar .dropdown-item.text-danger:hover, 
#appNavbar .dropdown-item.text-danger:focus {
    color: #FFFFFF !important; 
    background-color: rgba(220, 53, 69, 0.2); 
}
#mainNavbar .navbar-toggler, #appNavbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.4);
}
#mainNavbar .navbar-toggler-icon, #appNavbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Navbar Butonları (Bootstrap Sınıflarını Temaya Uygun Hale Getirme) */
/* index.html'deki Giriş butonu (btn-outline-light) */
#mainNavbar .btn-outline-light {
    color: var(--button-outline-light-text);
    border-color: var(--button-outline-light-border);
}
#mainNavbar .btn-outline-light:hover {
    color: var(--button-outline-light-hover-text);
    background-color: var(--button-outline-light-hover-bg);
    border-color: var(--button-outline-light-hover-bg);
}
/* index.html'deki Ücretsiz Kayıt butonu (btn-warning) */
#mainNavbar .btn-warning {
    background-color: var(--button-secondary-bg) !important; 
    border-color: var(--button-secondary-border) !important;
    color: var(--button-secondary-text) !important;
}
#mainNavbar .btn-warning:hover {
    background-color: var(--button-secondary-hover-bg) !important;
    border-color: var(--button-secondary-hover-border) !important;
}
/* app.html'deki Logout butonu (btn-warning kullanılıyordu HTML'de, ama dropdown-item text-danger daha baskın) */
/* Eğer #appNavbar içinde farklı bir .btn-warning varsa onu da buraya ekleyebilirsiniz */


/* Offcanvas Menü Stilleri */
.offcanvas { 
    background-color: var(--deep-sea-blue) !important; 
    color: var(--text-light);
}
.offcanvas-header {
    border-bottom: 1px solid rgba(var(--turquoise-sea-rgb), 0.5);
}
.offcanvas-title img {
    max-height: 30px; width: auto; border-radius: 3px;
}
.offcanvas-body .nav-link:hover, /* Yukarıda tanımlı */
.offcanvas-body .nav-link.active { /* Yukarıda tanımlı */ }
.offcanvas-body .btn-outline-light:hover { /* Yukarıda tanımlı */ }


/* Hero Bölümü (Anasayfa - index.html) */
header#anasayfa {
    /* Arka plan görselini kendi görselinizle değiştirin veya temanıza uygun bir renk kullanın */
    background: linear-gradient(rgba(var(--deep-sea-blue-rgb), 0.75), rgba(var(--deep-sea-blue-rgb), 0.85)), url('../src/background.jpg') no-repeat center center;
    background-size: cover;
    min-height: calc(90vh - var(--navbar-height));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    position: relative;
}
header#anasayfa::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(var(--deep-sea-blue-rgb), 0.1); 
    z-index: 1;
}
#heroLogo { /* index.html'deki büyük logo */
    max-height: 100px; 
    width: auto;      
    border-radius: 8px;
    background-color: rgba(255,255,255,0.1);
    padding: 8px;
    margin-bottom: 1.5rem;
    position: relative; z-index: 2;
}
header#anasayfa .hero-content { 
    padding: 2.5rem; 
    position: relative; z-index: 2;
}
header#anasayfa .lead { color: #e8f1f5; font-size: 1.25rem; }
/* Hero CTA Butonu (index.html'de btn-cta-custom kullanılmalı) */
.btn-cta-custom { 
    background-color: var(--button-cta-bg); 
    border-color: var(--button-cta-border);
    color: var(--button-cta-text) !important; 
    font-weight: bold;
    padding: 0.75rem 1.5rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn-cta-custom:hover {
    background-color: var(--button-cta-hover-bg); 
    border-color: var(--button-cta-hover-border);
}
header#anasayfa .btn-outline-light { /* Hero'daki diğer outline buton */
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border-width: 2px;
}

/* Genel Bölüm Başlıkları */
.section-title {
    color: var(--deep-sea-blue); 
    margin-bottom: 2.5rem;
    position: relative;
    padding-bottom: 1rem;
    font-weight: 600;
}
.section-title::after {
    content: ''; display: block; width: 70px; height: 3px; 
    background-color: var(--turquoise-sea); 
    margin: 1rem auto 0;
}
.section-title-dark { color: var(--deep-sea-blue); }
.section-title-dark::after { background-color: var(--deep-sea-blue); }

/* Arka Plan ve Metin Yardımcı Sınıfları */
.bg-cloud-gray { background-color: var(--cloud-gray); padding-top: 4rem; padding-bottom: 4rem;}
.text-deep-sea { color: var(--deep-sea-blue) !important; }
.text-rock-gray { color: var(--rock-gray) !important; }
.text-turquoise-sea { color: var(--turquoise-sea) !important; }
.text-sky-blue-medium { color: var(--sky-blue-medium) !important; }

/* Ayırıcı Çizgi */
.hr-custom {
    border: 0; height: 1px;
    background-image: linear-gradient(to right, rgba(var(--deep-sea-blue-rgb), 0), rgba(var(--deep-sea-blue-rgb), 0.4), rgba(var(--deep-sea-blue-rgb), 0));
    margin-top: 3.5rem; margin-bottom: 3.5rem;
}

/* Kart Stilleri */
.card { 
    border: 1px solid var(--border-gray); 
    border-radius: 0.5rem; 
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.card:hover { 
    transform: translateY(-5px);
    box-shadow: 0 0.6rem 1.2rem rgba(var(--deep-sea-blue-rgb), 0.12) !important;
}
/* Abonelik ve Üyelik kart başlıkları */
#abonelik .card .card-header, #uyelik .card .card-header { 
    font-weight: 500; 
    background-color: var(--cloud-gray);
    color: var(--deep-sea-blue);
    border-bottom: 1px solid var(--border-gray);
}
/* Kart içindeki ana eylem butonları (HTML'de btn-primary kullanılırsa) */
.card .btn-primary { 
    background-color: var(--button-primary-bg) !important;
    border-color: var(--button-primary-border) !important;
    color: var(--button-primary-text) !important;
}
.card .btn-primary:hover { 
    background-color: var(--button-primary-hover-bg) !important;
    border-color: var(--button-primary-hover-border) !important;
}
/* Kart içindeki ikincil butonlar (HTML'de btn-secondary veya temalı btn-warning kullanılırsa) */
.card .btn-secondary, .card .btn-warning { 
    background-color: var(--button-secondary-bg) !important; 
    border-color: var(--button-secondary-border) !important; 
    color: var(--button-secondary-text) !important;
}
.card .btn-secondary:hover, .card .btn-warning:hover { 
    background-color: var(--button-secondary-hover-bg) !important; 
    border-color: var(--button-secondary-hover-border) !important; 
}
/* Abonelik öne çıkan kart */
.card-highlighted { border-left: 5px solid var(--turquoise-sea); }
.card-header-highlighted {
    background-color: var(--turquoise-sea) !important;
    color: var(--deep-sea-blue) !important; 
    border-color: var(--turquoise-sea) !important;
}
/* Abonelik öne çıkan karttaki buton (HTML'de btn-warning veya .btn-cta-highlighted) */
.card-highlighted .btn-warning, .btn-cta-highlighted {
    background-color: var(--turquoise-sea) !important;
    border-color: var(--turquoise-sea) !important;
    color: var(--deep-sea-blue) !important;
}
.card-highlighted .btn-warning:hover, .btn-cta-highlighted:hover {
    background-color: #3dbbb6 !important;
    border-color: #3aa9a4 !important;
}


/* Footer Stilleri */
footer { 
    background-color: var(--deep-sea-blue); 
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    color: rgba(255,255,255,0.75);
}
footer a { color: rgba(255,255,255,0.85); text-decoration: none; }
footer a:hover { color: #FFFFFF; text-decoration: underline; }

/* Modal Stilleri */
.modal-header-custom { /* Login, Register, OTP için */
    background-color: var(--deep-sea-blue) !important; 
    color: #FFFFFF;
    border-bottom: 3px solid var(--turquoise-sea);
}
.modal-header-custom-success { /* Bize Ulaşın için */
    background-color: var(--turquoise-sea) !important; 
    color: var(--deep-sea-blue); 
    border-bottom: 3px solid var(--deep-sea-blue);
}
.modal-header-app { /* app.html içindeki modallar için */
    background-color: var(--sky-blue-medium) !important; 
    color: var(--deep-sea-blue); 
    border-bottom: 2px solid var(--deep-sea-blue);
}
.modal-header .btn-close-white { /* Koyu başlıklar için Bootstrap'in beyaz kapatma butonu */ }
.modal-header-app .btn-close, .modal-header-custom-success .btn-close { 
    filter: brightness(0.2) invert(0.1); /* Açık renkli başlıklar için kapatma butonunu koyulaştırır */
}
.modal-content {
    border: none;
    border-radius: 0.5rem; 
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
.modal-body .alert { margin-bottom: 1.25rem; }
.modal-footer { background-color: var(--cloud-gray); border-top: 1px solid var(--ma-border-gray); }
.modal-footer .btn-link { color: var(--sky-blue-medium); font-weight: bold; }
.modal-footer .btn-link:hover { color: var(--deep-sea-blue); }

#otpCode { letter-spacing: 0.8em; font-weight: bold; }

/* app.html özel stiller */
.app-container { background-color: #FFFFFF; border-radius: 0.5rem; padding: 2rem; box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.07); }
.card-custom { border-left: 4px solid var(--sky-blue-medium); } /* app.html dashboard kartları */

.app-section {
    display: none; 
    background-color: #fff;
    padding: 2rem; 
    border-radius: 0.5rem; 
    box-shadow: 0 0.125rem 0.35rem rgba(var(--deep-sea-blue-rgb), 0.08); 
    margin-bottom: 2rem;
}
.app-section.active { display: block; }


/* --- Sticky Alert Konumlandırma Düzeltmeleri --- */
#mainAlertMessageContainer, 
#alertAppMessageContainer {
    position: sticky;
    top: calc(var(--navbar-height) + 8px); /* Navbar'ın hemen altına, 8px boşlukla */
    z-index: 1045; /* Navbar z-index'i (1050) altında, sayfa içeriği üzerinde */
    width: 100%;
    pointer-events: none; /* Kapsayıcı tıklanamaz */
    margin-bottom: 0; /* JS ile gösterildiğinde margin eklenebilir veya içindeki alert'e */
    display: none; /* Başlangıçta gizli, JS ile gösterilecek */
}

#mainAlertMessageContainer .alert, 
#alertAppMessageContainer .alert {
    border-radius: 0.375rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1);
    pointer-events: auto; /* Alert'in kendisi tıklanabilir */
    margin: 0 auto 1rem auto; 
    max-width: 90%; 
    width: auto; /* İçeriğe göre genişlesin ama max-width ile sınırlı */
    display: table; /* Ortalama için, eğer alert'in kendisi inline-block gibi davranıyorsa */
}
@media (min-width: 768px) {
    #mainAlertMessageContainer .alert, 
    #alertAppMessageContainer .alert {
        max-width: 600px; 
    }
}

/* Form Doğrulama Stilleri */
.needs-validation input:invalid,
.needs-validation textarea:invalid,
.needs-validation select:invalid {
    border-color: #dc3545; /* Bootstrap danger color */
}
/* Başarılı validasyon için yeşil çerçeve (isteğe bağlı) */

.needs-validation input:valid,
.needs-validation textarea:valid,
.needs-validation select:valid {
    border-color: #198754; 
}