/*
Theme Name: Myhansoft
Theme URI: https://myhansoft.com/
Author: Myhansoft
Author URI: https://myhansoft.com/
Description: Theme company profile ringan & SEO-friendly untuk penyedia Software Penjualan (POS kasir) dan jasa pengembangan software custom. Dilengkapi dashboard analitik pengunjung bawaan, badge WhatsApp, dan tampilan modern ala Gen Z. Tanpa page builder, tanpa jQuery.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myhansoft
Tags: business, portfolio, one-column, two-columns, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, blog
*/

/* =========================================================
   1. TOKEN & RESET
   ========================================================= */
:root{
  /* Biru Material: primer #2196F3, gelap #0D47A1, aksen cyan #00BCD4. */
  --ink:#0D47A1;
  --ink-2:#1565C0;
  --ink-3:#1976D2;
  --text:rgba(0,0,0,.87);
  --mint:#2196F3;
  --mint-600:#1976D2;
  --lime:#00BCD4;
  --violet:#00BCD4;
  --violet-600:#0097A7;
  --amber:#FFC107;
  --grad:linear-gradient(30deg,#2196F3 25%,#00BCD4 140%);
  --paper:#FFFFFF;
  --sand:#F1F8FE;
  --sand-2:#E3F2FD;
  --muted:rgba(0,0,0,.6);
  --line:rgba(0,0,0,.12);
  --line-dark:rgba(255,255,255,.16);

  /* Sudut tegas ala Material: tombol 4px, kartu 12px. */
  --radius-s:4px;
  --radius:8px;
  --radius-l:12px;
  --radius-xl:16px;

  /* Bayangan tipis dan lebar, bukan bayangan dalam. */
  --shadow-s:0 1.5px 8px rgba(0,0,0,.05);
  --shadow:0 1.5px 12px 2px rgba(0,0,0,.06);
  --shadow-l:0 6px 24px 2px rgba(0,0,0,.12);

  --font:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-head:"Roboto Condensed",Roboto,-apple-system,"Segoe UI",Arial,sans-serif;
  --maxw:1180px;
  --gutter:20px;
  --sect:clamp(44px,4.4vw,68px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{
  margin:0;font-family:var(--font);font-size:16px;line-height:1.6;
  color:var(--text);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
h1,h2,h3,h4,h5{
  margin:0 0 .5em;font-family:var(--font-head);
  line-height:1.26;letter-spacing:normal;font-weight:700;
}
h1{font-size:clamp(2.1rem,5vw,3rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.15rem,1.8vw,1.35rem);font-family:var(--font);font-weight:500;line-height:1.4}
h4{font-size:1.05rem;font-family:var(--font);font-weight:500}
ul,ol{padding-left:1.15em}
button{font-family:inherit}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:9999;border-radius:0 0 12px 0}
.skip-link:focus{left:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sect)}
.section--tight{padding-block:clamp(32px,3.4vw,48px)}
.center{text-align:center}
.mx-auto{margin-inline:auto}

/* =========================================================
   2. KOMPONEN DASAR
   ========================================================= */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:500;letter-spacing:.02em;
  padding:7px 14px;border-radius:999px;
  background:rgba(33,150,243,.10);color:var(--mint-600);
  border:1px solid rgba(33,150,243,.28);
}
.pill--dark{background:rgba(33,150,243,.10);color:var(--mint-600);border-color:rgba(33,150,243,.28)}
.pill--violet{background:rgba(0,188,212,.12);color:var(--violet-600);border-color:rgba(0,188,212,.28)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font);font-weight:700;font-size:.94rem;line-height:1;
  text-transform:uppercase;letter-spacing:.03em;
  padding:15px 26px;border-radius:var(--radius-s);border:2px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--mint);color:#fff;box-shadow:0 2px 10px 1px rgba(33,150,243,.34)}
.btn--primary:hover{background:var(--mint-600);box-shadow:0 5px 18px 2px rgba(33,150,243,.42)}
.btn--dark{background:var(--ink);color:#fff}
.btn--ghost{background:transparent;color:var(--mint-600);border-color:rgba(33,150,243,.5)}
.btn--ghost:hover{border-color:var(--mint);background:rgba(33,150,243,.06)}
.btn--ghost-light{background:#fff;color:var(--mint);border-color:rgba(33,150,243,.28)}
.btn--ghost-light:hover{background:rgba(33,150,243,.06);border-color:var(--mint)}
.btn--sm{padding:11px 18px;font-size:.82rem}
.btn--block{width:100%}

.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mint);margin-bottom:12px}
.lead{font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.75;color:var(--muted);max-width:62ch}
.lead--light{color:var(--muted)}
.sect-head{max-width:760px;margin-bottom:clamp(24px,2.8vw,40px)}
.sect-head.center{margin-inline:auto}
/* Judul seksi: biru dengan garis pendek di bawahnya, mengikuti gaya
   judul seksi pada referensi desain. */
