/*
| Beranda sharecode.id (views/home_view.php). Variabel warna dari dist/css/modern.css (:root).
*/

/* ---------- Slide produk di jendela hero ---------- */
.bk-jendela{ max-width:460px; }
.bk-slide{ position:relative; aspect-ratio:16/11; background:#0b1424; overflow:hidden; }
.bk-slide-item{ position:absolute; inset:0; opacity:0; transition:opacity .7s ease; display:block; }
.bk-slide-item.aktif{ opacity:1; z-index:1; }
.bk-slide-item img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.bk-slide-item::after{ content:""; position:absolute; inset:auto 0 0 0; height:58%; background:linear-gradient(to top,rgba(11,20,36,.94),rgba(11,20,36,0)); }
.bk-slide-teks{ position:absolute; left:18px; right:18px; bottom:30px; z-index:2; text-align:left; }
.bk-slide-teks b{ display:block; color:#fff; font-size:1rem; font-weight:700; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bk-slide-teks small{ display:block; color:#93c5fd; font-size:.8rem; font-weight:600; margin-top:4px; }
.bk-slide-item:hover .bk-slide-teks b{ text-decoration:underline; }
.bk-titik{ position:absolute; left:18px; bottom:12px; z-index:3; display:flex; gap:6px; }
.bk-titik button{ width:7px; height:7px; padding:0; border:0; border-radius:99px; background:rgba(255,255,255,.4); transition:all .25s; cursor:pointer; }
.bk-titik button.aktif{ width:20px; background:#fff; }

/* chip ilustrasi: jangan menutupi titik jendela & jangan keluar layar di HP */
@media (max-width:991px){
  .hero-art .chip-1{ top:-14px; left:6%; }
  .hero-art .chip-3{ right:0; }
}
@media (max-width:575px){
  /* layar HP: chip samping menutupi keterangan slide */
  .hero-art .chip-3,.hero-art .chip-4{ display:none; }
  .bk-slide-teks{ left:14px; right:14px; bottom:26px; }
  .bk-slide-teks b{ font-size:.9rem; }
}

/* ---------- Statistik ---------- */
.bk-statistik-wrap{ background:var(--bg); padding-bottom:8px; }
.bk-statistik{
  position:relative; z-index:3; margin-top:-38px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--sh); display:grid; grid-template-columns:repeat(4,1fr);
}
.bk-stat{ display:flex; align-items:center; gap:14px; padding:20px 22px; min-width:0; }
.bk-stat + .bk-stat{ border-left:1px solid var(--line); }
.bk-stat > div{ min-width:0; }
.bk-stat b{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.55rem; font-weight:800; color:var(--ink); line-height:1.15; font-variant-numeric:tabular-nums; }
.bk-stat span:not(.bk-ikon){ display:block; font-size:.82rem; font-weight:600; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bk-ikon{ flex:0 0 44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.bk-ikon-1{ background:#eef2ff; color:#4f46e5; }
.bk-ikon-2{ background:#ecfdf5; color:#059669; }
.bk-ikon-3{ background:#fff7ed; color:#ea580c; }
.bk-ikon-4{ background:#eff6ff; color:#2563eb; }
@media (max-width:767px){
  .bk-statistik{ grid-template-columns:repeat(2,1fr); margin-top:-26px; }
  .bk-stat{ padding:16px 14px; gap:10px; }
  .bk-stat + .bk-stat{ border-left:0; }
  .bk-stat:nth-child(even){ border-left:1px solid var(--line); }
  .bk-stat:nth-child(n+3){ border-top:1px solid var(--line); }
  .bk-stat b{ font-size:1.25rem; }
  .bk-stat span:not(.bk-ikon){ font-size:.75rem; white-space:normal; }
  .bk-ikon{ flex-basis:36px; height:36px; font-size:.95rem; border-radius:10px; }
}