/* Top 10 sıra numaraları için yazı tipi (kendi sunucumuzdan) */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/anton-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
/* --- TEMEL AYARLAR --- */
:root {
    --primary: #e50914; 
    --bg: #141414;
    --card-bg: #1f1f1f;
    --text: #ffffff;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    max-width: 100vw;
    overflow-x: hidden;
}

#app-container, .content-wrapper {
    overflow-x: hidden;
    max-width: 100vw;
}
/* overflow-x:hidden, overflow-y'yi de kırpar (en alttaki sıranın büyüyen kartı kesiliyordu); clip yalnızca yatayı keser */
@supports (overflow: clip) {
    #app-container, .content-wrapper { overflow-x: clip; overflow-y: visible; }
}

/* --- ADAPTİF ATMOSFER IŞIĞI (AMBIENT GLOW) --- */
#ambient-glow {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    background-size: cover;
    background-position: center;
    opacity: 0.25; 
    z-index: 0;
    pointer-events: none;
    transition: background-image 1.5s ease-in-out;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
}

/* --- HEADER & NAVBAR --- */
header {
    display: flex;
    align-items: center;
    padding: 15px 4%;
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
    background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, transparent 100%);
    transition: background-color 0.5s ease;
    gap: 40px; 
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px black;
    cursor: pointer;
    flex-shrink: 0;
}

.main-nav {
    display: flex;
    gap: 20px;
    flex: 1; 
}

.nav-link {
    color: #e5e5e5;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s;
    cursor: pointer;
}

.nav-link:hover, .nav-link.active {
    color: white;
    font-weight: bold;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.avatar {
    width: 35px;
    height: 35px;
    border-radius: 4px;
    background-color: #333;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

/* --- ARAMA KUTUSU --- */
.search-box {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #444;
    padding: 5px 10px;
    border-radius: 4px;
    transition: 0.3s;
}

.search-box:focus-within {
    border-color: white;
    background: black;
}

.search-box input {
    background: transparent;
    border: none;
    color: white;
    outline: none;
    margin-left: 10px;
    width: 200px;
    font-size: 14px;
}

.search-box input::placeholder {
    color: #ccc;
}

/* --- HERO BANNER --- */
.hero-banner {
    height: 85vh;
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 4%;
    box-sizing: border-box;
    z-index: 10; 
    overflow: hidden;
    background: #141414;
}
/* İki katmanlı çapraz geçiş + hafif yakınlaşma (Ken Burns) */
.hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center top;
    opacity: 0; transform: scale(1);
    transition: opacity 1.4s ease-in-out;
    will-change: opacity, transform;
}
.hero-bg.on { opacity: 1; animation: heroZoom 16s ease-out forwards; }
.hero-bg.out { transform: scale(1.07); } /* çıkan katman son yakınlığında kalıp solar, geri sıçramaz */
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .hero-bg.on { animation: none; } }

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, #141414 4%, rgba(20,20,20,0) 45%), linear-gradient(to right, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 55%);
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 500px;
    transition: opacity .45s ease, transform .45s ease;
}
.hero-content.swap { opacity: 0; transform: translateY(10px); }

.hero-title {
    font-size: 3.5rem;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px black;
}

.hero-desc {
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px black;
}

/* --- BUTONLAR --- */
.btn {
    padding: 10px 25px;
    border-radius: 4px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: 0.2s;
}

.btn:hover {
    opacity: 0.8;
}

.btn-play {
    background: white;
    color: black;
}

.btn-info {
    background: rgba(109, 109, 110, 0.7);
    color: white;
    margin-left: 10px;
}

/* --- İÇERİK ALANLARI --- */
.content-wrapper {
    position: relative;
    z-index: 20;
    margin-top: -100px;
    padding-bottom: 130px; /* en alttaki sıranın büyüyen kartına yer */
}

/* --- TÜR BAZLI HIZLI FİLTRELEME (CHIPS) --- */
.genre-chips-wrapper {
    padding: 0 4%;
    margin-bottom: 30px;
    position: relative;
    z-index: 30;
}

