/* Katalog /template & /wp-theme — disalin dari web.pujianto.id (app/Views/tema/_gaya_template.php) supaya tampilannya sama. */
.tpl-langkah{display:grid;gap:14px;margin:28px 0 0;padding:0;list-style:none;counter-reset:l}
@media(min-width:800px){.tpl-langkah{grid-template-columns:repeat(4,1fr)}}
.tpl-langkah li{counter-increment:l;padding:18px;border:1px solid var(--line,#ECE4DC);border-radius:14px;background:#fff}
.tpl-langkah li::before{content:counter(l);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#1C1917;color:#fff;font-weight:800;margin-bottom:10px}
.tpl-langkah b{display:block;margin-bottom:4px}
.tk{display:grid;grid-template-columns:minmax(0,1fr);max-width:1320px;margin:0 auto;padding:0 20px 72px}
@media(min-width:1000px){.tk{grid-template-columns:250px minmax(0,1fr);gap:40px;padding:0 32px 88px}}
.tk-side{display:none}
@media(min-width:1000px){.tk-side{display:block}}
.tk-side-isi{position:sticky;top:96px;padding:28px 0}
.tk-side-judul{margin:0 0 8px;padding:0 12px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--soft,#78716C)}
.tk-menu{display:grid;gap:2px;margin:0 0 26px}
.tk-menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:10px;color:var(--muted,#57534E);font-size:14.5px;font-weight:600;text-decoration:none;transition:background .15s,color .15s}
.tk-menu a:hover{background:var(--bg,#FAF4EE);color:var(--ink,#1C1917)}
.tk-menu a.on{background:var(--ink,#1C1917);color:#fff}
.tk-menu b{flex:none;min-width:26px;padding:2px 8px;border-radius:999px;background:var(--bg,#FAF4EE);color:var(--soft,#78716C);font-size:12px;text-align:center}
.tk-menu a.on b{background:rgba(255,255,255,.16);color:#fff}
.tk-menu .tk-lencana{background:var(--tint,#FDEEE4);color:#B5410F;font-size:11px;letter-spacing:.02em}
.tk-menu .tk-lencana.hijau{background:#DCFCE7;color:#166534}
.tk-utama{min-width:0;padding-top:36px}
.tk-kepala{margin:0 0 22px}
.tk-alis{display:inline-block;margin-bottom:8px;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-hot,#E8541B)}
.tk-kepala h1{margin:0 0 10px;font-size:clamp(28px,3.6vw,42px);line-height:1.12;letter-spacing:-.03em}
.tk-kepala h1 .serif{color:var(--brand-strong,#C2490F)}
.tk-kepala p{margin:0;max-width:640px;color:var(--muted,#57534E);font-size:16.5px}
.tk-geser{display:flex;gap:8px;margin:0 -20px 18px;padding:2px 20px 6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tk-geser::-webkit-scrollbar{display:none}
.tk-geser a{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 8px 8px 14px;border:1px solid var(--line,#ECE4DC);border-radius:999px;background:#fff;color:var(--muted,#57534E);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.tk-geser a b{min-width:22px;padding:1px 7px;border-radius:999px;background:var(--bg,#FAF4EE);font-size:12px;text-align:center;color:var(--soft,#78716C)}
.tk-geser a.on{background:var(--ink,#1C1917);border-color:var(--ink,#1C1917);color:#fff}
.tk-geser a.on b{background:rgba(255,255,255,.16);color:#fff}
@media(min-width:1000px){.tk-geser{display:none}}
.tk-info{margin:0 0 16px;font-size:14px;color:var(--soft,#78716C)}
.tk-info b{color:var(--ink,#1C1917)}
.tk-kisi{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.tk-kisi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.tk-kisi{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tk-kartu{display:flex;flex-direction:column;padding:12px;border:1px solid var(--line,#ECE4DC);border-radius:16px;background:#fff;transition:box-shadow .2s,transform .2s,border-color .2s}
.tk-kartu:hover{transform:translateY(-3px);border-color:var(--tint-line,#F7D9C4);box-shadow:0 14px 34px -18px rgba(42,33,26,.35)}
.tk-gbr{position:relative;display:block;overflow:hidden;border-radius:10px;background:var(--bg,#FAF4EE)}
.tk-gbr img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .4s}
.tk-kartu:hover .tk-gbr img{transform:scale(1.03)}
.tk-pita{position:absolute;top:14px;left:-34px;width:120px;padding:4px 0;transform:rotate(-45deg);background:#E05A19;color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-align:center;text-transform:uppercase;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.tk-isi{display:flex;flex-direction:column;flex:1;padding:16px 6px 4px}
.tk-isi h2{margin:0 0 6px;font-size:18px;line-height:1.3;letter-spacing:-.01em}
.tk-isi h2 a{color:var(--ink,#1C1917);text-decoration:none}
.tk-isi h2 a:hover{color:var(--brand-strong,#C2490F)}
.tk-meta{display:flex;align-items:center;gap:7px;margin:0 0 4px;font-size:13.5px;color:var(--soft,#78716C)}
.tk-titik{width:8px;height:8px;border-radius:50%;background:#14B8A6}
.tk-harga{margin:0 0 16px;font-size:14px;color:var(--muted,#57534E)}
.tk-harga b{color:var(--ink,#1C1917);font-size:15.5px}
.tk-aksi{display:flex;justify-content:space-between;gap:10px;margin-top:auto}
.tk-aksi .tk-btn.tk-satu{flex:1;justify-content:center;background:#1C1917;border-color:#1C1917;color:#fff}
.tk-aksi .tk-btn.tk-satu:hover{background:#000;border-color:#000;color:#fff}
.tk-demo{display:inline-flex;align-items:center;justify-content:center;gap:4px;align-self:center;margin-top:10px;padding:2px 6px;font-size:13.5px;font-weight:600;color:#78716C;text-decoration:none;border-radius:6px}
.tk-demo:hover{color:#1C1917;text-decoration:underline;text-underline-offset:3px}
.tk-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 18px;border-radius:9px;font-size:14.5px;font-weight:700;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.tk-btn.garis{border:1px solid var(--line-2,#E7DED5);color:var(--ink,#1C1917);background:#fff}
.tk-btn.garis:hover{border-color:var(--ink,#1C1917)}
.tk-btn.isi{background:#0F766E;border:1px solid #0F766E;color:#fff}
.tk-btn.isi:hover{background:#115E59;border-color:#115E59;color:#fff}
.tk-wp{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;padding:4px 0;font-size:13.5px;color:var(--muted,#57534E);text-decoration:none;border-radius:6px}
.tk-wp b{color:var(--ink,#1C1917);font-weight:700}
.tk-wp:hover{color:#0F766E}.tk-wp:hover b{color:#0F766E}
.tk .pager{margin-top:32px}
.tk .tpl-langkah{margin-top:44px;scroll-margin-top:100px}
@media(max-width:640px){.tk-utama{padding-top:24px}.tk-kartu{padding:10px}.tk-btn{flex:1}}
.ct{max-width:640px;margin:22px 0 0}
.ct-form{position:relative;display:flex;align-items:center;gap:4px;height:58px;padding:0 6px 0 50px;border:1px solid rgba(28,25,23,.09);border-radius:999px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);box-shadow:0 1px 2px rgba(28,25,23,.04),0 12px 32px -18px rgba(28,25,23,.28);transition:border-color .2s,box-shadow .2s}
.ct-form:hover{border-color:rgba(28,25,23,.16)}
.ct-form:focus-within{border-color:rgba(194,73,15,.45);box-shadow:0 0 0 5px rgba(232,84,27,.10),0 12px 32px -18px rgba(28,25,23,.28)}
.ct-ikon{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:#A8A29E;transition:color .2s}
.ct-form:focus-within .ct-ikon{color:var(--brand-strong,#C2490F)}
.ct-form input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink,#1C1917);outline:0}
.ct-form input::placeholder{color:#A8A29E}
.ct-form input::-webkit-search-cancel-button{cursor:pointer}
.ct-semua-link{flex:none;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 16px;margin-right:2px;border-left:1px solid rgba(28,25,23,.1);color:var(--muted,#78716C);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;transition:color .15s}
.ct-semua-link:hover{color:var(--brand-strong,#C2490F)}
.ct-form button{flex:none;height:46px;padding:0 24px;border:0;border-radius:999px;background:var(--ink,#1C1917);color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background-color .15s,transform .15s}
.ct-form button:hover{background:var(--brand-strong,#C2490F)}
.ct-form button:active{transform:scale(.97)}
.ct-saran{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;background:#fff;border:1px solid rgba(28,25,23,.08);border-radius:20px;box-shadow:0 24px 50px -24px rgba(28,25,23,.4);max-height:360px;overflow:auto;text-align:left}
.ct-saran li a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 14px;border-radius:14px;color:var(--ink,#1C1917);text-decoration:none}
.ct-saran li a small{flex:none;color:var(--muted,#78716C);font-size:13px}
.ct-saran li.on a,.ct-saran li a:hover{background:var(--bg,#FAF4EE)}
.ct-saran li.ct-semua a{color:var(--brand-strong,#C2490F);font-weight:700;font-size:14.5px}
.ct{position:relative}
.ct-pop{position:absolute;z-index:29;left:0;right:0;top:calc(58px + 8px);display:none;padding:14px 16px 16px;background:#fff;border:1px solid rgba(28,25,23,.08);border-radius:20px;box-shadow:0 24px 50px -24px rgba(28,25,23,.4);text-align:left}
.ct.buka:not(.ketik) .ct-pop{display:block;animation:ct-muncul .18s ease}
@keyframes ct-muncul{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ct-pop>span{display:block;margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#A8A29E}
.ct-pop>div{display:flex;flex-wrap:wrap;gap:6px}
.ct-pop a{padding:6px 12px;border-radius:999px;background:rgba(28,25,23,.045);color:var(--muted,#57534E);font-size:13.5px;text-decoration:none;transition:background-color .15s,color .15s}
.ct-pop a:hover,.ct-pop a:focus-visible{background:rgba(232,84,27,.1);color:var(--brand-strong,#C2490F)}
.sec-head .ct{margin-left:0}
.ct-hero .ct{margin:26px auto 0;max-width:620px}
.ct-hero .ct{margin-top:8px}
.hero-cta-bawah{margin-top:22px}
@media(max-width:560px){.ct-pop{top:calc(54px + 8px)}.ct-form{height:54px;padding-left:42px}.ct-ikon{left:16px}.ct-form button{height:42px;padding:0 18px}.ct-semua-link{padding:0 10px}.ct-semua-link span{display:none}}
.tk-hasil-kosong{padding:26px;border:1px dashed var(--line-2,#E7DED5);border-radius:14px;background:#fff}
.tk-hasil-kosong p{margin:0 0 10px}