/* === SİNEMATİK EVREN - ANA STİL DOSYASI === */

/* --- 1. TEMEL AYARLAR VE ANİMASYONLAR --- */
:root {
    --neon1: #0a0a2a;
    --neon2: #1e3a8a;
    --neon3: #3b82f6;
    --yellow-neon1: #fff700;
    --yellow-neon2: #ffdd00;
    --yellow-neon3: #ffaa00;
    
    --gray-dark1: #111;
    --gray-dark2: #333;
    --white: #f0f0f0;
}

html {
    box-sizing: border-box;
    overflow-x: hidden;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

@keyframes glow {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

@keyframes yellow-glow {
    0% { text-shadow: 0 0 5px var(--yellow-neon1), 0 0 10px var(--yellow-neon2); }
    100% { text-shadow: 0 0 10px var(--yellow-neon1), 0 0 20px var(--yellow-neon2), 0 0 30px var(--yellow-neon3); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes flyUp {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(-500px) rotate(720deg); opacity: 0; }
}

@keyframes fillProgress {
    from { width: 0; }
    to { width: 100%; }
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-image: url('/pxfuel (2).jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: #333;
    color: #f0f0f0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
	padding-top: 180px !important;
}

/* --- 2. SİHİRBAZ PARÇALARI (HEADER, NAV, FOOTER) --- */
header {
    display: flex;
    align-items: center;
    padding: 20px 40px;
    background: #1c1c1c;
    color: #fff;
	position: fixed; 
    top: 0;          
    left: 0;        
    width: 100%;   
    z-index: 1100;   
}

.logo-link {
    text-decoration: none;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-basis: 250px;
    flex-shrink: 0;
    white-space: nowrap;
	justify-content: center;
	font-size: 2rem;
    font-weight: 700;
    color: #ffcc00;
    flex-basis: 250px;
    flex-shrink: 0;
    white-space: nowrap;
}

.logo-img {
    height: 60px; 
    width: 60px; 
	border-radius: 50%; 
    object-fit: cover; 
    display: block;
}

.logo-img:hover {
    transform: scale(1.1); 
}


/* GİRİŞ YAPAN KULLANICININ YAZISI (Eski welcome-text) */
.welcome-text {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--yellow-neon1);
    text-shadow: 0 0 10px var(--yellow-neon1), 0 0 20px var(--yellow-neon2), 0 0 30px var(--yellow-neon3);
    animation: yellow-glow 1.5s infinite alternate;
    margin: 0;
    flex-grow: 1;
    text-align: center;
    white-space: nowrap;
}


.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #111, #222);
    padding: 10px 15px;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    flex-basis: 250px;
    flex-shrink: 0;
    justify-content: flex-end;
}

.lang-switch {
    padding: 5px 10px;
    background: #444;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
}

/* === DÜZELTME: KAYMAYI ÖNLEYEN EKSİK KOD === */
.header-right .rating-container {
    display: flex;
    align-items: center;
    gap: 10px;
    transition: opacity 0.5s ease, visibility 0.5s ease, width 0.5s ease, padding-right 0.5s ease, margin-right 0.5s ease;
    overflow: hidden;
    padding-right: 10px;
    width: 170px;
    visibility: visible;
    opacity: 1;
}
.header-right .stars {
    display: flex;
    gap: 5px;
    cursor: pointer;
}
.header-right .star {
    font-size: 25px;
    color: #555;
    transition: color 0.3s;
}
.header-right .star:hover,
.header-right .star.active {
    color: gold;
}
/* === DÜZELTME BİTİŞ === */


/* AVATAR/GİRİŞ BUTONU İÇİN KONTEYNER */
#member-login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}

.member-login button {
    padding: 8px 15px;
    border-radius: 8px;
    border: 2px solid transparent;
    background: #e0f7ff;
    color: #000;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
	
	white-space: nowrap;
}

.member-login button:hover {
    background: #00aaff;
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 170, 255, 0.6);
    transform: scale(1.05);
}

nav {
    position: fixed;
	align-items: center;
	display: flex;
    top: 80px;
	left: 0;
	width: 100%;
    z-index: 999;
    margin-top: 0;
    display: flex;
    justify-content: center;
    gap: 0;
    background: #1c1c1c; 
    border-bottom: 2px solid #111;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

nav a {
    text-decoration: none;
    color: #f0f0f0; 
    font-weight: 600;
    padding: 15px 25px;
	align-items: center;
    transition: background 0.3s, color 0.3s, border-bottom 0.3s;
    border-bottom: 3px solid transparent;
}

nav a:hover,
nav a:focus {
    background-color: #222; /* <--- DÜZELTME: Hover rengi ayarlandı */
    color: #fff;
    border-bottom: 3px solid var(--neon3);
}


main {
    flex-grow: 1;
}


footer {
    text-align: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    margin-top: 40px;
}

/* --- 3. MODAL, OVERLAY VE DROPDOWN STİLLERİ --- */
.heart-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 120px;
    pointer-events: none;
    text-align: center;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.3s;
}
.heart {
    display: inline-block;
    transition: all 0.5s ease;
}
.glow-small {
    filter: drop-shadow(0 0 10px #f00) drop-shadow(0 0 20px #f55);
}
.glow-medium {
    filter: drop-shadow(0 0 20px #f00) drop-shadow(0 0 40px #f55) drop-shadow(0 0 60px #f88);
}
.glow-big {
    filter: drop-shadow(0 0 40px #f00) drop-shadow(0 0 80px #f55) drop-shadow(0 0 120px #f88) drop-shadow(0 0 160px #f99);
}
.thanks {
    margin-top: 10px;
    font-size: 24px;
    display: block;
    color: #ffeb3b;
}
.confetti-piece {
    position: absolute;
    font-size: 24px;
    animation: confetti 1.5s forwards;
}

.spotify-modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
    background-color: #191919;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    border-radius: 15px;
    text-align: center;
    position: relative;
    box-shadow: 0 0 20px var(--neon2);
}
.modal-content h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 15px;
}
.close-btn {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close-btn:hover,
.close-btn:focus {
    color: #fff;
}

/* === YENİ: PATLAMAYI ÖNLEYEN AVATAR/DROPDOWN KODLARI === */
.profile-avatar-container {
    position: relative;
    display: inline-block;
}
.profile-avatar-img {
    width: 40px !important;    /* <-- PATLAMA ÇÖZÜMÜ */
    height: 40px !important;   /* <-- PATLAMA ÇÖZÜMÜ */
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #ccc;
    transition: transform 0.2s, box-shadow 0.2s;
    object-fit: cover;
}
.profile-dropdown {
    display: none;
    opacity: 0;
    position: absolute;
    top: 55px;
    right: 0;
    background-color: #1c1c1c;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    width: 200px;
    z-index: 101;
    overflow: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.profile-dropdown.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
.dropdown-header {
    padding: 12px 15px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid #333;
    background-color: #252525;
}
.profile-dropdown a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #ccc;
    font-size: 0.9rem;
    transition: background-color 0.2s, color 0.2s;
}
.profile-dropdown a:hover {
    background-color: var(--neon2, #1e3a8a);
    color: #fff;
}
.profile-dropdown button#logout-btn {
    display: block;
    width: 100%;
    padding: 10px 15px;
    border: none;
    border-top: 1px solid #333;
    background-color: #333;
    color: #ffcccc;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s, color 0.2s;
}
.profile-dropdown button#logout-btn:hover {
    background-color: #c00;
    color: #fff;
}
/* === YENİ KODLAR BİTİŞ === */


/* --- 4. ANA SAYFA (index.html) STİLLERİ --- */
main.index-main {
    width: 90%;
    max-width: 1400px;
    margin: 40px auto 0 auto;
}
.slider-container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 25px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}
.slider-wrapper {
    display: flex;
    transition: transform 0.7s ease-in-out;
}
.slide-link {
    min-width: 100%;
    position: relative;
    display: block;
    text-decoration: none;
}
.slide-link img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    background-color: #222;
}
.slide-link .slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 20%, transparent);
    color: #fff;
    padding: 30px 50px 40px;
}
.slide-link .slide-caption h2 {
    font-size: 2.2rem;
    margin: 0 0 10px 0;
    text-shadow: 0 0 8px #000;
}
.slide-link .slide-caption p {
    font-size: 1rem;
    max-width: 600px;
    color: #ddd;
}
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    font-size: 2.5rem;
    padding: 15px 20px;
    cursor: pointer;
    z-index: 10;
    border-radius: 5px;
    transition: background 0.3s;
}
.slider-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}
.arrow-left { left: 20px; }
.arrow-right { right: 20px; }

.slider-progress-bar {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 10;
    padding: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}
.progress-bar-item {
    width: 50px;
    height: 6px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;
}
.progress-bar-item.active {
    background: rgba(255, 255, 255, 0.6);
}
.progress-bar-fill {
    height: 100%;
    width: 0;
    background: var(--neon3);
    border-radius: 3px;
}
.progress-bar-item.active .progress-bar-fill {
    animation: fillProgress 5s linear forwards;
}

/* PORTAL KUTULARI (Ana Sayfa) */
.portal-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    width: 100%;
    margin: 40px auto 0 auto;
}
.portal-box {
    background: #1c1c1c;
    border-radius: 25px;
    padding: 20px 25px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
    border: 1px solid #333;
    transition: transform 0.3s, box-shadow 0.3s;
    min-height: 250px;
    display: flex;
    flex-direction: column;
}
.portal-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 30px var(--neon2);
}
.portal-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--neon3);
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.portal-box-header h2 {
    font-size: 1.8rem;
    color: var(--yellow-neon1);
    margin: 0;
}
.portal-box-header a {
    text-decoration: none;
    color: #ccc;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.3s;
}
.portal-box-header a:hover {
    color: #fff;
}
.portal-box-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.portal-box-content p {
    color: #ccc;
    line-height: 1.6;
    font-size: 1.1rem;
    margin-top: 0;
}
.portal-box-content a {
    color: var(--yellow-neon1);
    text-decoration: none;
}
a.portal-box-main-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}

/* === YENİ: PORTAL HİZALAMA DÜZELTMESİ === */
.horizontal-scroll-wrapper {
    text-align: left !important; /* Ortalamayı engeller, sola yaslar */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 10px 0;
    min-height: 320px;
}
.horizontal-scroll-wrapper .film-card {
    display: inline-block;
    white-space: normal;
    vertical-align: top;
    margin-right: 20px;
    /* Boyutları Bölüm 6'daki .film-card ile aynı yapıyoruz */
    width: 200px;
    height: 300px;
}
/* === HİZALAMA BİTTİ === */


/* --- 5. FİLM LİSTE SAYFASI (filmler.html) --- */
.filmler-container-wrapper {
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: 20px;
}
.side-frame {
    width: 50px;
    background-image: url('https://media.istockphoto.com/id/1294622791/vector/old-film-strip-with-countdown.jpg?s=612x612&w=0&k=20&c=6F0-06q7qE-n0rTa231z0e-E0YDdT0UfJ-rW-m1kL-U=');
    background-size: cover;
}
.side-frame.left {
    border-radius: 15px 0 0 15px;
}
.side-frame.right {
    border-radius: 0 15px 15px 0;
    transform: scaleX(-1);
}
.filmler-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    gap: 30px;
    background: transparent;
}
#film-listesi-wrapper {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1100px;
}

/* SAYFALAMA (Pagination) Stilleri (filmler.html için) */
.sayfalama-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px 0;
}
.sayfalama-btn,
.sayfalama-nokta {
    padding: 8px 14px;
    margin: 3px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--gray-dark2, #333);
    color: var(--white, #f0f0f0);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    font-weight: 600;
}
.sayfalama-nokta {
    cursor: default;
    background: none;
    border: none;
    padding: 8px 5px;
}
.sayfalama-btn:not([disabled]):hover {
    border-color: var(--yellow-neon1);
    color: var(--yellow-neon1);
    box-shadow: 0 0 10px var(--yellow-neon2);
}
.sayfalama-btn.active {
    background-color: var(--yellow-neon1);
    color: var(--gray-dark1, #111);
    border-color: var(--yellow-neon1);
    box-shadow: 0 0 10px var(--yellow-neon2);
    cursor: default;
}
.sayfalama-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}


/* --- 6. FİLM KARTI (Genel Stil) --- */
.film-card {
    width: 200px;
    height: 300px;
    border-radius: 10px;
    position: relative;
    transition: transform 0.3s;
    overflow: hidden; /* DÜZELTME: Taşmaları engellemek için */
}
.film-card:hover {
    transform: translateY(-10px);
}
.film-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 4px;
    background: linear-gradient(45deg, var(--neon1), var(--neon2), var(--neon3), var(--neon1));
    z-index: 1;
    box-shadow: 0 0 15px var(--neon1), 0 0 25px var(--neon2), 0 0 35px var(--neon3);
    animation: glow 1.5s infinite alternate;
}
.film-card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.film-card-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    position: relative;
}
.film-poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 6px;
}
.film-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    padding: 20px 10px 10px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 20%, transparent);
}


