/* === Genel Kimlik ve Değişkenler (Büyük Budapeşte Oteli / Şekerci Dükkanı Paleti) === */
:root {
    --primary-color: #DFEAFB; /* Pudra Mavisi (Ana Butonlar, Linkler) */
    --secondary-color: #F1D4D4; /* Pastel Pembe (Açık Arka Planlar) */
    --background-color: #FAF6F0; /* Çok hafif kırık beyaz/krem ana zemin */
    --accent-color: #FDE2A1; /* Soluk Altın (İkonlar, Kenarlıklar) */
    --cta-color: #C7384D; /* Kadife Kırmızı (Önemli Butonlar) */
    --text-color: #403141; /* Koyu Mürekkep (Metinler) */
    --light-color: #ffffff; /* Beyaz */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Lato', sans-serif;
    --horizon-line-color: #DC143C;
}

.blazored-toast-container {
    z-index: 9999 !important;
}

.page {
    /* Bu, sayfanın yüksekliğini ekranın yüksekliği ile sınırlar */
    height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    /* Bu, ana içerik alanı sığmazsa kendi scrollbar'ını oluşturmasını söyler */
    overflow-y: auto;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--text-color);
    background-color: var(--background-color);
}

/* === Hero Section === */
.hero-section {
    /* Bu sefer gradyan yerine direkt pastel pembe arka plan */
    background: linear-gradient(rgba(20, 20, 20, 0.65), rgba(20, 20, 20, 0.65)), url('/images/hero-background.png') no-repeat center center;
    background-size: cover;
    background-color: var(--primary-color);
    min-height: 92vh;
    color: var(--light-color); /* Koyu metin rengi daha iyi kontrast sağlar */
    position: relative;
    /* YENİ EKLENEN SATIRLAR BURASI */
    display: flex; /* İçeriği dikeyde ortalamak için flex kullanıyoruz */
    align-items: center;
    padding-top: 80px; /* Header'ın yüksekliği kadar bir üst boşluk bırak */
    box-sizing: border-box; /* Padding'in, min-height değerini artırmasını engeller */
    overflow: visible;
}

    .hero-section h1 {
        font-family: var(--font-heading);
        font-size: 3.5rem;
        /* 1. ADIM: Rengi direkt olarak açık renk yapalım */
        color: var(--light-color);
        /* 2. ADIM: Okunurluğu garantilemek için gölge ekleyelim */
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    }

    /* Diğer hero section stilleri aynı kalabilir */
    .hero-section .lead {
        font-size: 1.25rem;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
        /* Alt başlığa da gölge ekleyerek okunurluğu artıralım */
        text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7);
    }

    .hero-section .btn-primary {
        background-color: var(--cta-color);
        border-color: var(--cta-color);
        color: var(--light-color);
        font-weight: bold;
        transition: all 0.3s ease;
        /* Butonun gölgesi daha belirgin olsun */
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }

        .hero-section .btn-primary:hover {
            background-color: #a62d3f;
            border-color: #a62d3f;
            transform: scale(1.05);
        }


    .hero-section .bi-shield-check {
        color: var(--cta-color);
    }

.hero-content {
    position: relative;
    z-index: 2;
}

/* Genel Başlık Stili */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

.content-hidden {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.content-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.recipient-buttons .btn-outline-light {
    transition: all 0.3s ease;
}

    .recipient-buttons .btn-outline-light:hover {
        background-color: rgba(255, 255, 255, 0.2);
        transform: scale(1.05);
    }


/* wwwroot/css/app.css dosyasının sonuna ekle */


/* Başlangıçta şeffaf ve hero'nun üzerinde duran navbar */
.navbar-transparent {
    background-color: transparent;
    transition: background-color 0.4s ease-out;
}
/* 2. Navbar'ı normal akıştan çıkarıp hero-section'ın üzerine yerleştiriyoruz */
#main-navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0; /* left:0 ve right:0 ile tüm genişliğe yayılmasını sağlıyoruz */
    z-index: 10; /* Diğer içeriklerin (hero-content) üzerinde kalması için */
}


.navbar-brand {
    font-family: var(--font-heading);
    letter-spacing: 1.5px;
    font-size: 1.5rem;
}

/* Header'daki butonların stilini ana CTA butonundan ayıralım */
.navbar .btn-primary {
    background-color: var(--cta-color);
    border-color: var(--cta-color);
    padding: 0.375rem 1rem;
    font-size: 0.9rem;
}

#main-navbar.navbar-transparent.scrolled {
    background-color: rgba(25, 25, 25, 0.85); /* Hafif yarı saydam koyu bir renk */
    /* (Opsiyonel) Modern "buzlu cam" efekti için */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
/* Sayfa içeriğinin, üstte sabitlenen navbar'ın altına girmesini engellemek için
   body'ye veya ana içeriğe bir üst boşluk vermek iyi bir fikirdir.
   Ancak bizim Hero Section'ımız tam ekran olduğu için buna şimdilik gerek yok.
   Eğer ileride normal sayfalarda header içeriğin üstünü kapatırsa,
   o sayfaların en dış sarmalayıcısına `padding-top: 80px;` gibi bir stil ekleriz.
*/

/* === "VEYA" Ayracı Stili (GÜNCELLENMİŞ) === */
.or-separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    /* YENİ EKLENEN SATIRLAR */
    max-width: 300px; /* Toplam genişliği 300px ile sınırla (istediğin gibi ayarla) */
    margin-left: auto; /* Bu daralmış bloğu yatayda ortala */
    margin-right: auto; /* Bu daralmış bloğu yatayda ortala */
}

    .or-separator::before,
    .or-separator::after {
        content: '';
        flex: 1; /* Çizgiler, 300px'lik yeni alana göre kendilerini ayarlasın */
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    .or-separator:not(:empty)::before {
        margin-right: .5em;
    }

    .or-separator:not(:empty)::after {
        margin-left: .5em;
    }

/* === Arama Çubuğu Stili === */
.search-form-container {
    max-width: 600px; /* Arama çubuğunun maksimum genişliği */
}

    .search-form-container .form-control {
        background-color: rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.5);
        color: white;
        border-right: none; /* Butonla birleşik görünmesi için sağ kenarlığı kaldır */
    }

        .search-form-container .form-control::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

        .search-form-container .form-control:focus {
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            box-shadow: 0 0 0 0.25rem rgba(var(--cta-color-rgb), 0.5); /* Odaklandığında kırmızı bir halka */
            border-color: rgba(255, 255, 255, 0.7);
        }

    .search-form-container .btn-primary {
        background-color: var(--cta-color);
        border-color: var(--cta-color);
        /* Butonun sol kenarlığını da input ile aynı yapalım */
        border-left: 1px solid rgba(255, 255, 255, 0.5);
    }

.kelime-animasyon {
    opacity: 0; /* Başlangıçta görünmez */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Yumuşak geçişler için */
    transform: translateY(20px); /* İsteğe bağlı: Hafifçe aşağıdan gelsin */
    display: inline-block; /* Yan yana durmaları için */
    margin-right: 0.25em; /* Kelimeler arasına boşluk ekler */
}
/* :root değişkenlerine cta-color'ın RGB versiyonunu ekleyelim */
/* Bu, focus efekti için gerekli */
:root {
    /* ... diğer değişkenler ... */
    --cta-color: #C7384D;
    --cta-color-rgb: 199, 56, 77; /* Kırmızının RGB hali */
    /* ... */
}

.horizon-container {
    position: relative;
    background-color: #141414;
    color: rgba(255, 255, 255, 0.8);
    padding: 4rem 0;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow-x: hidden; /* Olası yatay scrollbar'ları engelle */

    overflow-y: hidden; /* Dikey scrollbar'ı engelle ve içeriğin görünür olmasını sağla */
    margin-top: -60px; /* Bu, konteyneri 60px yukarı çeker ve Hero'nun üzerine bindirir */
}

.horizon-svg-container {
    position: absolute;
    bottom: -1px; /* Hero Section'ın TAM ALT KENARINA yapıştırır */
    z-index: 2;
    top: -30px;
    left: 0;
    width: 100%;
    line-height: 0;
    filter: drop-shadow(0 0 10px var(--horizon-line-color));
}

    .horizon-svg-container svg {
        width: 100%;
        height: 60px;
        overflow: visible;
    }

.horizon-container-content {
    position: relative;
}


/* Karusel Stilleri (wwwroot/css/app.css veya PopularVideos.razor içinde) */

.popular-videos-carousel {
    width: 100%;
    height: auto;
    padding: 10px; /* Gölgelerin kesilmemesi için */
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .video-card:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    }

    .video-card img {
        width: 100%;
        display: block;
        /* === DEĞİŞİKLİK BURADA === */
        /* ESKİ HALİ: aspect-ratio: 16/9; */
        /* YENİ HALİ (DİKEY POSTER ORANI): */
        aspect-ratio: 2/3;
        /* Bu satır, resmin bozulmadan dikey alana sığmasını sağlar (çok önemli) */
        object-fit: cover;
    }

    .video-card .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .video-card:hover .video-overlay {
        opacity: 1;
    }

    .video-card .video-overlay i {
        font-size: 4rem;
        color: white;
    }

    .video-card .video-title {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1rem;
        color: white;
        font-weight: bold;
        text-shadow: 1px 1px 4px black;
    }

/* Swiper İleri/Geri Buton Renklerini Ayarlama */
.swiper-button-next, .swiper-button-prev {
    color: var(--cta-color); /* Bizim Kadife Kırmızı rengimiz */
}


/* === Swiper Navigasyon Okları Stilleri === */

/* Hem ileri hem de geri butonu için ortak stiller */
.swiper-button-next,
.swiper-button-prev {
    /* Okların dairesel arka planı */
    background-color: rgba(20, 20, 20, 0.6); /* Yarı saydam koyu arka plan */
    width: 80px; /* Dairenin genişliği */
    height: 80px; /* Dairenin yüksekliği */
    border-radius: 50%; /* Tam bir daire yapar */
    /* Ok ikonunun kendisini ayarlama */
    color: white !important; /* Ok rengini beyaz yapar ve Swiper'ın varsayılanını ezer */
    /* Hover efekti için yumuşak geçiş */
    transition: background-color 0.3s ease;
}

    /* Ok ikonlarının boyutunu ayarlama */
    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 1.2rem; /* Ok ikonunu biraz küçültüp daha zarif yapalım */
        font-weight: bold;
    }

    /* Fare ile üzerine gelince arka planı daha belirgin yap */
    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        background-color: rgba(20, 20, 20, 0.8);
    }

/* Okların konumunu kenarlardan biraz içeri alalım */
.swiper-button-prev {
    left: 20px;
}

.swiper-button-next {
    right: 20px;
}


/* wwwroot/css/app.css dosyasındaki ilgili bölümü bununla değiştir */

/* === Saf CSS Scroll Animasyonları === */

/* 1. Animasyonun Başlangıç Durumu (Gizli Hali) */
/* Bu sınıfa sahip olan her şey başlangıçta görünmez olacak */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(50px); /* Aşağıdan gelecekmiş gibi 50px aşağıda başlat */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    /* 2. Animasyonun Bitiş Durumu (Görünür Hali) */
    /* JavaScript bu sınıfı eklediğinde, animasyon tetiklenecek */
    .reveal-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* 3. Kartların sırayla gelmesi için gecikme sınıfları (opsiyonel ama şık) */
    .reveal-on-scroll.delay-100 {
        transition-delay: 100ms;
    }

    .reveal-on-scroll.delay-200 {
        transition-delay: 200ms;
    }

    .reveal-on-scroll.delay-300 {
        transition-delay: 300ms;
    }

    .reveal-on-scroll.delay-400 {
        transition-delay: 400ms;
    }


/* wwwroot/css/app.css'e eklenecek NİHAİ BLOK */

/* === Nasıl Çalışır? Bölümü Stilleri (Z-Index Güçlendirmeli) === */

#nasil-calisir {
    background-color: transparent; /* Arka planını garantile */
    padding: 5rem 0;
    /* EN ÖNEMLİ KISIM: Katmanlama Önceliği */
    position: relative; /* z-index'in çalışması için bu şart */
    z-index: 10; /* Bu bölümü, diğer tüm normal içeriklerin üzerine çıkar */
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 5rem 2rem;
}

.step-card {
    /* İki renk arası yumuşak geçiş sağlayan gradyan arka plan */
    background: linear-gradient(160deg, #5A5A82, #1E4234); /* Metalik Mor (%40) -> Kadife Kırmızı */


    color: var(--light-color); /* İçindeki tüm metinlerin varsayılan rengi beyaz olsun */
    border: none; /* Gradyan varken kenarlık gereksiz, daha temiz görünür */
    border-radius: 12px; /* Daha modern, yumuşak köşeler */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Hafif bir gölge */

    text-align: center;
    padding: 3.5rem 1.5rem 2rem 1.5rem;
    position: relative;
    transition: all 0.3s ease-in-out;
}

    .step-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); /* Üzerine gelince gölgeyi belirginleştir */
    }

    /* Kart içindeki başlık ve paragraf stilleri (okunurluk için) */
    .step-card h3 {
        color: var(--light-color); /* Başlık rengi beyaz */
        font-family: var(--font-heading);
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }

    .step-card p {
        color: rgba(255, 255, 255, 0.85); /* Paragraf, hafif şeffaf beyaz (daha az baskın) */
        opacity: 1; /* Eski opacity kuralını geçersiz kılalım */
    }

    /* İkonların rengini de açık yapalım */
    .step-card i {
        color: var(--light-color);
        opacity: 0.9;
    }

