/* ============================================================
   home-99.css — Redesign Beranda 99Hosts (gaya "deepseek")
   Self-hosted. Semua rule di-scope ke .hp-home agar tidak
   memengaruhi halaman lain. Font (Inter) & ikon (Font Awesome)
   sudah dimuat global oleh main.css.
   ============================================================ */

.hp-home{
  --hp-primary:#0948b3;
  --hp-primary-dark:#062f78;
  --hp-ink:#0b1f3a;
  --hp-alt:#f5f8ff;
}

/* --- Spasi & background section --- */
.hp-home .hp-sec{ padding-top:4.5rem; padding-bottom:4.5rem; }
@media (min-width:992px){ .hp-home .hp-sec{ padding-top:6rem; padding-bottom:6rem; } }
.hp-home .hp-alt-bg{ background:var(--hp-alt); }

/* --- Eyebrow / badge kecil di atas heading --- */
.hp-home .hp-eyebrow{
  display:inline-block; font-weight:600; letter-spacing:.02em;
  padding:.5rem 1rem; border-radius:50rem; font-size:.85rem;
}

/* --- HERO --- */
.hp-home .hp-hero{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(125deg,var(--hp-primary) 0%,var(--hp-primary-dark) 100%);
  padding:9.5rem 0 7rem;
}
.hp-home .hp-hero h1{ line-height:1.12; }
.hp-home .hp-hero-img{ animation:hpFloat 6s ease-in-out infinite; }
@keyframes hpFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.hp-home .hp-wave{ position:absolute; left:0; right:0; bottom:-1px; line-height:0; }
.hp-home .hp-wave svg{ display:block; width:100%; height:70px; }

/* --- Counter --- */
.hp-home .hp-counter{ font-size:2rem; font-weight:800; }
@media (min-width:992px){ .hp-home .hp-counter{ font-size:2.4rem; } }

/* --- Lingkaran ikon --- */
.hp-home .hp-ic{
  width:64px; height:64px; font-size:1.5rem;
}

/* --- Kartu (hover halus) --- */
.hp-home .hp-card{ transition:transform .25s ease, box-shadow .25s ease; }
.hp-home .hp-card:hover{
  transform:translateY(-6px);
  box-shadow:0 1rem 2.25rem rgba(9,72,179,.16)!important;
}

/* --- Section gelap (timeline & CTA) --- */
.hp-home .hp-dark{
  background:linear-gradient(125deg,var(--hp-ink) 0%,var(--hp-primary-dark) 100%);
  color:#fff;
}

/* --- Timeline "Cara Pemesanan" --- */
.hp-home .hp-timeline{ position:relative; }
.hp-home .hp-tl-line{
  position:absolute; top:28px; left:12.5%; right:12.5%; height:2px;
  background:rgba(255,255,255,.28);
}
.hp-home .hp-tl-num{ width:56px; height:56px; font-size:1.4rem; }

/* --- Accordion FAQ --- */
.hp-home .accordion-button{ font-weight:600; }
.hp-home .accordion-button:not(.collapsed){
  background:rgba(9,72,179,.06); color:var(--hp-primary);
}
.hp-home .accordion-button:focus{ box-shadow:none; border-color:transparent; }

/* --- Kartu edukasi/blog --- */
.hp-home .hp-edu-card img{ height:200px; object-fit:cover; }

/* --- Carousel testimoni --- */
.hp-home .carousel-indicators [data-bs-target]{
  width:10px; height:10px; border-radius:50%; border:0;
}

/* --- Animasi fade-in saat scroll --- */
.hp-home .hp-fade{
  opacity:0; transform:translateY(26px);
  transition:opacity .6s ease, transform .6s ease;
}
.hp-home .hp-fade.hp-in{ opacity:1; transform:none; }
.hp-home .hp-d1{ transition-delay:.1s }
.hp-home .hp-d2{ transition-delay:.2s }
.hp-home .hp-d3{ transition-delay:.3s }
.hp-home .hp-d4{ transition-delay:.4s }
@media (prefers-reduced-motion:reduce){
  .hp-home .hp-fade{ opacity:1; transform:none; transition:none; }
  .hp-home .hp-hero-img{ animation:none; }
}

/* --- Pill tabs (mis. "Jenis SSL") --- */
.hp-home .hp-tabs{ border-bottom:none; justify-content:center; gap:.5rem; flex-wrap:wrap; }
.hp-home .hp-tabs .nav-link{
  border:none; border-radius:50rem; padding:.6rem 1.5rem;
  font-weight:500; color:#6c757d; transition:all .2s;
}
.hp-home .hp-tabs .nav-link.active{
  background:var(--hp-primary); color:#fff;
  box-shadow:0 4px 12px rgba(9,72,179,.25);
}
.hp-home .hp-tabs .nav-link:hover:not(.active){ background:rgba(9,72,179,.06); }

