/* =========================================================================
   HackBiz — theme.css
   Satu berkas untuk seluruh gaya. Urutan: token → dasar → tata letak →
   komponen → bagian → responsif.
   ========================================================================= */

/* ---------- 1. Token ---------- */

:root{
  /* Warna diambil dari logo: hitam kebiruan, putih, emas. Merah dipakai
     sangat hemat — hanya untuk penanda "masalah", bukan tombol utama. */
  --deep:#0B1220;          /* biru gelap — footer & blok khas */
  --deep-2:#111C2E;        /* lapis lebih terang di atas deep */
  --ink:#101828;           /* teks utama */
  --muted:#5B6676;         /* teks sekunder */
  --paper:#ffffff;
  --mist:#F5F7FA;          /* latar seksi terang */
  --rule:#E4E8EE;

  --gold:#E0A82E;
  --gold-2:#F3C75B;
  --gold-deep:#B9871B;
  --red:#E0392B;

  --wrap:1180px;
  --gutter:clamp(1.15rem,4vw,2rem);

  /* Skala tipografi ditahan: judul Indonesia panjang, hero besar
     akan menenggelamkan tombol di layar pertama ponsel. */
  --t-hero:clamp(1.72rem,4.2vw,3.15rem);
  --t-h2:clamp(1.5rem,2.8vw,2.15rem);
  --t-h3:clamp(1.1rem,1.6vw,1.3rem);
  --t-body:clamp(.98rem,1.05vw,1.05rem);

  --r:14px;
  --r-lg:20px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sh-1:0 1px 2px rgba(16,24,40,.05), 0 6px 20px rgba(16,24,40,.06);
  --sh-2:0 12px 34px rgba(16,24,40,.10);
  --sh-gold:0 6px 18px rgba(224,168,46,.30);
}

/* ---------- 2. Dasar ---------- */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

:target,[id]{scroll-margin-top:84px}

body{
  margin:0;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.68;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}

