/* TM-HERO-SLIDER: 3.35 =====================================
   Hero slider beranda: 3 slide bergantian otomatis.
   File ini cuma dimuat di beranda (lihat includes/header.php).
   Isi:
     1. Kerangka slider + panah pinggir + titik
     2. Teks hero & kartu angka
     3. Kartu fitur melayang
     4. Mockup HP serbaguna (.hpx) untuk slide 2 & 3
     5. Laptop ceklis pemasangan
     6. Layar kecil
   ========================================================= */

/* ---------- 1. KERANGKA ---------- */
.hero-geser{position:relative;overflow:hidden;isolation:isolate}
.hero-lilin{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5}
.hero-lilin svg{width:100%;height:100%;display:block}

.hero-track{display:grid;--hero-geser-jarak:78px}
.hero-slide{
  grid-area:1/1;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px);align-items:center;
  /* Slide yang PERGI: mundur cepat supaya tidak lama menumpuk dengan yang datang */
  opacity:0;visibility:hidden;
  transform:translate3d(var(--hero-geser-jarak),0,0) scale(.985);
  transition:opacity .34s ease,transform .34s ease,visibility .34s;
}
/* Slide yang DATANG: gesernya panjang dan pelan supaya gerakannya kelihatan,
   isinya baru muncul sedikit belakangan biar tidak tabrakan dengan slide lama. */
.hero-slide.aktif{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .62s ease .2s,
             transform 1.05s cubic-bezier(.2,.72,.24,1) .06s,
             visibility 1.05s;
}
.hero-geser.mundur .hero-slide:not(.aktif){transform:translate3d(calc(var(--hero-geser-jarak) * -1),0,0) scale(.985)}

/* Panah pinggir: tersembunyi sampai kursor masuk area pinggir hero */
.hero-panah{
  position:absolute;top:0;bottom:0;width:clamp(56px,7vw,96px);z-index:6;
  border:0;padding:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s ease;
}
.hero-panah-kiri{left:0;justify-content:flex-start;padding-left:10px}
.hero-panah-kanan{right:0;justify-content:flex-end;padding-right:10px}
.hero-panah span{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.95);color:var(--navy);
  border:1px solid var(--garis-lembut);
  box-shadow:0 12px 26px -14px rgba(10,31,61,.5);
  transform:scale(.9);transition:transform .25s ease;
}
.hero-panah svg{width:19px;height:19px}
.hero-panah:hover span,.hero-panah:focus-visible span{transform:scale(1)}
.hero-panah:hover,.hero-panah:focus-visible{opacity:1}
.hero-geser:hover .hero-panah{opacity:.55}
.hero-panah:focus-visible{outline:2px solid var(--biru-terang);outline-offset:-6px}

