/* =============================================================================
   agz-landing.css - lapisan desain halaman landing agendiz.cloud
   Dipasang oleh ops/tambalan/landing-brand/agz-patch-landing-brand.sh ke
   <app>/public/custom/agz-landing.css dan dimuat di semua halaman landing
   statis SESUDAH <style> bawaan halaman, jadi aturan di sini menang tanpa
   !important (kecuali menimpa style="" inline).

   Isi:
     1. Font tulisan tangan Caveat (aksen) + token
     2. Penyegaran tampilan terang (header, tombol, kartu, aksen Caveat)
     3. Interaksi (muncul saat di-scroll, progres baca, tombol ke atas, tema)
     4. Mode gelap: aktif bila <html data-agz-theme="dark">. Atribut ini
        dipasang skrip kecil di <head> (ikut pengaturan perangkat, atau
        pilihan pengunjung lewat tombol tema).
     5. Perbaikan audit jury 7 Nov 2026: kontras, efek hover, tombol chat vs
        banner cookie di HP, target sentuh footer, ruang logo (CLS), tabel
        perbandingan harga di HP.
     6. Teks lebih tebal + interaksi per section (bilah kategori menempel,
        sorotan kartu, mockup miring, daftar fitur, garis waktu, harga berganti).
     7. Hero beranda: badge Tech Provider dan tautan biro travel ditata ulang.
     8. Transisi antarhalaman, banner cookie ringkas di HP, target menu desktop 44 px.
   Tanpa JavaScript halaman tetap tampil normal dalam mode terang.
   ============================================================================= */

/* ---------- 1. Font & token ---------- */
/* Caveat (SIL OFL 1.1), satu ketebalan (600), huruf Latin. Lisensi: fonts/OFL-caveat.txt */
@font-face{font-family:"Caveat";font-style:normal;font-weight:600;font-display:swap;
  src:url(/custom/fonts/agz-caveat-600.woff2) format("woff2")}

:root{
  --agz-hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  --agz-bg:#fff; --agz-surface:#fff; --agz-surface-2:#fff;
  --agz-deep:var(--teal); --agz-tint:#F2F8F3; --agz-tint-line:#E1EFE3;
  --agz-shadow:0 24px 50px -32px rgba(11,31,28,.32);
  --agz-ease:cubic-bezier(.2,.7,.2,1);
  /* garis tangan di bawah kata yang ditekankan */
  --agz-scribble:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9.5C38 4.5 78 3 118 4.8c27 1.2 52 3 80 5.4' fill='none' stroke='%2325D366' stroke-width='3.2' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E");
}

/* ---------- 2. Penyegaran tampilan ---------- */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:var(--mint-line);color:var(--ink)}

/* header: bayangan halus saat halaman di-scroll */
.site-header{transition:box-shadow .25s ease,background-color .25s ease,border-color .25s ease}
.site-header.agz-scrolled{box-shadow:0 10px 30px -22px rgba(11,31,28,.45)}

/* tombol: angkat sedikit saat disorot, tekan saat diklik */
.btn,.pill,.plan .cta,.legal-btn,.pillbtn,.chips a,.topic a,.bcats button,.mobile-menu .m-cta a{
  transition:transform .18s var(--agz-ease),box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
.btn:hover,.pill:hover,.plan .cta:hover,.legal-btn:hover{transform:translateY(-1px)}
.btn:active,.pill:active,.plan .cta:active,.legal-btn:active{transform:translateY(0) scale(.98)}
.btn-wa{box-shadow:0 12px 26px -14px rgba(37,211,102,.75)}
.btn-wa:hover{box-shadow:0 16px 30px -14px rgba(37,211,102,.85)}
.pill{box-shadow:0 10px 22px -14px rgba(15,94,82,.8)}

/* kartu: terangkat saat disorot (hanya kartu statis, bukan panggung animasi) */
.plan,.bcard,.ch-card,.quote,.office,.facts,.hub-card,.jump{transition:transform .25s var(--agz-ease),box-shadow .25s ease,border-color .25s ease}
@media (hover:hover){
  .plan:hover,.ch-card:hover,.quote:hover{transform:translateY(-4px);box-shadow:0 28px 50px -34px rgba(11,31,28,.45)}
  .bcard:hover{transform:translateY(-3px)}
}

/* aksen tulisan tangan (Caveat) */
h1 em,.cta-final h2 span,.rot .w{
  font-family:var(--agz-hand);font-weight:600;font-style:normal;letter-spacing:0;
  font-size:1.18em;line-height:.85}
h1 em,.cta-final h2 span{
  background:var(--agz-scribble) no-repeat 0 100% / 100% .3em;padding:0 .04em .12em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.cap{font-family:var(--agz-hand);font-weight:600;font-size:19px;letter-spacing:0;color:var(--ink-500)}
.kicker,.kicker2{font-family:var(--agz-hand);font-weight:600;font-size:20px;letter-spacing:0;line-height:1.1}
.f-brand p{font-family:var(--agz-hand);font-weight:600;font-size:21px;line-height:1.3;color:var(--ink-600)}

/* ---------- 3. Interaksi ---------- */
/* muncul saat di-scroll: kelas dipasang JS hanya untuk elemen di bawah layar */
.agz-rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s var(--agz-ease)}
.agz-rv.agz-in{opacity:1;transform:none}

/* progres baca (artikel blog dan dokumen legal) */
.agz-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--green),var(--teal));transform-origin:0 50%;transform:scaleX(0)}