h1,h2,h3,h4{
  font-weight:600;          /* sengaja tidak 700 — permintaan: jangan terlalu tebal */
  line-height:1.22;
  letter-spacing:-.018em;
  margin:0 0 .55em;
  color:var(--ink);
}
h1{font-size:var(--t-hero)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
p{margin:0 0 1.05em}

.aksen{color:var(--gold-deep)}
.blok-gelap .aksen,.footer .aksen{color:var(--gold-2)}

/* Label teknis bergaya terminal — ini bagian dari "rasa hack" */
.eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-deep);
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  margin-bottom:.9rem;
}
.eyebrow::before{
  content:"";
  width:14px;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.blok-gelap .eyebrow{color:var(--gold-2)}
.blok-gelap .eyebrow::before{background:linear-gradient(90deg,var(--gold-2),transparent)}

/* ---------- 3. Tata letak ---------- */

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.seksi{padding-block:clamp(3.2rem,7vw,5.4rem)}
.seksi--mist{background:var(--mist)}
.kepala{max-width:56ch;margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.kepala p{color:var(--muted);margin-bottom:0}
.blok-gelap .kepala p{color:#A9B4C4}

.grid{display:grid;gap:1.1rem}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

/* ---------- 4. Blok khas: latar data ----------
   Ciri visual HackBiz. Biru gelap + kisi titik + busur emas —
   turunan langsung dari lingkaran panah di logo. */

.blok-gelap{
  position:relative;
  background:var(--deep);
  color:#E6EAF0;
  overflow:hidden;
  isolation:isolate;
}
.blok-gelap h1,.blok-gelap h2,.blok-gelap h3{color:#fff}

/* kisi titik */
.blok-gelap::before{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:22px 22px;
  opacity:.4;
  z-index:-2;
  mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000 20%,transparent 78%);
}
/* pendar emas */
.blok-gelap::after{
  content:"";
  position:absolute;
  top:-28%;right:-14%;
  width:min(620px,78vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(224,168,46,.20),transparent 62%);
  z-index:-2;
  pointer-events:none;
}

/* busur emas — versi sederhana dari lingkaran panah logo */
.busur{
  position:absolute;
  right:-9%;top:50%;
  translate:0 -50%;
  width:min(560px,72vw);
  opacity:.5;
  z-index:-1;
  pointer-events:none;
}
.busur circle{fill:none;stroke:url(#hbArc);stroke-width:1.4;stroke-dasharray:6 10}

/* motif batang naik — dipakai sebagai penanda seksi */
.batang{display:inline-flex;align-items:flex-end;gap:3px;height:16px}
.batang i{width:4px;background:var(--gold);border-radius:1px;display:block}
.batang i:nth-child(1){height:42%}
.batang i:nth-child(2){height:68%}
.batang i:nth-child(3){height:100%;background:linear-gradient(180deg,var(--gold-2),var(--gold))}

/* ---------- 5. Tombol ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.82rem 1.5rem;
  border-radius:999px;
  font-weight:600;font-size:.94rem;letter-spacing:-.01em;
  text-decoration:none;border:0;cursor:pointer;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-emas{
  background:linear-gradient(135deg,var(--gold-2) 0%,var(--gold) 55%,var(--gold-deep) 100%);
  color:#241A05;
  box-shadow:var(--sh-gold);
}
.btn-emas:hover{box-shadow:0 10px 26px rgba(224,168,46,.42)}

.btn-gelap{
  background:linear-gradient(135deg,var(--deep-2),var(--deep));
  color:#fff;
  box-shadow:0 6px 18px rgba(11,18,32,.28);
}

.btn-garis{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--rule);
}
.btn-garis:hover{box-shadow:inset 0 0 0 1.5px var(--gold)}
.blok-gelap .btn-garis{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26)}
.blok-gelap .btn-garis:hover{box-shadow:inset 0 0 0 1.5px var(--gold-2)}

.btn-blok{width:100%}
.btn .ikon{width:18px;height:18px}

/* ---------- 6. Header ---------- */

.pita-emas{
  position:fixed;left:0;right:0;top:0;height:3px;z-index:80;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-2),var(--gold));
}

.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:66px}

.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex-shrink:0}
.brand img{max-height:40px;width:auto}
.brand-teks{font-weight:700;letter-spacing:-.03em;font-size:1.15rem;line-height:1}
.brand-teks span{color:var(--gold-deep)}
.brand-tag{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:.52rem;letter-spacing:.22em;color:var(--muted);
  margin-top:3px;text-transform:uppercase;
}

.nav ul{display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0}
.nav a{
  text-decoration:none;font-size:.92rem;font-weight:500;color:var(--ink);
  padding:.5rem .78rem;border-radius:8px;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.nav a:hover{background:var(--mist);color:var(--gold-deep)}
.nav .current-menu-item>a{color:var(--gold-deep)}

.header-aksi{display:flex;align-items:center;gap:.6rem}

.burger{
  display:none;
  width:42px;height:42px;border-radius:10px;
  border:1px solid var(--rule);background:#fff;
  align-items:center;justify-content:center;cursor:pointer;
}
.burger span{display:block;width:17px;height:1.6px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:17px;height:1.6px;background:var(--ink);
  transition:transform .24s var(--ease),top .24s var(--ease);
}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---------- 7. Hero ---------- */

.hero{padding-block:clamp(3rem,8vw,5.6rem)}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
.hero h1{margin-bottom:.7rem;max-width:19ch}
.hero-lede{font-size:clamp(1rem,1.3vw,1.1rem);color:#B7C1CF;max-width:52ch;margin-bottom:1.7rem}
.hero-aksi{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:2.1rem}

.statistik{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12)}
.statistik b{
  display:block;font-size:1.45rem;font-weight:700;letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1.15;
}
.statistik span{font-size:.82rem;color:#96A3B4;display:block;margin-top:.15rem}

/* panel terminal di sisi kanan hero */
.terminal{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-lg);
  padding:1.15rem 1.25rem 1.35rem;
  box-shadow:0 22px 60px rgba(0,0,0,.34);
  backdrop-filter:blur(6px);
}
.terminal-bar{display:flex;gap:6px;margin-bottom:1rem}
.terminal-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18);display:block}
.terminal-bar i:first-child{background:rgba(224,57,43,.75)}
.terminal-bar i:nth-child(2){background:rgba(224,168,46,.8)}
.terminal-baris{
  font-family:'JetBrains Mono',monospace;
  font-size:.74rem;line-height:2.05;color:#9FB0C4;
  margin:0;
}
.terminal-baris b{color:var(--gold-2);font-weight:500}
.terminal-baris em{color:#fff;font-style:normal}
.terminal-baris .ok{color:#4ED08A}
.terminal-baris .warn{color:var(--red)}

/* ---------- 8. Kartu layanan ---------- */

.kartu{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:1.5rem 1.4rem;
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  position:relative;overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.kartu::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--ease);
}
.kartu:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#D8DEE7}
.kartu:hover::after{transform:scaleX(1)}

.kartu-ikon{
  width:46px;height:46px;border-radius:13px;
  display:grid;place-items:center;margin-bottom:1rem;
  background:linear-gradient(140deg,rgba(243,199,91,.22),rgba(224,168,46,.10));
  color:var(--gold-deep);
  box-shadow:inset 0 0 0 1px rgba(224,168,46,.22);
}
.kartu-ikon .ikon{width:22px;height:22px}
.kartu h3{margin-bottom:.4rem;font-size:1.06rem}
.kartu p{color:var(--muted);font-size:.92rem;margin-bottom:1rem;flex-grow:1}
.kartu-kaki{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding-top:.85rem;border-top:1px dashed var(--rule);
  font-size:.82rem;color:var(--muted);
}
.kartu-kaki strong{color:var(--gold-deep);font-weight:600}
.kartu-panah{color:var(--gold-deep);transition:transform .28s var(--ease)}
.kartu:hover .kartu-panah{transform:translateX(4px)}

/* label pilar */
.pilar-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--rule);border-radius:999px;
  padding:.22rem .6rem;display:inline-block;margin-bottom:.9rem;
}

