/* Tema Ceria Pastel — kartu halaman putih di atas latar biru lembut, Outfit, biru + kartu pastel */
body.tema-ceria{--bg:#FFFFFF;--bg-subtle:#F4F8FC;--bg-card:#FFFFFF;--text:#1D2433;--text-muted:#5B6577;--text-light:#8A93A3;
  --brand:#0A6CCB;--brand-hover:#0858A8;--brand-soft:#E5F0FB;--border:#E4EAF1;--border-strong:#0A6CCB;
  --c-kuning:#FFF0B8;--c-pink:#FCD7D7;--c-biru:#D4E7F8;--c-teal:#22B3A1;--c-emas:#F6C343;--c-ungu:#8E7CD8;
  --radius-sm:12px;--radius-md:18px;--radius-lg:24px;--font-serif:'Outfit',sans-serif;--font-sans:'Outfit',sans-serif;
  --shadow-sm:0 2px 10px rgba(30,60,100,.06);--shadow-md:0 10px 30px rgba(30,60,100,.08);
  font-family:'Outfit',sans-serif;color:var(--text);
  background:radial-gradient(1200px 600px at 10% -10%,#FFFFFF 0,transparent 60%),linear-gradient(160deg,#D9E7F1 0%,#E9F1F6 45%,#D4E2EC 100%) fixed}
html:has(body.tema-ceria){background:#DCE8F1}
.tema-ceria .ik{width:1em;height:1em;flex:none}
.tema-ceria h1,.tema-ceria h2,.tema-ceria h3,.tema-ceria h4{font-family:'Outfit',sans-serif;font-weight:700;letter-spacing:-.02em;color:var(--text)}

/* Bunga dekoratif */
.c-hias{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.c-hias i{position:absolute;width:140px;height:140px;filter:blur(.5px)}
.c-hias svg{width:100%;height:100%;fill:#7FA7CC;opacity:.75}
.c-hias .b1{left:-30px;top:30%;width:120px;height:120px}
.c-hias .b2{right:-40px;bottom:6%;width:200px;height:200px}.c-hias .b2 svg{fill:#5E8DBD}
.c-hias .b3{left:4%;bottom:-40px;width:180px;height:180px}.c-hias .b3 svg{fill:#F2A35B;opacity:.8}
.c-hias .b4{right:6%;top:-30px;width:110px;height:110px}.c-hias .b4 svg{fill:#9BBBDB;opacity:.6}
.c-hias .b5{left:2%;top:58%;width:70px;height:70px}.c-hias .b5 svg{fill:#F4C04A}

/* Kartu halaman */
.c-bingkai{position:relative;z-index:1;width:min(1180px,calc(100% - 48px));margin:36px auto 40px;background:#fff;border-radius:28px;box-shadow:0 30px 80px rgba(25,55,90,.18);overflow:hidden;flex:1;display:flex;flex-direction:column}
.c-head{display:flex;align-items:center;gap:28px;padding:22px 48px}
.c-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;color:var(--text)!important;min-width:0;line-height:1.2}
.c-logo{width:36px;height:36px;border-radius:10px;object-fit:cover}
.c-logo.ph{display:grid;place-items:center;background:linear-gradient(135deg,#0A6CCB,#22B3A1);color:#fff;font-size:1rem}
.c-nav{display:flex;gap:26px;margin-left:auto;font-weight:500;font-size:.92rem}
.c-nav a{color:var(--text-muted)}.c-nav a:hover,.c-nav a.on{color:var(--text);font-weight:600}
.c-pil-garis{white-space:nowrap;border:1.5px solid var(--brand);color:var(--brand)!important;border-radius:99px;padding:8px 20px;font-weight:600;font-size:.88rem}
.c-pil-garis:hover{background:var(--brand-soft)}

/* Hero */
.c-main{padding:0 48px}
.c-hero{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center;padding:34px 0 56px}
.c-pra{color:var(--text-muted);font-size:.9rem;margin-bottom:10px}
.c-hero h1{font-size:clamp(2rem,3.8vw,3rem);line-height:1.12;margin-bottom:16px}
.c-lead{color:var(--text-muted);font-size:.95rem;max-width:460px;margin-bottom:26px}
.c-aksi{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.c-pil{background:var(--brand);color:#fff!important;border-radius:99px;padding:12px 26px;font-weight:600;box-shadow:0 8px 20px rgba(10,108,203,.3)}
.c-pil:hover{background:var(--brand-hover)}
.c-cari{display:flex;align-items:center;gap:8px;border:1.5px solid var(--border);border-radius:99px;padding:4px 6px 4px 14px;background:#fff;min-width:0;flex:1;max-width:260px}
.c-cari span{color:var(--text-light);font-size:16px;display:grid}
.c-cari input{border:0;outline:0;font:inherit;font-size:.88rem;width:100%;background:none;padding:7px 0}
.c-cari button{border:0;background:var(--brand);color:#fff;border-radius:99px;padding:8px 16px;font:600 .85rem 'Outfit';cursor:pointer}
.c-cari:focus-within{border-color:var(--brand)}
.c-meta{display:flex;gap:22px;margin-top:22px;font-size:.85rem;color:var(--text-muted)}
.c-meta span{display:inline-flex;align-items:center;gap:7px}
.c-meta i{width:14px;height:14px;border-radius:50%;background:#F3A14B}.c-meta i.b{background:#F4C04A}
.c-hero-gbr{position:relative;padding-left:90px}
.c-geo{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/4.2;background:#2AB3A3}
.c-geo::before{content:"";position:absolute;inset:0;background:
  linear-gradient(120deg,#22B3A1 0 38%,transparent 38%),linear-gradient(200deg,#F6C343 0 30%,transparent 30%),
  linear-gradient(300deg,#8E7CD8 0 34%,transparent 34%),linear-gradient(20deg,#7CC3E8 0 100%)}
.c-geo img{position:relative;width:76%;height:88%;object-fit:cover;object-position:top;margin:12% 0 0 18%;border-radius:16px 16px 0 0}
.c-thumb{position:absolute;left:0;width:108px;aspect-ratio:1;border-radius:16px;background:#F3F5F8;box-shadow:0 12px 30px rgba(25,55,90,.18);overflow:visible;padding:6px}
.c-thumb img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:12px}
.c-thumb.t1{top:0}.c-thumb.t2{top:58%;width:96px}
.c-thumb i{position:absolute;top:-8px;left:-8px;width:24px;height:24px;border-radius:50%;background:var(--c-teal);color:#fff;display:grid;place-items:center;font-size:13px;z-index:1}
.c-lencana{position:absolute;left:52px;top:36%;width:76px;height:76px;border-radius:50%;background:var(--c-emas);border:5px solid #fff;display:grid;place-items:center;font-size:30px;color:#3A2F06;box-shadow:0 10px 24px rgba(200,150,20,.35)}

/* Kartu pastel */
.c-pastel{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-bottom:56px}
.c-kartu{border-radius:18px;padding:22px;color:var(--text)!important;transition:transform .25s}
.c-kartu:hover{transform:translateY(-3px)}
.c-kartu.k0{background:var(--c-kuning)}.c-kartu.k1{background:var(--c-pink)}.c-kartu.k2{background:var(--c-biru)}
.c-kartu-atas{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.c-kotak-ikon{width:48px;height:48px;border-radius:12px;border:1.5px solid var(--text);display:grid;place-items:center;font-size:24px}
.c-chev{opacity:.35;font-size:24px}
.c-kecil{margin-left:auto;text-align:right;font-size:.72rem;color:var(--text-muted);line-height:1.3}
.c-kecil b{display:block;color:var(--text);font-size:.78rem}
.c-harga{display:block;font-size:1.6rem;font-weight:700;margin-bottom:6px}
.c-kartu p{font-size:.82rem;color:var(--text-muted);margin:0}

/* Grid koleksi */
.c-sek{padding-bottom:52px}
.c-sek-kepala{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.c-sek-kepala h2{font-size:1.45rem;margin:0}
.c-sek-kepala>a{color:var(--text)!important;font-size:20px}
.c-judul-tautan{display:inline-flex;align-items:center;gap:10px;color:var(--text)!important;font-size:20px}
.c-judul-tautan .ik{color:var(--brand)}
.c-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.c-item{background:#fff;border:1px solid var(--border);border-radius:14px;padding:10px;color:var(--text)!important;box-shadow:var(--shadow-sm);transition:box-shadow .25s,transform .25s}
.c-item:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.c-item-foto{position:relative;display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;margin-bottom:10px}
.c-item-foto img{width:100%;height:100%;object-fit:cover;object-position:top}
.c-item-foto i{position:absolute;z-index:1;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px}
.c-item-foto .cek{top:6px;left:6px;background:var(--c-teal);color:#fff}
.c-item-foto .suka{top:6px;right:6px;background:rgba(255,255,255,.9);color:#E05A5A}
.c-item b{display:block;font-size:.84rem;line-height:1.25}
.c-kat{display:block;color:var(--c-emas);font-size:.72rem;font-weight:600;margin:3px 0 6px;filter:brightness(.8)}
.c-item-bawah{display:flex;justify-content:space-between;font-size:.72rem;color:var(--text-light)}
.c-item-bawah span+span{color:var(--brand);font-weight:700}

/* Testimoni & FAQ */
.c-testi{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.c-testi blockquote{margin:0;border-radius:18px;padding:20px}
.c-testi .k0{background:var(--c-biru)}.c-testi .k1{background:var(--c-kuning)}.c-testi .k2{background:var(--c-pink)}
.c-testi p{font-size:.88rem;margin-bottom:10px}
.c-testi cite{font-style:normal;font-weight:600;font-size:.8rem}
.c-faq{display:grid;gap:10px}
.c-faq details{border:1px solid var(--border);border-radius:14px;padding:0 18px}
.c-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;padding:15px 0;font-weight:600;font-size:.92rem}
.c-faq summary::-webkit-details-marker{display:none}
.c-faq details[open] summary .ik{transform:rotate(180deg)}
.c-faq p{color:var(--text-muted);font-size:.88rem;padding-bottom:15px;margin:0}

/* Footer */
.c-foot{margin-top:auto;border-top:1px solid var(--border);padding:34px 48px 0}
.c-foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.4fr;gap:28px}
.c-foot small{color:var(--text-muted);font-weight:600;font-size:.82rem}
.c-foot-nama{display:block;font-size:1.6rem;line-height:1.15;margin:4px 0 8px}
.c-foot p{font-size:.82rem;color:var(--text-muted)}
.c-foot h4{font-size:.92rem;margin-bottom:10px}
.c-foot-grid>div>a{display:block;color:var(--text-muted);font-size:.84rem;margin-bottom:6px}
.c-foot-grid>div>a:hover{color:var(--brand)}
.c-foot .c-cari{max-width:none;margin-bottom:12px}
.c-wa{display:inline-flex!important;align-items:center;gap:6px;color:#1E9E5A!important;font-weight:600}
.c-ikonbar{display:flex;justify-content:space-around;margin-top:28px;padding:16px 0;border-top:1px solid var(--border)}
.c-ikonbar a{color:var(--text-muted);font-size:22px;padding:6px}
.c-ikonbar a:hover{color:var(--brand)}
.c-hak{text-align:center;font-size:.75rem;color:var(--text-light);padding-bottom:16px}

/* ===== Halaman lain ===== */
.tema-ceria .c-bingkai>.section .wrap{max-width:none;padding:0 48px}
.tema-ceria .eyebrow{color:var(--brand);background:var(--brand-soft);padding:4px 12px;border-radius:99px;letter-spacing:.04em}
.tema-ceria .section-head h1,.tema-ceria .section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.tema-ceria .btn{border-radius:99px;font-family:'Outfit';font-weight:600}
.tema-ceria .btn-primary{background:var(--brand);border-color:var(--brand);box-shadow:0 8px 20px rgba(10,108,203,.25)}
.tema-ceria .btn-secondary{border-color:var(--brand);color:var(--brand)}
.tema-ceria .form-card,.tema-ceria .status-card,.tema-ceria .faq-item,.tema-ceria .price-table-wrap,.tema-ceria .gallery-item{border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-sm)}
.tema-ceria .workflow-card:nth-child(3n+1){background:var(--c-kuning)}.tema-ceria .workflow-card:nth-child(3n+2){background:var(--c-pink)}.tema-ceria .workflow-card:nth-child(3n){background:var(--c-biru)}
.tema-ceria .workflow-card{border:0;border-radius:18px}
.tema-ceria .workflow-num{background:#fff;color:var(--text);border:1.5px solid var(--text)}
.tema-ceria .testi-card{border-radius:18px;background:var(--c-biru);border:0}
.tema-ceria .form-group input,.tema-ceria .form-group select,.tema-ceria .form-group textarea{border-radius:12px;border-color:var(--border)}
.tema-ceria .chip{border-radius:99px}.tema-ceria .chip.active{background:var(--brand);border-color:var(--brand);color:#fff}
.tema-ceria .price-table th{background:var(--bg-subtle);color:var(--text)}
.tema-ceria .price-badge{background:var(--brand-soft);color:var(--brand);border-radius:99px}
.tema-ceria .cek-status-box{background:linear-gradient(135deg,var(--c-biru),var(--c-kuning));border:0;border-radius:22px}
.tema-ceria .step-node.is-current .step-circle{background:var(--brand);border-color:var(--brand)}
.tema-ceria .step-node.is-done .step-circle{background:var(--c-teal);border-color:var(--c-teal)}
.tema-ceria .mobile-bottom-btn.active,.tema-ceria .mobile-bottom-btn:hover{color:var(--brand)}

@media (max-width:1000px){
  .c-nav{display:none}.c-pil-garis{margin-left:auto}
  .c-hero{grid-template-columns:1fr}
  .c-grid{grid-template-columns:repeat(3,1fr)}
  .c-foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .c-hias{display:none}
  .c-bingkai{width:100%;margin:0;border-radius:0}
  .c-head,.c-main,.c-foot,.tema-ceria .c-bingkai>.section .wrap{padding-left:16px;padding-right:16px}
  .c-head{padding-top:14px;padding-bottom:14px}
  .c-hero-gbr{padding-left:62px}.c-thumb{width:78px}.c-thumb.t2{width:70px}.c-lencana{left:30px;width:58px;height:58px;font-size:22px}
  .c-pastel,.c-testi{grid-template-columns:1fr}
  .c-grid{grid-template-columns:1fr 1fr}
  .c-cari{max-width:none;flex-basis:100%}
  .c-foot-grid{grid-template-columns:1fr}
  .c-ikonbar{display:none}
}