/* MODERN GLASS DESIGN - 2026 FINAL */

/* 1. GENEL SAYFA YAPISI */
body {
    /* Derin gradyan arka plan */
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    background-attachment: fixed; /* Arka plan sabit kalsın */
    color: #ecf0f1;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* Footer'ı aşağı itmek için gerekli ayarlar */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 2. NAVBAR (Buzlu Cam Efekti) */
.navbar {
    background: rgba(0, 0, 0, 0.6) !important; /* Yarı saydam siyah */
    backdrop-filter: blur(12px); /* Arkayı buzlu gösterir */
    border-bottom: 1px solid rgba(0, 210, 211, 0.5); /* Neon turkuaz çizgi */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.navbar-brand {
    color: #00d2d3 !important;
    font-weight: 800;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(0, 210, 211, 0.6); /* Hafif neon parlama */
}

/* Navbar Linkleri */
.nav-link {
    color: rgba(255,255,255,0.8) !important;
    transition: 0.3s;
}
.nav-link:hover, .nav-link.active {
    color: #00d2d3 !important;
    text-shadow: 0 0 5px rgba(0, 210, 211, 0.5);
}

/* Dropdown Menü (Glass) */
.dropdown-menu {
    background: rgba(15, 12, 41, 0.95);
    border: 1px solid rgba(0, 210, 211, 0.3);
}
.dropdown-item { color: #fff; }
.dropdown-item:hover { background-color: #00d2d3; color: #000; }

/* Arama Çubuğu */
.form-control {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}
.form-control::placeholder { color: rgba(255,255,255,0.5); }
.form-control:focus {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 10px rgba(0, 210, 211, 0.3);
    border-color: #00d2d3;
    color: white;
}

/* 3. KARTLAR & KUTULAR (Glassmorphism) */
.card, .p-3, .modal-content, .accordion-item {
    background: rgba(255, 255, 255, 0.05) !important; /* Çok şeffaf beyaz */
    backdrop-filter: blur(16px) !important; /* Bulanıklık */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* İnce beyaz çerçeve */
    border-radius: 16px;
    color: white;
    transition: all 0.3s ease;
}

.card:hover, .p-3:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 20px rgba(0, 210, 211, 0.3); /* Neon gölge */
    border-color: #00d2d3 !important;
}

/* 4. FOOTER */
footer {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 210, 211, 0.5);
    margin-top: auto; /* En alta iter */
}

/* 5. DETAYLAR & BUTONLAR */
h1, h2, h3, h4, h5 {
    color: #00d2d3;
    font-weight: 700;
}

.text-info { color: #00d2d3 !important; }

/* Buton Stilleri */
.btn-info {
    background-color: #00d2d3;
    border: none;
    color: #000;
    font-weight: bold;
}
.btn-outline-info {
    color: #00d2d3;
    border-color: #00d2d3;
}
.btn-outline-info:hover {
    background-color: #00d2d3;
    color: #000;
    box-shadow: 0 0 15px #00d2d3;
}

/* Accordion (Dersler Sayfası İçin) */
.accordion-button {
    background: rgba(255,255,255,0.05);
    color: #00d2d3;
    border: none;
}
.accordion-button:not(.collapsed) {
    background: rgba(0, 210, 211, 0.2);
    color: white;
    box-shadow: none;
}
.accordion-button:focus { box-shadow: none; }
.accordion-body { color: #dfe6e9; }

/* Slider Resim (Ana Sayfa İçin Standart Ayar) */
.carousel-item img {
    height: 550px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Animasyon */
.animate-box { animation: fadeIn 1.5s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }


/* ====================================================== */
/* FİLM GALERİSİ İÇİN EKLENEN YENİ KODLAR        */
/* ====================================================== */

/* Film Slider Resim Ayarı (Daha büyük ve ekranı kaplayan) */
/* !important komutu ile yukarıdaki standart 550px kuralını eziyoruz */
.film-slider-img {
    height: 70vh !important; /* Ekranın %70'ini kaplasın */
    object-fit: cover; /* Resmi bozmadan doldur */
    border-radius: 15px;
}

/* Hover Overlay (Üzerine gelince çıkan siyah perde) */
.film-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* %80 Siyahlık */
    opacity: 0; /* Başlangıçta görünmez */
    transition: all 0.4s ease; /* Yumuşak geçiş */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 15px;
    padding: 20px;
}

/* Mouse üzerine gelince (.carousel-item:hover) overlay görünsün */
.carousel-item:hover .film-overlay {
    opacity: 1;
    cursor: pointer;
}

/* Açıklama metni stili (Aşağıdan yukarı kayma efekti) */
.film-aciklama {
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.carousel-item:hover .film-aciklama {
    transform: translateY(0);
}
/* ====================================================== */
/* FİLM GALERİSİ ÖZEL AYARLARI (Mutlaka Eklenmeli)      */
/* ====================================================== */

/* Resim Ayarı */
.film-slider-img {
    height: 70vh !important;
    object-fit: cover;
    border-radius: 15px;
}

/* Hover Overlay (Siyah Perde) */
.film-overlay {
    position: absolute;  /* BU KOD ÇOK ÖNEMLİ: Yazıyı resmin üstüne bindirir */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* %80 Siyahlık */
    opacity: 0; /* Başlangıçta gizli */
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 15px;
    padding: 20px;
}

/* Mouse ile üzerine gelince görünür yap */
.carousel-item:hover .film-overlay {
    opacity: 1;
    cursor: pointer;
}

/* Yazının aşağıdan yukarı kayma efekti */
.film-aciklama {
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.carousel-item:hover .film-aciklama {
    transform: translateY(0);
}