/* ===========================
   GLOBAL
   =========================== */
:root{
  --bg:#0f0f12;
  --card:#141417;
  --muted:#cfcfd3;
  --accent:#e74c3c;
  --container:1200px;          /* default container width */
  --line: rgba(255,255,255,0.06);
  --topbar-h: 64px;
}
*{box-sizing:border-box}
html, body{height:100%}
html, body { width: 100%; overflow-x: hidden; } /* cegah scroll horizontal */
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
  color:var(--muted);
  background:radial-gradient(circle at 10% 10%, #0b0b0e, var(--bg));
  padding-top: calc(var(--topbar-h) + 8px); /* ruang untuk header fixed */
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:18px}

/* ===========================
   TOPBAR (fixed)
   =========================== */
.topbar{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.topbar-inner{min-height: var(--topbar-h); display:flex;align-items:center;gap:12px}
.brand{color:var(--muted);text-decoration:none;font-weight:700}
.brand { text-decoration: none; color: inherit; }
.searchwrap{margin-left:auto;display:flex;gap:8px}
.searchwrap input{padding:8px 12px;border-radius:6px;border:1px solid var(--line);background:#0b0b0b;color:var(--muted);min-width:240px}
.searchwrap button{padding:8px 12px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.topbar-actions{display:none; margin-left:auto; gap:6px}
.icon-btn{background:transparent;border:0;color:var(--muted);font-size:20px;padding:8px;border-radius:8px;cursor:pointer}
.icon-btn.close{font-size:18px;border:1px solid var(--line)}

/* Backdrop untuk overlay */
.backdrop{display:none}
.backdrop.show{display:block; position:fixed; inset:var(--topbar-h) 0 0 0; background:rgba(0,0,0,0.4); z-index:1001}

/* Mobile search overlay */
.mobile-overlay{display:none}
.mobile-overlay.show{
  display:flex; gap:8px;
  position:fixed; top:calc(var(--topbar-h) + 6px); left:12px; right:12px;
  z-index:1002; background:#0b0b0b; padding:8px;
  border:1px solid var(--line); border-radius:8px;
}
.mobile-overlay input{min-width:0; flex:1}

/* ===========================
   HOME LAYOUT (tetap ada agar halaman lain aman)
   =========================== */
.home-layout{
  display:grid;
  grid-template-columns:minmax(220px,25%) 1fr; /* sidebar 25% */
  gap:18px;
  margin-top:25px;
}
.sidebar{background:transparent;border-right:1px solid var(--line);padding-right:12px}
.content{min-width:0}

/* Filters */
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.drawer-head h3{margin:0}
.filters h3{margin:0 0 10px 0}
.filters-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.filter-btn{
  padding:8px 12px;border:1px solid var(--line);
  background:rgba(255,255,255,0.02);color:var(--muted);
  border-radius:999px;cursor:pointer;font-size:14px
}
.filter-btn.active{background:rgba(231,76,60,0.18);border-color:rgba(231,76,60,0.45)}
.filters-actions{margin-top:12px}
.btn-secondary{padding:8px 12px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.btn-secondary.small{padding:6px 10px;font-size:12px}

/* Recently Watched / Horizontal row shared */
.recent-section{margin-bottom:16px}
.recent-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.recent-head h3{margin:0;font-size:18px}

.hrow{
  display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.hrow::-webkit-scrollbar{height:8px}
.hrow::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:6px}
.recent-empty{opacity:.7;font-size:14px}

.hcard{position:relative;flex:0 0 auto;width:200px;scroll-snap-align:start}
.hcard .hcard-link{display:block;color:inherit;text-decoration:none}
.hthumb-wrap{position:relative}
.hthumb{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;display:block;background:#000}
.hplay{position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,0.5); padding:4px 6px; border-radius:6px; color:#fff; font-weight:700; font-size:12px}
.hprog{position:absolute; left:0; right:0; bottom:0; height:6px; background:rgba(255,255,255,0.12); border-radius:0 0 6px 6px; overflow:hidden}
.hprog span{display:block; height:100%; width:0; background:#e74c3c}
.hmeta{font-size:13px; margin-top:6px; line-height:1.25}
.hmeta-title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hmeta-sub{display:flex; gap:8px; opacity:.85; font-size:12px; margin-top:2px}
.hresume{border:1px solid var(--line); border-radius:999px; padding:0 6px}
.hresume.done{opacity:.75}

/* Grid untuk gallery (halaman home) */
.grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:14px}
.grid.small{grid-template-columns:repeat(auto-fit, minmax(160px,1fr))}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));border-radius:8px;padding:6px;overflow:hidden}
.thumblink{display:block;position:relative}
.thumb{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;display:block}
.grid.small .thumb{aspect-ratio:16/9}
.play-overlay{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,0.5);padding:6px 8px;border-radius:6px;color:white;font-weight:700}
.title{font-size:14px;margin:8px 6px 0 6px}
.meta{font-size:12px;opacity:.8;margin:4px 6px}
.pill{border:1px solid var(--line);border-radius:999px;padding:2px 8px}

/* Pagination */
.pagination{display:flex;gap:8px;justify-content:center;align-items:center;margin:18px 0}
.pagination a, .pagination span{padding:6px 10px;border:1px solid var(--line);border-radius:6px}
.pagination .current{background:rgba(255,255,255,0.06);font-weight:700}
.pagination .disabled{opacity:.5}

/* Footer */
.footer{padding:14px;text-align:center;color:rgba(255,255,255,0.4);font-size:13px;border-top:1px solid var(--line)}

/* ===========================
   PLAYER PAGE (KUNCI LEBAR, CENTER, 1 KOLOM)
   =========================== */
.player-page{ --container: 860px; } /* kunci lebar player 860px */
@media (max-width:900px){ .player-page{ --container: 100%; } }

/* samakan lebar container di topbar supaya center */
.player-page .topbar .container{ max-width: var(--container); }

/* layout player: 1 kolom saja */
.player-layout{ display:block; } /* tidak perlu grid 2 kolom */

/* wrapper konten video */
.player-wrap{background:var(--card);padding:12px;border-radius:8px}

/* video tidak melebar melebihi container */
.player-page video{
  width:100%; max-width:100%;
  height:auto; max-height:70vh;
  display:block; background:#000; border-radius:8px;
}

/* playlist sebagai drawer/overlay, bukan kolom */
.playlist{ display:none; }
.playlist.open{
  display:block; position:fixed; inset:var(--topbar-h) 0 0 0;
  background:rgba(10,10,12,0.98); z-index:1002; overflow:auto;
  padding:16px; box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.playlist ul{list-style:none;padding:0;margin:0}
.playlist li{padding:8px;border-radius:6px;margin-bottom:6px;background:rgba(255,255,255,0.02)}
.playlist li.active{outline:2px solid rgba(255,255,255,0.06)}

/* controls */
.player-controls{display:flex;gap:8px;align-items:center;margin:10px 0}

/* Info panel di bawah video */
.info-panel{
  margin-top:10px; padding:12px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line); border-radius:8px;
}
.info-panel .vtitle{margin:0 0 6px 0; font-size:20px; font-weight:800}
.info-panel .vmeta{display:flex; gap:10px; flex-wrap:wrap; font-size:14px; opacity:.95}
.info-panel .vmeta .sep{opacity:.5}
.info-panel .vdownload{text-decoration:underline}
.chips{margin-top:8px; display:flex; gap:8px; flex-wrap:wrap}
.chip{background:rgba(255,255,255,0.06); border:1px solid var(--line); padding:4px 8px; border-radius:999px; font-size:12px}

/* Video Terkait = sama gaya dengan Recently */
.hbadge{
  position:absolute; right:6px; bottom:6px;
  background:rgba(0,0,0,0.65); color:#fff; font-weight:700; font-size:12px;
  padding:3px 6px; border-radius:6px; border:1px solid rgba(255,255,255,0.12);
}

/* ===========================
   MOBILE (≤640px)
   =========================== */
@media (max-width:640px){
  :root{ --topbar-h: 58px; }
  .searchwrap{display:none}                 /* hide search desktop bar */
  .topbar-actions{display:flex}             /* show mobile actions */
  .brand{font-size:18px}

  /* sidebar home jadi drawer */
  .home-layout{grid-template-columns:1fr}
  .sidebar{display:none;border-right:none;padding-right:0}
  .sidebar.open{
    display:block;
    position:fixed; inset:var(--topbar-h) 0 0 0;
    background:rgba(10,10,12,0.98);
    z-index:1002; padding:16px; overflow:auto;
    border-right:none; box-shadow:0 10px 30px rgba(0,0,0,0.35);
  }

  .grid{grid-template-columns:repeat(auto-fit, minmax(160px, 1fr))}
  .hcard{width:170px}

  .info-panel .vtitle{font-size:16px}
}

/* ==== TOAST / POPUP ==== */
.toast-wrap{
  position: fixed;
  top: calc(var(--topbar-h) + 10px);
  right: 12px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none; /* biar klik tembus kecuali tombol close */
}
.toast{
  pointer-events: auto;
  min-width: 260px;
  max-width: min(92vw, 420px);
  display: flex;
  align-items: start;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(20,20,24,0.98);
  color: var(--muted);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  transform: translateX(12px);
  opacity: 0;
  animation: toastIn .22s ease forwards;
}
.toast.ok{ border-left: 4px solid #2ecc71; }
.toast.error{ border-left: 4px solid #e74c3c; }
.toast.warn{ border-left: 4px solid #f1c40f; }
.toast.info{ border-left: 4px solid #3498db; }

.toast .tclose{
  margin-left: auto;
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
}
.toast.hide{
  animation: toastOut .28s ease forwards;
}

@keyframes toastIn{
  from{ transform: translateX(12px); opacity: 0; }
  to  { transform: translateX(0);    opacity: 1; }
}
@keyframes toastOut{
  from{ transform: translateX(0);    opacity: 1; }
  to  { transform: translateX(12px); opacity: 0; }
}

/* ===== Topbar sizing (rapi & proporsional) — FIXED OVERRIDE ===== */
/* Biarkan .topbar tetap fixed (sudah didefinisikan di atas) */

/* Kontainer header proporsional & center */
.topbar .topbar-inner{
  display: flex;
  align-items: center;
  gap: 12px;

  /* Lebar responsif namun tidak “se-lebar layar” */
  width: 92vw;
  max-width: 1100px;                 /* sesuaikan jika perlu */
  margin-inline: auto;
  padding: 10px 14px;

  /* Pastikan tinggi konsisten */
  min-height: var(--topbar-h);
}

/* Brand kompak */
.topbar .brand{
  font-weight: 800;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1;
  white-space: nowrap;
}

/* Search proporsional di tengah */
.topbar .searchwrap{
  flex: 1 1 560px;     /* target lebar “nyaman” */
  max-width: 720px;    /* batasi agar tidak kepanjangan */
  min-width: 260px;
  margin-left: 6px;
}

/* >>> PENTING: JANGAN ubah display di desktop (biarkan default: none) */
.topbar .topbar-actions{
  margin-left: auto;
  gap: 8px;
}

/* Tablet: tata ukuran saja, jangan mengubah display */
@media (max-width: 900px){
  .topbar .topbar-inner{
    width: 95vw;
    max-width: 95vw;     /* sedikit lebih lebar di tablet */
    padding: 10px 10px;
  }
  .topbar .searchwrap{
    flex-basis: auto;
    max-width: none;
  }
}

/* Mobile: baru tampilkan tombol actions & sembunyikan search desktop */
@media (max-width: 640px){
  .topbar .topbar-actions{ display: flex; }  /* tampil di mobile */
  .topbar .searchwrap{ display: none; }      /* sembunyikan search versi desktop */
}
/* ==== SEARCH BAR DI BAWAH TOPBAR (desktop only) ==== */
:root{
  /* tinggi bilah pencarian, ikut dihitung ke padding body (lihat override di bawah) */
  --searchbar-h: 56px;
}

/* Body perlu ruang tambahan untuk searchbar (di desktop) */
@media (min-width: 641px){
  body{
    padding-top: calc(var(--topbar-h) + var(--searchbar-h) + 8px);
  }
}

/* Bilah di bawah topbar */
.topbar-search{
  position: fixed;
  top: var(--topbar-h);
  left: 0; right: 0;
  z-index: 999;
  display: none;                 /* default: sembunyikan (mobile) */
  height: var(--searchbar-h);
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
/* Muncul hanya di desktop */
@media (min-width: 641px){
  .topbar-search{ display: block; }
}

/* Lebar & centering mengikuti topbar */
.topbar-search .topbar-shell{
  width: 92vw;
  max-width: 1100px;           /* samakan dengan .topbar .topbar-inner */
  margin-inline: auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 8px 14px;
}

/* Form di bilah bawah */
.searchline{
  display: flex;
  gap: 8px;
  width: 100%;
}
.searchline input{
  flex: 1 1 auto;
  min-width: 240px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background:#0b0b0b;
  color: var(--muted);
}
.searchline button{
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

/* Karena kita sudah punya bilah pencarian di bawah topbar (desktop),
   sembunyikan search yang ada DI DALAM topbar untuk menghindari duplikat */
@media (min-width: 641px){
  .topbar .searchwrap{ display: none !important; }
}

/* Di mobile: search di bawah topbar tidak muncul, tetap pakai tombol 🔍 + overlay */
@media (max-width: 640px){
  :root{ --searchbar-h: 0px; }   /* tidak menambah tinggi body di mobile */
}
/* ===== [PATCH] Pastikan header fixed (bukan sticky) ===== */
.topbar{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}

/* ===== [PATCH] Search belt (desktop) di bawah header ===== */
.search-belt{
  position: sticky;
  top: calc(var(--topbar-h) + 6px);  /* nempel persis di bawah topbar */
  z-index: 999;                      /* di bawah header, di atas konten */
  display: flex;
  align-items: center;
  gap: 8px;

  background: rgba(10,10,12,0.85);
  -webkit-backdrop-filter: saturate(120%) blur(4px);
  backdrop-filter: saturate(120%) blur(4px);
  border: 1px solid var(--line);
  border-radius: 10px;

  padding: 10px 12px;
  margin: 10px auto 14px;            /* jarak nyaman dari header & konten */
  width: 92vw;
  max-width: 1160px;                 /* proporsional */
}

/* Sembunyikan belt pada mobile; pakai tombol/overlay mobile yang sudah ada */
@media (max-width: 640px){
  .search-belt{ display: none !important; }
}

/* Di desktop: sembunyikan search lama & ikon mobile di dalam header agar tidak dobel */
@media (min-width: 641px){
  .topbar .searchwrap,
  .topbar .topbar-actions{
    display: none !important;
  }
}
/* ======== DESKTOP SEARCH ROW DI BAWAH TOPBAR ======== */
/* Bar pencarian desktop: menempel tepat di bawah header, dengan jarak yang enak */
.search-rail{
  position: sticky;
  top: calc(var(--topbar-h) + 10px);   /* jarak ideal dari topbar */
  z-index: 999;
  width: min(92vw, 1160px);            /* proporsional dengan topbar-inner */
  margin: 10px auto 16px;              /* spasi atas-bawah */
}

/* Bidang input memenuhi lebar; ikon tombol ditempatkan di dalam input (kanan) */
.search-rail .field{
  position: relative;
}

.search-rail input[name="q"]{
  width: 100%;
  padding: 12px 44px 12px 14px;        /* ruang untuk ikon di kanan */
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(10,10,12,0.85);
  -webkit-backdrop-filter: saturate(120%) blur(3px);
  backdrop-filter: saturate(120%) blur(3px);
  color: var(--muted);
  outline: none;
}

.search-rail button[type="submit"]{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #fff;                         /* ikon putih */
  opacity: .9;
}
.search-rail button[type="submit"]:hover{ opacity: 1; }
.search-rail button[type="submit"] svg{ width: 18px; height: 18px; }

/* Mobile: sembunyikan bar pencarian desktop — tetap pakai overlay mobile yang sudah ada */
@media (max-width: 640px){
  .search-rail{ display: none !important; }
}

/* Desktop: sembunyikan komponen search/tombol versi header (agar tidak dobel) */
@media (min-width: 641px){
  .topbar .searchwrap,
  .topbar .topbar-actions{
    display: none !important;
  }
}

/* (Opsional) Jika sebelumnya kamu masih punya .search-belt, matikan saja agar tidak bentrok */
.search-belt{ display:none !important; }
/* ===== CATBAR DI TOPBAR (KANAN) ===== */
/* ===== Topbar: kategori di kanan, non-scrollable & no text selection ===== */
.catbar{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;

  /* kunci supaya TIDAK memicu auto-scroll */
  overflow: hidden;           /* penting */
  white-space: nowrap;        /* 1 baris, tidak membungkus */

  -ms-overflow-style: none;   /* IE/Edge lama */
  scrollbar-width: none;      /* Firefox */
}
.catbar::-webkit-scrollbar{ display: none; } /* WebKit */

.catbar a{
  user-select: none;          /* cegah teks terseleksi saat drag */
  -webkit-user-select: none;
  -ms-user-select: none;
}


/* Sembunyikan catbar di mobile (pakai drawer/overlay milikmu) */
@media (max-width: 640px){
  .catbar{ display: none !important; }
}
/* =============================
   DESKTOP: sembunyikan sidebar
   & jadikan layout 1 kolom
   ============================= */
@media (min-width: 641px){
  .sidebar{
    display: none !important;
  }
  .home-layout{
    grid-template-columns: 1fr !important; /* konten full width */
  }
}
/* =========================================
   DESKTOP: Lebarkan konten + thumbnail lebih besar
   (tempelkan di bagian paling akhir file)
   ========================================= */

/* Lebarkan lebar container secara proporsional di monitor */
@media (min-width: 1025px){
  :root{
    /* Container lebih lebar tapi tetap responsif */
    --container: min(94vw, 1380px);
  }

  /* Topbar mengikuti lebar container baru (proporsional & center) */
  .topbar .topbar-inner{
    width: var(--container);
    max-width: var(--container);
  }

  /* Kurangi padding kiri/kanan container agar “jarak” ke tepi berkurang */
  .container{
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Thumbnail grid lebih besar & rapat secukupnya */
  .grid{
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px; /* sedikit lebih rapat */
  }
  .card{
    padding: 8px;
    border-radius: 10px;
  }
  .thumb{
    aspect-ratio: 16/9;
    border-radius: 10px;
  }
  .title{
    font-size: 15px;
    margin: 10px 6px 0 6px;
  }
  .meta{
    font-size: 12.5px;
  }

  /* (opsional) kartu horizontal “Recently Watched” sedikit lebih besar */
  .hcard{
    width: 240px;
  }
}

/* Layar sangat lebar: tambah sedikit lagi skala card */
@media (min-width: 1600px){
  :root{
    --container: min(92vw, 1600px);
  }
  .grid{
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }
}
/* ============ RAPATKAN JARAK TOPBAR ↔ SEARCH (DESKTOP) ============ */
.topbar {
  --search-gap: 6px; /* atur jarak vertikal sesuai selera (4–10px) */
}

/* Kurangi padding bawah baris atas, supaya lebih rapat ke search-rail */
.topbar .topbar-inner{
  padding-bottom: calc(var(--search-gap) / 2);
}

/* Search-rail: lebar mengikuti topbar, jarak atas kecil, center */
.topbar .search-rail{
  /* samakan lebar dengan topbar-inner mu */
  width: 92vw;
  max-width: 1160px;
  margin: calc(var(--search-gap) / 2) auto 10px;
}

/* Tata isi search-rail agar input memanjang penuh */
.topbar .search-rail .field{
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b0b0b;
  padding: 6px 8px;
}

/* Input full-width */
.topbar .search-rail input[type="text"]{
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--muted);
  font: inherit;
  padding: 6px 4px;
}

/* Tombol pakai ikon kaca pembesar putih, tanpa “Search” text */
.topbar .search-rail button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px;
  line-height: 0;
  color: #fff;                 /* ikon putih */
}
.topbar .search-rail button svg{
  width: 20px;
  height: 20px;
}

/* Sedikit longgar di tablet/HP */
@media (max-width: 900px){
  .topbar .search-rail{
    width: 95vw;
    max-width: 95vw;
    margin: 6px auto 8px;
  }
}
/* ===== Hover glow utk kategori di topbar ===== */
:root{
  --cat-glow: #ffd262;            /* warna lampu hangat */
  --cat-glow-strong: #ffb300;     /* core glow lebih pekat */
}

.topbar .catbar .catlink{
  display: inline-block;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  transition: color .18s ease, text-shadow .18s ease, background-color .18s ease, box-shadow .18s ease;
}

/* garis pemisah sedikit redup */
.topbar .catbar .sep{
  opacity: .6;
  margin: 0 6px;
}

/* efek "lampu" saat hover/focus */
.topbar .catbar .catlink:hover,
.topbar .catbar .catlink:focus-visible{
  color: var(--cat-glow);
  text-shadow:
    0 0 6px rgba(255, 194, 64, .75),
    0 0 14px rgba(255, 180, 40, .55),
    0 0 24px rgba(255, 168, 20, .35);
  background: rgba(255, 183, 28, .06);                 /* halo lembut */
  box-shadow: 0 0 0 1px rgba(255, 183, 28, .18) inset;  /* garis halus */
  outline: none;
}

/* klik/tekan (opsional, rasa tombol) */
.topbar .catbar .catlink:active{
  color: var(--cat-glow-strong);
  transform: translateY(0.5px);
}

/* state aktif (opsional): beri sedikit underline glow */
.topbar .catbar .catlink.active{
  color: var(--cat-glow);
  text-shadow:
    0 0 4px rgba(255, 194, 64, .6),
    0 0 10px rgba(255, 180, 40, .4);
  box-shadow:
    inset 0 -2px 0 rgba(255, 179, 0, .45);
  background: rgba(255, 183, 28, .05);
}
/* Desktop: posisikan video di kiri, bukan center */
@media (min-width: 641px){
  .player-page .player-wrap{
    display: flex;            /* tetap flex supaya rapi */
    justify-content: flex-start; /* dorong ke kiri */
  }
  #vbox{
    margin: 0;                /* hilangkan margin auto yang memusatkan */
    /* opsional: tetap pertahankan lebar cair */
    width: clamp(560px, 70vw, 960px);
  }
}
/* Desktop saja: geser konten player ke kiri, mobile tetap */
@media (min-width: 1024px){
  /* Elemen yang saat ini memusatkan konten adalah <main class="container player-layout"> */
  .player-layout.container{
    margin-left: 0;      /* override .container { margin: 0 auto } */
    margin-right: auto;  /* tetap kasih ruang kanan fleksibel */
    /* opsional: kalau mau tetap ada jarak aman di kiri/kanan: */
    padding-left: 24px;
    padding-right: 24px;
    /* opsional: biarkan melebar penuh area, hapus batasnya
       kalau tidak perlu, baris ini bisa dihapus */
    max-width: none;
  }
}