/* HBOTNews: lapisan tampilan "glassy" (kaca buram di atas latar ambient). Dimuat SETELAH style.css. */
:root{
  --kaca-latar:url(img/kaca/latar-gelap.jpg);
  --kaca:rgba(30,26,22,.42); --kaca-2:rgba(20,18,16,.58); --kaca-3:rgba(255,255,255,.06);
  --kaca-garis:rgba(255,255,255,.13); --kaca-garis-2:rgba(255,255,255,.22);
  --kaca-kilau:inset 0 1px 0 rgba(255,255,255,.09); --kaca-bayang:0 24px 60px -24px rgba(0,0,0,.65);
  --kaca-blur:blur(22px) saturate(150%); --r:22px;
  --bg:transparent; --bg2:rgba(255,255,255,.035); --bg3:rgba(255,255,255,.05);
  --hdr-bg:rgba(24,21,18,.5); --menu-bg:rgba(16,14,12,.86); --footer-bg:transparent;
}
:root[data-mode="light"]{
  --kaca-latar:url(img/kaca/latar-terang.jpg);
  --kaca:rgba(255,255,255,.46); --kaca-2:rgba(255,255,255,.68); --kaca-3:rgba(255,255,255,.4);
  --kaca-garis:rgba(255,255,255,.75); --kaca-garis-2:rgba(255,255,255,.95);
  --kaca-kilau:inset 0 1px 0 rgba(255,255,255,.9); --kaca-bayang:0 24px 60px -28px rgba(80,60,30,.35);
  --bg:transparent; --bg2:rgba(255,255,255,.35); --bg3:rgba(255,255,255,.45);
  --hdr-bg:rgba(255,255,255,.5); --menu-bg:rgba(246,243,238,.9); --footer-bg:transparent;
}
html{background:#0d0b09}
html[data-mode="light"]{background:#efe8dd}
body{background:transparent}
body::before{content:"";position:fixed;inset:-2px;z-index:-1;background:var(--kaca-latar) center/cover no-repeat;pointer-events:none}

/* panel kaca dasar */
.card,.feature,.list-row,.vcard,.j-kartu,.model,.spec,.cta .wrap,.related,.a-head .in,.prose,.geo-ringkas,.search-box,.wa-panel,.foot-grid,.stage .cap,.sec-head+.grid3 .card{
  background:var(--kaca);border:1px solid var(--kaca-garis);border-radius:var(--r);box-shadow:var(--kaca-kilau),var(--kaca-bayang)}
@media (min-width:900px) and (hover:hover){
  .card,.feature,.list-row,.vcard,.model,.cta .wrap,.a-head .in,.prose,.search-box,.wa-panel,.hdr .bar{backdrop-filter:var(--kaca-blur);-webkit-backdrop-filter:var(--kaca-blur)}
}

/* header: bilah kaca melayang + menu pill */
.hdr,.hdr.scrolled{background:transparent!important;border-color:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.hdr .top{border:0;background:transparent}
.hdr .bar{margin-top:10px;height:60px;padding-inline:14px 10px;border-radius:999px;background:var(--hdr-bg);border:1px solid var(--kaca-garis);box-shadow:var(--kaca-kilau),0 16px 40px -20px rgba(0,0,0,.6);max-width:calc(var(--maxw) - 2*var(--gutter) + 28px);width:calc(100% - 2*var(--gutter) + 28px)}
.hdr .bar{backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%)}
@media (min-width:1000px){
  .menu{gap:6px!important}
  .menu a:not(.btn){padding:8px 15px;border-radius:999px;border:1px solid var(--kaca-garis);background:var(--kaca-3);transition:background .2s,border-color .2s}
  .menu a:not(.btn):hover,.menu a[aria-current="page"]{background:var(--kaca-garis);border-color:var(--kaca-garis-2)}
}
.menu .btn,.btn{border-radius:999px}
.search-btn,.theme-btn,.burger{border-radius:50%;border-color:var(--kaca-garis)!important;background:var(--kaca-3)!important}
@media (max-width:999px){
  .hdr .bar{margin-top:8px;height:56px}
  .menu{background:var(--menu-bg)!important;backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px)}
  .hdr.open{background:transparent!important}
}

/* hero & kepala artikel: transparan, hanya cahaya lembut */
.hero,.a-head{background:radial-gradient(900px 560px at 82% 35%,var(--glow1),transparent 62%)!important}
.a-head .in{padding:clamp(22px,3.4vw,40px);margin-top:10px}
.stage{border-radius:var(--r);overflow:hidden;border:1px solid var(--kaca-garis)}
.stage .cap{border-radius:14px}

/* kartu & daftar */
.card{padding:12px 12px 20px;overflow:hidden;transition:transform .25s ease,border-color .25s}
.card:hover,.list-row:hover,.feature:hover,.j-kartu:hover{transform:translateY(-4px);border-color:var(--kaca-garis-2)}
.card .thumb,.feature .thumb,.list-row .thumb{border-radius:calc(var(--r) - 8px)}
.card>:not(a):not(.thumb){margin-left:8px;margin-right:8px}
.feature{padding:14px;transition:transform .25s ease}
.feature>div:last-child{padding:6px 10px 10px}
.list-row{padding:14px!important;margin-bottom:16px;border-bottom:1px solid var(--kaca-garis)!important;transition:transform .25s ease}
.list-row>div{padding-right:10px}
.grid3{gap:18px!important}
.j-kartu{padding:12px}

/* katalog */
.models{border:0!important;gap:18px!important}
.model{border:1px solid var(--kaca-garis)!important;overflow:hidden}
.model:hover{background:var(--kaca-2)}
.rows .row{border-radius:16px;padding-inline:14px}
.rows .row:hover{background:var(--kaca)}
.thumb{border-radius:14px}
.a-hero .thumb,.a-hero.a-foto .thumb{border-radius:var(--r);border:1px solid var(--kaca-garis)}

/* artikel: badan teks di panel kaca yang lebih pekat agar tetap enak dibaca */
.prose{background:var(--kaca-2);padding:clamp(22px,4vw,52px)!important;margin-top:28px!important;max-width:820px}
.prose .geo-ringkas{background:var(--kaca-3);box-shadow:none;border-left-width:1px}
.prose table{border-radius:14px;overflow:hidden}
.prose img,.prose figure img{border-radius:14px}
.related{padding:clamp(18px,3vw,32px)!important;border-top:1px solid var(--kaca-garis)!important}

/* CTA, footer, lain-lain */
.cta{background:transparent!important;border:0!important}
.cta .wrap{padding-block:clamp(36px,6vw,70px);max-width:calc(var(--maxw) - 2*var(--gutter))}
.footer{background:transparent!important;border-top:0!important}
.foot-grid{padding:clamp(22px,3.4vw,40px)}
.search-modal{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.search-box{background:var(--kaca-2)!important}
.wa-panel{background:var(--kaca-2)!important;overflow:hidden}
.mitra{opacity:.95}
@media (prefers-reduced-transparency:reduce){
  :root{--kaca:rgba(22,20,18,.92);--kaca-2:rgba(18,16,14,.96)}
  :root[data-mode="light"]{--kaca:rgba(255,255,255,.92);--kaca-2:rgba(255,255,255,.97)}
}
/* bilah atas kecil hilang saat menggulir agar tidak menimpa konten */
.hdr .top{transition:opacity .25s,max-height .25s;max-height:40px;overflow:hidden}
.hdr.scrolled .top{opacity:0;max-height:0}
.feature{align-items:center}
@media (max-width:700px){
  .prose{padding:20px 16px!important;border-radius:18px;margin-inline:-6px!important}
  .prose .geo-ringkas{padding:14px 14px;margin-inline:-4px}
  .a-head .in{padding:18px 16px}
  .card{padding:10px 10px 16px}
  .list-row{padding:10px!important}
}