/* ====== RESET & BASE ====== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;margin:0}
img{display:block;max-width:100%;height:auto}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  background:#000;color:#fff;line-height:1.45;
}

/* ====== APPBAR / TOPBAR ====== */
.appbar,.topbar{
  position:sticky;top:0;z-index:50;
  background:#02060e;border-bottom:1px solid #0f172a;
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
}
.appbar .brand,.topbar .brand{display:flex;align-items:center;flex:0 0 auto;min-width:0}
.appbar .brand img,.topbar .brand img{
  height:24px;width:auto;max-width:150px;
  display:block;object-fit:contain;-webkit-user-drag:none;
}
@media(max-width:480px){
  .appbar .brand img,.topbar .brand img{height:22px;max-width:120px}
}
@media(min-width:768px){
  .appbar .brand img,.topbar .brand img{height:26px;max-width:170px}
}
@media(min-width:1024px){
  .appbar .brand img,.topbar .brand img{height:28px;max-width:180px}
}
/* Safari/iOS */
@supports (-webkit-touch-callout:none){
  .appbar .brand img,.topbar .brand img{height:22px;max-width:120px}
}

/* ====== SEARCH ====== */
.searchWrap{flex:1;min-width:0}
.search{position:relative;border-radius:999px;background:#0b1c38;padding:8px 12px}
.search input{width:100%;border:0;outline:0;background:transparent;color:#e5f0ff;font-size:15px;padding-left:28px}
.search .glass{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;border:2px solid #cbe1ff;border-radius:999px}
.search .glass::after{content:"";position:absolute;width:8px;height:2px;background:#cbe1ff;right:-6px;bottom:-2px;transform:rotate(35deg)}

/* ====== FEATURED (HOME) ====== */
/*.featured{padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.06)}
/*.featured .vidBox{width:100%;height:64vh;background:#000;overflow:hidden;position:relative}
/*.featured video{width:100%;height:100%;object-fit:cover;display:block}
/*.playBadge{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
/*.playBadge span{width:80px;height:80px;border:5px solid #fff;border-radius:999px;background:rgba(0,0,0,.25);display:grid;place-items:center}
/*.playBadge i{width:0;height:0;border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
/*.meta{padding:14px}
.meta .ttl{font-weight:900;font-size:22px}
.meta .sub{margin-top:6px;color:#d1d5db;font-size:14px}

/* ====== FEATURED (HOME) ====== */
:root {
  --featuredH: 45vh;   /* tinggi default lebih pendek */
}

.featured {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.featured .vidBox {
  width: 100%;
  height: var(--featuredH);
  background: #000;
  overflow: hidden;
  position: relative;
}

.featured video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.playBadge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.playBadge span {
  width: 80px;
  height: 80px;
  border: 5px solid #fff;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  display: grid;
  place-items: center;
}

.playBadge i {
  width: 0;
  height: 0;
  border-left: 22px solid #fff;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 6px;
}

.meta {
  padding: 14px;
}

.meta .ttl {
  font-weight: 900;
  font-size: 22px;
}

.meta .sub {
  margin-top: 6px;
  color: #d1d5db;
  font-size: 14px;
}

/* Tinggi lebih besar di layar lebih lebar */
@media (min-width: 768px){
  :root { --featuredH: 55vh; }
}

@media (min-width: 1024px){
  :root { --featuredH: 60vh; }
}


/* ====== GRID 3 KOLOM (default) ====== */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:14px}
.card{background:#0a0a0a;border-radius:8px;overflow:hidden}
.card .thumb{width:100%;aspect-ratio:9/12;object-fit:cover}
.card .cap{padding:8px;font-weight:600;font-size:13px;min-height:42px}

/* ====== SLIDER 3 KOLOM (opsi swipe) ====== */
.gridSlide{padding:18px 0 8px}
.gridSlide .rail{
  display:flex;gap:18px;overflow-x:auto;padding:0 18px 10px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain;
}
.gridSlide .rail::-webkit-scrollbar{display:none}
.gridSlide .card{flex:0 0 calc((100% - 36px)/3);background:#0a0a0a;border-radius:10px;overflow:hidden;text-decoration:none;color:#fff;scroll-snap-align:start}
.gridSlide .thumb{width:100%;aspect-ratio:9/12;object-fit:cover;display:block}
.gridSlide .cap{padding:8px 10px;font-weight:600;font-size:14px;min-height:46px}
@supports (display:grid){
  .gridSlide .rail{display:grid;grid-auto-flow:column;gap:18px;grid-auto-columns:calc((100% - 36px)/3)}
  .gridSlide .card{flex:initial}
}
@media (hover:hover){
  .gridSlide .card{transition:transform .2s,box-shadow .2s}
  .gridSlide .card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.35)}
}

/* ====== VIDEO PAGE (scroll snap) ====== */
:root{ --footerH: 82px; }                        /* tinggi footer aktual */
.videoPage{background:#000;color:#fff;min-height:100vh;padding-bottom:var(--footerH)}
.shortsWrap{height:calc(100svh - var(--footerH));overflow-y:scroll;scroll-snap-type:y mandatory}
.short{scroll-snap-align:start;height:calc(100svh - var(--footerH));display:flex;align-items:center;justify-content:center}
@supports (height:100dvh){
  .shortsWrap,.short{height:calc(100dvh - var(--footerH))}
}
.short .vidBox{width:100%;height:100%;position:relative;background:#000;overflow:hidden}
.short video{width:100%;height:100%;object-fit:cover;display:block}

/* Play badge */
.vPlay{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.vPlay span{width:80px;height:80px;border:5px solid #fff;border-radius:999px;background:rgba(0,0,0,.25);display:grid;place-items:center}
.vPlay i{width:0;height:0;border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:6px}
.vPlay.hidden{display:none}

/* Tombol aksi */
.actions{position:absolute;right:10px;bottom:calc(var(--footerH) + 14px);z-index:6;display:flex;flex-direction:column;gap:10px}
.act{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:#fff}
.act .ico{width:40px;height:40px;border-radius:10px;background:rgba(0,0,0,.35);display:grid;place-items:center;border:2px solid rgba(255,255,255,.9)}
/* ==== ICON ACTIONS (modern white SVG) ==== */
.ico.like::before,
.ico.cmt::before,
.ico.share::before,
.ico.save::before{
  content:"";
  display:block;
  width:20px;
  height:20px;
  background:#fff;
  mask-size:contain;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  -webkit-mask-repeat:no-repeat;
}

/* like (heart) */
.ico.like::before{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
}

/* comment (bubble) */
.ico.cmt::before{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M20 2H4C2.9 2 2 2.9 2 4v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>');
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M20 2H4C2.9 2 2 2.9 2 4v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>');
}

/* share (arrow) */
.ico.share::before{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a3.27 3.27 0 000-1.39l7.02-4.11A3 3 0 0018 7.91a3 3 0 100-6 3 3 0 00-2.91 2.09l-7.02 4.11a3.27 3.27 0 000 1.39l7.02 4.11A3 3 0 0018 16.08z"/></svg>');
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a3.27 3.27 0 000-1.39l7.02-4.11A3 3 0 0018 7.91a3 3 0 100-6 3 3 0 00-2.91 2.09l-7.02 4.11a3.27 3.27 0 000 1.39l7.02 4.11A3 3 0 0018 16.08z"/></svg>');
}

/* save (bookmark) */
.ico.save::before{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"/></svg>');
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"/></svg>');
}
.act .num{margin-top:4px;font-size:12px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.act .txt{margin-top:4px;font-size:12px}
.saveBtn.active .ico{border-color:#34d399;background:rgba(52,211,153,.15)}
.saveBtn.active .txt{color:#34d399}

/* Overlay judul & deskripsi pada item video */
.metaOverlay{
  position:absolute;left:12px;right:12px;bottom:8px;z-index:5;
  padding:12px 8px 6px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.45) 35%,rgba(0,0,0,.75) 100%);
}
.metaOverlay .ttl{font-size:20px;font-weight:800;cursor:pointer}
.metaOverlay .sub{margin-top:4px;color:#e5e7eb;font-size:12px}
.metaOverlay .desc{display:none;margin-top:6px;font-size:13px;line-height:1.4;color:#f1f5f9}

/* ====== WATCH PAGE ====== */
body.watchPage{ padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
.watchPage main{ position: relative !important; overflow: visible !important; }
.watchPage main > video{ width:100%; height:100svh; object-fit:cover; display:block; }
.commentBox{ position:relative; z-index:1; background:#0b1020; padding:16px; color:#fff; border-top:1px solid rgba(255,255,255,.08); } /* override 100vh */
.watchPage .actions{position:absolute;right:10px;bottom:100px;z-index:5;display:flex;flex-direction:column;gap:10px}
.watchPage .metaOverlay{
  position:absolute;left:12px;right:12px;bottom:64px;z-index:4;
  padding:12px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.7));
}
.watchPage .metaOverlay .ttl{font-weight:800;font-size:20px;cursor:pointer}
.watchPage .metaOverlay .sub{opacity:.8;font-size:14px}
.watchPage .metaOverlay .desc{display:none;margin-top:6px;font-size:14px;line-height:1.4;color:#f1f5f9}

/* ====== TOMBOL SUARA ====== */
.soundBtn{
  position:absolute;top:10px;right:10px;z-index:7;
  background:rgba(0,0,0,.45);border:1.5px solid rgba(255,255,255,.85);
  color:#fff;font-size:12px;border-radius:10px;padding:6px 10px;backdrop-filter:blur(2px);user-select:none;
}
.soundBtn[data-state="on"]::before{content:"🔊 "}
.soundBtn[data-state="off"]::before{content:"🔈 "}

/* ====== FOOTER ====== */
.siteFooter{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:linear-gradient(0deg,#061326,#0b2150);
  border-top:1px solid rgba(255,255,255,.08);
  padding:10px 16px 14px;display:flex;align-items:center;gap:18px;
}
.navBtn{display:flex;align-items:center;gap:10px;color:#fff;font-size:16px;font-weight:600;text-decoration:none}
.navBtn .ico{width:30px;height:30px;border-radius:10px;background:#0b4ea2;display:grid;place-items:center;box-shadow:0 4px 18px rgba(11,78,162,.35)}
.navBtn .ico::before{content:"";display:block;width:20px;height:20px;mask-size:contain;mask-repeat:no-repeat;background:#fff}
.home .ico::before{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z"/></svg>')}
.video .ico::before{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M4 4h12a2 2 0 012 2v3l4-2.5V17L18 14.5V18a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z"/></svg>')}
.newsPortal{margin-left:auto}
.newsPortal img{height:28px;display:block}

/* ====== RESPONSIVE ====== */
@media(min-width:768px){
  .featured .vidBox{height:70vh}
  .meta .ttl{font-size:28px}
  .metaOverlay .ttl{font-size:24px}
  .watchPage .metaOverlay .ttl{font-size:24px}
  .newsPortal img{height:35px}
}

/* ==== FORCE VISIBLE KOMENTAR (OVERRIDE) ==== */

/* Pastikan halaman bisa scroll dan tidak mengunci overflow */
html, body { overflow-y: auto !important; }

/* Beri ruang nyata setelah video full-screen */
.watchPage main { 
  position: relative !important;
  overflow: visible !important;
  margin-bottom: 160px;            /* ruang agar section komentar tidak “nempel” video */
}

/* Video tetap tinggi layar, tapi konten berikutnya boleh tampil */
.watchPage main > video{
  width:100%;
  height:100svh;                   /* jangan 100vh, 100svh lebih stabil di iOS */
  object-fit:cover;
  display:block;
}

/* Pastikan section komentar SELALU tampil dan tidak ketimpa overlay/footer */
#komentar.commentBox{
  display:block !important;
  position: relative !important;
  z-index: 2 !important;           /* di bawah overlay video (z4/z5), tapi di atas background */
  margin-top: 0 !important;
  padding-bottom: 90px;            /* ruang tambahan agar tidak ketutup footer fixed */
}

/* Untuk amankan, kasih jarak bawah halaman dari footer fixed */
body.watchPage{
  padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
}

/* ===== Bottom-sheet Komentar (Overlay) ===== */
.csheet-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  z-index: 9990;            /* di atas footer & actions */
  display: none;
}
.csheet-backdrop.open{ display:block; }

.csheet{
  position: fixed; left: 0; right: 0;
  bottom: 0;
  z-index: 9991;
  background: #0b1020;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -8px 30px rgba(0,0,0,.5);
  transform: translateY(100%);
  transition: transform .28s ease;
  /* tinggi default: 70% layar, aman di iOS */
  height: min(70svh, 80dvh);
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
.csheet.open{ transform: translateY(0%); }

/* header sheet */
.csheet-head{
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(180deg,#0b1020,#0b1020dd);
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 10px;
}
.csheet-drag{
  width: 44px; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,.25);
  margin: 6px auto 10px;
}
.csheet-title{ font-weight: 800; font-size: 16px; }
.csheet-close{
  margin-left: auto; background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: 10px;
  padding: 6px 10px; font-size: 14px;
}

/* isi scrollable */
.csheet-body{
  overflow: auto; -webkit-overflow-scrolling: touch;
  padding: 10px 14px 14px;
  flex: 1 1 auto;
}

/* form komentar di dalam sheet */
.csheet form{ display: grid; gap: 10px; margin-bottom: 12px; }
.csheet textarea{
  width: 100%; min-height: 90px; border-radius: 12px;
  border: 1px solid #243148; background: #0c1428;
  color: #fff; padding: 10px 12px; resize: vertical;
}
.csheet button[type="submit"]{
  background: #1463f3; color: #fff; border: 0;
  border-radius: 12px; padding: 10px 14px; font-weight: 700;
}

/* daftar komentar */
.cItem{ padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.cHead{ font-size: 12px; opacity: .8; margin-bottom: 4px; }
.cBody{ font-size: 14px; line-height: 1.45; color: #f3f6ff; }

/* Saat sheet terbuka, kunci scroll body (mencegah latar ikut geser) */
body.sheet-open{ overflow: hidden; }

/* === KOMENTAR ala Shorts YouTube === */
.commentSheet-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:9990;
  display:none;
}
.commentSheet-backdrop.open{display:block;}

.commentSheet{
  position:fixed;left:0;right:0;bottom:0;z-index:9991;
  background:#0b1020;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
  box-shadow:0 -8px 30px rgba(0,0,0,.5);
  transform:translateY(100%);
  transition:transform .3s ease;
  height:min(75svh,80dvh);
  display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}
.commentSheet.open{transform:translateY(0);}

.commentSheet .drag{
  width:40px;height:5px;border-radius:999px;
  background:rgba(255,255,255,.3);
  margin:8px auto;
}

.commentSheet .head{
  padding:0 16px 8px;
  display:flex;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.commentSheet .title{font-weight:700;font-size:15px;}
.commentSheet .closeBtn{margin-left:auto;background:none;border:0;color:#fff;font-size:14px}

.commentSheet .body{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:12px 16px;
}

.commentSheet form{display:grid;gap:8px;margin-bottom:12px}
.commentSheet textarea{
  width:100%;min-height:70px;border-radius:10px;
  border:1px solid #243148;background:#0c1428;color:#fff;
  padding:10px;resize:vertical;
}
.commentSheet button[type=submit]{
  background:#1463f3;color:#fff;border:0;border-radius:10px;
  padding:10px;font-weight:700;
}

.cItem{border-bottom:1px solid rgba(255,255,255,.08);padding:8px 0}
.cHead{font-size:12px;color:#cbd5e1;margin-bottom:4px}
.cBody{font-size:14px;color:#f3f6ff;line-height:1.4}

/* ===== Bottom-sheet Komentar ala Shorts (SATU-SATUNYA AKTIF) ===== */
.commentSheet-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  z-index:9990;
  display:none;
}
.commentSheet-backdrop.open{ display:block; }

.commentSheet{
  position:fixed; left:0; right:0; bottom:0; z-index:9991;
  background:#0b1020;
  border-top-left-radius:16px; border-top-right-radius:16px;
  box-shadow:0 -8px 30px rgba(0,0,0,.5);
  transform:translateY(100%);
  transition:transform .3s ease;
  height:min(75svh,80dvh);
  display:flex; flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}
.commentSheet.open{ transform:translateY(0); }

.commentSheet .drag{
  width:40px; height:5px; border-radius:999px;
  background:rgba(255,255,255,.3);
  margin:8px auto;
}
.commentSheet .head{
  padding:0 16px 8px;
  display:flex; align-items:center;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.commentSheet .title{ font-weight:700; font-size:15px; }
.commentSheet .closeBtn{
  margin-left:auto; background:none; border:0; color:#fff; font-size:14px;
}

.commentSheet .body{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:12px 16px;
}
.commentSheet form{ display:grid; gap:8px; margin-bottom:12px; }
.commentSheet textarea{
  width:100%; min-height:70px; border-radius:10px;
  border:1px solid #243148; background:#0c1428; color:#fff;
  padding:10px; resize:vertical;
}
.commentSheet button[type=submit]{
  background:#1463f3; color:#fff; border:0; border-radius:10px;
  padding:10px; font-weight:700;
}

.cItem{ border-bottom:1px solid rgba(255,255,255,.08); padding:8px 0; }
.cHead{ font-size:12px; color:#cbd5e1; margin-bottom:4px; }
.cBody{ font-size:14px; color:#f3f6ff; line-height:1.4; }

/* Saat sheet terbuka, kunci scroll body agar latar tidak ikut geser */
body.sheet-open{ overflow: hidden; }

/* === Override tinggi featured (supaya grid 3 kolom langsung terlihat) === */
.homePage .featured .vidBox { height: 45svh !important; }

@media (min-width: 768px){
  .homePage .featured .vidBox { height: 55svh !important; }
}
@media (min-width: 1024px){
  .homePage .featured .vidBox { height: 60svh !important; }
}

/* ==== Comments: Skeleton & Empty State ==== */
.cSkeleton{ display:grid; gap:12px; }
.cSk-row{ display:grid; gap:6px; }
.cSk-line{
  height:12px;
  border-radius:6px;
  background: linear-gradient(90deg, #101826 0%, #17223a 50%, #101826 100%);
  background-size: 200% 100%;
  animation: sk-anim 1.2s ease-in-out infinite;
}
.cSk-line.short{ width:40%; }
.cSk-line.med{   width:70%; }
.cSk-line.long{  width:100%; }
@keyframes sk-anim {
  0%   { background-position: 200% 0; }
  100% { background-position: 0 0; }
}

.cEmpty{
  text-align:center;
  color:#b7c2e6;
  font-size:14px;
  opacity:.9;
  padding:12px 0 4px;
}

/* ==== Action Buttons: loading/disabled ==== */
.act.is-loading{ opacity:.6; pointer-events:none; }
.act.is-loading .ico::after{
  content:"";
  width:12px;height:12px;border:2px solid rgba(255,255,255,.7);
  border-top-color:transparent;border-radius:999px;
  display:block; animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.act.error{ animation: shook .25s ease-in-out 2; }
@keyframes shook{
  0%,100%{ transform:translateX(0) }
  25%{ transform:translateX(-3px) }
  75%{ transform:translateX(3px) }
}

/* ==== Toast (notifikasi ringan sudut atas) ==== */
.toast{
  position: fixed;
  top: env(safe-area-inset-top, 0) + 10px;
  right: 12px;
  z-index: 10000;
  background: #122448;
  color: #eaf1ff;
  border: 1px solid #294a99;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity: 1; transform: translateY(0); }

/* ===== AUTH PAGES ===== */
.authBody{ background:#000; color:#eaf1ff; }
.authWrap{
  min-height:calc(100svh - 72px);
  display:grid; place-items:start center;
  padding:24px 14px 40px;
  background: radial-gradient(1200px 500px at 50% -150px, #0b2150 0%, #02060e 70%);
}
.authCard{
  width:min(520px, 100%);
  background:#0b1020;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  padding:20px 16px 18px;
}
@media(min-width:480px){ .authCard{ padding:28px 22px 22px; } }

.authTitle{ font-size:22px; font-weight:800; margin-bottom:14px; letter-spacing:.2px; }

.alert{ padding:10px 12px; border-radius:10px; font-size:14px; margin:8px 0 14px; }
.alert.err{ background:#2b1c1c; color:#ffd6d6; border:1px solid #5a2a2a; }

.authForm .label{ font-size:14px; color:#c7d2fe; margin:8px 2px 6px; display:block; }
.input{
  width:100%; background:#0c1428; color:#fff;
  border:1px solid #243148; border-radius:12px;
  padding:12px 12px; font-size:15px; outline:none;
}
.input:focus{ border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.2); }
.inputGroup{ position:relative; }
.eyeBtn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:10px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);
}
.eyeBtn::before{
  content:"👁️"; display:block; font-size:16px; line-height:36px; text-align:center;
}
.eyeBtn[data-show="1"]::before{ content:"🙈"; }

.row{ display:flex; align-items:center; gap:10px; margin:10px 2px 12px; }
.row.between{ justify-content:space-between; }
.check{ font-size:14px; color:#cbd5e1; }
.check input{ vertical-align:middle; margin-right:6px; }

.btnPrimary{
  background:#1463f3; color:#fff; border:0; border-radius:12px;
  padding:12px 14px; font-weight:800; letter-spacing:.3px;
  box-shadow:0 6px 22px rgba(20,99,243,.35);
  cursor:pointer;
}
.btnPrimary:hover{ filter:brightness(1.05); }
.btnPrimary.block{ width:100%; }
.muted{ color:#9fb0d7; font-size:14px; }
.center{ text-align:center; }
.mt12{ margin-top:12px; }
.link{ color:#8ab4ff; text-decoration:none; }
.link:hover{ text-decoration:underline; }

/* ===== ADMIN / CMS POLISH ===== */

/* Container */
.container{
  max-width: 980px;
  margin: 24px auto;
  padding: 0 16px;
}

/* Headings */
.container h2{
  font-size: 22px;
  font-weight: 800;
  margin: 28px 0 12px;
}

/* Alerts */
.alert{
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0 16px;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid transparent;
}
.alert.ok{
  background: #0d1f3d;
  border-color: #1e429f;
  color: #e6efff;
}
.alert.err{
  background: #2a0f14;
  border-color: #a61b2b;
  color: #ffd8dc;
}

/* Form wrapper */
.formWrap{
  background: linear-gradient(180deg,#0b0f1a,#0b1020);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* 2-col row on wide screens */
.formWrap .row{
  display: grid;
  gap: 12px;
}
@media (min-width: 700px){
  .formWrap .row{ grid-template-columns: 1fr 1fr; }
}

/* Labels & inputs */
.formWrap label{
  display:block;
  font-size: 13px;
  opacity:.85;
  margin: 10px 0 6px;
}
.input{
  width:100%;
  border:1px solid #1f2b44;
  background:#0c1428;
  color:#eaf1ff;
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  outline:0;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.input:focus{
  border-color:#2b63ff;
  box-shadow:0 0 0 3px rgba(43,99,255,.2);
}

/* Checkbox line */
.formWrap input[type="checkbox"]{
  inline-size:auto;
  margin-right:6px;
}

/* Buttons */
.btnPrimary{
  appearance:none;
  border:0;
  background:#2563eb;
  color:#fff;
  font-weight:800;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(37,99,235,.35);
  transition:transform .05s ease, filter .15s ease;
}
.btnPrimary:active{ transform:translateY(1px); }
.btnPrimary:disabled{
  opacity:.6;
  cursor:not-allowed;
  filter:saturate(.6);
}

/* Small link badge (e.g. Buka / Keluar) */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  color:#a8c7ff;
  text-decoration:none;
  padding:8px 10px;
  border-radius:10px;
  background:#0c172e;
  border:1px solid rgba(255,255,255,.08);
  margin-left:8px;
}
.badge:hover{ color:#d7e6ff; }

/* Table */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#0b0f1a;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
}
.table th,
.table td{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  text-align:left;
  font-size:14px;
}
.table th{
  background:linear-gradient(180deg,#0f1830,#0c1428);
  font-weight:800;
  color:#e5edff;
}
.table tr:last-child td{ border-bottom:0; }
.table tbody tr:hover td{
  background:#0f1a33;
}

/* Status chip untuk kolom "Publik" */
.table td:nth-child(2){
  font-weight:700;
}
.table td:nth-child(2)::before{
  content:"";
  display:inline-block;
  width:8px;height:8px;border-radius:999px;
  margin-right:8px;
  vertical-align:middle;
  background:#ef4444; /* default Tidak */
}
.table td:nth-child(2):has(> :where(span,div):contains("Ya")),
.table td:nth-child(2):contains("Ya"){
  color:#86efac;
}
.table td:nth-child(2):contains("Ya")::before{ background:#22c55e; }

/* Helper: truncate long titles on small screens */
@media (max-width: 460px){
  .table td:first-child{
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Topbar tweaks so admin looks neat */
.topbar{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(2,6,14,.9);
  backdrop-filter: blur(6px) saturate(140%);
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar .brand img{ height: 28px; }
.topbar .searchWrap{
  margin-left: 12px;
  max-width: 520px;
}
.topbar .searchWrap input{
  border-radius: 999px;
  background: #0b1c38;
  padding: 8px 14px 8px 34px;
}
.topbar .searchIcon{
  position:absolute; width:14px; height:14px;
  border:2px solid #cbe1ff; border-radius:50%;
  left: 16px; top: 50%; transform: translateY(-50%);
}
.topbar .searchIcon::after{
  content:""; position:absolute; width:8px; height:2px;
  background:#cbe1ff; right:-7px; bottom:-2px; transform:rotate(35deg)
}

/* === Perbaikan tampilan CMS Admin === */

/* Branding */
.container h2 {
  margin-top: 32px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #eaf1ff;
}

/* Tombol Aksi */
.btnPrimary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}
.btnPrimary:hover {
  filter: brightness(1.1);
}
.btnDanger {
  background: #dc2626;
  color: #fff;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
}
.btnDanger:hover { background: #b91c1c; }

/* Tombol badge (Buka, Keluar) */
.badge {
  background: #1e293b;
  color: #93c5fd;
}
.badge:hover {
  background: #334155;
  color: #bfdbfe;
}

/* Table improvements */
.table th {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.table td {
  font-size: 14px;
  color: #e5e7eb;
}
.table td a.badge {
  font-size: 12px;
  padding: 6px 8px;
}

/* Status Publik chip */
.table td:nth-child(2) {
  font-weight: 600;
}
.table td:nth-child(2):contains("Ya") {
  color: #22c55e;
}
.table td:nth-child(2):contains("Tidak") {
  color: #ef4444;
}

/* Input File */
input[type="file"] {
  border: 1px solid #1f2b44;
  border-radius: 10px;
  padding: 6px;
  background: #0c1428;
  color: #fff;
  font-size: 13px;
}

/* ====== ADMIN TOP BAR (rapi & responsif) ====== */
body.adminShell .adminTop{
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 14px;
  background: rgba(3,10,22,.92);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Brand: logo + teks kecil */
body.adminShell .adminTop .brand{
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 0; text-decoration: none; color: #eaf1ff;
  white-space: nowrap;
}
body.adminShell .adminTop .brand img{
  height: 28px; width: auto; display: block; object-fit: contain;
}
body.adminShell .adminTop .dashTitle{
  font-weight: 800; font-size: 14px; opacity: .9;
}

/* Nav ditengah, tidak mudah “tumpuk” */
body.adminShell .adminTop .adminNav{
  flex: 1 1 auto; min-width: 0;
  display: flex; justify-content: center; gap: 16px;
}
body.adminShell .adminTop .adminNav .navLink{
  color: #dbe8ff; text-decoration: none; font-weight: 600; font-size: 14px;
  padding: 6px 10px; border-radius: 10px;
}
body.adminShell .adminTop .adminNav .navLink:hover{
  background: rgba(255,255,255,.06);
}

/* Area user di kanan */
body.adminShell .adminTop .adminUser{
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
}
body.adminShell .adminTop .roleBadge{
  background: #183463; color:#cfe0ff; border:1px solid #254c8f;
  padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 800;
}
body.adminShell .adminTop .btnDanger{
  background: #6a1e1e; border: 1px solid #8b2c2c; color: #fff;
  text-decoration: none; padding: 8px 14px; border-radius: 12px;
  font-weight: 700; line-height: 1;
}
body.adminShell .adminTop .btnDanger:hover{
  background:#7a2323; border-color:#a03636;
}

/* ====== Breakpoint mobile ====== */
@media (max-width: 640px){
  body.adminShell .adminTop{
    flex-wrap: wrap; gap: 8px; padding: 10px 12px;
  }
  body.adminShell .adminTop .brand img{ height: 22px; }
  body.adminShell .adminTop .dashTitle{ display: none; } /* hemat ruang */
  body.adminShell .adminTop .adminNav{
    order: 3; width: 100%;
    justify-content: flex-start; gap: 12px;
    overflow-x: auto; scrollbar-width: none;
  }
  body.adminShell .adminTop .adminNav::-webkit-scrollbar{ display: none; }

  body.adminShell .adminTop .btnDanger{
    padding: 8px 12px; font-size: 13px;
  }
}

/* === OVERRIDE IKON PUTIH MODERN === */
.ico.like::before,
.ico.cmt::before,
.ico.share::before,
.ico.save::before{
  content:"" !important; /* matikan emoji lama */
  display:block;
  width:22px;height:22px;
  background:#fff;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
          mask-position:center;
          mask-repeat:no-repeat;
          mask-size:contain;
  margin:auto;
}

/* LIKE (heart) */
.ico.like::before{
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
}

/* COMMENT (bubble) */
.ico.cmt::before{
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20 2H4a2 2 0 00-2 2v16l4-4h14a2 2 0 002-2V4a2 2 0 00-2-2z"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20 2H4a2 2 0 00-2 2v16l4-4h14a2 2 0 002-2V4a2 2 0 00-2-2z"/></svg>');
}

/* SHARE */
.ico.share::before{
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M18 16.08c-.76 0-1.44.3-1.95.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11a2.5 2.5 0 10-.91-1.45L8.09 9.85a2.5 2.5 0 100 4.3l7.05 4.11c.46-.42 1.08-.68 1.76-.68a2.5 2.5 0 100-5z"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M18 16.08c-.76 0-1.44.3-1.95.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11a2.5 2.5 0 10-.91-1.45L8.09 9.85a2.5 2.5 0 100 4.3l7.05 4.11c.46-.42 1.08-.68 1.76-.68a2.5 2.5 0 100-5z"/></svg>');
}

/* SAVE (bookmark) */
.ico.save::before{
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M6 2a2 2 0 00-2 2v18l8-4 8 4V4a2 2 0 00-2-2H6z"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M6 2a2 2 0 00-2 2v18l8-4 8 4V4a2 2 0 00-2-2H6z"/></svg>');
}
```0