/* Landing page toko. Tiga template diatur lewat variabel di body.tpl-*. */
:root { --kb-primary: #e85d2a; }
.kb-landing {
	--bg: #fff;
	--bg-alt: #f6f7f9;
	--surface: #fff;
	--text: #14171f;
	--muted: #5f6673;
	--line: #e6e8ec;
	--radius: 20px;
	--font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-head: var(--font-body);
	--head-weight: 800;
	--on-primary: #fff;
}
.tpl-hangat {
	--bg: #fbf6ef;
	--bg-alt: #f4eadc;
	--surface: #fffdf9;
	--text: #2b2118;
	--muted: #7a6a5a;
	--line: #eadfce;
	--font-head: "Fraunces", Georgia, serif;
	--head-weight: 700;
}
.tpl-elegan {
	--bg: #14110e;
	--bg-alt: #1c1814;
	--surface: #221d18;
	--text: #f3ece2;
	--muted: #b3a798;
	--line: #3a322a;
	--font-head: "Playfair Display", Georgia, serif;
	--head-weight: 700;
	--radius: 6px;
}
.tpl-segar {
	--bg: #ffffff;
	--bg-alt: #f3f6f8;
	--radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.kb-landing { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
.kb-landing img { max-width: 100%; display: block; }
.kb-landing a { color: inherit; }
.kb-landing h1, .kb-landing h2, .kb-landing h3 { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.kl-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.kl-muted { color: var(--muted); }

/* Tombol */
.kl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--kb-primary); color: var(--on-primary) !important; text-decoration: none; font-weight: 700;
	padding: 14px 26px; border-radius: 999px; border: 2px solid var(--kb-primary);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--kb-primary) 28%, transparent);
	transition: transform .15s, box-shadow .15s;
}
.kl-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px color-mix(in srgb, var(--kb-primary) 34%, transparent); }
.kl-btn-ghost { background: transparent; color: var(--text) !important; border-color: var(--line); box-shadow: none; }
.kl-btn-ghost:hover { border-color: var(--text); box-shadow: none; }
.kl-btn-sm { padding: 9px 18px; font-size: 14px; box-shadow: none; }
.tpl-elegan .kl-btn { border-radius: 2px; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }

/* Navigasi */
.kl-nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.kl-nav-in { display: flex; align-items: center; gap: 24px; height: 68px; }
.kl-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 17px; }
.kl-logo { width: 38px; height: 38px; border-radius: 12px; background: var(--kb-primary); color: var(--on-primary); display: grid; place-items: center; overflow: hidden; font-weight: 800; flex: none; }
.kl-logo img { width: 100%; height: 100%; object-fit: cover; }
.kl-links { display: flex; gap: 22px; margin-left: auto; }
.kl-links a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 15px; }
.kl-links a:hover { color: var(--text); }

