/* Giarchie — www.giarchie.com
   Warna: putih-mint klinis, tinta slate, oker semen (POS), teal (EMR), merah denyut. */
:root{
  --kertas:#F2F5F3; --kertas-2:#E7EDEA; --tinta:#172A30; --redup:#55686C; --garis:#CFD9D6;
  --pos:#C98A12; --pos-teks:#8A5D06; --pos-latar:#F6E9CC;
  --emr:#0E7C7B; --emr-teks:#0B6665; --emr-latar:#D3ECEA;
  --denyut:#D6453D; --putih:#FFFFFF; --wa:#1F8F4E;
  --huruf-judul:"Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --huruf-isi:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --lebar:1180px; --tepi:clamp(16px, 4vw, 40px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --kertas:#0F1A1D; --kertas-2:#16252A; --tinta:#E4ECEA; --redup:#9AACAF; --garis:#2A3E43;
    --pos:#E2A63A; --pos-teks:#EDB955; --pos-latar:#2E2512;
    --emr:#3DB5AF; --emr-teks:#5CC8C2; --emr-latar:#12302F;
    --denyut:#F06A60; --putih:#16252A; --wa:#2FB36A; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --kertas:#0F1A1D; --kertas-2:#16252A; --tinta:#E4ECEA; --redup:#9AACAF; --garis:#2A3E43;
  --pos:#E2A63A; --pos-teks:#EDB955; --pos-latar:#2E2512;
  --emr:#3DB5AF; --emr-teks:#5CC8C2; --emr-latar:#12302F;
  --denyut:#F06A60; --putih:#16252A; --wa:#2FB36A; color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--kertas); color:var(--tinta); font:1.0625rem/1.6 var(--huruf-isi); overflow-x:hidden}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--huruf-judul); line-height:1.1; margin:0; letter-spacing:-.01em}
h2{font-size:clamp(2rem, 4.2vw, 3rem); font-weight:800}
h3{font-size:1.125rem; font-weight:700}
p{margin:0}
:focus-visible{outline:3px solid var(--emr); outline-offset:3px; border-radius:4px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.lompat{position:absolute; left:-999px; top:8px; background:var(--tinta); color:var(--kertas); padding:8px 12px; z-index:20}
.lompat:focus{left:8px}
section{scroll-margin-top:64px; max-width:var(--lebar); margin:0 auto; padding:clamp(56px, 9vw, 112px) var(--tepi)}
.lead{font-size:1.1875rem; color:var(--redup); max-width:38em; margin-top:14px}

/* ------------------------------------------------ tombol */
.tombol{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px;
  border-radius:12px; border:2px solid var(--tinta); background:var(--tinta); color:var(--kertas); font:700 1rem var(--huruf-isi);
  text-decoration:none; cursor:pointer}
.tombol:hover{background:transparent; color:var(--tinta)}
.tombol-garis{background:transparent; color:var(--tinta)}
.tombol-garis:hover{background:var(--tinta); color:var(--kertas)}
.tombol-kecil{min-height:40px; padding:0 16px; font-size:.9375rem}
.tombol[disabled]{opacity:.6; cursor:wait}

/* ------------------------------------------------ kepala */
.kepala{position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:24px; max-width:none;
  padding:12px var(--tepi); background:color-mix(in srgb, var(--kertas) 88%, transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent}
.kepala.gulir{border-bottom-color:var(--garis)}
.merek{display:flex; align-items:center; gap:10px; font:800 1.375rem var(--huruf-judul); text-decoration:none; letter-spacing:-.02em}
.merek svg{width:34px; height:22px; fill:none; stroke:var(--denyut); stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round}
.kepala nav{display:flex; gap:22px; margin-left:auto}
.kepala nav a{text-decoration:none; font-weight:700; color:var(--redup)}
.kepala nav a:hover{color:var(--tinta)}
@media (max-width:760px){ .kepala nav{display:none} .kepala .tombol{margin-left:auto} }

/* ------------------------------------------------ pembuka */
.pembuka{padding-bottom:24px; display:grid; gap:28px}
.pembuka h1{font-size:clamp(2.5rem, 6.2vw, 5.1rem); font-weight:800; letter-spacing:-.035em; max-width:15em; line-height:1.02; text-wrap:balance}
.pembuka-isi{display:grid; grid-template-columns:minmax(0, 34em) auto; gap:24px 48px; align-items:end}
.pembuka-isi p{font-size:1.1875rem; color:var(--redup)}
.aksi{display:flex; flex-wrap:wrap; gap:12px}
@media (max-width:900px){ .pembuka-isi{grid-template-columns:1fr} }

/* ------------------------------------------------ garis EKG → toko */
.garis{position:relative; margin:0 auto; max-width:1400px; padding:0 var(--tepi)}
.garis svg{width:100%; height:auto; overflow:visible}
.jejak{fill:none; stroke:var(--tinta); stroke-width:3; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; animation:gambar 3.2s cubic-bezier(.5,0,.25,1) .2s forwards}
.denyut{fill:var(--denyut); opacity:0; transform-origin:266px 32px; animation:muncul .5s ease-out 1.1s forwards}
@keyframes gambar{to{stroke-dashoffset:0}}
@keyframes muncul{0%{opacity:0; transform:scale(.2)} 60%{opacity:1; transform:scale(1.5)} 100%{opacity:1; transform:scale(1)}}
@media (prefers-reduced-motion: reduce){ .jejak{animation:none; stroke-dashoffset:0} .denyut{animation:none; opacity:1} }
.garis-label{position:relative; height:64px}
.garis-label a{position:absolute; top:4px; display:grid; text-decoration:none; line-height:1.3; padding-left:14px}
.garis-label a::before{content:""; position:absolute; left:0; top:4px; bottom:4px; width:4px; border-radius:2px}
.garis-label b{font-family:var(--huruf-judul); font-size:1.0625rem}
.garis-label span{color:var(--redup); font-size:.9375rem}
.label-emr{left:calc(var(--tepi) + 19%)} .label-emr::before{background:var(--emr)}
.label-pos{left:calc(var(--tepi) + 51%)} .label-pos::before{background:var(--pos)}
.garis-label a:hover b{text-decoration:underline}
@media (max-width:640px){
  .garis-label{height:auto; display:flex; flex-direction:column; gap:12px; padding-top:8px}
  .garis-label a{position:relative; left:auto; top:auto}
}

/* ------------------------------------------------ produk */
.produk{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:40px 32px; align-items:start}
.produk-judul{grid-column:1 / span 5; position:sticky; top:96px}
.produk-judul h2{display:flex; align-items:center; gap:14px}
.produk-judul h2::before{content:""; width:16px; height:16px; border-radius:4px; flex:none}
.produk-pos h2::before{background:var(--pos)}
.produk-emr h2::before{background:var(--emr); border-radius:50%}
.tangkapan{grid-column:6 / span 7; position:relative; padding-bottom:18%}
.tangkapan img{border-radius:14px; border:1px solid var(--garis); box-shadow:0 30px 60px -30px rgba(23,42,48,.35)}
.tangkapan .tangkapan-dua{position:absolute; width:62%; right:-4%; bottom:0}
.produk-pos .tangkapan img:first-child{transform:rotate(-1deg)}
.produk-emr .tangkapan img:first-child{transform:rotate(1deg)}
.ket{position:absolute; left:0; bottom:0; font-size:.875rem; color:var(--redup); max-width:34%}
.fitur{grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:36px 40px;
  padding-top:36px; border-top:3px solid var(--tinta)}
.produk-pos .fitur{border-top-color:var(--pos)}
.produk-emr .fitur{border-top-color:var(--emr)}
.fitur ul{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:8px}
.fitur li{padding-left:18px; position:relative; color:var(--redup)}
.fitur li::before{content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:2px}
.produk-pos li::before{background:var(--pos)}
.produk-emr li::before{background:var(--emr); border-radius:50%}
/* EMR dicerminkan */
.produk-emr .produk-judul{grid-column:8 / span 5; grid-row:1}
.produk-emr .tangkapan{grid-column:1 / span 7; grid-row:1}
.produk-emr .tangkapan .tangkapan-dua{right:auto; left:-4%}
.produk-emr .ket{left:auto; right:0; text-align:right}
@media (max-width:960px){
  .produk{grid-template-columns:1fr}
  .produk-judul,.produk-emr .produk-judul,.tangkapan,.produk-emr .tangkapan{grid-column:1; grid-row:auto; position:relative; top:auto}
  .fitur{grid-template-columns:repeat(2, minmax(0,1fr))}
  .tangkapan .tangkapan-dua{right:0} .produk-emr .tangkapan .tangkapan-dua{left:0}
}
@media (max-width:600px){
  .fitur{grid-template-columns:1fr; gap:28px}
  .tangkapan{padding-bottom:0} .tangkapan .tangkapan-dua,.produk-emr .tangkapan .tangkapan-dua{position:relative; width:100%; margin-top:12px; left:0; right:0}
  .ket{position:static; max-width:none; margin-top:8px; text-align:left}
  .produk-emr .ket{text-align:left}
}

/* ------------------------------------------------ perkembangan */
.perkembangan{border-top:1px solid var(--garis)}
.dua-kolom{display:grid; grid-template-columns:1.15fr 1fr; gap:56px; margin-top:48px}
.dua-kolom h3{font-size:1.375rem; margin-bottom:20px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.versi{font:700 .875rem var(--huruf-isi); color:var(--emr-teks); background:var(--emr-latar); padding:2px 8px; border-radius:6px}
.tahap{list-style:none; margin:0; padding:0}
.sedang{margin:-8px 0 14px; font-weight:700; color:var(--emr-teks)}
.tahap li{display:grid; grid-template-columns:44px 1fr auto; gap:2px 14px; padding:14px 0;
  border-bottom:1px solid var(--garis); position:relative}
.tahap li::before{content:attr(data-no); grid-row:1 / span 3; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font:800 .9375rem var(--huruf-judul); border:2px solid var(--garis); color:var(--redup); background:var(--kertas)}
.tahap li::after{content:""; position:absolute; left:17px; top:48px; bottom:-14px; width:2px; background:var(--garis)}
.tahap li:last-child::after{display:none}
.tahap li.selesai::before{background:var(--emr); border-color:var(--emr); color:var(--kertas)}
.tahap li.selesai::after{background:var(--emr)}
.tahap li.sebagian::before{border-color:var(--emr); color:var(--emr-teks); background:linear-gradient(90deg, var(--emr-latar) 50%, var(--kertas) 50%)}
.tahap b{font-family:var(--huruf-judul)}
.tahap span{grid-column:2; color:var(--redup); font-size:.9375rem}
.tahap small{grid-column:2; font-size:.875rem; color:var(--pos-teks)}
.tahap em{grid-column:3; grid-row:1; font-style:normal; font-size:.875rem; font-weight:700; color:var(--redup)}
.tahap .selesai em{color:var(--emr-teks)} .tahap .sebagian em{color:var(--pos-teks)}
.log{list-style:none; margin:0; padding:0 0 0 20px; border-left:3px solid var(--pos)}
.log li{position:relative; padding:0 0 18px}
.log li::before{content:""; position:absolute; left:-28px; top:6px; width:13px; height:13px; border-radius:3px; background:var(--kertas); border:3px solid var(--pos)}
.log li:first-child::before{background:var(--pos)}
.log time{display:block; font:700 .9375rem var(--huruf-judul); color:var(--pos-teks)}
.log span{color:var(--redup)}
.rencana-judul{margin-top:28px}
.rencana{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.rencana li{padding:10px 14px; border:1.5px dashed var(--garis); border-radius:10px; color:var(--redup)}
@media (max-width:900px){ .dua-kolom{grid-template-columns:1fr; gap:48px} }

/* ------------------------------------------------ tanya */
.tanya{display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:start}
.tanya-intro p{color:var(--redup); margin-top:14px; max-width:30em}
.saran{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.saran button{font:inherit; font-size:.9375rem; text-align:left; padding:8px 14px; border-radius:99px; border:1.5px solid var(--garis);
  background:transparent; color:var(--tinta); cursor:pointer}
.saran button:hover{border-color:var(--emr); color:var(--emr-teks)}
.chat{background:var(--putih); border:1px solid var(--garis); border-radius:20px; display:flex; flex-direction:column; height:560px; overflow:hidden}
.chat-isi{flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px}
.bubble{max-width:85%; padding:10px 14px; border-radius:16px; white-space:pre-wrap; line-height:1.5}
.bubble.bot{background:var(--kertas-2); border-bottom-left-radius:4px; align-self:flex-start}
.bubble.saya{background:var(--tinta); color:var(--kertas); border-bottom-right-radius:4px; align-self:flex-end}
.bubble.tunggu{color:var(--redup)}
.bubble.info{background:transparent; border:1.5px dashed var(--garis); color:var(--redup)}
.bubble.tim{background:var(--emr-latar)}
.bubble .label{display:block; font-size:.8125rem; color:var(--emr-teks); margin-bottom:2px}
.chat-form{display:flex; gap:8px; padding:12px; border-top:1px solid var(--garis)}
.chat-form input{flex:1; min-width:0; min-height:48px; padding:0 14px; border-radius:12px; border:1.5px solid var(--garis);
  background:var(--kertas); color:var(--tinta); font:inherit}
.chat-bawah{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--garis)}
.chat-tim{font:700 1rem var(--huruf-isi); padding:12px; background:transparent; border:0; border-right:1px solid var(--garis); color:var(--emr-teks); cursor:pointer}
.chat-tim:hover{text-decoration:underline} .chat-tim[disabled]{opacity:.5}
.chat-wa{display:block; text-align:center; padding:12px; font-weight:700; color:var(--wa); text-decoration:none}
.chat-wa:hover{text-decoration:underline}
@media (max-width:900px){ .tanya{grid-template-columns:1fr} .chat{height:460px} }

/* ------------------------------------------------ hubungi */
.hubungi{display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:start; border-top:1px solid var(--garis)}
.hubungi-intro p{color:var(--redup); margin-top:14px; max-width:30em}
.hubungi-intro .kecil{font-size:.9375rem}
.form{display:grid; gap:16px; background:var(--putih); border:1px solid var(--garis); border-radius:20px; padding:clamp(20px, 3vw, 32px)}
.form label{display:grid; gap:6px; font-weight:700; font-size:.9375rem}
.form input:not([type=radio]):not([type=checkbox]),.form textarea{font:inherit; font-weight:400; min-height:48px; padding:10px 14px;
  border-radius:12px; border:1.5px solid var(--garis); background:var(--kertas); color:var(--tinta); width:100%}
.form input:focus,.form textarea:focus{border-color:var(--emr); outline:none; box-shadow:0 0 0 3px var(--emr-latar)}
.form textarea{resize:vertical}
.baris{display:grid; grid-template-columns:1fr 1fr; gap:16px}
fieldset{border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
legend{font-weight:700; font-size:.9375rem; margin-bottom:6px; width:100%}
.form label.pilih{display:flex; align-items:center; gap:8px; font-weight:400; padding:10px 14px; border:1.5px solid var(--garis); border-radius:12px; cursor:pointer}
.form label.pilih:has(input:checked){border-color:var(--tinta); background:var(--kertas-2)}
.pilih input,.setuju input{width:18px; height:18px; accent-color:var(--emr)}
.form label.setuju{display:flex; align-items:flex-start; gap:10px; font-weight:400}
.jebakan{position:absolute; left:-9999px}
.status{min-height:1.6em; font-weight:700}
.status.ok{color:var(--wa)} .status.gagal{color:var(--denyut)}
@media (max-width:900px){ .hubungi{grid-template-columns:1fr} }
@media (max-width:560px){ .baris{grid-template-columns:1fr} }

/* ------------------------------------------------ kaki */
.kaki{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:28px var(--tepi); border-top:1px solid var(--garis); color:var(--redup); font-size:.9375rem}
.kaki a{margin-left:16px} .kaki a:first-child{margin-left:0}
/* ------------------------------------------------ ajakan (CTA) */
.tombol-wa{background:var(--wa); border-color:var(--wa); color:#fff}
.tombol-wa:hover{background:transparent; color:var(--wa)}
.tombol-lebar{width:100%; min-height:54px; font-size:1.0625rem}
.aksi .tombol-wa{min-height:54px; padding:0 26px; font-size:1.0625rem}

/* ------------------------------------------------ kenapa giarchie */
.kenapa{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px 64px; align-items:start}
.kenapa-judul{position:sticky; top:96px; display:grid; gap:22px; justify-items:start}
.kenapa-judul .lead{margin-top:0}
.alasan{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 40px}
.alasan li{padding:22px 0 24px; border-top:2px solid var(--tinta)}
.alasan h3{font-size:1.3125rem; margin-bottom:8px}
.alasan p{color:var(--redup)}
@media (max-width:960px){ .kenapa{grid-template-columns:1fr} .kenapa-judul{position:static} }
@media (max-width:600px){ .alasan{grid-template-columns:1fr} }

.ajak{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px;
  padding:24px 28px; border-radius:18px; margin-top:8px}
.ajak p{max-width:40em; color:var(--tinta)}
.ajak-pos{background:var(--pos-latar)}
.ajak-emr{background:var(--emr-latar)}
.ajak-emr .tombol{background:var(--emr); border-color:var(--emr); color:#fff}
.ajak-emr .tombol:hover{background:transparent; color:var(--emr-teks)}

.dapat{margin:18px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.dapat li{position:relative; padding-left:30px}
.dapat li::before{content:""; position:absolute; left:2px; top:.35em; width:16px; height:9px; border-left:3px solid var(--wa); border-bottom:3px solid var(--wa); transform:rotate(-45deg)}

/* ------------------------------------------------ bar bawah (HP) */
.bar-bawah{position:fixed; left:0; right:0; bottom:0; z-index:9; display:none; gap:10px; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--kertas) 92%, transparent); backdrop-filter:blur(10px); border-top:1px solid var(--garis);
  transform:translateY(110%); transition:transform .25s ease}
.bar-bawah .tombol{flex:1; min-height:48px; padding:0 12px}
.bar-bawah .tombol-garis{flex:0 0 auto}
.bar-bawah.tampil{transform:none}
@media (max-width:760px){ .bar-bawah{display:flex} body{padding-bottom:76px} }
@media (prefers-reduced-motion: reduce){ .bar-bawah{transition:none} }

/* ------------------------------------------------ chat: isi data dulu */
.chat [hidden]{display:none !important}
.chat-daftar{flex:1; overflow-y:auto; padding:20px; display:grid; align-content:start; gap:14px}
.chat-daftar p{color:var(--redup)}
.chat-daftar form{display:grid; gap:12px}
.chat-daftar label{display:grid; gap:4px; font-weight:700; font-size:.9375rem}
.chat-daftar input:not([type=checkbox]){font:inherit; font-weight:400; min-height:46px; padding:8px 12px; border-radius:12px;
  border:1.5px solid var(--garis); background:var(--kertas); color:var(--tinta); width:100%}
.chat-daftar input:focus{border-color:var(--emr); outline:none; box-shadow:0 0 0 3px var(--emr-latar)}
.chat-daftar label.setuju{display:flex; align-items:flex-start; gap:10px; font-weight:400}
.chat-daftar .setuju input{width:18px; height:18px; accent-color:var(--emr)}
.chat-daftar .tombol{width:100%}