/* ============================================================================
   detail.css
   ----------------------------------------------------------------------------
   Tek bir işaretleme (detail.js -> renderDetailMarkup), iki farklı kabuk:
     - #detail-modal            → masaüstünde ortalanmış, backdrop'lu modal
     - #detail-page-root        → mobilde tam ekranı kaplayan sayfa (ve
                                   masaüstünde JS kapalıyken / direkt
                                   navigasyonda görülen fallback tam sayfa)
   Renk paleti mevcut style.css teması ile birebir uyumlu:
     arka plan: rgb(17,15,25), aksan: #46b5ff
   ============================================================================ */

/* -------------------- Ortak (içerik gövdesi) -------------------- */
.detail-topbar {
  display: none; /* varsayılan: masaüstünde gizli, mobilde media query açar */
}

.detail-close-btn {
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
}
.detail-close-btn:hover { background: rgba(0, 0, 0, 0.8); }

.detail-hero {
  position: relative;
  width: 100%;
  height: 40vw;
  min-height: 220px;
  max-height: 420px;
  background-size: cover;
  background-position: center top;
  background-color: #000;
}
.detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(17,15,25,0.2) 70%, rgb(17,15,25) 100%);
}
.detail-hero .detail-close-x {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}
.detail-content-body {
  position: relative;
  padding: 20px 24px 40px;
  color: #fff;
  background: rgb(17, 15, 25);
}

.detail-heading {
  font-size: 1.9rem;
  font-weight: 800;
  margin: 0 0 10px;
  font-family: "Archivo Black", sans-serif;
}

.detail-metaline {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #b3b3b3;
  font-size: 0.95rem;
  margin-bottom: 18px;
}
.detail-badge {
  border: 1px solid #6f6f6f;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.8rem;
}

.detail-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.detail-play-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 100px;
  padding: 12px 26px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  background: #fff;
  color: #171414;
}
.detail-play-btn:hover { background: rgb(178, 177, 177); }

.detail-synopsis {
  line-height: 1.55;
  color: #e6e6e6;
  margin: 0 0 14px;
}

.detail-genres-line {
  color: #b3b3b3;
  font-size: 0.9rem;
}

.detail-icon-row {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.detail-icon-btn {
  background: none;
  border: none;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0.9;
}
.detail-icon-btn i { font-size: 1.2rem; }
.detail-icon-btn:hover { opacity: 1; }
.detail-icon-btn i.bi-plus-circle-fill[style*="46b5ff"],
.detail-icon-btn i.active { color: #46b5ff; }

.detail-tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid #2e2c38;
  margin: 22px 0 14px;
}
.detail-tab {
  background: none;
  border: none;
  color: #8a8894;
  padding: 12px 2px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}
.detail-tab.active {
  color: #fff;
  border-bottom-color: #46b5ff;
}

.detail-season-select-row { margin-bottom: 12px; }
.detail-season-select {
  background: #232323;
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 0.9rem;
}

.detail-episode-row {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #24222d;
  cursor: pointer;
}
.detail-episode-thumb {
  position: relative;
  width: 140px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}
.detail-episode-thumb img { width: 100%; height: 78px; object-fit: cover; display: block; }
.detail-episode-title { font-weight: 700; font-size: 0.95rem; }
.detail-episode-duration { color: #9a97a3; font-size: 0.82rem; margin-top: 4px; }

.detail-similar-placeholder {
  color: #8a8894;
  padding: 20px 0;
}

.detail-loading,
.detail-error {
  color: #fff;
  padding: 60px 24px;
  text-align: center;
}

/* ============================================================================
   MASAÜSTÜ MODAL (#detail-modal) — index.html içine detail.js tarafından
   dinamik olarak eklenir.
   ============================================================================ */
#detail-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
}
#detail-modal.open { display: block; }

#detail-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

#detail-modal-panel {
  position: relative;
  width: min(820px, 92vw);
  max-height: calc(100vh - 64px);
  margin: 32px auto;
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  /* Firefox: ince ve temaya uygun scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.35) transparent;
}

/* Chrome/Edge/Safari: modal içindeki varsayılan kaba scrollbar yerine
   Netflix tarzı ince, koyu temalı bir scrollbar. Body zaten modal açıkken
   overflow:hidden olduğu için sayfanın kendi scrollbar'ı tamamen kaybolur,
   görünen tek scrollbar bu ince bar olur. */
#detail-modal-panel::-webkit-scrollbar {
  width: 8px;
}
#detail-modal-panel::-webkit-scrollbar-track {
  background: transparent;
}
#detail-modal-panel::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 100px;
}
#detail-modal-panel::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.45);
}

body.detail-modal-open {
  overflow: hidden;
}

/* Masaüstünde modal içinde .detail-topbar hiç gösterilmez, X yeterli */
@media (min-width: 768px) {
  .detail-topbar { display: none !important; }
}

/* ============================================================================
   MOBİL TAM SAYFA (#detail-page-root ve/veya küçük ekranda #detail-modal-panel)
   ============================================================================ */
@media (max-width: 767px) {
  .detail-topbar {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: rgb(17, 15, 25);
    position: relative;
    z-index: 3;
  }
  .detail-topbar .detail-close-btn {
    background: transparent;
    font-size: 20px;
  }

  .detail-hero .detail-close-x { display: none; }

  .detail-hero { height: 56vw; min-height: 200px; }

  .detail-content-body { padding: 16px 18px 90px; }

  .detail-heading { font-size: 1.5rem; }

  /* Oynat butonu tam genişlikte ve ortalanmış, altında Listem/Puan Ver/Paylaş
     tam genişlik boyunca eşit aralıklarla (ilk solda, orta ortada, son sağda) */
  .detail-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .detail-play-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 26px;
  }
  .detail-icon-row {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  #detail-modal-panel {
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
  }
  #detail-modal-backdrop { display: none; }
}

/* detail.html tam sayfa iken kök konteyner tüm ekranı kaplasın */
#detail-page-root {
  min-height: 100vh;
  background: rgb(17, 15, 25);
}