/* Numaranın yeni arka planla uyumu için stilini tersine çevirelim */
.step-number {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--background-color); /* Arka planı ana zemin rengi (krem) yapalım */
    color: var(--text-color); /* Yazısı koyu olsun, öne çıksın */

    font-family: var(--font-heading);
    font-weight: bold;
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #6A0DAD; /* Kenarlığı gradyanın mor rengi yapalım */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}


/* === S.S.S. (Akordiyon) Bölümü Stilleri === */

.accordion {
    max-width: 800px; /* Okunurluk için genişliği sınırlayalım */
    margin: 0 auto;
}

.accordion-item {
    background-color: transparent;
    border: 2px solid var(--text-color);
    margin-bottom: 1rem; /* Her soru arasında boşluk */
}

/* Kapalı durumdaki soru butonu */
.accordion-button {
    background-color: var(--background-color); /* Krem */
    color: var(--text-color);
    font-family: var(--font-heading);
    font-weight: bold;
}

    /* Açık durumdaki soru butonu */
    .accordion-button:not(.collapsed) {
        background-color: var(--secondary-color); /* Pastel Pembe */
        color: var(--text-color);
        box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
    }

    /* Bootstrap'in mavi focus efektini iptal et */
    .accordion-button:focus {
        box-shadow: none;
        border-color: transparent;
    }

    /* Bootstrap'in varsayılan ok ikonunu bizim renklerimizle değiştir */
    .accordion-button::after {
        filter: invert(15%) sepia(10%) saturate(1000%) hue-rotate(250deg);
    }

    .accordion-button:not(.collapsed)::after {
        filter: none;
    }

/* Cevap bölümünün stili */
.accordion-body {
    background-color: var(--background-color);
    padding: 1.5rem;
    line-height: 1.6;
}


/* === Fiyatlandırma Bölümü Stilleri === */

.pricing-section {
    background-color: #141414; /* Koyu arka plan */
    color: var(--light-color);
}

/* Aylık/Yıllık Geçiş Butonu (Switch) */
.subscription-toggle {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-weight: bold;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
    }

input:checked + .slider {
    background-color: var(--cta-color);
}

    input:checked + .slider:before {
        transform: translateX(26px);
    }

.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

/* Fiyat Kartları Grid'i */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.pricing-card {
    background: #1F1F1F;
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    position: relative;
    overflow: hidden; /* Parlak çizginin taşmasını engeller */
    transition: transform 0.3s ease;
    border: 1px solid #333;
}

    .pricing-card:hover {
        transform: translateY(-10px);
    }

    /* Öne Çıkan Kart */
    .pricing-card.featured {
        transform: scale(1.05);
        border-color: var(--cta-color);
    }

        .pricing-card.featured:hover {
            transform: scale(1.1);
        }

/* İnce Parlak Çizgi */
.card-glow-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #6A0DAD, #C7384D); /* Metalik Mor -> Kadife Kırmızı */
}

/* Kart İçeriği */
.package-name {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
}

.price {
    margin-bottom: 1.5rem;
}

.price-currency {
    vertical-align: super;
    font-size: 1.2rem;
}

.price-amount {
    font-size: 3rem;
    font-weight: bold;
}

.price-period {
    font-size: 1rem;
    color: rgba(255,255,255,0.6);
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    text-align: left;
}

    .features-list li {
        padding: 0.5rem 0;
        border-bottom: 1px solid #333;
    }

        .features-list li::before {
            content: '✓'; /* Checkmark ikonu */
            color: var(--cta-color);
            margin-right: 10px;
        }

.btn-primary-custom {
    background-color: var(--cta-color);
    color: var(--light-color);
    border: none;
    padding: 1rem 2rem;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

    .btn-primary-custom:hover {
        background-color: #a62d3f; /* Kırmızının koyusu */
    }

/* === Footer Stilleri === */

.site-footer {
    background-color: #141414; /* Netflix siyahı */
    color: #757575; /* Netflix'in gri metin rengi */
    padding: 3rem 0;
    margin-top: 5rem; /* Üstündeki bölümle arasına boşluk bırakır */
}

    .site-footer .footer-top-link {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

        .site-footer .footer-top-link a {
            color: #a0a0a0;
            text-decoration: none;
        }

            .site-footer .footer-top-link a:hover {
                text-decoration: underline;
            }

    .site-footer .footer-links ul {
        list-style: none;
        padding: 0;
        margin: 0 0 1rem 0;
    }

        .site-footer .footer-links ul li {
            margin-bottom: 1rem;
        }

    .site-footer .footer-links a {
        color: #a0a0a0;
        text-decoration: none;
        font-size: 0.875rem; /* 14px */
    }

        .site-footer .footer-links a:hover {
            text-decoration: underline;
        }

    .site-footer .dropdown .btn {
        border-color: #333;
        color: #757575;
    }

    .site-footer .copyright-text {
        font-size: 0.75rem; /* 12px */
        opacity: 0.6;
        margin-top: 2rem;
    }


/* === Final Call to Action (CTA) Bölümü Stilleri === */

.final-cta-section {
    background-color: #141414; /* Footer ile uyumlu koyu arka plan */
    color: var(--light-color);
    padding: 5rem 0;
}

    .final-cta-section .lead {
        color: rgba(255, 255, 255, 0.7);
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

.cta-form-container {
    max-width: 650px; /* Genişliği hero'dakinden biraz daha fazla olabilir */
}

    /* Bu stiller, hero bölümündeki arama çubuğuyla neredeyse aynı. Tasarım bütünlüğü için. */
    .cta-form-container .form-control {
        background-color: rgba(30, 30, 30, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: white;
        padding: 1rem;
    }

        .cta-form-container .form-control::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        .cta-form-container .form-control:focus {
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            box-shadow: 0 0 0 0.25rem rgba(var(--cta-color-rgb), 0.5);
            border-color: rgba(var(--cta-color-rgb), 0.7);
        }

    .cta-form-container .btn-primary {
        background-color: var(--cta-color);
        border-color: var(--cta-color);
        font-weight: bold;
        padding: 1rem 1.5rem;
        font-size: 1.1rem;
        transition: background-color 0.3s ease;
    }

        .cta-form-container .btn-primary:hover {
            background-color: #a62d3f; /* Kırmızının koyusu */
        }


/* === Login Sayfası Stilleri (Buzlu Cam / Şeffaf Versiyon) === */

/* === Login Sayfası Stilleri (Hareketli Arka Plan Versiyonu) === */

.login-layout-body {
    background-color: #141414; /* Arka plan rengi */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    position: relative; /* İçindeki absolute elementler için çapa */
    overflow: hidden; /* Dışarı taşan resim şeridini gizler */
}

    /* Arka planı karartarak formu öne çıkaran katman */
    .login-layout-body::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(20, 20, 20, 0.7);
        z-index: 1;
    }

/* Hareketli resim şeridi */
.image-ribbon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200vw; /* Ekranın iki katı genişliğinde */
    height: 400px; /* Şeridin kalınlığı */
    display: flex;
    align-items: center;
    /* Animasyon tanımı: adı 'scroll-ribbon', süresi 60 saniye, doğrusal, sonsuz döngü */
    animation: scroll-ribbon 60s linear infinite;
    /* Çapraz durması için döndürme ve konumlandırma */
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(-20deg);
}

    .image-ribbon img {
        height: 100%;
        width: auto;
        margin: 0 15px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }

/* Animasyonun kendisi */
@keyframes scroll-ribbon {
    0% {
        transform: translate(-25%, -50%) rotate(-20deg);
    }

    100% {
        /* Toplam genişliğin yarısı kadar sola kaydır (resim listesi tekrarlandığı için) */
        transform: translate(-75%, -50%) rotate(-20deg);
    }
}

/* Login kutusunun arka planın üzerinde kalmasını sağlama */
.login-container {
    width: 100%;
    max-width: 450px;
    padding: 20px;
    position: relative; /* Bu çok önemli */
    z-index: 2; /* Karartma katmanının ve şeridin üzerinde kalır */
}

/* .login-box ve diğer iç stiller aynı kalabilir... */
.login-box {
    background: rgba(30, 30, 30, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}


/* 2. İÇERİDEKİ ELEMENTLERİ AÇIK RENK YAPMA */

.login-title {
    font-family: var(--font-heading);
    text-align: center;
    color: var(--light-color); /* Başlık rengi BEYAZ */
}

.login-box .form-control {
    background-color: rgba(0, 0, 0, 0.3); /* Input'ların içini de yarı saydam koyu yapalım */
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.75rem 1rem;
    color: var(--light-color); /* Input'un içindeki yazı BEYAZ */
}

    .login-box .form-control::placeholder {
        color: rgba(255, 255, 255, 0.5); /* Placeholder yazısı soluk beyaz */
    }

    .login-box .form-control:focus {
        border-color: var(--cta-color);
        box-shadow: 0 0 0 0.25rem rgba(var(--cta-color-rgb), 0.5);
        background-color: rgba(0, 0, 0, 0.5);
    }

.login-box .form-check-label {
    color: rgba(255, 255, 255, 0.8); /* "Beni Hatırla" yazısı soluk beyaz */
}

.login-box .form-check-input:checked {
    background-color: var(--cta-color);
    border-color: var(--cta-color);
}

.login-box .signup-link {
    color: var(--horizon-line-color); /* Linkler de beyaz */
}

    .login-box .forgot-password-link,
    .login-box .signup-link a {
        color: var(--light-color); /* Linkler de beyaz */
        text-decoration: none;
        font-size: 0.9rem;
        opacity: 0.8;
    }

        .login-box .forgot-password-link:hover,
        .login-box .signup-link a:hover {
            text-decoration: underline;
            opacity: 1;
        }

/* Diğer elemanlar aynı kalabilir */
.btn-social {
    padding: 0.75rem;
    font-weight: bold;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

    .btn-social:hover {
        opacity: 0.9;
    }

    .btn-social.btn-google {
        background-color: #DB4437;
        color: white;
    }

    .btn-social.btn-facebook {
        background-color: #4267B2;
        color: white;
    }

.login-box .or-separator {
    color: rgba(255, 255, 255, 0.5);
}

    .login-box .or-separator::before, .login-box .or-separator::after {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

.social-login-text {
    color: var(--cta-color);
    opacity: 0.7;
    font-size: 0.9rem;
}

.btn-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Daire şeklinde yapar */
    color: white;
    font-size: 1.8rem; /* İkon boyutu */
    text-decoration: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

    .btn-social-icon:hover {
        transform: scale(1.1);
        opacity: 0.9;
    }

    /* Renkler */
    .btn-social-icon.google {
        background-color: #DB4437;
    }

    .btn-social-icon.facebook {
        background-color: #4267B2;
    }

    .btn-social-icon.twitter-x {
        background-color: #000000;
    }
/* X'in rengi siyah */


/*  === Form Doğrulama (Validation) Stilleri === */
/* Hatalı input'un kenarlığını belirginleştir */
.form-control.invalid {
    border-color: var(--cta-color); /* Kadife Kırmızı */
}

    .form-control.invalid:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--cta-color-rgb), 0.5);
    }

/* Hata mesajının kendisi */
.validation-message {
    color: var(--cta-color); /* Kadife Kırmızı */
    font-size: 0.875rem; /* Biraz daha küçük font */
    margin-top: 0.25rem;
    font-weight: bold;
}



/* Diğer form elemanları (input, button) login sayfasıyla aynı stilleri kullanabilir */

/* === Kayıt (Register) Sayfası Stilleri (DÜZELTİLMİŞ) === */

.register-container {
    width: 100%;
    max-width: 550px;
    padding: 2rem;
    /* 1. SORUNUN ÇÖZÜMÜ: Formu en üst katmana al */
    position: relative;
    z-index: 2;
}

/* 2. SORUNUN ÇÖZÜMÜ: Stili login-box ile aynı yap */
.register-box {
    background: rgba(30, 30, 30, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.register-title {
    font-family: var(--font-heading);
    text-align: center;
    color: var(--light-color); /* Yazı rengini açık yapalım */
}

/* Bireysel/Kurumsal Geçiş Butonları (Şeffaf zemin üzerinde daha iyi duracak şekilde güncellendi) */
.account-type-switch {
    display: flex;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Kenarlık daha yumuşak */
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2rem;
}

    .account-type-switch .btn {
        flex: 1;
        border-radius: 0;
        padding: 0.75rem;
        font-weight: bold;
        background-color: transparent;
        color: rgba(255, 255, 255, 0.7); /* Yazı rengi soluk beyaz */
        border: none;
        transition: all 0.3s ease;
    }

        .account-type-switch .btn.active {
            background-color: var(--cta-color);
            color: white;
        }

/* Kurumsal alanlar başlığı (Şeffaf zemin üzerinde daha iyi duracak şekilde güncellendi) */
.form-section-title {
    font-family: var(--font-heading);
    color: var(--light-color);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.register-box .login-link {
    color: rgba(255, 255, 255, 0.7); /* Yazı rengini soluk beyaz yapalım */
}

    .register-box .login-link a {
        color: var(--light-color); /* Linkin kendisi parlak beyaz */
        text-decoration: none;
    }

        .register-box .login-link a:hover {
            text-decoration: underline;
        }

/* Diğer tüm form elemanları (.form-control, .form-check vb.) 
   login sayfasındaki şeffaf kutu için yaptığımız stilleri kullanabilir.
   Yukarıdaki login stilleri bu bölümü de otomatik olarak kapsayacaktır.
*/


/* === Galeri Sayfası Stilleri === */

/* === Galeri Sayfası Stilleri (Responsive) === */

/* Geniş ekranlar (Large - 992px ve üstü) için Grid Layout */
@media (min-width: 992px) {
    .gallery-layout {
        display: grid;
        grid-template-columns: 250px 1fr; /* 250px sidebar, geri kalan ana içerik */
        min-height: 100vh;
    }
}

/* Mobil cihazlarda .gallery-layout varsayılan olarak block davranacak (alt alta) */
/* Bu da sidebar'ın gizlenip, main-content'in %100 genişlik almasını sağlar */


/* Off-canvas menümüzün temasını, ana sidebar ile aynı yapalım */
.offcanvas.offcanvas-start {
    background-color: #000;
    color: white;
}

.offcanvas-header {
    border-bottom: 1px solid #333;
}

.offcanvas-title {
    color: var(--cta-color);
    font-family: var(--font-heading);
}

.offcanvas .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}


/* Sol Kategori Menüsü */
.category-sidebar {
    background-color: #000;
    color: white;
    padding: 1.5rem;
}

.sidebar-logo a {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--cta-color); /* Kadife Kırmızı */
    text-decoration: none;
    letter-spacing: 1.5px;
}

.category-list {
    list-style: none;
    padding: 0;
    margin-top: 2rem;
}

    .category-list li {
        margin-bottom: 0.5rem;
    }

    .category-list a {
        color: rgba(255,255,255,0.7);
        text-decoration: none;
        display: block;
        padding: 0.5rem;
        border-radius: 4px;
        transition: all 0.2s ease;
    }

        .category-list li.active a, .category-list a:hover {
            color: white;
            background-color: #333;
            font-weight: bold;
        }

.category-divider {
    height: 1px;
    background-color: #333;
    margin: 1rem 0;
}

/* Sağ Ana İçerik Alanı */
.main-content {
    background-color: #141414; /* Netflix Siyahı */
    padding: 1.5rem 3rem;
    overflow-y: auto; /* İçerik taşarsa scroll olsun */
}

.main-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

/* Arama Çubuğu */
.search-bar {
    display: flex;
    align-items: center;
    background-color: #333;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    flex-grow: 1;
    max-width: 500px;
}

    .search-bar i {
        color: #888;
    }

    .search-bar input {
        background: transparent;
        border: none;
        color: white;
        margin-left: 1rem;
        width: 100%;
    }

        .search-bar input:focus {
            outline: none;
        }

/* Kullanıcı Profili */
.user-profile-widget {
    display: flex;
    align-items: center;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.user-name {
    color: white;
    font-weight: bold;
}

.user-profile-link {
    font-size: 0.8rem;
    color: #ccc;
    text-decoration: none;
}

    .user-profile-link:hover {
        color: white;
    }

/* Karusel Başlığı */
.carousel-title {
    color: white;
    font-family: var(--font-heading);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

/* === Video Detay Modalı Stilleri === */

/* VideoDetailModal.razor'a özel CSS */


/* Modalın genel genişliğini artır */
.modal-xl {
    max-width: % !important; /* İsteğe göre ayarlanabilir */
}


/* Modal içeriğinin minimum yüksekliğini ayarla (dikey videolar için) */
.modal-dialog {
    min-height: calc(100vh - 100px); /* Ekran yüksekliğine göre ayarlanabilir */
    display: flex;
    flex-direction: column;
    justify-content: center; /* İçeriği dikeyde ortala (isteğe bağlı) */
}


.modal-content {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ana yüksekliği içeriğe göre ayarla */
}


.modal-body {
    display: flex;
    flex-direction: row; /* Video ve detayları yan yana diz */
    gap: 20px; /* Aralarında boşluk */
    height: 100%; /* Modal body'sinin yüksekliği */
}


    /* Video oynatıcının genişliği */
    .modal-body .col-lg-7 {
        flex: 1; /* Mevcut alanın tamamını kapla */
        display: flex;
        justify-content: center; /* Videoyu ortala */
        align-items: center;
    }


    /* Video etiketinin maksimum yüksekliği (dikey format için) */
    .modal-body video {
        max-height: 80vh; /* Ekran yüksekliğine göre ayarlanabilir */
        max-width: 100%; /* Genişliği aşmasını engelle */
    }


    /* Detaylar bölümünün genişliği */
    .modal-body .col-lg-5 {
        flex: 0 0 35%; /* Sabit genişlik veya oransal ayarlanabilir */
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* İçeriği dikeyde dağıt */
    }


/* Daha büyük istatistikler */
.video-stats span {
    font-size: 1.1rem;
    font-weight: bold;
}


/* Açıklama alanı */
.video-description {
    flex-grow: 1; /* Geri kalan alanı kapla */
    overflow-y: auto; /* Gerekirse kaydırılabilir yap */
}


/* Taglar */
.video-tags {
    margin-top: 1rem;
}


    .video-tags .badge {
        background-color: var(--accent-color);
        color: var(--dark-color);
        padding: 0.5rem 0.8rem;
        border-radius: 6px;
        margin-right: 0.5rem;
        font-size: 0.9rem;
    }


/* Küçük varyasyon thumbnail'ları */
.variation-thumbs {
    display: flex;
    gap: 5px;
    margin-top: 1rem;
}


    .variation-thumbs img {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 4px;
        opacity: 0.7;
        cursor: pointer;
        transition: opacity 0.3s ease;
    }


        .variation-thumbs img:hover {
            opacity: 1;
        }

/* === Video Detay Modalı Stilleri (Yeniden Düzenlenmiş ve Esnek) === */

#videoDetailModal .modal-dialog {
    /* Modal'ın dikeyde uzamasına izin verelim */
    max-height: calc(100vh - 4rem);
    display: flex;
}

#videoDetailModal .modal-content {
    background-color: #1F1F1F;
    color: var(--light-color);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex; /* İçeriğin esnek olması için */
    flex-direction: column;
}

#videoDetailModal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

    #videoDetailModal .modal-header .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

#videoDetailModal .modal-body {
    display: flex; /* Video ve detayları yan yana diz */
    gap: 1.5rem; /* Aralarındaki boşluk */
    flex-grow: 1; /* Mevcut dikey alanı doldur */
    overflow-y: hidden; /* Body'nin kendisi scroll olmasın */
}

#videoDetailModal .video-player-column { /* Sol taraf */
    flex: 1 1 60%; /* Esnek büyüme ve küçülme, %60 taban genişlik */
    display: flex;
    align-items: center;
    justify-content: center;
}

    #videoDetailModal .video-player-column video {
        max-width: 100%;
        max-height: 75vh; /* Videonun maksimum yüksekliği */
        border-radius: 8px;
    }