.sect-head h2{color:var(--ink-2)}
.sect-head h2::after{content:"";display:block;width:56px;height:5px;border-radius:2px;background:var(--mint);margin:18px 0 0}
.sect-head.center h2::after{margin-inline:auto}
/* Panel gelap tetap memakai judul putih. */
.tile--deep .sect-head h2,.cta-band h2{color:#fff}

.grid{display:grid;gap:clamp(16px,2vw,24px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.card{
  background:var(--paper);border:1px solid transparent;border-radius:var(--radius-l);
  box-shadow:var(--shadow);
  padding:clamp(22px,2.6vw,30px);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  position:relative;overflow:hidden;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-l);border-color:transparent}
.card__ico{
  width:56px;height:56px;border-radius:var(--radius);display:grid;place-items:center;
  background:var(--sand-2);color:var(--ink);margin-bottom:18px;font-size:27px;
}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);margin:0;font-size:.97rem}

/* =========================================================
   3. HEADER
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:900;
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s ease,box-shadow .2s ease;
}
.site-header.is-stuck{border-color:var(--line);box-shadow:0 4px 20px rgba(13,71,161,.08)}
.header-inner{display:flex;align-items:center;gap:20px;min-height:74px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;font-size:1.3rem;letter-spacing:normal;flex:0 0 auto}
.brand__mark{
  width:38px;height:38px;border-radius:var(--radius-s);display:grid;place-items:center;flex:0 0 auto;
  background:var(--mint);color:#fff;
  font-size:1.05rem;font-weight:700;
}
.brand img{max-height:40px;width:auto}
.brand__dot{color:var(--violet)}

.nav{margin-left:auto}
.nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav a{
  display:block;padding:9px 14px;border-radius:var(--radius-s);font-weight:500;font-size:.95rem;
  color:var(--text);transition:background .18s ease,color .18s ease;
}
.nav a:hover{background:var(--sand)}
.nav .current-menu-item>a,.nav .current_page_item>a{background:transparent;color:var(--mint);box-shadow:inset 0 -3px 0 var(--mint);border-radius:0}
.nav li{position:relative}
.nav .menu-item-has-children>a::after{content:"▾";margin-left:7px;font-size:.7em;opacity:.55;display:inline-block}
/* Induk tetap tersorot selama submenu-nya terbuka */
.nav .menu-item-has-children:hover>a,.nav .menu-item-has-children:focus-within>a,.nav .menu-item-has-children.is-open>a{background:var(--sand);color:var(--mint-600)}
.nav .sub-menu{
  position:absolute;top:100%;left:0;min-width:236px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-l);padding:8px;
  display:flex;flex-direction:column;align-items:stretch;gap:2px;
  margin-top:10px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-10px) scale(.97);transform-origin:22px top;
  transition:opacity .22s ease,transform .26s cubic-bezier(.16,1,.3,1),visibility 0s linear .26s;
}
/* Jembatan tak terlihat: menutup celah antara menu induk dan submenu
   supaya submenu tidak hilang saat kursor turun. */
.nav .sub-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu,.nav li>.sub-menu:hover,.nav li.is-open>.sub-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s;
}
/* Item submenu ikut masuk berurutan */
.nav .sub-menu li{opacity:0;transform:translateX(-6px);transition:opacity .24s ease,transform .24s ease}
.nav li:hover>.sub-menu li,.nav li:focus-within>.sub-menu li,.nav li>.sub-menu:hover li,.nav li.is-open>.sub-menu li{opacity:1;transform:none}
.nav .sub-menu li:nth-child(1){transition-delay:.04s}
.nav .sub-menu li:nth-child(2){transition-delay:.07s}
.nav .sub-menu li:nth-child(3){transition-delay:.10s}
.nav .sub-menu li:nth-child(4){transition-delay:.13s}
.nav .sub-menu li:nth-child(5){transition-delay:.16s}
.nav .sub-menu li:nth-child(n+6){transition-delay:.19s}
.nav .sub-menu a{border-radius:10px;white-space:nowrap;width:100%}
.nav .sub-menu .current-menu-item>a,.nav .sub-menu .current_page_item>a{background:var(--sand);color:var(--mint-600)}

.header-cta{flex:0 0 auto}
.nav-toggle{
  display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;
  border-radius:13px;cursor:pointer;align-items:center;justify-content:center;margin-left:auto;
}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);position:relative;border-radius:2px;transition:.2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media(max-width:900px){
  .nav-toggle{display:flex}
  .header-cta{display:none}
  .nav{
    position:fixed;inset:74px 0 auto 0;background:#fff;margin:0;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-l);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .nav.is-open{max-height:80vh;overflow-y:auto}
  .nav ul{flex-direction:column;align-items:stretch;gap:2px;padding:14px var(--gutter) 22px}
  .nav a{padding:13px 16px;border-radius:14px;font-size:1.02rem}
  .nav .sub-menu{
    display:flex;position:static;border:0;box-shadow:none;padding:0 0 0 14px;margin-top:0;min-width:0;
    opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:none;
  }
  .nav .sub-menu li{opacity:1;transform:none;transition:none}
  .nav .sub-menu::before{display:none}
  .nav .menu-item-has-children>a::after{display:none}
}

/* =========================================================
   4. HERO
   ========================================================= */
.hero{
  position:relative;background:var(--paper);color:var(--text);overflow:hidden;
  padding-block:clamp(56px,7vw,96px) clamp(64px,8vw,108px);
}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none}
.hero::before{width:620px;height:620px;background:#2196F3;top:-230px;right:-180px;opacity:.20}
.hero::after{width:480px;height:480px;background:#00BCD4;bottom:-250px;left:-190px;opacity:.16}
.hero__grid{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(13,71,161,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(13,71,161,.05) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 20%,transparent 70%)}
.hero .wrap{position:relative;z-index:2}
.hero__layout{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,4vw,56px);align-items:center}
@media(max-width:940px){.hero__layout{grid-template-columns:1fr}}
.hero h1{margin-bottom:20px}
/* Kata berwarna di judul hero memakai background-clip:text. Kotak latarnya
   pas selebar teks, sehingga huruf yang ujungnya menjorok ke kanan (r, y, f)
   ikut terpotong. Padding melebarkan kotaknya, margin negatif membatalkan
   pergeseran letaknya supaya jarak ke kata berikutnya tidak berubah. */
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em;margin-right:-.08em}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;font-size:.9rem;color:var(--muted)}
.hero__meta span{display:inline-flex;align-items:center;gap:7px}
.hero__meta i{color:var(--violet-600);font-style:normal;font-weight:900}

/* Mockup kasir */
.mock{
  position:relative;border-radius:var(--radius-xl);padding:16px;
  background:#fff;
  border:1px solid var(--line);box-shadow:0 30px 80px rgba(33,150,243,.22);
}
.mock__bar{display:flex;gap:6px;padding:0 4px 12px}
.mock__bar i{width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,.14)}
.mock__screen{position:relative;background:#fff;border-radius:22px;overflow:hidden;color:var(--text)}
/* Penanda bahwa layar kasir ini hanya ilustrasi, bukan data sungguhan. */
.mock__cap{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  transform:rotate(-16deg);
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.2rem,6vw,3.4rem);letter-spacing:.14em;
  color:rgba(13,71,161,.16);
  pointer-events:none;user-select:none;-webkit-user-select:none;
}
.mock__top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--sand);font-size:.78rem;font-weight:800}
.mock__items{padding:10px 16px}
.mock__row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px dashed var(--sand-2);font-size:.84rem}
.mock__row:last-child{border-bottom:0}
.mock__row b{font-weight:700}
.mock__row span{color:var(--muted);font-size:.78rem;display:block;font-weight:500}
.mock__total{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--grad);color:#fff;font-weight:900}
.mock__total b{color:#fff;font-size:1.12rem}
.mock__pay{display:flex;gap:8px;padding:12px 16px 16px}
.mock__pay span{flex:1;text-align:center;padding:10px 6px;border-radius:12px;background:var(--sand);font-size:.74rem;font-weight:800}
.mock__pay span.is-on{background:var(--violet);color:#fff}
.float-badge{
  position:absolute;background:#fff;color:var(--ink);border-radius:16px;padding:12px 16px;
  box-shadow:var(--shadow-l);font-size:.78rem;font-weight:800;display:flex;align-items:center;gap:9px;
  animation:floaty 4.5s ease-in-out infinite;
}
.float-badge--a{top:-18px;left:-14px}
.float-badge--b{bottom:-20px;right:-10px;animation-delay:1.6s}
.float-badge em{font-style:normal;color:var(--mint-600);font-size:1.05rem}
@media(max-width:520px){.float-badge{display:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* Marquee logo / industri */
.marquee{background:var(--sand);color:var(--text);padding:16px 0;overflow:hidden;border-block:1px solid var(--line)}
.marquee__track{display:flex;gap:44px;width:max-content;animation:slide 26s linear infinite;align-items:center}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:.95rem;color:var(--muted);white-space:nowrap}
.marquee__track span i{font-style:normal;color:var(--mint)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================
   5. STAT / BENTO / LANGKAH
   ========================================================= */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px)}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--sand);border-radius:var(--radius-l);padding:26px 22px;text-align:center}
.stat b{display:block;font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:900;letter-spacing:-.04em;line-height:1}
.stat span{display:block;margin-top:8px;font-size:.88rem;color:var(--muted);font-weight:600}