/* --- Horizontal steps dengan garis penghubung --- */
.hp-home .hp-hsteps .hp-hstep{ position:relative; }
.hp-home .hp-hsteps .hp-hstep:not(:last-child)::after{
  content:''; position:absolute; top:28px; left:calc(50% + 34px);
  width:calc(100% - 68px); height:2px; background:#dee2e6; z-index:0;
}
@media (max-width:767.98px){
  .hp-home .hp-hsteps .hp-hstep:not(:last-child)::after{ display:none; }
}

/* --- Vertical tabs (mis. Fitur aaPanel) --- */
.hp-home .hp-vtabs .nav-link{
  border-radius:16px; padding:1rem 1.25rem; margin-bottom:.5rem;
  font-weight:500; color:#495057; text-align:left; width:100%;
  border:1px solid transparent; transition:all .2s;
}
.hp-home .hp-vtabs .nav-link.active{
  background:var(--hp-primary); color:#fff; border-color:var(--hp-primary);
  box-shadow:0 4px 12px rgba(9,72,179,.25);
}
.hp-home .hp-vtabs .nav-link:hover:not(.active){
  background:rgba(9,72,179,.05); border-color:rgba(9,72,179,.15);
}

/* --- Process flow dengan panah (chevron Font Awesome) --- */
.hp-home .hp-arrows .hp-astep{ position:relative; }
.hp-home .hp-arrows .hp-astep:not(:last-child)::after{
  content:'\f054'; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; right:-12px; top:26px;
  font-size:1.5rem; color:var(--hp-primary); z-index:1;
}
@media (max-width:767.98px){
  .hp-home .hp-arrows .hp-astep:not(:last-child)::after{ display:none; }
}

/* --- Kartu artikel horizontal (gambar kiri) --- */
.hp-home .hp-artcard img{ object-fit:cover; height:100%; min-height:170px; }
@media (max-width:767.98px){
  .hp-home .hp-artcard img{ height:auto; min-height:auto; max-height:210px; width:100%; }
}

/* --- Split FAQ dengan ikon +/× --- */
.hp-home .hp-splitfaq .accordion-button::after{ display:none; }
.hp-home .hp-splitfaq .hp-faq-ic{ transition:transform .3s; margin-left:auto; }
.hp-home .hp-splitfaq .accordion-button:not(.collapsed) .hp-faq-ic{ transform:rotate(45deg); }

/* --- Hero visual wrapper (hover zoom) --- */
.hp-home .hp-visual{ position:relative; overflow:hidden; border-radius:24px; box-shadow:0 1.5rem 3rem rgba(0,0,0,.25); }
.hp-home .hp-visual img{ transition:transform .4s ease; }
.hp-home .hp-visual:hover img{ transform:scale(1.03); }

/* --- Use-case card (border kiri, geser saat hover) --- */
.hp-home .hp-usecase{ border-left:4px solid transparent; transition:all .3s; }
.hp-home .hp-usecase:hover{ border-left-color:var(--hp-primary); background:rgba(9,72,179,.03); transform:translateX(6px); }

