/* ============================================================
   ALLIR — Homepage mockup
   Palet & bahasa visual diambil dari halaman About Us / FAQ /
   Our Store yang sudah disetujui. Struktur konten mengikuti
   Sheet7 pada "Allir Digmar Worksheet".
   ============================================================ */

:root{
  --navy:#0B2A63;
  --navy-deep:#07204D;
  --blue:#0059CC;
  --blue-lit:#1872D8;
  --blue-050:#F5F9FE;
  --blue-100:#E9F2FD;
  --blue-200:#D8EAFC;
  --line:#E4E9F0;
  --ink:#14213D;
  --slate:#5D6B84;
  --slate-lt:#8494AB;
  --wa:#1FAF5A;
  --white:#fff;

  /* Warna resmi dari brand guide Allir */
  --brand-cyan:#00A2E3;
  --brand-blue:#005BAA;
  --brand-ink:#0C0C0C;

  --shadow-sm:0 1px 2px rgba(11,42,99,.06), 0 2px 8px rgba(11,42,99,.05);
  --shadow-md:0 4px 12px rgba(11,42,99,.07), 0 12px 32px rgba(11,42,99,.07);
  --shadow-lg:0 10px 24px rgba(11,42,99,.09), 0 28px 64px rgba(11,42,99,.10);

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;
  --wrap:1180px;
  --gut:clamp(20px,5vw,40px);
  --sec-y:clamp(64px,8vw,112px);

  --f-display:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  color:var(--slate);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
button{font:inherit}

h1,h2,h3,h4{
  font-family:var(--f-display);
  color:var(--navy);
  line-height:1.18;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}

:focus-visible{
  outline:3px solid var(--blue-lit);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* Terbaca pembaca layar dan mesin pencari, tidak tampil di layar. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blue);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0}

/* ---------- Photo treatment: menyatukan foto lapangan ---------- */
.ph{
  filter:saturate(.9) contrast(1.05) brightness(1.01);
  width:100%;height:100%;object-fit:cover;
}

/* ---------- Eyebrow / label ---------- */
.eyebrow{
  display:inline-block;
  font-family:var(--f-body);
  font-size:12px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue);
}

.sec-head{max-width:640px;margin-inline:auto;text-align:center;margin-bottom:clamp(36px,5vw,56px)}
.sec-head h2{font-size:clamp(28px,4.2vw,42px);font-weight:800;margin:12px 0 0}
.sec-head p{margin:14px 0 0;font-size:17px;color:var(--slate)}
.sec-head .rule{width:56px;height:4px;border-radius:2px;background:var(--blue);margin:20px auto 0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-display);font-weight:700;font-size:15px;
  padding:14px 26px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex:none}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 6px 18px rgba(31,175,90,.28)}
.btn-wa:hover{background:#189A4D;transform:translateY(-2px);box-shadow:0 10px 24px rgba(31,175,90,.34)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(0,89,204,.26)}
.btn-primary:hover{background:#0049A8;transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ============================ HEADER ============================ */
.site-head{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;gap:32px;height:76px}

.logo{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:none}
.logo-img{display:block;height:34px;width:auto}
.logo-tag{font-size:9.5px;font-weight:600;color:var(--slate-lt);letter-spacing:.02em}

.nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav a{
  font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--ink);
  padding:6px 0;position:relative;transition:color .18s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;border-radius:2px;
  background:var(--blue);transform:scaleX(0);transition:transform .22s ease;
}
.nav a:hover{color:var(--blue)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--blue)}
.nav .has-sub::before{
  content:"";position:absolute;right:-14px;top:50%;width:6px;height:6px;
  border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:translateY(-70%) rotate(45deg);opacity:.6;
}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--navy);border-radius:2px}
.nav-toggle span+span{margin-top:4px}

@media (max-width:1000px){
  .nav{
    position:absolute;top:76px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    padding:8px var(--gut) 20px;box-shadow:var(--shadow-md);
  }
  .nav[hidden]{display:none}
  .nav a{width:100%;padding:13px 0;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav .has-sub::before{right:4px}
  .nav-toggle{display:block;margin-left:auto}
}

/* ============================ HERO ============================ */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 620px at 82% -8%, #DCEBFB 0%, rgba(220,235,251,0) 62%),
    linear-gradient(178deg,#F7FBFF 0%,#EAF3FD 100%);
}
.hero-in{
  display:grid;grid-template-columns:1.14fr .86fr;gap:0;align-items:stretch;
}
/* Kolom teks tetap lurus dengan grid isi situs, foto lepas sampai tepi layar. */
.hero-copy{
  align-self:center;
  padding-block:clamp(52px,7vw,96px) clamp(64px,8vw,112px);
  padding-inline:max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) clamp(22px,3vw,52px);
}

.hero h1{font-size:clamp(36px,5.6vw,60px);font-weight:800;margin:0}
.hero h1 .kw{
  display:block;font-family:var(--f-body);font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
  margin-bottom:18px;
}
.hero h1 .lead-line{display:block;color:var(--navy)}
/* Garis sorot menempel pada kata-katanya, bukan pada lebar bloknya —
   jadi kalau teksnya pindah baris, garisnya ikut berhenti di ujung kata. */
.hero h1 .accent{
  color:var(--blue);
  background-image:linear-gradient(#A9D0F7,#A9D0F7);
  background-repeat:no-repeat;
  background-position:0 91%;
  background-size:0 .1em;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
  animation:underline .95s cubic-bezier(.22,.61,.36,1) .8s forwards;
}
.hero-sub{font-size:clamp(16px,1.9vw,18.5px);color:var(--slate);margin:22px 0 0;max-width:47ch}

.hero-chips{display:flex;flex-wrap:wrap;gap:7px;margin:26px 0 0;padding:0;list-style:none}
.hero-chips li{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.85);border:1px solid #CFE2F8;
  padding:7px 13px 7px 10px;border-radius:999px;
  font-size:13.2px;font-weight:600;color:var(--navy);
  font-family:var(--f-display);white-space:nowrap;
}
.hero-chips svg{width:14px;height:14px;color:var(--blue);flex:none}
/* Di layar lebar kolom teks tidak muat 4 chip sebaris — disusun 2x2 supaya rapi. */
@media (min-width:901px){
  .hero-chips{display:grid;grid-template-columns:max-content max-content;justify-content:start;justify-items:start;gap:8px 9px}
}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-note{
  display:flex;align-items:center;gap:8px;margin:22px 0 0;
  font-size:13.5px;color:var(--slate-lt);
}
.hero-note svg{width:15px;height:15px;color:var(--blue-lit);flex:none}

/* Hero media */
.hero-media{position:relative;align-self:stretch;min-height:clamp(360px,46vw,620px)}
.hero-frame{position:absolute;inset:0;overflow:hidden}
.hero-frame .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-frame::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(233,242,253,.92) 0%,rgba(233,242,253,.35) 16%,rgba(233,242,253,0) 38%),
    linear-gradient(196deg,rgba(11,42,99,0) 52%,rgba(7,32,77,.34) 100%);
}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;color:#fff}
.hero-wave svg{display:block;width:100%;height:auto}

@media (max-width:900px){
  .hero-in{grid-template-columns:1fr}
  .hero-copy{
    padding-inline:var(--gut);
    padding-block:clamp(32px,6vw,48px) clamp(52px,9vw,76px);
  }
  .hero-media{order:-1;min-height:0;aspect-ratio:16/11}
  .hero-frame::after{
    background:linear-gradient(180deg,rgba(11,42,99,0) 55%,rgba(7,32,77,.34) 100%);
  }
}
/* ============================ LAYANAN ============================ */
.sec{padding-block:var(--sec-y)}
.sec-tint{background:var(--blue-050)}

/* Flex, bukan grid: baris terakhir yang tidak penuh ikut ke tengah. */
.svc-grid{
  --g:clamp(16px,2vw,22px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g);
}
.svc{flex:0 1 calc((100% - 4 * var(--g)) / 5);min-width:0}
@media (max-width:1120px){.svc{flex-basis:calc((100% - 2 * var(--g)) / 3)}}
@media (max-width:760px){.svc{flex-basis:calc((100% - var(--g)) / 2)}}
/* Di layar kecil kartu tetap dua kolom dan dibatasi empat — sisanya lewat
   tombol "Lihat Semua Layanan", supaya halaman tidak terlalu panjang. */
