/* ============================================
   RAJA DONGHUA — Premium Dark Theme
   Mobile-first | <30KB | Netflix-level look
   ============================================ */

/* --- RESET & BASE --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0a;--bg2:#111;--bg3:#1a1a1a;--bg4:#222;
  --surface:#161616;--surface2:#1e1e1e;
  --text:#f0f0f0;--text2:#a0a0a0;--text3:#666;
  --red:#e94560;--red2:#ff6b81;--gold:#f5a623;--gold2:#ffd700;
  --blue:#4a9eff;
  --radius:10px;--radius-sm:6px;--radius-lg:16px;
  --shadow:0 4px 24px rgba(0,0,0,.5);
  --shadow-sm:0 2px 8px rgba(0,0,0,.3);
  --shadow-lg:0 8px 40px rgba(0,0,0,.6);
  --transition:.25s ease;
  --nav-h:56px;
  --font:-apple-system,BlinkMacSystemFont,'Inter',system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);color:var(--text);background:var(--bg);
  line-height:1.6;min-height:100vh;min-height:100dvh;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit;border:none;background:none}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
ul,ol{list-style:none}
h1,h2,h3,h4{font-weight:600;line-height:1.25}

/* --- SCROLLBAR --- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}

/* --- UTILITIES --- */
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.gradient-text{
  background:linear-gradient(135deg,var(--red),var(--gold));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.skeleton{
  background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;
  border-radius:var(--radius-sm);
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* --- NAVBAR --- */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  background:rgba(10,10,10,.85);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background var(--transition);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:100%;max-width:1280px;margin:0 auto;padding:0 16px;gap:12px;
}
.nav-logo{
  font-size:1.15rem;font-weight:700;letter-spacing:-.02em;white-space:nowrap;
  flex-shrink:0;
}
.nav-logo .raja{color:var(--gold)}
.nav-logo .donghua{color:var(--text)}
.nav-search{
  flex:1;max-width:320px;position:relative;display:none;
}
.nav-search input{
  width:100%;height:40px;padding:0 36px 0 14px;
  background:var(--bg3);border:1px solid rgba(255,255,255,.08);
  border-radius:20px;font-size:.875rem;color:var(--text);
  transition:border-color var(--transition);
}
.nav-search input:focus{outline:none;border-color:var(--red)}
.nav-search input::placeholder{color:var(--text3)}
.nav-search-icon{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;opacity:.5;pointer-events:none;
}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a,.nav-btn{
  display:flex;align-items:center;justify-content:center;
  min-width:40px;min-height:44px;padding:8px 8px;
  border-radius:var(--radius-sm);font-size:.8rem;font-weight:500;
  color:var(--text2);transition:color var(--transition),background var(--transition);
  white-space:nowrap;
}
/* Hide Katalog & Jadwal on mobile - already in bottom nav */
.nav-links a[href="/katalog.html"],
.nav-links a[href="/jadwal.html"]{display:none}
.nav-links a:hover,.nav-links a.active,.nav-btn:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav-links a.active{color:var(--red)}
.nav-vip{
  background:linear-gradient(135deg,var(--red),#c0392b)!important;
  color:#fff!important;font-weight:600;border-radius:20px;padding:8px 16px!important;
}
.nav-vip:hover{opacity:.9}

/* Mobile search toggle */
.nav-search-toggle{display:flex}

/* Mobile bottom nav */
.bottom-nav{
  display:flex;position:fixed;bottom:0;left:0;right:0;z-index:100;
  height:56px;background:rgba(10,10,10,.95);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.06);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -2px 20px rgba(0,0,0,.8);
}
.bottom-nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;font-size:.625rem;color:var(--text3);
  min-height:44px;transition:color var(--transition);
}
.bottom-nav a.active{color:var(--red)}
.bottom-nav svg{width:22px;height:22px}
.bottom-nav span{font-weight:500}