/* ---------- 9. Alur kerja ---------- */

.alur{counter-reset:l;display:grid;gap:1.1rem}
.alur-item{
  position:relative;
  background:#fff;border:1px solid var(--rule);border-radius:var(--r);
  padding:1.35rem 1.3rem 1.3rem 3.6rem;
}
.alur-item::before{
  counter-increment:l;content:counter(l,decimal-leading-zero);
  position:absolute;left:1.25rem;top:1.35rem;
  font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:500;
  color:var(--gold-deep);
}
.alur-item h3{font-size:1rem;margin-bottom:.3rem}
.alur-item p{margin:0;color:var(--muted);font-size:.92rem}

/* ---------- 10. FAQ ---------- */

.faq-item{border-bottom:1px solid var(--rule)}
.faq-tanya{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:1.15rem 2.4rem 1.15rem 0;position:relative;
  font-weight:600;font-size:1rem;color:var(--ink);line-height:1.5;
}
.faq-tanya::after{
  content:"";position:absolute;right:.35rem;top:50%;
  width:9px;height:9px;
  border-right:1.8px solid var(--gold-deep);border-bottom:1.8px solid var(--gold-deep);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .26s var(--ease);
}
.faq-tanya[aria-expanded="true"]::after{transform:translateY(-30%) rotate(-135deg)}
.faq-jawab{overflow:hidden;max-height:0;transition:max-height .34s var(--ease)}
.faq-jawab-in{padding:0 2.4rem 1.25rem 0;color:var(--muted);font-size:.94rem}
.faq-jawab p:last-child{margin-bottom:0}

/* ---------- 11. Form pesanan ---------- */

.form-kotak{
  background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(1.3rem,3vw,2rem);box-shadow:var(--sh-1);
}
.form-baris{display:grid;gap:1rem;margin-bottom:1rem}
.form-baris.dua{grid-template-columns:1fr 1fr}
.field label{
  display:block;font-size:.82rem;font-weight:600;margin-bottom:.35rem;color:var(--ink);
}
.field input,.field select,.field textarea{
  width:100%;padding:.72rem .85rem;
  border:1px solid var(--rule);border-radius:10px;
  font:inherit;font-size:.94rem;color:var(--ink);background:#fff;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(224,168,46,.16);
}
.field small{display:block;color:var(--muted);font-size:.76rem;margin-top:.3rem}

.pratinjau{
  background:var(--mist);border:1px dashed var(--rule);border-radius:12px;
  padding:.95rem 1rem;margin-bottom:1.1rem;
}
.pratinjau b{
  display:block;font-family:'JetBrains Mono',monospace;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;
}
.pratinjau pre{
  margin:0;white-space:pre-wrap;word-break:break-word;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:.86rem;color:var(--ink);line-height:1.6;
}

/* ---------- 12. Artikel ---------- */