@media (max-width:760px){
  .svc-grid > .svc:nth-child(n+5){display:none}
  .svc-body{padding:15px 15px 18px}
  .svc-body h3{font-size:15.5px}
  .svc-body p{font-size:13px;line-height:1.55}
  .svc-img{aspect-ratio:4/3}
}
@media (max-width:340px){.svc{flex-basis:100%}}
.svc{
  position:relative;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  display:flex;flex-direction:column;
}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#CFE2F8}
@media (prefers-reduced-motion:reduce){.svc:hover{transform:none}}
.svc-img{position:relative;aspect-ratio:4/3.15;overflow:hidden;background:var(--blue-100)}
.svc-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,42,99,0) 55%,rgba(11,42,99,.5) 100%);
}
.svc-img .ph{transition:transform .5s ease}
.svc:hover .svc-img .ph{transform:scale(1.05)}
.svc-body{padding:20px 20px 24px;flex:1;display:flex;flex-direction:column}
.svc-body h3{font-size:17px;font-weight:700;margin:0}
.svc-body h3 a{color:var(--navy);transition:color .2s var(--ease)}
.svc:hover .svc-body h3 a{color:var(--blue)}
/* Seluruh kartu bisa diklik lewat tautan judulnya. */
.svc-body h3 a::after{content:"";position:absolute;inset:0;z-index:3}
.svc-body p{font-size:14px;line-height:1.6;margin:9px 0 0;color:var(--slate)}
.svc-more{
  margin-top:auto;padding-top:16px;
  font-family:var(--f-display);font-weight:700;font-size:13.5px;color:var(--blue);
  display:inline-flex;align-items:center;gap:6px;
}
.svc-more svg{width:14px;height:14px;transition:transform .2s ease}
.svc:hover .svc-more svg{transform:translateX(4px)}
.sec-foot{display:flex;justify-content:center;margin-top:clamp(32px,4vw,46px)}

/* ============================ KENAPA ALLIR ============================ */
.why{background:linear-gradient(160deg,var(--navy) 0%,#0A3A8C 55%,var(--blue) 130%);position:relative;overflow:hidden}
.why::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(720px 380px at 88% 6%,rgba(255,255,255,.11),transparent 70%);
}
.why .wrap{position:relative}
.why .sec-head h2{color:#fff}
.why .sec-head p{color:#BFD6F5}
.why .sec-head .eyebrow{color:#7FB2F0}
.why .sec-head .rule{background:#4E93E8}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:clamp(16px,2vw,22px)}
.why-card{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-lg);padding:30px 26px;
  transition:background .22s ease, transform .22s ease;
}
.why-card:hover{background:rgba(255,255,255,.12);transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.why-card:hover{transform:none}}
.why-ic{
  width:50px;height:50px;border-radius:15px;display:grid;place-items:center;
  background:rgba(255,255,255,.95);color:var(--blue);margin-bottom:20px;
}
.why-ic svg{width:23px;height:23px}
.why-card h3{color:#fff;font-size:18px;font-weight:700}
.why-card p{color:#C3D8F3;font-size:14.5px;line-height:1.65;margin:10px 0 0}

/* ============================ TENTANG ============================ */
.about-in{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,5vw,68px);align-items:center}
.about-media{position:relative}
.about-frame{aspect-ratio:4/3.3;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);border:6px solid #fff}
.about-badge{
  position:absolute;right:-18px;bottom:-22px;z-index:2;
  background:var(--blue);color:#fff;border-radius:var(--r-md);
  padding:18px 22px;box-shadow:0 12px 30px rgba(0,89,204,.34);
  max-width:210px;
}
.about-badge strong{display:block;font-family:var(--f-display);font-size:15px;font-weight:800;line-height:1.3}
.about-badge span{display:block;font-size:12.5px;color:#CFE3FB;margin-top:5px;line-height:1.5}
.about-copy h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;margin:12px 0 0}
.about-copy p{font-size:16px;line-height:1.75;margin:18px 0 0}
.about-copy p strong{color:var(--navy);font-weight:600}

.guarantee{
  margin:30px 0 0;padding:24px 26px;
  background:var(--blue-050);border:1px solid #DCE9F8;border-radius:var(--r-md);
}
.guarantee h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:9px}
.guarantee h3 svg{width:18px;height:18px;color:var(--blue)}
.guarantee ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px}
.guarantee li{position:relative;padding-left:27px;font-size:14.5px;line-height:1.55}
.guarantee li::before{
  content:"";position:absolute;left:0;top:5px;width:19px;height:19px;border-radius:50%;
  background:var(--blue)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E")
    center/12px no-repeat;
  box-shadow:0 2px 6px rgba(0,89,204,.3);
}
@media (max-width:880px){
  .about-in{grid-template-columns:1fr}
  .about-media{max-width:520px;margin-inline:auto;width:100%}
  .about-badge{right:0;bottom:-16px}
}

/* ============================ PORTOFOLIO ============================ */
/* --- Signature: before/after reveal --- */
.ba{
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,3.4vw,40px);
  align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(20px,2.6vw,28px);box-shadow:var(--shadow-md);
}
.ba-stage{
  position:relative;aspect-ratio:16/11;border-radius:var(--r-lg);
  overflow:hidden;background:#0B2A63;
  touch-action:pan-y;user-select:none;cursor:ew-resize;
}
.ba-layer{position:absolute;inset:0}
.ba-layer .ph{filter:saturate(.94) contrast(1.05)}
.ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-label{
  position:absolute;top:14px;z-index:3;
  font-family:var(--f-display);font-weight:700;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;color:#fff;
  backdrop-filter:blur(6px);
}
.ba-label-b{left:14px;background:rgba(11,42,99,.72)}
.ba-label-a{right:14px;background:rgba(0,89,204,.82)}

.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);
  width:3px;background:#fff;transform:translateX(-50%);z-index:4;
  box-shadow:0 0 0 1px rgba(11,42,99,.18), 0 0 22px rgba(0,0,0,.28);
  pointer-events:none;
}
.ba-handle::after{
  content:"";position:absolute;top:50%;left:50%;
  width:48px;height:48px;transform:translate(-50%,-50%);
  border-radius:50%;background:#fff;
  box-shadow:0 4px 16px rgba(11,42,99,.32);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%230059CC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6M9 6l6 6-6 6' opacity='.001'/%3E%3Cpath d='M14.5 7.5 19 12l-4.5 4.5M9.5 7.5 5 12l4.5 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.ba-range{
  position:absolute;inset:0;z-index:5;width:100%;height:100%;
  margin:0;opacity:0;cursor:ew-resize;
}
.ba-stage:has(.ba-range:focus-visible) .ba-handle{
  box-shadow:0 0 0 3px var(--blue-lit), 0 0 22px rgba(0,0,0,.28);
}

.ba-copy h3{font-size:clamp(22px,2.7vw,29px);font-weight:800}
.ba-copy > p{font-size:15px;line-height:1.7;margin:14px 0 0}

.lab{
  margin-top:24px;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;background:var(--blue-050);
}
.lab-head{
  display:flex;align-items:center;gap:9px;
  padding:12px 16px;background:#fff;border-bottom:1px solid var(--line);
}
.lab-head svg{width:17px;height:17px;color:var(--blue);flex:none}
.lab-head strong{font-family:var(--f-display);font-size:13.5px;color:var(--navy);font-weight:700}
.lab-rows{padding:6px 16px 14px}
.lab-row{
  display:grid;grid-template-columns:1fr auto auto auto;
  align-items:center;gap:10px;padding:11px 0;
  border-bottom:1px dashed #D9E5F4;
}
.lab-row:last-child{border-bottom:0}
.lab-row .k{font-size:13.5px;font-weight:500;color:var(--slate)}
.lab-row .v{font-variant-numeric:tabular-nums;font-weight:700;font-size:14.5px}
.lab-row .v-b{color:var(--slate-lt);text-decoration:line-through;text-decoration-thickness:1.5px}
.lab-row .v-a{color:var(--blue);font-size:16px}
.lab-row .arw{width:15px;height:15px;color:var(--slate-lt)}
.lab-note{
  display:block;padding:10px 16px 13px;font-size:11.5px;line-height:1.5;
  color:var(--slate-lt);background:#fff;border-top:1px solid var(--line);
}
@media (max-width:880px){.ba{grid-template-columns:1fr}.ba-stage{aspect-ratio:4/3}}

/* --- Galeri proyek --- */
.gal{
  display:grid;gap:14px;margin-top:clamp(32px,4vw,44px);
  grid-template-columns:repeat(6,1fr);
}
.gal figure{
  position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;
  background:var(--blue-100);box-shadow:var(--shadow-sm);
}
.gal figure:nth-child(1){grid-column:span 2;aspect-ratio:4/3}
.gal figure:nth-child(2){grid-column:span 2;aspect-ratio:4/3}
.gal figure:nth-child(3){grid-column:span 2;aspect-ratio:4/3}
.gal figure:nth-child(4){grid-column:span 3;aspect-ratio:16/8.4}
.gal figure:nth-child(5){grid-column:span 3;aspect-ratio:16/8.4}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:26px 16px 13px;
  font-family:var(--f-display);font-weight:600;font-size:13px;color:#fff;
  background:linear-gradient(180deg,rgba(11,42,99,0),rgba(7,32,77,.82));
}
.gal .ph{transition:transform .55s ease}
.gal figure:hover .ph{transform:scale(1.06)}
@media (max-width:820px){
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal figure:nth-child(n){grid-column:span 1;aspect-ratio:4/3}
}