/* --- HERO SECTION --- */
.hero{
  position:relative;width:100%;
  padding:calc(var(--nav-h) + 20px) 16px 24px;
  min-height:45vh;min-height:45dvh;
  display:flex;align-items:flex-end;
  background:linear-gradient(180deg,transparent 0%,var(--bg) 100%),
             linear-gradient(135deg,#1a0a1e 0%,#0a0a0a 50%,#0a1a1e 100%);
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center top;
  opacity:.5;
}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,var(--bg) 0%,rgba(10,10,10,.4) 50%,rgba(10,10,10,.7) 100%);
}
.hero-content{position:relative;z-index:1;max-width:600px}
.hero-badge{
  display:inline-block;padding:4px 10px;margin-bottom:12px;
  font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:var(--red);color:#fff;border-radius:4px;
}
.hero h1{font-size:1.6rem;font-weight:700;margin-bottom:8px;letter-spacing:-.02em}
.hero p{font-size:.875rem;color:var(--text2);margin-bottom:16px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}

/* --- BUTTONS --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 20px;font-size:.875rem;font-weight:600;
  border-radius:var(--radius);transition:all var(--transition);
}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red2)}
.btn-secondary{background:rgba(255,255,255,.1);color:var(--text)}
.btn-secondary:hover{background:rgba(255,255,255,.15)}
.btn-gold{background:linear-gradient(135deg,var(--gold),#e8941e);color:#000;font-weight:700}
.btn-gold:hover{opacity:.9}
.btn-sm{min-height:36px;padding:6px 14px;font-size:.8125rem}
.btn-block{width:100%}
.btn svg{width:18px;height:18px;flex-shrink:0}

/* --- SECTION --- */
.section{padding:28px 0}
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;padding:0 16px;
}
.section-title{font-size:1.125rem;font-weight:700;letter-spacing:-.01em}
.section-more{
  font-size:.8125rem;color:var(--red);font-weight:500;
  min-width:44px;min-height:44px;display:flex;align-items:center;
}
.section-more:hover{color:var(--red2)}