/* Titik indikator + bar progres */
.hero-titik{display:flex;gap:9px;margin-top:clamp(22px,3vw,34px)}
.hero-titik button{
  width:38px;height:5px;padding:0;border:0;border-radius:999px;background:#d3ddec;
  cursor:pointer;position:relative;overflow:hidden;
}
.hero-titik button[aria-current="true"]{background:#c2d2e9}
.hero-titik button[aria-current="true"]::after{
  content:"";position:absolute;inset:0;width:0;background:var(--biru-terang);
  animation:hero-isi var(--jeda,7s) linear forwards;
}
.hero-geser.berhenti .hero-titik button[aria-current="true"]::after{animation-play-state:paused}
.hero-geser.pelan .hero-slide,
.hero-geser.pelan .hero-slide.aktif{transition:opacity .3s ease;transform:none}
.hero-geser.pelan .hero-slide .hero-teks,
.hero-geser.pelan .hero-slide .hero-kanan{transition:opacity .3s ease;transform:none}
.hero-geser.pelan .hf-slot,
.hero-geser.pelan .hpx{animation:none}
@keyframes hero-isi{from{width:0}to{width:100%}}

/* Isi slide ikut bergerak beruntun: teks dulu, visual menyusul sedikit */
.hero-slide .hero-teks,
.hero-slide .hero-kanan{
  opacity:0;transform:translate3d(28px,0,0);
  transition:opacity .3s ease,transform .3s ease;
}
.hero-slide.aktif .hero-teks{
  opacity:1;transform:none;
  transition:opacity .6s ease .16s,transform .95s cubic-bezier(.2,.72,.24,1) .1s;
}
.hero-slide.aktif .hero-kanan{
  opacity:1;transform:none;
  transition:opacity .68s ease .26s,transform 1.05s cubic-bezier(.2,.72,.24,1) .2s;
}
.hero-geser.mundur .hero-slide:not(.aktif) .hero-teks,
.hero-geser.mundur .hero-slide:not(.aktif) .hero-kanan{transform:translate3d(-28px,0,0)}

/* ---------- 2. TEKS HERO ---------- */
.hero-judul{
  font-family:var(--huruf-judul);font-weight:800;color:var(--navy);
  margin:0 0 20px;max-width:15ch;font-size:clamp(2rem,4.2vw,3.7rem);line-height:1.08;
}
.hero-geser .hero-sub{color:var(--biru-terang-tua);font-weight:600}
.btn-panah{width:17px;height:17px;margin-left:9px}
.btn{display:inline-flex;align-items:center}

.hero-geser .hero-angka{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0;padding:0}
.hero-geser .hero-angka li{
  margin:0;padding:13px 18px;display:flex;align-items:center;gap:11px;text-align:left;
  background:rgba(255,255,255,.92);border:1px solid var(--garis-lembut);border-radius:16px;
  box-shadow:0 1px 2px rgba(10,31,61,.05);
}
.ha-ikon{
  flex:0 0 auto;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:var(--biru-kabut);color:var(--biru-terang);
}
.ha-ikon svg{width:16px;height:16px}
.ha-teks strong{display:block;font-family:var(--huruf-judul);color:var(--navy);font-size:1.02rem;line-height:1.2}
.ha-teks small{color:#8591a3;font-size:.8rem}

/* ---------- 3. KARTU FITUR MELAYANG ---------- */
.hero-panggung{position:relative;width:100%;margin-inline:auto}
.hero-fitur{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:4;pointer-events:none}
.hf-slot{position:absolute;width:min(64%,206px);pointer-events:auto;margin:0}
.hf-slot-1{top:22%;left:-19%;animation:hf-apung 6.5s ease-in-out infinite}
.hf-slot-2{top:58%;left:-13%;animation:hf-apung 7.4s ease-in-out .9s infinite}
.hf-slot-3{top:30%;right:-15%;animation:hf-apung 7s ease-in-out .45s infinite}
.hf-slot-4{top:64%;right:-9%;animation:hf-apung 6.8s ease-in-out 1.3s infinite}
@keyframes hf-apung{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-12px,0)}}