#videoDetailModal .video-details-column { /* Sağ taraf */
    flex: 1 1 40%; /* %40 taban genişlik */
    display: flex;
    flex-direction: column;
    overflow-y: hidden; /* Bu kolonun kendisi de scroll olmasın */
}

#videoDetailModal .video-stats {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

#videoDetailModal .star-rating {
    color: #ffc107;
    font-weight: bold;
}

/* AÇIKLAMA ALANININ KAYDIRILABİLİR OLMASINI SAĞLAYAN SİHİR */
#videoDetailModal .video-description {
    flex-grow: 1; /* Kendine ayrılan tüm dikey boşluğu doldurmaya çalış */
    overflow-y: auto; /* Eğer sığmazsan, SADECE SEN scroll ol */
    min-height: 50px; /* Çok kısa olmasını engelle */
    font-size: 1rem;
    line-height: 1.6;
    padding-right: 10px; /* Scrollbar için boşluk */
}

#videoDetailModal .video-tags {
    margin-top: 1rem;
}

    #videoDetailModal .video-tags .badge {
        background-color: #333;
        color: #eee;
        padding: 0.4em 0.7em;
        margin: 0 0.5rem 0.5rem 0;
        font-weight: normal;
    }

#videoDetailModal .variation-thumbs {
    margin-top: 1rem;
}

    #videoDetailModal .variation-thumbs img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 4px;
        margin-right: 10px;
        opacity: 0.7;
        cursor: pointer;
        transition: opacity 0.3s ease;
    }

        #videoDetailModal .variation-thumbs img:hover {
            opacity: 1;
        }

.video-card-rating {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2; /* Diğer katmanların üzerinde kalması için */

    background-color: rgba(0, 0, 0, 0.7);
    color: var(--light-color);
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    /* Buzlu cam efekti */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

    .video-card-rating .bi-star-fill {
        color: #ffc107; /* Altın sarısı yıldız */
        margin-right: 5px;
        font-size: 0.7rem;
    }


/* === Baş Harf Avatarı Stilleri === */
.initials-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: bold;
    color: white;
    font-size: 1rem;
    flex-shrink: 0; /* Flexbox içinde büzülmesini engeller */
}

.user-info {
    /* display: flex; Zaten vardı */
    flex-direction: column;
    line-height: 1.2;
    margin-left: 10px; /* Avatar ile arasına boşluk */
}


/* === Galeri Sayfası Header - Responsive Düzenlemeleri === */

/ /* Varsayılan (Geniş Ekran) Düzeni */
.main-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    position: relative; /* İçindeki absolut pozisyonlu elemanlar için önemli */
    z-index: 10; /* Header'ın kendisi üst katmanda olsun */
}

.search-bar {
    flex-grow: 1;
    max-width: 500px;
}

/* Mobil Cihazlar İçin Yeni Kurallar (Tablet ve altı) */
@media (max-width: 991.98px) { /* Bootstrap'in lg breakpoint'i */
    .main-content-header {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .search-bar {
        width: 100%;
        max-width: 100%;
        order: 3; /* Arama çubuğunu en alta gönderir */
        margin-top: 1rem; /* Üstündeki butonlarla arasına boşluk koyar */
    }

    /* Mobil Menü Butonunu ve Künyeyi yan yana, iki uca yasla */
    .header-left-group {
        order: 1;
    }

    .user-profile-widget {
        order: 2;
    }
}
/* === Galeri Sayfası Header - Mobil Logo ve Buton Stilleri === */

.header-left-group {
    display: flex;
    align-items: center;
    gap: 1rem; /* Logo ve buton arası boşluk */
}

.mobile-logo {
    font-family: var(--font-heading);
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--light-color); /* Beyaz logo */
    text-decoration: none;
    letter-spacing: 1px;
}

    .mobile-logo:hover {
        color: rgba(255, 255, 255, 0.8);
    }

/* Kategori Butonunu Kadife Kırmızı Yapalım */
.btn-cta-main {
    background-color: var(--cta-color) !important; /* Kadife Kırmızı */
    border-color: var(--cta-color) !important;
    color: white !important;
    font-weight: 500;
}

    .btn-cta-main:hover {
        background-color: #a62d3f !important; /* Kırmızının koyusu */
        border-color: #a62d3f !important;
    }

/* Mobil için header'daki boşlukları biraz daha düzenleyelim */
@media (max-width: 767.98px) {
    .main-content-header {
        /* Üstteki ana grup ve arama çubuğu arası boşluk */
        row-gap: 1.5rem;
    }
}


/* === Profil Sayfası Stilleri === */
/* === Profil Sayfası Stilleri (Yeni Gradyanlı Menü Versiyonu) === */

/* === Profil Sayfası Stilleri (Responsive) === */

/* Sadece geniş ekranlar (lg - 992px ve üstü) için Grid Layout */
/* Sadece geniş ekranlar (lg - 992px ve üstü) için Grid Layout */
@media (min-width: 992px) {
    .profile-layout {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 2rem;
        align-items: start;
    }
}
/* Mobil cihazlarda .profile-layout varsayılan olarak block davranacak,
   bu da .profile-content'in %100 genişlik almasını sağlar. */

/* Mobil için açılacak olan Off-canvas menümüzün temasını, ana menü ile aynı yapalım */
.offcanvas#profileOffcanvas {
    background: linear-gradient(160deg, #5A5A82, #1E4334); /* Bizim harika gradyanımız */
    color: white;
}

    .offcanvas#profileOffcanvas .offcanvas-header {
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }

    .offcanvas#profileOffcanvas .offcanvas-title {
        color: white;
    }

    .offcanvas#profileOffcanvas .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }
    /* Off-canvas içindeki menünün stilini de ana menüyle aynı yapalım */
    .offcanvas#profileOffcanvas .profile-nav {
        border: none;
        box-shadow: none;
        padding: 0;
    }
/* ... Diğer tüm .profile-nav, .profile-content, .stat-card stilleri aynı kalabilir ... */