/* --- CARD GRID (Horizontal scroll on mobile) --- */
.card-row{
  display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;
  padding:0 16px 8px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.card-row::-webkit-scrollbar{display:none}
.card-row .card{scroll-snap-align:start;flex-shrink:0}

/* Card */
.card{
  width:130px;position:relative;
  border-radius:var(--radius);overflow:hidden;
  transition:transform var(--transition);
}
.card:active{transform:scale(.97)}
.card-poster{
  position:relative;width:100%;aspect-ratio:3/4;
  background:linear-gradient(135deg,var(--bg3),var(--bg4));
  border-radius:var(--radius);overflow:hidden;
}
.card-poster img{
  width:100%;height:100%;object-fit:cover;
  transition:opacity .3s;
}
.card-poster img[data-src]{opacity:0}
.card-poster img.loaded{opacity:1}
.card-badge{
  position:absolute;top:6px;left:6px;
  padding:2px 6px;font-size:.625rem;font-weight:600;
  background:var(--red);color:#fff;border-radius:3px;
  letter-spacing:.03em;
}
.card-badge.ongoing{background:#27ae60}
.card-badge.completed{background:var(--blue)}
.card-badge.vip{background:linear-gradient(135deg,var(--gold),#e8941e);color:#000}
.card-score{
  position:absolute;top:6px;right:6px;
  padding:2px 6px;font-size:.625rem;font-weight:700;
  background:rgba(0,0,0,.7);color:var(--gold);border-radius:3px;
}
.card-ep{
  position:absolute;bottom:0;left:0;right:0;
  padding:4px 6px;font-size:.625rem;font-weight:500;
  background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);
  color:var(--text2);text-align:right;
}
.card-title{
  margin-top:8px;font-size:.8125rem;font-weight:500;
  line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* Card grid for catalog page */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:14px;padding:0 16px;
}
.card-grid .card{width:100%}

/* --- SCHEDULE TABLE --- */
.schedule-tabs{
  display:flex;gap:6px;overflow-x:auto;padding:0 16px 12px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.schedule-tabs::-webkit-scrollbar{display:none}
.schedule-tab{
  flex-shrink:0;min-width:44px;min-height:44px;
  padding:8px 16px;font-size:.8125rem;font-weight:600;
  border-radius:20px;background:var(--bg3);color:var(--text2);
  transition:all var(--transition);white-space:nowrap;
}
.schedule-tab.active{background:var(--red);color:#fff}
.schedule-list{padding:0 16px}
.schedule-item{
  display:flex;gap:12px;padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  align-items:center;
}
.schedule-item:last-child{border:none}
.schedule-poster{
  width:48px;height:64px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,var(--bg3),var(--bg4));
}
.schedule-poster img{width:100%;height:100%;object-fit:cover}
.schedule-info{flex:1;min-width:0}
.schedule-title{font-size:.875rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.schedule-meta{font-size:.75rem;color:var(--text3);margin-top:2px}
.schedule-time{
  font-size:.75rem;font-weight:600;color:var(--gold);
  white-space:nowrap;flex-shrink:0;
}

/* --- DETAIL PAGE --- */
.detail-header{
  position:relative;padding:calc(var(--nav-h) + 16px) 16px 24px;
  min-height:45vh;display:flex;align-items:flex-end;
}
.detail-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center top;opacity:.3;
}
.detail-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,var(--bg) 5%,rgba(10,10,10,.3) 100%);
}
.detail-content{position:relative;z-index:1;display:flex;gap:16px;width:100%;max-width:1280px;margin:0 auto}
.detail-poster{
  width:110px;height:155px;flex-shrink:0;
  border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);
  background:linear-gradient(135deg,var(--bg3),var(--bg4));
}
.detail-poster img{width:100%;height:100%;object-fit:cover}
.detail-info{flex:1;min-width:0}
.detail-title{font-size:1.25rem;font-weight:700;margin-bottom:4px}
.detail-meta{font-size:.75rem;color:var(--text2);margin-bottom:8px;display:flex;flex-wrap:wrap;gap:8px}
.detail-meta-item{display:flex;align-items:center;gap:4px}
.detail-genres{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.detail-genre{
  padding:3px 10px;font-size:.6875rem;font-weight:500;
  background:rgba(255,255,255,.08);border-radius:12px;color:var(--text2);
}
.detail-actions{display:flex;gap:8px;flex-wrap:wrap}

.detail-body{padding:20px 16px}
.detail-synopsis{margin-bottom:24px}
.detail-synopsis h3{font-size:.9375rem;font-weight:600;margin-bottom:8px}
.detail-synopsis p{font-size:.875rem;color:var(--text2);line-height:1.7}
.synopsis-toggle{color:var(--red);font-size:.8125rem;font-weight:500;margin-top:4px;
  min-height:44px;display:inline-flex;align-items:center}

/* Episode list */
.ep-section h3{font-size:.9375rem;font-weight:600;margin-bottom:12px}
.ep-filter{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;padding-bottom:4px}
.ep-filter button{
  flex-shrink:0;padding:6px 14px;font-size:.75rem;font-weight:500;
  border-radius:16px;background:var(--bg3);color:var(--text2);
  min-height:36px;transition:all var(--transition);
}
.ep-filter button.active{background:var(--red);color:#fff}
.ep-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;
}
.ep-btn{
  display:flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 4px;
  font-size:.8125rem;font-weight:500;
  background:var(--surface2);border-radius:var(--radius-sm);
  color:var(--text2);transition:all var(--transition);
}
.ep-btn:hover,.ep-btn:active{background:var(--red);color:#fff}
.ep-btn.watched{color:var(--text3);opacity:.6}
.ep-btn.current{background:var(--red);color:#fff}
.ep-btn.vip-locked{position:relative}
.ep-btn.vip-locked::after{
  content:'👑';position:absolute;top:2px;right:4px;font-size:.5rem;
}

/* --- PLAYER PAGE --- */
.player-wrapper{
  position:relative;width:100%;
  padding-top:var(--nav-h);background:#000;
}
.player-video{
  position:relative;width:100%;aspect-ratio:16/9;
  background:#000;
}
.player-video iframe,.player-video video{
  position:absolute;inset:0;width:100%;height:100%;border:none;
}
.player-info{padding:16px}
.player-title{font-size:1.0625rem;font-weight:700;margin-bottom:4px}
.player-subtitle{font-size:.8125rem;color:var(--text2);margin-bottom:12px}
.player-nav{
  display:flex;gap:8px;margin-bottom:16px;
}
.player-servers{margin-bottom:16px}
.player-servers h4{font-size:.8125rem;font-weight:600;color:var(--text2);margin-bottom:8px}
.server-btns{display:flex;gap:6px;flex-wrap:wrap}
.server-btn{
  padding:8px 16px;font-size:.8125rem;font-weight:500;
  background:var(--bg3);border-radius:var(--radius-sm);
  color:var(--text2);min-height:40px;transition:all var(--transition);
}
.server-btn.active{background:var(--red);color:#fff}
.ep-nav-list{margin-top:16px}
.ep-nav-list h4{font-size:.8125rem;font-weight:600;color:var(--text2);margin-bottom:8px;padding:0 16px}

/* --- SEARCH PAGE --- */
.search-page{padding:calc(var(--nav-h) + 16px) 0 80px}
.search-bar{
  padding:0 16px;margin-bottom:20px;
}
.search-input-wrap{
  position:relative;display:flex;align-items:center;
  background:var(--bg3);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);overflow:hidden;
  transition:border-color var(--transition);
}
.search-input-wrap:focus-within{border-color:var(--red)}
.search-input-wrap input{
  flex:1;height:48px;padding:0 16px;font-size:1rem;
  background:none;color:var(--text);
}
.search-input-wrap input::placeholder{color:var(--text3)}
.search-input-wrap button{
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  color:var(--text2);
}
.search-filters{
  display:flex;gap:8px;padding:0 16px;margin-bottom:16px;
  overflow-x:auto;scrollbar-width:none;
}
.search-filters::-webkit-scrollbar{display:none}
.search-filters button{
  flex-shrink:0;padding:6px 14px;font-size:.75rem;font-weight:500;
  border-radius:16px;background:var(--bg3);color:var(--text2);
  min-height:36px;white-space:nowrap;transition:all var(--transition);
}
.search-filters button.active{background:var(--red);color:#fff}
.search-results{padding:0 16px}
.search-empty{text-align:center;padding:48px 16px;color:var(--text3)}
.search-empty p{font-size:.875rem;margin-top:8px}

/* --- LOGIN PAGE --- */
.login-page{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 16px;
  background:linear-gradient(180deg,#0f0a14 0%,var(--bg) 100%);
}
.login-card{
  width:100%;max-width:380px;
  background:var(--surface);border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-lg);padding:32px 24px;
  box-shadow:var(--shadow-lg);text-align:center;
}
.login-logo{font-size:1.5rem;font-weight:700;margin-bottom:4px}
.login-subtitle{font-size:.875rem;color:var(--text2);margin-bottom:32px}
.login-google{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:48px;padding:12px 20px;
  background:#fff;color:#333;font-size:.9375rem;font-weight:600;
  border-radius:var(--radius);transition:opacity var(--transition);
}
.login-google:hover{opacity:.9}
.login-google svg{width:20px;height:20px;flex-shrink:0}
.login-divider{
  display:flex;align-items:center;gap:12px;
  margin:24px 0;font-size:.75rem;color:var(--text3);
}
.login-divider::before,.login-divider::after{
  content:'';flex:1;height:1px;background:rgba(255,255,255,.08);
}
.login-benefits{text-align:left;margin-bottom:24px}
.login-benefit{
  display:flex;align-items:center;gap:10px;
  padding:8px 0;font-size:.8125rem;color:var(--text2);
}
.login-benefit-icon{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:rgba(233,69,96,.1);border-radius:8px;font-size:.875rem;flex-shrink:0;
}
.login-terms{font-size:.6875rem;color:var(--text3);margin-top:20px;line-height:1.5}
.login-terms a{color:var(--red);text-decoration:underline}

/* --- FILTER MODAL --- */
.filter-drawer{
  position:fixed;inset:0;z-index:200;
  display:none;flex-direction:column;justify-content:flex-end;
}
.filter-drawer.open{display:flex}
.filter-overlay{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.filter-content{
  position:relative;z-index:1;
  background:var(--bg2);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:20px 16px 32px;max-height:80vh;overflow-y:auto;
}
.filter-handle{
  width:40px;height:4px;border-radius:2px;background:var(--bg4);
  margin:0 auto 16px;
}
.filter-title{font-size:1rem;font-weight:700;margin-bottom:16px}
.filter-group{margin-bottom:16px}
.filter-group label{display:block;font-size:.75rem;font-weight:600;color:var(--text2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em}
.filter-options{display:flex;flex-wrap:wrap;gap:8px}
.filter-chip{
  padding:8px 14px;font-size:.8125rem;font-weight:500;
  background:var(--bg3);border-radius:20px;color:var(--text2);
  min-height:36px;transition:all var(--transition);
}
.filter-chip.active{background:var(--red);color:#fff}
.filter-actions{display:flex;gap:10px;margin-top:20px}

/* --- VIP BANNER --- */
.vip-banner{
  margin:8px 16px 16px;
  padding:16px;
  background:linear-gradient(135deg,#2a1a08 0%,#1a100f 50%,#1a0a18 100%);
  border:1px solid rgba(245,166,35,.25);
  border-radius:var(--radius);
  display:flex;align-items:center;gap:12px;
  position:relative;
  overflow:hidden;
  z-index:1;
}
.vip-banner::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(245,166,35,.05),transparent);
  animation:vipShine 3s ease-in-out infinite;
}
@keyframes vipShine{0%,100%{opacity:0}50%{opacity:1}}
.vip-banner-icon{font-size:1.75rem;flex-shrink:0;position:relative;z-index:1}
.vip-banner-text{flex:1;min-width:120px;position:relative;z-index:1}
.vip-banner-text h4{font-size:.875rem;font-weight:700;color:var(--gold)}
.vip-banner-text p{font-size:.75rem;color:var(--text2);margin-top:2px}
.vip-banner .btn{flex-shrink:0;position:relative;z-index:1}
@media(max-width:374px){
  .vip-banner{flex-wrap:wrap;justify-content:center;text-align:center;gap:8px;padding:14px 12px}
  .vip-banner-text{min-width:100%}
  .vip-banner .btn{width:100%}
}

/* --- FOOTER --- */
.footer{
  padding:32px 16px 120px;margin-top:20px;
  border-top:1px solid rgba(255,255,255,.05);
  text-align:center;
}
.footer-logo{font-size:1rem;font-weight:700;margin-bottom:8px}
.footer-desc{font-size:.75rem;color:var(--text3);margin-bottom:16px;max-width:400px;margin-left:auto;margin-right:auto}
.footer-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.footer-links a{font-size:.75rem;color:var(--text3);min-height:44px;display:flex;align-items:center;transition:color var(--transition)}
.footer-links a:hover{color:var(--text)}
.footer-copy{font-size:.6875rem;color:var(--text3)}

/* --- MOBILE SEARCH OVERLAY --- */
.search-overlay{
  position:fixed;inset:0;z-index:150;
  background:var(--bg);display:none;flex-direction:column;
  padding:0;
}
.search-overlay.open{display:flex}
.search-overlay-bar{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.06);
  height:var(--nav-h);
}
.search-overlay-bar input{
  flex:1;height:40px;padding:0 12px;font-size:1rem;
  background:var(--bg3);border-radius:var(--radius);color:var(--text);
}
.search-overlay-bar input::placeholder{color:var(--text3)}
.search-overlay-bar button{
  min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;
  font-size:.875rem;color:var(--red);font-weight:500;
}
.search-overlay-results{flex:1;overflow-y:auto;padding:12px 16px}

/* --- EMPTY STATE --- */
.empty-state{
  text-align:center;padding:48px 24px;
}
.empty-state-icon{font-size:3rem;margin-bottom:12px;opacity:.4}
.empty-state h3{font-size:1rem;font-weight:600;margin-bottom:6px;color:var(--text2)}
.empty-state p{font-size:.8125rem;color:var(--text3)}

/* --- TAG / CHIP --- */
.tag{
  display:inline-flex;align-items:center;
  padding:4px 10px;font-size:.6875rem;font-weight:500;
  background:rgba(255,255,255,.06);border-radius:12px;color:var(--text2);
}

/* --- TOAST --- */
.toast{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  padding:10px 20px;background:var(--surface2);color:var(--text);
  border-radius:var(--radius);font-size:.8125rem;font-weight:500;
  box-shadow:var(--shadow);z-index:300;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.toast.show{opacity:1}

/* --- PAGE BODY SPACER --- */
.page-body{padding-top:var(--nav-h);padding-bottom:80px;min-height:100vh}

/* --- LOADING SPINNER --- */
.spinner{width:32px;height:32px;border:3px solid var(--bg4);border-top-color:var(--red);border-radius:50%;animation:spin .6s linear infinite;margin:32px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- HORIZONTAL RULE --- */
.divider{height:1px;background:rgba(255,255,255,.05);margin:0 16px}

/* ============================================
   RESPONSIVE BREAKPOINTS
   Mobile-first: base → 375 → 414 → 768 → 1024 → 1440
   ============================================ */

/* 320px base fixes (HP jadul) */
@media(max-width:374px){
  .hero{min-height:40vh;padding:calc(var(--nav-h) + 16px) 12px 20px}
  .hero h1{font-size:1.3rem}
  .hero p{font-size:.8rem;-webkit-line-clamp:2}
  .card{width:110px}
  .card-row{gap:8px;padding:0 12px 8px}
  .section-header{padding:0 12px}
  .card-title{font-size:.7rem}
  .card-grid{padding:0 12px;gap:10px;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .hero-actions .btn{font-size:.75rem;padding:10px 16px}
}

/* 375px+ (iPhone SE / most phones) */
@media(min-width:375px){
  .card{width:140px}
  .hero h1{font-size:1.75rem}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}

/* 414px+ (larger phones) */
@media(min-width:414px){
  .card{width:150px}
  .container{padding:0 20px}
  .section-header{padding:0 20px}
  .card-row{padding:0 20px 8px;gap:14px}
  .card-grid{padding:0 20px;gap:16px}
}

/* 640px+ (large phone landscape / small tablet) */
@media(min-width:640px){
  .card{width:160px}
  .hero h1{font-size:2rem}
  .hero p{font-size:.9375rem}
  .detail-poster{width:140px;height:196px}
  .detail-title{font-size:1.5rem}
  .ep-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}
}

/* 768px+ (tablet) */
@media(min-width:768px){
  :root{--nav-h:60px}
  .nav-search{display:block}
  .nav-search-toggle{display:none}
  .bottom-nav{display:none}
  .footer{padding-bottom:32px}
  .page-body{padding-bottom:40px}
  .hero{min-height:60vh;padding:calc(var(--nav-h) + 40px) 24px 48px}
  .hero h1{font-size:2.25rem}
  .hero-content{max-width:550px}
  .card{width:170px}
  .card-row{gap:16px}
  .section{padding:36px 0}
  .section-header{margin-bottom:20px}
  .section-title{font-size:1.25rem}
  .detail-header{min-height:50vh;padding:calc(var(--nav-h) + 24px) 24px 32px}
  .detail-content{gap:24px}
  .detail-poster{width:170px;height:238px}
  .detail-title{font-size:1.75rem}
  .detail-body{padding:28px 24px}
  .player-info{padding:20px 24px}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:18px;padding:0 24px}
  .schedule-list{padding:0 24px}
  .search-bar{padding:0 24px}
  .search-results{padding:0 24px}
  .nav-links a,.nav-btn{padding:8px 14px;font-size:.875rem}
  .nav-links a[href="/katalog.html"],
  .nav-links a[href="/jadwal.html"]{display:flex}
}

/* 1024px+ (desktop) */
@media(min-width:1024px){
  .hero{min-height:65vh;padding:calc(var(--nav-h) + 48px) 40px 56px}
  .hero h1{font-size:2.75rem}
  .hero p{font-size:1rem;-webkit-line-clamp:4}
  .hero-content{max-width:600px}
  .card{width:185px}
  .card:hover{transform:translateY(-4px)}
  .card-poster:hover img{transform:scale(1.05);transition:transform .4s}
  .section{padding:44px 0}
  .detail-content{gap:32px}
  .detail-poster{width:200px;height:280px}
  .detail-title{font-size:2rem}
  .ep-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:20px;padding:0 40px}
  .nav-inner{padding:0 32px}
  .section-header{padding:0 40px}
  .card-row{padding:0 40px 8px}
}

/* 1440px+ (large desktop) */
@media(min-width:1440px){
  .container{padding:0 40px}
  .card{width:200px}
  .hero h1{font-size:3rem}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(185px,1fr))}
}

/* --- ACCESSIBILITY --- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Focus visible for keyboard nav */
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}

/* Safe area for notched phones */
@supports(padding:env(safe-area-inset-bottom)){
  .bottom-nav{padding-bottom:env(safe-area-inset-bottom)}
  .page-body{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
}
/* Free episode badge */
.ep-btn.free{position:relative;border-color:var(--gold);color:var(--gold)}
.ep-btn.free::after{content:'GRATIS';position:absolute;top:-8px;right:-8px;font-size:.5rem;background:var(--gold);color:#000;padding:1px 4px;border-radius:4px;font-weight:700;line-height:1.2}

/* Player video wrapper ensure 16:9 */