/* Stem Cells Indonesia: lapisan tampilan "glassy" (kaca buram di atas latar ambient / kanvas 3D). Dimuat SETELAH style.css. */
:root{
  --kaca-latar:url(img/kaca/latar-gelap.jpg);
  --kaca:rgba(10,24,42,.42); --kaca-2:rgba(6,16,30,.62); --kaca-3:rgba(140,200,255,.07);
  --kaca-garis:rgba(170,215,255,.16); --kaca-garis-2:rgba(170,215,255,.32);
  --kaca-kilau:inset 0 1px 0 rgba(255,255,255,.08); --kaca-bayang:0 24px 60px -24px rgba(0,0,0,.7);
  --kaca-blur:blur(22px) saturate(150%); --r:22px; --kaca-dasar:#06101c;
}
:root[data-theme="light"]{
  --kaca-latar:url(img/kaca/latar-terang.jpg);
  --kaca:rgba(255,255,255,.5); --kaca-2:rgba(255,255,255,.72); --kaca-3:rgba(255,255,255,.45);
  --kaca-garis:rgba(255,255,255,.8); --kaca-garis-2:rgba(255,255,255,1);
  --kaca-kilau:inset 0 1px 0 rgba(255,255,255,.95); --kaca-bayang:0 24px 60px -28px rgba(20,60,110,.28); --kaca-dasar:#e6eef7;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --kaca-latar:url(img/kaca/latar-terang.jpg);
  --kaca:rgba(255,255,255,.5); --kaca-2:rgba(255,255,255,.72); --kaca-3:rgba(255,255,255,.45);
  --kaca-garis:rgba(255,255,255,.8); --kaca-garis-2:rgba(255,255,255,1);
  --kaca-kilau:inset 0 1px 0 rgba(255,255,255,.95); --kaca-bayang:0 24px 60px -28px rgba(20,60,110,.28); --kaca-dasar:#e6eef7;
}}
html{background:var(--kaca-dasar)}
body{background:transparent!important}
body::after{content:"";position:fixed;inset:-2px;z-index:-1;background:var(--kaca-latar) center/cover no-repeat;pointer-events:none}

/* panel kaca */
.a-card,.article,.related,.site-foot .wrap,.j-kartu,.pcard,.s-item,.temuan li,.anak button,.scene .card,.solid section>.wrap,footer.kaki .wrap,.geo-ringkas{
  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){
  .a-card,.article,.scene .card,.pcard,.solid section>.wrap,.site-head .mast,.top .wrap{backdrop-filter:var(--kaca-blur);-webkit-backdrop-filter:var(--kaca-blur)}
}

/* header: bilah kaca melayang, menu pill */
.site-head,.top,.top.solid{background:transparent!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.site-head .mast,.top .wrap{margin-top:10px;padding:8px 10px 8px 20px!important;border-radius:999px;background:var(--kaca-2);border:1px solid var(--kaca-garis);box-shadow:var(--kaca-kilau),0 16px 40px -20px rgba(0,0,0,.55);max-width:1180px;width:calc(100% - 24px)}
.site-head nav,.top nav{gap:6px!important}
.site-head nav a,.top nav a{padding:7px 14px;border-radius:999px;border:1px solid var(--kaca-garis);background:var(--kaca-3);transition:background .2s,border-color .2s}
.site-head nav a:hover,.site-head nav a[aria-current="page"],.top nav a:hover,.top nav a.on{background:var(--kaca-garis);border-color:var(--kaca-garis-2);color:var(--ink)}
.tema,.lang{border-color:var(--kaca-garis)!important;background:var(--kaca-3)!important}
@media (max-width:860px){.site-head .mast,.top .wrap{border-radius:22px;padding:8px 10px 8px 16px!important}}

/* artikel: badan teks di panel kaca yang lebih pekat agar tetap enak dibaca */
.article{background:var(--kaca-2);padding:clamp(20px,4vw,48px)!important;margin-top:22px;margin-bottom:28px;max-width:900px}
.article .geo-ringkas{background:var(--kaca-3);box-shadow:none}
.a-hero img,.a-fig img{border-radius:16px}
.related{background:transparent;border:0;box-shadow:none;padding-top:8px}
.a-card{padding:12px 12px 16px;transition:transform .25s,border-color .25s}
.a-card:hover{transform:translateY(-4px);border-color:var(--kaca-garis-2)}
.a-thumb img,.j-kartu img{border-radius:14px}
.a-grid{gap:18px}
.site-foot{border-top:0!important;padding-block:10px 28px}
.site-foot .wrap{padding:22px 24px!important;width:calc(100% - 24px)}
.jaringan{border-top-color:var(--kaca-garis)}

/* beranda: kanvas 3D tetap jadi latar, konten di panel kaca */
.scene .card{padding:26px 28px!important}
.solid{background:linear-gradient(180deg,transparent 0,rgba(0,0,0,0) 100%)!important}
.solid section>.wrap{padding:24px 26px!important;width:calc(100% - 24px)}
.solid section{padding-block:18px!important}
.pcard{background:var(--kaca-3)}
footer.kaki{background:transparent!important;border:0!important}
footer.kaki .wrap{padding:20px 24px!important;width:calc(100% - 24px)}
@media (max-width:700px){
  .article{padding:20px 16px!important;border-radius:18px;margin-inline:8px;width:auto}
  .article .geo-ringkas{padding:14px}
  .scene .card{padding:18px 18px!important}
  .solid section>.wrap{padding:18px 16px!important}
}
@media (prefers-reduced-transparency:reduce){:root{--kaca:rgba(8,20,36,.94);--kaca-2:rgba(6,16,30,.97)}}
/* header selalu buram (satu elemen, ringan); di layar kecil lebih pekat agar teks di belakang tidak terbaca */
.site-head .mast,.top .wrap{backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
@media (max-width:860px){
  :root{--kaca-hdr:rgba(6,16,30,.86)}
  :root[data-theme="light"]{--kaca-hdr:rgba(255,255,255,.88)}
  .site-head .mast,.top .wrap{background:var(--kaca-hdr)}
}
@media (max-width:860px) and (prefers-color-scheme:light){:root:not([data-theme="dark"]){--kaca-hdr:rgba(255,255,255,.88)}}