/* Hero */
.kl-hero { padding: 56px 0 72px; background: var(--bg); }
.kl-hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.kl-eyebrow { display: inline-block; margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kb-primary); }
.kl-hero h1 { font-size: clamp(38px, 5.4vw, 64px); }
.kl-lead { font-size: 19px; color: var(--muted); margin: 18px 0 30px; max-width: 34ch; }
.kl-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.kl-hours { margin: 22px 0 0; color: var(--muted); font-size: 14px; }
.kl-hero-media img, .kl-hero-placeholder { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: calc(var(--radius) * 1.6); }
.kl-hero-placeholder { display: grid; place-items: center; background: linear-gradient(135deg, var(--kb-primary), color-mix(in srgb, var(--kb-primary) 50%, #000)); }
.kl-hero-placeholder span { font-family: var(--font-head); font-size: 140px; color: rgba(255,255,255,.9); font-weight: 700; }
.tpl-hangat .kl-hero-media img, .tpl-hangat .kl-hero-placeholder { border-radius: 200px 200px 28px 28px; }
.tpl-elegan .kl-hero { padding: 72px 0 88px; }
.tpl-elegan .kl-hero-media img, .tpl-elegan .kl-hero-placeholder { border-radius: 2px; outline: 1px solid var(--line); outline-offset: 14px; }
.tpl-segar .kl-hero { background: radial-gradient(900px 500px at 85% 0%, color-mix(in srgb, var(--kb-primary) 14%, transparent), transparent 65%), var(--bg); }

/* Bagian umum */
.kl-section { padding: 80px 0; }
.kl-section h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 28px; }
.kl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.kl-more { color: var(--kb-primary) !important; text-decoration: none; font-weight: 700; white-space: nowrap; }

/* Keunggulan */
.kl-features { padding: 0 0 72px; }
.kl-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kl-feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.kl-feature-num { display: inline-block; font-weight: 800; color: var(--kb-primary); font-size: 14px; margin-bottom: 10px; }
.kl-feature h3 { font-size: 21px; margin-bottom: 6px; }
.kl-feature p { margin: 0; color: var(--muted); }
.tpl-segar .kl-feature { background: var(--bg-alt); border-color: transparent; }

/* Produk */
.kl-products { background: var(--bg-alt); }
.kl-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kl-product { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.kl-product:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.kl-product-img { aspect-ratio: 4 / 3; background: var(--bg-alt); display: grid; place-items: center; overflow: hidden; }
.kl-product-img img { width: 100%; height: 100%; object-fit: cover; }
.kl-product-img span { font-family: var(--font-head); font-size: 56px; color: var(--muted); }
.kl-product-body { padding: 16px 18px 18px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
.kl-product-body strong { grid-column: 1 / -1; font-size: 17px; }
.kl-price { color: var(--muted); font-weight: 600; }
.kl-product-cta { font-weight: 700; color: var(--kb-primary); font-size: 14px; }

/* Tentang */
.kl-about-in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.kl-about-in.no-image { grid-template-columns: 1fr; max-width: 760px; text-align: center; }
.kl-about-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--radius) * 1.4); }
.kl-about p { color: var(--muted); font-size: 17px; margin: 0 0 14px; }

/* Galeri */
.kl-gallery { padding-top: 0; }
.kl-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kl-gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--radius) * .7); }
.kl-gallery-grid img:first-child { grid-column: span 2; grid-row: span 2; }

/* Testimoni */
.kl-testi { background: var(--bg-alt); }
.kl-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kl-quote { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.kl-quote blockquote { margin: 0 0 14px; font-size: 17px; }
.kl-quote blockquote::before { content: "“"; display: block; font-family: var(--font-head); font-size: 54px; line-height: .8; color: var(--kb-primary); }
.kl-quote figcaption { font-weight: 700; color: var(--muted); font-size: 14px; }

/* Ajakan */
.kl-cta-in {
	text-align: center; background: var(--kb-primary); color: var(--on-primary); border-radius: calc(var(--radius) * 1.4);
	padding: 64px 24px; max-width: 1120px;
}
.kl-cta-in h2 { margin-bottom: 10px; }
.kl-cta-in p { margin: 0 auto 28px; max-width: 46ch; opacity: .9; font-size: 18px; }
.kl-cta-in .kl-btn { background: var(--on-primary); color: var(--kb-primary) !important; border-color: var(--on-primary); box-shadow: none; }
.tpl-elegan .kl-cta-in { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.tpl-elegan .kl-cta-in .kl-btn { background: var(--kb-primary); color: var(--on-primary) !important; border-color: var(--kb-primary); }

/* Footer */
.kl-footer { border-top: 1px solid var(--line); padding: 56px 0 24px; background: var(--bg); }
.kl-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.kl-footer h3 { font-family: var(--font-body); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 12px; }
.kl-footer p { margin: 0 0 8px; }
.kl-footer a { text-decoration: none; }
.kl-footer a:hover { color: var(--kb-primary); }
.kl-footer .kl-copy { color: var(--muted); font-size: 13px; margin: 40px auto 0; }
.kl-mobile-cta { display: none; }

/* HP */
@media (max-width: 860px) {
	.kl-links { display: none; }
	.kl-nav-in { height: 60px; justify-content: space-between; }
	.kl-nav .kl-btn-sm { display: none; }
	.kl-hero { padding: 24px 0 48px; }
	.kl-hero-in { grid-template-columns: 1fr; gap: 28px; }
	.kl-hero-media { order: -1; }
	.kl-lead { font-size: 17px; }
	.kl-section { padding: 56px 0; }
	.kl-features-grid, .kl-product-grid, .kl-testi-grid, .kl-footer-grid, .kl-about-in { grid-template-columns: 1fr; gap: 14px; }
	.kl-product-grid { grid-template-columns: 1fr 1fr; }
	.kl-product-body { padding: 12px; grid-template-columns: 1fr; }
	.kl-product-body strong { font-size: 15px; }
	.kl-product-cta { display: none; }
	.kl-about-in { gap: 24px; }
	.kl-gallery-grid { grid-template-columns: repeat(2, 1fr); }
	.kl-cta-in { border-radius: var(--radius); padding: 44px 20px; }
	.kl-footer { padding-bottom: 96px; }
	.kl-mobile-cta {
		display: block; position: fixed; z-index: 30; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
		text-align: center; background: var(--kb-primary); color: var(--on-primary) !important; text-decoration: none;
		font-weight: 800; padding: 16px; border-radius: 999px; box-shadow: 0 12px 30px rgba(0,0,0,.25);
	}
	.tpl-elegan .kl-mobile-cta { border-radius: 4px; }
}

/* ---------- Motion & sentuhan premium ---------- */
.kl-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; background: var(--kb-primary); transform: scaleX(0); transform-origin: 0 50%; }
.kl-nav { transition: background .25s, box-shadow .25s, transform .35s cubic-bezier(.2,.8,.2,1); }
.kl-nav.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0,0,0,.35); }
.kl-nav.is-hidden { transform: translateY(-100%); }

