/* ============================================================
   NOKT HUB — Design Tokens
   Palette: near-black bg, vivid orange accent (streaming/live cue)
   Type: Space Grotesk (display) + Inter (body) + JetBrains Mono (meta)
   Signature: pulsing "live" dot + animated underline reveal on cards
   ============================================================ */
:root{
  --bg:#0A0A0B;
  --surface:#141416;
  --surface-2:#1C1C1F;
  --border:#232326;
  --text:#F5F5F5;
  --text-muted:#9A9A9E;
  --accent:#FF7A1A;
  --accent-dim:#3D2410;
  --accent-glow:rgba(255,122,26,.35);
  --radius:10px;
  --font-display:'Sora',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);font-family:var(--font-body);
  line-height:1.5;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1320px;margin:0 auto;padding:0 20px}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(10,10,11,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
}
.header-row{display:flex;align-items:center;gap:16px;padding:12px 20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-0.01em}
.brand img{width:32px;height:32px;border-radius:6px}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-glow);animation:pulse 2s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 var(--accent-glow)}
  70%{box-shadow:0 0 0 8px rgba(255,122,26,0)}
  100%{box-shadow:0 0 0 0 rgba(255,122,26,0)}
}
.nav-links{display:flex;align-items:center;gap:10px;margin-left:8px}
.nav-btn{
  padding:8px 14px;border-radius:8px;font-size:.9rem;
  font-weight:500;letter-spacing:.005em;
  color:var(--text-muted);border:1px solid transparent
}
.nav-btn:hover{color:var(--text);border-color:var(--border)}
.search-wrap{flex:1;min-width:180px;position:relative}
.search-input{
  width:100%;background:var(--surface);border:1px solid var(--border);
  color:var(--text);padding:9px 14px;border-radius:8px;font-size:.9rem;outline:none;
}
.search-input:focus{border-color:var(--accent)}
.search-input::placeholder{
  color:var(--text-muted);
  font-weight:400;
  opacity:.85;
}
.search-results{
  position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface-2);
  border:1px solid var(--border);border-radius:8px;max-height:360px;overflow-y:auto;
  display:none;z-index:50;
}
.search-results.active{display:block}
.search-result-item{display:flex;gap:10px;padding:10px;border-bottom:1px solid var(--border);align-items:center}
.search-result-item:hover{background:var(--surface)}
.search-result-item img{width:64px;height:38px;object-fit:cover;border-radius:4px}
select.category-select{
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  padding:8px 10px;border-radius:8px;font-size:.85rem;
}
.btn{
  background:var(--accent);color:#0A0A0B;font-weight:600;letter-spacing:.005em;padding:9px 18px;
  border-radius:8px;border:none;cursor:pointer;font-size:.9rem;transition:.15s;
}
.btn:hover{filter:brightness(1.08)}
.btn-outline{background:transparent;border:1px solid var(--accent);color:var(--accent)}
.profile-btn{display:flex;align-items:center;gap:8px}
.profile-btn img{width:32px;height:32px;border-radius:50%;border:1px solid var(--border)}

/* ---------- Hero ---------- */
.hero{position:relative;height:52vh;min-height:340px;overflow:hidden;border-bottom:1px solid var(--border)}
.hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .6s ease;display:flex;align-items:flex-end;
}
.hero-slide.active{opacity:1}
.hero-slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,var(--bg) 0%,rgba(10,10,11,.35) 55%,transparent 100%);
}
.hero-info{position:relative;z-index:2;padding:32px 20px;max-width:640px}
.hero-info .eyebrow{
  color:var(--accent);font-family:var(--font-mono);font-size:.75rem;
  letter-spacing:.05em;font-weight:600;text-transform:uppercase
}
.hero-info h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.6rem, 5vw + .4rem, 2.75rem);
  line-height:1.15;
  letter-spacing:-0.02em;
  margin:8px 0;
  overflow-wrap:break-word;
}
.hero-info p{color:var(--text-muted);font-size:.9rem;margin-bottom:14px}
.hero-dots{position:absolute;bottom:16px;right:20px;z-index:3;display:flex;gap:6px}
.hero-dots span{width:8px;height:8px;border-radius:50%;background:var(--border);cursor:pointer}
.hero-dots span.active{background:var(--accent)}

/* ---------- Sections ---------- */
.section{padding:36px 0}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.section-head h2{
  font-family:var(--font-display);
  font-size:clamp(1.15rem, 2vw + .8rem, 1.45rem);
  font-weight:600;
  letter-spacing:-0.01em;
  margin-top:4px;
}
.section-head .eyebrow{
  font-family:var(--font-mono);color:var(--accent);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.05em;font-weight:600;
}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}