/* Sol Navigasyon Menüsü (YENİ STİLLER) */
.profile-nav {
    /* 1. YENİ GRADYAN ARKA PLAN */
    background: linear-gradient(160deg, #5A5A82, #1E4234); /* Metalik Gri Mor -> Antrasit Yeşil */

    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #444; /* Koyu zemine uygun kenarlık */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

    /* 2. İÇERİDEKİ YAZILARI OKUNUR HALE GETİRME */
    .profile-nav .user-summary h5 {
        color: var(--light-color); /* Beyaz */
    }

    .profile-nav .user-summary small {
        color: rgba(255, 255, 255, 0.6); /* Soluk beyaz */
    }

    .profile-nav .nav-link {
        color: rgba(255, 255, 255, 0.7); /* Linkler soluk beyaz */
        font-weight: 500;
        margin-bottom: 0.25rem;
        transition: all 0.2s ease;
    }

        /* 3. AKTİF LİNK STİLİNİ YENİ TEMAYA UYARLAMA */
        .profile-nav .nav-link:hover {
            color: white;
            background-color: rgba(255, 255, 255, 0.1);
        }

        .profile-nav .nav-link.active {
            color: white;
            font-weight: bold;
            background-color: rgba(255, 255, 255, 0.15); /* Aktif linki biraz daha belirgin yapalım */
            box-shadow: inset 3px 0 0 var(--accent-color); /* Soluna altın rengi bir çizgi */
        }

        .profile-nav .nav-link.text-danger,
        .profile-nav .nav-link.text-danger i {
            color: #ff5252 !important; /* Çıkış Yap linkini belirgin bir kırmızı yapalım */
        }

        .profile-nav .nav-link i {
            margin-right: 10px;
            opacity: 0.8;
        }

/* Sağ İçerik Alanı (Hala açık renkli kart olarak kalıyor) */
.profile-content {
    background: var(--background-color); /* Krem */
    border: 2px solid #eee;
    padding: 2.5rem;
    border-radius: 12px;
    min-height: 500px;
}

    .profile-content h3, .profile-content h4 {
        font-family: var(--font-heading);
        font-weight: bold;
        color: var(--text-color); /* İçerik hala açık zeminde olduğu için yazılar koyu */
    }

/* ... .stat-card ve diğer iç içerik stilleri aynı kalabilir ... */

/* Dashboard Kartları (Stat-Card) */
.stat-card {
    background: var(--cta-color);
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
}

.stat-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

    .stat-icon.icon-credits {
        color: var(--accent-color);
    }
    /* Altın */
    .stat-icon.icon-videos {
        color: var(--accent-color);
    }
    /* Mavi */
    .stat-icon.icon-spent {
        color: var(--primary-color);
    }
/* Kırmızı */
.stat-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--text-color);
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.7;
}

.page {
    background-color: #141414; /* Bizim meşhur Netflix siyahı */
}

/* Profil Sayfası İçerik Ayracı */
.content-separator {
    height: 2px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    border: 0;
    opacity: 0.5;
}

/* === Profil Sayfası Form Stilleri === */

.profile-content .form-label {
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.8;
}

.profile-content .form-control,
.profile-content .form-control:disabled {
    background-color: #f8f9fa; /* Hafif kirli beyaz bir zemin */
    border: 2px solid #eee;
}

    .profile-content .form-control:focus {
        border-color: var(--cta-color);
        box-shadow: none;
    }

.profile-content .form-section-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-color);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.profile-content hr {
    border-color: #eee;
}

/* === Profil - Bildirim Ayarları Stilleri === */

.notification-preference-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid #eee;
}

.preference-label {
    flex-grow: 1;
}

.preference-toggles {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Dar ekranlarda sıkışmasını engeller */
}

/* === Profil - Fatura Geçmişi Tablosu Stilleri === */

.profile-content .table {
    --bs-table-bg: transparent; /* Bootstrap'in kendi arka planını kaldır */
    --bs-table-color: var(--text-color); /* Metin rengimiz */
    --bs-table-border-color: #eee; /* İnce, açık gri çizgiler */
    --bs-table-hover-bg: var(--secondary-color); /* Üzerine gelince Pastel Pembe */
    font-size: 0.95rem;
}

    .profile-content .table thead th {
        font-family: var(--font-heading);
        font-weight: bold;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.5px;
        opacity: 0.7;
    }

    .profile-content .table .invoice-id {
        font-family: monospace;
        background-color: #eee;
        padding: 0.2rem 0.4rem;
        border-radius: 4px;
        font-size: 0.85rem;
    }

/* === Profil - Ödeme Yöntemleri Stilleri === */
.payment-cards-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.payment-card {
    background: linear-gradient(135deg, #f9f9f9, #e9e9e9);
    border: 2px solid #ddd;
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
    transition: all 0.3s ease;
}

    .payment-card.default {
        border-color: var(--cta-color);
        box-shadow: 0 0 15px rgba(var(--cta-color-rgb), 0.3);
    }

    .payment-card .card-brand {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
    }

        .payment-card .card-brand img {
            height: 30px;
        }

    .payment-card .card-number {
        font-family: monospace;
        font-size: 1.25rem;
        letter-spacing: 2px;
        color: var(--text-color);
        margin-bottom: 1rem;
    }

    .payment-card .card-details {
        font-size: 0.9rem;
        color: #666;
    }

    .payment-card .card-actions {
        margin-top: 1rem;
        border-top: 1px solid #eee;
        padding-top: 1rem;
        text-align: right;
    }

        .payment-card .card-actions .btn-link {
            text-decoration: none;
            font-weight: 500;
        }

/* === İade Modalı - Gelişmiş Stiller === */

.refund-summary-card {
    background-color: var(--secondary-color); /* Pastel Pembe */
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.1);
}

.summary-label {
    font-size: 0.9rem;
    opacity: 0.7;
}

.summary-amount {
    font-size: 2rem;
    font-weight: bold;
    font-family: var(--font-heading);
    color: var(--cta-color); /* Kadife Kırmızı */
}

.refund-details-toggle {
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--text-color);
    opacity: 0.6;
}

    .refund-details-toggle:hover {
        opacity: 1;
    }

.refund-details-content {
    background-color: rgba(0,0,0,0.05);
    padding: 0.75rem;
    margin-top: 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

h6.form-section-title {
    font-family: var(--font-heading);
    font-weight: bold;
    color: var(--text-color);
    opacity: 0.8;
}

/* Özel radio button stilleri */
.refund-reason-options .reason-option {
    margin-bottom: 0.5rem;
}

.refund-reason-options input[type="radio"] {
    display: none; /* Gerçek radio butonunu gizle */
}

.refund-reason-options label {
    display: block;
    padding: 1rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.refund-reason-options input[type="radio"]:checked + label {
    background-color: var(--secondary-color); /* Seçildiğinde Pastel Pembe */
    border-color: var(--cta-color); /* Seçildiğinde kenarlık Kırmızı */
    font-weight: bold;
}

#refundModal .modal-body {
    flex-direction: column;
}


/* === Güvenli Ödeme Modalı (Checkout) Stilleri === */

#checkoutModal .modal-content {
    background-color: var(--background-color); /* Krem */
    color: var(--text-color);
    border: 2px solid #ddd;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

#checkoutModal .modal-header {
    border-bottom: 1px solid #eee;
}

/* Sol Taraf - Sipariş Özeti */
.order-summary-box {
    background-color: var(--secondary-color); /* Pastel Pembe */
    padding: 2rem;
    border-radius: 12px;
    height: 100%;
    text-align: center;
}

    .order-summary-box .summary-icon {
        font-size: 2.5rem;
        color: var(--cta-color);
        margin-bottom: 1rem;
    }

    .order-summary-box h4 {
        font-family: var(--font-heading);
        font-weight: bold;
    }

    .order-summary-box .emotional-text {
        font-style: italic;
        opacity: 0.8;
        margin: 1rem 0;
    }

    .order-summary-box .price-details {
        display: flex;
        justify-content: space-between;
        font-size: 1.2rem;
        margin-top: 1rem;
    }

    .order-summary-box .total-amount {
        font-weight: bold;
        font-family: var(--font-heading);
    }