/* === 6. PUANLAMA KUTUSU (GÖRSELE GÖRE DÜZELTİLDİ) === */
        .rating-slider-box {
            position: absolute;
            top: 10px; left: 10px;
            background: #000; /* Görseldeki gibi tam siyah arka plan */
            border: 1px solid rgba(255, 255, 255, 0.3); /* Kapalıyken beyazımsı sınır */
            border-radius: 20px;
            height: 36px;
            width: 70px; /* Kapalı genişlik */
            transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            z-index: 50;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
            box-shadow: 0 4px 10px rgba(0,0,0,0.8);
        }

        /* Hover olunca (Görseldeki Sol ve Sağ Taraf) */
        .rating-slider-box:hover {
            width: 180px; /* Açılınca genişlik */
            border: 2px solid var(--yellow-neon1); /* Görseldeki gibi SARI kenarlık */
            background: #000;
        }

        /* Oylanmışsa da sarı kenarlık kalsın */
        .rating-slider-box.voted {
            border: 2px solid var(--yellow-neon1);
        }

        /* Statik Görünüm (Ortadaki Görsel - Kapalı Hali) */
        .rating-static-view {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.2s ease;
            opacity: 1;
            pointer-events: none;
        }
        /* Kutu açılınca ortadaki yazı kaybolsun */
        .rating-slider-box:hover .rating-static-view { opacity: 0; }

        /* Kapalı haldeki tek yıldız ve puan */
        .single-star-icon { color: var(--yellow-neon1); font-size: 1.1rem; margin-right: 6px; }
        .rating-avg-text { color: #fff; font-weight: 800; font-size: 1rem; }

        /* Oylama Yıldızları Grubu */
        .rating-stars-view {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: row-reverse; /* Sağdan sola seçim */
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        /* Kutu açılınca yıldızlar görünsün */
        .rating-slider-box:hover .rating-stars-view { opacity: 1; }

        /* === YILDIZLARIN STİLİ (BURASI ÖNEMLİ) === */
        .film-star {
            font-size: 1.8rem; /* Yıldız boyutu */
            padding: 0 2px;
            cursor: pointer;
            transition: transform 0.1s;
            
            /* GÖRSELDEKİ GİBİ: İÇİ BOŞ, SARI ÇERÇEVELİ */
            color: transparent; 
            -webkit-text-stroke: 1.5px var(--yellow-neon1); 
        }

        /* Üzerine gelince veya seçilince İÇİ DOLSUN */
        .film-star:hover,
        .film-star:hover ~ .film-star,
        .film-star.active {
            color: var(--yellow-neon1) !important; /* İçi sarı olur */
            -webkit-text-stroke: 0; /* Çerçeve kalkar, düz sarı olur */
            text-shadow: 0 0 15px rgba(255, 230, 0, 0.8); /* Parlama */
        }
.film-favorite-btn:hover {
    background-color: rgba(200, 0, 0, 0.7); /* Kırmızı hover */
    transform: scale(1.1); /* Hafif büyüme */
}
.film-heart {
    font-size: 20px; /* Kutuya sığsın */
    color: #eee; /* Normal kalp rengi */
    transition: color 0.2s, -webkit-text-stroke 0.2s, transform 0.2s;
    text-shadow: 0 0 5px rgba(0,0,0,0.8);
}
.film-heart:not(.active):hover {
    color: #ff4757; /* Hover rengi */
}
.film-heart.active {
    color: #ff4757; /* Aktifse kırmızı */
    transform: scale(1.1);
}


/* --- 7. FİLM DETAY SAYFASI (DİNAMİK ŞABLON) --- */

/* Yükleniyor... yazısı */
#detay-yukleniyor {
    text-align: center;
    padding: 100px 20px;
    font-size: 2rem;
    color: var(--yellow-neon1);
}

/* Tüm sayfayı kaplayan arkaplan resmi */
.detay-arkaplan {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -2;
    background-size: cover;
    background-position: center center;
}
.detay-arkaplan::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,1) 10%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,1) 100%);
    z-index: -1;
}

/* Ana detay içeriği (Header'ın altına gelmesi için) */
.detay-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 20px 50px 20px;
    display: flex;
    gap: 30px;
}
.detay-sol {
    flex-basis: 300px;
    flex-shrink: 0;
    position: relative; /* Yıldızları bunun üzerine koymak için */
}
.detay-afis {
    width: 100%;
    border-radius: 10px;
    border: 3px solid var(--gray-dark2, #333);
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.detay-sag {
    flex-basis: 70%;
    color: var(--white, #f0f0f0);
}

/* Başlık ve Etkileşim Kutusu */
.film-baslik-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
}
.detay-sag h1 {
    font-size: 2.8rem;
    color: var(--yellow-neon1);
    text-shadow: 0 0 10px var(--yellow-neon2);
    margin-top: 0;
    margin-bottom: 0;
    flex-grow: 1;
}
.detay-sag .film-ozet {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 80ch;
    margin-bottom: 30px;
}

/* === GÜNCELLEME: Afiş Üzeri Favori Butonu === */
/* Bu, JS'in oluşturduğu .detay-favori-kutusu'na stil verir */
.detay-sol .detay-favori-kutusu {
    position: absolute;
    top: 15px;
    left: 15px; /* Sadece Kalp butonu solda kaldı */
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border-radius: 8px;
}
.detay-sol .favorite-btn {
    font-size: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.detay-sol .favorite-btn .heart {
    color: var(--white, #f0f0f0);
    transition: all 0.2s ease;
    text-shadow: 0 0 5px #000;
}
.detay-sol .favorite-btn .heart.active {
    color: #ff4757;
    transform: scale(1.1);
}


/* === GÜNCELLEME: Başlığın Yanına Gelen Puanlama Kutusu === */
/* Bu, JS'in oluşturduğu .detay-puan-kutusu'na stil verir */
.film-baslik-container .detay-puan-kutusu {
    flex-shrink: 0; /* Küçülmesini engelle */
    background-color: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 8px;
    /* Varsayılan (Mobil) Stil: Başlığın altında, ortada */
    margin-top: 10px; 
    margin-left: 0;
    display: flex;
    justify-content: center;
}
.detay-puan-kutusu .rating-box {
    display: flex;
    align-items: center;
    gap: 5px;
}
.detay-puan-kutusu .star-rating-container {
    display: flex;
    flex-direction: row-reverse; /* Hover için */
    font-size: 1.8rem;
    cursor: pointer;
}
.detay-puan-kutusu .star-rating-container.voted {
    cursor: default;
    flex-direction: row; /* Oylandıktan sonra düzelt */
}
/* === FİLM DETAY SAYFASI YILDIZLARI (İÇİ BOŞ GÖRÜNÜM) === */
.detay-puan-kutusu .star {
    font-size: 1.8rem;
    cursor: pointer;
    transition: transform 0.1s;
    
    /* İŞTE SİHİR BURADA: İÇİ BOŞ, SARI ÇERÇEVE */
    color: transparent; 
    -webkit-text-stroke: 1.5px var(--yellow-neon1);
    
    text-shadow: none;
    opacity: 1;
}

/* Hover Olunca veya Oylanmışsa İÇİNİ DOLDUR */
.detay-puan-kutusu .star-rating-container:not(.voted) .star:hover,
.detay-puan-kutusu .star-rating-container:not(.voted) .star:hover ~ .star,
.detay-puan-kutusu .star-rating-container.voted .star.active {
    color: var(--yellow-neon1); /* İçi sarı dolsun */
    -webkit-text-stroke: 0; /* Çerçeveyi kaldır */
    text-shadow: 0 0 15px rgba(255, 230, 0, 0.8); /* Parlasın */
    transform: scale(1.2);
}

/* Fragman */
.detay-sag h2 { /* Fragman başlığı */
    font-size: 1.5rem;
    color: var(--neon3);
    border-bottom: 2px solid var(--neon3);
    padding-bottom: 5px;
    margin-top: 30px;
}
.fragman-container {
    margin-top: 15px;
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    background-color: #000;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--neon3);
}
.fragman-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* YORUMLAR BÖLÜMÜ (Yeni) */
.yorumlar-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 2px solid var(--gray-dark2, #333);
    border-radius: 8px;
    color: var(--white, #f0f0f0);
}
.yorumlar-container h3 {
    font-size: 1.8rem;
    color: var(--yellow-neon1);
    margin-bottom: 20px;
    border-bottom: 1px solid var(--gray-dark2, #333);
    padding-bottom: 10px;
    margin-top: 0;
}
#yorum-formu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
#yorum-formu textarea {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border-radius: 5px;
    border: 1px solid var(--gray-dark2, #333);
    background-color: #222;
    color: var(--white, #f0f0f0);
    resize: vertical;
}
#yorum-formu button {
    align-self: flex-end;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    background-color: var(--yellow-neon1);
    color: var(--gray-dark1, #111);
    cursor: pointer;
    transition: all 0.2s ease;
}
#yorum-formu button:hover {
    background-color: var(--yellow-neon2);
    box-shadow: 0 0 10px var(--yellow-neon2);
}
#yorum-giris-uyarisi {
    text-align: center;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    font-size: 1.1rem;
}
#yorum-giris-uyarisi a {
    color: var(--yellow-neon1);
    font-weight: 600;
    text-decoration: none;
}
#yorum-giris-uyarisi a:hover {
    text-decoration: underline;
}

/* Yorum Listesi */
#yorum-listesi .yorum {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--gray-dark2, #333);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}
#yorum-listesi .yorum-baslik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
#yorum-listesi .yorum-kullanici {
    font-weight: 700;
    color: var(--yellow-neon2);
    font-size: 1.1rem;
}
#yorum-listesi .yorum-tarih {
    font-size: 0.8rem;
    color: #999;
}
#yorum-listesi .yorum-govde {
    font-size: 1rem;
    line-height: 1.6;
    color: #eee;
}

/* --- 8. DİĞER SAYFALAR (Hakkımızda, İletişim, Profil, Giriş) --- */
.content-container {
    max-width: 900px;
	padding-top: calc(135px + 30px);
    padding-bottom: 30px; 
    margin: 0 auto; 
    background: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    box-shadow: 0 0 25px var(--neon2);
}
.content-container h1 {
    font-size: 2.8rem;
    color: var(--yellow-neon1);
    text-shadow: 0 0 10px var(--yellow-neon2);
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 2px solid var(--neon3);
    padding-bottom: 15px;
}
.content-container h3 {
    font-size: 1.8rem;
    color: var(--neon3);
    margin-top: 30px;
}
.content-container p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #ddd;
}

/* Profil Sayfası */
.profil-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 30px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    box-shadow: 0 0 25px var(--neon2);
}
.profil-header {
    display: flex;
    align-items: center;
    gap: 30px;
    border-bottom: 2px solid var(--neon3);
    padding-bottom: 30px;
    margin-bottom: 30px;
}
.profil-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid var(--neon3);
    overflow: hidden;
    flex-shrink: 0;
    background: #222;
}
.profil-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profil-bilgi h1 {
    font-size: 2.8rem;
    color: var(--yellow-neon1);
    text-shadow: 0 0 10px var(--yellow-neon2);
    margin: 0 0 10px 0;
}
.profil-bilgi p {
    font-size: 1.2rem;
    color: #ccc;
    margin: 0;
}
.profil-container h3 {
    font-size: 1.8rem;
    color: var(--yellow-neon1);
    margin-top: 0;
    margin-bottom: 20px;
}
.favori-film-listesi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 30px;
}
.favori-film-listesi .film-card {
    width: 100%;
    height: 270px;
}

/* Giriş/Kayıt Sayfası */
.login-box {
    width: 100%;
    max-width: 440px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    box-shadow: 0 0 25px var(--neon2);
    overflow: hidden;
    margin: 40px auto;
}
.form-inner {
    display: flex;
    width: 200%;
    transition: transform 0.6s ease-in-out;
}
.login-box form {
    width: 50%;
    padding: 30px;
    box-sizing: border-box;
}
.login-box.register-active .form-inner {
    transform: translateX(-50%);
}
.login-box h1 {
    font-size: 2.5rem;
    color: var(--yellow-neon1);
    text-shadow: 0 0 10px var(--yellow-neon2);
    margin-top: 0;
    margin-bottom: 25px;
    text-align: center;
}
.login-box input {
    display: block;
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 2px solid #555;
    background: #333;
    color: #fff;
    font-size: 1rem;
    box-sizing: border-box;
}
.login-box input:focus {
    outline: none;
    border-color: var(--neon3);
    box-shadow: 0 0 10px var(--neon3);
}
.login-box button {
    width: 100%;
    padding: 12px 20px;
    background: var(--neon3);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    transition: background 0.3s;
}
.login-box button:hover {
    background: var(--neon2);
}
#hata-mesaji-login,
#hata-mesaji-kayit {
    color: #ff6b6b;
    margin-top: 15px;
    font-weight: bold;
    display: none;
}
.login-box p {
    margin-top: 20px;
    color: #aaa;
    text-align: center;
}
.login-box p a {
    color: var(--neon3);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}