.kl-hero { position: relative; isolation: isolate; overflow: hidden; }
.kl-blobs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.kl-blobs span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; animation: kl-drift 16s ease-in-out infinite alternate; }
.kl-blobs span:first-child { width: 460px; height: 460px; right: -120px; top: -80px; background: color-mix(in srgb, var(--kb-primary) 45%, transparent); }
.kl-blobs span:last-child { width: 360px; height: 360px; left: -140px; bottom: -120px; background: color-mix(in srgb, var(--kb-primary) 25%, #fbbf24); animation-delay: -8s; }
.tpl-elegan .kl-blobs span { opacity: .22; }
@keyframes kl-drift { 50% { transform: translate(-30px, 24px) scale(1.08); } 100% { transform: translate(24px, -18px) scale(.94); } }

.js .kl-in { opacity: 0; transform: translateY(20px); animation: kl-up .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--d, 0) * 110ms + 60ms); }
@keyframes kl-up { to { opacity: 1; transform: none; } }
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

.kl-hero-media { transition: transform .4s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.kl-hero-media img, .kl-hero-placeholder { box-shadow: 0 40px 80px -40px rgba(0,0,0,.45); }
.js .kl-hero-media.kl-in img { animation: kl-zoom 1.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes kl-zoom { from { clip-path: inset(8% 8% 8% 8% round 24px); transform: scale(1.06); } to { clip-path: inset(0 0 0 0 round 0); transform: none; } }

.kl-btn { position: relative; overflow: hidden; }
.kl-btn::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transition: transform .7s ease; }
.kl-btn:hover::after { transform: translateX(120%); }

.kl-open { display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 0; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--surface); border: 1px solid var(--line); }
.kl-open span { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: kl-ping 2s infinite; }
.kl-open.is-closed span { background: #ef4444; animation: none; }
@keyframes kl-ping { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } }

.kl-feature { position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; }
.kl-feature::before { content: ""; position: absolute; inset: 0; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--kb-primary) 14%, transparent), transparent 50%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.kl-feature:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -28px rgba(0,0,0,.35); }
.kl-feature:hover::before { opacity: 1; }
.kl-product { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.kl-product:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -26px rgba(0,0,0,.35); }
.kl-product-img img { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.kl-product:hover .kl-product-img img { transform: scale(1.07); }
.kl-product-cta { transition: transform .2s; }
.kl-product:hover .kl-product-cta { transform: translateX(3px); }
.kl-gallery-grid img { cursor: zoom-in; transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .3s, opacity .8s, translate .8s; }
.kl-gallery-grid img:hover { transform: scale(1.03); filter: saturate(1.15); }
.kl-quote { transition: transform .3s; }
.kl-quote:hover { transform: translateY(-4px); }
.kl-cta-in { position: relative; overflow: hidden; isolation: isolate; }
.kl-cta-in::before { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -160px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 65%); animation: kl-drift 12s ease-in-out infinite alternate; }