/* --- Testimoni --- */
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px;margin-top:clamp(32px,4vw,44px)}
.testi{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.testi .quote{width:30px;height:30px;color:var(--blue-200);margin-bottom:6px}
.testi h4{font-size:16px;font-weight:700;margin:0}
.testi p{font-size:14.5px;line-height:1.68;margin:10px 0 0;flex:1}
.testi-by{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.testi-by .testi-av{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:var(--blue-100);color:var(--blue);
  display:grid;place-items:center;line-height:1;
  font-family:var(--f-display);font-weight:800;font-size:15px;
}
.testi-who b{display:block;font-family:var(--f-display);font-size:14px;color:var(--navy);font-weight:700}
.testi-who > span{display:block;font-size:12.5px;color:var(--slate-lt)}

.clients{
  margin-top:clamp(32px,4vw,44px);padding:26px 28px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  display:flex;align-items:center;gap:clamp(20px,3vw,36px);flex-wrap:wrap;
  justify-content:center;box-shadow:var(--shadow-sm);
}
.clients-lbl{
  font-family:var(--f-display);font-size:12.5px;font-weight:700;color:var(--slate-lt);
  letter-spacing:.1em;text-transform:uppercase;
}
.client-slot{
  width:112px;height:42px;border-radius:8px;
  border:1.5px dashed #CBD8E8;background:var(--blue-050);
  display:grid;place-items:center;
  font-size:11.5px;font-weight:600;color:var(--slate-lt);text-align:center;line-height:1.25;
}

/* ============================ CARA KERJA ============================ */
.steps{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.steps::before{
  content:"";position:absolute;top:31px;left:8%;right:8%;height:2px;
  background:repeating-linear-gradient(90deg,#C7DCF5 0 8px,transparent 8px 16px);
}
.step{position:relative;text-align:center}
.step-n{
  position:relative;z-index:2;width:62px;height:62px;margin:0 auto;border-radius:50%;
  background:#fff;border:2px solid var(--blue-200);
  display:grid;place-items:center;color:var(--blue);
  box-shadow:0 4px 14px rgba(11,42,99,.09);
  transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease;
}
.step-n svg{width:25px;height:25px}
.step:hover .step-n{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.step:hover .step-n{transform:none}}
.step-i{
  display:block;font-family:var(--f-display);font-size:11.5px;font-weight:800;
  color:var(--blue-lit);letter-spacing:.1em;margin-top:16px;
}
.step h3{font-size:15px;font-weight:700;margin:6px 0 0;line-height:1.35}
.step p{font-size:13px;line-height:1.55;margin:7px 0 0;color:var(--slate)}
@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,1fr);gap:28px 14px}
  .steps::before{display:none}
}
@media (max-width:420px){.steps{grid-template-columns:1fr}}

/* ============================ FAQ ============================ */
.faq-list{max-width:820px;margin-inline:auto;display:grid;gap:12px}
.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;
}
.faq-item[open]{border-color:#CFE2F8;box-shadow:var(--shadow-sm)}
.faq-item summary{
  display:flex;align-items:center;gap:15px;
  padding:19px 22px;cursor:pointer;list-style:none;
  font-family:var(--f-display);font-weight:700;font-size:15.5px;color:var(--navy);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-ic{
  width:36px;height:36px;border-radius:11px;flex:none;
  background:var(--blue-100);color:var(--blue);display:grid;place-items:center;
}
.faq-ic svg{width:17px;height:17px}
.faq-chev{
  margin-left:auto;width:19px;height:19px;flex:none;color:var(--blue);
  transition:transform .25s ease;
}
.faq-item[open] .faq-chev{transform:rotate(180deg)}
.faq-item .ans{padding:0 22px 22px 73px;font-size:14.8px;line-height:1.72}
@media (max-width:560px){.faq-item .ans{padding-left:22px}}

/* ============================ CTA + FOOTER ============================ */
.cta{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--navy-deep) 0%,#0B3D91 60%,var(--blue) 125%);
  color:#fff;text-align:center;
}
.cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(620px 340px at 50% 0%,rgba(255,255,255,.13),transparent 68%);
}
.cta .wrap{position:relative}
.cta h2{color:#fff;font-size:clamp(26px,3.9vw,40px);font-weight:800;max-width:19ch;margin-inline:auto}
.cta p{color:#BFD6F5;font-size:17px;margin:18px auto 0;max-width:52ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:32px}
.cta-note{margin:22px 0 0;font-size:13.5px;color:#93B7E6}

.site-foot{background:#071B3F;color:#9BB4D6;padding-block:clamp(48px,6vw,68px) 0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(26px,3.4vw,44px)}
.site-foot .logo-img{height:36px}
.site-foot .logo-tag{color:#6E8DB8}
.foot-about{font-size:14px;line-height:1.7;margin:18px 0 0;max-width:34ch}
.foot-soc{display:flex;gap:9px;margin-top:20px}
.foot-soc a{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);color:#C6D9F2;transition:background .2s ease,color .2s ease;
}
.foot-soc a:hover{background:var(--blue);color:#fff}
.foot-soc svg{width:17px;height:17px}
.foot-col h4{color:#fff;font-size:14.5px;font-weight:700;letter-spacing:.01em}
.foot-col ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px}
.foot-col a{color:#9BB4D6;font-size:14px;transition:color .18s ease}
.foot-col a:hover{color:#fff}
.foot-contact li{display:flex;gap:11px;font-size:14px;line-height:1.6}
.foot-contact svg{width:16px;height:16px;color:var(--blue-lit);flex:none;margin-top:4px}
.foot-bar{
  margin-top:clamp(34px,4.5vw,52px);padding-block:22px;
  border-top:1px solid rgba(255,255,255,.09);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;
}
.foot-bar .tagline{color:#fff;font-family:var(--f-display);font-weight:700}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ---------- Floating WA ---------- */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:90;
  display:flex;align-items:center;gap:11px;
  background:var(--wa);color:#fff;
  padding:13px 20px 13px 15px;border-radius:999px;
  font-family:var(--f-display);font-weight:700;font-size:14.5px;
  box-shadow:0 8px 26px rgba(31,175,90,.4);
  transition:transform .2s ease;
}
.wa-float:hover{transform:translateY(-3px)}
.wa-float svg{width:22px;height:22px}
@media (prefers-reduced-motion:reduce){.wa-float:hover{transform:none}}
@media (max-width:520px){
  .wa-float{padding:14px;right:16px;bottom:16px}
  .wa-float span{display:none}
}

/* ============================================================
   MOTION
   Satu bahasa gerak: easing yang sama, jarak yang sama, dan
   selalu ada alasannya. Semua dimatikan bila pengguna memilih
   "reduce motion".
   ============================================================ */
:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.32,.72,.35,1);
}

/* ---------- Reveal saat masuk layar (dengan stagger) ---------- */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}

.js .stagger > *{opacity:0;transform:translateY(26px)}
.js .stagger.in > *{
  opacity:1;transform:none;
  transition:opacity .62s var(--ease),transform .62s var(--ease);
  transition-delay:calc(var(--i,0) * 80ms);
}

/* ---------- Urutan masuk hero saat halaman dibuka ---------- */
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes frameIn{from{opacity:0;transform:translateY(30px) scale(.965)}to{opacity:1;transform:none}}
@keyframes tagIn{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
@keyframes underline{from{background-size:0 .1em}to{background-size:100% .1em}}

.hero h1 .kw,
.hero h1 .lead-line,
.hero h1 .accent,
.hero-sub,
.hero-chips,
.hero-actions,
.hero-note{opacity:0;animation:riseIn .8s var(--ease) forwards}
.hero h1 .kw{animation-delay:.05s}
.hero h1 .lead-line{animation-delay:.16s}
/* V1 menjalankan dua animasi sekaligus: baris naik, lalu garis sorot tumbuh.
   Ditulis penuh karena aturan riseIn di atas memakai shorthand `animation`. */
.hero h1 .accent{
  animation:
    riseIn .8s var(--ease) .27s forwards,
    underline .95s cubic-bezier(.22,.61,.36,1) .85s forwards;
}
.hero-sub{animation-delay:.4s}
.hero-chips{animation-delay:.5s}
.hero-actions{animation-delay:.6s}
.hero-note{animation-delay:.7s}

.hero-frame{opacity:0;animation:frameIn 1s var(--ease) .28s forwards}
/* Chip hero menyala satu per satu, lalu bereaksi saat disentuh */
.hero-chips li{
  opacity:0;animation:tagIn .5s var(--ease) forwards;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.hero-chips li:nth-child(1){animation-delay:.56s}
.hero-chips li:nth-child(2){animation-delay:.64s}
.hero-chips li:nth-child(3){animation-delay:.72s}
.hero-chips li:nth-child(4){animation-delay:.8s}
.hero-chips li:hover{transform:translateY(-2px);border-color:#9CC8F5;box-shadow:0 4px 12px rgba(11,42,99,.09)}

/* Gelombang hero mengalir pelan */
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero-wave svg{width:200%;animation:drift 26s linear infinite}

/* ---------- Header mengecil saat digulir ---------- */
.site-head{transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.head-in{transition:height .3s var(--ease)}
.site-head.compact{box-shadow:0 4px 20px rgba(11,42,99,.08)}
.site-head.compact .head-in{height:62px}
.logo-img,.logo-tag{transition:transform .3s var(--ease),opacity .25s var(--ease),height .3s var(--ease)}
.site-head.compact .logo-tag{opacity:0;transform:translateY(-4px)}
.site-head.compact .logo-img{height:30px}
.logo:hover .logo-img{transform:translateY(-2px)}

/* ---------- Tombol ---------- */
.btn{position:relative;overflow:hidden}
.btn > *{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 62%);
  opacity:0;transition:opacity .35s var(--ease);
}
.btn:hover::before{opacity:1}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{transition:transform .28s var(--ease)}
.btn:hover svg:last-child{transform:translateX(3px)}

/* ---------- Kartu "Kenapa Allir" ---------- */
.why-ic{transition:transform .35s var(--ease)}
.why-card:hover .why-ic{transform:translateY(-3px) scale(1.06)}

/* ---------- Galeri ---------- */
.gal figcaption{transform:translateY(6px);opacity:.9;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.gal figure:hover figcaption{transform:none;opacity:1}

/* ---------- FAQ: buka dengan halus ---------- */
@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq-item[open] .ans{animation:faqIn .34s var(--ease-soft)}
.faq-item summary{transition:background .22s var(--ease)}
.faq-item summary:hover{background:var(--blue-050)}
.faq-ic{transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.faq-item[open] .faq-ic{background:var(--blue);color:#fff;transform:scale(1.05)}

/* ---------- Timeline: garis tumbuh, langkah muncul berurutan ---------- */
.js .steps::before{transform:scaleX(0);transform-origin:left center;transition:transform 1.4s var(--ease) .15s}
.js .steps.in::before{transform:scaleX(1)}

/* ---------- Angka hasil uji ---------- */
.lab-row .v-a{transition:color .3s var(--ease)}
.lab-row .arw{transition:transform .4s var(--ease)}
.lab:hover .arw{transform:translateX(3px)}

/* ---------- Tombol WA mengambang ---------- */
@keyframes waPulse{0%{box-shadow:0 8px 26px rgba(31,175,90,.4),0 0 0 0 rgba(31,175,90,.42)}70%{box-shadow:0 8px 26px rgba(31,175,90,.4),0 0 0 14px rgba(31,175,90,0)}100%{box-shadow:0 8px 26px rgba(31,175,90,.4),0 0 0 0 rgba(31,175,90,0)}}
.wa-float{animation:waPulse 3.6s ease-out 2s infinite}
.wa-float:hover{animation-play-state:paused}

/* ---------- Hormati preferensi pengguna ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .rv,.stagger > *,
  .hero h1 .kw,.hero h1 .lead-line,.hero h1 .accent,
  .hero-sub,.hero-chips,.hero-chips li,.hero-actions,.hero-note,
  .hero-frame{opacity:1;transform:none}
  .hero h1 .accent{background-size:100% .1em}
  .steps::before{transform:scaleX(1)}
  .hero-wave svg{width:100%}
}

/* ============================================================
   HALAMAN PRODUK (katalog + detail)
   Memakai token yang sama dengan beranda.
   ============================================================ */

/* ---------- Kepala halaman + breadcrumb ---------- */
.page-hero{
  background:linear-gradient(176deg,#F7FBFF 0%,#E9F2FD 100%);
  border-bottom:1px solid var(--line);
  padding-block:clamp(26px,4vw,44px) clamp(30px,4.5vw,52px);
}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--slate-lt);margin:0 0 16px}
.crumb a{color:var(--slate);font-weight:500}
.crumb a:hover{color:var(--blue)}
.crumb .sep{opacity:.5}
.crumb [aria-current]{color:var(--navy);font-weight:600}
.page-hero h1{font-size:clamp(28px,4vw,42px);font-weight:800}
.page-hero .lede{font-size:16.5px;margin:14px 0 0;max-width:62ch}

.search-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;max-width:560px}
.search-field{position:relative;flex:1 1 260px}
.search-field svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--slate-lt)}
.search-field input{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  padding:14px 16px 14px 45px;border-radius:999px;
  border:1px solid var(--line);background:#fff;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.search-field input::placeholder{color:var(--slate-lt)}
.search-field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,89,204,.15)}

/* ---------- Kategori ---------- */
.cat-strip{--g:14px;display:flex;flex-wrap:wrap;gap:var(--g);justify-content:center}
.cat-card{
  flex:0 1 calc((100% - 5 * var(--g)) / 6);min-width:0;
  position:relative;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#CFE2F8}
.cat-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--blue-100)}
.cat-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,42,99,0) 50%,rgba(11,42,99,.55) 100%)}
.cat-media .ph{transition:transform .5s var(--ease)}
.cat-card:hover .cat-media .ph{transform:scale(1.06)}
.cat-body{padding:13px 14px 15px}
.cat-body strong{display:block;font-family:var(--f-display);font-size:14px;font-weight:700;color:var(--navy);line-height:1.3}
.cat-body em{display:block;font-style:normal;font-size:12px;color:var(--slate-lt);margin-top:4px;line-height:1.45}
@media (max-width:1000px){.cat-card{flex-basis:calc((100% - 2 * var(--g)) / 3)}}
@media (max-width:560px){.cat-card{flex-basis:calc((100% - var(--g)) / 2)}}

/* ---------- Tata letak katalog ---------- */
.shop-layout{display:grid;grid-template-columns:250px 1fr;gap:clamp(22px,3vw,38px);align-items:start}
@media (max-width:940px){.shop-layout{grid-template-columns:1fr}}

.facets{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px;box-shadow:var(--shadow-sm);position:sticky;top:96px;
}
@media (max-width:940px){.facets{position:static}}
.facet+.facet{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.facet h3{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);font-family:var(--f-body)}
.facet ul{list-style:none;margin:13px 0 0;padding:0;display:grid;gap:10px}
.facet label{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;color:var(--slate)}
.facet label:hover{color:var(--navy)}
.facet input[type=checkbox]{width:17px;height:17px;accent-color:var(--blue);flex:none;cursor:pointer}
.facet .count{margin-left:auto;font-size:12px;color:var(--slate-lt);font-variant-numeric:tabular-nums}
.price-row{display:flex;align-items:center;gap:8px;margin-top:13px}
.price-row input{
  width:100%;min-width:0;font:inherit;font-size:13.5px;padding:9px 11px;
  border:1px solid var(--line);border-radius:9px;color:var(--ink);
}
.price-row input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,89,204,.14)}
.price-row span{color:var(--slate-lt)}

.toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line);
}
.toolbar .count{font-size:14px;color:var(--slate)}
.toolbar .count b{color:var(--navy);font-weight:700}
.toolbar .spacer{margin-left:auto}
.select{
  font:inherit;font-size:14px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:10px 16px;cursor:pointer;
}
.select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,89,204,.14)}

/* ---------- Kartu produk ---------- */
.prod-grid{--g:16px;display:flex;flex-wrap:wrap;gap:var(--g)}
.prod-card{
  flex:0 1 calc((100% - 3 * var(--g)) / 4);min-width:0;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.prod-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#CFE2F8}
@media (max-width:1180px){.prod-card{flex-basis:calc((100% - 2 * var(--g)) / 3)}}
@media (max-width:760px){.prod-card{flex-basis:calc((100% - var(--g)) / 2)}}
@media (max-width:420px){.prod-card{flex-basis:100%}}

/* Kotak foto produk — sengaja placeholder, menunggu foto katalog asli */
.prod-thumb{
  position:relative;aspect-ratio:1/1;display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 50% 0%,#fff 0%,var(--blue-050) 55%,var(--blue-100) 100%);
  border-bottom:1px solid var(--line);
}
.prod-thumb .ic{width:52px;height:52px;color:#9EC4EE}
.prod-thumb .cap{
  position:absolute;bottom:10px;left:0;right:0;text-align:center;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#9EC4EE;font-weight:700;
}
.prod-thumb .ph{position:absolute;inset:0}
.prod-badge{
  position:absolute;top:10px;left:10px;z-index:2;
  font-family:var(--f-display);font-size:10.5px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;color:#fff;background:var(--blue);
}
.prod-badge.is-hot{background:#E4572E}
.prod-badge.is-promo{background:#12A150}

.prod-body{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1}
.prod-cat{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-lit)}
.prod-body h3{font-size:14.5px;font-weight:700;margin:7px 0 0;line-height:1.4}
.prod-body h3 a{color:var(--navy)}
.prod-card:hover .prod-body h3 a{color:var(--blue)}
.prod-spec{font-size:12.5px;color:var(--slate);margin:7px 0 0;line-height:1.5}
.prod-foot{margin-top:auto;padding-top:14px;display:flex;align-items:flex-end;gap:10px}
.prod-price{display:block;font-family:var(--f-display);font-weight:800;font-size:16.5px;color:var(--navy);font-variant-numeric:tabular-nums}
.prod-was{display:block;font-size:12px;color:var(--slate-lt);text-decoration:line-through;margin-bottom:2px}
.prod-cart{
  margin-left:auto;width:38px;height:38px;flex:none;border-radius:11px;
  display:grid;place-items:center;border:1px solid var(--line);
  background:#fff;color:var(--blue);cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.prod-cart svg{width:17px;height:17px}
.prod-cart:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-2px)}

/* ---------- Paginasi ---------- */
.pager{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:clamp(30px,4vw,44px)}
.pager a,.pager span{
  min-width:40px;height:40px;padding:0 12px;border-radius:11px;
  display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:14px;
  border:1px solid var(--line);background:#fff;color:var(--navy);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.pager a:hover{border-color:var(--blue);color:var(--blue)}
.pager [aria-current]{background:var(--blue);border-color:var(--blue);color:#fff}
.pager .gap{border:0;background:none;color:var(--slate-lt)}

/* ---------- Detail produk ---------- */
.pd{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:900px){.pd{grid-template-columns:1fr}}

.pd-main{
  position:relative;aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);
  background:radial-gradient(120% 90% at 50% 0%,#fff 0%,var(--blue-050) 55%,var(--blue-100) 100%);
  display:grid;place-items:center;
}
.pd-main .ic{width:110px;height:110px;color:#9EC4EE}
.pd-main .cap{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9EC4EE;font-weight:700}
.pd-thumbs{--g:11px;display:flex;gap:var(--g);margin-top:12px}
.pd-thumbs button{
  flex:1 1 0;aspect-ratio:1/1;border-radius:12px;cursor:pointer;
  border:1.5px solid var(--line);
  background:radial-gradient(120% 90% at 50% 0%,#fff 0%,var(--blue-050) 100%);
  display:grid;place-items:center;color:#A9CDF2;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.pd-thumbs button svg{width:22px;height:22px}
.pd-thumbs button:hover{transform:translateY(-2px)}
.pd-thumbs button[aria-current="true"]{border-color:var(--blue);color:var(--blue)}

.pd-buy h1{font-size:clamp(24px,3.2vw,34px);font-weight:800;margin:10px 0 0}
.pd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:14px;font-size:13.5px;color:var(--slate)}
.pd-stars{display:flex;align-items:center;gap:5px;color:#F0A202}
.pd-stars svg{width:15px;height:15px}
.pd-stock{display:inline-flex;align-items:center;gap:7px;color:#12A150;font-weight:600}
.pd-stock::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}

.pd-price{display:flex;align-items:baseline;gap:12px;margin-top:20px;flex-wrap:wrap}
.pd-price .now{font-family:var(--f-display);font-weight:800;font-size:clamp(28px,3.6vw,36px);color:var(--blue);font-variant-numeric:tabular-nums}
.pd-price .was{font-size:16px;color:var(--slate-lt);text-decoration:line-through}
.pd-price .off{font-size:12px;font-weight:800;color:#E4572E;background:#FDECE6;padding:4px 10px;border-radius:999px}
.pd-note{font-size:13px;color:var(--slate-lt);margin:8px 0 0}

.pd-desc{font-size:15px;line-height:1.72;margin:20px 0 0}
.pd-key{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:11px}
.pd-key li{position:relative;padding-left:27px;font-size:14.5px;line-height:1.55}
.pd-key li::before{
  content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;
  background:var(--blue)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E")
    center/11px no-repeat;
}

.qty-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:#fff;overflow:hidden}
.qty button{
  width:42px;height:46px;border:0;background:none;cursor:pointer;color:var(--navy);
  font-size:19px;line-height:1;transition:background .18s var(--ease),color .18s var(--ease);
}
.qty button:hover{background:var(--blue-050);color:var(--blue)}
.qty input{
  width:52px;height:46px;border:0;text-align:center;font:inherit;font-weight:700;
  color:var(--navy);font-variant-numeric:tabular-nums;background:none;
}
.qty input:focus{outline:none}

.pd-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:16px}
.pd-trust{
  display:flex;flex-wrap:wrap;gap:18px;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--line);
}
.pd-trust div{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--slate);font-weight:500}
.pd-trust svg{width:18px;height:18px;color:var(--blue);flex:none}

/* ---------- Tab deskripsi ---------- */
.tabs{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line);padding-top:clamp(28px,3.5vw,40px)}
.tablist{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line)}
.tablist button{
  border:0;background:none;cursor:pointer;position:relative;
  font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--slate);
  padding:13px 18px;transition:color .2s var(--ease);
}
.tablist button::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;
  background:var(--blue);transform:scaleX(0);transition:transform .24s var(--ease);
}
.tablist button:hover{color:var(--navy)}
.tablist button[aria-selected="true"]{color:var(--blue)}
.tablist button[aria-selected="true"]::after{transform:scaleX(1)}
.tabpanel{padding-top:26px;max-width:78ch;animation:faqIn .32s var(--ease-soft)}
.tabpanel[hidden]{display:none}
.tabpanel p{font-size:15px;line-height:1.75;margin:0 0 15px}
.tabpanel h4{font-size:16px;font-weight:700;margin:24px 0 10px}
.spec-table{width:100%;border-collapse:collapse;font-size:14.5px}
.spec-table tr{border-bottom:1px solid var(--line)}
.spec-table th{
  text-align:left;padding:13px 16px 13px 0;font-weight:600;color:var(--slate);
  width:220px;vertical-align:top;
}
.spec-table td{padding:13px 0;color:var(--navy);font-weight:500}

/* ---------- Ajakan pasang ---------- */
.cross{
  margin-top:clamp(40px,5vw,64px);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,34px);
  background:linear-gradient(140deg,var(--navy) 0%,#0B3D91 70%,var(--blue) 130%);
  border-radius:var(--r-xl);padding:clamp(26px,3.4vw,40px);color:#fff;
}
.cross-ic{
  width:60px;height:60px;border-radius:18px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:#fff;
}
.cross-ic svg{width:28px;height:28px}
.cross-txt{flex:1 1 300px}
.cross-txt h3{color:#fff;font-size:clamp(19px,2.4vw,24px);font-weight:800}
.cross-txt p{color:#BFD6F5;font-size:14.5px;line-height:1.65;margin:9px 0 0}

/* ============================================================
   HALAMAN LAYANAN (daftar + detail)
   ============================================================ */

/* ---------- Kartu layanan melebar ---------- */
.svc-row{display:grid;gap:clamp(16px,2vw,22px)}
.svc-wide{
  position:relative;
  display:grid;grid-template-columns:300px 1fr;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.svc-wide:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#CFE2F8}
.svc-wide-media{position:relative;overflow:hidden;background:var(--blue-100);min-height:240px}
.svc-wide-media::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,42,99,.22),rgba(11,42,99,0) 62%)}
.svc-wide-media .ph{position:absolute;inset:0;transition:transform .55s var(--ease)}
.svc-wide:hover .svc-wide-media .ph{transform:scale(1.05)}

.svc-wide-body{padding:clamp(22px,2.8vw,32px);display:flex;flex-direction:column}
.svc-wide-body h3{font-size:clamp(19px,2.2vw,23px);font-weight:800}
/* Judul adalah tautannya, dan tautan itu melebar menutupi seluruh kartu —
   jadi klik di mana pun pada kartu ikut terbaca, bukan hanya di tombol. */
.svc-wide-body h3 a{color:var(--navy);transition:color .2s var(--ease)}
.svc-wide-body h3 a::after{content:"";position:absolute;inset:0;z-index:4}
.svc-wide:hover .svc-wide-body h3 a{color:var(--blue)}
/* Tombol tinggal tampilan; keadaan hover-nya ikut kartu. */
.svc-wide:hover .svc-wide-foot .btn-primary{background:#0049A8;transform:translateY(-2px)}
.svc-wide:has(h3 a:focus-visible){outline:3px solid var(--blue-lit);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .svc-wide:hover .svc-wide-foot .btn-primary{transform:none}
}
.svc-wide-lede{font-size:15px;line-height:1.7;margin:11px 0 0}
.svc-points{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.svc-points li{position:relative;padding-left:26px;font-size:14px;line-height:1.55;color:var(--slate)}
.svc-points li::before{
  content:"";position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;
  background:var(--blue-100)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230059CC' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E")
    center/11px no-repeat;
}
.svc-wide-foot{
  margin-top:auto;padding-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;
}
.svc-quote{font-size:13px;color:var(--slate-lt);line-height:1.5;flex:1 1 190px}
.svc-quote strong{display:block;color:var(--navy);font-family:var(--f-display);font-size:14px;font-weight:700}
@media (max-width:860px){
  .svc-wide{grid-template-columns:1fr}
  .svc-wide-media{min-height:0;aspect-ratio:16/9}
}

/* ---------- Hero halaman layanan ---------- */
.lyn-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,58px);align-items:center}
.lyn-hero h1{font-size:clamp(30px,4.4vw,46px);font-weight:800;margin:12px 0 0}
.lyn-lede{font-size:clamp(15.5px,1.8vw,17.5px);line-height:1.7;margin:18px 0 0;max-width:52ch}
.lyn-frame{position:relative;aspect-ratio:4/3.2;border-radius:var(--r-xl);overflow:hidden;border:6px solid #fff;box-shadow:var(--shadow-lg)}
@media (max-width:900px){
  .lyn-hero{grid-template-columns:1fr}
  .lyn-hero .lyn-media{order:-1;max-width:520px;margin-inline:auto;width:100%}
}

/* ---------- Kartu masalah ---------- */
.prob-grid{--g:16px;display:flex;flex-wrap:wrap;gap:var(--g)}
.prob{
  flex:0 1 calc((100% - 3 * var(--g)) / 4);min-width:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:24px 22px;box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease),border-color .22s var(--ease);
}
.prob:hover{transform:translateY(-4px);border-color:#CFE2F8}
.prob-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--blue-100);color:var(--blue);margin-bottom:16px}
.prob-ic svg{width:21px;height:21px}
.prob h3{font-size:16px;font-weight:700}
.prob p{font-size:13.8px;line-height:1.62;margin:9px 0 0}
@media (max-width:1000px){.prob{flex-basis:calc((100% - var(--g)) / 2)}}
@media (max-width:520px){.prob{flex-basis:100%}}