.login-box p a:hover {
    text-decoration: underline;
}
.avatar-secim-label {
    color: #ccc;
    font-weight: 600;
    text-align: left;
    margin-bottom: 10px;
    display: block;
}
.avatar-secim-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.avatar-secenek {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #444;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #333;
    background-size: cover;
    background-position: center;
}
.avatar-secenek:hover {
    border-color: var(--neon3);
    transform: scale(1.1);
}
.avatar-secenek.selected {
    border-color: var(--yellow-neon1);
    box-shadow: 0 0 15px var(--yellow-neon1);
    transform: scale(1.1);
}

/* --- 9. POPÜLER FİLMLER WIDGET (ANA SAYFA) --- */
.popular-widget-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.popular-tabs {
    display: flex;
    border-bottom: 1px solid #444;
    margin-bottom: 15px;
}
.tab-link {
    font-size: 1.1rem;
    font-weight: 600;
    color: #888;
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color 0.3s, border-color 0.3s;
    white-space: nowrap;
}
.tab-link:hover {
    color: #fff;
}
.tab-link.active {
    color: var(--yellow-neon1);
    border-bottom-color: var(--yellow-neon1);
}
.popular-list {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.popular-list:not(#populer-filmler) {
    display: none;
}
.popular-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #222;
    border-radius: 8px;
    padding: 8px;
    text-decoration: none;
    color: #ddd;
    transition: background 0.3s;
}
.popular-item:hover {
    background: #333;
}
.popular-item-rank {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--neon3);
    width: 30px;
    text-align: center;
    flex-shrink: 0;
}
.popular-item-poster {
    width: 45px;
    height: 65px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}
.popular-item-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
}
.popular-item-title {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.popular-item-meta {
    font-size: 0.8rem;
    color: #999;
}
.popular-item-imdb {
    background: #2c2c2c;
    color: #d2e712;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-left: auto;
    flex-shrink: 0;
}
.popular-tum-button {
    text-decoration: none;
    display: block;
    text-align: center;
    background: var(--neon3);
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    margin-top: auto;
    transition: background 0.3s;
}
.popular-tum-button:hover {
    background: var(--neon2);
}

/* KURAL 1: 'Site Ratingi' sekmesindeki YILDIZLI görünüm */
.popular-item-imdb.rating-stars {
    font-size: 1.1rem;
    color: #777; /* Sadece BOŞ YILDIZ rengi */
    letter-spacing: 1px;
    background: none;
    padding: 0;
    font-weight: normal;
}
.popular-item-imdb.rating-stars .star-filled {
    color: gold; /* Dolu yıldız rengi */
}
.popular-item-imdb.rating-stars .rating-text {
    color: #ccc; /* PUAN YAZISI rengi (parlak gri) */
    font-size: 0.9rem;
    margin-left: 5px;
}

/* KURAL 2: 'Popüler Filmler' (statik) sekmesindeki SARI IMDb görünümü */
#populer-filmler-content .popular-item-imdb {
    background: #f5c518; /* IMDb Sarısı */
    color: #000000;      /* Siyah Yazı */
    padding: 5px 8px;
    border-radius: 5px;
    font-weight: bold;
}
#populer-filmler-content .popular-item-imdb.rating-stars {
      background: none;
      color: #ccc;
      padding: 0;
}


/* --- 11. HEADER ARAMA ÇUBUĞU --- */
.header-arama-container {
    flex-grow: 1; /* Ortadaki tüm boşluğu kapla */
    display: flex;
    justify-content: center; /* Ortala */
    padding: 0 20px; /* Logo ve avatar ile araya mesafe koy */
    position: relative; /* Canlı arama kutusu için */
}

.header-arama-form {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 500px; /* Maksimum genişlik */
    background-color: #2c2c2c;
    border: 1px solid var(--gray-dark2, #333);
    border-radius: 20px; /* Yuvarlak kenarlar */
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.header-arama-form:focus-within {
    /* Tıklayınca neon parlama */
    box-shadow: 0 0 10px var(--neon3);
    border-color: var(--neon3);
}

.arama-input {
    flex-grow: 1;
    border: none;
    background: none;
    padding: 10px 15px;
    font-size: 0.9rem;
    color: var(--white, #f0f0f0);
    outline: none; /* Tıklayınca çıkan çerçeveyi kaldır */
}

.arama-input::placeholder {
    color: #888;
}

.arama-btn {
    border: none;
    background: none;
    padding: 8px 12px;
    cursor: pointer;
    color: #aaa;
    transition: color 0.2s;
}

.arama-btn:hover {
    color: var(--yellow-neon1);
}

/* --- 12. CANLI ARAMA SONUÇLARI --- */
.canli-arama-sonuclari {
    display: none; /* Varsayılan olarak GİZLİ */
    position: absolute;
    top: 100%; /* Arama çubuğunun tam altına */
    left: 0;
    right: 0;
    max-width: 500px; /* Arama çubuğuyla aynı genişlikte */
    width: 100%;
    margin: 5px auto 0; /* Üstten 5px boşluk, ve ortala */
    background: #1c1c1c;
    border: 1px solid var(--gray-dark2, #333);
    border-radius: 10px;
    overflow: hidden;
    z-index: 2000; /* Her şeyin üstünde */
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

/* Kutunun içindeki her bir film sonucu */
.canli-sonuc-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    text-decoration: none;
    color: var(--white, #f0f0f0);
    border-bottom: 1px solid var(--gray-dark2, #333);
    transition: background-color 0.2s;
}
.canli-sonuc-item:last-child {
    border-bottom: none;
}
.canli-sonuc-item:hover {
    background-color: var(--neon2, #1e3a8a);
}

.canli-sonuc-img {
    width: 40px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
    flex-shrink: 0;
    background-color: #333; /* Resim yüklenene kadar */
}

.canli-sonuc-info {
    overflow: hidden;
}
.canli-sonuc-title {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* ... (uzunsa) */
}
.canli-sonuc-year {
    font-size: 0.8rem;
    color: #999;
}

/* "Tüm sonuçları gör" linki */
.canli-sonuc-tumunu-gor {
    display: block;
    padding: 12px 10px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--yellow-neon1);
    text-decoration: none;
    background-color: #222;
    transition: background-color 0.2s;
}
.canli-sonuc-tumunu-gor:hover {
    background-color: #333;
}


/* --- 14. FİLM DETAY SAYFASI (TÜR, SÜRE, KADRO) --- */

/* Tür, Süre, Yıl için genel kapsayıcı */
.film-meta-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray-dark2, #333);
}

/* Tür etiketleri (sarı kutucuklar) */
.genres-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.genre-tag {
    background-color: var(--yellow-neon1);
    color: var(--gray-dark1);
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Süre ve Yıl (gri yazılar) */
.meta-item {
    font-size: 0.9rem;
    color: #ccc;
    margin-left: 10px; /* Türlerden biraz ayır */
}

/* Kadro (Yönetmen, Oyuncular) */
.credits-container {
    margin-bottom: 30px;
}
.credits-container h3 {
    font-size: 1.5rem;
    color: var(--neon3);
    border-bottom: 2px solid var(--neon3);
    padding-bottom: 5px;
    margin-top: 0;
    margin-bottom: 15px;
}

.credit-item {
    font-size: 1rem;
    line-height: 1.6;
    color: #ddd;
}
.credit-item strong {
    color: var(--white); /* "Yönetmen:" kısmı */
    margin-right: 8px;
}
.credit-item span {
    color: #ccc; /* İsimlerin olduğu kısım */
}


/* --- 15. MOBİL UYUMLULUK (TÜMÜ) --- */
/* (Tüm @media sorguları buraya toplandı) */

/* Masaüstü için (Puan kutusunu başlığın sağına al) */
@media (min-width: 769px) {
    .film-baslik-container .detay-puan-kutusu {
        margin-top: 0; /* Mobildeki boşluğu sıfırla */
        margin-left: 20px; /* Başlıktan ayır */
    }
}

@media (max-width: 900px) {
    /* 900px VE ALTI */
    
    /* Ana sayfa portal grid */
    .portal-grid-container {
        grid-template-columns: 1fr;
    }
    
    /* filmler.html kartları */
    #film-listesi-wrapper {
        gap: 20px;
    }
    #film-listesi-wrapper .film-card {
        width: 180px;
        height: 270px;
    }
}


@media (max-width: 768px) {
    /* 768px VE ALTI */
    
    /* --- HEADER (GÜNCELLENDİ) --- */
    header {
        flex-direction: row; 
        flex-wrap: wrap; 
        gap: 15px;
        padding: 15px 20px;
    }
    
    .logo {
        flex-basis: auto; /* DÜZELTME */
        flex-grow: 1; 
        width: auto;
        justify-content: flex-start;
    }
	
	.logo-img {
        height: 30px; /* Mobil için daha küçük bir boyut */
    }
    
    .welcome-text {
        font-size: 1.8rem;
        order: 2; /* DÜZELTME */
        width: 100%;
        text-align: center; /* DÜZELTME */
    }
    
    .header-right {
        flex-basis: auto; /* DÜZELTME */
        width: auto;
        justify-content: flex-end;
        flex-shrink: 0; 
    }
    
    nav {
        flex-wrap: wrap;
        gap: 5px;
        padding: 0 10px;
        top: 130px;
    }
    nav a {
        padding: 12px 15px;
        font-size: 0.9rem;
    }
    
    /* --- ANA SAYFA --- */
    main.index-main {
        width: 95%;
        margin-top: 20px;
    }
    .slide-link .slide-caption {
        padding: 20px 30px 30px;
    }
    .slide-link .slide-caption h2 {
        font-size: 1.5rem;
    }
    .slide-link .slide-caption p {
        font-size: 0.9rem;
    }
    .slider-arrow {
        font-size: 2rem;
        padding: 10px 15px;
    }
    .progress-bar-item {
        width: 30px;
    }

    /* Portal kutularını (Editör, Vizyon) 2'li grid yap */
    .horizontal-scroll-wrapper {
        overflow-x: hidden; 
        white-space: normal; 
        display: flex;
        flex-wrap: wrap;
        justify-content: center; 
        gap: 15px;
        min-height: auto; 
        text-align: left !important;
    }
    
    /* filmler.html ve index.html kartlarını 2'li grid yap */
    #film-listesi-wrapper .film-card,
    .horizontal-scroll-wrapper .film-card {
        width: calc(50% - 10px);
        height: auto;
        aspect-ratio: 2 / 3; 
        margin-right: 0;
    }

    /* --- FİLMLER SAYFASI --- */
    .side-frame {
        display: none;
    }
    .filmler-container {
        padding: 20px 10px;
    }
    #film-listesi-wrapper {
        gap: 20px;
    }

    /* --- FİLM DETAY SAYFASI --- */
    .detay-container {
        flex-direction: column;
        padding: 90px 15px 30px 15px;
    }
    .detay-sol {
        flex-basis: auto;
        max-width: 250px;
        margin: 0 auto;
    }
    .detay-sag {
        flex-basis: auto;
    }
    .film-baslik-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .detay-sag h1 {
        font-size: 2rem;
        text-align: center;
    }
    
    /* GÜNCELLEME: Puan kutusu zaten mobil için ayarlandı (default stil) */
    /* GÜNCELLEME: Favori kutusu 'static' hale geliyor */
    .detay-sol .detay-favori-kutusu {
        position: static; 
        flex-direction: row;
        gap: 15px;
        justify-content: center;
        margin-top: 15px;
    }

    /* --- YORUMLAR --- */
    .yorumlar-container {
        margin: 20px 10px;
        padding: 15px;
    }
    
    /* --- STATİK/PROFİL SAYFALARI --- */
    .content-container, .profil-container {
        margin: 20px 10px;
        padding: 20px;
    }
    .content-container h1 {
        font-size: 2rem;
    }
    .profil-bilgi h1 { 
        font-size: 2rem;
    }
    .content-container h3, .profil-container h3 {
        font-size: 1.5rem;
    }
    .profil-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .profil-avatar {
        width: 120px;
        height: 120px;
    }
    .profil-bilgi p {
        font-size: 1rem;
    }
    .favori-film-listesi {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 20px;
    }
    .favori-film-listesi .film-card {
        width: 100%;
        height: 240px;
    }
    
    /* --- POPÜLER WIDGET --- */
    .popular-tabs {
        justify-content: center;
    }
    .tab-link {
        font-size: 1rem;
        padding: 8px 10px;
    }
    .popular-item-poster {
        width: 40px;
        height: 60px;
    }
    .popular-item-title {
        font-size: 0.9rem;
    }
    
    /* --- GİRİŞ/KAYIT --- */
    .login-box {
        margin: 20px 10px;
    }
    .avatar-secenek {
        width: 100%;
        height: 50px;
    }

    /* --- HEADER ARAMA (GÜNCELLENDİ) --- */
    .header-arama-container {
        order: 3; /* DÜZELTME */
        width: 100%;
        padding: 0 10px;
        margin-top: 10px; 
    }
    .header-arama-form {
        max-width: 100%;
    }

    /* --- CANLI ARAMA --- */
    .canli-arama-sonuclari {
        top: auto; 
        bottom: 100%; 
        margin-top: 0;
        margin-bottom: 5px; 
    }

    /* --- FİLM DETAY META/KADRO --- */
    .film-meta-container {
        justify-content: center; 
    }
    .meta-item {
        margin-left: 0; 
    }
    .credits-container {
        text-align: center;
    }
    .credit-item {
        font-size: 0.9rem;
    }
}
/* ============================================================ */
/* === ACİL DÜZELTME: BU KODU CSS DOSYASININ EN ALTINA EKLE === */
/* ============================================================ */

/* 1. Hem Ana Sayfa Hem Detay Sayfası Yıldızlarını SIFIRLA */
.film-star, 
.detay-puan-kutusu .star {
    font-size: 1.8rem !important;
    color: transparent !important;       /* İçi Şeffaf */
    -webkit-text-stroke: 1px #fff700 !important; /* İnce Sarı Çerçeve */
    text-shadow: none !important;        /* Gölge yok (bulanıklığı önler) */
    opacity: 1 !important;               /* Görünürlüğü zorla */
    transition: transform 0.2s ease !important;
    font-weight: normal !important;      /* Yıldızın şeklini düzeltir */
}

/* 2. Hover Olunca veya Seçilince İÇİNİ DOLDUR */
/* (Ana Sayfa Kartları) */
.film-star:hover,
.film-star:hover ~ .film-star,
.film-star.active,
/* (Detay Sayfası) */
.detay-puan-kutusu .star-rating-container:not(.voted) .star:hover,
.detay-puan-kutusu .star-rating-container:not(.voted) .star:hover ~ .star,
.detay-puan-kutusu .star-rating-container.voted .star.active {
    color: #fff700 !important;           /* İçi TAM SARI */
    -webkit-text-stroke: 0 !important;   /* Çerçeveyi kaldır */
    text-shadow: 0 0 15px rgba(255, 247, 0, 0.8) !important; /* Neon Parlama */
    transform: scale(1.2) !important;    /* Hafif büyüt */
}

/* 3. Puan Kutusunun Çerçevesini de Düzelt (Ana Sayfa) */
.rating-slider-box:hover,
.rating-slider-box.voted {
    border: 2px solid #fff700 !important;
    background: #000 !important;
}
/* ============================================================= */
/* === FİLM DETAY SAYFASI: YILDIZ DÜZELTME (FİNAL v3) === */
/* ============================================================= */

/* 1. Kapsayıcı Ayarı: Yıldızları tersten dizer ki "öncekileri boyama" mantığı çalışsın */
.detay-puan-kutusu .star-rating-container {
    display: flex !important;
    flex-direction: row-reverse !important; /* Sağdan sola dizilim (CSS hilesi için şart) */
    justify-content: flex-end !important;   /* Görünüşte sola yaslı olsun */
    align-items: center;
}

/* 2. Yıldızların Varsayılan Hali: İÇİ BOŞ (ŞEFFAF), SARI ÇERÇEVELİ */
.detay-puan-kutusu .star {
    font-size: 2.4rem !important;        /* Yıldız boyutu */
    color: transparent !important;       /* İçi kesinlikle boş olsun */
    -webkit-text-stroke: 1.5px #fff700 !important; /* Kalın Sarı Çerçeve */
    text-shadow: none !important;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.1s;
    margin: 0 1px;
    font-weight: normal !important;      /* Kalınlık ayarını sıfırla */
}

/* 3. HOVER EFEKTİ: Fareyle gelinen ve SOLUNDAKİLERİN (DOM'da sonrakilerin) İÇİNİ DOLDUR */
.detay-puan-kutusu .star-rating-container:not(.voted) .star:hover,
.detay-puan-kutusu .star-rating-container:not(.voted) .star:hover ~ .star {
    color: #fff700 !important;           /* İÇİNİ SARI YAP (Görseldeki hatayı çözen kısım) */
    -webkit-text-stroke: 0 !important;   /* Çerçeveyi kaldır ki düz sarı olsun */
    text-shadow: 0 0 25px rgba(255, 247, 0, 0.9) !important; /* Parlama */
    transform: scale(1.15) !important;   
}

/* 4. OY VERİLDİKTEN SONRA (VOTED): Seçilenler dolu kalsın */
.detay-puan-kutusu .star-rating-container.voted .star.active {
    color: #fff700 !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 0 15px rgba(255, 247, 0, 0.6) !important;
}

/* 5. OY VERİLDİKTEN SONRA: Seçilmeyenler sönük kalsın */
.detay-puan-kutusu .star-rating-container.voted .star:not(.active) {
    color: transparent !important;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2) !important; /* Silik gri çerçeve */
    transform: scale(1) !important;
    text-shadow: none !important;
}
/* === HEADER SAĞ ÜST İKONLAR (OYUN VE HABER) === */
.header-icon-links {
    display: flex;
    align-items: center;
    gap: 15px;          /* İkonlar arası boşluk */
    margin: 0 15px;     /* Sağdan soldan boşluk */
    flex-shrink: 0;     /* Daralmayı önle */
    position: relative;
    z-index: 100;
}

.icon-link {
    display: block;
    width: 48px;        /* İkon genişliği */
    height: 48px;       /* İkon yüksekliği */
    border-radius: 50%; /* Yuvarlak çerçeve */
    overflow: hidden;   /* Dışarı taşanı kes */
    border: 2px solid rgba(255, 255, 255, 0.2); /* İnce beyaz çerçeve */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Yaylanma efekti */
    background: #000;   /* Arkası siyah */
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.icon-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Resmi kutuya tam sığdır */
}

/* Hover Efekti (Mouse ile üzerine gelince) */
.icon-link:hover {
    transform: scale(1.15) rotate(5deg); /* Büyü ve hafif dön */
    border-color: var(--yellow-neon1);   /* Çerçeve sarı olsun */
    box-shadow: 0 0 20px var(--yellow-neon1); /* Sarı neon parlama */
}

/* MOBİL UYUMLULUK (Telefonda nasıl görünecek?) */
@media (max-width: 900px) {
    .header-icon-links {
        /* Mobilde arama çubuğunun altına insin */
        order: 3; 
        margin: 10px auto;
        justify-content: center;
        width: 100%;
    }
    
    .icon-link {
        width: 42px; /* Mobilde biraz daha küçük olsun */
        height: 42px;
    }
}
/* ========================================= */
/* === HABERLER SAYFASI (haberler.html) === */
/* ========================================= */

.haber-list-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 30px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    box-shadow: 0 0 25px var(--neon2);
    min-height: 600px; /* İçerik azsa bile sayfa dolu dursun */
}

.haber-list-container h1 {
    font-size: 2.8rem;
    color: var(--yellow-neon1);
    text-shadow: 0 0 10px var(--yellow-neon2);
    margin-top: 0;
    margin-bottom: 30px;
    text-align: center;
    border-bottom: 2px solid var(--neon3);
    padding-bottom: 15px;
}

#haber-listesi-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.haber-karti {
    display: flex;
    background: #1c1c1c;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #333;
    transition: transform 0.3s, box-shadow 0.3s;
}