.kl-lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.86); display: grid; place-items: center; padding: 24px; animation: kl-fade .25s ease; cursor: zoom-out; }
.kl-lightbox img { max-width: min(1000px, 100%); max-height: 86vh; border-radius: 12px; animation: kl-pop .35s cubic-bezier(.2,1.2,.4,1); }
.kl-lightbox button { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 26px; cursor: pointer; }
.kl-lightbox[hidden] { display: none; }
@keyframes kl-fade { from { opacity: 0; } }
@keyframes kl-pop { from { transform: scale(.92); opacity: 0; } }

/* Tombol pasang aplikasi */
.kl-install-wrap { position: fixed; left: 16px; bottom: 16px; z-index: 35; max-width: 380px; }
.kb-install { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 40px -18px rgba(0,0,0,.4); animation: kl-up .5s ease both; font-size: 14px; }
.kb-install[hidden] { display: none; }
.kb-install-text { flex: 1; display: flex; flex-direction: column; }
.kb-install-text span { color: var(--muted); font-size: 13px; }
.kb-install-btn { border: 0; background: var(--kb-primary); color: var(--on-primary); border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.kb-install-close { border: 0; background: none; color: var(--muted); font-size: 22px; cursor: pointer; }
@media (max-width: 860px) { .kl-install-wrap { left: 12px; right: 12px; bottom: 86px; max-width: none; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.js .kl-in, .js [data-reveal] { opacity: 1; transform: none; }
}

/* Desain landing bebas: gaya hero dan tombol (fitur landing_design). */
.kl-hero-center .kl-hero-in { grid-template-columns: 1fr; text-align: center; max-width: 860px; }
.kl-hero-center .kl-actions, .kl-hero-center .kl-open, .kl-hero-center .kl-hours { justify-content: center; }
.kl-hero-center .kl-lead { margin-left: auto; margin-right: auto; }
.kl-hero-center .kl-hero-media { order: 2; }
.kl-hero-center .kl-hero-media img, .kl-hero-center .kl-hero-placeholder { aspect-ratio: 16 / 8; border-radius: calc(var(--radius) * 1.4) !important; }
.kl-hero-cover .kl-hero { min-height: min(86vh, 760px); display: grid; align-items: center; }
.kl-hero-cover .kl-hero-in { grid-template-columns: 1fr; position: relative; z-index: 2; }
.kl-hero-cover .kl-hero-text { max-width: 620px; color: #fff; }
.kl-hero-cover .kl-hero-text .kl-lead, .kl-hero-cover .kl-hero-text .kl-eyebrow, .kl-hero-cover .kl-hero-text .kl-hours, .kl-hero-cover .kl-hero-text .kl-open { color: rgba(255,255,255,.88); }
.kl-hero-cover .kl-hero-text .kl-btn-ghost { color: #fff !important; border-color: rgba(255,255,255,.6); }
.kl-hero-cover .kl-hero-media { position: absolute; inset: 0; z-index: 1; transform: none !important; }
.kl-hero-cover .kl-hero-media img, .kl-hero-cover .kl-hero-placeholder { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0 !important; outline: 0; box-shadow: none; }
.kl-hero-cover .kl-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.25)); }
.kl-hero-cover .kl-blobs { display: none; }
@media (max-width: 860px) {
	.kl-hero-cover .kl-hero-media { order: 0; }
	.kl-hero-cover .kl-hero-media::after { background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,.3)); }
}
.kl-btn-rounded .kl-btn { border-radius: 12px; }
.kl-btn-square .kl-btn { border-radius: 2px; }
.kl-btn-outline .kl-btn:not(.kl-cta-in .kl-btn) { background: transparent; color: var(--kb-primary) !important; box-shadow: none; }
.kl-btn-outline .kl-btn:not(.kl-cta-in .kl-btn):hover { background: var(--kb-primary); color: var(--on-primary) !important; }