/* ---------- Lingkup pekerjaan ---------- */
.scope{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);
  background:var(--blue-050);border:1px solid #DCE9F8;border-radius:var(--r-xl);
  padding:clamp(26px,3.4vw,42px);
}
.scope h3{font-size:clamp(19px,2.2vw,23px);font-weight:800}
.scope p{font-size:14.8px;line-height:1.7;margin:12px 0 0}
@media (max-width:800px){.scope{grid-template-columns:1fr}}

/* ---------- Cara biaya dihitung ---------- */
.cost-grid{--g:16px;display:flex;flex-wrap:wrap;gap:var(--g)}
.cost{
  flex:0 1 calc((100% - 3 * var(--g)) / 4);min-width:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:24px 22px;box-shadow:var(--shadow-sm);
}
.cost-n{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--blue);color:#fff;font-family:var(--f-display);font-weight:800;font-size:14px;
  margin-bottom:15px;
}
.cost h3{font-size:15.5px;font-weight:700}
.cost p{font-size:13.6px;line-height:1.6;margin:8px 0 0}
@media (max-width:1000px){.cost{flex-basis:calc((100% - var(--g)) / 2)}}
@media (max-width:520px){.cost{flex-basis:100%}}

/* ---------- Area layanan ---------- */
.area-chips{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0;padding:0;list-style:none}
.area-chips li{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:9px 16px 9px 12px;
  font-family:var(--f-display);font-size:13.5px;font-weight:600;color:var(--navy);
}
.area-chips li::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--blue-lit);flex:none;
}