.haber-karti:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px var(--neon3);
    border-color: var(--neon3);
}

.haber-karti-resim {
    width: 300px;
    height: 220px;
    flex-shrink: 0;
    overflow: hidden;
}

.haber-karti-resim img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}

.haber-karti:hover .haber-karti-resim img {
    transform: scale(1.1);
}

.haber-karti-icerik {
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.haber-karti-icerik h2 {
    margin: 0 0 10px 0;
    color: var(--yellow-neon1);
    font-size: 1.5rem;
    line-height: 1.3;
}

.haber-karti-meta {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 15px;
    display: flex;
    gap: 15px;
}

.haber-karti-meta strong {
    color: #ccc;
}

.haber-karti-icerik p {
    margin: 0 0 20px 0;
    color: #ddd;
    flex-grow: 1;
    line-height: 1.6;
    font-size: 0.95rem;
}

.haber-karti-link {
    text-decoration: none;
    color: #000;
    background: var(--yellow-neon1);
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s;
    align-self: flex-start;
    display: inline-block;
}

.haber-karti-link:hover {
    background: #fff;
    box-shadow: 0 0 15px var(--yellow-neon1);
    transform: scale(1.05);
}

/* MOBİL UYUMLULUK */
@media (max-width: 768px) {
    .haber-list-container {
        margin: 20px 10px;
        padding: 20px;
    }
    
    .haber-karti {
        flex-direction: column;
    }

    .haber-karti-resim {
        width: 100%;
        height: 200px;
    }

    .haber-karti-icerik h2 {
        font-size: 1.3rem;
    }
}
/* ================================================ */
/* === SAĞ ÜST KONTROL PANELİ (CAM EFEKTİ) === */
/* ================================================ */

/* Ana Panel Kutusu */
.user-action-panel {
    display: flex;
    align-items: center;
    gap: 15px; /* Öğeler arası boşluk */
    background: rgba(255, 255, 255, 0.08); /* Şeffaf beyaz zemin */
    border: 1px solid rgba(255, 255, 255, 0.15); /* İnce çerçeve */
    border-radius: 50px; /* Hap şeklinde yuvarlak */
    padding: 5px 15px 5px 20px; /* İç boşluk */
    backdrop-filter: blur(10px); /* Buzlu cam efekti */
    margin-left: 20px; /* Arama çubuğundan uzaklaş */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Ayırıcı Dikey Çizgiler */
.panel-divider {
    width: 1px;
    height: 25px;
    background: rgba(255, 255, 255, 0.2);
}

/* Zar (Dice) Butonu */
.dice-wrapper {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.dice-icon {
    font-size: 1.8rem;
    filter: drop-shadow(0 0 5px var(--neon3)); /* Mavi parlama */
    transition: transform 0.5s ease;
}

/* Zar Hover: Dönme Animasyonu */
.dice-wrapper:hover .dice-icon {
    transform: rotate(360deg) scale(1.2);
    filter: drop-shadow(0 0 15px var(--yellow-neon1)); /* Sarı parlama */
}

/* Header İkonları (Oyun/Haber) Ayarı */
.header-icon-links {
    margin: 0 !important; /* Eski margin'i sıfırla, panel içinde hizala */
    display: flex;
    gap: 10px;
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .user-action-panel {
        background: transparent; /* Mobilde cam kutuyu kaldır */
        border: none;
        box-shadow: none;
        padding: 0;
        flex-wrap: wrap; /* Sığmazsa aşağı insin */
        justify-content: center;
    }
    .panel-divider { display: none; } /* Çizgileri gizle */
    .header-icon-links { margin: 10px 0 !important; }
}
/* ============================================================ */
/* === SAĞ ÜST PANEL DÜZELTMESİ (JİLET GİBİ HİZALAMA) === */
/* ============================================================ */

/* 1. Ana Kutuyu Hizala */
.user-action-panel {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between; /* İçindekileri eşit dağıt */
    height: 54px; /* Yüksekliği sabitledim, kayma yapmaz */
    padding: 0 8px 0 15px !important; /* Soldan biraz boşluk, sağdan avatar için az boşluk */
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    margin-left: 20px;
    min-width: 260px; /* Kutunun çok küçülmesini engelle */
}

/* 2. Ortadaki İkon Grubunu (Oyun & Haber) Hizala */
.user-action-panel .header-icon-links {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important; /* İkonlar arası mesafe */
    margin: 0 15px !important; /* Çizgilerden uzaklaşsın */
}

/* 3. İkonların Boyutunu Sabitle (Hepsi Aynı Olsun) */
.user-action-panel .icon-link, 
.user-action-panel .dice-wrapper {
    width: 38px !important;  /* Genişlik sabit */
    height: 38px !important; /* Yükseklik sabit */
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Asla ezilmesinler */
}

/* Zarın boyutunu biraz büyüt */
.dice-icon {
    font-size: 1.6rem !important;
    line-height: 1;
}

/* 4. Ayırıcı Çizgileri Ortala */
.panel-divider {
    width: 1px;
    height: 24px !important; /* Çizgi boyu */
    background: rgba(255, 255, 255, 0.2);
    display: block;
}

/* 5. Profil Avatarını (En Sağdaki) Hizala */
#member-login-container {
    display: flex;
    align-items: center;
    height: 100%;
}

.profile-avatar-img {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    border: 2px solid rgba(255,255,255,0.3);
}
/* ============================================================ */
/* === NAVİGASYON FİNAL (BOX-SHADOW TEKNİĞİ - KAYMA YOK) === */
/* ============================================================ */

nav {
    /* Kutuyu Esnek Yap */
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important; /* Çocukları (linkleri) yukarıdan aşağıya GER */
    
    /* Görünüm */
    background-color: #0a0a0a !important; /* Çok koyu gri */
    border-bottom: 1px solid #222 !important; /* Navigasyonun kendi alt çizgisi */
    box-shadow: 0 5px 20px rgba(0,0,0,0.9) !important;
    
    /* Boyutlandırma */
    height: 64px !important; /* Yüksekliği sabitledik */
    padding: 0 !important; /* Kapsayıcıda boşluk yok */
    gap: 0 !important; 
    
    /* Sabitleme */
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
}

nav a {
    /* Yazıyı Ortala */
    display: flex !important;
    align-items: center !important; /* Dikeyde tam orta */
    justify-content: center !important; /* Yatayda tam orta */
    
    height: 100% !important; /* Ebeveynin boyunu (64px) tam kapla */
    
    /* Yazı Stili (Senin istediğin sade tarz) */

    font-family: 'Poppins', sans-serif !important;
    font-size: 0.95rem !important;    /* 1rem yerine 0.95 (Daha keskin ve kibar) */
    font-weight: 500 !important;      /* 600 yerine 500 (Kabalığı alır, modern durur) */
    letter-spacing: 1.5px !important; /* Harfleri açtık (İşte modern yapan bu) */
    text-transform: uppercase !important;
    color: #e0e0e0 !important;        /* Soluk gri (#ccc) yerine parlak gümüş */
    text-decoration: none !important;
    /* Boşluklar */
    padding: 0 30px !important;       /* Yanları biraz daha ferahlattık */
    margin: 0 !important;

    
    /* Kenarlık YOK (Kaymayı önleyen kural) */
    border: none !important; 
    
    transition: all 0.2s ease-in-out !important;
    background: transparent !important;
}

/* --- HOVER EFEKTİ (HİLE BURADA) --- */
nav a:hover {
    background-color: #1a1a1a !important; /* Arka planı hafif aydınlat */
    color: #fff !important; /* Yazıyı parlat */
    
    /* BORDER YERİNE GÖLGE KULLANIYORUZ */
    /* inset 0 -4px 0 -> İçeriden, alttan, 4px kalınlığında çizgi çeker */
    /* Bu işlem yer kaplamadığı için yazı yerinden oynamaz */
    box-shadow: inset 0 -4px 0 var(--neon3) !important; 
}

/* Mobil Ayarı */
@media (max-width: 768px) {
    nav {	
        top: 130px !important;
        height: auto !important;
        flex-wrap: wrap !important;
    }
    nav a {
        width: 100% !important;
        height: 50px !important;
        border-bottom: 1px solid #222 !important; /* Mobilde normal çizgi kalsın */
        box-shadow: none !important;
    }
}
/* ================================================================== */
/* === MASTER FIX: HEADER ÜSTTE, MENÜ ALTTA, ARAMA ORTADA === */
/* ================================================================== */

/* 1. HEADER (EN ÜST KATMAN) */
header {
    display: flex !important;
    align-items: center !important; /* İçindekileri dikey ortala */
    justify-content: space-between !important; /* Solu ve sağı kenarlara it */
    
    position: fixed !important; /* Sayfaya sabitle */
    top: 0 !important; /* En tepeye yapış */
    left: 0 !important;
    width: 100% !important;
    height: 80px !important; /* Yüksekliği sabitle */
    
    background: #1c1c1c !important; /* Header rengi */
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    z-index: 1001 !important; /* En üstte bu dursun */
    padding: 0 30px !important;
    box-sizing: border-box !important;
}

/* 2. NAVİGASYON MENÜSÜ (HEADER'IN ALTI) */
nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    position: fixed !important;
    top: 80px !important; /* Header'ın bittiği yerden başla (80px aşağı) */
    left: 0 !important;
    width: 100% !important;
    height: 60px !important; /* Yüksekliği sabitle */
    
    background-color: #0a0a0a !important; /* Daha koyu siyah */
    border-bottom: 2px solid #222 !important;
    z-index: 1000 !important; /* Header'ın altında kalsın */
    padding: 0 !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.8) !important;
}