/* tombol kembali ke atas */
.agz-top{position:fixed;left:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:35;width:44px;height:44px;
  border-radius:999px;border:1px solid var(--line);background:var(--agz-surface);color:var(--ink-700);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 30px -18px rgba(11,31,28,.5);
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .25s ease,transform .25s var(--agz-ease)}
.agz-top.on{opacity:1;transform:none;pointer-events:auto}
.agz-top:hover{color:var(--teal);border-color:var(--line-2)}
.agz-top svg{width:18px;height:18px}

/* tombol tema (Otomatis / Terang / Gelap) */
.agz-tt{flex:none;width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--ink-700);display:inline-grid;place-items:center;cursor:pointer;padding:0;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease,transform .2s var(--agz-ease)}
.agz-tt:hover{color:var(--teal);border-color:var(--line-2)}
.agz-tt:active{transform:scale(.94)}
.agz-tt svg{width:18px;height:18px}
.agz-tt-m{display:none;margin-left:auto}
@media (max-width:1023px){
  .agz-tt-m{display:inline-grid}
  .agz-tt-m + .burger{margin-left:4px}
}

/* peta kantor (Admin -> Map iframe URL), dipasang oleh skrip sinkron */
.agz-map{margin-top:18px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--paper)}
.agz-map iframe{display:block;width:100%;height:340px;border:0}

/* logo per tema */
picture.agz-logo{display:contents}

@media (prefers-reduced-motion:reduce){
  .agz-rv{opacity:1!important;transform:none!important}
  .agz-top,.agz-tt,.plan,.bcard,.ch-card,.quote{transition:none!important}
}