/* ============================================================
   THEME-OWNED CSS — hand written. NOT generated, NOT enqueued.

   apps/wp-theme-allir/assets/css/allir.css is GENERATED: every
   `npm run assets` rewrites it from the FROZEN mockup stylesheet
   apps/mockup/assets/css/allir.css (tools/strip-scaffolding.mjs).
   So a hand edit to the theme copy is destroyed by the next build,
   and the mockup copy may not be edited at all (decisions D8/D9).

   This file is the one place the THEME may add CSS of its own.
   The generator parses it with postcss and appends its nodes to the
   end of the generated allir.css, so these rules load last and win
   the cascade against the mockup's without touching either source.

   Do not add it to inc/enqueue.php — it ships inside allir.css, and
   enqueueing it separately would load every rule here twice.

   Keep it small. Every rule is a deliberate divergence from the
   approved mockup and needs its reason written next to it.
   ============================================================ */

/* The mockup's layanan-detail page always fills both .scope columns,
   so the mockup never needed this. The theme does: single-layanan.php
   gates the first column ("Yang kami kerjakan") on
   `allir_layanan_lingkup`, because the approved copy for four of the
   five services does not exist in the frozen mockup and must not be
   invented. On those four pages the static "Setelah selesai" column is
   the only child of a `grid-template-columns:1fr 1fr` container, so it
   rendered at half width beside an empty half above 800px.

   Addressing the child directly avoids `:has()` entirely. Below 800px
   .scope is already a single column, where `1 / -1` is just that one
   column — so this needs no media query and changes nothing there. */
.scope > :only-child{grid-column:1 / -1}

/* The header logo on WooCommerce pages. The mockup has no shop, so it
   never met WooCommerce's woocommerce-layout.css, which ships
   `.woocommerce img,.woocommerce-page img{height:auto;max-width:100%}`.
   That selector is specificity 0,1,1 and beats the mockup's
   `.logo-img{height:34px}` (0,1,0), and body_class() puts
   `woocommerce-page` on /shop/, /cart/, /checkout/, /my-account/ and
   every product and category page. There the header logo rendered at
   its natural 900x438, and at a 390px phone viewport /shop/ was 994px
   wide: the pages paid ads land on, broken sideways. Measured in Chrome.

   Restating the mockup's own height at 0,2,0 wins again without
   `!important`. It deliberately stays BELOW the scrolled state,
   `.site-head.compact .logo-img{height:30px}` (0,3,0), which must still
   shrink it. The footer copy needs nothing: `.site-foot .logo-img`
   (0,2,0) already outranked the WooCommerce rule. */
.site-head .logo-img{height:34px}

/* The approved About Us CTA label, "Kenal Lebih Dekat, Konsultasikan
   Masalah Air Anda", is 50 characters. .btn is white-space:nowrap
   (mockup "Buttons") and overflow:hidden (mockup "Tombol"), so inside
   the .cross band on a 390px phone the shrunk button clipped its
   centred label at BOTH ends: "nal Lebih Dekat, ... Masalah A". The
   page itself did not overflow, so a document scrollWidth check could
   not see it. Letting only this band's button wrap shows the whole
   label: three centred lines on a 320-390px phone, as the approved
   design draws it, and one line at 600px and wider.

   The rule also reaches the one other .cross button, "Konsultasi
   Sekarang" on every service detail page. Its icon and label need a
   175.14px content box. From a 322px viewport up the button has that
   room: one line, 55px tall, exactly as before. At 320px and 321px the
   box is 174px and 175px, so the label now wraps to two lines, 80px
   tall; under nowrap it was cut off by 1.1px and 0.1px there. That wrap
   is intended, the same trade as the About button: the whole label on
   two lines beats a clipped one on one. Measured in Chrome with phone
   emulation, all five service pages. */
.cross .btn{white-space:normal;text-align:center}

/* About Us (page-about-us.php): the short blue bar under a LEFT-aligned
   heading. The mockup styles .rule only inside the centred .sec-head
   (`.sec-head .rule`, auto side margins), so a bare .rule has no size at
   all: measured 0px tall. The approved About Us design draws one under
   the hero h1 and one under the Solusi h2, both left-aligned, so this is
   the mockup's own bar, aligned to the start. No other template puts a
   .rule inside .lyn-hero or .about-copy (the service detail hero and the
   homepage's #tentang have none), so it reaches only that page. */