.genre-chips-container {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.genre-chips-container::-webkit-scrollbar {
    display: none;
}

.genre-chip {
    background: rgba(40, 40, 40, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.genre-chip:hover {
    background: rgba(255, 255, 255, 0.2);
}

.genre-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(229, 9, 20, 0.6);
    font-weight: bold;
}

/* ========================================================================= */
/* --- YENİ NESİL JS SLIDER (CAROUSEL) SİSTEMİ - NETFLIX BİREBİR --- */
/* ========================================================================= */
.row-container {
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.row-container:hover {
    z-index: 50; 
}

.row-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
    padding: 0 4%;
}

.row-header-left {
    display: flex;
    align-items: center;
}

.row-header-title {
    display: inline-flex;
    align-items: baseline;
    cursor: pointer;
    position: relative;
}

.row-title-text {
    font-size: 1.4rem;
    color: #e5e5e5;
    font-weight: bold;
    margin: 0;
    transition: color 0.3s;
}

.explore-all-text {
    font-size: 0.85rem;
    color: #54b9c5; 
    font-weight: bold;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
    transform: translateX(-15px);
    margin-left: 8px;
}

.explore-icon {
    font-size: 0.85rem;
    color: #54b9c5;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.4s ease;
    margin-left: 5px;
}

.row-container:hover .explore-icon {
    opacity: 1;
}

.row-header-title:hover .explore-all-text {
    max-width: 200px;
    opacity: 1;
    transform: translateX(0);
}

.row-header-title:hover .explore-icon {
    transform: translateX(3px);
}

/* SAYFALAMA ÇUBUKLARI (PAGINATION) */
.slider-pagination {
    display: flex;
    gap: 3px;
    opacity: 0; 
    transition: opacity 0.3s ease;
    margin-bottom: 5px;
}

.row-container:hover .slider-pagination {
    opacity: 1; 
}

.pagination-dot {
    width: 14px;
    height: 2px;
    background-color: #4d4d4d;
    transition: background-color 0.3s;
}

.pagination-dot.active {
    background-color: #e5e5e5; 
}

/* --- SLIDER VİTRİNİ --- */
.slider-viewport {
    position: relative;
    width: 100%;
}

.slider-track {
    display: flex;
    gap: 10px;
    padding: 0 4%; 
    transition: transform 0.6s cubic-bezier(0.5, 0, 0.1, 1); 
    width: max-content;
}

.slider-track .card,
.slider-track .history-card,
.slider-track .top10-card {
    width: calc((100vw - 8vw - 50px) / 6);
    flex-shrink: 0;
    height: 140px; 
}

.slider-track .top10-card {
    height: 160px; 
}

/* --- ŞEFFAF PREMIUM OK BUTONLARI --- */
.scroll-btn {
    position: absolute;
    top: 0;
    height: 100%; 
    width: 4%; 
    min-width: 40px;
    background: transparent; 
    color: white;
    border: none;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: auto;
}

/* Büyüyen kart ok butonlarının üstünde kalsın (track transform ile ayrı yığın oluşturduğu için butonu geri çek) */
.slider-viewport:has(.card:hover) .scroll-btn { z-index: 1; }
.left-btn { left: 0; }
.right-btn { right: 0; }

.scroll-btn i {
    transition: transform 0.2s ease;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
}

.scroll-btn:hover i {
    transform: scale(1.3); 
}

.row-container:hover .scroll-btn {
    opacity: 1; 
}

.left-btn:hover { background: linear-gradient(to right, rgba(20,20,20, 0.9) 0%, rgba(20,20,20, 0) 100%); }
.right-btn:hover { background: linear-gradient(to left, rgba(20,20,20, 0.9) 0%, rgba(20,20,20, 0) 100%); }

@media (max-width: 768px) {
    .scroll-btn { display: none; }
    .slider-viewport { overflow-x: auto; }
    .slider-track .card { width: 150px; }
    .explore-all-text { display: none; }
}


/* ========================================= */
/* --- NETFLIX PREMIUM KART SİSTEMİ --- */
/* ========================================= */
.card {
    position: relative;
    cursor: default; 
    z-index: 1; 
    border-radius: 6px;
}

/* PASİF KARTLAR (Karanlık, Tıklanamaz) */
.inactive-card {
    filter: brightness(0.35); 
    pointer-events: none; 
}

/* Büyüyecek Kutu */
.card-scaler {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    background-color: #141414;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, border-radius 0.4s ease;
    transition-delay: 0s; 
    z-index: 2;
    display: flex;
    flex-direction: column;
    transform-origin: center center;
}

.card:hover { z-index: 100; }

.card:hover .card-scaler {
    transform: scale(1.3) translateY(-35px); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.9);
    border-radius: 8px;
    z-index: 100;
    transition-delay: 0.4s; 
}

.card-img-wrapper {
    position: relative;
    width: 100%;
    height: 140px; 
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    transition: border-radius 0.4s;
    transition-delay: 0s;
}

.card:hover .card-img-wrapper {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transition-delay: 0.4s;
}

.card-img {
    width: 100%; 
    height: 100%;
    object-fit: cover;
    transition: filter 0.4s ease;
}

.card:hover .card-img { filter: brightness(0.5); }

/* Sol Alt İsim Kaplaması */
.card-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, transparent 60%);
    opacity: 0; 
    transition: opacity 0.4s ease;
    transition-delay: 0s;
    display: flex;
    align-items: flex-end; 
    padding: 12px;
    z-index: 5;
}