/* ---------- 4. Mode gelap ---------- */
:root[data-agz-theme="dark"]{
  color-scheme:dark;
  --ink:#EAF2EF; --ink-700:#C4D2CE; --ink-600:#A2B4AF; --ink-500:#80938E; --ink-400:#5E716C;
  --teal:#3DCCAA; --teal-2:#66DCBF; --green:#25D366; --green-ink:#05261A;
  --mint:#12302A; --mint-line:#1E4A3F; --bubble:#0F4D3A; --chat:#0D1715;
  --paper:#111B19; --paper-50:#16221F; --line:#22312D; --line-2:#2E403B;
  --coral:#F08C70; --amber:#EDB062; --sky:#72A8CC;
  --agz-bg:#0A1110; --agz-surface:#111A18; --agz-surface-2:#17231F;
  --agz-deep:#0F5E52; --agz-tint:#0F2420; --agz-tint-line:#1E4A3F;
  --agz-shadow:0 24px 50px -30px rgba(0,0,0,.7);
}
:root[data-agz-theme="dark"] body{background:var(--agz-bg);color:var(--ink-700)}
:root[data-agz-theme="dark"] ::selection{background:#1E4A3F;color:#fff}

/* permukaan putih -> permukaan gelap */
:root[data-agz-theme="dark"] .mobile-menu,
:root[data-agz-theme="dark"] .card,
:root[data-agz-theme="dark"] .daychip,
:root[data-agz-theme="dark"] .bb,
:root[data-agz-theme="dark"] .toast,
:root[data-agz-theme="dark"] .composer,
:root[data-agz-theme="dark"] .g-head,
:root[data-agz-theme="dark"] .gb,
:root[data-agz-theme="dark"] .gday,
:root[data-agz-theme="dark"] .attrib,
:root[data-agz-theme="dark"] .prompt,
:root[data-agz-theme="dark"] .node,
:root[data-agz-theme="dark"] .legend,
:root[data-agz-theme="dark"] .plan,
:root[data-agz-theme="dark"] .billing,
:root[data-agz-theme="dark"] #cmpTable tr.grp th,
:root[data-agz-theme="dark"] .wa-win,
:root[data-agz-theme="dark"] .typing,
:root[data-agz-theme="dark"] .b-growth,
:root[data-agz-theme="dark"] .jump,
:root[data-agz-theme="dark"] .mk,
:root[data-agz-theme="dark"] .nd,
:root[data-agz-theme="dark"] .sug,
:root[data-agz-theme="dark"] .pillbtn.ghost,
:root[data-agz-theme="dark"] .prod,
:root[data-agz-theme="dark"] .slot,
:root[data-agz-theme="dark"] .pipe,
:root[data-agz-theme="dark"] .cost em,
:root[data-agz-theme="dark"] .facts,
:root[data-agz-theme="dark"] .quote,
:root[data-agz-theme="dark"] .ch-card,
:root[data-agz-theme="dark"] .office,
:root[data-agz-theme="dark"] .ldocs-wrap,
:root[data-agz-theme="dark"] .lhelp,
:root[data-agz-theme="dark"] .ltoc,
:root[data-agz-theme="dark"] .bsearch input,
:root[data-agz-theme="dark"] .bcats button,
:root[data-agz-theme="dark"] .bcard,
:root[data-agz-theme="dark"] .bph i,
:root[data-agz-theme="dark"] .bmore button,
:root[data-agz-theme="dark"] .bghost,
:root[data-agz-theme="dark"] .bstate,
:root[data-agz-theme="dark"] .btyping .m,
:root[data-agz-theme="dark"] .btn-ig,
:root[data-agz-theme="dark"] .pshare a,
:root[data-agz-theme="dark"] .pshare button,
:root[data-agz-theme="dark"] .hub-card,
:root[data-agz-theme="dark"] .hub-cmp tbody th,
:root[data-agz-theme="dark"] .chips a,
:root[data-agz-theme="dark"] .topic a,
:root[data-agz-theme="dark"] .talk .kicker,
:root[data-agz-theme="dark"] .support-band .kicker,
:root[data-agz-theme="dark"] .ch-card.main .ic{background:var(--agz-surface)}
:root[data-agz-theme="dark"] .tl-item::before,
:root[data-agz-theme="dark"] .steps3 div::before{background:var(--agz-surface)}
:root[data-agz-theme="dark"] .plan .cta,
:root[data-agz-theme="dark"] .hub-vs button[aria-pressed="true"]{background:var(--agz-surface-2)}
:root[data-agz-theme="dark"] .flyer-bg{fill:var(--agz-surface-2)}
:root[data-agz-theme="dark"] .bsearch input{color:var(--ink)}
:root[data-agz-theme="dark"] .site-header{background:rgba(10,17,16,.82);border-bottom-color:var(--line)}
:root[data-agz-theme="dark"] .site-header.agz-scrolled{box-shadow:0 12px 30px -20px rgba(0,0,0,.8)}
:root[data-agz-theme="dark"] .float{background:rgba(17,26,24,.92)}
:root[data-agz-theme="dark"] .card,
:root[data-agz-theme="dark"] .toast,
:root[data-agz-theme="dark"] .node,
:root[data-agz-theme="dark"] .nd,
:root[data-agz-theme="dark"] .wa-win,
:root[data-agz-theme="dark"] .jump,
:root[data-agz-theme="dark"] .mk,
:root[data-agz-theme="dark"] .facts,
:root[data-agz-theme="dark"] .hub-card,
:root[data-agz-theme="dark"] .float,
:root[data-agz-theme="dark"] .bcard:hover,
:root[data-agz-theme="dark"] .agz-top{box-shadow:var(--agz-shadow)}
:root[data-agz-theme="dark"] .bb,
:root[data-agz-theme="dark"] .gb,
:root[data-agz-theme="dark"] .btyping .m{box-shadow:none}
:root[data-agz-theme="dark"] .bsk div,
:root[data-agz-theme="dark"] .psk{background:linear-gradient(90deg,var(--paper-50) 0%,var(--agz-surface-2) 50%,var(--paper-50) 100%)}

/* latar hijau muda -> hijau gelap */
:root[data-agz-theme="dark"] .talk,
:root[data-agz-theme="dark"] .support-band,
:root[data-agz-theme="dark"] .ch-card.main,
:root[data-agz-theme="dark"] .lsum,
:root[data-agz-theme="dark"] .lask,
:root[data-agz-theme="dark"] .bimg,
:root[data-agz-theme="dark"] .prose blockquote{background:var(--agz-tint);border-color:var(--agz-tint-line)}
:root[data-agz-theme="dark"] .bph{background-color:var(--agz-tint);background-image:radial-gradient(#1E4A3F 1.2px,transparent 1.2px)}
:root[data-agz-theme="dark"] .talk .kicker,
:root[data-agz-theme="dark"] .support-band .kicker,
:root[data-agz-theme="dark"] .chips a,
:root[data-agz-theme="dark"] .topic a,
:root[data-agz-theme="dark"] .lend .rel a,
:root[data-agz-theme="dark"] .b-growth,
:root[data-agz-theme="dark"] .cost em{border-color:var(--agz-tint-line)}
:root[data-agz-theme="dark"] .steps3 div::before{border-color:var(--agz-tint-line)}
:root[data-agz-theme="dark"] .steps3,
:root[data-agz-theme="dark"] .ch-card.main .meta{border-color:var(--agz-tint-line)}
:root[data-agz-theme="dark"] .bcats button:hover,
:root[data-agz-theme="dark"] .bcard:hover{border-color:var(--agz-tint-line)}
:root[data-agz-theme="dark"] .talk .kicker i{box-shadow:0 0 0 3px #173D30}
:root[data-agz-theme="dark"] .ldoc .lsum li::before{box-shadow:0 0 0 4px #173D30}
:root[data-agz-theme="dark"] .ldoc a,
:root[data-agz-theme="dark"] .prose a{text-decoration-color:#2C6B5C}
:root[data-agz-theme="dark"] .mk-note{border-color:#2C5B4F}

/* latar teal / tinta dengan teks putih: tetap teal tua agar teks putih terbaca */
:root[data-agz-theme="dark"] .pill,
:root[data-agz-theme="dark"] .mobile-menu .m-cta .a2,
:root[data-agz-theme="dark"] .ph-head,
:root[data-agz-theme="dark"] .win,
:root[data-agz-theme="dark"] .ai .badge,
:root[data-agz-theme="dark"] .plan.pop,
:root[data-agz-theme="dark"] .billing button.on,
:root[data-agz-theme="dark"] .wa-top,
:root[data-agz-theme="dark"] .chips a:hover,
:root[data-agz-theme="dark"] .b-pro,
:root[data-agz-theme="dark"] .mk .av,
:root[data-agz-theme="dark"] .slots span.on,
:root[data-agz-theme="dark"] .topic a:hover,
:root[data-agz-theme="dark"] .bcats button[aria-pressed="true"],
:root[data-agz-theme="dark"] .legal-btn,
:root[data-agz-theme="dark"] .lend .rel a:hover{background:var(--agz-deep)}
:root[data-agz-theme="dark"] .pill:hover,
:root[data-agz-theme="dark"] .legal-btn:hover{background:#12786A}
:root[data-agz-theme="dark"] .pill{box-shadow:0 10px 22px -14px rgba(0,0,0,.9)}
:root[data-agz-theme="dark"] .skip:focus,
:root[data-agz-theme="dark"] .consent,
:root[data-agz-theme="dark"] .b-ent{background:#1A2A27}
:root[data-agz-theme="dark"] .consent{border:1px solid var(--line-2)}
:root[data-agz-theme="dark"] .prose pre,
:root[data-agz-theme="dark"] .prose .embed{background:#070C0B;border:1px solid var(--line)}
:root[data-agz-theme="dark"] .consent .c-yes{color:#0A1110}
:root[data-agz-theme="dark"] .wa-top .av{color:#0F5E52}
:root[data-agz-theme="dark"] .plan.pop .cta{background:#EAF2EF;border-color:#EAF2EF;color:#0F5E52}
:root[data-agz-theme="dark"] .plan.pop{border-color:#1B7A6A}

/* chat tiruan WhatsApp: gelembung masuk/keluar ala WhatsApp mode gelap */
:root[data-agz-theme="dark"] .bb,
:root[data-agz-theme="dark"] .gb,
:root[data-agz-theme="dark"] .btyping .m{background:#1B2826}
:root[data-agz-theme="dark"] .bb.me,
:root[data-agz-theme="dark"] .gb.me{background:var(--bubble)}
:root[data-agz-theme="dark"] .daychip,
:root[data-agz-theme="dark"] .gday{background:#17221F;color:var(--ink-500)}
/* garis animasi di hero (atribut stroke di SVG) */
:root[data-agz-theme="dark"] #flight{stroke:#123A30}
:root[data-agz-theme="dark"] svg.path #flight + path{stroke:#2C6B5C}

/* label warna */
:root[data-agz-theme="dark"] .meta-badge{background:#0F1C30;border-color:#21406B;color:#86B6FF}
:root[data-agz-theme="dark"] .meta-badge span{color:#A3C2F2}
:root[data-agz-theme="dark"] .chip.warn{background:#33240F;color:#F0B566}
:root[data-agz-theme="dark"] thead .col-pro{background:#173A2D}
:root[data-agz-theme="dark"] .plan .current{background:#12352A;border-color:#2B7A4E}
:root[data-agz-theme="dark"] .plan.is-current{border-color:#2B7A4E}
:root[data-agz-theme="dark"] [data-fill]{background:#3A2F12}
:root[data-agz-theme="dark"] .st .wait,
:root[data-agz-theme="dark"] .status-row.bad i{box-shadow:0 0 0 4px #3A2A14}
:root[data-agz-theme="dark"] .gb .who{color:#F07AA8}
:root[data-agz-theme="dark"] .node.act .k,
:root[data-agz-theme="dark"] .nd.act small{color:#4CC38A}
:root[data-agz-theme="dark"] .tl-item.next .when,
:root[data-agz-theme="dark"] .chgrid .ch.rev small{color:#E8A85A}
:root[data-agz-theme="dark"] .chatmk .mk-foot{border-top-color:rgba(255,255,255,.06)}

/* kata berganti di hero: warna merek versi terang (menimpa style="" inline) */
:root[data-agz-theme="dark"] .rot .w:nth-child(1){color:#3DD68C!important}
:root[data-agz-theme="dark"] .rot .w:nth-child(2){color:#F06AB0!important}
:root[data-agz-theme="dark"] .rot .w:nth-child(3){color:#5AA2FF!important}
:root[data-agz-theme="dark"] .rot .w:nth-child(4){color:#4FB8EA!important}

/* gambar umum sedikit diredupkan agar tidak menyilaukan; logo tidak */
:root[data-agz-theme="dark"] .prose img,
:root[data-agz-theme="dark"] .bimg img{filter:brightness(.92)}

/* ---------- 5. Perbaikan audit jury (7 Nov 2026) ---------- */
/* 5a. Kontras teks abu (WCAG 4,5:1). #6B807C hanya 3,9 sampai 4,2:1 di latar putih/hijau muda */
:root:not([data-agz-theme="dark"]){--ink-500:#5A6E68}
.bcard .bc1{background:#B04A2A}
.bcard .bc3{background:#8F5A10}
:root[data-agz-theme="dark"] .gb.me small,
:root[data-agz-theme="dark"] .bb.me small{color:#A9BEB7}
.disclaimer,.f-bottom .disclaimer,.wa-foot span{color:var(--ink-500)}
/* label kecil di diagram alur (teks 10 sampai 11 px berwarna): versi lebih gelap di mode terang */
:root:not([data-agz-theme="dark"]) .trg .k,:root:not([data-agz-theme="dark"]) .trg small{color:#B5452A}
:root:not([data-agz-theme="dark"]) .wait .k,:root:not([data-agz-theme="dark"]) .wait small{color:#8A5A0F}
:root:not([data-agz-theme="dark"]) .act .k,:root:not([data-agz-theme="dark"]) .act small{color:#237047}
:root[data-agz-theme="dark"] .inf.col-pro,
:root[data-agz-theme="dark"] .on.mk-row small{color:#A9BEB7}

/* 5b. Efek hover yang terlihat (bukan hanya ganti warna teks) */
@media (hover:hover){
  .billing button:not(.on):hover{background:var(--mint);color:var(--teal)}
  .billing button.on:hover{background:var(--agz-deep);filter:brightness(1.12)}
  .cmp-more:hover{background:var(--agz-tint);color:var(--agz-deep)}
  .cmp-more:hover svg{transform:translateY(2px)}
  .cmp-more[aria-expanded="true"]:hover svg{transform:rotate(180deg) translateY(2px)}
  .consent .c-no:hover{background:rgba(255,255,255,.14);border-color:#fff}
  .consent .c-yes:hover{background:var(--green);border-color:var(--green);color:var(--green-ink)}
  .more:hover{background:var(--agz-tint)}
  .bcats button[aria-pressed="true"]:hover{background:var(--agz-deep);border-color:var(--agz-deep);box-shadow:0 8px 18px -10px rgba(15,94,82,.7)}
  .agz-tt:hover{background:var(--mint);border-color:var(--mint-line);color:var(--teal)}
  .agz-top:hover{background:var(--teal);border-color:var(--teal);color:#fff;transform:translateY(-2px)}
  button[id^="wsnap-launch-"]:hover{transform:translateY(-3px) scale(1.05)!important;box-shadow:0 18px 34px -14px rgba(11,31,28,.55)!important}
}
button[id^="wsnap-launch-"]{transition:transform .2s var(--agz-ease),box-shadow .2s ease!important}
/* link teks: garis bawah tersapu dari kiri */
.textlink{text-decoration:none;background:linear-gradient(var(--teal),var(--teal)) no-repeat 0 100%/0% 2px,
  linear-gradient(var(--line-2),var(--line-2)) no-repeat 0 100%/100% 2px;padding-bottom:4px;
  transition:background-size .35s var(--agz-ease),color .2s ease}
.textlink:hover{background-size:100% 2px,100% 2px;color:var(--teal)}

/* 5c. Fokus keyboard terlihat di tombol hijau */
.btn-wa:focus-visible{outline-color:var(--ink)}

/* 5d. HP: tombol chat dan tombol ke atas tidak menutupi banner cookie */
@media (max-width:760px){
  body:has(.consent.show) button[id^="wsnap-launch-"],
  body:has(.consent.show) .agz-top{opacity:0!important;pointer-events:none!important}
}

/* 5e. Target sentuh footer minimal 24 px (ritme baris tetap) */
.f-col ul{gap:4px}
.f-col a,.f-col button{display:inline-block;padding:4px 0}

/* 5f. Ruang logo dipesan sebelum gambar termuat, supaya menu tidak bergeser (CLS) */
.logo picture.agz-logo img{min-width:150px;object-position:left center}
.f-logo picture.agz-logo img{min-width:160px;object-position:left center}

/* 5g. Jarak garis tulisan tangan dengan paragraf pembuka */
h1:has(em) + .lead,h1:has(em) + p{margin-top:30px}

/* 5h. Tabel perbandingan harga di HP: kolom fitur tetap di kiri, sel lebih rapat, petunjuk geser */
@media (max-width:640px){
  #cmpTable{min-width:560px;font-size:13.5px}
  #cmpTable th,#cmpTable td{padding:11px 10px}
  #cmpTable th:first-child,#cmpTable td:first-child{position:sticky;left:0;z-index:1;width:132px;min-width:132px;
    padding-left:16px;background:var(--agz-surface);box-shadow:1px 0 0 var(--line)}
  #cmpTable thead th:first-child{background:var(--paper)}
  #cmpTable tr.grp th{box-shadow:none}
  .compare .hd{padding:18px 16px}
  .compare .hd::after{content:"Geser tabel ke samping untuk melihat paket lain \2192";flex-basis:100%;
    font-size:12.5px;font-weight:600;color:var(--teal)}
}
:root[data-agz-theme="dark"] #cmpTable thead th:first-child{background:var(--agz-surface-2)}

/* ---------- 6. Teks lebih tebal + interaksi per section (7 Nov 2026) ---------- */
/* 6a. Teks isi 400 -> 500 (font Plus Jakarta Sans variabel 200-800 sudah termuat di halaman) */
body{font-weight:500}

/* 6b. Bilah kategori menempel (dibuat agz-landing.js dari nav.jump) */
.agz-secbar{position:fixed;left:0;right:0;top:69px;z-index:30;pointer-events:none;opacity:0;transform:translateY(-8px);
  transition:opacity .25s ease,transform .25s var(--agz-ease)}
.agz-secbar.on{opacity:1;transform:none;pointer-events:auto}
.agz-secbar-in{max-width:var(--wrap,1200px);margin:0 auto;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  padding:8px var(--gutter,24px);background:color-mix(in srgb,var(--agz-surface) 88%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.agz-secbar-in::-webkit-scrollbar{display:none}
.agz-secbar a{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;font-size:14px;font-weight:600;
  color:var(--ink-700);text-decoration:none;border:1px solid var(--line);background:var(--agz-surface);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.agz-secbar a span{font-size:11.5px;font-weight:700;color:var(--teal)}
.agz-secbar a:hover{border-color:var(--teal);color:var(--teal)}
.agz-secbar a.agz-on{background:var(--teal);border-color:var(--teal);color:#fff}
.agz-secbar a.agz-on span{color:#CFF5DF}
:root[data-agz-theme="dark"] .agz-secbar a.agz-on{background:var(--agz-deep);border-color:var(--agz-deep)}
.agz-has-secbar .area{scroll-margin-top:124px}
.jump a.agz-on{background:var(--mint);color:var(--teal)}
:root[data-agz-theme="dark"] .jump a.agz-on{background:var(--agz-tint)}

/* 6c. Sorotan kartu (latar mengikuti kursor) */
.agz-spot{background-image:radial-gradient(380px circle at var(--agz-mx,50%) var(--agz-my,50%),rgba(37,211,102,.10),transparent 62%)}
:root[data-agz-theme="dark"] .agz-spot{background-image:radial-gradient(380px circle at var(--agz-mx,50%) var(--agz-my,50%),rgba(61,204,170,.12),transparent 62%)}

/* 6d. Mockup miring halus */
.agz-tilt{transition:transform .35s var(--agz-ease);will-change:transform}

/* 6e. Daftar fitur: baris yang disorot terangkat, garis aksen hijau */
.feat-list li{transition:background-color .25s ease,box-shadow .25s ease,padding .25s var(--agz-ease);border-radius:2px}
@media (hover:hover){
  .feat-list li:hover{background:var(--agz-tint);box-shadow:inset 3px 0 0 var(--green);padding-left:16px;padding-right:12px}
  .feat-list li:hover b{color:var(--teal)}
}
.feat-list li:active{background:var(--agz-tint)}

/* 6f. Garis waktu terisi */
.tl::after{content:"";position:absolute;left:7px;top:8px;width:2px;height:var(--agz-tl,0%);max-height:calc(100% - 16px);
  background:linear-gradient(180deg,var(--green),var(--teal));transition:height .15s linear}
.tl-item::before{z-index:1;transition:transform .35s var(--agz-ease),box-shadow .35s ease}
.tl-item.agz-lit::before{transform:scale(1.15);box-shadow:0 0 0 5px rgba(37,211,102,.18)}

/* 6g. Harga berganti */
@keyframes agz-flip{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.agz-flip{display:inline-block;animation:agz-flip .35s var(--agz-ease)}
.plan .per.agz-flip{display:block}

/* 6h. Ketuk di HP: umpan balik kecil */
@media (hover:none){
  .plan:active,.ch-card:active,.bcard:active,.hub-card:active{transform:scale(.985)}
}

@media (prefers-reduced-motion:reduce){
  .agz-secbar,.agz-tilt,.feat-list li,.tl::after,.tl-item::before{transition:none!important}
  .agz-flip{animation:none!important}
}

/* ---------- 7. Hero beranda: badge Tech Provider + tautan biro travel (review founder 7 Nov 2026) ---------- */
/* 7a. Badge: dari pil biru Facebook yang mencolok menjadi chip netral bergaya merek.
       Logo Meta TIDAK digambar di sini; bila file resmi dari Meta Brand Resources dipasang
       (<img src="/lp-assets/meta-logo.svg" alt="Meta"> di dalam .meta-badge), ukurannya sudah diatur. */
.hero .meta-badge{gap:10px;padding:6px 14px 6px 6px;background:var(--agz-surface);border:1px solid var(--line);color:var(--ink);
  font-size:13.5px;font-weight:700;letter-spacing:-.005em;box-shadow:0 10px 24px -20px rgba(11,31,28,.55);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s var(--agz-ease)}
.hero .meta-badge .chk{width:26px;height:26px;background:var(--mint);color:var(--teal);box-shadow:inset 0 0 0 1px var(--mint-line)}
.hero .meta-badge .chk svg{width:13px;height:13px}
.hero .meta-badge img{height:14px;width:auto;margin-right:-2px}
.hero .meta-badge span:not(.chk){font-weight:500;color:var(--ink-500)}
.hero .meta-badge::after{content:"";width:14px;height:14px;flex:none;background:var(--ink-400);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s var(--agz-ease),background-color .2s ease}
@media (hover:hover){
  .hero .meta-badge:hover{border-color:var(--mint-line);box-shadow:0 14px 28px -20px rgba(15,94,82,.6);transform:translateY(-1px)}
  .hero .meta-badge:hover::after{transform:translateX(3px);background:var(--teal)}
}
:root[data-agz-theme="dark"] .hero .meta-badge{background:var(--agz-surface);border-color:var(--line-2);color:var(--ink)}
:root[data-agz-theme="dark"] .hero .meta-badge .chk{background:var(--agz-tint);color:var(--teal-2);box-shadow:inset 0 0 0 1px var(--agz-tint-line)}

/* 7b. Tautan biro travel: dari baris teks lepas menjadi kartu segmen kecil yang bisa diklik utuh */
.hero .hero-niche{position:relative;display:inline-grid!important;grid-template-columns:40px auto 18px;column-gap:12px;row-gap:1px;align-items:center;
  margin:30px 0 0!important;padding:10px 16px 10px 10px;border:1px solid var(--line);border-radius:16px;background:var(--agz-surface);
  font-size:13px!important;line-height:1.35;color:var(--ink-500)!important;box-shadow:0 10px 24px -22px rgba(11,31,28,.55);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s var(--agz-ease)}
.hero .hero-niche::before{content:"";grid-row:1 / span 2;grid-column:1;width:40px;height:40px;border-radius:12px;
  background:var(--agz-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F5E52' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/%3E%3C/svg%3E") center/20px no-repeat;box-shadow:inset 0 0 0 1px var(--agz-tint-line)}
.hero .hero-niche a{grid-column:2;grid-row:2;color:var(--ink)!important;font-size:15px;font-weight:700!important;text-decoration:none}
.hero .hero-niche a::before{content:"";position:absolute;inset:0;border-radius:16px}
.hero .hero-niche::after{content:"";grid-column:3;grid-row:1 / span 2;width:16px;height:16px;background:var(--ink-400);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s var(--agz-ease),background-color .2s ease}
@media (hover:hover){
  .hero .hero-niche:hover{border-color:var(--mint-line);box-shadow:0 16px 30px -22px rgba(15,94,82,.6);transform:translateY(-2px)}
  .hero .hero-niche:hover a{color:var(--teal)!important}
  .hero .hero-niche:hover::after{transform:translateX(3px);background:var(--teal)}
}
.hero .hero-niche:focus-within{outline:3px solid var(--teal);outline-offset:3px}
.hero .hero-niche a:focus-visible{outline:none}
:root[data-agz-theme="dark"] .hero .hero-niche{border-color:var(--line-2)}
:root[data-agz-theme="dark"] .hero .hero-niche::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366DCBF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/%3E%3C/svg%3E")}
@media (max-width:640px){
  .hero .meta-badge{font-size:12.5px;margin-bottom:20px}
  .hero .hero-niche{display:grid!important;width:100%;margin-top:24px!important}
}
@media (prefers-reduced-motion:reduce){
  .hero .meta-badge,.hero .hero-niche,.hero .meta-badge::after,.hero .hero-niche::after{transition:none!important}
}

/* ---------- 8. Putaran 2 audit jury (7 Nov 2026) ---------- */
/* 8a. Transisi antarhalaman: pindah halaman memudar halus, header tetap di tempat.
       Browser yang belum mendukung (Firefox) tetap berpindah biasa. */
@view-transition{navigation:auto}
.site-header{view-transition-name:agz-header}
::view-transition-old(root){animation:agz-vt-out .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:agz-vt-in .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes agz-vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes agz-vt-in{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* 8b. Banner cookie di HP: lebih ringkas (teks lebih kecil, tombol lebih pendek) */
@media (max-width:640px){
  .consent{padding:12px 14px;gap:10px;border-radius:14px}
  .consent p{font-size:12.5px;line-height:1.45}
  .consent button{padding:9px 14px;font-size:13.5px}
}
.consent p a{display:inline-block;padding:3px 0}

/* 8c. Menu desktop: area klik 44 px tinggi, garis aktif tetap di tepi bawah header */
.site-nav a{padding:11px 0}
.site-nav a.active::after{bottom:-13px}
/* 8d. Elemen scroll-reveal yang menerima fokus keyboard langsung terlihat penuh */
.agz-rv:focus-within{opacity:1!important;transform:none!important;transition:none!important}
/* 8e. Tautan email di halaman Kontak: area klik minimal 24 px */
a[href^="mailto:"]{display:inline-block;padding:4px 0}