.lyn-hero .rule,.about-copy .rule{width:56px;height:4px;border-radius:2px;background:var(--blue);margin:20px 0 0}

/* About Us: the approved design spreads its four trust items across the
   full width. The mockup's .pd-trust, a three-item strip on the product
   page, packs them to the start, which left three quarters of the row
   empty on a desktop. Scoped to a strip that directly follows a .cross
   band, which only page-about-us.php renders. */
.cross + .pd-trust{justify-content:space-between}

/* Contact Us (page-contact-us.php): no mockup page has a contact-details
   grid, so these three classes are new, not reused. A responsive card grid
   for the per-channel details (WhatsApp, telepon, email, alamat, jam buka)
   and a wrapping row of buttons for the shop/social links below it. */
.contact-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.contact-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:2rem}

/* ============================================================
   REVISI KLIEN — "Revisi Website Allir.pdf", 2 Oktober 2026
   ============================================================ */

/* Warna diambil dari brand guide resmi Allir (SOP), bukan lagi dari angka di
   PDF revisi. PDF itu menulis "warna jadi 1c98ed"; brand guide menyebut
   #00A2E3 sebagai warna utama. Keduanya biru langit yang mirip, tapi yang
   dipakai adalah angka resminya.

   Brand guide-nya sendiri sudah mengantisipasi soal kontras, dan itulah
   sebabnya ia menyebut DUA biru: teks putih di atas #00A2E3 hanya 2,9:1, jauh
   di bawah ambang WCAG AA. #005BAA memberi 6,4:1, jadi semua permukaan biru
   solid yang memuat tulisan putih memakai itu. Aksen, gradien, garis bawah dan
   outline memakai #00A2E3.

   Ditulis sebagai var() ke token brand di stylesheet mockup, supaya warnanya
   punya satu sumber dan ketahuan asalnya; nilai cadangannya tetap ditulis
   kalau-kalau token itu hilang. */
:root{
  --blue:var(--brand-cyan, #00A2E3);
  --blue-deep:var(--brand-blue, #005BAA);
}

/* Permukaan biru solid yang memuat teks/ikon putih. background-color, bukan
   background, supaya shorthand dengan data-URI (li::before) tidak ikut hilang. */
.skip,
.btn-primary,
.about-badge,
.prod-badge,
.cost-n,
.guarantee li::before,
.pd-key li::before,
.foot-soc a:hover,
.faq-item[open] .faq-ic,
.step:hover .step-n,
.prod-cart:hover,
.pager [aria-current]{background-color:var(--blue-deep)}

.step:hover .step-n,
.prod-cart:hover,
.pager [aria-current]{border-color:var(--blue-deep)}

/* Label "SESUDAH" pada perbandingan foto — teks putih 11.5px di atas foto. */
.ba-label-a{background:rgba(0,91,170,.82)}

/* Bayangan di mockup memakai rgba biru lama (0,89,204) yang di-hardcode.
   Nilainya mengikuti palet brand: rgba(0,91,170) = #005BAA untuk bayangan
   permukaan, rgba(0,162,227) = #00A2E3 untuk cincin fokus. Sebelumnya masih
   memakai turunan dua warna lama (#0B74BE dan #1C98ED), jadi bayangan di bawah
   tombol biru brand sedikit meleset rona-nya.
   Disamakan ulang: bayangan permukaan mengikuti --blue-deep, cincin fokus
   mengikuti --blue yang baru. */
.btn-primary{box-shadow:0 6px 18px rgba(0,91,170,.26)}
.about-badge{box-shadow:0 12px 30px rgba(0,91,170,.34)}
.guarantee li::before{box-shadow:0 2px 6px rgba(0,91,170,.3)}
.search-field input:focus{box-shadow:0 0 0 3px rgba(0,162,227,.15)}
.price-row input:focus,
.select:focus{box-shadow:0 0 0 3px rgba(0,162,227,.14)}

/* --blue-lit (#1872D8) sengaja TIDAK diubah meski namanya kini lebih gelap
   dari --blue. Tugasnya outline fokus di atas latar terang; versi yang lebih
   terang hanya mencapai ~2.2:1 terhadap putih dan justru melemahkan
   aksesibilitas. */

/* ---------- Section baru: tanda-tanda air bermasalah ----------
   Diminta klien lewat gambar referensi. Kepala section-nya dua kolom
   (judul kiri, pengantar kanan), berbeda dari .sec-head bawaan yang
   rata tengah satu kolom — karena itu kelasnya sendiri, bukan reuse. */
.tanda-head{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(22px,4vw,56px);align-items:end;
  margin-bottom:clamp(30px,4vw,46px);
}
.tanda-head h2{font-size:clamp(28px,4.2vw,42px);font-weight:800;margin:12px 0 0;color:var(--navy)}
.tanda-intro{margin:0;font-size:17px;line-height:1.7;color:var(--slate)}

.tanda-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,18px)}
.tanda-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(16px,1.7vw,22px);box-shadow:var(--shadow-sm);
}
.tanda-card h3{margin:0;font-size:16px;font-weight:800;line-height:1.3;color:var(--blue-deep)}
.tanda-card p{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:var(--slate)}

@media (max-width:1040px){ .tanda-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){
  .tanda-head{grid-template-columns:1fr;align-items:start}
  .tanda-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:440px){ .tanda-grid{grid-template-columns:1fr} }

/* Section gelap (Kenapa Allir, CTA) memakai gradien resmi brand —
   #005BAA ke #00A2E3 — menggantikan navy, yang memang tidak ada di palet.

   Token --navy sendiri sengaja TIDAK diubah. Dari 28 pemakaiannya, hampir
   semuanya adalah warna TEKS judul di atas latar terang; menukarnya akan
   membuat seluruh judul situs jadi biru muda, bukan gelap. Yang diganti hanya
   latar dua section ini.

   Perhentian terangnya sengaja ditaruh di luar elemen (170%/165%, bukan 100%).
   Teks putih di atas #00A2E3 hanya 2,9:1 — di bawah ambang WCAG AA — jadi
   kalau warna itu sampai terlihat penuh, pengantar section jadi sulit dibaca.
   Dengan dilempar ke luar, bagian yang benar-benar tampak berhenti di tengah
   jalan: gelap di tempat teks berada, makin terang ke sudut yang kosong.

   Angkanya 205%/200%, bukan sekadar yang paling pas. Pada 170% teks kartu
   paling bawah mendapat 4,59:1 — lulus, tapi ambangnya 4,5, jadi sisanya cuma
   0,09. Satu kartu tambahan atau satu paragraf yang lebih panjang akan
   mendorong teks itu lebih jauh ke bagian terang dan menjatuhkannya di bawah
   ambang, tanpa ada yang menyadari. Dilebihkan supaya section ini masih boleh
   tumbuh. */
.why{background:linear-gradient(160deg,var(--blue-deep) 0%,var(--blue) 205%)}
.cta{background:linear-gradient(150deg,var(--blue-deep) 0%,var(--blue) 200%)}

/* ============================================================
   WARNA — mulai
   Editor warna (Allir → Warna). Setiap warna merek di stylesheet
   ditulis ulang di sini lewat var(--allir-*, <nilai lama>). Selama
   opsi allir_warna kosong, plugin tidak mencetak apa pun dan setiap
   var() jatuh ke nilai lamanya — tampilan persis seperti desain yang
   disetujui. tools/warna/mapping.test.mjs membuktikan tiap nilai
   cadangan sama dengan yang digantikannya, dan bahwa tak ada warna
   merek yang tertinggal di luar blok ini. Urutan aturan mengikuti
   urutan di stylesheet hasil generate; jangan diacak.
   ============================================================ */
