/* =============================================================================
   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).
   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)}