.card:hover .card-img-overlay { opacity: 1; transition-delay: 0.4s; }

.preview-title-thumb {
    font-size: 1.1rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    margin: 0;
}

/* Metin logosu (TextLogo): dolu olan içeriklerde kapağın sol altında hep görünür, üzerine gelince isim yazısı yerine kalır */
.card-img-wrapper.has-logo::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 55%);
}
.card-textlogo {
    position: absolute; left: 10px; bottom: 10px; z-index: 6;
    max-width: 68%; max-height: 38%; width: auto; height: auto; object-fit: contain; object-position: left bottom;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.85)); pointer-events: none;
}

/* Alt Bilgi Paneli */
.card-preview-info {
    height: 0; 
    opacity: 0;
    overflow: hidden;
    padding: 0 15px;
    background-color: #141414;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, padding 0.4s ease;
    transition-delay: 0s; 
    border: 1px solid #333;
    border-top: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
}

.card:hover .card-preview-info {
    height: 100px; 
    opacity: 1;
    padding: 12px 15px;
    transition-delay: 0.4s;
}

.preview-info-actions { display: flex; gap: 8px; }

.preview-btn {
    width: 32px; 
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4);
    background: rgba(30,30,30,0.8);
    color: white;
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer; 
    transition: all 0.2s ease; 
    font-size: 0.8rem;
    pointer-events: auto; 
}