.hf-kartu{
  display:block;padding:15px 16px 16px;border-radius:18px;text-decoration:none;
  background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
  border:1px solid rgba(226,232,240,.95);
  box-shadow:0 22px 40px -22px rgba(10,31,61,.5),0 2px 6px -2px rgba(10,31,61,.12);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.hf-kartu:hover,.hf-kartu:focus-visible{
  text-decoration:none;transform:translateY(-3px);border-color:#bcd2f2;
  box-shadow:0 28px 46px -22px rgba(10,31,61,.55);
}
.hf-ikon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;margin-bottom:11px}
.hf-ikon svg{width:21px;height:21px}
.hf-biru{background:#e7f0fd;color:#1f7cff}
.hf-hijau{background:#e4f5ec;color:#128a5a}
.hf-ungu{background:#efe9fd;color:#6b46d6}
.hf-langit{background:#e3edfd;color:#1f83d0}
.hf-kartu strong{display:block;font-family:var(--huruf-judul);color:var(--navy);font-size:.92rem;line-height:1.25;margin-bottom:4px}
.hf-kartu small{display:block;color:var(--tubuh-lembut);font-size:.76rem;line-height:1.45}

/* ---------- 4. MOCKUP HP SERBAGUNA (.hpx) ---------- */
.hpx{
  position:relative;z-index:1;width:min(100%,304px);margin-inline:auto;
  container-type:inline-size;
  padding:2.6%;border-radius:13%/6.4%;
  background:linear-gradient(112deg,#7a808b 0%,#20262b 14%,#4b5058 34%,#151a1e 58%,#333a3f 78%,#6b717c 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2),0 50px 80px -34px rgba(10,31,61,.62),0 12px 28px -14px rgba(10,31,61,.38);
  animation:hpx-melayang 7s ease-in-out infinite;
}
@keyframes hpx-melayang{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-18px,0)}}
.hpx-layar{
  position:relative;overflow:hidden;border-radius:10.5%/5.4%;background:#0c1216;color:#e6ebf3;
  aspect-ratio:300/612;display:flex;flex-direction:column;font-size:4.1cqw;line-height:1.35;
}
.hpx-status{display:flex;align-items:center;justify-content:space-between;padding:.7em 1.1em .2em;font-size:.72em;color:#9aa4b2}
.hpx-poni{width:26%;height:1.5em;background:#000;border-radius:999px;margin-top:-.45em}
.hpx-ikon-status svg{width:2.4em;height:.9em;display:block}

.hpx-kepala{display:flex;align-items:center;gap:.6em;padding:.7em 1em .4em}
.hpx-merek{
  width:2em;height:2em;border-radius:.6em;display:grid;place-items:center;
  background:linear-gradient(140deg,#3f7fe0,#1f7cff);color:#fff;font-weight:700;font-size:.82em;
  font-family:var(--huruf-judul);
}
.hpx-kepala b{font-family:var(--huruf-judul);font-size:.95em}
.hpx-aksi{margin-left:auto;display:flex;gap:.6em;color:#9aa4b2}
.hpx-aksi svg{width:1.15em;height:1.15em}

.hpx-online{
  display:flex;align-items:center;gap:.6em;margin:.4em 1em .2em;padding:.65em .7em;
  background:#141c22;border:1px solid #222d35;border-radius:.85em;
}
.hpx-ok{width:1.5em;height:1.5em;border-radius:50%;background:rgba(38,161,123,.18);color:#26a17b;display:grid;place-items:center}
.hpx-ok svg{width:.9em;height:.9em}
.hpx-online-teks b{display:block;font-size:.8em;font-family:var(--huruf-judul)}
.hpx-online-teks small{color:#7d8794;font-size:.68em}
.hpx-pil{margin-left:auto;background:#1f7cff;color:#fff;font-size:.68em;font-weight:600;padding:.35em .8em;border-radius:999px}

.hpx-tab{display:flex;gap:.35em;padding:.6em 1em .3em;font-size:.7em;color:#7d8794}
.hpx-tab span{padding:.35em .7em;border-radius:999px}
.hpx-tab .aktif{background:#1f7cff;color:#fff;font-weight:600}

.hpx-kartu{margin:.35em 1em;padding:.75em .85em;background:#141c22;border:1px solid #222d35;border-radius:.9em}
.hpx-label{margin:0;color:#7d8794;font-size:.68em}
.hpx-besar{margin:.15em 0 0;font-family:var(--huruf-judul);font-size:1.45em;line-height:1.1;color:#fff}
.hpx-naik{margin:.15em 0 0;color:#26a17b;font-size:.7em;font-weight:600}
.hpx-spark{display:block;width:100%;height:3.4em;margin-top:.3em}
.hpx-sel{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em;margin-top:.55em}
.hpx-sel div{background:#10171d;border:1px solid #1e2931;border-radius:.6em;padding:.45em .5em}
.hpx-sel span{display:block;color:#7d8794;font-size:.6em}
.hpx-sel b{font-size:.78em;font-family:var(--huruf-judul);color:#e6ebf3}
.hpx-sel b.naik{color:#26a17b}

.hpx-judul{display:flex;align-items:center;justify-content:space-between;padding:.75em 1.1em .35em;font-size:.78em}
.hpx-judul b{font-family:var(--huruf-judul)}
.hpx-judul span{color:#4f89e0;font-size:.85em}

.hpx-daftar{display:grid;gap:.4em;padding:0 1em;flex:1;min-height:0;align-content:start}
.hpx-baris{display:flex;align-items:center;gap:.6em;padding:.5em .6em;background:#141c22;border:1px solid #222d35;border-radius:.75em}
.hpx-ikon{width:1.75em;height:1.75em;border-radius:.55em;display:grid;place-items:center}
.hpx-ikon svg{width:1em;height:1em}
.hpx-nama b{display:block;font-size:.76em;font-family:var(--huruf-judul);color:#e6ebf3}
.hpx-nama small{color:#7d8794;font-size:.62em}
.hpx-saklar{margin-left:auto;width:2.1em;height:1.15em;border-radius:999px;background:#26a17b;position:relative}
.hpx-saklar::after{content:"";position:absolute;top:.13em;right:.13em;width:.89em;height:.89em;border-radius:50%;background:#fff}
.hpx-saklar.mati{background:#39454f}
.hpx-saklar.mati::after{right:auto;left:.13em}

.hpx-dok{display:flex;justify-content:space-between;gap:.3em;padding:.6em 1em .35em;border-top:1px solid #1b242b;margin-top:.5em}
.hpx-dok span{display:grid;justify-items:center;gap:.2em;font-size:.58em;color:#6f7d88}
.hpx-dok svg{width:1.5em;height:1.5em}
.hpx-dok .aktif{color:#4f89e0}
.hpx-garis{display:block;width:32%;height:.28em;border-radius:999px;background:#39454f;margin:.35em auto .55em}

/* layar HP versi chart (slide 3) */
.hpx-kepala-chart{gap:.55em}
.hpx-koin{width:1.7em;height:1.7em;border-radius:50%;background:linear-gradient(140deg,#ffd76a,#d79a12);
  color:#5b3d00;font-weight:700;font-size:.74em;display:grid;place-items:center;font-family:var(--huruf-judul)}
.hpx-simbol b{display:block;font-size:.92em;font-family:var(--huruf-judul)}
.hpx-simbol small{color:#7d8794;font-size:.66em}
.hpx-tf-aktif{margin-left:auto;background:#212c34;color:#cdd5e1;font-size:.64em;padding:.3em .7em;border-radius:999px}
.hpx-harga{margin:.1em 1em .2em;font-family:var(--huruf-judul);font-size:1.6em;line-height:1.1;color:#26a17b}
.hpx-harga span{display:block;font-family:var(--huruf-teks);font-size:.42em;font-weight:600}
.hpx-tf{display:flex;gap:.3em;padding:.2em 1em .4em;font-size:.62em;color:#7d8794}
.hpx-tf span{padding:.25em .55em;border-radius:.4em}
.hpx-tf .aktif{background:#212c34;color:#fff}
.hpx-grafik{flex:1;min-height:0;padding:0 .35em}
.hpx-grafik svg{width:100%;height:100%;display:block}
.hpx-beli-jual{display:flex;gap:.5em;padding:.5em 1em .2em}
.hpx-beli-jual span{flex:1;text-align:center;border-radius:.55em;padding:.5em 0;font-size:.8em;font-weight:700;color:#fff}
.hpx-beli-jual .beli{background:#26a17b}
.hpx-beli-jual .jual{background:#e5484d}

/* ---------- 5. LAPTOP CEKLIS (slide 3) ---------- */
.pasang-panggung{position:relative;padding-bottom:16%}
.pasang-panggung .hpx{width:min(100%,272px);margin-left:0;margin-right:auto;transform:translateX(6%)}
.laptop{position:absolute;right:-6%;bottom:0;width:62%;z-index:2;filter:drop-shadow(0 26px 40px rgba(10,31,61,.35))}
.laptop-layar{background:linear-gradient(150deg,#2f363c,#14191c);border-radius:10px;padding:7px 7px 8px}
.laptop-isi{background:#fff;border-radius:5px;padding:11px 12px 12px;container-type:inline-size}
.laptop-kaki{
  display:block;height:9px;width:112%;margin-left:-6%;
  background:linear-gradient(180deg,#c9ced6,#8e949e);border-radius:0 0 9px 9px;
  clip-path:polygon(1.5% 0,98.5% 0,96% 100%,4% 100%);
}
.lp-kepala{display:flex;align-items:center;gap:7px;padding-bottom:8px;border-bottom:1px solid var(--garis-lembut);margin-bottom:9px}
.lp-mt{width:22px;height:22px;border-radius:7px;background:linear-gradient(140deg,#3f7fe0,#1f7cff);color:#fff;
  font-size:9px;font-weight:700;display:grid;place-items:center;font-family:var(--huruf-judul)}
.lp-kepala b{font-family:var(--huruf-judul);color:var(--navy);font-size:11.5px}
.lp-langkah{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lp-langkah li{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--tubuh-lembut)}
.lp-centang{flex:0 0 auto;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  background:#e4f5ec;color:#128a5a}
.lp-langkah li.jalan .lp-centang{background:var(--biru-kabut);color:var(--biru-terang)}
.lp-centang svg{width:10px;height:10px}
.lp-selesai{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;border-radius:11px;
  background:linear-gradient(120deg,#1f7cff,#1f83d0);color:#fff}
.lp-bulat{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center}
.lp-bulat svg{width:11px;height:11px}
.lp-selesai b{display:block;font-family:var(--huruf-judul);font-size:10.5px}
.lp-selesai small{font-size:9px;opacity:.85}

/* ---------- 6. LAYAR KECIL ---------- */
@media (min-width:1280px){
  .hero-kanan{max-width:560px}
  .hf-slot{width:min(62%,214px)}
}
@media (max-width:1100px){
  .hf-slot{width:min(56%,178px)}
  .hf-slot-1{top:24%;left:-10%}
  .hf-slot-2{top:60%;left:-6%}
  .hf-slot-3{top:32%;right:-6%}
  .hf-slot-4{top:66%;right:-2%}
  .hf-kartu small{font-size:.72rem}
}
@media (max-width:900px){
  .hero-track{--hero-geser-jarak:46px}
  .hero-slide{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero-judul{max-width:none;font-size:clamp(1.9rem,8vw,3rem)}
  .hero-panah{display:none}
  .hero-fitur{position:static;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:26px}
  .hf-slot{position:static;width:auto;animation:none}
  .hf-kartu{background:#fff;backdrop-filter:none}
  .pasang-panggung{padding-bottom:22%}
  .pasang-panggung .hpx{width:min(100%,232px);transform:none;margin-inline:auto 0}
  .laptop{width:66%;right:0}
}
@media (max-width:767px){
  .hero-geser .hero-kanan{display:block;margin-top:30px}
  .hero-geser .hpx,.hero-geser .hp-panggung,.hero-geser .laptop{display:none}
  .hero-geser .pasang-panggung{padding-bottom:0}
  .hero-fitur{margin-top:0;gap:10px}
  .hf-kartu{padding:13px 13px 14px;border-radius:15px}
  .hf-ikon{width:34px;height:34px;border-radius:11px;margin-bottom:9px}
  .hf-ikon svg{width:18px;height:18px}
  .hero-geser .hero-angka li{flex:1;min-width:9rem;padding:11px 13px}
  .hero-titik{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  /* Animasi melayang dan geser dimatikan, tapi slide tetap berganti sendiri
     supaya pesan slide 2 dan 3 tetap kebaca. Bar progres dibiarkan diam. */
  .hf-slot,.hpx{animation:none!important}
  .hero-slide,.hero-slide.aktif,
  .hero-slide .hero-teks,.hero-slide .hero-kanan{transition:opacity .3s ease;transform:none!important}
  .hf-kartu{transition:none}
  .hero-titik button[aria-current="true"]::after{animation:none;width:100%}
}

/* v4.26: titik slider dulu hanya 38x5 px — terlalu tipis untuk dipencet jari.
   Area sentuhnya diperbesar jadi 38x24 px; garis yang terlihat tetap 5 px. */
.hero-titik{gap:6px}
.hero-titik button,
.hero-titik button[aria-current="true"]{height:24px;background:transparent;overflow:visible}
.hero-titik button::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:5px;margin-top:-2.5px;
  border-radius:999px;background:#d3ddec;
}
.hero-titik button[aria-current="true"]::before{background:#c2d2e9}
.hero-titik button[aria-current="true"]::after{top:50%;bottom:auto;height:5px;margin-top:-2.5px;border-radius:999px}
.hero-titik button:focus-visible{outline:2px solid var(--biru-terang);outline-offset:2px;border-radius:6px}