/* Sağ Taraf - Ödeme Bilgileri */
.payment-info-box h6 {
    font-family: var(--font-heading);
    font-weight: bold;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.saved-card-display {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
}

    .saved-card-display img {
        height: 24px;
        margin-right: 15px;
    }

    .saved-card-display span {
        font-family: monospace;
        font-size: 1.1rem;
    }

.change-card-link {
    display: block;
    text-align: right;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.payment-form-placeholder {
    border: 1px dashed #ccc;
    padding: 2rem;
    border-radius: 8px;
    min-height: 150px;
}

/* Sadece profil içeriği içindeki offcanvas butonunu hedef al */
.profile-content .btn[data-bs-toggle="offcanvas"] {
    /* z-index'in çalışabilmesi için bir position değeri gerekir */
    position: relative;
    /* Butonu diğer tüm kardeş elementlerin üzerine çıkar */
    z-index: 10;
}

/* === Video Oluşturma Stüdyosu Stilleri === */

/* === Video Oluşturma Sayfası Stilleri (Güncellenmiş) === */

.creation-studio-layout {
    display: grid;
    grid-template-columns: 35% 1fr;
    grid-template-rows: auto 1fr;
    height: calc(100vh - 80px);
    background-color: #141414;
}
/* ... Bölüm tanımları aynı ... */

/* 1. Bölüm: Ön İzleme */
.preview-player-quadrant {
    padding: 1.5rem;
    padding-bottom: 0;
    display: flex; /* İçerikleri dikeyde dizmek için */
    flex-direction: column;
}
/* YENİ: Format Değiştirme Butonları */
.format-switcher {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    background-color: #333;
    border-radius: 8px;
    padding: 5px;
    align-self: center; /* Kendini ortala */
}

    .format-switcher .btn {
        border: none;
        color: rgba(255,255,255,0.5);
        font-weight: 500;
        padding: 0.25rem 1rem;
    }

        .format-switcher .btn.active {
            background-color: var(--cta-color);
            color: white;
            border-radius: 6px;
        }

.template-options-quadrant {
    grid-area: 2 / 1 / 3 / 2;
}

.user-input-quadrant {
    grid-area: 1 / 2 / 3 / 3;
}
/* Bu, 2 satırı da kaplar */

/* 1. Bölüm: Ön İzleme */
.preview-player-quadrant {
    padding: 1.5rem;
    padding-bottom: 0;
}

/* Oynatıcının kendisi */
.video-player-wrapper {
    width: 100%;
    margin: auto; /* Dikeyde ve yatayda kalan boşluğa ortalanır */
    background-color: #000;
    border-radius: 8px;
    overflow: hidden; /* Köşelerin yuvarlak kalmasını sağlar */
    transition: aspect-ratio 0.4s ease; /* Oran değiştiğinde yumuşak geçiş */
}


/* 2. & 3. Bölüm: Tema Seçenekleri */
.template-options-quadrant {
    padding: 1.5rem;
    overflow-y: auto;
}

.options-group {
    margin-bottom: 2rem;
}

.options-title {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.presenter-list {
    display: flex;
    gap: 10px;
}

.presenter-thumb {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .presenter-thumb.active, .presenter-thumb:hover {
        border-color: var(--cta-color);
    }

    .presenter-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

.music-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.music-tag {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.7);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .music-tag.active, .music-tag:hover {
        background-color: var(--cta-color);
        border-color: var(--cta-color);
        color: white;
    }

/* 4. Bölüm: Kullanıcı Girdi Paneli */
.user-input-quadrant {
    background-color: var(--background-color); /* Krem */
    border-left: 1px solid #333;
}

.user-input-panel {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.input-section {
    margin-bottom: 2rem;
}

.input-section-title {
    font-family: var(--font-heading);
    font-weight: bold;
}

/* Mobil için Responsive Düzenleme */
@media (max-width: 991.98px) {
    .creation-studio-layout {
        display: block; /* Grid'i iptal et, normal akışa dön */
        height: auto;
    }
    /* Mobilde sol tarafı gizle */
    .preview-player-quadrant, .template-options-quadrant {
        display: none;
    }

    .user-input-quadrant {
        border-left: none;
    }
}


/* === Video Oluşturma - Avatar Seçim Stilleri === */

.input-section .form-text {
    font-size: 0.9rem;
    color: var(--text-color);
    opacity: 0.7;
    margin-top: -5px;
    margin-bottom: 1rem;
}

.avatar-slots-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.avatar-slot {
    width: 340px; /* Genişliği artıralım */
    min-height: 140px;
    border-radius: 8px;
    cursor: default; /* Artık genel olarak tıklanabilir değil */
    background: rgba(0,0,0,0.05);
    padding: 10px;
    transition: min-height 0.3s ease-in-out;
}


/* Boş Yuva Stili */
.avatar-slot-placeholder {
    width: 100%;
    height: 100%;
    border: 2px dashed #ccc;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #aaa;
    cursor: pointer;
}

.avatar-slot:hover .avatar-slot-placeholder {
    border-color: var(--cta-color);
    color: var(--cta-color);
}

.avatar-slot-placeholder i {
    font-size: 2rem;
}

.avatar-slot-placeholder span {
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

/* Dolu Yuva Stili */
.avatar-slot-preview {
    width: 100%;
    height: 100%;
    position: relative;
}

    .avatar-slot-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }

    .avatar-slot-preview .remove-btn {
        position: absolute;
        top: -10px;
        right: -10px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

.avatar-slot .square-btn {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 4px; /* Kare şeklinde */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.avatar-slot .remove-btn {
    top: -10px;
    left: -10px;
}
/* Sol üste taşıdık */
.avatar-slot .add-text-btn {
    top: -10px;
    right: -10px;
}

.avatar-slot .preview-btn {
    bottom: -10px;
    right: -10px;
}

.custom-text-editor {
    margin-top: 10px;
}

    .custom-text-editor textarea {
        border-radius: 6px;
        border-color: #ccc;
        font-size: 0.9rem;
    }
/* Resim yüklendikten sonraki arayüz */
.style-selector-ui {
    display: flex;
    gap: 10px;
    width: 100%;
    height: 100%;
    position: relative;
}

.original-thumb {
    width: 100px;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.style-options {
    display: flex;
    flex-direction: column;
}

    .style-options small {
        font-weight: 500;
        opacity: 0.7;
        margin-bottom: 5px;
    }

.options-list {
    display: flex;
    gap: 8px;
}

.style-option {
    cursor: pointer;
    text-align: center;
    border: 3px solid transparent;
    border-radius: 8px;
    padding: 3px;
    transition: all 0.2s ease;
}

    .style-option.active, .style-option:hover {
        border-color: var(--cta-color);
    }

    .style-option img {
        width: 45px;
        height: 45px;
        object-fit: cover;
        border-radius: 4px;
    }

    .style-option span {
        display: block;
        font-size: 0.75rem;
        margin-top: 4px;
    }

/* Kaldır butonu için eski stilimiz çalışacaktır */
.avatar-slot .remove-btn {
    top: -15px;
    right: -15px;
}

/* wwwroot/css/app.css dosyasının sonuna ekle */

/* === Avatar Yuvası Butonlarını Üst Katmana Çıkarma Düzeltmesi === */

/* Butonların içinde bulunduğu ana sarmalayıcıya bir katmanlama bağlamı (çapa) verelim. */
.avatar-slot .style-selector-ui {
    position: relative;
    z-index: 1;
}

/* Tüm kare butonları, içindeki diğer tüm elementlerin üzerine çıkaralım. */
.avatar-slot .square-btn {
    /* position: absolute zaten vardı */
    z-index: 5; /* Bu yüksek değer, onların en üstte kalmasını garantiler */
}



.admin-layout {
    display: flex;
}

.admin-sidebar {
    width: 250px;
    min-height: 100vh;
    background-color: #212529; /* Koyu antrasit */
    color: white;
    flex-shrink: 0;
}

.sidebar-logo {
    padding: 1.5rem;
    font-family: var(--font-heading);
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
    color: var(--cta-color);
}

.admin-sidebar .nav-link {
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}

    .admin-sidebar .nav-link:hover {
        color: white;
        background-color: #343a40;
    }

    .admin-sidebar .nav-link.active {
        color: white;
        background-color: var(--cta-color);
    }

    .admin-sidebar .nav-link i {
        margin-right: 10px;
    }

/* Admin Ana İçerik Alanı */
.admin-main-content {
    flex-grow: 1;
    background-color: #f4f7f6; /* Çok açık bir gri zemin */
    display: flex;
    flex-direction: column;
}

.admin-header {
    background-color: white;
    padding: 1rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.admin-page-content {
    padding: 2rem;
    flex-grow: 1;
}

/* === Admin Paneli - Profil Künyesi Stilleri === */

.admin-header .admin-profile-widget .dropdown-toggle {
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.2s ease-in-out;
}

    .admin-header .admin-profile-widget .dropdown-toggle:hover {
        background-color: #343a40; /* Sidebar hover rengiyle aynı */
    }

    /* Bootstrap'in varsayılan okunu kaldıralım, daha temiz durur */
    .admin-header .admin-profile-widget .dropdown-toggle::after {
        display: none;
    }

.admin-profile-widget .dropdown-menu {
    border: 1px solid #444;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

.admin-profile-widget .dropdown-item i {
    opacity: 0.7;
}

/* İstatistik Kartları */
.stat-card {
    border: none;
    border-radius: 8px;
    color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

    .stat-card.card-primary {
        background: linear-gradient(45deg, #007bff, #0056b3);
    }

    .stat-card.card-warning {
        background: linear-gradient(45deg, #ffc107, #d39e00);
    }

    .stat-card.card-danger {
        background: linear-gradient(45deg, #dc3545, #b02a37);
    }

    .stat-card.card-success {
        background: linear-gradient(45deg, #28a745, #1e7e34);
    }

    .stat-card .stat-value {
        font-size: 2.5rem;
        font-weight: bold;
    }

    .stat-card .stat-label {
        font-size: 1rem;
        opacity: 0.9;
    }



/* === Admin Dashboard - Sipariş Kartı Stilleri === */

.job-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.job-card-link {
    text-decoration: none;
    color: inherit;
}

.job-card {
    background-color: #2c3e50; /* Koyu lacivert/gri */
    color: white;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-left: 5px solid transparent; /* Durum rengi için kenar çizgisi */
}

    .job-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

.job-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Durum Etiketleri */
.job-card-status {
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.75rem;
}

.status-pending {
    background-color: #ffc107;
    color: #333;
}

.job-card.status-pending {
    border-left-color: #ffc107;
}

.status-processing {
    background-color: #0dcaf0;
    color: #333;
}

.job-card.status-processing {
    border-left-color: #0dcaf0;
}

.status-completed {
    background-color: #198754;
    color: white;
}

.job-card.status-completed {
    border-left-color: #198754;
}

.status-overdue {
    background-color: #dc3545;
    color: white;
}

.job-card.status-overdue {
    border-left-color: #dc3545;
}

.job-card-body {
    flex-grow: 1; /* Kartın ortasının esnemesini sağlar */
}

.template-name {
    font-family: var(--font-heading);
    font-size: 1.2rem;
}

.customer-name {
    margin-top: -5px;
    opacity: 0.7;
}

/* Kart Alt Bölümü */
.job-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid #444;
    font-size: 0.8rem;
    opacity: 0.9;
}

.deadline-info {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .deadline-info.urgent {
        color: #ffc107;
        font-weight: bold;
    }

.assignee-avatar .initials-avatar {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
}

/* === Admin Dashboard - Filtre Butonları (Pills) === */

.filter-pills {
    display: flex;
    gap: 0.5rem;
    background-color: #e9ecef; /* Açık gri bir zemin */
    padding: 0.5rem;
    border-radius: 8px;
}

.filter-pill {
    border: none;
    background-color: transparent;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    color: #495057; /* Koyu gri yazı */
    transition: all 0.2s ease-in-out;
}

    .filter-pill.active,
    .filter-pill:hover {
        background-color: white;
        color: #000;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }


.filter-separator {
    width: 1px;
    height: 25px;
    background-color: #ddd;
}

.sort-select-group .form-select-sm {
    font-size: 0.875rem;
    font-weight: 500;
}

.search-input-group {
    position: relative;
}

    .search-input-group .bi-search {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #888;
        font-size: 0.9rem;
    }

    .search-input-group .form-control-sm {
        padding-left: 30px; /* İkon için yer aç */
        font-weight: 500;
    }

/* Production Studio Ana Layout'u */
.production-studio-layout {
    display: grid;
    /* YENİ SÜTUN TANIMI: Sol ve orta 1'er pay, sağ taraf 2 pay alsın */
    grid-template-columns: 1fr 2fr 1fr;
    gap: 1.5rem; /* Sütunlar arası boşluk */
    height: calc(100vh - 120px); /* Header'ı ve biraz boşluğu hesaba katalım */
    padding: 1.5rem;
}

/* Sütunların genel stilleri */
.studio-column {
    background-color: #343a40; /* Admin panelinin ikincil koyu rengi */
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* İçerik taşarsa kendi içinde scroll olsun */
}

/* Mobil için responsive düzenleme */
@media (max-width: 1199.98px) { /* xl breakpoint'inden küçükse */
    .production-studio-layout {
        display: block; /* Grid'i iptal et, normal akışa dön */
        height: auto;
    }

    .studio-column {
        margin-bottom: 1.5rem; /* Mobilde alt alta gelince boşluk bırak */
    }
}

.scene-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.scene-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #495057; /* Koyu gri */
    padding: 1rem;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
}

    .scene-card:hover {
        background-color: #5a6268;
    }

    .scene-card.active {
        background-color: #6c757d;
        border-color: var(--cta-color); /* Seçili olunca kırmızı kenarlık */
    }

.scene-status-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

    .scene-status-icon.status-approved {
        color: #28a745;
    }
    /* Yeşil */
    .scene-status-icon.status-attention {
        color: #ffc107;
    }
    /* Sarı */
    .scene-status-icon.status-processing {
        color: #0dcaf0;
    }
    /* Mavi */
    .scene-status-icon.status-pending {
        color: #adb5bd;
    }
/* Açık Gri */

.scene-info {
    line-height: 1.3;
}

.scene-name {
    font-weight: 500;
    color: white;
}

.scene-duration {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

/* === Prodüksiyon Stüdyosu - Gelişmiş Sahne Kartı Stilleri === */

.scene-card-advanced {
    background-color: #495057;
    border-radius: 6px;
    border: 2px solid #5a6268;
    transition: all 0.3s ease;
}

    .scene-card-advanced.active {
        border-color: var(--cta-color);
        box-shadow: 0 0 15px rgba(var(--cta-color-rgb), 0.3);
    }

.scene-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
}

    .scene-card-header .expand-icon {
        transition: transform 0.3s ease;
    }

.scene-card-advanced.expanded .scene-card-header .expand-icon {
    transform: rotate(180deg);
}

.scene-card-body {
    padding: 0 1rem 1rem 1rem;
}

    .scene-card-body textarea {
        background-color: #343a40;
        color: white;
        border-color: #6c757d;
        font-family: monospace;
        font-size: 0.9rem;
    }

.scene-card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0 1rem 0.75rem 1rem;
    border-top: 1px solid #5a6268;
    margin: 1rem 1rem 0 1rem;
}

.btn-icon {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.2rem;
}

    .btn-icon:hover {
        color: white;
    }

/* === Prodüksiyon Stüdyosu - Global Header Stilleri === */

.production-studio-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px); /* Admin header yüksekliğini çıkar */
    padding: 1.5rem;
}

.production-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #343a40; /* Admin panelinin ikincil koyu rengi */
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    flex-shrink: 0; /* Küçülmesini engelle */
}

.job-identifier {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.job-id-label, .customer-name-label {
    font-size: 0.9rem;
    opacity: 0.7;
}

.job-id-value, .customer-name-value {
    font-weight: bold;
    font-family: var(--font-heading);
}

.action-buttons {
    display: flex;
    gap: 0.75rem;
}

    .action-buttons .btn {
        font-weight: 500;
    }

/* 3 sütunlu layout'un kalan alanı doldurmasını sağla */
.production-studio-layout {
    flex-grow: 1; /* Mevcut tüm dikey alanı doldur */
    min-height: 0; /* Bu, flexbox'ın düzgün küçülmesini sağlayan bir hiledir */
}

/* === Prodüksiyon Stüdyosu - Sağ Brief Paneli Stilleri === */

.brief-panel .nav-tabs {
    border-bottom: 2px solid #495057;
}

    .brief-panel .nav-tabs .nav-link {
        border: none;
        color: rgba(255, 255, 255, 0.6);
        font-weight: 500;
    }

        .brief-panel .nav-tabs .nav-link.active {
            background-color: #495057;
            color: white;
            border-bottom: 2px solid var(--cta-color);
        }

.brief-panel .tab-content {
    padding-top: 1.5rem;
}

.brief-section {
    margin-bottom: 2rem;
}

.brief-section-title {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.brief-section textarea.form-control {
    background-color: #212529;
    color: #eee;
    border-color: #495057;
    font-size: 0.9rem;
}



.brief-panel .list-group-item {
    background-color: #495057;
    color: white;
    border-color: #5a6268;
}

/* === Prodüksiyon Stüdyosu - Akıllı Brief Paneli Stilleri === */

/* Eski .customer-photo-grid'i silip bunları ekleyin */

.photo-slots-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Her slot satırı arası boşluk */
}

.photo-slot-row {
    display: flex;
    align-items: flex-start;
}

.slot-label {
    font-weight: bold;
    color: rgba(255, 255, 255, 0.8);
    width: 80px; /* Etiketler için sabit bir genişlik */
    flex-shrink: 0;
    padding-top: 20px; /* Resimlerin ortasına hizalı gibi durması için */
}

.slot-images {
    display: flex;
    gap: 10px;
    overflow-x: auto; /* YATAY SCROLL ÖZELLİĞİ */
    padding-bottom: 10px; /* Scrollbar için boşluk */
    width: 100%;
}

    .slot-images img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 6px;
        cursor: pointer;
        border: 2px solid transparent;
        transition: all 0.2s ease;
    }

        .slot-images img:hover {
            border-color: var(--cta-color);
            transform: scale(1.05);
        }

    /* Scrollbar'ı daha şık hale getirelim */
    .slot-images::-webkit-scrollbar {
        height: 8px;
    }

    .slot-images::-webkit-scrollbar-track {
        background: #212529;
        border-radius: 4px;
    }

    .slot-images::-webkit-scrollbar-thumb {
        background: #6c757d;
        border-radius: 4px;
    }

        .slot-images::-webkit-scrollbar-thumb:hover {
            background: #868e96;
        }

/* Diğer Detaylar (Tarih, Yer vb.) için Liste Stili */
.customer-details-list {
    display: grid;
    grid-template-columns: auto 1fr; /* Etiket ve Değer için iki sütun */
    gap: 0.5rem 1rem;
    font-size: 0.9rem;
}

    .customer-details-list dt { /* Etiket (örn: Tarih) */
        font-weight: bold;
        opacity: 0.7;
        color: wheat;
    }

    .customer-details-list dd { /* Değer (örn: 25.12.2025) */
        margin-bottom: 0;
        color: wheat;
    }


/* === Prodüksiyon Stüdyosu - Görev Listesi Stilleri === */

.task-list-container {
    height: 100%;
}

.task-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background-color: #495057;
    padding: 1rem 1.5rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    border-left: 5px solid transparent;
}

.task-status-icon {
    font-size: 1.8rem;
}

    .task-status-icon.status-completed {
        color: #28a745;
    }

    .task-status-icon.status-failed {
        color: #dc3545;
    }

    .task-status-icon.status-inprogress {
        color: #0dcaf0;
    }

    .task-status-icon.status-pending {
        color: #adb5bd;
    }

.task-item.status-completed {
    border-left-color: #28a745;
    background-color: #3a4b42;
}

.task-info {
    line-height: 1.4;
}

.task-title {
    font-weight: bold;
    color: white;
    font-size: 1.1rem;
}

.task-description {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
}


/* === Prodüksiyon Stüdyosu - İnteraktif Görev Kartı (TaskCard) Stilleri === */

.task-card {
    background-color: #495057;
    border-radius: 6px;
    border-left: 5px solid #6c757d; /* Varsayılan durum rengi */
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

    /* Farklı durumlar için sol kenarlık renkleri */
    .task-card .task-status-icon.status-completed {
        border-left-color: #28a745;
    }

    .task-card .task-status-icon.status-failed {
        border-left-color: #dc3545;
    }

    .task-card .task-status-icon.status-inprogress {
        border-left-color: #0dcaf0;
    }

    .task-card .task-status-icon.status-pending {
        border-left-color: #adb5bd;
    }


.task-card-header {
    display: flex;
    align-items-center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    cursor: pointer;
}

    .task-card-header .expand-icon {
        transition: transform 0.3s ease;
    }

.task-card.expanded .task-card-header .expand-icon {
    transform: rotate(180deg);
}

.task-card-body {
    padding: 0 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid #5a6268;
    margin: 0 1.5rem;
}

/* === Admin Kategori Yönetimi Stilleri === */

.category-card-grid {
    display: grid;
    /* Her kart min 350px, max 1 pay alacak şekilde sırala */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
}

.category-card {
    display: grid;
    grid-template-columns: 1fr 0fr; /* Başlangıçta ikinci kolon (genişletilmiş) 0 genişliğinde */
    background-color: #343a40;
    color: white;
    border-radius: 8px;
    border: 1px solid #495057;
    transition: all 0.5s ease-in-out; /* Yumuşak geçiş animasyonu */
}

    /* KART GENİŞLEDİĞİNDE */
    .category-card.expanded {
        grid-template-columns: 1fr 1fr; /* İkinci kolona 1 pay vererek görünür yap */
        grid-column: span 2; /* Grid'de 2 kolonluk yer kapla */
    }

.normal-view, .expanded-view {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Genişleme animasyonu için önemli */
}

.category-card .card-header {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
}

.category-culture-badge {
    background-color: var(--cta-color);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
}

.category-status-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
}

    .category-status-badge.yayında {
        background-color: #28a745;
    }

    .category-status-badge.taslak {
        background-color: #6c757d;
    }

.category-card .card-body {
    padding: 1rem;
    flex-grow: 1;
}

.category-card .card-title {
    font-family: var(--font-heading);
}

.card-stats {
    opacity: 0.7;
    font-size: 0.9rem;
}

.category-card .card-footer {
    display: flex;
    padding: 0.5rem 1rem;
    background-color: rgba(0,0,0,0.2);
}

.expanded-view {
    border-left: 1px solid #495057;
    padding: 1rem;
}

.expanded-title {
    font-family: var(--font-heading);
    opacity: 0.8;
}

.expanded-view .list-group-item {
    background: transparent;
    color: white;
    border-color: #495057;
}

/* === Admin - Zenginleştirilmiş Veri Tablosu Stilleri === */

.admin-table {
    --bs-table-bg: #343a40; /* Admin panelinin ikincil koyu rengi */
    --bs-table-color: white;
    --bs-table-border-color: #495057;
    --bs-table-hover-bg: #40464b;
    font-size: 0.9rem;
}

    .admin-table thead th {
        font-family: var(--font-heading);
        font-weight: 500;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        background-color: #212529;
    }

.template-thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
}

.badge.category-badge {
    background-color: var(--cta-color); /* Kırmızı */
}

.badge.status-badge {
    font-weight: 500;
    font-size: 0.75rem;
}

.badge.status-yayında {
    background-color: #28a745; /* Yeşil */
}

.badge.status-taslak {
    background-color: #6c757d; /* Gri */
}

.action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.admin-table thead th.sortable {
    cursor: pointer;
    user-select: none; /* Metnin seçilmesini engeller */
}

    .admin-table thead th.sortable:hover {
        background-color: #40464b;
    }

/* Sıralama ikonu için stiller */
.admin-table thead th i {
    margin-left: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.7;
}

    /* C#'tan gelen 'Ascending' ve 'Descending' kelimelerini doğru ikonlara çevirelim */
    .admin-table thead th i.ascending::before {
        content: "\f139"; /* Bootstrap Icons: arrow-up-short */
        font-family: "bootstrap-icons";
    }

    .admin-table thead th i.descending::before {
        content: "\f128"; /* Bootstrap Icons: arrow-down-short */
        font-family: "bootstrap-icons";
    }

/* === Admin Şablon Editörü Stilleri === */

.tab-content.card {
    border: none; /* Kartın kendi border'ını kaldır */
    border-top-left-radius: 0; /* Sol üst köşeyi düz yap, sekmeyle birleşsin */
    background-color: #343a40;
}

.tab-content .tab-pane {
    padding: 2rem;
    background-color: #343a40;
}

    .tab-content .tab-pane label {
        color: var(--secondary-color);
    }

.nav-tabs .nav-link {
    font-weight: 500;
    color: #888;
    background-color: #343a40;
}

    .nav-tabs .nav-link.active {
        background-color: white;
        border-color: #dee2e6 #dee2e6 #fff; /* Alttaki çizgiyi kaldırarak sekmeyi içerikle birleştirir */
        color: var(--cta-color);
        background-color: #343a40;
    }

/* Scroll yapıldığında JavaScript ile eklenecek olan class */

.category-checklist {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 6px;
    background-color: #f8f9fa;
}

.thumbnail-preview {
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 6px;
    margin-top: 1rem;
}

    .thumbnail-preview img {
        max-width: 100%;
        border-radius: 4px;
    }


.multi-select-container {
    position: relative;
}

.selected-items-display {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 2px solid #ddd;
    border-radius: 6px;
    background-color: #f8f9fa; /* Input zemini */
    min-height: 48px;
    cursor: text;
}

    .selected-items-display .placeholder {
        color: #888;
        padding: 0.25rem;
    }

.selected-item-pill {
    display: inline-flex;
    align-items: center;
    background-color: var(--cta-color); /* Kadife Kırmızı */
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-remove-item {
    background: none;
    border: none;
    color: white;
    margin-left: 0.5rem;
    padding: 0;
    line-height: 1;
}

    .btn-remove-item i {
        font-size: 0.8rem;
        font-weight: bold;
    }

.dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 6px 6px;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    display: none; /* Varsayılan olarak gizli */
}

    .dropdown-list.show {
        display: block; /* Görünür yap */
    }

    .dropdown-list .dropdown-item {
        padding: 0.75rem 1rem;
        cursor: pointer;
    }

        .dropdown-list .dropdown-item:hover {
            background-color: var(--secondary-color); /* Pastel Pembe */
        }

/* === Admin Şablon Editörü - Sahne Kurgusu Stilleri === */

.scene-list-editor {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}


/* İç içe geçmiş olan sahne listelerine özel stil */
.scene-item .scene-list-editor {
    /* İçerideki listeyi sağa doğru ittir */
    margin-left: 1.5rem;
    /* Üstündeki ana sahneye bağlayan dikey çizgiyi çiz */
    padding-left: 1.5rem;
    border-left: 2px solid #5a6268;
    margin-top: 0.75rem;
}

.scene-item {
    background-color: #495057;
    border-radius: 6px;
    padding: 0.75rem;
}

.scene-item-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.drag-handle {
    cursor: grab;
    color: #aaa;
    font-size: 1.5rem;
}

/* Sürüklenirken oluşan hayalet elementin stili */
.sortable-ghost {
    opacity: 0.4;
    background: #c8ebfb;
}
/* Sürüklenen elementin kendisi */
.sortable-drag {
    opacity: 0.9 !important;
}


/* === Admin Şablon Editörü - Fiyatlandırma Kartı Stilleri === */
.add-rule-section {
    background-color: #e9ecef;
}

.pricing-rule-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pricing-rule-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #ddd;
}

    .pricing-rule-card .card-content {
        flex-grow: 1;
    }

    .pricing-rule-card .form-label {
        font-size: 0.75rem;
        font-weight: 500;
        margin-bottom: 0.25rem;
        opacity: 0.7;
    }

    .pricing-rule-card h5 {
        margin: 0;
        font-size: 1.1rem;
    }


/* === Admin Şablon Editörü - Sahne Ayarları Paneli === */
.offcanvas-body .editor-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

    .offcanvas-body .editor-section:last-child {
        border-bottom: none;
    }

    .offcanvas-body .editor-section h6 {
        font-family: var(--font-heading);
        font-weight: bold;
        color: var(--text-color);
    }

.offcanvas-body .sub-settings {
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 6px;
    margin-top: 1rem;
}

.offcanvas-footer {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 1rem;
    margin: 1.5rem -1rem -1.5rem -1rem; /* offcanvas padding'ini sıfırlar */
    border-top: 1px solid #dee2e6;
}

.scene-editor-panel {
    width: 600px !important; /* Genişliği 600px yap. İstersen değiştirebilirsin. */
}

/* === Sahne Editörü - Başlık Ayraç Çizgisi === */

.editor-section h6 {
    position: relative; /* Çizginin kendisine göre konumlanması için bu gerekli */
    padding-bottom: 10px; /* Yazı ile çizgi arasına boşluk bırakır */
    margin-bottom: 1rem !important; /* Altındaki elementle arasını biraz daha açar */
}

    /* Başlığın altına sihirli çizgiyi ekleyen kısım */
    .editor-section h6::after {
        content: ''; /* Pseudo-elementlerin çalışması için bu şart */
        position: absolute;
        bottom: 0; /* Başlığın en altına yapıştır */
        left: 0; /* Soldan başlat */

        width: 50px; /* Çizginin uzunluğu */
        height: 3px; /* Çizginin kalınlığı */
        /* Renk geçişli arka planı */
        background: linear-gradient(to right, var(--cta-color), var(--accent-color)); /* Kırmızı -> Altın */

        border-radius: 2px; /* Çizginin köşelerini yumuşatır */
    }

/* app.css */
.validation-message {
    color: var(--cta-color); /* Kadife Kırmızı */
    font-size: 0.875rem;
    font-weight: 500;
    display: block;
    margin-top: 0.25rem;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.logo-symbol {
    width: 196px; /* Sembol boyutu */
    height: 110px; /* Sembol boyutu */
    margin-right: 10px; /* Metin ile sembol arasındaki boşluk */
}

.logo-text {
    font-size: 24px; /* Metin boyutu */
    font-weight: bold; /* Kalın metin */
    color: crimson;
}

/* === Video Kartı - Ek Bilgi Katmanı Stilleri === */
/* === Video Kartı - Katmanlı ve İnteraktif Stiller === */

.video-card {
    position: relative; /* İçindeki absolute konumlandırılmış katmanlar için temel oluşturur */
    overflow: hidden; /* Dışarı taşanları gizle */
    border-radius: 8px;
    cursor: pointer;
    aspect-ratio: 2 / 3;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* KATMAN 1: Thumbnail (Arka Plan) */
.video-card-thumbnail {
    width: 100%;
    height: 100%;
}

    .video-card-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Resmi, oranını bozmadan alana sığdırır */
        transition: transform 0.4s ease;
    }

/* KATMAN 2: Vimeo Oynatıcı */
.video-card-player {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Başlangıçta tamamen şeffaf ve görünmez */
    transition: opacity 0.4s ease;
    aspect-ratio: 2 / 3;
}

    .video-card-player iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        /* 1. YÜKSEKLİĞİ %100 YAP:
       Videonun, dikey olarak konteynere tam sığmasını garantile. */
        width: auto;
        height: 110%; /* Konteynerden biraz daha uzun olmasını garantile */
        /* transform ile hem ortala hem de gerekirse ek zoom yap. 
       Bu, ince ayar için harikadır. */
        transform-origin: top center;
        transform: translate(-50%, -50%) scale(1.5);
    }

/* KATMAN 3: Bilgi Katmanı */
.video-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    padding-bottom: 4rem;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 20%, rgba(0,0,0,0.7) 60%, transparent 100%);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 3; /* Oynatıcının üzerinde kalması için */
}

/* KATMAN 4: Başlık */
.video-card .video-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    font-weight: bold;
    text-shadow: 1px 1px 4px black;
    z-index: 4; /* Her şeyin üzerinde kalması için */
    transition: transform 0.3s ease;
}


/* --- FARE ÜZERİNE GELDİĞİNDE (HOVER) ANİMASYONLARI --- */

.video-card:hover .video-card-thumbnail img {
    transform: scale(1.1); /* Thumbnail'a hafif bir zoom efekti */
}

.video-card:hover .video-card-player {
    opacity: 1; /* Vimeo oynatıcıyı görünür yap */
}

.video-card:hover .video-card-info {
    opacity: 1; /* Bilgi katmanını görünür yap */
    transform: translateY(0);
}

/* Diğer info stilleri (.stats, .summary vb.) aynı kalabilir */

.btn-icon-audio {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

    .btn-icon-audio:hover {
        background: var(--accent-color); /* Altın rengi */
        border-color: var(--accent-color);
        transform: scale(1.1);
    }

/* === Video Detay Sayfası - 3 Sütunlu Yapı === */
.video-detail-layout {
    display: grid;
    /* Sol menü sabit 250px, ana içerik kalanı kaplasın */
    grid-template-columns: 250px 1fr;
    gap: 2rem;
}

.category-sidebar-sticky {
    position: sticky;
    top: 100px; /* Header yüksekliğine göre ayarlanabilir */
    height: calc(100vh - 120px); /* Ekranın altını taşırmasın */
    overflow-y: auto;
}

.main-content-area {
    padding: 1.5rem;
}

/* ÜST BÖLÜM: Ürün Sahnesi */
.product-stage {
    display: grid;
    /* Oynatıcı: 4 pay, Detaylar: 6 pay */
    grid-template-columns: 4fr 6fr;
    gap: 2.5rem;
}

.detail-video-player {
    position: relative;
    width: 100%;
    /* YENİ ORAN: Daha kısa ve daha estetik bir dikey oran */
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    background-color: #000;
}

    /* iframe stillerinde değişiklik yapmaya gerek yok, onlar bu yeni orana otomatik uyum sağlayacak */
    .detail-video-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.video-detail-title {
    font-family: 'Raleway', sans-serif;
    ;
    font-size: 2.2rem;
    margin-bottom: 0.25rem;
    line-height: 1.2;
    color: var(--light-color); /* Ana başlık tam beyaz */
}

.detail-header {
    display: flex; /* Başlığı ve butonu yan yana getirir */
    align-items: center; /* Dikeyde ortalar */
    gap: 1rem; /* Aralarına boşluk bırakır */
    margin-bottom: 0.75rem;
}

.video-detail-title {
    flex-grow: 1; /* Başlığın mevcut tüm alanı kaplamasını sağlar */
}

/* Butonun boyutunu ve stilini ayarlayalım */
.header-favorite-btn {
    width: 50px;
    height: 50px;
    font-size: 1.3rem; /* İkonu biraz büyütelim */
}

.video-detail-description {
    line-height: 1.7;
}

.video-tags .badge {
    background-color: #f0f0f0;
    color: #555;
    padding: 0.4em 0.8em;
    margin: 0 0.5rem 0.5rem 0;
    font-weight: 500;
    border-radius: 16px;
}

.cta-section {
    background-color: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: auto; /* Bu, bloğun kendini her zaman en alta itmesini sağlar */
}
/* ... diğer detay stilleri ... */

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* iframe'in üzerinde durması için */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.2);
    transition: background-color 0.3s ease;
}

    .play-overlay:hover {
        background - color: rgba(0,0,0,0.5);
    }

.play-overlay-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: -1;
}

.play-overlay .play-icon {
    font - size: 5rem; /* İkonun boyutu */
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
}

.play-overlay:hover .play-icon {
    transform: scale(1.1);
}

.details-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* YAZI RENGİNİ GENEL OLARAK BEYAZ YAPIYORUZ */
    color: rgba(255, 255, 255, 0.9);
}

.detail-header {
    margin-bottom: 0.75rem;
}



.category-badge {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--accent-color); /* Altın rengi */
}

.video-detail-stats {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6); /* İstatistikler soluk beyaz */
    margin-bottom: 1.5rem;
}

    .video-detail-stats i {
        margin-right: 6px;
        color: var(--accent-color); /* İkonlar altın rengi */
    }




.video-detail-description {
    line-height: 1.7;
}

.video-tags .badge {
    background-color: #333; /* Koyu gri zemin */
    color: #ccc; /* Açık gri yazı */
    padding: 0.4em 0.8em;
    margin: 0 0.5rem 0.5rem 0;
    font-weight: 500;
    border-radius: 16px;
}

.variations-section h6 {
    font-weight: bold;
    margin-bottom: 0.75rem;
    color: var(--light-color); /* Başlık beyaz */
}

.variation-thumbs {
    display: flex;
    gap: 0.75rem;
}

    .variation-thumbs img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 6px;
        cursor: pointer;
        transition: transform 0.2s ease;
    }

        .variation-thumbs img:hover {
            transform: scale(1.05);
        }

.customization-info-section h6.section-subtitle {
    font-weight: bold;
    margin-bottom: 1rem;
    color: var(--light-color); /* Koyu tema için beyaz */
}

/* Gerekli Bilgiler Listesi */
.required-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .required-info-list li {
        background-color: rgba(255, 255, 255, 0.05); /* Çok hafif şeffaf beyaz */
        color: rgba(255, 255, 255, 0.8); /* Soluk beyaz yazı */
        padding: 0.75rem 1rem;
        border-radius: 6px;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        font-size: 0.9rem;
    }

        .required-info-list li i {
            color: var(--accent-color); /* Altın rengi ikon */
            margin-right: 12px;
            font-size: 1.1rem;
        }

.price-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.75rem;
}

.price-label {
    font-size: 1rem;
    color: #555;
}

.price-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-color);
}

.delivery-info {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 1.5rem;
}

.cta-button {
    width: 100%;
}

.delivery-options {
    display: grid;
    /* Varsayılan olarak (mobil için) 2 sütunlu kalsın */
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (min-width: 992px) {
    .delivery-options {
        /* 4 butonu da yan yana diz */
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.delivery-option {
    background-color: transparent;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 0.75rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    color: var(--text-color);
}

    .delivery-option:hover {
        border-color: var(--cta-color);
    }

    .delivery-option.active {
        border-color: var(--cta-color);
        background-color: var(--secondary-color); /* Pastel Pembe */
        font-weight: bold;
        box-shadow: 0 0 10px rgba(var(--cta-color-rgb), 0.2);
    }

    .delivery-option .option-name {
        display: block;
        font-size: 1rem;
    }

    .delivery-option .option-time {
        display: block;
        font-size: 0.8rem;
        opacity: 0.7;
    }


/* app.css */
.info-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    /* YENİ RENK: Soft, pastel bir turuncu/somon rengi */
    background-color: aquamarine;
    border-radius: 6px;
    font-size: 0.9rem;
    color: darkslateblue
}

    .info-bar i {
        /* İkonun rengini de yeni temaya uygun hale getirelim */
        color: #E86A33;
        margin-right: 8px;
        font-size: 1.1rem;
    }

    .info-bar .info-link {
        font-weight: bold;
        text-decoration: underline;
        margin-left: 5px;
        color: var(--text-color);
    }

#infoModal .modal-content {
    background-color: var(--background-color); /* Krem */
    border: 2px solid var(--text-color);
    border-radius: 12px;
    box-shadow: 10px 10px 0px var(--accent-color);
}

#infoModal .modal-header {
    border-bottom: 2px solid var(--text-color);
}

    #infoModal .modal-header .btn-close {
        /* İstersen daha belirgin bir kapatma butonu yapabiliriz */
    }

