/* ============================================================
   StreamIT.az — Web CSS
   Font: Nunito (Azerbaijani full support)
   Theme: Dark cinema — Netflix red accent
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap');

   :root {
     --bg:        #0d0d0f;
     --bg2:       #111114;
     --surface:   #18181d;
     --surface2:  #1f1f26;
     --border:    rgba(255,255,255,.07);
     --border2:   rgba(255,255,255,.12);
   
     --accent:       #e50914;
     --accent-dim:   rgba(229,9,20,.15);
     --accent-hover: #f40612;
   
     --text:   #f0f0f5;
     --muted:  #7a7a8c;
     --muted2: #4a4a5a;
   
     --font: 'Nunito', sans-serif;
   
     --nav-h:     64px;
     --radius:    10px;
     --radius-lg: 16px;
     --ease:      .2s ease;
   
     --card-w: 160px;
     --card-h: 240px;
   }
   
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   html { scroll-behavior: smooth; }
   
   body {
     background: var(--bg);
     color: var(--text);
     font-family: var(--font);
     font-size: 15px;
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     overflow-x: hidden;
     min-height: 100dvh;
     display: flex;
     flex-direction: column;
   }
   
   a { color: inherit; text-decoration: none; }
   img { display: block; max-width: 100%; }
   button { cursor: pointer; font-family: var(--font); }
   
   ::-webkit-scrollbar { width: 6px; }
   ::-webkit-scrollbar-track { background: var(--bg); }
   ::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 3px; }
   
   /* ── NAV ── */
   .nav {
     position: fixed; top: 0; left: 0; right: 0;
     height: var(--nav-h);
     padding: 0 40px;
     display: flex; align-items: center; justify-content: space-between;
     background: linear-gradient(to bottom, rgba(13,13,15,.95) 0%, transparent 100%);
     z-index: 1000;
     transition: background var(--ease), height var(--ease), box-shadow var(--ease);
   }
   .nav.scrolled {
     background: rgba(13,13,15,.97);
     height: 56px;
     box-shadow: 0 1px 0 var(--border);
     backdrop-filter: blur(12px);
   }
   
   .logo { display: flex; align-items: center; }
   .logo img { height: 30px; width: auto; transition: height var(--ease); }
   .nav.scrolled .logo img { height: 24px; }
   .logo-text { font-weight: 800; font-size: 22px; letter-spacing: -.5px; }
   .logo-text em { color: var(--accent); font-style: normal; }

   /* ── NAV RIGHT ── */
   .nav-right {
     display: flex; align-items: center; gap: 10px;
   }

   .nav-tg {
     display: flex; align-items: center; gap: 6px;
     background: var(--surface);
     border: 1px solid var(--border2);
     border-radius: 8px;
     padding: 7px 14px;
     font-size: 13px; font-weight: 600;
     transition: border-color var(--ease), background var(--ease);
   }
   .nav-tg:hover { border-color: #29a8eb; background: rgba(41,168,235,.1); }
   .nav-tg svg { flex-shrink: 0; }

   /* ── LANG DROPDOWN ── */
   .lang-dropdown {
     position: relative;
   }
   .lang-trigger {
     display: flex; align-items: center; gap: 5px;
     background: var(--surface);
     border: 1px solid var(--border2);
     border-radius: 8px;
     padding: 7px 11px;
     font-size: 13px; font-weight: 700;
     color: var(--text);
     transition: border-color var(--ease), background var(--ease);
     white-space: nowrap;
   }
   .lang-trigger:hover,
   .lang-trigger.open {
     border-color: rgba(255,255,255,.25);
     background: var(--surface2);
   }
   .lang-arrow {
     transition: transform var(--ease);
   }
   .lang-trigger.open .lang-arrow {
     transform: rotate(180deg);
   }
   .lang-menu {
     display: none;
     position: absolute; top: calc(100% + 6px); right: 0;
     background: var(--surface2);
     border: 1px solid var(--border2);
     border-radius: 10px;
     overflow: hidden;
     min-width: 80px;
     box-shadow: 0 12px 40px rgba(0,0,0,.5);
     z-index: 999;
   }
   .lang-menu.open { display: block; }
   .lang-item {
     display: block;
     padding: 9px 16px;
     font-size: 13px; font-weight: 700;
     color: var(--muted);
     transition: background var(--ease), color var(--ease);
   }
   .lang-item:hover { background: var(--surface); color: var(--text); }
   .lang-item.active { color: var(--accent); }
   
   /* ── HERO ── */
   .hero {
     position: relative;
     min-height: 380px;
     padding: calc(var(--nav-h) + 64px) 20px 64px;
     display: flex; flex-direction: column;
     align-items: center; justify-content: center;
     text-align: center; overflow: hidden;
   }
   .hero-bg {
     position: absolute; inset: 0;
     background:
       linear-gradient(to bottom, rgba(13,13,15,.35) 0%, rgba(13,13,15,.72) 60%, var(--bg) 100%),
       url("https://assets.nflxext.com/ffe/siteui/vlv3/6c2bbfbb-4bdf-4e33-a1f0-6c3c01f60f6d/3b26c7c7-1d94-43c4-a6e5-ecdb28e4b6da/AZ-en-20240115-popsignuptwoweeks-perspective_alpha_website_large.jpg")
       center/cover no-repeat;
     z-index: 0;
   }
   .hero-content { position: relative; z-index: 1; max-width: 560px; width: 100%; }
   
   .hero h1 {
     font-size: clamp(26px, 5vw, 48px);
     font-weight: 800;
     line-height: 1.15;
     letter-spacing: -.5px;
     margin-bottom: 10px;
   }
   .hero h1 em { color: var(--accent); font-style: normal; font-size: .55em; font-weight: 600; display: block; margin-top: 6px; letter-spacing: .5px; }
   .hero p { font-size: 14px; color: var(--muted); }
   
   /* ── SEARCH ── */
   .search-wrap {
     position: relative; z-index: 10;
     width: 100%; max-width: 620px;
     margin: -22px auto 0;
     padding: 0 16px;
   }
   .search-inner {
     display: flex; align-items: center;
     background: var(--surface);
     border: 1px solid var(--border2);
     border-radius: var(--radius-lg);
     padding: 5px 5px 5px 14px; gap: 8px;
     box-shadow: 0 16px 50px rgba(0,0,0,.5);
     transition: border-color var(--ease), box-shadow var(--ease);
   }
   .search-inner:focus-within {
     border-color: var(--accent);
     box-shadow: 0 16px 50px rgba(0,0,0,.5), 0 0 0 3px rgba(229,9,20,.12);
   }
   .search-icon { color: var(--muted); flex-shrink: 0; }
   .search-inner input {
     flex: 1; min-width: 0;
     background: none; border: none; outline: none;
     font-family: var(--font); font-size: 15px; font-weight: 500;
     color: var(--text); padding: 8px 0;
   }
   .search-inner input::placeholder { color: var(--muted2); }
   .search-btn {
     background: var(--accent); color: #fff; border: none;
     border-radius: 10px; padding: 9px 18px;
     font-family: var(--font); font-size: 14px; font-weight: 700;
     transition: background var(--ease); flex-shrink: 0; white-space: nowrap;
   }
   .search-btn:hover { background: var(--accent-hover); }
   
   /* ── SECTION ── */
   .section {
     flex: 1;
     width: 100%;
     box-sizing: border-box;
     padding: 36px 40px 0;
     max-width: 1400px; margin: 0 auto;
   }
   .section-header {
     display: flex; align-items: baseline;
     justify-content: space-between; margin-bottom: 18px;
   }
   .section-title {
     font-size: 18px; font-weight: 700;
     display: flex; align-items: center; gap: 10px;
   }
   .section-title::before {
     content: ''; display: inline-block;
     width: 4px; height: 18px;
     background: var(--accent); border-radius: 2px;
   }
   .section-more { font-size: 13px; font-weight: 600; color: var(--accent); opacity: .8; transition: opacity var(--ease); }
   .section-more:hover { opacity: 1; }
   
   /* ── POSTER GRID ── */
   .poster-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
     gap: 14px; padding-bottom: 40px;
   }
   @media (max-width: 640px) {
     .poster-grid-wrap {
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
       scroll-snap-type: x mandatory;
       scrollbar-width: none;
       margin: 0 -16px;
       padding: 0 16px 12px;
     }
     .poster-grid-wrap::-webkit-scrollbar { display: none; }
     .poster-grid-wrap .poster-grid {
       display: flex;
       flex-wrap: nowrap;
       gap: 10px;
       padding-bottom: 4px;
       width: max-content;
     }
     .poster-grid-wrap .poster-grid .poster-card {
       width: var(--card-w);
       flex-shrink: 0;
       scroll-snap-align: start;
     }
   }
   .poster-card {
     position: relative; border-radius: var(--radius);
     overflow: hidden; background: var(--surface);
     display: block; cursor: pointer;
     transition: transform var(--ease), box-shadow var(--ease);
   }
   .poster-card:hover {
     transform: translateY(-6px) scale(1.02);
     box-shadow: 0 20px 50px rgba(0,0,0,.6);
     z-index: 2;
   }
   .poster-card img {
     width: 100%;
     height: var(--card-h);
     object-fit: cover;
     display: block;
     flex-shrink: 0;
   }
   .poster-card.no-img { height: var(--card-h); background: var(--surface2); }
   
   .poster-type {
     position: absolute; top: 8px; left: 8px;
     font-size: 10px; font-weight: 700; letter-spacing: .8px;
     text-transform: uppercase; padding: 3px 8px; border-radius: 4px;
   }
   .poster-type.movie  { background: var(--accent); color: #fff; }
   .poster-type.series { background: #2979ff; color: #fff; }
   
   .poster-overlay {
     position: absolute; inset: 0;
     background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
     opacity: 0; transition: opacity var(--ease);
     display: flex; flex-direction: column;
     justify-content: flex-end; padding: 12px;
   }
   .poster-card:hover .poster-overlay { opacity: 1; }
   .poster-title {
     font-size: 12px; font-weight: 700; line-height: 1.3;
     color: #fff; margin-bottom: 8px;
   }
   .poster-play {
     display: inline-flex; align-items: center; justify-content: center;
     width: 34px; height: 34px;
     background: var(--accent); border-radius: 50%; color: #fff; flex-shrink: 0;
   }
   
   /* ── SKELETON ── */
   .skeleton {
     border-radius: var(--radius); height: var(--card-h);
     background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 37%, var(--surface) 63%);
     background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
   }
   @keyframes shimmer {
     0%   { background-position: 100% 0 }
     100% { background-position: -100% 0 }
   }
   
   /* ── AD ── */
   .ad-wrap { max-width: 1400px; margin: 0 auto; padding: 24px 40px 0; }
   .ad-box { width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--border); }
   .ad-box img { width: 100%; height: auto; max-height: 120px; object-fit: cover; display: block; }
   .ad-label { font-size: 10px; color: var(--muted2); letter-spacing: 1px; text-transform: uppercase; text-align: right; padding: 3px 8px; }
   
   /* ── EMPTY ── */
   .empty-state { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--muted); }
   .empty-state .icon { font-size: 38px; margin-bottom: 12px; }
   
   /* ── FOOTER ── */
   .site-footer { margin-top: auto; border-top: 1px solid var(--border); padding: 28px 40px; background: var(--bg2); }
   .footer-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
   .footer-brand { font-weight: 800; font-size: 16px; }
   .footer-brand em { color: var(--accent); font-style: normal; }
   .footer-copy { font-size: 12px; color: var(--muted); margin-top: 3px; }
   .footer-nav ul { display: flex; gap: 24px; list-style: none; flex-wrap: wrap; }
   .footer-nav a {
     font-size: 13px; font-weight: 500; color: var(--muted);
     display: flex; align-items: center; gap: 5px;
     transition: color var(--ease);
   }
   .footer-nav a:hover { color: var(--text); }
   .footer-nav a svg { flex-shrink: 0; }
   
   /* ── RESPONSIVE ── */
   @media (max-width: 1024px) {
     :root { --card-w: 140px; --card-h: 210px; }
   }
   @media (max-width: 768px) {
     :root { --card-w: 110px; --card-h: 165px; }
     .nav { padding: 0 16px; }
     .hero { padding: calc(var(--nav-h) + 40px) 16px 52px; min-height: 320px; }
     .section { padding: 28px 16px 0; }
     .ad-wrap { padding: 20px 16px 0; }
     .site-footer { padding: 24px 16px; }
     .footer-inner { flex-direction: column; align-items: center; text-align: center; }
     .footer-nav ul { justify-content: center; }
   }
   @media (max-width: 480px) {
     :root { --card-w: 95px; --card-h: 142px; }
     .poster-title { font-size: 10px; }
     .nav-tg span { display: none; }
   }