/* 3. ARAMA ÇUBUĞU (HEADER İÇİNDE TAM MERKEZ) */
.header-arama-container {
    position: absolute !important; /* Header'a göre serbest bırak */
    left: 50% !important; /* Ortaya git */
    top: 50% !important;  /* Dikeyde de ortaya git */
    transform: translate(-50%, -50%) !important; /* Tam merkezi bul */
    
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
}

/* Arama Formunun Kendisi */
.header-arama-form {
    width: 100% !important;
    margin: 0 !important;
    background-color: rgba(255, 255, 255, 0.1) !important; /* Hafif belirgin yap */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 4. SAYFA İÇERİĞİNİ AŞAĞI İT (ÇAKIŞMAYI ÖNLE) */
body {
    /* Header (80) + Nav (60) + Boşluk (20) = 160px */
    padding-top: 160px !important; 
}

/* --- MOBİL UYUMU --- */
@media (max-width: 1100px) {
    /* Mobilde Header büyür, Nav aşağı kayar */
    header {
        height: auto !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding: 10px !important;
        position: relative !important; /* Mobilde akışına bırak */
    }
    
    nav {
        position: relative !important; /* Mobilde header'ın altına aksın */
        top: 0 !important;
        height: auto !important;
        flex-wrap: wrap !important;
    }
    
    .header-arama-container {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin-top: 10px !important;
        order: 3; /* En alta at */
    }
    
    body {
        padding-top: 0 !important; /* Mobilde padding'i sıfırla, akışına bırak */
    }
}
/* ============================================================ */
/* === NAVİGASYON FİNAL RÖTUŞ (DAHA İNCE & KİBAR) === */
/* ============================================================ */

/* 1. MENÜ KUTUSU (Daha İnce) */
nav {
    height: 50px !important; /* Yüksekliği azalttık (Eskisi 60px idi) */
    top: 80px !important;    /* Header'ın hemen altı */
    
    /* Diğer ayarları koruyoruz */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #0a0a0a !important;
    border-bottom: 2px solid #222 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.8) !important;
    position: fixed !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    padding: 0 !important;
}

/* 2. MENÜ YAZILARI (Daha Küçük) */
nav a {
    font-size: 0.9rem !important; /* Yazıyı küçülttük (Eskisi 1rem idi) */
    font-weight: 600 !important;
    letter-spacing: 0.5px !important; /* Harfleri çok hafif açtık, şık dursun */
    color: #d0d0d0 !important; /* Çok hafif kırdık beyazı */
    
    /* Hizalama ayarları */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 0 20px !important; /* Yan boşlukları da biraz azalttık */
    margin: 0 !important;
    border: none !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease-in-out !important;
    background: transparent !important;
}

/* 3. SAYFA BOŞLUĞU (Menü inceldiği için yukarı çekiyoruz) */
body {
    /* Header (80) + Nav (50) + Boşluk (20) = 150px */
    padding-top: 150px !important; 
}

/* --- HOVER EFEKTİ --- */
nav a:hover {
    background-color: #151515 !important;
    color: #fff !important;
    box-shadow: inset 0 -3px 0 var(--neon3) !important; /* Çizgiyi de incelttik (4px -> 3px) */
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    body { padding-top: 0 !important; } /* Mobilde akışına bırak */
    
    nav {
        position: relative !important;
        top: 0 !important;
        height: auto !important;
        flex-wrap: wrap !important;
    }
    nav a {
        height: 45px !important;
        font-size: 0.85rem !important;
        width: 100% !important;
        border-bottom: 1px solid #222 !important;
        box-shadow: none !important;
    }
}
/* ============================================================ */
/* === FOOTER DÜZENLEMESİ: İKONLAR SAĞDA === */
/* ============================================================ */

footer {
    position: relative !important; /* İkonları konumlandırmak için referans */
    padding: 40px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Yazıları ortala */
    justify-content: center !important;
    gap: 10px !important;
}

/* İkonların Kutusu (Sağa Taşıma İşlemi) */
.footer-socials {
    position: absolute !important; /* Normal akıştan çıkar */
    right: 40px !important;        /* Sağdan 40px boşluk bırak */
    top: 50% !important;           /* Dikeyde ortala */
    transform: translateY(-50%) !important; /* Tam ortalama ayarı */
    
    display: flex !important;
    gap: 15px !important;
    margin: 0 !important;
}

/* İkon Boyutları */
.social-link {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.1rem !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* MOBİL UYUMLULUK (Telefonda Sağa Sıkışmasın) */
@media (max-width: 900px) {
    footer {
        padding-bottom: 80px !important; /* Altına boşluk aç */
    }
    
    .footer-socials {
        position: relative !important; /* Mobilde sabitlemeyi kaldır */
        right: auto !important;
        top: auto !important;
        transform: none !important;
        
        justify-content: center !important;
        margin-top: 20px !important; /* Yazıların altına insin */
        order: 3 !important; /* En alta geçsin */
    }
}
/* ============================================================ */
/* === KENDİ İKONLARIN İÇİN DÜZELTME === */
/* ============================================================ */

/* Butonun kendisi (Kutu) */
.social-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 45px !important;
    height: 45px !important;
    padding: 10px !important; /* Resim kenarlara yapışmasın diye boşluk */
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    overflow: hidden !important; /* Dışarı taşanı kes */
}

/* İçindeki Resim (Senin İkonun) */
.social-link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Resmi bozmadan sığdır */
    display: block !important;
    transition: transform 0.3s ease !important;
}

/* Hover Efekti: Kutunun Rengi Değişsin, Resim Büyüsün */
.social-link:hover img {
    transform: scale(1.2); /* Üstüne gelince resim büyüsün */
}

/* --- RENKLİ PARLAMALAR (ARKAPLAN İÇİN) --- */

/* Twitter Hover */
.social-link.x-twitter:hover {
    background-color: #000 !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5) !important;
    border-color: #fff !important;
}

/* Instagram Hover */
.social-link.insta:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
    box-shadow: 0 0 20px rgba(214, 36, 159, 0.6) !important;
    border-color: transparent !important;
}

/* LinkedIn Hover */
.social-link.linkedin:hover {
    background-color: #0077b5 !important;
    box-shadow: 0 0 20px rgba(0, 119, 181, 0.6) !important;
    border-color: #0077b5 !important;
}
/* ============================================================ */
/* === NAVİGASYON FİNAL (SENİN İSTEDİĞİN ESKİ STİL) === */
/* ============================================================ */

nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    
    background-color: #0a0a0a !important;
    border-bottom: 2px solid #1a1a1a !important;
    
    padding: 0 !important;
    height: 64px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.8) !important;
    
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
}

nav a {
    /* --- SENİN İSTEDİĞİN ESKİ STİL KODLARI BURADA --- */
    font-family: 'Poppins', sans-serif !important;
    font-size: 1rem !important;      /* Eski boyut (1rem) */
    font-weight: 600 !important;     /* Eski kalınlık (Bold) */
    letter-spacing: 0.5px !important;/* Eski harf aralığı (Daha sıkı) */
    color: #ccc !important;          /* Eski renk (Hafif gri) */
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 0 25px !important;      /* Eski yan boşluklar */
    margin: 0 !important;
    /* ------------------------------------------------ */
    
    /* HİZALAMA İÇİN GEREKLİ OLAN KISIM (BUNU ELLEME) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    /* Büyük harf olduğu için optik olarak ortalansın diye minik dokunuş */
    padding-top: 3px !important; 
    border: none !important;
    transition: all 0.2s ease-in-out !important;
    background: transparent !important;
}

/* Hover Efekti (Aynı kalsın, güzel duruyor) */
nav a:hover {
    background-color: #151515 !important;
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.3) !important;
    box-shadow: inset 0 -4px 0 var(--neon3) !important;
}

/* Mobil */
@media (max-width: 768px) {
    nav {
        top: 130px !important;
        height: auto !important;
        flex-wrap: wrap !important;
    }
    nav a {
        width: 100% !important;
        height: 50px !important;
        border-bottom: 1px solid #222 !important;
        box-shadow: none !important;
        padding-top: 0 !important;
    }
}
/* ============================================================ */
/* === FİNAL ÇÖZÜM: TOK SLIDER & OTOMATİK ALT KUTULAR === */
/* ============================================================ */

/* 1. ANA HİZALAMA (Genişliği Sabitle) */
.slider-container, 
.portal-grid-container {
    width: 94% !important;         /* Ekranın %94'ünü kapla (Kenarlar eşit) */
    max-width: 1350px !important;  /* Maksimum genişlik sınırı */
    margin-left: auto !important;  /* Ortala */
    margin-right: auto !important; /* Ortala */
    box-sizing: border-box !important;
    display: block;
}

/* 2. SLIDER (HABER PORTALI) - KESİN DÜZELTME */
.slider-container {
    margin-top: 30px !important;
    
    /* YÜKSEKLİĞİ SABİTLİYORUZ (Görseldeki gibi tok dursun) */
    height: 550px !important; 
    /* Aspect ratio kullanmıyoruz, direkt piksel veriyoruz ki ince kalmasın */
    
    background: #000 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8) !important;
    position: relative !important;
}

