/* Sayang Istri — tema pink. Satu berkas CSS untuk landing, aplikasi reseller (PWA), dan panel admin. */
:root {
    --pink-50: #fff2fa;
    --pink-100: #ffe3f3;
    --pink-200: #ffc6e5;
    --pink-300: #ff9fd2;
    --pink-400: #f567b6;
    --pink-500: #e931a2;
    --pink-600: #d01b8b;
    --pink-700: #a8136f;
    --yellow: #ffd23f;
    --ink: #2d1b28;
    --muted: #8b7585;
    --line: #f6dfee;
    --bg: #fff5fb;
    --card: #ffffff;
    --green: #17a56b;
    --green-bg: #dcf7ea;
    --amber: #b9740a;
    --amber-bg: #fff0cc;
    --blue: #2b6fd6;
    --blue-bg: #e1edff;
    --violet: #7a45d1;
    --violet-bg: #eee5ff;
    --red: #d6304a;
    --red-bg: #ffe1e6;
    --radius: 18px;
    --shadow: 0 10px 30px -12px rgba(208, 27, 139, .28);
    --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.5; font-size: 15px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.icon { flex: none; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.strong { font-weight: 700; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.icon-btn.only-mobile, .only-mobile { display: none; }
.stack { display: grid; gap: 14px; }
.stack-sm { display: grid; gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

/* ---------- Tombol ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; padding: 11px 18px; font-weight: 700; font-size: 14px; background: var(--pink-500); color: #fff; box-shadow: 0 8px 18px -8px rgba(233, 49, 162, .7); transition: transform .12s, background .15s, opacity .15s; text-align: center; line-height: 1.2; }
.btn:hover { background: var(--pink-600); }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-outline { background: #fff; color: var(--pink-600); border: 1.5px solid var(--pink-400); box-shadow: none; }
.btn-outline:hover { background: var(--pink-50); }
.btn-soft { background: var(--pink-100); color: var(--pink-600); box-shadow: none; }
.btn-soft:hover { background: var(--pink-200); }
.btn-wa { background: #25d366; box-shadow: 0 8px 18px -8px rgba(37, 211, 102, .8); }
.btn-wa:hover { background: #1fb957; }
.btn-wa-outline { background: #fff; color: #128c4a; border: 1.5px solid #25d366; box-shadow: none; }
.btn-wa-outline:hover { background: #effcf4; }
.btn-danger { background: #fff; color: var(--red); border: 1.5px solid #f3b3bd; box-shadow: none; }
.btn-danger:hover { background: var(--red-bg); }
.btn-ghost { background: transparent; color: var(--muted); box-shadow: none; padding: 8px 12px; }
.btn-ghost:hover { background: var(--pink-50); color: var(--pink-600); }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 11px; }
.btn-block { width: 100%; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: inherit; }
.icon-btn.danger { width: 32px; height: 32px; color: var(--red, #e03131); background: #fff1f2; }
.text-link { color: var(--pink-600); font-weight: 700; font-size: 13px; }
.text-link:hover { text-decoration: underline; }

/* ---------- Form ---------- */
.field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: #5d4655; }
.field small { font-weight: 500; color: var(--muted); }
.input, .select, .textarea { width: 100%; border: 1.5px solid var(--line); background: #fff; border-radius: 13px; padding: 11px 14px; font-size: 14.5px; font-weight: 500; transition: border-color .15s, box-shadow .15s; }
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--pink-400); box-shadow: 0 0 0 4px rgba(245, 103, 182, .15); }
.textarea { min-height: 96px; resize: vertical; }
.form-grid { align-items: start; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.check input { width: 18px; height: 18px; accent-color: var(--pink-500); }
.search { position: relative; }
.search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--pink-400); }
.search .input { padding-left: 42px; border-radius: 999px; }

/* ---------- Kartu, badge, umum ---------- */
.card { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); border: 1px solid rgba(246, 223, 238, .7); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-head h2, .card-head h3 { font-size: 15.5px; font-weight: 800; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge-pink { background: var(--pink-100); color: var(--pink-600); }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-amber { background: var(--amber-bg); color: var(--amber); }
.badge-blue { background: var(--blue-bg); color: var(--blue); }
.badge-violet { background: var(--violet-bg); color: var(--violet); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-gray { background: #f1ebef; color: #7b6a76; }
.badge-count { position: absolute; top: 1px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ff4d6d; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }
.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #ffd7ee, #ffb0dc); color: var(--pink-700); font-weight: 800; border: 2px solid #fff; flex: none; }
.avatar-lg { width: 56px; height: 56px; font-size: 22px; }
.flash { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.flash p + p { margin-top: 2px; }
.flash-ok { background: var(--green-bg); color: #0f7a4d; }
.flash-err { background: var(--red-bg); color: #a7192f; }
.progress { height: 10px; border-radius: 999px; background: var(--pink-100); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffc93c, #ffa51f); }
.empty { text-align: center; padding: 34px 18px; color: var(--muted); display: grid; gap: 8px; justify-items: center; }
.empty .icon { color: var(--pink-300); }
.empty h3 { color: var(--ink); font-size: 16px; }
.pager { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.pager a, .pager span { min-width: 36px; height: 36px; display: grid; place-items: center; padding: 0 10px; border-radius: 11px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: 13px; }
.pager .on { background: var(--pink-500); border-color: var(--pink-500); color: #fff; }
.pager .off { opacity: .4; }
.pager-info { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill { flex: none; padding: 8px 15px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: 13px; color: #6c5666; white-space: nowrap; }
.pill.on { background: var(--pink-500); border-color: var(--pink-500); color: #fff; box-shadow: 0 8px 16px -8px rgba(233, 49, 162, .8); }
.pill em { font-style: normal; opacity: .75; margin-left: 4px; }
.kv { display: grid; gap: 8px; font-size: 14px; }
.kv > div { display: flex; justify-content: space-between; gap: 12px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 700; text-align: right; }
.divider { height: 1px; background: var(--line); margin: 12px 0; }
.code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 700; }

/* ---------- Grafik batang ---------- */
.chart { position: relative; padding-top: 30px; }
.chart-plot { position: relative; }
.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 150px; padding: 0 4px 0 40px; border-radius: 8px;
    background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), #f8e6f1 calc(25% - 1px), #f8e6f1 25%); }
.bar { display: flex; align-items: flex-end; justify-content: center; height: 100%; position: relative; }
.bar i { display: block; width: min(100%, 34px); min-height: 4px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #ff8fcb, #f567b6); }
.bar.top i { background: linear-gradient(180deg, #ee3aa6, #d01b8b); }
.bar .tip { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); background: var(--pink-500); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 8px; white-space: nowrap; z-index: 2; }
.bar-axis { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; padding: 8px 4px 0 40px; font-size: 11px; color: var(--muted); text-align: center; line-height: 1.3; }
.axis-y { position: absolute; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column-reverse; justify-content: space-between; font-size: 10.5px; color: var(--muted); transform: translateY(-1px); }

/* ---------- Landing ---------- */
.plain { min-height: 100vh; }
.landing { background: #fff; color: var(--ink); overflow-x: clip; scroll-behavior: smooth; }
html { scroll-behavior: smooth; }
.l-wrap { width: min(1160px, 100% - 40px); margin: 0 auto; }
.l-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: 999px; font-weight: 800; font-size: 15px; border: 0; transition: transform .15s, box-shadow .15s, background .15s; }
.l-btn:hover { transform: translateY(-2px); }
.l-btn-primary { background: #fff; color: var(--pink-600); box-shadow: 0 14px 30px -12px rgba(80, 0, 50, .55); }
.l-btn-wa { background: #25d366; color: #fff; box-shadow: 0 14px 30px -12px rgba(18, 140, 74, .7); }
.l-btn-wa:hover { background: #1fb957; }
.l-btn-ghost { background: rgba(255, 255, 255, .14); color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); }
.l-btn-ghost:hover { background: rgba(255, 255, 255, .24); }
.l-btn-dark { background: var(--pink-500); color: #fff; box-shadow: 0 14px 30px -12px rgba(233, 49, 162, .7); }
.l-btn-dark:hover { background: var(--pink-600); }

/* Navigasi */
.l-header { position: sticky; top: 0; z-index: 60; transition: background .2s, box-shadow .2s; }
.l-header.scrolled { background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); box-shadow: 0 8px 30px -18px rgba(168, 19, 111, .45); }
.l-nav { display: flex; align-items: center; gap: 28px; height: 74px; }
.l-brand img { width: 56px; height: 56px; border-radius: 16px; box-shadow: 0 8px 20px -10px rgba(168, 19, 111, .7); }
.l-links { display: flex; gap: 26px; margin-left: 12px; font-weight: 700; font-size: 14.5px; color: rgba(255, 255, 255, .92); }
.l-header.scrolled .l-links { color: #5d4655; }
.l-links a:hover { opacity: .75; }
.l-nav-cta { margin-left: auto; display: flex; gap: 10px; }
.l-nav-cta .l-btn { padding: 10px 20px; font-size: 14px; }
.l-header.scrolled .l-btn-ghost { color: var(--pink-600); border-color: var(--pink-300); background: transparent; }

/* Hero */
.l-hero-bg { position: relative; margin-top: -74px; padding: 74px 0 0; color: #fff; background: radial-gradient(1100px 520px at 85% 0%, #ff7fc6 0, transparent 60%), radial-gradient(700px 500px at 0% 100%, #b0107a 0, transparent 60%), linear-gradient(160deg, #ee3aa6 0%, #d01b8b 55%, #a8136f 100%); border-radius: 0 0 56px 56px; overflow: hidden; }
.l-hero-bg::before, .l-hero-bg::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; }
.l-hero-bg::before { width: 520px; height: 520px; right: -140px; top: -160px; }
.l-hero-bg::after { width: 360px; height: 360px; left: -120px; bottom: -140px; }
.l-hero { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 64px 0 96px; }
.l-eyebrow { display: inline-flex; gap: 8px; align-items: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: 12.5px; letter-spacing: .06em; }
.l-hero h1 { font-size: clamp(36px, 5.4vw, 62px); line-height: 1.06; font-weight: 800; letter-spacing: -.025em; margin: 22px 0 18px; }
.l-hero h1 em { font-style: normal; background: linear-gradient(90deg, #ffe58a, #ffd23f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.l-lead { font-size: 18px; line-height: 1.6; opacity: .94; max-width: 540px; }
.l-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.l-checks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; font-weight: 700; font-size: 14px; }
.l-checks span { display: inline-flex; align-items: center; gap: 7px; }
.l-checks .icon { color: #ffe58a; }

/* Mockup ponsel */
.l-visual { position: relative; display: grid; place-items: center; min-height: 470px; }
.l-phone { width: 270px; aspect-ratio: 9 / 18.4; background: #1f0f1a; border-radius: 40px; padding: 10px; box-shadow: 0 50px 80px -30px rgba(40, 0, 25, .75), inset 0 0 0 2px #3a2231; transform: rotate(4deg); position: relative; z-index: 2; }
.l-screen { color: var(--ink); height: 100%; border-radius: 31px; background: var(--bg); overflow: hidden; position: relative; display: flex; flex-direction: column; }
.l-screen-top { background: linear-gradient(135deg, #ef3ba8, #d01b8b); color: #fff; padding: 16px 14px 44px; font-weight: 800; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
.l-screen-top .dot { width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.l-screen-body { margin-top: -30px; padding: 0 12px; display: grid; gap: 9px; }
.l-card { background: #fff; border-radius: 15px; padding: 10px 12px; box-shadow: 0 10px 20px -14px rgba(168, 19, 111, .5); font-size: 11.5px; }
.l-card small { color: var(--muted); display: block; }
.l-card b { font-size: 17px; font-weight: 800; }
.l-card-grad { background: linear-gradient(145deg, #ee3aa6, #c4157f); color: #fff; }
.l-card-grad small { color: rgba(255, 255, 255, .85); }
.l-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.l-bar { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .3); overflow: hidden; margin-top: 7px; }
.l-bar i { display: block; height: 100%; width: 74%; background: linear-gradient(90deg, #ffc93c, #ffa51f); border-radius: inherit; }
.l-row { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.l-row .no { width: 20px; height: 20px; border-radius: 50%; background: var(--pink-100); color: var(--pink-600); display: grid; place-items: center; font-size: 10.5px; font-weight: 800; }
.l-row span:last-child { margin-left: auto; color: var(--pink-600); }
.l-float { position: absolute; z-index: 3; background: #fff; color: var(--ink); border-radius: 18px; padding: 12px 16px; box-shadow: 0 24px 40px -20px rgba(40, 0, 25, .6); font-weight: 800; font-size: 13.5px; display: flex; align-items: center; gap: 10px; animation: l-bob 5s ease-in-out infinite; }
.l-float .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--pink-100); color: var(--pink-500); }
.l-float small { display: block; color: var(--muted); font-weight: 600; font-size: 11.5px; }
.l-float.a { left: -4%; top: 14%; }
.l-float.b { right: -2%; bottom: 20%; animation-delay: -2.2s; }
.l-float.c { left: 2%; bottom: 6%; animation-delay: -3.6s; }
@keyframes l-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Mockup memakai komponen asli aplikasi reseller, diskalakan */
.l-screen { background: var(--bg); }
.mock-app { flex: none; color: var(--ink); width: 375px; height: 790px; transform: scale(.664); transform-origin: top left; position: relative; pointer-events: none; font-size: 15px; background: var(--bg); overflow: hidden; }
.mock-app .app-header { position: relative; }
.mock-app .tabbar { position: absolute; left: 0; bottom: 0; transform: none; width: 100%; border-radius: 22px 22px 0 0; }
.mock-app .app-content { padding-bottom: 90px; }
.mock-app .app-content > .quick span { background: #fff; border-radius: 18px; padding: 12px 4px; display: grid; justify-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; text-align: center; box-shadow: var(--shadow); line-height: 1.2; }
.mock-app .tabbar > span { display: grid; justify-items: center; gap: 2px; font-size: 11.5px; font-weight: 700; color: #a58d9d; padding: 4px 0; }
.mock-app .tabbar > span.active { color: var(--pink-500); }
.mock-app .icon-btn { color: #fff; }
.l-phone { width: 270px; }

/* Strip kepercayaan */
.l-strip { position: relative; z-index: 4; margin-top: -48px; }
.l-strip-in { background: #fff; border-radius: 26px; box-shadow: 0 30px 60px -30px rgba(168, 19, 111, .45); display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px; }
.l-strip-item { display: flex; gap: 14px; align-items: center; padding: 18px 20px; }
.l-strip-item + .l-strip-item { border-left: 1px solid var(--line); }
.l-strip-item .ic { width: 46px; height: 46px; border-radius: 15px; background: var(--pink-100); color: var(--pink-500); display: grid; place-items: center; flex: none; }
.l-strip-item strong { display: block; font-size: 15px; }
.l-strip-item span { font-size: 13px; color: var(--muted); line-height: 1.35; display: block; }

/* Bagian umum */
.l-section { padding: 96px 0 0; }
.l-kicker { display: block; text-align: center; color: var(--pink-500); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.l-section h2 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; text-align: center; letter-spacing: -.02em; line-height: 1.15; margin: 10px auto 12px; max-width: 720px; }
.l-sub { text-align: center; color: #6c5666; font-size: 17px; max-width: 600px; margin: 0 auto 48px; }
.l-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.l-benefit { background: linear-gradient(180deg, #fff 0%, #fff7fc 100%); border: 1px solid var(--line); border-radius: 26px; padding: 28px; transition: transform .2s, box-shadow .2s; }
.l-benefit:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(168, 19, 111, .5); }
.l-benefit .ic { width: 58px; height: 58px; border-radius: 19px; background: linear-gradient(135deg, #ff8fcb, #e931a2); color: #fff; display: grid; place-items: center; margin-bottom: 18px; box-shadow: 0 14px 24px -12px rgba(233, 49, 162, .8); }
.l-benefit h3 { font-size: 19px; margin-bottom: 8px; }
.l-benefit p { color: #6c5666; font-size: 15px; line-height: 1.6; }

/* Langkah */
.l-steps-bg { background: var(--pink-50); margin-top: 96px; padding: 96px 0; border-radius: 56px; }
.l-steps-bg .l-section { padding: 0; }
.l-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; counter-reset: step; }
.l-steps::before { content: ''; position: absolute; left: 12%; right: 12%; top: 29px; border-top: 2.5px dashed var(--pink-300); z-index: 0; }
.l-step { position: relative; z-index: 1; text-align: center; padding: 0 6px; }
.l-step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%; background: var(--pink-500); color: #fff; font-weight: 800; font-size: 22px; box-shadow: 0 0 0 8px var(--pink-50), 0 14px 24px -10px rgba(233, 49, 162, .8); }
.l-step h3 { font-size: 18px; margin-bottom: 6px; }
.l-step p { color: #6c5666; font-size: 14.5px; line-height: 1.55; }

/* Fitur aplikasi */
.l-showcase { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.l-showcase.rev { grid-template-columns: 1.1fr .9fr; }
.l-showcase.rev .l-showcase-art { order: 2; }
.l-showcase h2, .l-showcase .l-kicker, .l-showcase .l-sub { text-align: left; margin-left: 0; }
.l-showcase .l-sub { margin-bottom: 26px; }
.l-list { display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; }
.l-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: #4a3744; line-height: 1.5; }
.l-list .tick { width: 26px; height: 26px; border-radius: 50%; background: var(--green-bg); color: var(--green); display: grid; place-items: center; flex: none; margin-top: 1px; }
.l-showcase-art { position: relative; display: grid; place-items: center; min-height: 380px; border-radius: 36px; background: linear-gradient(145deg, #ffe3f3, #ffc6e5); padding: 36px 20px; overflow: hidden; }
.l-showcase-art::before { content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: rgba(255, 255, 255, .45); right: -90px; top: -90px; }
.l-panel { position: relative; width: min(380px, 100%); background: #fff; border-radius: 24px; padding: 20px; box-shadow: 0 30px 50px -28px rgba(168, 19, 111, .6); display: grid; gap: 12px; }
.l-panel h4 { font-size: 15px; display: flex; justify-content: space-between; }
.l-lb { display: grid; gap: 8px; }
.l-lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #fff7fc; font-weight: 700; font-size: 14px; }
.l-lb-row:first-child { background: linear-gradient(90deg, #fff1c2, #fff8e0); }
.l-lb-row .no { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--pink-600); font-weight: 800; font-size: 13px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .25); }
.l-lb-row small { margin-left: auto; color: var(--pink-600); }
.l-prog { display: grid; gap: 8px; }
.l-prog .progress { height: 12px; }
.l-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.l-chip { padding: 7px 13px; border-radius: 999px; background: var(--pink-100); color: var(--pink-600); font-weight: 700; font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center; }
.l-msg { background: #e7ffdb; border-radius: 16px 16px 4px 16px; padding: 12px 14px; font-size: 12.5px; line-height: 1.55; color: #1f3d1c; white-space: pre-line; box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .4); }
.l-msg-meta { font-size: 11px; color: #5e8a58; text-align: right; margin-top: 4px; }

/* FAQ & CTA */
.l-faq { max-width: 800px; margin: 0 auto; display: grid; gap: 12px; }
.l-faq details { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 4px 22px; transition: box-shadow .2s, border-color .2s; }
.l-faq details[open] { border-color: var(--pink-300); box-shadow: 0 20px 40px -28px rgba(168, 19, 111, .6); }
.l-faq summary { font-weight: 800; font-size: 16px; cursor: pointer; list-style: none; padding: 18px 0; display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary::after { content: '+'; width: 30px; height: 30px; border-radius: 50%; background: var(--pink-100); color: var(--pink-600); display: grid; place-items: center; font-size: 20px; flex: none; }
.l-faq details[open] summary::after { content: '–'; background: var(--pink-500); color: #fff; }
.l-faq p { padding: 0 0 20px; color: #6c5666; font-size: 15px; line-height: 1.65; }
.l-final { margin: 96px 0; position: relative; border-radius: 44px; padding: 70px 30px; text-align: center; color: #fff; overflow: hidden; background: radial-gradient(700px 360px at 90% 0%, #ff7fc6 0, transparent 60%), linear-gradient(150deg, #ee3aa6, #b8127a); }
.l-final::before { content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: rgba(255, 255, 255, .09); left: -120px; bottom: -180px; }
.l-final h2 { color: #fff; position: relative; }
.l-final p { opacity: .94; font-size: 17px; max-width: 560px; margin: 0 auto 30px; position: relative; }
.l-final .l-cta { justify-content: center; margin: 0; position: relative; }

/* Footer */
.l-footer { background: #2d1b28; color: #d8c4d1; padding: 54px 0 30px; }
.l-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.l-footer img { width: 64px; height: 64px; border-radius: 18px; margin-bottom: 14px; }
.l-footer h4 { color: #fff; font-size: 14px; margin-bottom: 14px; letter-spacing: .04em; }
.l-footer a { display: block; margin-bottom: 9px; font-size: 14.5px; }
.l-footer a:hover { color: #fff; }
.l-footer p { font-size: 14px; line-height: 1.6; max-width: 340px; }
.l-copy { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 34px; padding-top: 22px; font-size: 13px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.l-floating-wa { position: fixed; right: 18px; bottom: 18px; z-index: 70; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: none; place-items: center; box-shadow: 0 16px 30px -10px rgba(18, 140, 74, .85); }

/* Animasi muncul */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .l-float { animation: none; } }

@media (max-width: 960px) {
    .l-links { display: none; }
    .l-hero { grid-template-columns: 1fr; text-align: center; padding: 40px 0 90px; }
    .l-lead { margin: 0 auto; }
    .l-cta, .l-checks { justify-content: center; }
    .l-visual { min-height: 440px; }
    .l-strip-in { grid-template-columns: 1fr 1fr; }
    .l-strip-item:nth-child(3) { border-left: 0; }
    .l-benefits { grid-template-columns: 1fr 1fr; }
    .l-steps { grid-template-columns: 1fr 1fr; row-gap: 38px; }
    .l-steps::before { display: none; }
    .l-showcase, .l-showcase.rev { grid-template-columns: 1fr; gap: 32px; }
    .l-showcase.rev .l-showcase-art { order: 0; }
    .l-showcase h2, .l-showcase .l-kicker, .l-showcase .l-sub { text-align: center; margin-left: auto; }
    .l-footer-grid { grid-template-columns: 1fr 1fr; }
    .l-floating-wa { display: grid; }
}
@media (max-width: 600px) {
    .l-hero-bg { border-radius: 0 0 36px 36px; }
    .l-nav-cta .l-btn-ghost { display: none; }
    .l-strip-in, .l-benefits, .l-steps { grid-template-columns: 1fr; }
    .l-strip-item + .l-strip-item { border-left: 0; border-top: 1px solid var(--line); }
    .l-float.a, .l-float.c { display: none; }
    .l-float.b { right: 0; }
    .l-steps-bg { border-radius: 36px; padding: 64px 0; margin-top: 64px; }
    .l-section { padding-top: 64px; }
    .l-final { padding: 50px 20px; border-radius: 32px; margin: 64px 0; }
    .l-footer-grid { grid-template-columns: 1fr; }
    .l-cta .l-btn { width: 100%; }
}

/* ---------- Login ---------- */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(circle at 20% 10%, #ffc6e5 0, transparent 45%), radial-gradient(circle at 85% 90%, #ffb0dc 0, transparent 40%), var(--bg); }
.auth-card { width: min(420px, 100%); background: #fff; border-radius: 28px; padding: 30px 26px; box-shadow: 0 30px 60px -30px rgba(168, 19, 111, .45); display: grid; gap: 16px; }
.auth-logo { width: 84px; height: 84px; border-radius: 22px; margin: 0 auto; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 24px; font-weight: 800; text-align: center; }
.auth-card .sub { text-align: center; color: var(--muted); font-size: 14px; margin-top: -8px; }
.auth-card .tag { justify-self: center; background: var(--pink-100); color: var(--pink-600); font-weight: 800; font-size: 11.5px; letter-spacing: .08em; padding: 5px 12px; border-radius: 999px; }
.pw { position: relative; }
.pw button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; padding: 6px 8px; }

/* ---------- Pendaftaran reseller (halaman publik) ---------- */
.reg-step { border: 1.5px solid var(--line); border-radius: 16px; }
.reg-step summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; font-weight: 800; font-size: 14px; }
.reg-step summary::-webkit-details-marker { display: none; }
.reg-step .stack { padding: 0 14px 14px; }
.terms { border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 14px; max-height: 220px; overflow: auto; }
.terms h3 { font-size: 14px; font-weight: 800; margin-bottom: 6px; }
.terms ol { padding-left: 18px; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.terms li::marker { color: var(--pink-500); font-weight: 800; }

/* ---------- Aplikasi reseller (mobile) ---------- */
body.area-reseller { background: linear-gradient(180deg, #ffd9ee, #fff0f9 60%); }
.phone { position: relative; width: min(480px, 100%); min-height: 100vh; margin: 0 auto; background: var(--bg); box-shadow: 0 0 60px -20px rgba(168, 19, 111, .35); padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.app-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 6px; padding: calc(10px + env(safe-area-inset-top)) 14px 12px; background: linear-gradient(135deg, #ef3ba8, #d01b8b); color: #fff; }
.app-header.is-home { padding-bottom: 46px; position: relative; z-index: 1; }
.app-header .icon-btn { color: #fff; }
.app-header .badge-count { border-color: #e22f9b; }
.app-logo img { width: 92px; height: 56px; object-fit: cover; border-radius: 12px; }
.app-title { font-size: 18px; font-weight: 800; margin-left: 2px; }
.app-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.app-actions .avatar { width: 38px; height: 38px; margin-left: 4px; }
.app-content { padding: 14px 14px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.app-content.is-home { margin-top: -30px; position: relative; z-index: 2; padding-top: 0; }
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(480px, 100%); z-index: 40; background: #fff; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px -14px rgba(168, 19, 111, .3); border-radius: 22px 22px 0 0; }
.tabbar a { display: grid; justify-items: center; gap: 2px; font-size: 11.5px; font-weight: 700; color: #a58d9d; padding: 4px 0; }
.tabbar a.active { color: var(--pink-500); }
.tabbar a.active .icon { fill: rgba(233, 49, 162, .16); }
.greet { background: #fff; border-radius: 22px 22px 0 0; padding: 18px 16px 12px; margin: 0 -14px; }
.greet h2 { font-size: 24px; font-weight: 800; }
.greet-code { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #5d4655; margin-top: 2px; }
.greet-code button { border: 0; background: transparent; color: var(--pink-500); padding: 2px; display: inline-grid; }
.hero-card { background: linear-gradient(145deg, #ee3aa6, #d01b8b); color: #fff; border-radius: 22px; padding: 14px; box-shadow: var(--shadow); display: grid; gap: 12px; }
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.glass { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); border-radius: 16px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.glass .ic { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--pink-500); }
.glass .ic.gold { color: #f5a30a; }
/* min-width:0 pada kolom teks: tanpa ini, angka rupiah/poin yang panjang memaksa lebar grid
   ikut melar dan isinya keluar dari kartu. min-width:0 hanya boleh di kolom teks, bukan di
   .glass (induk), karena flex:none pada ikon sudah cukup menahannya. */
.glass > div { min-width: 0; flex: 1; }
.glass small { font-size: 11.5px; opacity: .9; display: block; line-height: 1.2; }
.glass strong { font-size: 19px; font-weight: 800; line-height: 1.2; display: block; overflow-wrap: anywhere; }
.glass strong.sm { font-size: clamp(12px, 3.4vw, 15px); white-space: nowrap; }
.target-card { background: rgba(255, 255, 255, .14); border-radius: 16px; padding: 12px; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.target-card h3 { font-size: 14px; }
.target-card p { font-size: 12.5px; opacity: .92; }
.target-card .gift { grid-row: 1 / span 2; grid-column: 2; width: 62px; height: 62px; border-radius: 18px; background: rgba(255, 255, 255, .22); display: grid; place-items: center; }
.target-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; }
.target-bar .progress { flex: 1; background: rgba(255, 255, 255, .3); height: 9px; }
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.quick a { background: #fff; border-radius: 18px; padding: 12px 4px; display: grid; justify-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; text-align: center; box-shadow: var(--shadow); line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.quick .ic { width: 46px; height: 46px; border-radius: 16px; background: var(--pink-100); color: var(--pink-500); display: grid; place-items: center; }
/* Kartu reward bulanan di Beranda reseller — gaya katalog produk: fokus foto, nama,
   dan progres poin user dalam bentuk bar. Seluruh kartu bisa diklik ke halaman detail.
   minmax(0,1fr) pada .product-grid menahan teks panjang agar tidak melebarkan kolom. */
.reward-tile { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; color: inherit; text-decoration: none; min-width: 0; }
.reward-tile-img { aspect-ratio: 1 / 1; background: linear-gradient(135deg, #ffe3f3, #fff0f8); display: grid; place-items: center; color: var(--pink-300); }
.reward-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.reward-tile-body { padding: 10px 12px 12px; display: grid; gap: 6px; align-content: start; flex: 1; }
.reward-period { font-size: 10.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--pink-500); }
.reward-tile .name { font-size: 14.5px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reward-progress { display: grid; gap: 4px; font-size: 11.5px; font-weight: 700; margin-top: auto; }
.reward-progress .progress { height: 8px; }
.reward-progress .muted { overflow-wrap: anywhere; }
.promo-banner { display: grid; grid-template-columns: 1fr 96px; gap: 8px; align-items: center; background: linear-gradient(120deg, #ffd0ea, #ffb4dc); border-radius: 20px; padding: 16px; position: relative; overflow: hidden; }
.promo-banner .tag { background: #fff; color: var(--pink-600); font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 8px; display: inline-block; margin-bottom: 6px; }
.promo-banner h3 { font-size: 21px; color: var(--pink-700); font-weight: 800; }
.promo-banner p { font-size: 12.5px; color: #8a2a68; margin-top: 2px; }
.promo-banner img { width: 96px; height: 96px; object-fit: cover; border-radius: 18px; }
.promo-banner .go { position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; border-radius: 50%; background: var(--pink-500); color: #fff; display: grid; place-items: center; }
.search-row { display: grid; gap: 10px; }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.product { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.product-img { position: relative; aspect-ratio: 1 / 1; background: linear-gradient(135deg, #ffe3f3, #fff0f8); display: grid; place-items: center; color: var(--pink-300); }
.product-img img { width: 100%; height: 100%; object-fit: cover; }
.product-open { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--pink-500); box-shadow: 0 2px 6px rgba(45, 27, 40, 0.18); }

/* Grid video tutorial: satu kartu per baris supaya pratinjau videonya jelas.
   Kartu dibuka di dalam aplikasi, tidak ada tautan ke luar. */
.video-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.video-card { display: grid; gap: 0; text-align: left; padding: 0; border: 0; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); cursor: pointer; }
.video-card:active { transform: scale(.99); }
.video-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #2d1b28, #4a2b3d); }
.video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-play { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--pink-500); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .55); }
.video-cat { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .45); padding: 4px 9px; border-radius: 999px; }
.video-body { display: grid; gap: 3px; padding: 11px 13px 13px; }
.video-body strong { font-size: 15px; font-weight: 800; line-height: 1.3; }
.video-body small { font-size: 12.5px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.video-player { width: min(720px, calc(100vw - 24px)); }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #111; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.product-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-body h3 { font-size: 14.5px; font-weight: 800; line-height: 1.25; }
.product-body .desc { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.price { font-size: 17px; font-weight: 800; color: var(--ink); }
/* Saran harga jual ke pelanggan akhir: petunjuk saja, tidak dipakai perhitungan. */
.price-suggest { font-size: 11.5px; font-weight: 800; color: var(--pink-500); line-height: 1.3; }
.price-suggest span { font-weight: 700; opacity: .75; }
.suggest-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--pink-50); border: 1.5px dashed var(--pink-300); border-radius: 14px; padding: 10px 12px; }
.suggest-box strong { display: block; font-size: 18px; font-weight: 800; color: var(--pink-600); }
.suggest-box small { display: block; font-size: 11.5px; color: var(--muted); }
.suggest-box .chip { font-size: 12px; font-weight: 800; color: #fff; background: var(--pink-500); border-radius: 999px; padding: 3px 10px; }
.product-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.product-meta .points { font-size: 11.5px; }
.stock { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.stock.limited { color: #d9480f; }
.stock.limited::before { background: #f04438; }
.stock.ok { color: #138a56; }
.stock.off { color: var(--muted); }
.stock.off::before { background: #b8a6b2; }
.points { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 5px; color: #6c5666; }
.points .icon { color: #f5a30a; fill: #ffd23f; }
.product-body form { margin-top: auto; padding-top: 6px; }
.order-card { background: #fff; border-radius: 18px; padding: 14px; box-shadow: var(--shadow); display: grid; gap: 10px; }
.order-card .top { flex-wrap: wrap; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.no { font-weight: 800; font-size: 13.5px; white-space: nowrap; letter-spacing: -.01em; }
.order-card .badge { font-size: 11.5px; padding: 3px 9px; }
.order-line { display: flex; gap: 12px; align-items: center; }
.thumb { width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(135deg, #ffe3f3, #fff0f8); display: grid; place-items: center; overflow: hidden; flex: none; color: var(--pink-300); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.line-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); }
.line-total b { color: var(--pink-600); font-size: 17px; font-weight: 800; }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-stat { border-radius: 16px; padding: 12px; display: flex; gap: 10px; align-items: center; min-width: 0; }
.mini-stat .ic { width: 38px; height: 38px; flex: none; border-radius: 12px; background: rgba(255, 255, 255, .8); display: grid; place-items: center; }
.mini-stat small { display: block; font-size: 11.5px; color: #6c5666; line-height: 1.2; }
.mini-stat strong { font-size: 17px; font-weight: 800; display: block; line-height: 1.25; }
.tone-pink { background: var(--pink-100); } .tone-pink .ic { color: var(--pink-500); }
.tone-green { background: var(--green-bg); } .tone-green .ic { color: var(--green); }
.tone-blue { background: var(--blue-bg); } .tone-blue .ic { color: var(--blue); }
.tone-amber { background: var(--amber-bg); } .tone-amber .ic { color: #e49a0b; }
.hist { display: grid; }
.hist-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.hist-row:last-child { border-bottom: 0; }
.hist-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 800; }
.hist-ic.plus { background: var(--green-bg); color: var(--green); }
.hist-ic.minus { background: var(--red-bg); color: var(--red); }
.hist-pts { font-weight: 800; font-size: 16px; }
.hist-pts.plus { color: var(--green); }
.hist-pts.minus { color: var(--red); }
.rank-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rank-row:last-child { border-bottom: 0; }
.rank-no { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--pink-50); color: var(--pink-600); flex: none; }
.rank-row.r1 .rank-no { background: #ffe58a; color: #8a5a00; }
.rank-row.r2 .rank-no { background: #e8e8f0; color: #55566a; }
.rank-row.r3 .rank-no { background: #ffd6b3; color: #8a4310; }
.rank-row.me { background: var(--pink-50); border-radius: 14px; padding-left: 8px; padding-right: 8px; }
.promo-item { display: grid; gap: 8px; }
.promo-item .cap { background: var(--pink-50); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.copy-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: #2d1b28; color: #fff; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 13px; z-index: 80; }
.offline-banner { position: fixed; left: 0; right: 0; bottom: 0; background: #2d1b28; color: #fff; text-align: center; padding: 10px; font-size: 13px; font-weight: 600; z-index: 90; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.qty input { width: 46px; border: 0; text-align: center; font-weight: 800; padding: 6px 0; background: transparent; -moz-appearance: textfield; }
.qty button { border: 0; background: var(--pink-50); width: 32px; align-self: stretch; color: var(--pink-600); font-weight: 800; }
/* Jumlah yang sedang disimpan ke server: ditandai halus, bukan dikunci, supaya
   pengguna tetap bisa mengubah angka sementara penyimpanan berjalan di latar belakang. */
.qty input[aria-busy="true"] { color: var(--pink-600); background: var(--pink-50); }
.sticky-cta { position: sticky; bottom: calc(82px + env(safe-area-inset-bottom)); z-index: 20; }
.reward-card { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 18px; padding: 12px; box-shadow: var(--shadow); }
.reward-card .thumb { width: 72px; height: 72px; }
.profile-head { display: flex; align-items: center; gap: 14px; }
.faq { display: grid; gap: 8px; }
.faq details { background: #fff; border-radius: 14px; padding: 13px 15px; box-shadow: var(--shadow); }
.faq summary { font-weight: 700; cursor: pointer; }
.faq p { margin-top: 8px; font-size: 14px; color: #6c5666; }
.note-box { background: #fff8dd; border: 1px dashed #f2c94c; border-radius: 14px; padding: 12px 14px; font-size: 13px; color: #7b5a00; display: flex; gap: 10px; }
.status-steps { display: grid; gap: 0; }
.status-steps li { list-style: none; display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding-bottom: 14px; position: relative; font-size: 14px; }
.status-steps li::before { content: ''; position: absolute; left: 10px; top: 20px; bottom: 0; width: 2px; background: var(--line); }
.status-steps li:last-child::before { display: none; }
.status-steps .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: #fff; display: grid; place-items: center; color: #fff; }
.status-steps li.done .dot { background: var(--pink-500); border-color: var(--pink-500); }
.status-steps li.now .dot { border-color: var(--pink-500); box-shadow: 0 0 0 4px rgba(233, 49, 162, .15); }
.status-steps li small { display: block; color: var(--muted); font-size: 12px; }
.status-steps ul, ul.status-steps { margin: 0; padding: 0; }

/* ---------- Panel admin ---------- */
body.area-admin { background: var(--bg); }
.admin-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; background: linear-gradient(180deg, #ef3ba8 0%, #d01b8b 60%, #b8127a 100%); color: #fff; padding: 18px 14px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; z-index: 50; }
.sidebar::after { content: ''; position: absolute; inset: auto 0 0 0; height: 220px; background: radial-gradient(ellipse at center, rgba(255, 255, 255, .16), transparent 70%); pointer-events: none; }
.sidebar-brand { display: block; padding: 4px 8px; }
.sidebar-brand img { width: 120px; border-radius: 16px; }
.sidebar nav { display: grid; gap: 4px; margin-top: 6px; }
.sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; font-weight: 700; font-size: 14.5px; color: rgba(255, 255, 255, .92); }
.sidebar nav a:hover { background: rgba(255, 255, 255, .14); }
.sidebar nav a.active { background: #fff; color: var(--pink-600); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .35); }
.sidebar-foot { margin-top: auto; font-size: 13px; font-weight: 700; opacity: .95; position: relative; z-index: 1; padding: 0 8px 6px; }

/* Sidebar lipat: mode ikon saja agar konten lebih luas (desktop). */
.only-desktop { display: inline-grid; }
@media (min-width: 901px) {
    .admin-shell { transition: grid-template-columns .2s; }
    .admin-shell.collapsed { grid-template-columns: 76px minmax(0, 1fr); }
    .admin-shell.collapsed .sidebar-brand img { width: 44px; border-radius: 12px; }
    .admin-shell.collapsed .sidebar nav a { justify-content: center; padding: 11px 0; }
    .admin-shell.collapsed .sidebar nav a span, .admin-shell.collapsed .sidebar-foot { display: none; }
    .admin-shell.collapsed [data-collapse-sidebar] .icon { transform: rotate(180deg); }
}
.admin-main { min-width: 0; }
.admin-topbar { display: flex; align-items: center; gap: 14px; padding: 14px 26px; position: sticky; top: 0; z-index: 30; background: rgba(255, 245, 251, .9); backdrop-filter: blur(10px); }
.topbar-search { position: relative; flex: 1; min-width: 0; max-width: 520px; }
.topbar-search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--pink-400); }
.topbar-search input { width: 100%; border: 1.5px solid var(--line); border-radius: 999px; padding: 11px 16px 11px 44px; background: #fff; font-size: 14px; }
.topbar-search input:focus { outline: 0; border-color: var(--pink-400); }
.admin-topbar .bell { margin-left: auto; position: relative; width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); color: var(--pink-600); }
.topbar-user { display: flex; align-items: center; gap: 10px; }
.topbar-user .who { display: grid; line-height: 1.2; }
.topbar-user small { color: var(--muted); font-size: 12px; }
.admin-content { padding: 6px 26px 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.page-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -.01em; }
.page-head p { color: var(--muted); font-size: 14px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpis-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { background: #fff; border-radius: 20px; padding: 16px; box-shadow: var(--shadow); display: flex; gap: 14px; align-items: center; min-width: 0; }
.kpi > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.kpi .ic { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; flex: none; }
.kpi small { color: #6c5666; font-size: 12.5px; font-weight: 600; display: block; line-height: 1.25; }
.kpi strong { font-size: 24px; font-weight: 800; display: block; line-height: 1.25; letter-spacing: -.01em; }
.kpi .delta { font-size: 11.5px; font-weight: 700; color: var(--green); }
.kpi .delta.down { color: var(--red); }
.ic-pink { background: var(--pink-100); color: var(--pink-500); }
.ic-amber { background: var(--amber-bg); color: #e49a0b; }
.ic-green { background: var(--green-bg); color: var(--green); }
.ic-blue { background: var(--blue-bg); color: var(--blue); }
.ic-violet { background: var(--violet-bg); color: var(--violet); }
.ic-red { background: var(--red-bg); color: var(--red); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dash-col { display: grid; gap: 18px; min-width: 0; }
.panel { background: #fff; border-radius: 22px; padding: 20px; box-shadow: var(--shadow); min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.panel-head h2 { font-size: 17px; font-weight: 800; }
.activity { display: grid; }
.activity-row { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.activity-row:last-child { border-bottom: 0; }
.activity-row .ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.activity-row .time { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.activity-row strong { display: block; font-size: 14px; line-height: 1.3; }
.activity-row small { color: var(--muted); font-size: 12.5px; }
.reward-banner { display: flex; gap: 16px; align-items: center; background: linear-gradient(120deg, #ffd0ea, #ffb4dc); border-radius: 22px; padding: 20px; }
.reward-banner h3 { color: var(--pink-700); font-size: 18px; font-weight: 800; }
.reward-banner .gift { width: 78px; height: 78px; border-radius: 22px; background: rgba(255, 255, 255, .55); display: grid; place-items: center; color: var(--pink-500); flex: none; }
.table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.area-admin .table-wrap { max-width: calc(100% + 8px); scrollbar-width: thin; scrollbar-color: var(--pink-300) var(--pink-50); }
.area-admin .table-wrap table.table { min-width: 640px; }
.copy-link { display: flex; align-items: flex-start; gap: 8px; width: 320px; max-width: 100%; }
.copy-link code { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.copy-link .icon-btn { flex: none; }
table.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 8px; border-bottom: 1px solid #fbeef6; vertical-align: middle; }
.table tbody tr:hover { background: #fff8fc; }
.table tr.selected { background: var(--pink-100) !important; }
.table tr.selected td:first-child { border-radius: 14px 0 0 14px; }
.table tr.selected td:last-child { border-radius: 0 14px 14px 0; }
.table a.row-link { font-weight: 800; color: var(--pink-600); white-space: nowrap; }
.table .num { text-align: right; white-space: nowrap; }
/* Baris tabel yang bisa diklik: seluruh area jadi sasaran klik, bukan cuma nomornya. */
.table tbody tr[data-href] { cursor: pointer; }
.who-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who-cell .avatar { width: 34px; height: 34px; font-size: 13px; }

/* Detail pesanan admin: satu halaman penuh.
   Kolom kiri untuk isi pesanan (yang perlu dibaca berurutan), kolom kanan untuk
   aksi admin — supaya tombol-tombolnya selalu terlihat tanpa harus menggulir. */
.order-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.order-detail .od-side { position: sticky; top: 84px; display: grid; gap: 14px; max-height: calc(100vh - 100px); overflow-y: auto; }
.order-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.order-head h1 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.order-body { display: grid; gap: 16px; }

/* Kartu ringkasan: label kecil di atas, nilai besar di bawah — dibaca sekali lihat. */
.od-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.od-stat { background: var(--pink-50); border-radius: 14px; padding: 11px 13px; display: grid; gap: 2px; }
.od-stat small { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.od-stat strong { font-size: 16px; font-weight: 800; }
.od-stat.total strong { color: var(--pink-600); font-size: 19px; }

/* Daftar produk: tabel ringkas yang rapi, bukan tumpukan kartu. */
.od-items { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.od-items th { text-align: left; font-size: 11.5px; color: var(--muted); font-weight: 700; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.od-items td { padding: 11px 6px; border-bottom: 1px solid #fbeef6; vertical-align: top; }
.od-items tr:last-child td { border-bottom: 0; }
.od-items .prod { display: grid; gap: 2px; }
.od-items .num { text-align: right; white-space: nowrap; }

/* Langkah status: horizontal, jadi urutannya terbaca kiri ke kanan. */
.od-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.od-flow .step { display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); }
.od-flow .bar { height: 5px; border-radius: 999px; background: var(--line); }
.od-flow .step.done { color: var(--green); font-weight: 700; }
.od-flow .step.done .bar { background: var(--green); }
.od-flow .step.now { color: var(--pink-600); font-weight: 700; }
.od-flow .step.now .bar { background: var(--pink-500); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.detail { overflow-x: hidden; position: sticky; top: 84px; display: grid; gap: 14px; max-height: calc(100vh - 100px); overflow-y: auto; }
.detail h2 { font-size: 17px; font-weight: 800; }
.detail-box { background: var(--pink-50); border-radius: 16px; padding: 14px; display: grid; gap: 10px; }
.detail-box h3 { font-size: 13px; color: var(--muted); font-weight: 700; }
.mini-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.mini-item .thumb { width: 44px; height: 44px; border-radius: 11px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { padding: 9px 16px; border-radius: 13px; font-weight: 700; font-size: 13.5px; color: #6c5666; background: #fff; border: 1px solid var(--line); }
.tab.on { background: var(--pink-500); color: #fff; border-color: var(--pink-500); box-shadow: 0 8px 16px -8px rgba(233, 49, 162, .8); }
.tab em { font-style: normal; opacity: .75; margin-left: 4px; font-size: 12px; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.toolbar .search { flex: 1; min-width: 220px; }
.action-stack { display: grid; gap: 8px; }
.action-stack form { display: grid; gap: 8px; }
.action-stack .hint { font-size: 12px; color: var(--muted); }
.stepper { display: grid; gap: 10px; }
.stepper label { display: flex; gap: 10px; align-items: center; font-size: 13.5px; font-weight: 600; color: #6c5666; }
.stepper .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: grid; place-items: center; color: #fff; }
.stepper .done { color: var(--ink); }
.stepper .done .dot { background: var(--pink-500); border-color: var(--pink-500); }
.stepper .now { color: var(--pink-600); font-weight: 800; }
.stepper .now .dot { border-color: var(--pink-500); }
details.modal > summary { list-style: none; cursor: pointer; }
details.modal > summary::-webkit-details-marker { display: none; }
details.modal[open] > .modal-body { display: grid; gap: 12px; }
details.modal.pop { position: relative; }
details.modal.pop > .modal-body { position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; width: min(460px, calc(100vw - 32px)); box-shadow: 0 30px 60px -20px rgba(168, 19, 111, .45); }
.modal-body > .btn { justify-self: start; }
.modal-body { margin-top: 12px; background: #fff; border-radius: 20px; padding: 18px; box-shadow: var(--shadow); border: 1px solid var(--line); }

/*
 * Jendela aksi (dialog). Berbeda dari popover details, elemen ini dirender di
 * top layer browser sehingga tidak pernah terpotong oleh wadah tabel yang bisa
 * digulir — masalah lama yang membuat tombol Ubah/Hapus di dalam tabel tidak
 * bisa diklik. Tombol Esc dan klik area gelap menutupnya dengan sendirinya.
 */
dialog.sheet { border: 0; padding: 0; background: #fff; color: var(--ink); width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); border-radius: 20px; box-shadow: 0 40px 90px -30px rgba(45, 27, 40, .65); overflow: hidden; }
dialog.sheet::backdrop { background: rgba(45, 27, 40, .55); }
dialog.sheet > .sheet-body { display: grid; gap: 12px; padding: 18px; max-height: calc(100vh - 32px); overflow-y: auto; }
dialog.sheet .sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
dialog.sheet .sheet-head h2 { font-size: 17px; font-weight: 800; }
dialog.sheet .sheet-head p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.scrim { position: fixed; inset: 0; background: rgba(45, 27, 40, .45); z-index: 45; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--muted); }
.big-num { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.preview { background: var(--pink-50); border: 1px dashed var(--pink-300); border-radius: 16px; padding: 14px; font-size: 14px; white-space: pre-wrap; }
.preview h4 { font-weight: 800; margin-bottom: 4px; color: var(--pink-700); }
.check-list { max-height: 180px; overflow: auto; border: 1.5px solid var(--line); border-radius: 13px; padding: 8px 12px; display: grid; gap: 6px; }
.perm-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.perm-name { width: 120px; flex: none; font-weight: 700; font-size: 13.5px; }


/* Baris tabel yang bisa diklik */
[data-href] { cursor: pointer; }
.activity-row[data-href]:hover { background: #fff8fc; border-radius: 12px; }

/* Input berkas */
input[type="file"] { width: 100%; padding: 6px; border: 1.5px dashed var(--pink-300); border-radius: 14px; background: var(--pink-50); font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
input[type="file"]:hover { border-color: var(--pink-500); }
input[type="file"]::file-selector-button { margin-right: 12px; padding: 9px 16px; border: 0; border-radius: 10px; background: var(--pink-500); color: #fff; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: background .15s; }
input[type="file"]::file-selector-button:hover { background: var(--pink-600); }

/* Select, tanggal, dan angka agar seragam */
select.select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d01b8b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; cursor: pointer; }
input[type="month"], input[type="date"] { min-height: 42px; cursor: pointer; }
input[type="month"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; filter: invert(25%) sepia(90%) saturate(3500%) hue-rotate(305deg); }
input[type="search"]::-webkit-search-cancel-button { appearance: none; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--pink-500); }
input[type="radio"] { width: 18px; height: 18px; }
.modal > summary.btn { width: auto; }
.btn { cursor: pointer; }
.btn[name][value] { font-family: inherit; }
button.btn-sm, .btn-sm { min-height: 34px; }
.table td form { margin: 0; }
.table .row { flex-wrap: wrap; }

/* Kartu notifikasi push */
.push-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow); }
.push-card[hidden] { display: none; }
.push-card .ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.push-card strong { display: block; font-size: 14.5px; }
.push-card small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }

/* Popup langkah awal reseller */
.onboard { position: fixed; inset: 0; z-index: 90; background: rgba(45, 27, 40, .55); display: grid; place-items: center; padding: 18px; overflow-y: auto; }
.onboard-card { width: min(440px, 100%); background: #fff; border-radius: 22px; padding: 20px 18px 16px; box-shadow: 0 30px 70px -20px rgba(45, 27, 40, .55); animation: onboard-in .22s ease-out; }
.onboard-head { text-align: center; display: grid; gap: 6px; justify-items: center; }
.onboard-logo { width: 46px; height: 46px; }
.onboard-head h2 { font-size: 19px; font-weight: 800; }
.onboard-head p { font-size: 13px; color: var(--muted); line-height: 1.45; }
.onboard-steps { display: grid; gap: 10px; margin: 16px 0 12px; }
.onboard-step { display: flex; gap: 12px; align-items: flex-start; background: var(--pink-50); border: 1px solid var(--line); border-radius: 18px; padding: 13px 14px; }
.onboard-step strong { display: block; font-size: 14.5px; }
.onboard-step small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.onboard-step .push-card { margin-top: 10px; box-shadow: none; padding: 10px 12px; }
.onboard-step .push-card strong { display: none; }
.onboard-step.done .push-card { border-color: #16a34a; }
body.onboard-open { overflow: hidden; }
.onboard-no { width: 26px; height: 26px; border-radius: 999px; background: var(--pink-500); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; flex: none; }
.onboard-tick { display: none; }
.onboard-step.done .onboard-no { background: #16a34a; }
.onboard-step.done .onboard-tick { display: block; }
.onboard-step.done [data-step-no] { display: none; }
.onboard-step.done small[data-app-hint] { color: #15803d; font-weight: 700; }
.onboard-step .btn { margin-top: 10px; }
@keyframes onboard-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Galeri, bukti bayar, dan cetak */
.proof-img { width: 100%; max-height: 320px; object-fit: contain; border-radius: 14px; background: var(--pink-50); border: 1px solid var(--line); }
.gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; border-radius: 16px; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery img { flex: none; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; scroll-snap-align: center; border-radius: 16px; background: var(--pink-50); }
.gallery-admin { display: flex; flex-wrap: wrap; gap: 10px; }
.gallery-item { display: grid; gap: 6px; justify-items: center; font-size: 12.5px; }
.gallery-item img { width: 92px; height: 92px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.print-sheet { max-width: 820px; margin: 0 auto; padding: 28px 20px; background: #fff; min-height: 100vh; }
.print-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding-bottom: 16px; border-bottom: 2px solid var(--pink-500); margin-bottom: 16px; }
.print-head h1 { font-size: 22px; }
.print-head img { border-radius: 14px; }
.print-kv { margin-bottom: 14px; }
.print-table tfoot td { border-bottom: 0; font-size: 14px; }
@media print {
    @page { margin: 14mm; }
    body, body.area-admin, body.area-reseller { background: #fff !important; }
    .sidebar, .admin-topbar, .app-header, .tabbar, .no-print, .offline-banner, .scrim, .copy-toast, .l-floating-wa, .push-card { display: none !important; }
    .admin-shell { display: block; }
    .admin-content { padding: 0; }
    .panel, .card, .kpi { box-shadow: none !important; border: 1px solid #ddd; break-inside: avoid; }
    .print-sheet { padding: 0; min-height: 0; }
    .table-wrap { overflow: visible; }
    a { color: inherit; }
}

/* ---------- Responsif ---------- */
@media (max-width: 1120px) {
    .split, .split[style] { grid-template-columns: minmax(0, 1fr) !important; }
    .detail { position: static; max-height: none; }
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-grid { grid-template-columns: minmax(0, 1fr); }
    .order-detail { grid-template-columns: minmax(0, 1fr); }
    .order-detail .od-side { position: static; max-height: none; }
}
@media (max-width: 900px) {
    .icon-btn.only-mobile, .only-mobile { display: inline-grid; }
    .only-desktop { display: none; }
    .admin-shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: fixed; left: 0; top: 0; width: 250px; transform: translateX(-100%); transition: transform .2s; }
    .sidebar.open { transform: none; }
    .admin-topbar { padding: 12px 16px; }
    .admin-topbar > .icon-btn, .admin-topbar .topbar-user { flex: none; }
    .admin-content { padding: 6px 16px 32px; }
    .topbar-user .who { display: none; }
    .l-hero { grid-template-columns: 1fr; text-align: center; }
    .l-hero p.lead { margin: 0 auto; }
    .l-cta, .l-trust { justify-content: center; }
    .l-grid { grid-template-columns: 1fr; }
    .l-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .form-grid { grid-template-columns: 1fr; }
    .kpis { grid-template-columns: 1fr; }
    .l-steps { grid-template-columns: 1fr; }
    .page-head h1 { font-size: 23px; }
    .area-admin .page-head { position: relative; }
    .area-admin .page-head > div:first-child { flex-basis: 100%; min-width: 0; overflow-wrap: anywhere; }
    .area-admin .page-head details.modal.pop { position: static; }
    .area-admin .page-head details.modal.pop > .modal-body { left: 0; right: auto; width: 100%; max-width: 100%; max-height: calc(100dvh - 160px); overflow-y: auto; }
    .area-admin .panel { padding: 16px; }
    .area-admin .table-wrap::before { content: 'Geser ke samping untuk melihat kolom lainnya'; display: block; position: sticky; left: 0; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
    .area-admin .toolbar > .search { flex-basis: 100%; min-width: 0; }
    .area-admin .toolbar > .field, .area-admin .toolbar > .select { min-width: 0; max-width: 100%; }
    .area-admin .field, .area-admin .input, .area-admin .select, .area-admin .textarea { min-width: 0; max-width: 100%; }
    .area-admin .panel-head, .area-admin .card-head, .area-admin .sheet-head { overflow-wrap: anywhere; }
    .area-admin .panel-head > *, .area-admin .sheet-head > div, .area-admin .od-stat { min-width: 0; }
    .area-admin .od-stat, .area-admin .kv dd { overflow-wrap: anywhere; }
    .area-admin .kv > div { flex-wrap: wrap; }
    .area-admin .kv dd { margin-left: auto; min-width: 0; max-width: 100%; }
    .area-admin .sheet-body > .row, .area-admin .modal-body > .row, .area-admin .order-body form > .row { flex-wrap: wrap; }
    .admin-topbar { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }