/* ==========================================================================
   Selaras dengan pujianto.id & member.pujianto.id (gaya trend2designs.com):
   krem hangat, teks stone, gradien oranye, hanya Google Sans.
   Dimuat SETELAH pujianto.css (lihat Views/tema/layout.php); hanya menimpa warna, font, ukuran, dan sudut.
   Token sama dengan pujiantoid/assets/style.css — ubah bersamaan.
   ========================================================================== */
:root{
  --ink:#1C1917; --ink-2:#292524; --ink-3:#44403C;
  --brand:#E05A19; --brand-2:#F2703A; --brand-strong:#C2490F; --brand-hot:#E8541B; --amber:#E05A19; --peach:#F7D9C4; --ember:#CF4F12;
  --page:#FDFBF9; --bg:#FAF4EE; --card:#FFFFFF; --line:#ECE4DC; --line-2:#E7DED5; --line-soft:#F0E7DD; --tint:#FDEEE4; --tint-line:#F7D9C4;
  --text:#1C1917; --muted:#57534E; --soft:#78716C; --faint:#A8A29E;
  --dark:#221A14; --dark-2:#2A211A; --dark-line:#3A2F26; --dark-text:#B3A79D; --dark-soft:#8B8076; --ok:#16A34A;
  --grad:linear-gradient(180deg,#C9501A,#AE410D); --grad-hover:linear-gradient(180deg,#B8470F,#9A3A0C);   /* teks putih ≥ 4,5:1 */
  --shadow-brand:0 6px 16px rgba(224,90,25,.3);
  --shadow:0 1px 2px rgba(28,25,23,.04),0 10px 30px -14px rgba(224,90,25,.14);
  --r-lg:18px; --r-md:14px; --r-sm:10px; --max:1160px;
}
html,body{background:var(--page)}
body{color:var(--text);font-size:16px;line-height:1.65}
h1,h2,h3{font-weight:700;letter-spacing:-.015em;line-height:1.18}
h2{font-size:clamp(29.9px,3.6vw,40.3px)}
h3{font-size:19.5px}
.lead{color:var(--muted);font-size:17.6px;line-height:1.62}

/* Aksen judul: bukan serif miring lagi, cukup oranye (seperti <mark> di pujianto.id) */
.serif,.cycle .center strong,.post .thumb{font-family:"Google Sans",system-ui,sans-serif;font-style:normal;font-weight:700;letter-spacing:-.03em}
.serif{color:var(--brand)!important}

.eyebrow{display:block;gap:0;margin-bottom:14px;color:var(--brand-strong);font-size:14.3px;font-weight:800;letter-spacing:.13em}
.eyebrow::before{display:none}

/* Tombol: pil membulat kalem — arang untuk aksi utama (panah .arr di lingkaran oranye), putih bergaris untuk aksi kedua */
.btn{min-height:52px;padding:0 24px;border-radius:999px;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1;justify-content:center;border:1px solid transparent;transition:background-color .25s,border-color .25s,color .25s,box-shadow .25s}
.btn-primary,.btn-amber,.btn-dark{background:var(--ink,#1C1917);background-image:none;border-color:var(--ink,#1C1917);color:#fff;box-shadow:0 8px 20px -14px rgba(28,25,23,.6)}
.btn-primary:hover,.btn-amber:hover,.btn-dark:hover{background:#2E2A27;background-image:none;border-color:#2E2A27;color:#fff;transform:none;box-shadow:0 12px 26px -14px rgba(28,25,23,.7)}
.btn:has(> .arr){padding-right:6px;gap:12px}
.btn > .arr{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--brand,#E05A19);color:#fff;font-size:17px;line-height:1;transition:transform .25s,background-color .25s}
.btn:hover > .arr{transform:translateX(3px) rotate(-45deg)}
.btn-ghost > .arr,.btn-outline > .arr,.btn-line > .arr,.btn-outline-ink > .arr{background:var(--brand-soft,#FBEDE4);color:var(--brand-strong,#C2490F)}
.btn:focus-visible{outline:3px solid rgba(224,90,25,.35);outline-offset:3px}
.btn-ghost,.btn-outline,.btn-line,.btn-outline-ink{background:#fff;border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover,.btn-outline:hover,.btn-line:hover,.btn-outline-ink:hover{background:var(--ink,#1C1917);border-color:var(--ink,#1C1917);color:#fff}
.btn-sm{min-height:42px;padding:0 16px;border-radius:999px;font-size:15.5px}
.btn-sm > .arr{width:32px;height:32px;font-size:14px}
.btn .wa-ico{width:20px;height:20px}

/* Header: bar putih seperti pujianto.id */
.nav{position:sticky;top:0}
.nav-in{max-width:none;padding:0}
.nav-bar{max-width:none;border-radius:0;padding:0 max(20px,calc((100vw - var(--max)) / 2 + 20px));min-height:70px;background:rgba(255,255,255,.94);border:0;border-bottom:1px solid #F0E9E2;box-shadow:none;backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.nav.scrolled .nav-bar{background:rgba(255,255,255,.94);border-color:#F0E9E2;box-shadow:none}
.logo{color:var(--ink)}
.logo img{height:32px;width:auto}
.nav .logo-on-dark{display:none!important}.nav .logo-on-light{display:block!important}
.nav-links a,.nav.scrolled .nav-links a{position:relative;padding:9px 12px;border-radius:0;font-size:17.6px;font-weight:500;color:var(--muted);background:none;text-transform:none}
.nav-links a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav-links a:hover,.nav.scrolled .nav-links a:hover,.nav-links .current-menu-item>a{color:var(--ink);background:none}
.nav-links a:hover::after{transform:scaleX(1)}
/* ikon menu header */
.nav-links a{display:inline-flex;align-items:center;gap:7px}
.nav-links .nav-ikon{flex:none;width:18px;height:18px;color:var(--brand);opacity:.85;transition:opacity .2s,transform .2s}
.nav-links a:hover .nav-ikon{opacity:1;transform:translateY(-1px)}
.nav-links a:has(.nav-ikon)::after{left:37px}
.mobile-menu a:not(.mm-cta){display:flex;align-items:center;gap:12px}
.mobile-menu .nav-ikon{flex:none;width:20px;height:20px;color:var(--brand)}
.nav .btn{min-height:44px;padding:0 18px;font-size:16.9px}
.burger,.nav.scrolled .burger{border-radius:10px;border-color:var(--line-2);color:var(--ink);background:#fff}
.mobile-menu{border-radius:12px;border:1px solid var(--line);margin:8px 16px 0;box-shadow:0 24px 48px -20px rgba(42,33,26,.35)}
.mobile-menu a{border-radius:8px}
.mobile-menu .mm-cta{color:#fff}
.mobile-menu .mm-cta.btn-outline{color:var(--ink)}

/* Hero & kepala halaman: krem terang dengan grid halus */
.hero,.page-head{background:var(--page);color:var(--text);border-radius:0;border-bottom:1px solid var(--line-soft)}
.hero{padding:72px 0 0}
.page-head{padding:64px 0 48px}
.hero::before,.page-head::before{background:linear-gradient(var(--line-soft) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--line-soft) 1px,transparent 1px) 0 0/48px 48px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000 25%,transparent 78%);opacity:.8}
.hero::after,.page-head::after{display:none}
.glow.g1{background:rgba(242,112,58,.16)}
.glow.g2{background:rgba(247,217,196,.45)}
.hero h1{font-size:clamp(41.6px,5.6vw,61.1px);letter-spacing:-.02em;line-height:1.08;color:var(--ink)}
.page-head h1{color:var(--ink);font-size:clamp(34px,4.6vw,52px)}
.hero .sub,.page-head .lead{color:var(--muted)}
.pill{background:var(--tint);border-color:var(--tint-line);color:#A93F0D}
.pill b{background:var(--grad);color:#fff}
.hero-meta,.hero-meta span,.hero-note{color:var(--soft)}
.hero-meta svg{color:var(--ok)}
.dash{background:#fff;border-color:var(--line);box-shadow:0 -10px 40px -20px rgba(224,90,25,.25)}
.dash-top .url{background:var(--bg);color:var(--muted)}
.dash-body{background:var(--bg)}
.types span{background:#fff;border-color:var(--line);color:var(--muted)}
.float-card{background:#fff;border-color:var(--line);color:var(--ink);box-shadow:0 10px 30px rgba(224,90,25,.1)}
.float-card small{color:var(--soft)}
.trust{background:var(--page)}

/* Kartu & bagian */
.work .shot{border-radius:var(--r-lg)}
.w1 .shot{background:linear-gradient(135deg,#FBEFE4,#F2D4BC)}
.w2 .shot{background:linear-gradient(135deg,#F6EEE6,#E7D5C4)}
.w3 .shot{background:linear-gradient(135deg,#FDEEE4,#F7C9A9)}
.w4 .shot{background:linear-gradient(135deg,#EFE7DF,#D8C6B6)}
.work .visit{background:var(--ink);border-radius:9px}
.work:hover .visit{background:var(--brand)}
.svc,.pillar,.faq-item,.box,.tpl-langkah li{border-color:var(--line);border-radius:var(--r-md)}
.svc li::before{background-color:var(--tint)}
.faq-item summary::after{color:var(--brand)}
.post .thumb.t1{background:linear-gradient(135deg,#F2703A,#E05A19)}
.post .thumb.t2{background:linear-gradient(135deg,#44403C,#1C1917)}
.post .thumb.t3{background:linear-gradient(135deg,#F7D9C4,#E8632C)}

/* Bagian gelap (Website Custom, kotak samping, footer): cokelat hangat seperti footer pujianto.id */
.solution-box,.svc-aside,.box.dark,.contact-wa,.why,.svc.dark{background:var(--dark-2);color:#fff}
.solution-box p,.svc-aside p,.svc-aside li{color:var(--dark-text)}
.solution-box::before,.solution-box::after{opacity:.35}
.svc-aside li::before{background-color:rgba(242,112,58,.18)}
.cta-box{background:linear-gradient(135deg,#C2490F,#A33C0B);border-radius:var(--r-lg)}
/* Kotak ajakan: oranye lebih tua supaya teks putih terbaca; aksen judul & label jadi krem (oranye di atas oranye tidak terbaca) */
.cta-box::before{background:radial-gradient(circle at 15% 0%,rgba(255,255,255,.16),transparent 45%),radial-gradient(circle at 95% 100%,rgba(109,74,240,.92),transparent 55%)}
.cta-box .eyebrow{color:#fff}
.cta-box .serif{color:#FFD9BF!important}
.cta-box p{color:rgba(255,255,255,.95)}
.cta-box .cta-note{color:rgba(255,255,255,.92)!important}
.cta-box .btn-dark{background:var(--ink);box-shadow:0 6px 16px rgba(28,25,23,.28)}
.cta-box .btn-dark:hover{background:var(--ink-3)}
.cta-box::after{opacity:.3}
.site-footer{background:var(--dark-2);color:var(--dark-text);border-top:1px solid var(--dark-line);border-radius:0;padding:56px 0 24px}
.site-footer h5{font-size:13.7px;letter-spacing:.13em;font-weight:800}
.site-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--brand)}

/* Formulir */
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(224,90,25,.15)}

/* Katalog template */
.tpl-fakta li{background:var(--tint);color:var(--brand-strong)}
.tpl-langkah li::before{background:var(--grad)}

@media(max-width:860px){
  .nav-bar{padding:0 16px;min-height:62px}
  .hero{padding-top:48px}
  .btn{font-size:16.9px;padding:0 18px}
}

/* --- Sisa warna gelap/biru dari tema lama --- */
.hero p.sub,.page-head .lead{color:var(--muted)}
.hero-note{color:var(--soft)}
.hero-meta{color:var(--soft)}
.hero::before,.page-head::before{background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:48px 48px;background-position:0 0}
.dot{background:var(--line-2)}
.url{color:var(--muted);background:var(--bg)}
.shot{background:var(--bg);border-color:var(--line)}
.shot-tag{background:rgba(28,25,23,.78)}
.types span{background:#fff;border-color:var(--line);color:var(--muted)}
.sk.h,.progress-line{background:var(--grad)}
.solution-box::before{opacity:.12}
.solution-box::after,.svc-aside::after,.box.dark::after,.svc.dark::after{background:radial-gradient(circle,rgba(242,112,58,.28),transparent 70%)}
.solution-box p,.svc-aside p,.box.dark p,.contact-wa small,.svc-meta small{color:var(--dark-text)}
.svc-meta div{background:rgba(255,255,255,.05);border-color:var(--dark-line)}
.svc-aside .svc-note{background:rgba(242,112,58,.12);border-left-color:var(--brand)}
.f-bottom,.f-contactrow{border-top-color:var(--dark-line)}
.f-contactrow span,.f-contactrow a{color:var(--dark-text)}
.bigword{opacity:.5}
.domain-input:focus-within{box-shadow:0 0 0 4px rgba(224,90,25,.15)}
.pager a:hover{background:var(--ink);border-color:var(--ink)}
.pager .on{background:var(--brand);border-color:var(--brand)}
.btn-primary:hover{transform:none}
.footer-wave{color:var(--dark-2)}
/* Kontras (WCAG AA): label di bagian gelap & teks abu-abu kecil di kartu */
.solution-box .eyebrow,.svc-aside .eyebrow,.box.dark .eyebrow,.why .eyebrow,.svc.dark .eyebrow,.site-footer .eyebrow{color:var(--brand-2)}
.frame .fnav span,.tpl-card .cat,.work .info small{color:var(--soft)}
.page-head .eyebrow{color:var(--brand-strong)}
/* Info layanan isi konten (beranda, di bawah langkah template) */
.isi-konten{margin-top:36px;padding:28px;border:1px solid var(--tint-line);border-radius:var(--r-lg);background:var(--tint);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:20px 32px;align-items:start}
.isi-konten h3{font-size:clamp(21px,2.4vw,26px);margin:0 0 8px}
.isi-konten .ik-kepala p{margin:0;color:var(--muted)}
.isi-konten .eyebrow{margin-bottom:8px}
.ik-pilihan{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ik-pilihan li{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;color:var(--muted);font-size:15.5px;line-height:1.55}
.ik-pilihan b{display:block;color:var(--ink);font-size:16.5px;margin-bottom:2px}
.isi-konten .btn{grid-column:2;justify-self:start}
@media (max-width:760px){.isi-konten{grid-template-columns:1fr;padding:22px 18px}.isi-konten .btn{grid-column:1;width:100%}}

/* Menu HP: tombol aksi rapi (teks di tengah, tinggi sama, tanpa bayangan besar) */
.mobile-menu .mm-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:0 16px;margin-top:8px;border-radius:10px;font-size:16px;font-weight:700;line-height:1.2;box-shadow:none}
.mobile-menu a:not(.mm-cta)+.mm-cta{margin-top:14px}
.mobile-menu .mm-cta.btn-primary{background:var(--brand-strong);background-image:none;border:1px solid var(--brand-strong);color:#fff}
.mobile-menu a.mm-cta.btn-primary:hover{background:#A33C0B;border-color:#A33C0B;color:#fff}
.mobile-menu .mm-cta.btn-outline{background:#fff;border:1px solid var(--line-2);color:var(--ink)}
.mobile-menu a.mm-cta.btn-outline:hover{background:var(--bg);color:var(--ink)}

/* Footer situs utama: tanpa kolom merek & tautan; baris kontak jadi isi pertama */
.site-footer .wrap>.f-contactrow:first-child{margin-top:0;padding-top:8px;border-top:0}
/* Tombol "Pilih Template" di header: pil arang kalem dengan panah di lingkaran oranye */
.btn.btn-pilih{gap:10px;min-height:40px;height:40px;padding:4px 4px 4px 16px;border-radius:999px;background:var(--ink,#1C1917);border:1px solid var(--ink,#1C1917);color:#fff;font-weight:700;font-size:14px;letter-spacing:-.01em;box-shadow:0 6px 16px -12px rgba(28,25,23,.6);background-image:none;transition:background-color .25s,border-color .25s,box-shadow .25s}
.btn.btn-pilih .arr{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--brand,#E05A19);color:#fff;font-size:14px;transition:transform .25s,background-color .25s}
.btn.btn-pilih:hover{background:#2E2A27;border-color:#2E2A27;color:#fff;transform:none;box-shadow:0 12px 26px -14px rgba(28,25,23,.7)}
.btn.btn-pilih:hover .arr{transform:translateX(3px) rotate(-45deg)}
.btn.btn-pilih:focus-visible{outline:3px solid rgba(224,90,25,.35);outline-offset:3px}
/* Di bagian berlatar gelap, tombol utama dibalik: pil putih teks arang, panah tetap di lingkaran oranye */
:is(.solution-box,.svc-aside,.box.dark,.contact-wa,.why,.svc.dark,.site-footer,.cta-dark) :is(.btn-primary,.btn-amber,.btn-dark){background:#fff;border-color:#fff;color:var(--ink,#1C1917);box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
:is(.solution-box,.svc-aside,.box.dark,.contact-wa,.why,.svc.dark,.site-footer,.cta-dark) :is(.btn-primary,.btn-amber,.btn-dark):hover{background:#F5EFE8;border-color:#F5EFE8;color:var(--ink,#1C1917)}
:is(.solution-box,.svc-aside,.box.dark,.contact-wa,.why,.svc.dark,.site-footer,.cta-dark) :is(.btn-ghost,.btn-outline,.btn-line){background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
:is(.solution-box,.svc-aside,.box.dark,.contact-wa,.why,.svc.dark,.site-footer,.cta-dark) :is(.btn-ghost,.btn-outline,.btn-line):hover{background:#fff;border-color:#fff;color:var(--ink,#1C1917)}