.artikel-kartu{
  background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.artikel-kartu:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.artikel-kartu .thumb{aspect-ratio:16/9;background:var(--mist);overflow:hidden}
.artikel-kartu .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.artikel-kartu:hover .thumb img{transform:scale(1.04)}
.artikel-isi{padding:1.15rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex-grow:1}
.artikel-meta{
  font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;
}
.artikel-kartu h3{font-size:1rem;margin-bottom:.4rem}
.artikel-kartu p{font-size:.9rem;color:var(--muted);margin:0}

.prosa{max-width:70ch}
.prosa h2{margin-top:2rem}
.prosa h3{margin-top:1.6rem}
.prosa ul,.prosa ol{padding-left:1.2rem}
.prosa li{margin-bottom:.4rem}
.prosa img{border-radius:var(--r);margin-block:1.4rem}
.prosa blockquote{
  margin:1.6rem 0;padding:.2rem 0 .2rem 1.2rem;
  border-left:3px solid var(--gold);color:var(--muted);font-style:italic;
}
.prosa a{color:var(--gold-deep);text-underline-offset:3px}

/* ---------- 13. Footer ---------- */

.footer{background:var(--deep);color:#9FAABA;padding-block:clamp(2.6rem,6vw,4rem) 0}
.footer h4{color:#fff;font-size:.95rem;margin-bottom:.9rem;font-weight:600}
.footer a{color:#9FAABA;text-decoration:none;transition:color .18s var(--ease)}
.footer a:hover{color:var(--gold-2)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2rem}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.9rem}
.footer-brand p{font-size:.9rem;max-width:34ch;margin-top:.9rem}
.footer-bawah{
  margin-top:2.4rem;padding-block:1.2rem;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;justify-content:space-between;
  font-size:.8rem;
}
.footer-kontak{display:grid;gap:.6rem;font-size:.9rem}
.footer-kontak div{display:flex;gap:.6rem;align-items:flex-start}
.footer-kontak .ikon{width:16px;height:16px;color:var(--gold);flex-shrink:0;margin-top:4px}

/* ---------- 14. Tombol WA melayang ---------- */

.wa-float{
  position:fixed;right:1rem;bottom:1rem;z-index:70;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.72rem 1.1rem;border-radius:999px;
  background:linear-gradient(135deg,#2ECC71,#1EA85C);
  color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;
  box-shadow:0 8px 24px rgba(30,168,92,.36);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(30,168,92,.46)}
.wa-float .ikon{width:20px;height:20px}

/* ---------- 15. Landing page ---------- */

.mode-landing .site-header .nav,
.mode-landing .site-header .burger{display:none}
.lp-hero{padding-block:clamp(2.4rem,6vw,4.4rem)}
.lp-grid{display:grid;grid-template-columns:1fr .9fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}
.lp-usp{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.7rem}
.lp-usp li{display:flex;gap:.65rem;align-items:flex-start;font-size:.96rem;color:#C3CCD9}
.lp-usp .ceklis{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;
  background:rgba(224,168,46,.16);color:var(--gold-2);
  display:grid;place-items:center;margin-top:2px;
}
.lp-usp .ceklis svg{width:11px;height:11px}

/* ---------- 16. Animasi masuk ---------- */

.muncul{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.muncul.tampil{opacity:1;transform:none}
.muncul:nth-child(2){transition-delay:.07s}
.muncul:nth-child(3){transition-delay:.14s}
.muncul:nth-child(4){transition-delay:.21s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .muncul{opacity:1;transform:none}
}

/* ---------- 17. Responsif (mobile-first tetap diuji dari bawah) ---------- */

@media (max-width:1000px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.8rem}
}

@media (max-width:860px){
  .hero-grid,.lp-grid{grid-template-columns:1fr}
  .g-3{grid-template-columns:repeat(2,1fr)}

  .burger{display:inline-flex}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:1px solid var(--rule);
    box-shadow:var(--sh-2);
    max-height:0;overflow:hidden;
    transition:max-height .3s var(--ease);
  }
  .nav.buka{max-height:70vh;overflow:auto}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--gutter) 1rem}
  .nav a{display:block;padding:.8rem .2rem;border-bottom:1px solid var(--rule);border-radius:0}
  .header-aksi .btn-emas{display:none}
}

@media (max-width:560px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .form-baris.dua{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .statistik{gap:1.1rem 1.8rem}
  .statistik b{font-size:1.25rem}
  .hero-aksi .btn{width:100%}
  .wa-float span{display:none}
  .wa-float{padding:.85rem;border-radius:50%}
}

/* ---------- 18. Dua kolom (dipakai di Cara Kerja & halaman Layanan) ---------- */

.kolom-2{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:start}
.kolom-2--kiri{grid-template-columns:.85fr 1.15fr}
.kolom-2--isi{grid-template-columns:1.4fr .8fr}
.sisi{display:grid;gap:1rem;position:sticky;top:88px}

@media (max-width:860px){
  .kolom-2--kiri,.kolom-2--isi{grid-template-columns:1fr}
  .sisi{position:static;top:auto}
}

/* ---------- 19. Paginasi ---------- */

.pagination,.nav-links{display:flex;flex-wrap:wrap;gap:.4rem}
.page-numbers{
  display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 .7rem;
  border:1px solid var(--rule);border-radius:10px;
  text-decoration:none;font-size:.9rem;color:var(--ink);
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.page-numbers:hover{border-color:var(--gold);color:var(--gold-deep)}
.page-numbers.current{
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  border-color:transparent;color:#241A05;font-weight:600;
}
.screen-reader-text{position:absolute;left:-9999px}

/* ---------- 20. Lompat ke konten (aksesibilitas) ---------- */

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--deep);color:#fff;
  padding:.7rem 1.1rem;border-radius:0 0 10px 0;
  text-decoration:none;font-size:.9rem;
}
.skip:focus{left:0}

/* =========================================================================
   21. Perbaikan v1.1 — hasil peninjauan tampilan ponsel
   ========================================================================= */

/* Ruang untuk tombol WA melayang supaya tidak menutup teks terakhir */
body{padding-bottom:0}
@media (max-width:560px){ body{padding-bottom:4.5rem} }

/* --- Hero: teks dulu, terminal menyusul --- */
@media (max-width:860px){
  .hero{padding-block:clamp(1.9rem,6vw,3rem)}
  .hero h1{max-width:none}
  .hero-lede{font-size:.98rem;margin-bottom:1.3rem}
  .hero-aksi{margin-bottom:1.5rem}

  /* Terminal jadi bukti pendukung, bukan pembuka */
  .terminal{margin-top:1.9rem;padding:1rem 1.05rem 1.15rem}
  .terminal-baris{font-size:.7rem;line-height:1.95}
}

/* --- Jarak antar seksi di ponsel: sebelumnya menyisakan area kosong lebar --- */
@media (max-width:860px){
  .seksi{padding-block:2.6rem}
  .kepala{margin-bottom:1.5rem}
}

/* --- Kisi titik diredam di layar kecil supaya teks tetap nyaman dibaca --- */
@media (max-width:860px){
  .blok-gelap::before{opacity:.22;background-size:26px 26px}
  .busur{opacity:.3}
}

/* --- Kartu gejala: lebih padat, penanda lebih tegas --- */
.gejala-kartu{
  display:flex;gap:.75rem;align-items:flex-start;
  background:#fff;border:1px solid var(--rule);border-radius:var(--r);
  padding:.95rem 1.05rem;
  font-size:.94rem;line-height:1.55;
}
.gejala-kartu::before{
  content:"";flex-shrink:0;
  width:3px;align-self:stretch;border-radius:2px;
  background:linear-gradient(180deg,var(--red),rgba(224,57,43,.25));
}
@media (max-width:560px){
  .gejala-kartu{padding:.85rem .95rem;font-size:.91rem}
}

/* --- Tombol aksi di bagian Cara Kerja: turun ke bawah daftar langkah --- */
.aksi-alur{margin-top:1.2rem}
@media (max-width:860px){
  .kolom-2--kiri{display:flex;flex-direction:column}
  .kolom-2--kiri .kepala{order:1}
  .kolom-2--kiri .alur{order:2}
  .kolom-2--kiri .aksi-alur{order:3;margin-top:1.4rem}
  .aksi-alur .btn{width:100%}
}

/* --- Header ponsel: tagline disembunyikan, CTA tetap ada sebagai ikon --- */
@media (max-width:560px){
  .brand-tag{display:none}
  .header-in{min-height:58px}
  .brand-teks{font-size:1.08rem}
}

/* --- Footer: dua kolom di ponsel, bukan empat baris memanjang --- */
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.6rem 1.2rem}
  .footer-brand,.footer-grid>div:last-child{grid-column:1 / -1}
  .footer{padding-block:2.2rem 0}
}

/* --- Blok "Kenapa HackBiz": beri jarak baca yang lebih lega --- */
.beda-item{padding:1.35rem 0;border-top:1px solid rgba(255,255,255,.12)}
@media (max-width:860px){
  .beda-item{padding:1.15rem 0}
  .beda-item p{font-size:.9rem}
}

/* --- Kartu layanan belum terbit: jangan terlihat seperti kerusakan --- */
.kartu--contoh{cursor:default}
.kartu--contoh:hover{transform:none;box-shadow:none;border-color:var(--rule)}
.kartu--contoh:hover::after{transform:scaleX(0)}

/* ---------- 22. Logo footer ---------- */

.footer-logo{
  max-height:56px;width:auto;height:auto;
  margin-bottom:.2rem;
}
@media (max-width:560px){ .footer-logo{max-height:44px} }