@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');

:root { 
    --bg-outside: #1A2634; 
    --bg-inside: #2E3A47;
    --accent: #20C9C3;
    --warning: #FF8C42;
    --text-main: #F5F5F5;
    --text-sub: #9AA3AB;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { background: var(--bg-outside); color: var(--text-main); font-family: 'Plus Jakarta Sans', sans-serif; margin: 0; padding: 0; }

.main-wrapper {
    max-width: 1200px; margin: 0 auto; padding: 20px 30px; min-height: 100vh;
    background: var(--bg-inside); display: flex; flex-direction: column;
}

header { padding: 20px 0; text-align: center; }
.logo { font-size: 32px; font-weight: 800; text-decoration: none; color: var(--text-main); }
.logo span { color: var(--warning); }

.nav-tools { margin-top: 15px; display: flex; flex-direction: column; align-items: center; gap: 15px; }
#searchInput { 
    width: 100%; max-width: 440px; background: var(--bg-outside); border: 1px solid var(--accent); 
    padding: 16px 25px; border-radius: 12px; color: var(--text-main); outline: none; text-align: center;
}

/* Nav Paneli - Türler Sağda */
.nav-panel {
    width: 100%; max-width: 750px; background: var(--bg-outside); border: 1px solid var(--accent); 
    border-radius: 12px; display: flex; justify-content: center; align-items: center; padding: 2px;
}

.nav-btn { flex: 1; background: transparent; color: var(--text-main); border: none; padding: 14px 5px; cursor: pointer; font-weight: 600; font-size: 13px; }
.nav-panel > .nav-btn:not(:last-child) { border-right: 1px solid var(--accent); }
.nav-panel > .dropdown { border-left: 1px solid var(--accent); }

.dropdown { position: relative; flex: 1; display: flex; justify-content: center; }
.dropdown-content { 
    display: none; position: absolute; background: var(--bg-outside); border: 2px solid var(--accent); 
    top: calc(100% + 12px); right: 0; border-radius: 12px; z-index: 9999; 
    width: 280px; padding: 10px; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.dropdown-content.show { display: grid; }
.dropdown-content a { color: var(--text-main); padding: 8px; text-decoration: none; font-size: 12px; text-align: center; background: var(--bg-inside); border-radius: 6px; }

/* --- SABİT BOYUTLU FİLM KARTLARI (300px Poster) --- */
.movie-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
    gap: 25px; 
    padding: 40px 0; 
}

.movie-card { 
    cursor: pointer; 
    transition: 0.3s; 
    position: relative; 
    width: 100%; 
    height: 355px; /* Kart toplam yüksekliği sabit */
    display: flex;
    flex-direction: column;
}
.movie-card:hover { transform: translateY(-8px); }

.poster-container { 
    position: relative; 
    width: 100%;
    height: 300px; /* Poster yüksekliği 300px'e uzatıldı */
    border-radius: 12px; 
    overflow: hidden; 
    border: 1px solid var(--accent); 
    flex-shrink: 0;
}
.poster-container img { width: 100%; height: 100%; object-fit: cover; }

.imdb-badge { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.8); color: var(--warning); padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; z-index: 2; }
.view-badge { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.8); color: #fff; padding: 4px 8px; border-radius: 6px; font-size: 10px; z-index: 2; }

.card-content {
    height: 55px; 
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-content h4 { 
    margin: 0; 
    padding: 5px;
    font-size: 14px; 
    text-align: center; 
    color: var(--text-main); 
    overflow: hidden; 
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Sayfalama */
.pagination-container { display: flex; justify-content: center; gap: 8px; padding: 40px 0; }
.page-btn { background: var(--bg-outside); border: 1px solid var(--accent); color: var(--text-main); padding: 10px 16px; border-radius: 8px; cursor: pointer; }
.page-btn.active { background: var(--warning); border-color: var(--warning); color: #000; }

/* Kare Geri Tuşu (Sadece Sembol) */
.back-nav { display: flex; padding: 20px 0; }
.square-back { 
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; 
    background: var(--bg-outside); border: 1px solid var(--accent); color: var(--accent); 
    border-radius: 8px; cursor: pointer; transition: 0.3s;
}
.square-back:hover { background: var(--accent); color: var(--bg-outside); }

/* Detay Sayfası Sabit Poster */
.player-wrapper { aspect-ratio: 16/9; background: #000; border-radius: 15px; overflow: hidden; border: 2px solid var(--accent); margin-bottom: 30px; }
.player-wrapper iframe { width: 100%; height: 100%; border: none; }

.info-flex { display: flex; gap: 30px; }
.poster-fix { 
    width: 220px; 
    height: 330px; 
    min-width: 220px; 
    border-radius: 10px; 
    overflow: hidden; 
    border: 1px solid var(--accent); 
    flex-shrink: 0;
}
.poster-fix img { width: 100%; height: 100%; object-fit: cover; }

.detail-texts h1 { margin: 0 0 10px 0; font-size: 32px; }
.meta { color: var(--warning); font-weight: 700; margin-bottom: 20px; }
.desc { color: var(--text-sub); font-size: 16px; line-height: 1.8; }

@media (max-width: 768px) {
    .movie-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .movie-card { height: 330px; } 
    .poster-container { height: 275px; }
    .info-flex { flex-direction: column; align-items: center; text-align: center; }
}