.preview-btn:hover { border-color: white; transform: scale(1.1); background: rgba(255,255,255,0.2); }
.preview-btn.play-btn { background: white; color: black; border-color: white; }
.preview-btn.play-btn:hover { background: #e50914; color: white; border-color: #e50914; }
.preview-btn.info-btn { margin-left: auto; }

/* Meta & Etiketler */
.preview-info-meta { font-size: 0.75rem; color: #bcbcbc; display: flex; align-items: center; gap: 8px; font-weight: bold; }
.imdb-puan { color: #46d369; } 
.dot { font-size: 0.5rem; color: #666; }
.preview-info-tags { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.preview-tag { font-size: 0.7rem; color: #fff; display: flex; align-items: center; }
.preview-tag:not(:last-child)::after { content: "•"; margin-left: 6px; color: #666; }

.card-body { display: none !important; }


/* ========================================================================= */
/* --- KATEGORİ DETAY MODALI (POP-UP EKRAN) --- */
/* ========================================================================= */
.category-modal {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #141414;
    z-index: 9999;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    padding-bottom: 50px;
    animation: fadeInModal 0.4s ease;
}

@keyframes fadeInModal {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 4% 30px 4%;
    position: relative;
}

.modal-title { 
    font-size: 2.5rem; 
    font-weight: bold; 
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.modal-close { 
    position: absolute; 
    right: 4%; 
    top: 30px; 
    background: transparent; 
    border: none; 
    color: #ccc; 
    font-size: 2.5rem; 
    cursor: pointer; 
    transition: color 0.3s, transform 0.3s;
}

.modal-close:hover {
    color: white;
    transform: scale(1.1);
}

#modal-rows-container .row-container {
    margin-bottom: 50px;
}


/* --- İZLEME GEÇMİŞİ KARTI (History) --- */
.history-card { cursor: pointer !important; pointer-events: auto !important; }
.history-card .card-img-wrapper { border-radius: 6px !important; }
.history-card .card-img { opacity: 0.7; transition: 0.3s; }
.history-card:hover .card-img { opacity: 1; filter: brightness(1) !important; transform: none !important;}
.history-progress-bg { position: absolute; bottom: 0; left: 0; height: 4px; background: rgba(255, 255, 255, 0.2); width: 100%; z-index: 5; }
.history-progress-bar { position: absolute; bottom: 0; left: 0; height: 4px; background: #e50914; width: 0%; z-index: 6; box-shadow: 0 0 8px rgba(229, 9, 20, 0.8); border-top-right-radius: 2px; border-bottom-right-radius: 2px; }
.play-icon-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; color: white; opacity: 0.9; z-index: 5; text-shadow: 0 0 15px rgba(0,0,0,0.8); transition: 0.2s; }
.history-card:hover .play-icon-overlay { color: #e50914; transform: translate(-50%, -50%) scale(1.1); }
.history-card .card-body { position: absolute; bottom: 0; width: 100%; padding: 5px; background: rgba(0, 0, 0, 0.7); opacity: 0; transition: 0.3s; z-index: 4; display: block !important; }
.history-card:hover .card-body { opacity: 1; }
.card-title { font-size: 0.8rem; text-align: left; }

/* İZLEME LİSTESİ DÜZENLEME */
.row-header-left { gap: 14px; flex-wrap: nowrap; min-width: 0; }
.row-header-left .row-title-text { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
.edit-history-btn { position: static; flex: none; margin: 2px 0 0 0; line-height: 1.2; white-space: nowrap; background: transparent; border: 1px solid #555; color: #aaa; padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 0.8rem; font-weight: bold; transition: 0.3s; }
.edit-history-btn:hover, .edit-history-btn.active { border-color: #E50914; color: white; background: rgba(229, 9, 20, 0.2); }
.delete-badge { position: absolute; top: 5px; right: 5px; background: rgba(229, 9, 20, 0.9); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; z-index: 20; transform: scale(0.5); transition: 0.3s; border: 2px solid white; box-shadow: 0 0 10px black; }
.delete-badge:hover { background: #ff1e27; transform: scale(1.1) !important; }
.is-editing .delete-badge { opacity: 1; pointer-events: auto; transform: scale(1); }
.is-editing .history-card { border: 1px solid rgba(229, 9, 20, 0.5); }
.is-editing .history-card:hover { transform: none; box-shadow: none; }
.is-editing .play-icon-overlay { display: none !important; }
.history-card.removing { transform: scale(0) !important; opacity: 0; }

/* --- TOP 10 TASARIMI --- */
.top10-container {
    display: flex;
    padding: 10px 4% 20px 4%;
    overflow-x: auto;
    gap: 10px;
    pointer-events: auto;
    width: max-content; 
}
.top10-container::-webkit-scrollbar { display: none; }
/* Top 10 kartı: büyük çizgili sıra numarası solda, dikey afiş numaranın üzerine biner */
.top10-viewport { overflow-y: hidden !important; overscroll-behavior-x: contain; scrollbar-width: none; }
.top10-viewport::-webkit-scrollbar { display: none; }
.top10-container { overflow: visible !important; padding: 0 0 10px !important; }
.top10-card { position: relative; cursor: pointer; pointer-events: auto; display: flex; align-items: flex-end; height: 236px; width: auto; min-width: 0; margin-right: 26px; flex-shrink: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.top10-card:hover { transform: translateY(-6px); z-index: 10; }
.rank-number { position: relative; z-index: 1; flex: none; align-self: flex-end; font: 400 12rem/.8 Anton, Impact, 'Arial Narrow Bold', sans-serif; letter-spacing: -.02em; color: transparent;
  -webkit-text-stroke: 3px rgba(255,255,255,.42); paint-order: stroke fill; padding: 0 .04em; margin-bottom: 2px; transition: -webkit-text-stroke-color .3s, color .3s, text-shadow .3s; user-select: none; }
.top10-card:nth-child(-n+3) .rank-number { -webkit-text-stroke-color: rgba(229,9,20,.85); }
.top10-card:hover .rank-number { color: rgba(229,9,20,.22); -webkit-text-stroke-color: #E50914; text-shadow: 0 0 40px rgba(229,9,20,.45); }
.top10-img { position: relative; z-index: 2; height: 100%; width: 158px; object-fit: cover; border-radius: 10px; margin-left: -12px; box-shadow: 0 14px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1); transition: box-shadow .3s; }
.top10-card:hover .top10-img { box-shadow: 0 18px 40px rgba(0,0,0,.7), 0 0 0 2px #E50914; }
.top10-card[data-rank="10"] .rank-number { letter-spacing: -.07em; }
@media (max-width: 700px) { .top10-card { height: 180px; margin-right: 18px; } .rank-number { font-size: 8.8rem; -webkit-text-stroke-width: 2px; } .top10-img { width: 120px; margin-left: -10px; } }


/* ========================================================================= */
/* --- TÜM İÇERİKLER GRİD VE SAYFALAMA SİSTEMİ (6 SÜTUN KUSURSUZ UYUM) --- */
/* ========================================================================= */
#search-results-container { padding: 100px 0 50px 0; min-height: 100vh; display: none; z-index: 50; position: relative; }

.search-grid, .grid { 
    display: grid; 
    grid-template-columns: repeat(6, 1fr); 
    gap: 40px 10px; 
    padding: 0 4%; 
    width: 100%; 
    box-sizing: border-box; 
}

.search-grid .card, .grid .card { 
    width: 100% !important; 
    height: 140px;
}

/* Arama sonuçları: "Serileri Keşfet" kartları gibi sabit boyutlu poster (2:3) kartlar (kapsayıcı: <div class="grid" id="search-grid">) */
#search-grid { grid-template-columns: repeat(auto-fill, 170px); gap: 24px 14px; justify-content: start; }
#search-grid .card.is-portrait { width: 170px !important; height: auto; aspect-ratio: 2 / 3; border-radius: 8px; }
#search-grid .card.is-portrait .card-scaler { height: auto; }
#search-grid .card.is-portrait .card-img-wrapper { height: auto; aspect-ratio: 2 / 3; } /* kart 2:3 kalır; üzerine gelince bilgi paneli aşağı uzar, kesilmez */
#search-grid .card.is-portrait .card-img { object-fit: cover; }
#search-grid .card.is-portrait:hover .card-preview-info { height: auto; min-height: 100px; padding: 10px 12px; }
#search-grid .card.is-portrait .preview-info-meta { font-size: 0.74rem; flex-wrap: wrap; gap: 2px 6px; }
#search-grid .card.is-portrait:not(.no-poster) .card-img-overlay, #search-grid .card.is-portrait:not(.no-poster) .card-textlogo { display: none !important; }
.no-result { color: #666; text-align: center; margin-top: 50px; font-size: 1.2rem; }

@media (max-width: 768px) { 
    .search-grid, .grid { 
        grid-template-columns: repeat(3, 1fr); 
    } 
}

.grid-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 50px;
    padding-bottom: 20px;
}

.grid-page-btn {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.grid-page-btn:disabled {
    background-color: #333;
    color: #777;
    cursor: not-allowed;
}

.grid-page-btn:not(:disabled):hover {
    background-color: #ff1e27;
    transform: scale(1.05);
}

.grid-page-info {
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
}


/* --- HEADER İÇİNDEKİ "TÜMÜNÜ GÖR" BUTONU --- */
.see-all-link { color: #3498db; text-decoration: none; font-size: 0.9rem; font-weight: bold; cursor: pointer; transition: 0.2s; pointer-events: auto; }
.see-all-link:hover { color: white; }

/* --- FOOTER --- */
footer { background-color: #141414; padding: 50px 10%; margin-top: 50px; color: grey; font-size: 0.85rem; position: relative; z-index: 10;}
.footer-cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-link { color: grey; text-decoration: none; }
.footer-link:hover { text-decoration: underline; }
.social-icons i { font-size: 1.5rem; margin-right: 20px; color: white; cursor: pointer; }

/* --- ŞIK GLOBAL SCROLLBAR --- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0f1115; }
::-webkit-scrollbar-thumb { background: rgba(229, 9, 20, 0.6); border-radius: 10px; border: 2px solid #0f1115; }
::-webkit-scrollbar-thumb:hover { background: #e50914; }

/* --- YUKARI ÇIK BUTONU --- */
#back-to-top {
    position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background-color: rgba(229, 9, 20, 0.8);
    color: white; border: 2px solid transparent; border-radius: 50%; font-size: 1.2rem; cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); z-index: 9999; display: flex; align-items: center; justify-content: center;
}
#back-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
#back-to-top:hover { background-color: white; color: var(--primary); border-color: var(--primary); transform: translateY(-5px); box-shadow: 0 8px 25px rgba(229, 9, 20, 0.8); }
/* Satır belirme animasyonu (js/scroll-fx.js) */
.row-container.sfx { opacity: 0; transform: translateY(46px); }
.row-container.sfx.sfx-in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2,.8,.2,1) var(--sfx-d, 0ms), transform .9s cubic-bezier(.2,.8,.2,1) var(--sfx-d, 0ms); }
@media (prefers-reduced-motion: reduce) { .row-container.sfx { opacity: 1; transform: none; } }

/* Top 10: fareyle sürükleme + oklar */
.top10-wrap { position: relative; }
.top10-viewport { cursor: grab; user-select: none; -webkit-user-select: none; }
.top10-viewport.dragging { cursor: grabbing; }
.top10-viewport.dragging .top10-card { pointer-events: none; }
.t10-btn { position: absolute; top: 50%; transform: translateY(-60%); z-index: 20; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(20,20,20,.85); color: #fff; cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .25s, background .2s, transform .2s; }
.t10-btn[hidden] { display: none; }
.t10-left { left: 1.2%; } .t10-right { right: 1.2%; }
.top10-wrap:hover .t10-btn { opacity: 1; }
.t10-btn:hover { background: #E50914; border-color: #E50914; transform: translateY(-60%) scale(1.08); }
@media (hover: none) { .t10-btn { display: none; } }

/* Hero ekran dışındayken Ken Burns animasyonu durur; ambient ışık ağır blur yerine küçük görselden gelir */
.sfx-hero-off .hero-bg.on { animation-play-state: paused; }

/* Arama filtreleri */
.search-count { font-size: .9rem; color: #888; font-weight: 400; }
.search-filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 4%; margin-bottom: 22px; }
.search-filters select, .sf-clear { background: #1f1f1f; color: #eee; border: 1px solid #333; border-radius: 8px; padding: 9px 12px; font-size: .9rem; cursor: pointer; }
.search-filters select:focus, .sf-clear:focus-visible { outline: 2px solid #E50914; }
.sf-clear:hover { background: #2c2c2c; }

/* HD / 4K etiketi: dikey posterin sağ üstü */
img.q-tag { position: absolute !important; top: 6px !important; right: 6px !important; left: auto !important; bottom: auto !important; width: 34px !important; height: auto !important; max-width: 34px !important; object-fit: contain !important; z-index: 6; pointer-events: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,.65)) !important; transform: none !important; }
img.q-tag.q-tag-big { top: 12px !important; right: 12px !important; width: 56px !important; max-width: 56px !important; }
.top10-card { position: relative; }
.poster-wrap { position: relative; flex-shrink: 0; align-self: flex-start; z-index: 20; }
.poster-wrap .main-poster { display: block; }