.video-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;position:relative;transition:.2s;
}
.video-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.thumb-wrap{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.thumb-wrap img{width:100%;height:100%;object-fit:cover}
.thumb-wrap::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .25s;
}
.video-card:hover .thumb-wrap::after{transform:scaleX(1)}
.card-body{padding:10px 12px}
.card-title{font-size:.9rem;font-weight:600;line-height:1.3;margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;gap:10px;font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted)}
.tag-chip, .cat-chip{
  display:inline-block;font-size:.75rem;padding:4px 10px;border-radius:999px;
  border:1px solid var(--border);color:var(--text-muted);margin:0 6px 6px 0;
}
.tag-chip:hover,.cat-chip:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- Pagination ---------- */
.pagination{display:flex;gap:6px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.pagination button{
  min-width:36px;height:36px;border-radius:8px;background:var(--surface);
  border:1px solid var(--border);color:var(--text-muted);cursor:pointer;
}
.pagination button.active{background:var(--accent);color:#0A0A0B;border-color:var(--accent)}
.pagination button:hover:not(.active){border-color:var(--accent);color:var(--text)}

/* ---------- Watch page ---------- */
.watch-layout{
  display:grid;grid-template-columns:2fr 1fr;gap:24px;padding:24px 0;
  align-items:start;
}
.player-wrap{width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden}
.nokt-video-el,.nokt-iframe-el{width:100%;height:100%;border:0}
.video-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.2rem, 2.5vw + .7rem, 1.6rem);
  line-height:1.25;
  letter-spacing:-0.01em;
  margin:14px 0 6px;
}
.video-stats{display:flex;gap:16px;color:var(--text-muted);font-family:var(--font-mono);font-size:.8rem;margin-bottom:14px}
.share-row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.share-btn{
  padding:8px 12px;border-radius:8px;border:1px solid var(--border);
  color:var(--text-muted);font-size:.82rem;cursor:pointer;background:var(--surface);
}
.share-btn:hover{border-color:var(--accent);color:var(--accent)}

aside{
  position:sticky;
  top:calc(var(--site-header-h, 68px) + 14px);
}

/* ---------- Like video button ---------- */
#btn-like{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:var(--text-muted);cursor:pointer;font-size:.82rem;
  transition:.15s;
}
#btn-like:hover{border-color:var(--accent);color:var(--accent)}
#btn-like.is-active{
  background:var(--accent-dim);
  border-color:var(--accent);
  color:var(--accent);
}

.comment-box textarea{
  width:100%;background:var(--surface);border:1px solid var(--border);border-radius:8px;
  color:var(--text);padding:10px;min-height:70px;font-family:var(--font-body);resize:vertical;
}
.comment-item{border-bottom:1px solid var(--border);padding:12px 0;display:flex;gap:10px}
.comment-item img{width:34px;height:34px;border-radius:50%}

/* ---------- Comment like/dislike reactions ---------- */
.comment-react{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  padding:4px 8px;border-radius:6px;transition:.15s;
}
.comment-react:hover{color:var(--text)}
.comment-react.is-active{
  background:var(--accent-dim);
  color:var(--accent);
  filter:brightness(1.15);
}

#video-meta, #comments-heading{
  transition:opacity .12s ease;
}
body.comment-focus-active #video-meta,
body.comment-focus-active #comments-heading{
  opacity:0 !important;
  pointer-events:none;
  height:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

.comment-box{
  position:relative;
  z-index:60;
  border-radius:var(--radius);
  transition:box-shadow .25s ease;
  margin-bottom:8px;
}
.comment-box.is-focused{
  position:fixed;
  background:var(--surface);
  border:1px solid var(--border);
  padding-top:14px;
  padding-right:calc(14px + env(safe-area-inset-right));
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
  padding-left:calc(14px + env(safe-area-inset-left));
  box-shadow:0 16px 36px rgba(0,0,0,.55);
  animation:comment-zoom-in .22s ease forwards;
}
@keyframes comment-zoom-in{
  from{ transform:scale(.94); opacity:.5; }
  to{ transform:scale(1); opacity:1; }
}

#btn-comment{
  margin-top:8px;
  display:inline-block;
}

#sort-newest, #sort-oldest{
  margin-top:2px;
}