/* Slider Resmi */
.slide-link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Resmi kutuya tam doldur */
    object-position: center top !important; /* Yüzlere odaklan */
}

/* 3. ALT KUTULAR (IZGARA YAPISI) */
.portal-grid-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Tam ortadan ikiye */
    gap: 30px !important; /* Aradaki boşluk */
    margin-top: 40px !important;
    align-items: start !important; /* Kutular yukarıdan hizalansın */
}

/* 4. KUTULARIN KENDİSİ (VERİYE GÖRE DAVRANIŞ) */
.portal-box {
    width: 100% !important;
    
    /* API GELMEDEN ÖNCE: Kalıp gibi dursun (Çökmesin) */
    min-height: 400px !important; 
    
    /* API GELDİKTEN SONRA: İçerik kadar uzasın */
    height: auto !important; 
    
    background: #1c1c1c !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px !important;
    
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 20px !important;
}

/* 5. FİLM AFİŞLERİ (İÇERİK DÜZENİ) */
.horizontal-scroll-wrapper,
#filmler-tumu-wrapper, 
#vizyon-wrapper {
    width: 100% !important;
    
    /* Afişleri yan yana diz, sığmazsa aşağı at */
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 15px !important;
    
    padding: 20px !important;
    overflow: visible !important; /* Kaydırma yok, hepsi görünsün */
}

.film-card {
    width: 100% !important;
    aspect-ratio: 2 / 3 !important; /* Afiş oranı */
}

.film-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 10px !important;
}

/* --- MOBİL UYUMLULUK --- */
@media (max-width: 900px) {
    .slider-container {
        height: 250px !important; /* Mobilde küçült */
        width: 96% !important;
    }
    .portal-grid-container {
        grid-template-columns: 1fr !important; /* Tek sütun */
        width: 96% !important;
    }
    .horizontal-scroll-wrapper {
        display: flex !important; /* Mobilde yan yana kaydırma aç */
        overflow-x: auto !important;
        grid-template-columns: none !important;
    }
    .film-card {
        width: 140px !important;
        flex-shrink: 0 !important;
    }
}
/* ============================================================ */
/* === FİNAL DÜZELTME: RESMİ KUTUYA TAM SIĞDIR (SİYAH YOK) === */
/* ============================================================ */

/* 1. Slider Kutusu (Çerçeve) */
.slider-container {
    /* Kutunun arka planını siyah yapıyoruz ama resim üstüne bineceği için gözükmeyecek */
    background: #000 !important;
    /* Taşan kısımları kesinlikle gizle */
    overflow: hidden !important;
    /* Köşeleri koru */
    border-radius: 20px !important;
}

/* 2. Resmin İçinde Olduğu Link Etiketi (ÖNEMLİ) */
/* Linkin de kutuyu tam kaplaması lazım ki resim büyüyebilsin */
.slide-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Resmin Kendisi (Sihirli Kısım) */
.slide-link img {
    width: 100% !important;   /* Genişliği fulle */
    height: 100% !important;  /* Yüksekliği fulle */
    
    /* İŞTE BU KOD SİYAHLIKLARI YOK EDER: */
    /* Resmi kutuya yay, en boy oranını koru ama boşluk bırakma (Gerekirse kenardan kırp) */
    object-fit: cover !important; 
    
    /* Resim hizalaması (Genelde yüzler üstte olur, üste odaklan) */
    object-position: center top !important; 
    
    display: block !important; /* Satır içi boşlukları sil */
    border-radius: 20px !important; /* Resmin köşelerini de yuvarla */
}
/* ============================================================ */
/* === SLIDER TAM EKRAN DÜZELTMESİ (SİYAH YOK, BOŞLUK YOK) === */
/* ============================================================ */

/* 1. KAPSAYICI KUTU (Referans Noktası) */
.slider-container {
    position: relative !important;
    width: 94% !important;
    max-width: 1350px !important;
    margin: 30px auto !important;
    
    /* Yüksekliği sabitliyoruz */
    height: 550px !important; 
    
    background: #000 !important;
    border-radius: 20px !important;
    overflow: hidden !important; /* Dışarı taşanı kes */
    box-shadow: 0 20px 50px rgba(0,0,0,0.8) !important;
    
    padding: 0 !important; /* İÇ BOŞLUK SIFIRLANDI */
    border: none !important; /* Kenarlık varsa kaldır */
}

/* 2. LİNK ETİKETİ (KUTUYU KÖŞEDEN KÖŞEYE KAPLA) */
.slide-link {
    position: absolute !important; /* Normal akıştan çıkar */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    z-index: 1 !important; /* En altta dursun */
}

/* 3. RESİM (ZORLA SIĞDIR VE DOLDUR) */
.slide-link img {
    width: 100% !important;
    height: 100% !important;
    
    /* SİYAHLIĞI YOK EDEN KOD: */
    object-fit: cover !important; /* Resmi kutuya yay, boşluk bırakma, gerekirse kırp */
    object-position: center top !important; /* Resmin üst kısmını hizala */
    
    display: block !important;
    border-radius: 0 !important; /* Köşeler zaten container'da var */
    border: none !important;
}

/* 4. YAZILAR VE BAR (Resmin Üstüne Çıkar) */
.slide-caption, 
.slider-progress-bar, 
.slider-arrow {
    z-index: 10 !important; /* Resmin (z-index: 1) üstünde durmalı */
}

/* --- MOBİL UYUMU --- */
@media (max-width: 900px) {
    .slider-container {
        height: 250px !important; /* Mobilde boyutu küçült */
        width: 96% !important;
    }
}
/* ============================================================ */
/* === SLIDER KURTARMA OPERASYONU (RESİMLER GERİ GELSİN) === */
/* ============================================================ */

/* 1. SLIDER DIŞ ÇERÇEVE (SABİT BOYUT) */
.slider-container {
    position: relative !important;
    width: 94% !important;
    max-width: 1350px !important;
    height: 550px !important; /* Yükseklik sabit */
    margin: 30px auto !important;
    
    background: #000 !important;
    border-radius: 20px !important;
    overflow: hidden !important; /* Taşanları gizle */
    box-shadow: 0 20px 50px rgba(0,0,0,0.8) !important;
    display: block !important;
}

/* 2. SLIDER ŞERİDİ (RESİMLERİ YAN YANA TUTAR) */
.slider-wrapper {
    display: flex !important; /* Yan yana dizilim */
    height: 100% !important;  /* Kutunun boyunu al */
    width: 100% !important;   /* Genişlik JS ile yönetiliyor ama baz olsun */
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. HER BİR SLIDE (LİNK ETİKETİ) */
.slide-link {
    /* Mutlak konum DEĞİL, Esnek konum kullanıyoruz */
    display: block !important;
    position: relative !important; 
    
    /* Her resim slider penceresi kadar yer kaplasın */
    flex: 0 0 100% !important; 
    width: 100% !important;
    height: 100% !important;
    
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important; /* Resim taşarsa kes */
}

/* 4. RESİM (SİYAHLIK OLMADAN DOLDUR) */
.slide-link img {
    width: 100% !important;
    height: 100% !important;
    
    /* Sihirli Kod: Resmi esnetmeden kutuyu doldur, fazlasını kırp */
    object-fit: cover !important; 
    object-position: center top !important; /* Üst/Orta odaklı */
    
    display: block !important;
    border-radius: 0 !important; /* Köşeler zaten container'da var */
    border: none !important;
}

/* 5. YAZILAR VE BAR (RESMİN ÜSTÜNE BİNSİN) */
.slide-caption,
.slider-progress-bar,
.slider-arrow {
    z-index: 10 !important; /* Resmin üstünde dursun */
}

/* MOBİL UYUMLULUK */
@media (max-width: 900px) {
    .slider-container {
        height: 250px !important; /* Mobilde boyutu küçült */
        width: 96% !important;
    }
}
/* ============================================================ */
/* === LİDERLİK TABLOSU (LEADERBOARD) STİLLERİ === */
/* ============================================================ */

.leaderboard-section {
    width: 94% !important;
    max-width: 1080px !important;
    margin-top: 50px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* İki tablo yan yana */
    gap: 40px !important;
    margin-bottom: 50px !important;
}

.leaderboard-box {
    background: rgba(20, 20, 20, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 20px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

/* Başlıklar (Wordle / Hollydle) */
.lb-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.lb-title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.2) !important;
}

/* Tablo Satırları */
.lb-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 15px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
    transition: transform 0.2s !important;
}

