:root{
  --bg:#0f0f10;
  --card:#17181a;
  --text:#e9e9ea;
  --muted:#a6a6a6;
  --line:#2a2b2e;
  --btn:#2d2f33;
  --btnHover:#3a3d43;
  --accent:#4da3ff;
}

*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
}

a{ color:inherit; text-decoration:none }
img{ max-width:100% } /* aman untuk konten biasa */
.container{ max-width:1200px; margin:0 auto; padding:18px }

/* =========================
   ADS CARD (HOME + VIEW)
========================= */
.adCard{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  padding: 12px;
}

.adLabel{
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
  letter-spacing: .2px;
}

.adSlot{
  width: 100%;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height: 250px; /* default untuk 300x250 */
}

/* VIEW banner 320x50 */
.adCard.adView{
  padding: 8px 10px;
}
.adCard.adView .adLabel{
  margin: 0 0 6px;
}
.adSlot.adSlot320{
  width: 320px;
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
}
.adSlot.adSlot320 iframe,
.adSlot.adSlot320 img{
  width: 320px !important;
  height: 50px !important;
  display: block;
  border: 0;
}

/* =========================
   TOPBAR (VIEW)
========================= */
.topbar{
  display:flex;
  align-items:center;
  gap:14px;
  background:#1a1a1a;
  padding:10px 20px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.brand{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  padding:10px 0;
  font-weight:800;
  letter-spacing:.2px;
  margin:0;
}

.subBadge{
  font-size:10px;
  font-weight:800;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#cfcfcf;
  line-height:1;
  width:fit-content;
  margin:4px 0 0 0;
}

/* =========================
   TOPBAR (HOME)
========================= */
.topbar1{
  display:flex;
  align-items:center;
  gap:12px;
  background:#1a1a1a;
  padding:10px 20px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.brand1{
  font-weight:800;
  letter-spacing:.2px;
  padding:0 6px;
  color:#fff;
}

/* Search */
.searchWrapper{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  background:#26272a;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:6px;
  width:min(420px, 60vw);
}

#searchBox{
  background:transparent;
  color:#fff;
  border:none;
  padding:10px 10px;
  width:100%;
  border-radius:10px;
  font-size:14px;
}

#searchBox::placeholder{ color:#c9c9c9 }
#searchBox:focus{ outline:none }

.searchBtn{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
  padding:10px 12px;
  font-size:16px;
  cursor:pointer;
  border-radius:10px;
}
.searchBtn:hover{ background:rgba(255,255,255,.06) }

@media(max-width:520px){
  .topbar1{ flex-wrap:wrap }
  .searchWrapper{ width:100%; margin-left:0 }
}

/* =========================
   GRID + CARD (HOME)
   (FIX: no conflicting media query)
========================= */
.grid{
  display:grid;
  grid-template-columns:1fr; /* mobile: 1 kolom */
  gap:12px;
}

@media(min-width:900px){
  .grid{ grid-template-columns:repeat(2, 1fr); } /* desktop: 2 kolom */
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}

/* 16:9 thumb wrapper */
.thumbBox{
  position:relative;
  width:100%;
  padding-top:56.25%;
  overflow:hidden;
  background:#000;
}
.thumbBox img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* category badge on thumb */
.catBadge{
  position:absolute;
  right:10px;
  bottom:10px;
  padding:4px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.25px;
  text-transform:uppercase;
  background:rgba(0,0,0,.70);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events:none;
  user-select:none;
}

/* blog card body */
.card.blogCard{ display:block; padding:12px }
.card.blogCard .thumbBox{ border-radius:14px; overflow:hidden }
.card.blogCard .cardBody{ padding-top:10px }

.card.blogCard .cardTitle{
  font-weight:950;
  font-size:16px;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.card.blogCard .cardMeta{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.card.blogCard .metaPill{
  font-size:12px;
  opacity:.95;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}

.card.blogCard .cardDesc{
  margin-top:10px;
  font-size:13px;
  line-height:1.35;
  opacity:.80;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* sentinel */
.badge{ color:var(--muted); font-size:13px; margin-top:10px }
.small{ font-size:12px; color:var(--muted) }

/* =========================
   VIEW: TITLE + META
========================= */
.dlcTitle{
  margin:14px 0 6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:22px;
  line-height:1.2;
}

.meta{ margin:8px 0 14px }
.metaRow{
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}
.metaItem{
  display:flex;
  align-items:center;
  gap:8px;
}
.metaLabel{ color:#888 }

.pill{
  color:#fff;
  background:#333;
  padding:2px 10px;
  border-radius:999px;
  text-transform:uppercase;
  font-size:11px;
  font-weight:900;
}
.metaValue{ color:#bbb }

/* =========================
   VIEW: SLIDER
========================= */
.slider{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:#0e0e10;
}
.slides{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.slides::-webkit-scrollbar{ display:none }
.slide{ flex:0 0 100%; scroll-snap-align:center }
.slide img{ width:100%; height:auto; display:block }

.navBtn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:18px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
}
.navBtn:active{ transform:translateY(-50%) scale(.98) }
.navLeft{ left:10px }
.navRight{ right:10px }

.dots{ display:flex; gap:6px; justify-content:center; margin:10px 0 2px }
.dot{ width:7px; height:7px; border-radius:999px; background:rgba(255,255,255,.25) }
.dot.active{ background:rgba(255,255,255,.85) }

/* =========================
   VIEW: ACTIONS + BUTTONS
========================= */
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 0 6px;
}
.btn{
  border:1px solid var(--line);
  background:var(--btn);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
}
.btn:hover{ background:var(--btnHover) }
.btnPrimary{ border-color:rgba(77,163,255,.4) }
.btnPrimary:hover{ box-shadow:0 0 0 3px rgba(77,163,255,.18) }

/* =========================
   VIEW: DESCRIPTION
========================= */
.descBox{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:12px;
  background:rgba(255,255,255,.03);
}
.descText{
  color:#d7d7d7;
  line-height:1.45;
  white-space:pre-wrap;
}
.descText.clamp{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.moreBtn{ margin-top:10px }

/* =========================
   PANORAMA (FIXED)
   - Mengalahkan img{max-width:100%} supaya bisa scroll horizontal
========================= */
.panoWrap{
  margin-top:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:#0e0e10;
  overflow:hidden;
}

.panoViewport{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
  user-select:none;
  touch-action:pan-x;
}
.panoViewport:active{ cursor:grabbing }
.panoViewport::-webkit-scrollbar{ display:none }

/* KUNCI: width:auto + max-width:none agar melebar sesuai lebar asli */
.panoImg{
  height:220px;           /* ubah ke 190 / 260 sesuai selera */
  width:auto !important;
  max-width:none !important;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;    /* swipe/drag selalu ke viewport */
}

.panoIndicator{
  margin:10px 14px 14px;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  position:relative;
  overflow:hidden;
}
.panoThumb{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  border-radius:999px;
  background:rgba(255,255,255,.65);
  width:30%;
  will-change:left,width;
}

/* =========================
   HERO (opsional)
========================= */
.heroWrap{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
}
.hero{
  width:100%;
  max-height:70vh;
  object-fit:contain;
  display:block;
  background:#000;
}

/* =========================
   TOAST
========================= */
#toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  background:rgba(0,0,0,.75);
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  display:none;
  z-index:9999;
  font-size:13px;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}