:root{
  --navy:var(--allir-judul, #0B2A63);
  --navy-deep:var(--allir-judul-gelap, #07204D);
  --blue-lit:var(--allir-utama-lit, #1872D8);
  --blue-050:var(--allir-latar, #F5F9FE);
  --blue-100:var(--allir-latar-100, #E9F2FD);
  --blue-200:var(--allir-latar-200, #D8EAFC);
  --slate:var(--allir-teks, #5D6B84);
  --slate-lt:var(--allir-teks_samar, #8494AB);
  --wa:var(--allir-whatsapp, #1FAF5A);
  --shadow-sm:0 1px 2px var(--allir-judul-a06, rgba(11,42,99,.06)), 0 2px 8px var(--allir-judul-a05, rgba(11,42,99,.05));
  --shadow-md:0 4px 12px var(--allir-judul-a07, rgba(11,42,99,.07)), 0 12px 32px var(--allir-judul-a07, rgba(11,42,99,.07));
  --shadow-lg:0 10px 24px var(--allir-judul-a09, rgba(11,42,99,.09)), 0 28px 64px var(--allir-judul-a10, rgba(11,42,99,.10));
  --blue:var(--allir-utama, var(--brand-cyan, #00A2E3));
  --blue-deep:var(--allir-utama_gelap, var(--brand-blue, #005BAA));
}
.btn-wa{box-shadow:0 6px 18px var(--allir-whatsapp-a28, rgba(31,175,90,.28))}
.btn-wa:hover{background:var(--allir-whatsapp-hover, #189A4D);box-shadow:0 10px 24px var(--allir-whatsapp-a34, rgba(31,175,90,.34))}
.btn-primary{box-shadow:0 6px 18px var(--allir-utama_gelap-a26, rgba(0,91,170,.26))}
.btn-primary:hover{background:var(--allir-utama_gelap-hover, #0049A8)}
.hero{background:radial-gradient(1100px 620px at 82% -8%, var(--allir-hero_awal, #DCEBFB) 0%, var(--allir-hero_awal-a0, rgba(220,235,251,0)) 62%), linear-gradient(178deg,var(--allir-hero-tengah, #F7FBFF) 0%,var(--allir-hero_akhir, #EAF3FD) 100%)}
.hero h1 .accent{background-image:linear-gradient(var(--allir-utama-garis, #A9D0F7),var(--allir-utama-garis, #A9D0F7))}
.hero-chips li{border:1px solid var(--allir-latar-garis, #CFE2F8)}
.hero-frame::after{background:linear-gradient(90deg,var(--allir-hero_akhir-a92, rgba(233,242,253,.92)) 0%,var(--allir-hero_akhir-a35, rgba(233,242,253,.35)) 16%,var(--allir-hero_akhir-a0, rgba(233,242,253,0)) 38%), linear-gradient(196deg,var(--allir-judul-a0, rgba(11,42,99,0)) 52%,var(--allir-judul-gelap-a34, rgba(7,32,77,.34)) 100%)}
@media (max-width:900px){
  .hero-frame::after{background:linear-gradient(180deg,var(--allir-judul-a0, rgba(11,42,99,0)) 55%,var(--allir-judul-gelap-a34, rgba(7,32,77,.34)) 100%)}
}
.svc:hover{border-color:var(--allir-latar-garis, #CFE2F8)}
.svc-img::after{background:linear-gradient(180deg,var(--allir-judul-a0, rgba(11,42,99,0)) 55%,var(--allir-judul-a50, rgba(11,42,99,.5)) 100%)}
.why{background:linear-gradient(160deg,var(--allir-mengapa_awal, var(--blue-deep)) 0%,var(--allir-mengapa_akhir, var(--blue)) 205%)}
.why .sec-head p{color:var(--allir-mengapa-teks, #BFD6F5)}
.why .sec-head .eyebrow{color:var(--allir-mengapa-aksen, #7FB2F0)}
.why .sec-head .rule{background:var(--allir-mengapa-garis, #4E93E8)}
.why-card p{color:var(--allir-mengapa-teks, #C3D8F3)}
.about-badge{box-shadow:0 12px 30px var(--allir-utama_gelap-a34, rgba(0,91,170,.34))}
.about-badge span{color:var(--allir-utama_gelap-teks, #CFE3FB)}
.guarantee{border:1px solid var(--allir-latar-garis, #DCE9F8)}
.guarantee li::before{box-shadow:0 2px 6px var(--allir-utama_gelap-a30, rgba(0,91,170,.3))}
.ba-stage{background:var(--allir-judul, #0B2A63)}
.ba-label-b{background:var(--allir-judul-a72, rgba(11,42,99,.72))}
.ba-label-a{background:var(--allir-utama_gelap-a82, rgba(0,91,170,.82))}
.ba-handle{box-shadow:0 0 0 1px var(--allir-judul-a18, rgba(11,42,99,.18)), 0 0 22px rgba(0,0,0,.28)}
.ba-handle::after{box-shadow:0 4px 16px var(--allir-judul-a32, rgba(11,42,99,.32))}
.lab-row{border-bottom:1px dashed var(--allir-latar-garis, #D9E5F4)}
.gal figcaption{background:linear-gradient(180deg,var(--allir-judul-a0, rgba(11,42,99,0)),var(--allir-judul-gelap-a82, rgba(7,32,77,.82)))}
.client-slot{border:1.5px dashed var(--allir-latar-garis, #CBD8E8)}
.steps::before{background:repeating-linear-gradient(90deg,var(--allir-latar-garis, #C7DCF5) 0 8px,transparent 8px 16px)}
.step-n{box-shadow:0 4px 14px var(--allir-judul-a09, rgba(11,42,99,.09))}
.faq-item[open]{border-color:var(--allir-latar-garis, #CFE2F8)}
.cta{background:linear-gradient(150deg,var(--allir-cta_awal, var(--blue-deep)) 0%,var(--allir-cta_akhir, var(--blue)) 200%)}
.cta p{color:var(--allir-cta-teks, #BFD6F5)}
.cta-note{color:var(--allir-cta-samar, #93B7E6)}
.site-foot{background:var(--allir-footer, #071B3F);color:var(--allir-footer-teks, #9BB4D6)}
.site-foot .logo-tag{color:var(--allir-footer-teks-samar, #6E8DB8)}
.foot-soc a{color:var(--allir-footer-teks-terang, #C6D9F2)}
.foot-col a{color:var(--allir-footer-teks, #9BB4D6)}
.wa-float{box-shadow:0 8px 26px var(--allir-whatsapp-a40, rgba(31,175,90,.4))}
.hero-chips li:hover{border-color:var(--allir-latar-garis-kuat, #9CC8F5);box-shadow:0 4px 12px var(--allir-judul-a09, rgba(11,42,99,.09))}
.site-head.compact{box-shadow:0 4px 20px var(--allir-judul-a08, rgba(11,42,99,.08))}
@keyframes waPulse{
  0%{box-shadow:0 8px 26px var(--allir-whatsapp-a40, rgba(31,175,90,.4)),0 0 0 0 var(--allir-whatsapp-a42, rgba(31,175,90,.42))}
  70%{box-shadow:0 8px 26px var(--allir-whatsapp-a40, rgba(31,175,90,.4)),0 0 0 14px var(--allir-whatsapp-a0, rgba(31,175,90,0))}
  100%{box-shadow:0 8px 26px var(--allir-whatsapp-a40, rgba(31,175,90,.4)),0 0 0 0 var(--allir-whatsapp-a0, rgba(31,175,90,0))}
}
.page-hero{background:linear-gradient(176deg,var(--allir-hero-tengah, #F7FBFF) 0%,var(--allir-hero_akhir, #E9F2FD) 100%)}
.search-field input:focus{box-shadow:0 0 0 3px var(--allir-utama-ring, rgba(0,162,227,.15))}
.cat-card:hover{border-color:var(--allir-latar-garis, #CFE2F8)}
.cat-media::after{background:linear-gradient(180deg,var(--allir-judul-a0, rgba(11,42,99,0)) 50%,var(--allir-judul-a55, rgba(11,42,99,.55)) 100%)}
.price-row input:focus,
.select:focus{box-shadow:0 0 0 3px var(--allir-utama-ring, rgba(0,162,227,.14))}
.prod-card:hover{border-color:var(--allir-latar-garis, #CFE2F8)}
.prod-thumb .ic{color:var(--allir-latar-ikon, #9EC4EE)}
.prod-thumb .cap{color:var(--allir-latar-ikon, #9EC4EE)}
.pd-main .ic{color:var(--allir-latar-ikon, #9EC4EE)}
.pd-main .cap{color:var(--allir-latar-ikon, #9EC4EE)}
.pd-thumbs button{color:var(--allir-latar-ikon, #A9CDF2)}
.cross{background:linear-gradient(140deg,var(--navy) 0%,var(--allir-judul-tengah, #0B3D91) 70%,var(--blue) 130%)}
.cross-txt p{color:var(--allir-judul-teks-terang, #BFD6F5)}
.svc-wide:hover{border-color:var(--allir-latar-garis, #CFE2F8)}
.svc-wide-media::after{background:linear-gradient(100deg,var(--allir-judul-a22, rgba(11,42,99,.22)),var(--allir-judul-a0, rgba(11,42,99,0)) 62%)}
.svc-wide:hover .svc-wide-foot .btn-primary{background:var(--allir-utama_gelap-hover, #0049A8)}
.prob:hover{border-color:var(--allir-latar-garis, #CFE2F8)}
.scope{border:1px solid var(--allir-latar-garis, #DCE9F8)}
/* WARNA — selesai */