.lb-row:hover {
    transform: scale(1.02) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Sıralama Madalyaları */
.lb-rank {
    font-size: 1.2rem !important;
    width: 30px !important;
    text-align: center !important;
}

/* 1. Sıra (Altın) */
.lb-row.gold { border: 1px solid #ffd700 !important; box-shadow: 0 0 10px rgba(255, 215, 0, 0.2) !important; }
.lb-row.gold .lb-rank { text-shadow: 0 0 10px #ffd700 !important; }

/* 2. Sıra (Gümüş) */
.lb-row.silver { border: 1px solid #c0c0c0 !important; }

/* 3. Sıra (Bronz) */
.lb-row.bronze { border: 1px solid #cd7f32 !important; }

/* Kullanıcı Bilgisi */
.lb-user {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-grow: 1 !important;
    margin-left: 10px !important;
}

.lb-avatar {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.lb-name {
    font-weight: 600 !important;
    color: #ddd !important;
}

.lb-score {
    font-weight: 800 !important;
    color: var(--yellow-neon1) !important;
}

/* Mobil Uyum */
@media (max-width: 900px) {
    .leaderboard-section {
        grid-template-columns: 1fr !important; /* Alt alta geçsin */
    }
}
/* ============================================================ */
/* === LOGO VE FOOTER RESİM AYARLARI === */
/* ============================================================ */

/* 1. SOL ÜST LOGO AYARI */
header {
    padding-left: 15px !important; /* Logoyu sola yasla */
}

.logo-link {
    margin-right: auto !important; /* Diğerlerini sağa it */
    display: block !important;
}

.site-logo-img {
    height: 35px !important; /* Logo boyutu (İstersen artır) */
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
    transition: transform 0.3s ease;
}

.logo-link:hover .site-logo-img {
    transform: scale(1.05);
}

/* 2. FOOTER İKON RESİMLERİ */
.social-link {
    width: 45px !important;
    height: 45px !important;
    padding: 10px !important; /* Resim kenara yapışmasın */
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.social-link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

.social-link:hover {
    background: #fff !important; /* Üstüne gelince beyaz olsun */
    transform: translateY(-5px) !important;
}
/* ============================================================ */
/* === FİLM LİSTELEME & ARAMA SONUÇLARI HİZALAMA === */
/* ============================================================ */

/* 1. Ana Kapsayıcı (Grid Sistemi) */
#film-listesi-wrapper {
    display: grid !important;
    /* Kartların genişliği en az 180px olsun, ekrana göre yan yana dizilsin */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 25px !important; /* Kartlar arası boşluk */
    width: 100% !important;
    justify-items: center !important; /* Ortala */
    align-items: start !important; /* Yukarıdan hizala */
}

/* 2. Film Kartı (Sabit Yapı) */
.film-card {
    width: 100% !important;
    /* Kartın yüksekliği otomatik olsun ama aspect-ratio ile koruyalım */
    aspect-ratio: 2 / 3 !important; 
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #111 !important;
    border: 1px solid #333 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    
    /* İçeriği düzenle */
    display: flex !important;
    flex-direction: column !important;
}

/* Hover Efekti */
.film-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.8) !important;
    border-color: var(--neon3) !important;
    z-index: 5 !important;
}

/* 3. Link Katmanı (Resmi Tutar) */
.film-link-layer {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    position: relative !important;
}

/* 4. Film Posteri (Kutuyu Tam Doldur) */
.film-poster-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Resmi sündürme, kutuya yay */
    display: block !important;
}

/* 5. Film Başlığı (Resmin Üzerinde, Altta) */
.film-info-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 40px 10px 10px 10px !important;
    background: linear-gradient(to top, rgba(0,0,0,1) 20%, transparent) !important;
    pointer-events: none !important;
}

.film-title-text {
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    display: block !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
    
    /* Uzun başlıkları yönet (2 satırdan fazlasını kes) */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
}

/* Mobil Ayarı */
@media (max-width: 600px) {
    #film-listesi-wrapper {
        grid-template-columns: repeat(2, 1fr) !important; /* Mobilde 2 sütun */
        gap: 15px !important;
    }
}
/* ============================================================ */
/* === MOBİL HEADER DÜZELTMESİ (SIRALI VE ORTALI) === */
/* ============================================================ */

@media (max-width: 900px) {
    
    /* 1. HEADER KAPSAYICISI (DİKEY DİZİLİM) */
    header {
        display: flex !important;
        flex-direction: column !important; /* Yan yana değil, alt alta diz */
        align-items: center !important;    /* Her şeyi ortala */
        height: auto !important;           /* İçerik kadar uza */
        padding: 15px 10px !important;
        gap: 15px !important;              /* Parçalar arası boşluk */
        position: relative !important;
    }

    /* 2. LOGO (EN ÜST) */
    .logo-link {
        order: 1 !important; /* Sıralama 1 */
        margin: 0 !important;
        width: auto !important;
    }
    .site-logo-img {
        height: 45px !important; /* Mobilde ideal logo boyutu */
    }

    /* 3. İKONLAR PANELİ (ORTA) */
    .user-action-panel {
        order: 2 !important; /* Sıralama 2 (Arama çubuğundan önce) */
        
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 20px !important; /* İkon grupları arası boşluk */
        
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        
        /* Masaüstü efektlerini sıfırla */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        min-width: auto !important;
    }

    /* Oyun ve Haber İkonları (Panelin İçinde) */
    .user-action-panel .header-icon-links {
        display: flex !important;
        gap: 15px !important;
        margin: 0 !important;
    }

    /* Ayırıcı Çizgileri Gizle */
    .panel-divider { display: none !important; }

    /* 4. ARAMA ÇUBUĞU (EN ALT) */
    .header-arama-container {
        order: 3 !important; /* Sıralama 3 */
        
        position: relative !important; /* Mutlak konumdan çıkar */
        left: auto !important;
        top: auto !important;
        transform: none !important;
        
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .header-arama-form {
        width: 100% !important;
    }

    /* 5. NAVİGASYON MENÜSÜ (HEADER'IN ALTINDA) */
    nav {
        position: relative !important;
        top: 0 !important;
        padding: 5px 0 !important;
        height: auto !important;
        flex-wrap: wrap !important;
    }
    
    nav a {
        font-size: 0.8rem !important;
        padding: 10px 8px !important;
    }

    /* 6. SAYFA İÇERİĞİ (BOŞLUK SIFIRLAMA) */
    body {
        padding-top: 0 !important;
    }
}
/* ==================================================================== */
/* === FİNAL MOBİL DÜZELTME: ÇAKIŞMAYI "STATIC" İLE YOK ETME === */
/* ==================================================================== */

@media (max-width: 900px) {

    /* 1. HEADER'I DİKEY YAP VE YÜKSEKLİĞİ SERBEST BIRAK (KİLİT NOKTA) */
    header {
        display: flex !important;
        flex-direction: column !important; /* Alt alta diz */
        align-items: center !important;
        
        height: auto !important;      /* Yükseklik içeriğe göre uzasın */
        min-height: auto !important;  /* Minimum yükseklik olmasın */
        
        padding: 15px 10px !important;
        gap: 15px !important; /* Parçalar arası boşluk */
        position: relative !important;
    }

    /* 2. ARAMA ÇUBUĞUNU ZORLA YERİNE OTURT */
    .header-arama-container {
        /* Absolute yerine STATIC kullanıyoruz, bu "akışa gir" demektir */
        position: static !important; 
        transform: none !important; /* Masaüstü merkezlemeyi iptal et */
        left: auto !important;
        top: auto !important;
        
        width: 100% !important;
        margin: 10px 0 !important; /* Üstten alttan boşluk bırak */
        order: 3 !important;       /* Sıralamada en sona geç */
        z-index: 1 !important;
    }

    /* 3. İKON PANELİNİ DÜZELT */
    .user-action-panel {
        position: static !important;
        order: 2 !important; /* Ortaya geç */
        margin: 0 !important;
        width: 100% !important;
        justify-content: center !important;
        
        background: transparent !important; /* Mobilde kutu olmasın */
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* İkonların arasını aç */
    .user-action-panel .header-icon-links,
    .dice-wrapper,
    #member-login-container {
        margin: 0 10px !important;
    }
    
    /* Çizgileri kaldır */
    .panel-divider { display: none !important; }

    /* 4. LOGO (EN ÜSTTE) */
    .logo-link {
        order: 1 !important;
        margin: 0 !important;
        align-self: center !important;
    }

    /* 5. MENÜYÜ DE KURTAR */
    nav {
        position: relative !important;
        top: 0 !important;
        margin-top: 10px !important;
    }
    
    /* Sayfa içeriği header'ın altına kaçmasın */
    body {
        padding-top: 0 !important;
    }
}
/* ============================================================ */
/* === MOBİL FİNAL DÜZELTME: ZORLA AYIRMA & SIRALAMA === */
/* ============================================================ */

@media (max-width: 900px) {
    
    /* 1. HEADER'I DİKEY YAP */
    header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: auto !important;
        padding: 10px !important;
        position: relative !important;
    }

    /* 2. LOGO (EN ÜSTTE) */
    .logo-link {
        order: 1 !important;
        margin: 0 !important;
        margin-bottom: 10px !important; /* Altındakilerle mesafe */
    }

    /* 3. İKON PANELİ (ORTADA - YAN YANA) */
    .user-action-panel {
        order: 2 !important;
        
        /* Masaüstü kutu stilini sıfırla */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        
        /* İkonları ortala ve yan yana diz */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 20px !important; /* İkonlar arası mesafe */
    }

    /* Panel içindeki çizgileri yok et */
    .panel-divider { display: none !important; }

    /* İkon Gruplarını Hizala */
    .header-icon-links {
        margin: 0 !important;
        display: flex !important;
        gap: 15px !important;
    }

    /* 4. ARAMA ÇUBUĞU (EN ALTTA - ZORLA AŞAĞI İTİLDİ) */
    .header-arama-container {
        order: 3 !important;
        
        /* MUTLAK KONUMU ÖLDÜR */
        position: static !important; 
        transform: none !important;
        
        width: 100% !important;
        
        /* İŞTE ÇÖZÜM BURADA: YUKARIDAN ZORLA BOŞLUK VER */
        margin-top: 20px !important; 
        margin-bottom: 10px !important;
    }

    /* 5. MENÜYÜ DE EN ALTA AL */
    nav {
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
        margin-top: 0 !important;
    }
    
    /* Sayfa içeriğini serbest bırak */
    body { padding-top: 0 !important; }
}
/* ============================================================ */
/* === LOGO YAZI TİPİ: LEAGUE SPARTAN === */
/* ============================================================ */

.site-logo-text {
    /* 1. Font Ayarı */
    font-family: 'League Spartan', sans-serif !important;
    font-size: 1.6rem !important;  /* Boyutu biraz büyüttük */
    
    /* 2. "Sinematik" Kısmı (KALIN) */
    font-weight: 800 !important;   /* Extra Bold */
    color: #ffffff !important;     /* Beyaz */
    
    /* 3. Harf Ayarları */
    letter-spacing: -0.5px !important; /* Harfleri hafif sıkıştır, bütünlük sağla */
    text-transform: none !important;   /* Senin yazdığın gibi (Büyük/Küçük harf) kalsın */
    line-height: 1 !important;
    
    /* Gölge */
    text-shadow: 0 2px 10px rgba(0,0,0,0.8) !important;
}

/* "Evren" Kısmı (Daha İnce ve Renkli) */
.logo-suffix {
    font-weight: 300 !important;   /* Light (İnce) */
    color: var(--neon3) !important; /* Mavi (veya istersen sarı yap) */
    margin-left: 0 !important;     /* Boşluk yok, yapışık */
}

/* Mobilde biraz küçültelim */
@media (max-width: 768px) {
    .site-logo-text {
        font-size: 1.3rem !important;
    }
}
/* ============================================================ */
/* === LOGO FİNAL: KUTUSUZ, SADECE RESİM VE YAZI === */
/* ============================================================ */

.logo-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important; /* Resim ile yazı arası boşluk */
    text-decoration: none !important;
    margin-right: auto !important;
}

/* 1. SENİN LOGO RESMİN */
.site-logo-img {
    height: 55px !important; /* Logonun boyutu (İstersen 50-60 arası yap) */
    width: 55px !important;
    
    object-fit: cover !important;
    border-radius: 50% !important; /* Tam yuvarlak olsun */
    
    /* Kutu yok, sadece resmin kendisi */
    background: transparent !important;
    border: none !important;
    
    /* Hafif bir gölge verelim ki karanlıkta kaybolmasın */
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
    transition: transform 0.3s ease !important;
}

/* 2. YANINDAKİ YAZI */
.brand-text {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    text-transform: capitalize !important; /* Baş harfler büyük */
}

/* Hover Efekti */
.logo-link:hover .site-logo-img {
    transform: scale(1.1) rotate(-5deg) !important; /* Üstüne gelince hafif oynasın */
}

/* MOBİL AYARI */
@media (max-width: 768px) {
    .site-logo-img {
        height: 40px !important;
        width: 40px !important;
    }
    .brand-text {
        font-size: 1.2rem !important;
    }
}
/* ============================================================ */
/* === LOGO YAZISI DÜZELTME (KONTRASTLI GÖRÜNÜM) === */
/* ============================================================ */