#infoModal .modal-title {
    font-family: var(--font-heading);
    font-weight: bold;
    color: var(--cta-color); /* Kadife Kırmızı */
}

#infoModal .modal-body p {
    line-height: 1.7;
    color: var(--text-color);
}
/* --- MOBİL İÇİN RESPONSIVE DÜZENLEME --- */
@media (max-width: 991.98px) {
    .video-detail-layout {
        grid-template-columns: 1fr; /* Tek sütuna düşür */
    }

    .category-sidebar-sticky {
        display: none !important; /* Mobilde sabit menüyü gizle */
    }

    .product-stage {
        grid-template-columns: 1fr; /* Oynatıcı ve detayları alt alta diz */
    }
}
/* === CTA Buton Grubu Stilleri (Nihai Versiyon) === */

.cta-buttons-wrapper {
    display: flex;
    /* Elementler arası boşluk */
    gap: 0.75rem;
    margin-top: 1rem;
}

.cta-button-main {
    /* Ana butonun, kalan tüm boşluğu kaplamasını sağlar */
    flex-grow: 1;
}

.btn-icon-favorite {
    width: 60px;
    height: 60px; /* Genişlik ve yüksekliği eşitleyerek tam bir daire olmasını sağlarız */
    font-size: 1.5rem;
    flex-shrink: 0;
    /* YENİ STİLLER */
    border-radius: 50%; /* Kenarları yuvarlayarak daire haline getirir */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Varsayılan (Favori Değil) Hali: İçi boş kırmızı çember */
    background-color: transparent; /* Arka planı şeffaf yap */
    border: 2px solid var(--cta-color); /* Dış çizgiyi Kadife Kırmızı yap */

    transition: all 0.2s ease-in-out;
}

    /* Varsayılan haldeki ikonun rengi */
    .btn-icon-favorite i {
        color: var(--cta-color); /* Boş kalp kırmızı olsun */
        transition: all 0.2s ease-in-out;
    }

    /* Fare üzerine gelince (hover) */
    .btn-icon-favorite:hover {
        background-color: rgba(var(--cta-color-rgb), 0.1); /* Kırmızının çok açık bir tonu */
        transform: scale(1.05);
    }

    /* Favoriye eklendiğindeki stil */
    .btn-icon-favorite.favorited {
        background-color: var(--cta-color); /* Arka planı Kadife Kırmızı ile doldur */
        border-color: var(--cta-color);
    }

        /* Favoriye eklendiğinde İÇİNDEKİ ikonun rengi */
        .btn-icon-favorite.favorited i {
            color: white !important; /* Dolu kalp beyaz olsun */
        }


.live-briefing-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.briefing-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .briefing-item .item-label {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.8);
    }

        .briefing-item .item-label i {
            color: var(--accent-color); /* Altın rengi ikon */
            font-size: 1.2rem;
        }

.add-data-btn {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.3);
}

    .add-data-btn:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
    }

.data-display {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .data-display .entered-data {
        font-style: italic;
        color: white;
        max-width: 150px; /* Çok uzarsa kısalt */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.modal-content {
    background-color: var(--secondary-color); /* Krem Rengi Arka Plan */
    border: 1px solid var(--text-color);
    border-radius: 8px;
    box-shadow: 5px 5px 0px rgba(var(--cta-color-rgb), 0.8); /* Gölgeyi belirginleştir */
    color: var(--text-color); /* Varsayılan metin rengi koyu olsun */
}

.modal-header {
    background-color: var(--text-color);
    border-bottom: 2px solid var(--text-color);
    padding: 1rem 1.5rem;
}

.modal-title {
    font-family: var(--font-heading);
    font-weight: bold;
    color: var(--cta-color);
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    background-color: darksalmon;
    border-top: 1px solid #eee;
}


/* === YENİ: Temalı Form Input Stilleri === */
.form-control-themed {
    background-color: #fff !important; /* Arka planı beyaz yap */
    border: 2px solid #ddd !important;
    border-color: deepskyblue !important;
    border-radius: 6px !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    color: var(--text-color) !important;
    box-shadow: none !important; /* Varsayılan odaklanma gölgesini kaldır */
    transition: all 0.2s ease-in-out;
}

    /* Odaklandığında (focus) */
    .form-control-themed:focus {
        border-color: var(--cta-color) !important; /* Kenarlığı Kadife Kırmızı yap */
        box-shadow: 0 0 0 3px rgba(var(--cta-color-rgb), 0.25) !important;
    }
/* === Şık Dosya Yükleme Bileşeni Stilleri === */
.styled-file-input-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% sol, 50% sağ kolon */
    gap: 1.5rem;
    align-items: center;
}

.styled-file-input {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    position: relative;
    transition: all 0.2s ease-in-out;
    background-color: #f8f9fa;
}

    .styled-file-input.drag-over {
        border-color: var(--cta-color);
        background-color: var(--secondary-color);
    }

.file-input-native {
    /* Gerçek <input type="file"> elementini tamamen gizle */
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.file-input-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 100%;
    height: 150px; /* Sabit bir yükseklik verelim */
    color: #aaa;
}

    .file-input-label i {
        font-size: 3rem;
        color: #ccc;
    }

    .file-input-label span {
        font-weight: 500;
        margin-top: 0.5rem;
    }

/* Ön İzleme Stilleri */
.image-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

    .image-preview img {
        max-height: 150px;
        max-width: 100%;
        border-radius: 6px;
        border: 1px solid #eee;
    }

.file-info {
    font-size: 0.9rem;
    text-align: center;
}

    .file-info strong {
        display: block;
    }

.btn-remove-image {
    background: none;
    border: none;
    color: var(--cta-color);
    font-weight: 500;
    cursor: pointer;
}

/* SOL KOLON: Rehber Resimleri */
.file-input-guidelines {
    display: grid;
    /* 3x2'lik bir ızgara oluştur: 3 sütun, otomatik satır */
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.guideline-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
}

    .guideline-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.guideline-overlay {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
}

    .guideline-overlay.correct {
        background-color: #198754;
    }

    .guideline-overlay.incorrect {
        background-color: #dc3545;
    }

/* SAĞ KOLON: Dosya Yükleme Alanı */
.styled-file-input {
    /* 1. ÇAPAYI ATIYORUZ: Bu, içindeki overlay'in bu kutunun dışına çıkmasını engeller. */
    position: relative;
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    transition: all 0.2s ease-in-out;
    background-color: #f8f9fa;
}

/* ... (diğer stiller aynı kalabilir: .drag-over, .file-input-native, .image-preview vb.) ... */


/* --- KATMANLAMA MANTIĞI --- */
.status-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.95);
    /*display: none; /* Varsayılan olarak gizli */
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 6px; /* Ana konteynerin yuvarlaklığına uysun */
}

