/* Tema Katalog Modern — Manrope, navy + oranye, hero abu muda dengan bentuk 3D, grid berlabel */
body.tema-katalog{--bg:#FFFFFF;--bg-subtle:#F3F5F8;--bg-card:#FFFFFF;--text:#16202E;--text-muted:#5A6576;--text-light:#8C95A3;
  --brand:#0B4B7F;--brand-hover:#083A63;--brand-soft:#E6EEF6;--border:#E3E7ED;--border-strong:#0B4B7F;
  --k-navy:#0B4B7F;--k-gelap:#0E1E33;--k-oranye:#F5A524;--k-merah:#EF5A3C;--k-teal:#1F9E9E;--k-hijau:#16A06A;
  --radius-sm:6px;--radius-md:10px;--radius-lg:14px;--font-serif:'Manrope',sans-serif;--font-sans:'Manrope',sans-serif;
  --shadow-sm:0 2px 8px rgba(14,30,51,.06);--shadow-md:0 10px 28px rgba(14,30,51,.08);
  font-family:'Manrope',sans-serif;color:var(--text);background:#fff}
.tema-katalog .ik{width:1em;height:1em;flex:none}
.tema-katalog h1,.tema-katalog h2,.tema-katalog h3,.tema-katalog h4{font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.k-wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 28px}
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--k-navy);color:#fff!important;border:1.5px solid var(--k-navy);border-radius:6px;padding:9px 18px;font:700 .85rem 'Manrope';cursor:pointer}
.k-btn:hover{background:var(--brand-hover)}
.k-btn.sm{padding:6px 14px;font-size:.78rem}
.k-btn.garis{background:#fff;color:var(--text)!important;border-color:var(--border)}
.k-btn.garis:hover{border-color:var(--k-navy)}

/* Header */
.k-head{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--border)}
.k-head .k-wrap{display:flex;align-items:center;gap:28px;height:68px}
.k-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;color:var(--text)!important}
.k-logo{width:32px;height:32px;border-radius:8px;object-fit:cover}
.k-logo.ph{display:grid;place-items:center;background:var(--k-navy);color:#fff;font-size:.95rem}
.k-nav{display:flex;gap:22px;margin-left:auto;font-weight:600;font-size:.86rem}
.k-nav a{color:var(--text-muted)}.k-nav a:hover,.k-nav a.on{color:var(--text)}
.k-cari{display:flex;align-items:center;border:1px solid var(--border);border-radius:6px;padding-left:10px;background:#fff}
.k-cari>span{color:var(--text-light);display:grid}
.k-cari input{border:0;outline:0;font:inherit;font-size:.82rem;width:130px;padding:8px}
.k-cari button{display:inline-flex;align-items:center;gap:6px;border:0;background:var(--k-navy);color:#fff;font:700 .8rem 'Manrope';padding:9px 14px;border-radius:0 5px 5px 0;cursor:pointer}

/* Hero */
.k-hero{position:relative;background:linear-gradient(180deg,#F1F3F6,#F7F8FA);padding:56px 0 40px;overflow:hidden}
.k-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.k-hero h1{font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin-bottom:10px}
.k-sub{font-weight:700;font-size:.95rem;margin-bottom:6px}
.k-lead{color:var(--text-muted);font-size:.88rem;max-width:420px;margin-bottom:22px}
.k-form{max-width:380px;display:grid;gap:8px}
.k-form-label{display:flex;gap:24px;font-size:.78rem;font-weight:700;color:var(--text-muted)}
.k-form-label span{display:inline-flex;align-items:center;gap:6px}
.k-form input{border:1px solid var(--border);border-radius:6px;padding:11px 12px;font:inherit;font-size:.85rem;background:#fff;width:100%}
.k-form input:focus{outline:2px solid var(--k-navy);outline-offset:-1px}
.k-form-baris{display:grid;grid-template-columns:1fr auto;gap:8px}
.k-tautan{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--k-navy)!important;margin-top:6px}
.k-slide{position:relative;aspect-ratio:1/1.05;max-width:440px;justify-self:center;width:100%}
.k-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:200px 200px 24px 24px;opacity:0;transition:opacity .8s;box-shadow:0 30px 60px rgba(14,30,51,.18)}
.k-slide img.on{opacity:1}
.k-titik{position:relative;z-index:2;display:flex;justify-content:center;gap:8px;margin-top:26px}
.k-titik button{width:7px;height:7px;border-radius:50%;border:0;background:#C9CFD8;cursor:pointer;padding:0}
.k-titik button.on{background:var(--k-gelap);width:9px;height:9px}
/* bentuk 3D */
.k3d{position:absolute;z-index:1;border-radius:50%}
.k3d.bola1{width:46px;height:46px;left:5%;bottom:16%;background:radial-gradient(circle at 32% 30%,#FFD38A,#F5A524 55%,#C77A0B)}
.k3d.bola2{width:30px;height:30px;right:12%;bottom:18%;background:radial-gradient(circle at 32% 30%,#FFD38A,#F5A524 55%,#C77A0B);z-index:3}
.k3d.biru{width:26px;height:26px;left:52%;top:20%;background:radial-gradient(circle at 32% 30%,#7DB8FF,#1F6FE0 60%,#0B3F8F)}
.k3d.pink{width:90px;height:90px;right:-30px;top:44%;background:radial-gradient(circle at 30% 30%,#FFE1D6,#F2B8A6 60%,#D88F79)}
.k3d.busur{width:260px;height:260px;left:30%;bottom:-170px;border:34px solid transparent;border-top-color:#1F6FE0;border-left-color:#4C96F5;transform:rotate(30deg);filter:drop-shadow(0 10px 16px rgba(31,111,224,.3))}
.k3d.hijau{width:200px;height:200px;right:4%;top:-120px;border:26px solid transparent;border-bottom-color:#16A06A;border-right-color:#2CC08A;transform:rotate(-20deg)}

/* Bar kategori */
.k-kat{position:relative;z-index:3;margin-top:-14px;display:grid;grid-template-columns:repeat(6,1fr);background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);padding:18px 0}
.k-kat a{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.78rem;font-weight:700;color:var(--text)!important;text-align:center;padding:4px 8px}
.k-kat a+a{border-left:1px solid var(--border)}
.k-kat .ik{font-size:28px;color:var(--text)}
.k-kat a:hover .ik{color:var(--k-oranye)}

/* Koleksi unggulan */
.k-sek{padding-top:56px;padding-bottom:56px}
.k-sek-kepala{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.k-sek-kepala h2{font-size:1.5rem;margin:0}
.k-pill{display:inline-flex;align-items:center;gap:6px;background:#F1F3F6;border-radius:99px;padding:4px 12px;font-size:.75rem;font-weight:600;color:var(--text-muted)}
.k-kanan{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--text)!important}
.k-filter{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.tema-katalog .k-filter .gallery-filter{margin:0;justify-content:flex-start;gap:10px}
.tema-katalog .k-filter .chip{border:0;background:none;padding:4px 2px;font-weight:700;font-size:.8rem;color:var(--text-muted);display:inline-flex;align-items:center;gap:6px}
.tema-katalog .k-filter .chip i{width:18px;height:18px;border-radius:50%;background:var(--k-oranye);box-shadow:inset 0 0 0 4px #FFE2B0}
.tema-katalog .k-filter .chip.active{color:var(--text);background:none}
.k-tombol{display:flex;gap:8px}
.tema-katalog .k-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 18px}
.tema-katalog .k-item{display:block;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fff;color:var(--text)!important;box-shadow:none;transition:box-shadow .25s}
.tema-katalog .k-item:hover{box-shadow:var(--shadow-md)}
.k-item-foto{position:relative;display:block;aspect-ratio:1/1.05;background:#EEF1F4}
.k-item-foto img{width:100%;height:100%;object-fit:cover;object-position:top}
.k-item-foto i{position:absolute;font-style:normal;font-size:.62rem;font-weight:800;border-radius:4px;padding:3px 7px;color:#fff}
.k-item-foto .t1{top:10px;left:10px}.k-item-foto .t2{top:10px;right:10px;background:rgba(14,30,51,.55)}
.k-item-foto .or{background:var(--k-oranye)}.k-item-foto .me{background:var(--k-merah)}.k-item-foto .te{background:var(--k-teal)}
.k-item>b{display:block;font-size:.86rem;padding:12px 12px 2px}
.k-item>small{display:block;color:var(--text-light);font-size:.72rem;padding:0 12px;min-height:2.2em}
.k-item-bawah{display:flex;justify-content:space-between;align-items:center;padding:8px 12px 12px}
.k-item-bawah b{font-size:.95rem}
.k-item-bawah span{display:flex;gap:6px}
.k-item-bawah i{width:24px;height:24px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;font-size:12px;color:var(--k-teal)}

/* Testimoni */
.k-testi{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.k-testi blockquote{margin:0;border:1px solid var(--border);border-left:4px solid var(--k-oranye);border-radius:8px;padding:18px}
.k-testi p{font-size:.86rem;color:var(--text-muted);margin-bottom:12px}
.k-testi cite{font-style:normal;font-weight:800;font-size:.84rem}
.k-testi cite small{display:block;font-weight:600;color:var(--text-light)}

/* Footer */
.k-foot{margin-top:auto;background:#F3F5F8;padding-top:44px}
.k-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;padding-bottom:28px}
.k-foot-nama{display:block;font-size:1.4rem;font-weight:800;margin-bottom:6px}
.k-foot p{font-size:.82rem;color:var(--text-muted);margin-bottom:14px}
.k-foot h4{font-size:.88rem;margin-bottom:10px}
.k-foot-grid>div>a:not(.k-btn){display:block;font-size:.82rem;color:var(--text-muted);margin-bottom:7px}
.k-foot-grid>div>a:not(.k-btn):hover{color:var(--k-navy)}
.k-ornamen{height:46px;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='46'%3E%3Cg fill='none' stroke='%237E9BB8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 46V20M12 46V8M18 46V24M24 46V12M30 46V28M36 46V6M42 46V18'/%3E%3Cpath d='M12 20l-5-6M24 22l5-6M36 18l-5-5M18 32l5-5' /%3E%3C/g%3E%3C/svg%3E") repeat-x bottom/48px 46px;opacity:.75}
.k-bar{background:var(--k-gelap);color:#B8C4D3;font-size:.78rem}
.k-bar .k-wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
.k-bar nav{display:flex;gap:20px}
.k-bar a{color:#DCE4EE}.k-bar a:hover{color:#fff}

/* ===== Halaman lain ===== */
.tema-katalog .section-head{text-align:left;margin-left:0}
.tema-katalog .eyebrow{color:var(--k-oranye);letter-spacing:.08em}
.tema-katalog .section-head h1,.tema-katalog .section-head h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.tema-katalog .btn{border-radius:6px;font-family:'Manrope';font-weight:700}
.tema-katalog .btn-primary{background:var(--k-navy);border-color:var(--k-navy)}
.tema-katalog .btn-secondary{border-color:var(--border);color:var(--text)}
.tema-katalog .form-card,.tema-katalog .status-card,.tema-katalog .workflow-card,.tema-katalog .testi-card,.tema-katalog .faq-item,.tema-katalog .price-table-wrap,.tema-katalog .gallery-item{border:1px solid var(--border);border-radius:8px;box-shadow:none}
.tema-katalog .form-group input,.tema-katalog .form-group select,.tema-katalog .form-group textarea{border-radius:6px}
.tema-katalog .workflow-num{background:var(--k-oranye);color:#fff;border:0}
.tema-katalog .chip{border-radius:6px}.tema-katalog .chip.active{background:var(--k-navy);border-color:var(--k-navy);color:#fff}
.tema-katalog .gallery-photo-wrap{border-radius:8px 8px 0 0}
.tema-katalog .price-table th{background:var(--k-navy);color:#fff}
.tema-katalog .price-badge{background:#FFF1D6;color:#A2620A;border-radius:4px}
.tema-katalog .cek-status-box{background:#F1F3F6;border:1px solid var(--border);border-radius:12px}
.tema-katalog .step-node.is-current .step-circle{background:var(--k-oranye);border-color:var(--k-oranye)}
.tema-katalog .step-node.is-done .step-circle{background:var(--k-navy);border-color:var(--k-navy)}
.tema-katalog .mobile-bottom-bar{background:var(--k-gelap)}
.tema-katalog .mobile-bottom-btn{color:#B8C4D3}.tema-katalog .mobile-bottom-btn.active,.tema-katalog .mobile-bottom-btn:hover{color:var(--k-oranye)}

@media (max-width:1000px){
  .k-nav{display:none}.k-cari{margin-left:auto}
  .k-hero-grid{grid-template-columns:1fr}.k-slide{max-width:340px}
  .k-kat{grid-template-columns:repeat(3,1fr);row-gap:16px}.k-kat a:nth-child(4){border-left:0}
  .tema-katalog .k-grid{grid-template-columns:repeat(3,1fr)}
  .k-testi{grid-template-columns:1fr}
  .k-foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .k-wrap{padding:0 16px}
  .k-cari input{width:80px}.k-cari button{padding:9px 10px;font-size:0}.k-cari button .ik{font-size:16px}
  .k-brand span{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .k-hero{padding-top:28px}.k3d.busur,.k3d.hijau{display:none}
  .k-kat{grid-template-columns:repeat(2,1fr)}.k-kat a:nth-child(odd){border-left:0}.k-kat a:nth-child(4){border-left:1px solid var(--border)}
  .k-sek-kepala{flex-wrap:wrap}
  .tema-katalog .k-grid{grid-template-columns:1fr 1fr;gap:14px}
  .k-foot-grid{grid-template-columns:1fr}
  .k-bar .k-wrap{justify-content:center;text-align:center}
}