/* ═══════════════════════════════════════════════════════════
   JANR FİLTR DÜYMƏSİ
═══════════════════════════════════════════════════════════ */
.genre-filter-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  color: var(--muted); border-radius: 8px;
  transition: color var(--ease), background var(--ease);
}
.genre-filter-btn:hover,
.genre-filter-btn.active { color: var(--accent); background: rgba(229,9,20,.1); }

/* ═══════════════════════════════════════════════════════════
   JANR DROPDOWN
═══════════════════════════════════════════════════════════ */
.genre-dropdown {
  position: absolute;
  top: calc(100% + 8px); left: 0;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  overflow: hidden;
  opacity: 0; transform: translateY(-8px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 50;
}
.genre-dropdown.open {
  opacity: 1; transform: none; pointer-events: auto;
}

.genre-step { padding: 18px; }
.genre-step.hidden { display: none; }

.genre-step-title {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 12px;
}

/* Tip düymələri (Film / Serial) */
.genre-type-btns {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.genre-type-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 10px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: var(--radius); cursor: pointer;
  font-family: var(--font); font-size: 14px; font-weight: 600;
  color: var(--text);
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.genre-type-btn:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* Addım 2 header */
.genre-step-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.genre-back-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 6px; cursor: pointer; color: var(--text);
  transition: background var(--ease);
}
.genre-back-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Janr pill-ləri */
.genre-list {
  display: flex; flex-wrap: wrap; gap: 7px;
  max-height: 200px; overflow-y: auto;
  scrollbar-width: thin;
}
.genre-pill {
  padding: 6px 13px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 20px; cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 500;
  color: var(--text);
  transition: background var(--ease), border-color var(--ease), color var(--ease);
  white-space: nowrap;
}
.genre-pill:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   TƏSADÜFİ İZLƏ KARTLARI
═══════════════════════════════════════════════════════════ */
.random-watch-section {
  padding-bottom: 48px;
}
.random-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.random-watch-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 28px 24px 24px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 16px; cursor: pointer;
  text-align: left; font-family: var(--font);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
  min-height: 180px;
}
.random-watch-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.random-movie-card { border-top: 2px solid rgba(229,9,20,.5); }
.random-movie-card:hover { border-color: var(--accent); box-shadow: 0 20px 50px rgba(229,9,20,.2); }
.random-series-card { border-top: 2px solid rgba(99,102,241,.5); }
.random-series-card:hover { border-color: #6366f1; box-shadow: 0 20px 50px rgba(99,102,241,.2); }

.rwc-bg-icon {
  position: absolute; right: -10px; bottom: -10px;
  line-height: 0; pointer-events: none;
}
.rwc-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; margin-bottom: 16px;
}
.random-movie-card  .rwc-icon { background: rgba(229,9,20,.15); color: var(--accent); }
.random-series-card .rwc-icon { background: rgba(99,102,241,.15); color: #818cf8; }

.rwc-label {
  font-size: 17px; font-weight: 700; color: var(--text);
  margin-bottom: 5px; line-height: 1.2;
}
.rwc-sub {
  font-size: 13px; color: var(--muted); font-weight: 400;
  margin-bottom: 20px;
}
.rwc-arrow {
  margin-top: auto;
  color: var(--muted);
  transition: color var(--ease), transform var(--ease);
}
.random-watch-card:hover .rwc-arrow { transform: translateX(4px); }
.random-movie-card:hover  .rwc-arrow { color: var(--accent); }
.random-series-card:hover .rwc-arrow { color: #818cf8; }

/* Loading overlay */
.rwc-loading {
  display: none;
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  align-items: center; justify-content: center;
  border-radius: 16px;
}
.rwc-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Mobil */
@media (max-width: 640px) {
  .random-cards-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .random-watch-card { padding: 20px 16px 18px; min-height: 150px; }
  .rwc-label { font-size: 14px; }
  .rwc-sub   { font-size: 11px; }
  .rwc-icon  { width: 42px; height: 42px; margin-bottom: 12px; }
  .genre-list { max-height: 160px; }
}

/* ── Seçilmiş janr pill ── */
.genre-pill.selected {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
/* Filter düyməsi aktiv janr varsa işarə */
.genre-filter-btn.has-filter {
  color: var(--accent);
  background: rgba(229,9,20,.12);
}
.genre-filter-btn.has-filter::after {
  content: '';
  position: absolute;
  top: 6px; right: 6px;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  border: 1.5px solid var(--bg);
}
.genre-filter-btn { position: relative; }