.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,2vw,22px)}
.bento>*{grid-column:span 2}
.bento .span-3{grid-column:span 3}
.bento .span-4{grid-column:span 4}
.bento .span-6{grid-column:span 6}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.bento>*,.bento .span-3,.bento .span-4,.bento .span-6{grid-column:span 2}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.bento>*,.bento .span-3,.bento .span-4,.bento .span-6{grid-column:span 1}}

.tile{background:var(--sand);border-radius:var(--radius-l);padding:clamp(22px,2.6vw,32px);position:relative;overflow:hidden}
.tile h3{margin-bottom:10px}
.tile p{margin:0 0 .8em;font-size:.97rem;color:var(--muted)}
.tile p:last-child{margin-bottom:0}
.tile--dark{background:var(--ink);color:#fff}
.tile--dark p{color:rgba(255,255,255,.72)}
.tile--mint{background:linear-gradient(150deg,#00BCD4,#7EDDE8);color:#04333A}
.tile--mint p{color:rgba(4,51,58,.78)}
.tile--violet{background:linear-gradient(150deg,var(--violet),#A48BFF);color:#fff}
.tile--violet p{color:rgba(255,255,255,.86)}
.tile--deep{background:linear-gradient(155deg,var(--ink),var(--ink-3));color:#fff}
.tile--deep p{color:rgba(255,255,255,.75)}
.tile--deep h2,.tile--deep h3{color:#fff}
.tile__num{font-size:2.6rem;font-weight:900;letter-spacing:-.04em;line-height:1;margin-bottom:10px;opacity:.22}

.steps{counter-reset:s;display:grid;gap:clamp(16px,2vw,22px);grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:28px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-l)}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;top:-16px;left:22px;width:38px;height:38px;border-radius:13px;
  background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:900;font-size:1rem;
}
.step h4{margin:14px 0 6px;font-size:1.08rem;font-weight:800}
.step p{margin:0;color:var(--muted);font-size:.94rem}

/* =========================================================
   6. INDUSTRI / LAYANAN
   ========================================================= */
.ind{
  display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);
  padding:clamp(20px,2.4vw,26px);transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
  position:relative;overflow:hidden;
}
.ind:hover{transform:translateY(-6px);box-shadow:var(--shadow-l)}
.ind__emoji{font-size:34px;line-height:1;margin-bottom:14px}
.ind h3{font-size:1.16rem;margin-bottom:6px}
.ind p{color:var(--muted);font-size:.92rem;margin:0 0 14px}
.ind ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.ind ul li{font-size:.74rem;font-weight:700;background:var(--sand);color:var(--muted);padding:5px 10px;border-radius:999px}
.ind__more{display:block;margin-top:16px;font-weight:800;font-size:.88rem;color:var(--mint-600)}
a.ind:hover .ind__more{text-decoration:underline;text-underline-offset:3px}
.ind .more{display:block;margin-top:14px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.checks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem}
.tile--dark .checks li::before,.tile--deep .checks li::before,.price--hot .checks li::before{background:rgba(255,255,255,.18);color:#fff}
.price--hot .price__list li::before{color:var(--violet)}
.checks li::before{
  content:"✓";flex:0 0 auto;width:24px;height:24px;border-radius:8px;background:rgba(33,150,243,.12);
  color:var(--mint);display:grid;place-items:center;font-weight:900;font-size:.8rem;margin-top:2px;
}

/* =========================================================
   7. HARGA
   ========================================================= */
.price{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:clamp(26px,3vw,34px);display:flex;flex-direction:column;position:relative;
}
.price--hot{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:var(--shadow-l)}
.price--hot .price__desc,.price--hot .price__list li{color:rgba(255,255,255,.74)}
.price__tag{
  position:absolute;top:18px;right:18px;font-size:.7rem;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;background:var(--violet);color:#fff;padding:6px 11px;border-radius:999px;
}
.price h3{font-size:1.22rem;margin-bottom:4px}
.price__desc{color:var(--muted);font-size:.9rem;margin-bottom:18px}
.price__amount{font-size:clamp(1.9rem,3.4vw,2.5rem);font-weight:900;letter-spacing:-.04em;line-height:1.05;min-height:clamp(84px,8vw,118px)}
.price__amount small{display:block;font-size:.82rem;font-weight:600;opacity:.6;letter-spacing:0;margin-top:6px}
.price__list{list-style:none;padding:0;margin:22px 0 26px;display:grid;gap:10px;font-size:.94rem;color:var(--muted)}
.price__list li{display:flex;gap:10px;align-items:flex-start}
.price__list li::before{content:"→";color:var(--mint-600);font-weight:900;flex:0 0 auto}
.price .btn{margin-top:auto}

/* =========================================================
   8. TESTIMONI & FAQ
   ========================================================= */
.quote{background:var(--sand);border-radius:var(--radius-l);padding:clamp(24px,2.8vw,32px);display:flex;flex-direction:column}
.quote__stars{color:#FFB020;letter-spacing:2px;margin-bottom:14px;font-size:.95rem}
.quote p{font-size:1.02rem;margin-bottom:20px}
.quote__by{display:flex;align-items:center;gap:12px;margin-top:auto}
.quote__av{width:44px;height:44px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:900;flex:0 0 auto}
.quote__by b{display:block;font-size:.95rem}
.quote__by span{font-size:.82rem;color:var(--muted)}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 46px 22px 0;position:relative;
  font-weight:800;font-size:1.04rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:400;color:var(--mint-600);transition:transform .2s ease;
}
.faq details[open] summary::after{content:"–"}
.faq__a{padding:0 46px 24px 0;color:var(--muted);margin:0}

/* =========================================================
   9. CTA & KONTAK
   ========================================================= */
.cta-band{
  background:var(--grad);color:#fff;border-radius:var(--radius-xl);
  padding:clamp(34px,5vw,64px);position:relative;overflow:hidden;
}
.cta-band::after{content:"";position:absolute;width:420px;height:420px;background:#fff;filter:blur(120px);opacity:.22;top:-170px;right:-130px;border-radius:50%}
.cta-band>*{position:relative;z-index:2}
.cta-band,.cta-band h2,.cta-band h3{color:#fff}
.cta-band .eyebrow{color:rgba(255,255,255,.92)}
.cta-band .lead,.cta-band .lead--light,.cta-band p{color:rgba(255,255,255,.86)}
.cta-band .contact-list b{color:rgba(255,255,255,.72)}
.cta-band .contact-list a,.cta-band .contact-list span{color:#fff}
.cta-band .contact-list .ci{background:rgba(255,255,255,.18)}
.cta-band .form-card .lead,.cta-band .form-card p{color:var(--muted)}
.cta-band .btn{margin-top:8px}

.form-card{background:#fff;color:var(--ink);border-radius:var(--radius-l);padding:clamp(22px,3vw,32px)}
.form-card h3{color:var(--text)}
.form-card .form-note{color:var(--muted)}

.form{display:grid;gap:14px}
.form label{font-size:.86rem;font-weight:800;display:block;margin-bottom:6px;color:var(--text)}
.form input,.form select,.form textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:14px;
  font-family:inherit;font-size:.97rem;background:#fff;color:var(--text);transition:border-color .18s ease,box-shadow .18s ease;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 4px rgba(33,150,243,.14)}
.form textarea{min-height:120px;resize:vertical}
.form .hp{position:absolute;left:-9999px}
.form-note{font-size:.82rem;color:var(--muted);margin:0}
.notice{padding:14px 18px;border-radius:14px;font-size:.92rem;font-weight:600;margin-bottom:16px}
.notice--ok{background:rgba(33,150,243,.12);color:var(--mint-600)}
.notice--err{background:rgba(255,80,80,.12);color:#C0392B}

.contact-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px}
.contact-list li{display:flex;gap:14px;align-items:flex-start}
.contact-list .ci{width:42px;height:42px;border-radius:13px;background:var(--sand);display:grid;place-items:center;flex:0 0 auto;font-size:19px}
.contact-list b{display:block;font-size:.82rem;color:var(--muted);font-weight:700}
.contact-list a,.contact-list span{font-weight:700}

/* =========================================================
   10. FOOTER + WHATSAPP FLOAT
   ========================================================= */
.site-footer{background:var(--ink);color:rgba(255,255,255,.66);padding-block:clamp(48px,6vw,76px) 28px;margin-top:0}
.site-footer h4{color:#fff;font-size:.86rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,40px)}
@media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.site-footer .brand{color:#fff;margin-bottom:14px}
.site-footer .brand--gambar{display:inline-flex}
.site-footer .brand img{max-height:48px;width:auto;height:auto}
.site-footer p{font-size:.94rem}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.site-footer ul a{font-size:.94rem;transition:color .18s ease}
.site-footer ul a:hover{color:var(--mint)}
.socials{display:flex;gap:10px;margin-top:16px}
.socials a{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.07);display:grid;place-items:center;transition:background .18s ease,transform .18s ease}
.socials a:hover{background:var(--mint);color:#06283D;transform:translateY(-3px)}
.footer-bottom{margin-top:44px;padding-top:22px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.86rem}

.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:950;display:flex;align-items:center;gap:11px;
  background:#25D366;color:#fff;padding:13px 20px 13px 15px;border-radius:999px;font-weight:800;font-size:.95rem;
  box-shadow:0 12px 34px rgba(37,211,102,.44);transition:transform .2s ease,box-shadow .2s ease;
}
.wa-float:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 18px 44px rgba(37,211,102,.55)}
.wa-float svg{width:24px;height:24px;flex:0 0 auto}
.wa-float::before{
  content:"";position:absolute;inset:0;border-radius:999px;border:2px solid #25D366;
  animation:pulse 2.4s ease-out infinite;pointer-events:none;
}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35);opacity:0}}
@media(max-width:560px){
  .wa-float{right:14px;bottom:14px;padding:14px;gap:0}
  .wa-float span{display:none}
}

/* =========================================================
   11. BLOG / HALAMAN DALAM
   ========================================================= */
.page-hero{background:var(--sand);padding-block:clamp(44px,5vw,76px);border-bottom:1px solid var(--line)}
/* Varian tipis: hanya berisi breadcrumb, judulnya disembunyikan. */
.page-hero--ringkas{padding-block:18px 16px}
.page-hero h1{margin-bottom:10px}
.breadcrumb{font-size:.84rem;color:var(--muted);margin-bottom:16px}
.breadcrumb a:hover{color:var(--ink);text-decoration:underline}
.breadcrumb span[aria-current]{color:var(--text);font-weight:700}
.hero .breadcrumb{margin-bottom:22px}

.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-l)}
.post-card__thumb{aspect-ratio:16/10;overflow:hidden;background:var(--sand)}
.post-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.post-card:hover .post-card__thumb img{transform:scale(1.05)}
.post-card__body{padding:22px;display:flex;flex-direction:column;flex:1}
.post-card__meta{font-size:.78rem;color:var(--muted);font-weight:700;margin-bottom:9px;text-transform:uppercase;letter-spacing:.05em}
.post-card h3{font-size:1.12rem;margin-bottom:8px}
.post-card p{color:var(--muted);font-size:.93rem;margin-bottom:16px}
.post-card .more{margin-top:auto;font-weight:800;font-size:.9rem;color:var(--mint-600)}

.entry{max-width:760px;margin-inline:auto}
.entry img{border-radius:var(--radius)}
.entry h2{margin-top:1.6em}
.entry h3{margin-top:1.4em}
.entry blockquote{margin:1.6em 0;padding:18px 24px;border-left:4px solid var(--mint);background:var(--sand);border-radius:0 var(--radius) var(--radius) 0;font-size:1.05rem}
.entry ul,.entry ol{margin-bottom:1.2em}
.entry li{margin-bottom:.5em}
.entry a{color:var(--mint-600);text-decoration:underline;text-underline-offset:3px}
/* Tombol dan kartu yang dicetak theme di dalam .entry tidak boleh ikut gaya
   tautan artikel — kalau ikut, teksnya jadi biru tua di atas latar biru. */
.entry a.btn{text-decoration:none}
.entry a.btn--primary,.entry a.btn--dark{color:#fff}
.entry a.btn--ghost{color:var(--mint-600)}
.entry a.btn--ghost-light{color:var(--mint)}
.entry a.card{color:inherit;text-decoration:none}
.entry table{width:100%;border-collapse:collapse;margin-bottom:1.4em;font-size:.95rem}
.entry th,.entry td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.entry th{background:var(--sand);font-weight:800}
.entry pre{background:var(--ink);color:#E6EDF3;padding:18px;border-radius:var(--radius);overflow:auto;font-size:.88rem}
.entry code{background:var(--sand);padding:2px 6px;border-radius:6px;font-size:.9em}
.entry pre code{background:none;padding:0}
.entry figcaption{font-size:.84rem;color:var(--muted);text-align:center;margin-top:8px}

.pagination{display:flex;gap:8px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.pagination .page-numbers{padding:10px 16px;border-radius:12px;background:var(--sand);font-weight:700;font-size:.92rem}
.pagination .current{background:var(--ink);color:#fff}
.alignleft{float:left;margin:0 1.4em .8em 0}
.alignright{float:right;margin:0 0 .8em 1.4em}
.aligncenter{margin-inline:auto}
.wp-caption{max-width:100%}
.sticky .post-card{border-color:var(--mint)}

.comment-list{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:18px}
.comment-list ul.children{list-style:none;padding-left:26px;margin-top:18px;display:grid;gap:18px}
.comment-body{background:var(--sand);border-radius:var(--radius);padding:20px}
.comment-meta{font-size:.84rem;color:var(--muted);margin-bottom:8px}
.comment-meta b{color:var(--ink)}

/* ============================================================
   SISTEM ANIMASI
   Semua pakai transform + opacity saja (dipercepat GPU),
   jadi tidak memicu layout-shift dan tidak membebani render.
   ============================================================ */

:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.62s;
}

/* --- 1. Reveal saat di-scroll -------------------------------
   Status tersembunyi hanya dipasang kalau JS aktif (html.js),
   supaya konten tetap tampil & terindeks bila JS gagal dimuat. */
.js .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
.js .reveal--left{transform:translateX(-34px)}
.js .reveal--right{transform:translateX(34px)}
.js .reveal--zoom{transform:scale(.94)}
.js .reveal--fade{transform:none}
.js .reveal--blur{filter:blur(6px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),filter var(--dur) var(--ease-out)}
.js .reveal.is-in{opacity:1;transform:none;filter:none}
.js .reveal.is-done{will-change:auto}

/* --- 2. Animasi saat halaman dibuka ------------------------- */
@keyframes mhsRise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes mhsRiseSoft{from{opacity:0;transform:translateY(38px) scale(.975)}to{opacity:1;transform:none}}
@keyframes mhsDrop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes mhsFade{from{opacity:0}to{opacity:1}}
@keyframes mhsPanel{from{opacity:0;transform:translateY(26px) rotate(-1.2deg) scale(.96)}to{opacity:1;transform:none}}

.js .site-header{animation:mhsDrop .5s var(--ease-out) both}

/* Kolom kiri hero: judul, subjudul, tombol — masuk berurutan */
.js .hero__layout>div:first-child>*{animation:mhsRise var(--dur) var(--ease-out) both}
/* Jeda sengaja dibuat pendek: judul H1 biasanya elemen LCP yang
   diukur Google, jadi jangan ditahan lama-lama. */
.js .hero__layout>div:first-child>*:nth-child(1){animation-delay:0s}
.js .hero__layout>div:first-child>*:nth-child(2){animation-delay:.06s}
.js .hero__layout>div:first-child>*:nth-child(3){animation-delay:.14s}
.js .hero__layout>div:first-child>*:nth-child(4){animation-delay:.22s}
.js .hero__layout>div:first-child>*:nth-child(5){animation-delay:.3s}
.js .hero__layout>div:first-child>*:nth-child(n+6){animation-delay:.38s}

/* Kolom kanan hero: mockup kasir meluncur masuk sebagai satu kesatuan */
.js .hero__layout>div:last-child{animation:mhsPanel .85s var(--ease-out) .18s both}
.js .hero__layout>div:first-child+div .float-badge{animation:mhsFade .5s ease .85s both,floaty 4.5s ease-in-out 1.1s infinite}
.js .hero__layout>div:first-child+div .float-badge--b{animation-delay:.95s,2.6s}

.js .marquee{animation:mhsFade .9s ease .55s both}
/* Grid latar hero opacity-nya .5, jadi keyframe-nya sendiri */
@keyframes mhsGrid{from{opacity:0}to{opacity:.5}}
.js .hero__grid{animation:mhsGrid 1.4s ease both}

/* Bar progres baca di bagian atas layar */
.progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;
  background:var(--grad);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .12s linear,opacity .3s ease;opacity:0;
}
.progress.is-on{opacity:1}

/* --- 3. Interaksi kecil (hover / tekan) --------------------- */
.card,.ind,.price,.quote,.step,.post-card,.stat{
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),
             border-color .26s ease,background .26s ease;
}
.price:hover,.quote:hover,.step:hover{transform:translateY(-5px);box-shadow:var(--shadow-l)}
.stat:hover{transform:translateY(-3px)}
.btn{transition:transform .22s var(--ease-out),box-shadow .28s var(--ease-out),background .22s ease,color .22s ease,border-color .22s ease}
.btn:active{transform:translateY(1px) scale(.975)}
.card__ico,.ind__emoji{transition:transform .4s var(--ease-out)}
.card:hover .card__ico,.ind:hover .ind__emoji{transform:scale(1.12) rotate(-6deg)}
.post-card:hover .post-card__thumb img{transform:scale(1.07)}
.site-footer ul a{display:inline-block;transition:color .18s ease,transform .22s var(--ease-out)}
.site-footer ul a:hover{transform:translateX(4px)}
.socials a:hover{transform:translateY(-3px) scale(1.06)}
.form input,.form select,.form textarea{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.form input:focus,.form select:focus,.form textarea:focus{transform:translateY(-1px)}

/* Jawaban FAQ ikut membuka dengan halus */
@keyframes mhsFaq{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq details[open] .faq__a{animation:mhsFaq .34s var(--ease-out) both}
.faq details{transition:background .26s ease,border-color .26s ease,box-shadow .26s ease}

/* --- 4. Hormati setelan "kurangi animasi" di perangkat ------ */
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .js .site-header,.js .marquee,
  .js .hero__layout>div:first-child>*,
  .js .hero__layout>div:last-child,
  .js .hero__layout>div:first-child+div .float-badge,
  .marquee__track,.float-badge{animation:none!important;opacity:1!important;transform:none!important}
  .js .hero__grid,.wa-float::before{animation:none!important}
  .wa-float::before{opacity:0}
  .progress{display:none}
  .nav .sub-menu,.nav .sub-menu li{transition:none}
}

/* Blok WP bawaan */
.wp-block-image{margin-bottom:1.4em}
.wp-block-button__link{background:var(--ink);color:#fff;border-radius:999px;padding:14px 24px;font-weight:800}
.has-text-align-center{text-align:center}

/* ============================================================
   PORTOFOLIO KLIEN
   ============================================================ */

.port-head{max-width:64ch}
.port-head h1{margin-bottom:14px}
.port-head .lead{margin-bottom:0}
/* Hero portofolio dibuat lebih rapat: tidak ada mockup atau statistik
   di bawah judul, jadi ruang kosongnya tidak perlu sebanyak halaman lain. */
.hero--rapat{padding-block:clamp(40px,5vw,64px) clamp(32px,4vw,48px)}
.section--rapat{padding-block:clamp(32px,4vw,52px) var(--sect)}

/* Tombol penyaring jenis usaha */
.port-tabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(26px,3vw,38px)}
.port-tab{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font:inherit;font-size:.9rem;font-weight:700;color:var(--text);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;
  transition:transform .22s var(--ease-out),border-color .2s ease,background .2s ease,color .2s ease;
}
.port-tab:hover{border-color:var(--mint);transform:translateY(-2px)}
.port-tab i{font-style:normal;font-size:.78rem;font-weight:800;color:var(--muted);
  background:var(--sand);border-radius:999px;padding:2px 8px}
.port-tab.is-on{background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:0 10px 26px rgba(33,150,243,.3)}
.port-tab.is-on i{background:rgba(255,255,255,.22);color:#fff}

/* Kartu klien */
.port{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .26s ease;
}
.port:hover{transform:translateY(-5px);box-shadow:var(--shadow-l);border-color:transparent}
.port__foto{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.port__foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.port:hover .port__foto img{transform:scale(1.06)}
.port__foto--kosong{display:grid;place-items:center;background:linear-gradient(140deg,var(--sand),var(--sand-2))}
.port__foto--kosong span{font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;filter:saturate(1.05)}
.port__isi{padding:clamp(18px,2.2vw,24px);display:flex;flex-direction:column;gap:9px;flex:1}
.port__isi h3{margin:0;font-size:1.12rem;line-height:1.3}
.port__meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;font-size:.85rem;color:var(--muted)}
.port__cerita{margin:0;font-size:.93rem;color:var(--muted);line-height:1.6}
.port__hasil{
  margin:0;font-size:.88rem;font-weight:700;color:var(--mint-600);
  background:rgba(33,150,243,.07);border-radius:12px;padding:9px 13px;line-height:1.5;
}
.port__tag{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:4px}
.port__chip{
  font-size:.78rem;font-weight:700;padding:5px 11px;border-radius:999px;text-decoration:none;
  background:rgba(0,188,212,.12);color:var(--violet-600);border:1px solid rgba(0,188,212,.28);
  transition:background .2s ease,border-color .2s ease;
}
a.port__chip:hover{background:rgba(0,188,212,.2);border-color:var(--violet)}
.port__chip--paket{background:var(--sand);color:var(--ink-2);border-color:var(--line)}

/* Klien masih sedikit: kartunya ditengahkan supaya tidak terlihat menggantung. */
.port-grid--1{grid-template-columns:minmax(0,420px);justify-content:center}
.port-grid--2{grid-template-columns:repeat(2,minmax(0,420px));justify-content:center}
@media(max-width:620px){.port-grid--1,.port-grid--2{grid-template-columns:1fr}}

.port-none{text-align:center;color:var(--muted);font-style:italic;padding:40px 0 0}

/* Keadaan kosong */
.port-empty{
  text-align:center;max-width:52ch;margin:0 auto;padding:clamp(32px,5vw,60px) 0;
}
.port-empty>span{font-size:3.2rem;display:block;margin-bottom:14px}
.port-empty h2{margin-bottom:12px}
.port-empty p{color:var(--muted);margin-bottom:22px}
.port-empty__admin{
  font-size:.86rem;color:var(--muted);background:var(--sand);border-radius:12px;
  padding:12px 16px;margin-top:26px;
}

@media(max-width:560px){
  .port__foto{aspect-ratio:16/10}
}

.port[hidden]{display:none!important}

/* Pita peringatan layanan nonaktif — hanya terlihat oleh editor */
.mhs-nonaktif{background:#FFF3CD;color:#5c4813;border-bottom:1px solid #F3E2A9;padding:12px 20px;font-size:.92rem;text-align:center}
.mhs-nonaktif a{text-decoration:underline;font-weight:700}

/* Peta di halaman Kontak */
.map-card{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);aspect-ratio:16/7;background:var(--sand)}
.map-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media(max-width:700px){.map-card{aspect-ratio:4/3}}