@media(max-width:900px){
  .watch-layout{grid-template-columns:1fr}
  aside{position:static;top:auto}
}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border);padding:36px 0;margin-top:40px;color:var(--text-muted);font-size:.85rem}
.footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px}
.footer-links a{margin-right:14px}
.footer-links a:hover{color:var(--accent)}

/* Accessibility */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(max-width:480px){
  .header-row{gap:10px;padding:10px 14px}
  .brand{font-size:1.1rem}
  .search-input{font-size:.85rem;padding:8px 12px}
  .nav-btn{padding:7px 10px;font-size:.85rem}
  .hero-info{padding:24px 16px}
  .hero-info .eyebrow{font-size:.68rem}
}

@media(max-width:768px){
  .section-head{align-items:flex-start;flex-direction:column;gap:4px}
  .section-head .nav-btn{align-self:flex-end;margin-top:-28px}
  .card-title{font-size:.85rem}
}

.comment-toggle-arrow{
  display:inline-block;
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid var(--text-muted);
  transition:transform .2s ease;
  vertical-align:middle;
}
.comment-toggle-header[aria-expanded="true"] .comment-toggle-arrow{
  transform:rotate(180deg);
}
/* ============================================================
   NOKT HUB — Kategori: chip-row scroll horizontal
   Tempel blok ini ke css/style.css (di bagian bawah, tidak
   menimpa apapun yang sudah ada).
   ============================================================ */
.catnav-row{
  display:flex;gap:8px;overflow-x:auto;
  padding:0 14px 12px;
  -webkit-overflow-scrolling:touch;
  /* FIX: scroll-snap DIHAPUS di sini. Kombinasi scroll-snap dengan
     chip "Semua" yang position:sticky ternyata memicu perilaku browser
     yang tidak konsisten -- begitu halaman dimuat, browser bisa otomatis
     "meloncat" menggeser baris ini ke titik snap berikutnya (karena
     elemen sticky sering tidak dihitung valid sebagai titik snap),
     padahal tidak ada kode kita yang menyuruh itu. Tanpa scroll-snap,
     geser jadi murni bebas & polos, dan posisi awal (scrollLeft:0) yang
     kita paksa lewat JS benar-benar dipatuhi. */
  /* FIX tambahan: matikan "scroll anchoring" bawaan browser -- fitur ini
     otomatis menggeser posisi scroll untuk "mengkompensasi" perubahan
     ukuran konten (mis. kalau chip ditambahkan belakangan setelah render
     pertama). Ini penyebab paling mungkin dari baris kategori yang terus
     "tertarik ke kiri" sendiri. Baris ini mematikan koreksi otomatis itu
     sepenuhnya, dikombinasikan dengan categories.js yang sekarang
     merender semua chip sekaligus (bukan bertahap). */
  overflow-anchor:none;
}
.catnav-row::-webkit-scrollbar{display:none}
.catnav-row{scrollbar-width:none}

.catnav-chip{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
  padding:7px 13px;border-radius:20px;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text-muted);font-size:.78rem;font-weight:500;
  cursor:pointer;user-select:none;white-space:nowrap;
  text-decoration:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.catnav-chip svg{
  width:13px;height:13px;flex-shrink:0;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), stroke .18s ease;
}
.catnav-chip:active{transform:scale(.94)}
.catnav-chip.active{
  background:var(--accent);border-color:var(--accent);color:#0A0A0B;
}
.catnav-chip.active svg{transform:rotate(-8deg) scale(1.1);stroke:#0A0A0B}
.catnav-chip:not(.active):hover{border-color:var(--accent);color:var(--text)}
.catnav-chip:not(.active):hover svg{transform:translateY(-1px)}

.catnav-chip.active[data-cat="all"] svg{animation:nokt-catnav-spin 3s linear infinite}
@keyframes nokt-catnav-spin{to{transform:rotate(352deg)}}

/* Chip "Semua" dibuat sticky (menempel statis di kiri) -- chip kategori
   lain (Bola, Cantik, Play vid, dst) akan lewat/masuk DI BAWAHNYA saat
   baris digeser ke kiri, bukan ikut geser bersamaan. TIDAK ada perubahan
   warna sama sekali di sini -- chip ini tetap pakai warna default yang
   sama persis dengan .catnav-chip / .catnav-chip.active biasa (var(--surface)
   saat non-aktif, var(--accent) saat aktif), cukup warna itu sudah solid/
   opaque jadi otomatis "menutupi" chip lain yang lewat di baliknya. */
.catnav-chip[data-cat="all"]{
  position:sticky;
  left:0;
  z-index:5;
}