/* 1. "SİNEMATİK" KISMI (KALIN BEYAZ) */
.brand-text {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 900 !important; /* Extra Bold (Çok Kalın) */
    color: #ffffff !important;
    text-transform: uppercase !important; /* Hepsi Büyük Harf */
    letter-spacing: -0.5px !important; /* Harfleri hafif yaklaştır */
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

/* 2. "EVREN" KISMI (İNCE MAVİ) */
.brand-suffix {
    font-weight: 300 !important; /* Light (İnce) */
    color: #3b82f6 !important;   /* Mavi Neon Rengi */
    /* color: #fff700 !important; /* Eğer SARI istersen bunu aç, üsttekini sil */
    margin-left: 4px !important; /* İki kelime arasına hafif boşluk */
}

/* Mobil Ayarı */
@media (max-width: 768px) {
    .brand-text {
        font-size: 1.2rem !important;
    }
}
/* ============================================================ */
/* === LOGO YAZISI FİNAL: TABAN HİZALAMA (BASELINE) === */
/* ============================================================ */

/* 1. ANA YAZI (SİNEMATİK) */
.brand-text {
    /* Flexbox ile yan yana diziyoruz */
    display: flex !important; 
    
    /* İŞTE SİHİR BURADA: CENTER DEĞİL BASELINE YAPIYORUZ */
    align-items: baseline !important; /* Harflerin alt çizgisini eşitle */
    
    font-family: 'League Spartan', sans-serif !important;
    font-size: 1.6rem !important;
    font-weight: 900 !important; /* Kalın */
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: -0.5px !important;
    line-height: 1 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

/* 2. EK YAZI (EVREN) */
.brand-suffix {
    font-weight: 300 !important;   /* İnce */
    color: var(--neon3) !important; /* Mavi */
    margin-left: 3px !important;   /* Çok hafif aralık */
    
    /* İnce yazı bazen kısa görünür, onu optik olarak eşitlemek için: */
    font-size: 1.6rem !important; /* Ana yazıyla aynı boy */
    
    /* Eğer hala küçük duruyorsa burayı 1.7rem yapabilirsin */
}

/* Mobil Ayarı */
@media (max-width: 768px) {
    .brand-text {
        font-size: 1.3rem !important;
    }
    .brand-suffix {
        font-size: 1.3rem !important;
    }
}
/*OSWALD FONTU*/
nav a {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 500 !important; /* Orta kalınlık */
    font-size: 1.1rem !important; /* Biraz büyük olsun, dar olduğu için sığar */
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #e0e0e0 !important;
}
/*MONTSERRAT FONTU*/
nav a {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important; /* Tok durur */
    font-size: 0.9rem !important; /* Kibar boyut */
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #e0e0e0 !important;
}
/* ============================================================ */
/* === HABER DETAY SAYFASI (haber-detay.html) === */
/* ============================================================ */

.haber-detay-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 40px;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 20px;
    box-shadow: 0 0 40px rgba(0,0,0,0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Başlık */
.haber-detay-container h1 {
    font-size: 2.8rem;
    color: var(--yellow-neon1);
    text-shadow: 0 0 15px var(--yellow-neon2);
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
    border-bottom: 2px solid var(--neon3);
    padding-bottom: 20px;
    line-height: 1.2;
}

/* Yazar ve Tarih */
.haber-detay-meta {
    font-size: 1rem;
    color: #aaa;
    margin-bottom: 30px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.haber-detay-meta strong {
    color: #fff;
    font-weight: 600;
}

/* Haber Resmi */
.haber-detay-image-wrapper {
    width: 100%;
    max-height: 500px; /* Çok uzun olmasın */
    overflow: hidden;
    border-radius: 15px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    background-color: #111;
    display: flex;
    justify-content: center;
    align-items: center;
}

.haber-detay-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi kutuya tam sığdır */
    display: block;
}

/* Haber Metni */
.haber-detay-full-story {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #ddd;
    text-align: justify; /* İki yana yasla, kitap gibi olsun */
    white-space: pre-line; /* Satır boşluklarını koru */
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .haber-detay-container {
        margin: 20px 10px;
        padding: 20px;
    }
    .haber-detay-container h1 {
        font-size: 1.8rem;
    }
    .haber-detay-meta {
        flex-direction: column;
        gap: 5px;
    }
    .haber-detay-image-wrapper {
        max-height: 250px;
    }
}
/* ============================================================ */
/* === MOBİL İÇİN FİNAL DÜZELTME (LİSTE VE KARTLAR) === */
/* ============================================================ */

@media (max-width: 768px) {

    /* --- 1. POPÜLER LİSTE / RATING LİSTESİ DÜZELTMESİ --- */
    
    /* Listeyi tutan ana kapsayıcıyı dikey yap */
    .popular-list, 
    #site-rating-content, 
    #populer-filmler-content {
        flex-direction: column !important; /* Yan yana değil, alt alta */
        gap: 10px !important;
    }

    /* Listenin içindeki kolonları tam genişlik yap */
    .popular-list > div {
        width: 100% !important;
        min-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Liste elemanının kendisi */
    .popular-item {
        width: 100% !important; /* Kartı ekrana yay */
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* --- 2. FİLM KARTI ÜZERİNDEKİ PUAN KUTUSU (RESİM 2 DÜZELTMESİ) --- */
    
    /* Puan kutusunu biraz küçült ve hizala */
    .rating-slider-box {
        height: 28px !important; /* Yüksekliği kıstık */
        width: 60px !important;  /* Genişliği kıstık */
        top: 8px !important;
        left: 8px !important;
        padding: 0 !important;
    }

    /* İçindeki Yıldız ve Yazı */
    .single-star-icon {
        font-size: 0.9rem !important; /* Yıldızı küçült */
        margin-right: 4px !important;
    }
    .rating-avg-text {
        font-size: 0.8rem !important; /* Puan yazısını küçült */
    }

    /* Hover olunca açılan genişlik (Mobilde parmakla basınca) */
    .rating-slider-box:hover,
    .rating-slider-box:active {
        width: 140px !important; /* Çok genişlemesin, ekrandan taşar */
    }

    /* Oylama yıldızlarının boyutu */
    .film-star {
        font-size: 1.2rem !important; 
    }

    /* --- 3. KALP BUTONU (FAVORİ) DÜZELTMESİ --- */
    .fav-btn-round {
        width: 28px !important;
        height: 28px !important;
        top: 8px !important;
        right: 8px !important;
    }
    
    .film-heart {
        font-size: 16px !important;
    }
}
/* ============================================================ */
/* === MOBİL HEADER FİNAL: LOGO SOLDA, İKONLAR SAĞDA === */
/* ============================================================ */

@media (max-width: 900px) {
    
    /* 1. HEADER KAPSAYICISI (SARMALAYICI) */
    header {
        display: flex !important;
        flex-wrap: wrap !important; /* Sığmayan aşağı insin (Arama çubuğu için) */
        align-items: center !important;
        justify-content: space-between !important; /* Logo Sol, İkonlar Sağ */
        padding: 15px 15px !important;
        height: auto !important;
        gap: 10px !important;
    }

    /* 2. LOGO (SOL ÜST) */
    .logo-link {
        order: 1 !important;
        flex-grow: 0 !important; /* Genişlemesin */
        margin-right: auto !important; /* Sağı itebildiği kadar itsin */
    }
    
    .site-logo-img {
        height: 40px !important; /* Mobilde logo boyutu */
        width: 40px !important;
    }
    
    .brand-text {
        font-size: 1.2rem !important;
        display: none !important; /* İstersen mobilde yazıyı gizle, sadece logo kalsın (yer açmak için) */
        /* Yazı kalsın istiyorsan 'display: flex' yap ve fontu küçült */
    }

    /* 3. SAĞ PANEL (ZAR, OYUN, HABER, PROFİL) */
    .user-action-panel {
        order: 2 !important; /* Logonun yanına (sağına) geç */
        flex-grow: 0 !important;
        width: auto !important; /* Sadece içeriği kadar yer kapla */
        margin: 0 !important;
        padding: 0 !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important; /* İkonlar arası boşluk (Sıkışık olmasın) */
        
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* İkonların Kendisi (Biraz küçültelim sığsınlar) */
    .user-action-panel .icon-link,
    .dice-wrapper,
    .profile-avatar-img {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }
    
    .dice-icon { font-size: 1.2rem !important; }

    /* Çizgileri Gizle */
    .panel-divider { display: none !important; }
    
    /* Oyun ve Haber Grubunu Dağıtma */
    .header-icon-links {
        display: flex !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    /* 4. ARAMA ÇUBUĞU (BİR ALT SATIRA İNSİN) */
    .header-arama-container {
        order: 3 !important; /* En sona (alta) geç */
        width: 100% !important; /* Tüm satırı kapla */
        margin-top: 5px !important;
        position: static !important;
        transform: none !important;
    }
    
    /* 5. NAVİGASYON (EN ALTTA) */
    nav {
        margin-top: 0 !important;
    }
}
/* ============================================================ */
/* === MOBİL HEADER FİNAL DÜZELTME (KESİN ÇÖZÜM) === */
/* ============================================================ */

@media (max-width: 900px) {
    
    /* 1. HEADER KAPSAYICISI (2 KATLI YAPI) */
    header {
        display: flex !important;
        flex-wrap: wrap !important; /* Sığmayan aşağı insin */
        align-items: center !important;
        justify-content: space-between !important; /* Sol ve Sağ köşe */
        padding: 15px 15px !important;
        height: auto !important;
        gap: 10px !important;
    }

    /* 2. SOL ÜST: LOGO */
    .logo-link {
        order: 1 !important;
        flex-grow: 0 !important;
        margin-right: auto !important; /* Sağa it */
        width: auto !important;
    }
    .site-logo-img {
        height: 40px !important; /* İdeal mobil boyutu */
        width: auto !important;
    }
    /* Yazıyı mobilde gizle, sadece logo kalsın (yer açmak için) */
    .brand-text { display: none !important; }

    /* 3. SAĞ ÜST: İKON PANELİ (Zar, Oyun, Haber, Profil) */
    .user-action-panel {
        order: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important; /* Sağa yasla */
        gap: 10px !important;
        
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        
        /* Masaüstündeki cam kutu efektini mobilde kaldırıyoruz ki sıkışmasın */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Panel içindeki ayırıcı çizgileri gizle */
    .panel-divider { display: none !important; }

    /* Oyun ve Haber Grubunu Düzenle */
    .header-icon-links {
        display: flex !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    /* İkonların Boyutunu Mobilde Eşitle */
    .user-action-panel .icon-link,
    .dice-wrapper,
    .profile-avatar-img {
        width: 36px !important;  /* Hepsi eşit ve parmakla basılacak boyutta */
        height: 36px !important;
        padding: 0 !important;
        border: 1px solid rgba(255,255,255,0.2) !important; /* Belirgin olsun */
        background: #000 !important;
        border-radius: 50% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .dice-icon { font-size: 1.2rem !important; }

    /* 4. ALT KAT: ARAMA ÇUBUĞU */
    .header-arama-container {
        order: 3 !important; /* En alta geç */
        width: 100% !important; /* Tüm satırı kapla */
        margin-top: 5px !important;
        
        /* Pozisyonu sıfırla (Çakışmayı önleyen kilit nokta) */
        position: static !important; 
        transform: none !important;
        left: auto !important;
        top: auto !important;
    }
    
    .header-arama-form {
        width: 100% !important;
    }
}
/* ============================================================ */
/* === MOBİL HEADER FİNAL (GRID SİSTEMİ - BETON GİBİ) === */
/* ============================================================ */

@media (max-width: 900px) {
    
    /* 1. HEADER'I IZGARA (GRID) YAP */
    header {
        display: grid !important;
        /* İki sütunlu yapı: Sol (Logo) - Sağ (İkonlar) */
        grid-template-columns: 1fr auto !important; 
        /* İki satırlı yapı: Üst (Logo/İkon) - Alt (Arama) */
        grid-template-rows: auto auto !important; 
        
        gap: 15px !important; /* Satır ve sütun arası boşluk */
        padding: 15px !important;
        height: auto !important;
        align-items: center !important;
    }

    /* 2. LOGO (SOL ÜST - 1. Sütun) */
    .logo-link {
        grid-column: 1 / 2 !important; /* 1. Sütuna yerleş */
        grid-row: 1 / 2 !important;    /* 1. Satıra yerleş */
        justify-self: start !important; /* Sola yasla */
        margin: 0 !important;
        width: auto !important;
    }

    /* Logo Boyutu */
    .site-logo-img {
        height: 40px !important;
        width: auto !important;
    }
    /* Yazıyı Gizle (Yer açmak için) */
    .brand-text { display: none !important; }

    /* 3. İKON PANELİ (SAĞ ÜST - 2. Sütun) */
    .user-action-panel {
        grid-column: 2 / 3 !important; /* 2. Sütuna yerleş */
        grid-row: 1 / 2 !important;    /* 1. Satıra yerleş */
        justify-self: end !important;  /* Sağa yasla */
        
        display: flex !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: auto !important;
    }

    /* Panelin içindekiler */
    .panel-divider { display: none !important; }
    .header-icon-links { display: flex !important; gap: 10px !important; margin: 0 !important; }

    /* İkon Boyutları */
    .user-action-panel .icon-link,
    .dice-wrapper,
    .profile-avatar-img {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: #111 !important;
        border: 1px solid rgba(255,255,255,0.2) !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
    }
    .dice-icon { font-size: 1.2rem !important; }

    /* 4. ARAMA ÇUBUĞU (ALT SATIR - TAM GENİŞLİK) */
    .header-arama-container {
        grid-column: 1 / 3 !important; /* İki sütunu da kapla (Boydan boya) */
        grid-row: 2 / 3 !important;    /* 2. Satıra geç */
        
        width: 100% !important;
        margin: 0 !important;
        position: static !important; /* Mutlak konumu iptal et */
        transform: none !important;
    }
    
    .header-arama-form {
        width: 100% !important;
    }
    
    /* 5. MENÜ (EN ALTTA KALMAYA DEVAM ETSİN) */
    nav {
        margin-top: 0 !important;
    }
    body { padding-top: 0 !important; }
}
/* ============================================================ */
/* === FİNAL FIX: HEADER TAŞMA & PUAN KUTUSU DÜZELTMESİ === */
/* ============================================================ */

/* --- 1. MOBİL HEADER DÜZENİ (TAŞMAYI ÖNLEYEN BLOK SİSTEMİ) --- */
@media (max-width: 900px) {
    
    header {
        /* Flex yerine Grid kullanıyoruz ki yerleri garanti olsun */
        display: grid !important;
        grid-template-columns: auto 1fr !important; /* Sol: Logo, Sağ: İkonlar */
        grid-template-rows: auto auto !important;   /* Üst: Logo/İkon, Alt: Arama */
        gap: 15px !important;
        padding: 15px !important;
        height: auto !important;
        align-items: center !important;
    }

    /* A. Sol Üst: Logo */
    .logo-link {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        justify-self: start !important;
        margin: 0 !important;
    }

    /* B. Sağ Üst: Tüm İkonlar (Panel) */
    .user-action-panel {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        justify-self: end !important; /* Sağa yasla */
        
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important; /* İkonlar arası boşluk */
        
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        
        /* TAŞMAYI ÖNLEYEN KİLİT KOD */
        flex-wrap: nowrap !important; 
    }

    /* Panel içindeki W ve Haber ikonları grubu */
    .header-icon-links {
        display: flex !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    /* Gereksiz çizgileri gizle */
    .panel-divider { display: none !important; }

    /* C. Alt Satır: Arama Çubuğu (Boydan Boya) */
    .header-arama-container {
        grid-column: 1 / 3 !important; /* İki sütunu da kapla */
        grid-row: 2 / 3 !important;    /* Alt satıra geç */
        
        width: 100% !important;
        margin: 0 !important;
        position: static !important; /* Havada durmasın, yere bassın */
        transform: none !important;
    }
    
    .header-arama-form { width: 100% !important; }

    /* Menüyü de aşağı it */
    nav { margin-top: 0 !important; }
}

/* --- 2. PUAN KUTUSU DÜZELTMESİ (RESİM 1'DEKİ SORUN) --- */

/* Kutunun kendisi */
.rating-slider-box {
    /* Yazının sığması için genişliği içeriğe göre yapalım */
    width: auto !important; 
    min-width: 60px !important; /* Çok küçülmesin */
    max-width: 100% !important;
    height: 32px !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    padding: 0 10px !important;
    white-space: nowrap !important; /* Yazı alt satıra kaymasın */
}

/* İçindeki Yazı ve Yıldız */
.rating-static-view {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
}

/* Yazıyı ortala ve hizala */
.rating-avg-text {
    font-size: 0.9rem !important;
    line-height: 1 !important;
    margin-top: 2px !important; /* Optik hizalama */
}