/* =========================================================
   Dark Theme – Pro Aesthetic (drop-in replacement)
   – Konsisten dengan class HTML yang sudah ada
   – Fokus ke readability, spacing, dan interaksi
   ========================================================= */

:root{
  --bg:#0b0f17;
  --panel:#0f1524;
  --panel-2:#0b1221;
  --card:#10172b;
  --line:#172136;
  --line-2:#1d2a45;
  --muted:#9fb0cf;
  --text:#eaf0fb;
  --accent:#7b5cff;     /* brand utama */
  --accent-2:#6aa8ff;   /* gradient partner */
  --ok:#22c55e; --warn:#fbbf24; --danger:#ef4444;
  --shadow:0 20px 50px rgba(0,0,0,.45);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font:15px/1.65 Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- Containers ---------- */
.container{max-width:1288px;margin:0 auto;padding:0 18px}
.layout{display:grid;grid-template-columns:1fr 340px;gap:22px;margin-top:16px}
@media(max-width:1060px){.layout{grid-template-columns:1fr}}

/* ---------- Topbar / Nav ---------- */
.topbar{
  display:grid;grid-template-columns:220px 1fr 200px;align-items:center;
  gap:12px;padding:12px 18px;background:rgba(10,14,24,.95);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;
  backdrop-filter:saturate(120%) blur(8px);
}
.logo{font-weight:900;font-size:20px;letter-spacing:.4px;display:flex;align-items:center;gap:10px}
.logo .dot{color:var(--accent-2)}
.search{display:flex;gap:10px;max-width:520px;justify-self:center;width:100%}
.search input{
  flex:1;background:#0e162d;border:1px solid var(--line);
  color:var(--text);border-radius:12px;padding:11px 12px;outline:none;
}
.search input:focus{border-color:#3558a8;box-shadow:0 0 0 2px rgba(53,88,168,.25)}
.btn{
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  padding:10px 14px;border-radius:12px;font-weight:800;border:0;color:#fff;cursor:pointer;
  transition:transform .12s ease, filter .22s ease;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.nav{
  display:flex;gap:12px;padding:10px 18px;background:#0b1221;border-bottom:1px solid var(--line);
}
.nav a{
  padding:8px 12px;border-radius:999px;background:#0f1730;border:1px solid var(--line);
  color:#cfe0ff;font-weight:800;
}
.nav a:hover,.nav a.active{background:#16233d}

/* ---------- Filter bar chips ---------- */
.filterbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 16px}
.filterbar .chip-select{position:relative}
.filterbar .chip-select select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:#0f1730;color:#d7e6ff;border:1px solid var(--line);
  border-radius:999px;padding:10px 40px 10px 12px;font-weight:800;cursor:pointer;
}
.filterbar .chip-select::after{
  content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:#9fb0cf;font-size:12px;pointer-events:none
}
.filterbar .chip-select select:hover{border-color:#284170}
.filterbar .chip-select select:focus{border-color:#4570ff;box-shadow:0 0 0 2px rgba(69,112,255,.2)}
.filterbar .chip-btn{
  background:#0f1730;border:1px solid var(--line);color:#cfe0ff;border-radius:999px;
  padding:10px 14px;font-weight:800;line-height:1;
}
.filterbar .chip-btn:hover{background:#16233d;border-color:#284170}
@media(max-width:768px){
  .filterbar{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;gap:8px}
  .filterbar::-webkit-scrollbar{display:none}
  .filterbar .chip-select select{padding:8px 36px 8px 10px}
  .filterbar .chip-select::after{right:10px}
  .filterbar .chip-btn{padding:8px 12px}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;border-radius:16px;overflow:hidden;background:#000;box-shadow:var(--shadow);
  margin:0 0 18px;border:1px solid var(--line);
}
.hero .bg{position:relative;background:#000 center/cover no-repeat;filter:brightness(.92)}
.hero .bg::before{content:"";display:block;padding-top:38%}
.hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.05) 100%)}
.hero .content{position:absolute;inset:0;display:flex;align-items:center;padding:22px}
.hero .meta{max-width:56%}
.hero h1{margin:0 0 10px;font-size:clamp(18px,2.4vw,28px)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip{background:rgba(0,0,0,.45);border:1px solid #243257;color:#eaf0ff;font-weight:800;padding:6px 10px;border-radius:999px;font-size:12px}
.btn-cta{min-width:140px}
@media(max-width:768px){
  .hero .bg::before{padding-top:56%}
  .hero .shade{background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.8))}
  .hero .content{align-items:flex-end;padding:14px}
  .hero .meta{max-width:100%}
  .chip{padding:5px 8px;font-size:12px}
  .btn-cta{min-width:0;padding:10px 14px;border-radius:12px}
}

/* ---------- Cards / Grid ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1120px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.45);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.55);border-color:var(--line-2)}
.thumb{
  position:relative;background:#0c1320 center/cover no-repeat;
  aspect-ratio: var(--fv-thumb-aspect-ratio, 16/9);
}
.thumb-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.65) 0%,rgba(0,0,0,.12) 70%)}
.duration{
  position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.65);
  padding:4px 7px;border-radius:7px;font-size:12px;font-weight:800
}
.title{font-weight:800;padding:10px 10px 4px;letter-spacing:.2px}
.meta{padding:0 10px 12px;color:var(--muted);font-size:12px}
.badge{background:#16233d;color:#cbd5e1;border:1px solid #223459;border-radius:999px;padding:4px 8px;font-size:12px}

/* ---------- Sidebar ---------- */
.sidebar{align-self:start;position:sticky;top:182px}
.sidebar .panel{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px
}
.sidebar .section-title{display:flex;align-items:center;justify-content:space-between;margin:6px 0 10px}
.sidebar-banners{margin-top:8px;display:flex;flex-direction:column;gap:12px}
.ad-card{position:relative;overflow:hidden;border-radius:14px;background:#0b1020;border:1px solid var(--line);box-shadow:0 10px 26px rgba(0,0,0,.45);transition:transform .22s ease, box-shadow .22s ease}
.ad-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.6)}
.ad-card img{width:100%;height:auto;display:block;transition:opacity .38s ease, transform .32s ease}
.ad-label{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.75);color:#fff;font:800 10px/1 system-ui;padding:4px 7px;border-radius:6px}

/* ---------- Video Detail / Player ---------- */
.video{position:relative;width:100%;background:#000;border-radius:16px;border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow)}
video.player{width:100%;aspect-ratio:16/9;height:auto;display:block;background:#000}
.embed-wrapper{position:relative;width:100%;padding-top:56.25%;background:#000;border-radius:16px;overflow:hidden}
.embed-wrapper iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.watch-title{font-size:clamp(18px,2.4vw,26px);font-weight:900;margin:12px 0 4px}
.watch-meta{color:var(--muted);font-size:13px;margin-bottom:10px}
.pill{display:inline-block;margin:0 6px 6px 0;background:#141b2d;border:1px solid var(--line);color:#d6e6ff;padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px}
.actionbar{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 14px}
.ab-btn{display:inline-flex;align-items:center;gap:8px;background:#0e1527;border:1px solid var(--line);color:#dce8ff;padding:9px 12px;border-radius:12px;font-weight:900}
.channel{display:flex;gap:12px;align-items:center;background:var(--panel-2);border:1px solid var(--line);padding:12px;border-radius:14px;margin-top:10px}
.avatar{width:44px;height:44px;border-radius:999px;background:#1a233a;display:grid;place-items:center;font-weight:900}
.desc{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:12px;margin-top:10px}

/* Up next (right rail) */
.rail{position:sticky;top:182px;align-self:start;display:flex;flex-direction:column;gap:14px}
.rail .panel{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:12px}
.up-card{display:flex;gap:10px;background:#0e1425;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.up-thumb{flex:0 0 140px;background:#0c1220 center/cover no-repeat;position:relative;aspect-ratio:var(--fv-thumb-aspect-ratio, 16/9)}
.up-duration{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.65);padding:2px 6px;border-radius:6px;font-size:11px;font-weight:800}
.up-body{padding:8px 10px 10px;display:flex;flex-direction:column;justify-content:center}
.up-title{font-weight:800;line-height:1.3;margin-bottom:4px}
.up-meta{font-size:12px;color:var(--muted)}

/* Ads grid on watch page: desktop 3, mobile 1 */
.watch-ads{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0 16px}
@media(max-width:980px){.watch-ads{grid-template-columns:1fr}}
@media(max-width:768px){.watch-ads .slot-1,.watch-ads .slot-2{display:none}}

/* ---------- Tables / Alerts ---------- */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;font-size:14px}
.alert{padding:10px 12px;border:1px solid var(--line);background:#0d1426;border-radius:10px}

/* ---------- Footer ---------- */
.footer{padding:28px;text-align:center;color:#94a3b8;border-top:1px solid var(--line);margin-top:24px}

/* ---------- Category bar (legacy) ---------- */
.catbar{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}
.catbar a{border:1px solid var(--line);padding:6px 10px;border-radius:999px;color:#cbd5e1}
.catbar a:hover{background:#16233d;border-color:#284170}

/* ---------- Video Ad Overlay ---------- */
.ad-overlay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:50;text-align:center
}
.ad-overlay img{
  max-width:360px;width:94%;height:auto;border-radius:10px;
  box-shadow:0 12px 34px rgba(0,0,0,.6);border:1px solid var(--line)
}
.close-ad{
  display:inline-block;margin-top:8px;padding:8px 14px;background:var(--danger);
  color:#fff;font-size:13px;font-weight:800;border:none;border-radius:10px;cursor:pointer
}

/* ---------- Responsive tweaks ---------- */
@media(max-width:1000px){
  .topbar{grid-template-columns:1fr;gap:10px}
  .search{justify-self:stretch}
}