/* 2. KURALI GÜÇLENDİRİYORUZ: Daha spesifik bir seçici kullanarak görünür yapıyoruz. */
.styled-file-input.status-loading .status-overlay,
.styled-file-input.status-success .status-overlay,
.styled-file-input.status-failed .status-overlay {
    display: flex !important; /* !important ile bu kuralın kazanmasını garantiliyoruz. */
}


/* Netflix Tarzı Yükleme Çubuğu (değişiklik yok) */
.loading-indicator {
    text-align: center;
    color: var(--text-color);
}

.loading-bar {
    width: 150px;
    height: 4px;
    background-color: #ddd;
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto 1rem auto;
}

    .loading-bar::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, var(--cta-color), var(--accent-color));
        animation: loading-animation 1.5s infinite;
    }

@keyframes loading-animation {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Başarı ve Hata İkonları (değişiklik yok) */
.status-icon {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}

    .status-icon i {
        display: block;
        font-size: 4rem;
        margin-bottom: 0.5rem;
    }

    .status-icon.success {
        color: #198754;
    }

    .status-icon.failed {
        color: #dc3545;
    }

/* === Upsell Modal Stilleri === */

.upsell-option {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1rem;
    height: 100%;
}

    .upsell-option .form-check {
        margin-bottom: 0.75rem;
    }

    .upsell-option .form-check-label {
        font-weight: 500;
    }

    .upsell-option .option-description {
        font-size: 0.85rem;
        color: #888;
        padding-left: 1.5rem; /* Checkbox ile hizalı olması için */
    }

/* === Onay ve Ödeme Sayfası Stilleri === */
.checkout-page-container {
    padding: 2rem 0;
    max-width: 960px; /* Ortadaki alanın çok fazla genişlemesini engeller */
    margin: 0 auto; /* Her ihtimale karşı tekrar ortala */
}

.checkout-agreements {
    margin-top: 2rem;
    font-size: 0.9rem;
}

    .checkout-agreements .form-check {
        margin-bottom: 0.5rem;
    }

    .checkout-agreements a {
        text-decoration: underline;
        color: var(--cta-color);
        font-weight: 500;
    }

.checkout-preview h5 {
    font-family: var(--cta-color);
    font-weight: bold;
    border-bottom: 2px solid #eee;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.checkout-preview ul li {
    margin-bottom: 0.5rem;
}

/* === Onay Sayfası - Panel Stilleri === */

/* Sağdaki Sipariş Özeti Paneli */
.checkout-page-container .list-group {
    background-color: var(--secondary-color); /* Krem Rengi Arka Plan */
    border: 2px solid #eee;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

    .checkout-page-container .list-group .list-group-item {
        background-color: transparent; /* İçindeki item'ların kendi arka planını kaldır */
        border: none;
    }

    .checkout-page-container .list-group .list-group-item-dark {
        background-color: var(--secondary-color); /* Toplam tutar satırını hafifçe vurgula */
        margin: 0.5rem -1rem -1rem -1rem; /* Panelin altını kaplamasını sağla */
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }


/* Soldaki Ön İzleme ve Bilgiler Paneli */
.checkout-preview {
    background-color: var(--secondary-color); /* Krem Rengi Arka Plan */
    border: 2px solid #eee;
    border-radius: 12px;
    padding: 2rem;
    height: 100%; /* Sütunun tamamını kaplamasını sağlar */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Onamlar bölümünü de daha okunaklı hale getirelim */
.checkout-agreements {
    background-color: var(--secondary-color);
    padding: 1.5rem;
    border: 2px solid #eee;
    border-radius: 12px;
    margin-top: 2rem;
}

/* === Onay Sayfası - Panel ve Başlık Stilleri === */

/* Tüm paneller için ortak stil */
.checkout-panel {
    background-color: var(--background-color); /* Krem Rengi Arka Plan */
    border: 2px solid #eee;
    border-radius: 12px;
    padding: 2rem; /* İç boşluğu bu ana panel verir */
    height: 100%;
    display: flex; /* İçeriğin dikeyde esnemesi için */
    flex-direction: column;
}

/* ESKİ .checkout-preview KURALINI SİLİYORUZ. ARTIK GEREKLİ DEĞİL. */

/* Başlık Renkleri */
.checkout-main-title,
.checkout-panel-title {
    font-family: var(--font-heading);
    font-weight: bold;
    color: var(--cta-color);
}

.checkout-preview h5 {
    font-family: var(--font-heading);
    font-weight: bold;
    border-bottom: 2px solid #eee;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* === Onay Sayfası - Thumbnail Boyut Düzeltmesi === */

.checkout-preview img {
    /* Resmin maksimum genişliğini 250px ile sınırla */
    max-width: 75px;
    /* Genişliği sınırlanınca, kendini yatayda ortalaması için */
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* Altındaki başlıkla arasına biraz daha boşluk bırakalım */
    margin-bottom: 2rem !important;
}

/* 2. İSTEK: Upsell item'larına özel stil */
.upsell-item .form-check-label h6 {
    transition: all 0.2s ease;
}

.upsell-item input:not(:checked) + .form-check-label h6 {
    text-decoration: line-through; /* Seçili değilse üzerini çiz */
    opacity: 0.5;
}

@media (max-width: 767.98px) {
    .checkout-page-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
/* === Checkout Sayfası - Mobil/Desktop Collapse Düzeltmesi === */

/* Sadece geniş ekranlarda (md ve üstü) geçerli olacak kural */
@media (min-width: 768px) {

    /* ID'si 'previewInfoCollapse' olan collapse elementini hedef al */
    /* Bu, Bootstrap'in genel kurallarından daha güçlüdür */
    #previewInfoCollapse {
        /* JavaScript'in ekleyebileceği inline 'display: none' stilini bile ezer */
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }
}
/* 2. İSTEK: Mobil için "Sipariş Özeti" collapse başlığı */
.checkout-panel-title-mobile {
    display: block;
    padding: 1.5rem;
    background-color: var(--background-color);
    border: 2px solid #eee;
    border-radius: 12px;
    font-family: var(--font-heading);
    font-weight: bold;
    color: var(--cta-color);
    text-decoration: none;
    font-size: 1.2rem;
    width: 100%;
    text-align: left;
}

.reassurance-text {
    background-color: #f8f9fa;
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid #eee;
    font-style: italic;
}

/* === Video Izgara Stilleri === */

/* === Favorilenmiş İkon Stili === */

/* Sadece 'is-favorited' sınıfına sahip olan kalp ikonlarını hedef al */
.bi-heart-fill.is-favorited {
    color: var(--cta-color) !important; /* Kadife Kırmızı */
}

.page-title {
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

    /* YENİ KURAL: Kompakt görünüm için */
    .video-grid.compact {
        /* Kartların minimum 200px, maksimum 240px olmasını sağla.
       '1fr'yi kaldırarak sonsuz büyümelerini engelliyoruz. */
        grid-template-columns: repeat(auto-fill, minmax(140px, 180px));
        gap: 1.5rem; /* Boşlukları biraz azaltalım */
        justify-content: center; /* Izgarayı ortala */
        overflow-y: hidden;
        padding-bottom: 10px;
        transform: none;
        justify-content: flex-start;
    }

/* Her bir ızgara elemanı için (isteğe bağlı) */
.grid-item {
    /* Gelecekte animasyonlar için kullanılabilir */
}

/* Boş durum stili */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background-color: rgba(0,0,0,0.02);
    border-radius: 12px;
    color: #aaa;
}

    .empty-state i {
        font-size: 4rem;
        margin-bottom: 1rem;
        display: block;
    }

    .empty-state h4 {
        color: #666;
        font-weight: bold;
    }

.btn-primary-custom:disabled {
    /* 1. Yarı saydam hale getir (silikleştir) */
    opacity: 0.5 !important;
    /* 2. Üzerine gelince "yasak" imleci göster */
    cursor: not-allowed;
    /* 3. Varsa, hover efektini (büyüme gibi) iptal et */
    transform: none;
    /* 4. Rengini biraz solgunlaştırabiliriz (opsiyonel) */
    background-color: #a0a0a0;
    border-color: #a0a0a0;
}

.cta-button-secondary {
    background-color: transparent;
    border: 2px solid var(--text-color); /* Koyu Mürekkep renginde kenarlık */
    color: var(--text-color);
    width: 60px; /* Favori butonuyla aynı boyutta olsun */
    flex-shrink: 0;
    transition: all 0.2s ease-in-out;
}

    .cta-button-secondary:hover {
        background-color: var(--text-color);
        color: white;
    }


.culture-input-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.culture-input-card {
    position: relative;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-left: 5px solid var(--cta-color);
    border-radius: 6px;
    padding: 1.5rem;
}

.btn-remove-culture {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.2rem;
}

    .btn-remove-culture:hover {
        color: #dc3545; /* Kırmızı */
    }

/* === Admin Teslimat Slotu Kart Stilleri === */
.delivery-slot-card {
    background-color: #343a40;
    color: white;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #495057;
}

    .delivery-slot-card .card-header {
        background-color: rgba(0,0,0,0.2);
        border-bottom: 1px solid #495057;
        text-align: right;
    }

.tier-badge {
    font-size: 0.8rem;
    font-weight: bold;
    background-color: var(--cta-color);
}

.delivery-slot-card .card-title {
    font-family: var(--font-heading);
}

.delivery-slot-card .card-text {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.7);
}

.delivery-slot-card .card-footer {
    margin-top: auto; /* Footer'ı her zaman en alta iter */
    background-color: rgba(0,0,0,0.2);
    text-align: right;
}

.slot-partition-card {
    background-color: #343a40;
    color: white;
    border-radius: 8px;
    border: 1px solid #495057;
    border-left: 5px solid var(--accent-color); /* Varsayılan renk */
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .slot-partition-card.inactive {
        border-left-color: #6c757d; /* Pasif ise gri */
        opacity: 0.7;
    }

    .slot-partition-card .card-body {
        flex-grow: 1;
    }

    .slot-partition-card .card-footer {
        background-color: rgba(0,0,0,0.2);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

/* === Admin Vardiya Düzenleme Modalı Stilleri === */

.shift-day-nav .nav-link {
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 0.25rem;
}

    .shift-day-nav .nav-link:hover {
        background-color: #eee;
    }

    .shift-day-nav .nav-link.active {
        background-color: var(--cta-color);
        color: white;
        font-weight: bold;
    }

.time-slot-editor {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

    /* Zaman aralığı tipinin (PrimeTime/StockTime) genişliğini ayarla */
    .time-slot-editor .form-select {
        flex: 0 0 150px;
    }

/* === Admin Vardiya Yönetimi Stilleri === */

.weekly-schedule-grid {
    display: grid;
    /* Geniş ekranlarda 2 sütunlu, dar ekranlarda tek sütunlu grid */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.day-schedule-editor {
    background-color: #495057;
    border-radius: 8px;
    padding: 1rem;
}

.day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #6c757d;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    color: white;
}

.day-slots-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.time-slot-editor {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .time-slot-editor span {
        color: white;
    }

.no-slots-info {
    font-style: italic;
    color: rgba(255,255,255,0.5);
    padding: 1rem 0;
    text-align: center;
}

.styled-video-input {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 1rem;
    position: relative;
    transition: all 0.2s ease-in-out;
    background-color: #f8f9fa;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-input-native {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.video-input-label {
    /* ... (StyledFileInput'taki label ile aynı) ... */
}

/* Video Ön İzleme Stilleri */
.video-preview {
    width: 100%;
    text-align: center;
}

    .video-preview video {
        max-width: 100%;
        max-height: 250px;
        border-radius: 6px;
        border: 1px solid #eee;
        background-color: #000;
    }

    .video-preview .file-info {
        font-size: 0.9rem;
        margin-top: 1rem;
    }

    .video-preview .preview-actions {
        margin-top: 1rem;
        display: flex;
        justify-content: center;
        gap: 1rem;
    }

/* Yükleniyor Durumu */
.status-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: #555;
    font-weight: 500;
}

.styled-video-input.status-uploading {
    cursor: progress;
}

/* === Ödeme Sayfası Stilleri === */
.payment-container {
    background-color: white;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.iyzico-form {
    min-height: 400px; /* Iyzico formunun yüklenmesi için bir alan bırakır */
}