/* --- Progress meter perbandingan --- */
.hp-home .hp-meter{ background:#e9ecef; border-radius:20px; overflow:hidden; height:10px; margin:.5rem 0; }
.hp-home .hp-meter-fill{ height:100%; border-radius:20px; background:linear-gradient(90deg,var(--hp-primary),#0d6efd); }

/* --- Feature horizontal (ikon kotak, hover scale) --- */
.hp-home .hp-fhoriz .hp-fic{
  width:64px; height:64px; border-radius:20px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; transition:transform .2s;
}
.hp-home .hp-fhoriz:hover .hp-fic{ transform:scale(1.1); }

/* --- Kartu layanan yang bisa di-expand (collapse) --- */
.hp-home .hp-svc{ cursor:pointer; transition:all .2s; border:2px solid transparent!important; }
.hp-home .hp-svc:hover{ border-color:rgba(9,72,179,.2)!important; box-shadow:0 .5rem 1.25rem rgba(0,0,0,.08)!important; }
.hp-home .hp-svc .hp-svc-ic{ transition:transform .3s; }
.hp-home .hp-svc[aria-expanded="true"] .hp-svc-ic{ transform:rotate(180deg); }

/* --- Vertical timeline --- */
.hp-home .hp-vtl{ position:relative; padding-left:50px; }
.hp-home .hp-vtl::before{ content:''; position:absolute; left:25px; top:0; bottom:0; width:2px; background:#dee2e6; }
.hp-home .hp-vtl .hp-vtl-item{ position:relative; margin-bottom:2rem; }
.hp-home .hp-vtl .hp-vtl-item:last-child{ margin-bottom:0; }
.hp-home .hp-vtl .hp-vtl-dot{
  position:absolute; left:-50px; top:0; width:50px; height:50px; border-radius:50%;
  background:var(--hp-primary); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.4rem; z-index:1; box-shadow:0 4px 12px rgba(9,72,179,.25);
}
@media (max-width:576px){
  .hp-home .hp-vtl{ padding-left:40px; }
  .hp-home .hp-vtl .hp-vtl-dot{ left:-40px; width:36px; height:36px; font-size:1.1rem; }
}

/* --- Kartu Visi/Misi (border kiri saat hover) --- */
.hp-home .hp-vmcard{ transition:transform .3s, box-shadow .3s; border-left:6px solid transparent!important; }
.hp-home .hp-vmcard:hover{ transform:translateY(-8px); box-shadow:0 1.25rem 2.5rem rgba(0,0,0,.1)!important; border-left-color:var(--hp-primary)!important; }

/* --- Timeline tengah zig-zag (mis. jaringan/sejarah) --- */
.hp-home .hp-htl{ position:relative; padding:20px 0; }
.hp-home .hp-htl::before{ content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:#dee2e6; transform:translateX(-50%); }
.hp-home .hp-htl-item{ position:relative; margin-bottom:40px; }
.hp-home .hp-htl-item:last-child{ margin-bottom:0; }
.hp-home .hp-htl-content{ position:relative; width:calc(50% - 30px); background:#fff; border-radius:20px; padding:24px; box-shadow:0 4px 12px rgba(0,0,0,.05); }
.hp-home .hp-htl-item:nth-child(odd) .hp-htl-content{ margin-left:auto; }
.hp-home .hp-htl-dot{ position:absolute; left:50%; top:20px; width:24px; height:24px; background:var(--hp-primary); border-radius:50%; transform:translate(-50%,-50%); z-index:1; box-shadow:0 0 0 6px rgba(9,72,179,.15); }
@media (max-width:767px){
  .hp-home .hp-htl::before{ left:20px; }
  .hp-home .hp-htl-content{ width:calc(100% - 50px); margin-left:50px!important; }
  .hp-home .hp-htl-dot{ left:20px; }
}

/* --- Kartu tim (avatar hover) --- */
.hp-home .hp-team .hp-team-av{ width:96px; height:96px; font-size:2.4rem; border:4px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.08); transition:transform .3s; }
.hp-home .hp-team:hover .hp-team-av{ transform:scale(1.08); }

/* --- Value circle (flip saat hover) --- */
.hp-home .hp-valuecircle{ width:90px; height:90px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:2.3rem; margin-bottom:16px; transition:transform .4s; }
.hp-home .hp-value:hover .hp-valuecircle{ transform:rotateY(180deg); }

/* --- Stat box (About) --- */
.hp-home .hp-statbox{ padding:24px; background:rgba(9,72,179,.05); border-radius:20px; text-align:center; transition:all .3s; }
.hp-home .hp-statbox:hover{ background:rgba(9,72,179,.1); transform:translateY(-4px); }

/* --- Promo: hero radial + dekor --- */
.hp-home .hp-promo-hero{ background:radial-gradient(circle at 30% 50%, #0a58ca, var(--hp-primary)); }
.hp-home .hp-promo-hero::before{ content:''; position:absolute; width:800px; height:800px; background:rgba(255,255,255,.04); border-radius:50%; top:-300px; right:-300px; pointer-events:none; }
/* countdown box (glass) */
.hp-home .hp-countbox{ background:rgba(255,255,255,.12); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.2); border-radius:20px; padding:1.2rem; min-width:82px; text-align:center; }
.hp-home .hp-countbox .num{ font-size:2.5rem; font-weight:800; line-height:1; color:#fff; }
.hp-home .hp-countbox .lbl{ font-size:.72rem; opacity:.85; text-transform:uppercase; letter-spacing:1px; }
@media (max-width:576px){ .hp-home .hp-countbox{ padding:.8rem; min-width:62px; } .hp-home .hp-countbox .num{ font-size:1.8rem; } }
/* kartu diskon (dashed) */
.hp-home .hp-disccard{ position:relative; overflow:hidden; border:2px dashed #dee2e6!important; border-radius:20px; transition:all .3s; }
.hp-home .hp-disccard:hover{ border-color:var(--hp-primary)!important; transform:translateY(-8px); box-shadow:0 1.25rem 2.5rem rgba(0,0,0,.12)!important; }
.hp-home .hp-disc-badge{ position:absolute; top:-6px; right:-6px; background:#ffc107; color:#000; font-weight:800; padding:.4rem 1rem; border-radius:50px; font-size:1rem; transform:rotate(5deg); box-shadow:0 4px 12px rgba(0,0,0,.15); }
/* ikon langkah promo */
.hp-home .hp-step-promo{ width:72px; height:72px; border-radius:50%; background:var(--hp-primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:1.9rem; margin-bottom:1rem; box-shadow:0 8px 20px rgba(9,72,179,.25); }