/* ==========================================================================
   Sewa.Mac — [sewa_mac]  ·  Apple HIG, semua selector di bawah .smac
   ========================================================================== */

.smac {
	--t1: #1d1d1f; --t2: #424245; --t3: #6e6e73; --line: #d2d2d7; --fill: #f5f5f7;
	--blue: #0071e3; --link: #0066cc; --green: #1d7a3a; --dot-green: #1d9d4a;
	--orange: #b64400; --dot-orange: #e97b00; --red: #d70015; --seg: rgba(118,118,128,.12);
	--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.47;
	letter-spacing: -0.022em;
	color: var(--t1) !important;
	-webkit-font-smoothing: antialiased;
	text-align: left;
	max-width: 1024px;
	margin: 0 auto;
	padding: 0 var(--gr, 22px) 0 var(--gl, 22px);
}
.smac *, .smac *::before, .smac *::after { box-sizing: border-box; }
.smac p, .smac ul, .smac ol, .smac dl, .smac dd, .smac h1, .smac h2, .smac h3, .smac h4 { margin: 0; padding: 0; }
.smac h1, .smac h2, .smac h3, .smac h4 { font-family: var(--font); color: var(--t1) !important; text-transform: none; border: 0; }
.smac button { font-family: var(--font); letter-spacing: inherit; text-transform: none; line-height: 1.2; }
.smac a { text-decoration: none; }
.smac svg { display: block; }
.smac [hidden], .smac[hidden], .smac-sheet-wrap[hidden] { display: none !important; }
.smac :focus-visible { outline: 3px solid rgba(0,125,250,.6); outline-offset: 2px; }

/* ---------- Hero ---------- */
.smac-hero { text-align: center; padding: clamp(12px, 2.2vw, 32px) 0 0; }
/* Label hero: gradasi biru → ungu (gaya Apple Intelligence). Dipakai hemat: hanya label di atas judul halaman. */
.smac .smac-eyebrow { width: fit-content; max-width: 100%; margin: 0 auto 6px; font-size: 17px; font-weight: 600; color: #0071e3 !important; background: linear-gradient(90deg, #0071e3 0%, #8e44ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (forced-colors: active) { .smac .smac-eyebrow { background: none; -webkit-text-fill-color: currentColor; } }
.smac .smac-h1 { font-size: clamp(36px, 4.8vw, 64px); line-height: 1.06; font-weight: 600; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.smac .smac-lede { max-width: 640px; margin: 14px auto 0; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.4; color: var(--t3) !important; letter-spacing: .011em; text-wrap: balance; }
.smac .smac-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin: 24px 0 0 !important; }
.smac .smac-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 980px; border: 1px solid var(--blue); background: var(--blue); color: #fff !important; font-size: 17px; line-height: 1; font-weight: 400; letter-spacing: -0.022em; text-decoration: none !important; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.smac .smac-btn:hover { background: #0077ed; border-color: #0077ed; }
.smac .smac-btn:active { background: #006edb; }
.smac .smac-btn--alt { background: transparent; color: var(--link) !important; border-color: var(--blue); }
.smac .smac-btn--alt:hover { background: var(--blue); border-color: var(--blue); color: #fff !important; }
.smac .smac-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- Perks (strip ringkas) ---------- */
.smac .smac-perks { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 40px 0 0 !important; padding: 0 !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.smac .smac-perks li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 18px 16px; }
.smac .smac-perks li + li { border-left: 1px solid var(--line); }
.smac .smac-perks li:first-child { padding-left: 0; }
.smac-perks svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--t1); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.smac-perks div { display: flex; flex-direction: column; min-width: 0; }
.smac-perks strong { font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--t1) !important; }
.smac-perks span { font-size: 12px; line-height: 1.35; color: var(--t3) !important; }
@media (max-width: 900px) {
	/* Strip satu baris yang bisa digeser, selebar layar. */
	.smac .smac-perks { display: flex; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--gl, 22px)) !important; margin-right: calc(-1 * var(--gr, 22px)) !important; padding: 0 var(--gr, 22px) 0 var(--gl, 22px) !important; scroll-padding: 0 var(--gl, 22px); }
	.smac .smac-perks::-webkit-scrollbar { display: none; }
	.smac .smac-perks li { flex: none; padding: 14px 18px; }
	.smac-perks strong, .smac-perks span { white-space: nowrap; }
}

/* ---------- Units ---------- */
.smac-units { padding-top: 64px; }
.smac .smac-h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -0.003em; }
.smac .smac-h3 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; font-weight: 600; }
.smac .smac-sub { margin: 10px 0 28px; font-size: 19px; color: var(--t3) !important; }
.smac-loading { color: var(--t3) !important; padding: 48px 0; }

.smac-filters { position: sticky; top: var(--smac-top, 0px); z-index: 3; background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); margin-left: calc(-1 * var(--gl, 22px)); margin-right: calc(-1 * var(--gr, 22px)); padding: 12px var(--gr, 22px) 12px var(--gl, 22px); display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line); }
.smac-frow { display: flex; gap: 10px; align-items: center; overflow-x: auto; scrollbar-width: none; margin: -5px calc(-1 * var(--gr, 22px)) -5px calc(-1 * var(--gl, 22px)); padding: 5px var(--gr, 22px) 5px var(--gl, 22px); }
.smac-frow::-webkit-scrollbar { display: none; }
.smac-frow .smac-count { margin-left: auto; padding-left: 12px; font-size: 14px; color: var(--t3) !important; white-space: nowrap; }
.smac-seg { flex: none; display: inline-flex; gap: 2px; padding: 2px; background: var(--seg); border-radius: 10px; white-space: nowrap; }
.smac .smac-seg button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; color: var(--t1) !important; font-size: 14px; font-weight: 400; cursor: pointer; box-shadow: none; }
.smac .smac-seg button[aria-checked="true"] { background: #fff; font-weight: 600; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); }
.smac .smac-seg button:disabled { opacity: .35; cursor: default; }
/* Segmen 3 pilihan di layar sempit: teks boleh 2 baris, tidak terpotong; tinggi sentuh 44px (HIG). */
.smac-seg.smac-seg--fill { display: grid; white-space: normal; }
.smac .smac-seg--fill button { min-height: 44px; padding: 6px 8px; line-height: 1.2; text-align: center; }
.smac .smac-toggle { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 980px; border: 1px solid var(--line); background: #fff; color: var(--t1) !important; font-size: 14px; cursor: pointer; white-space: nowrap; }
.smac .smac-toggle[aria-pressed="true"] { background: var(--t1); border-color: var(--t1); color: #fff !important; font-weight: 600; }
.smac-toggle i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot-green); }

.smac-group { padding-top: 40px; }
.smac-ghead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.smac .smac-ghead h3 { font-size: 28px; line-height: 1.14; font-weight: 600; letter-spacing: .007em; }
.smac-ghead p { font-size: 14px; color: var(--t3) !important; }
.smac-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .smac-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 640px) { .smac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

.smac-card { display: flex; flex-direction: column; background: var(--fill); border-radius: 18px; padding: 24px 20px 20px; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s; }
.smac-card.is-sel { box-shadow: inset 0 0 0 2px var(--blue); }
.smac-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.smac-avail { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin: 0 !important; }
.smac .smac-yr { font-size: 12px; color: var(--t3) !important; font-variant-numeric: tabular-nums; }
.smac-avail i { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.smac-avail.ok { color: var(--green) !important; } .smac-avail.ok i { background: var(--dot-green); }
.smac-avail.low { color: var(--orange) !important; } .smac-avail.low i { background: var(--dot-orange); }
.smac-avail.out { color: var(--t3) !important; } .smac-avail.out i { background: #aeaeb2; }
/* Panggung gambar: rasio 4:3 selebar kartu, foto berlatar putih menyatu dengan kartu (multiply). */
.smac-art { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; margin: 0 -4px; overflow: hidden; }
.smac-art > .smac-ill { display: flex; flex-direction: column; align-items: center; transform: scale(1.45); transform-origin: 50% 60%; }
.smac-card.is-out .smac-art { opacity: .45; filter: grayscale(1); }
/* Foto: efek abu-abu di gambar itu sendiri agar multiply tetap menyatu (filter di wadah akan memunculkan kotak putih). */
.smac-card.is-out .smac-art.has-img { opacity: 1; filter: none; }
.smac-card.is-out .smac-art.has-img img { opacity: .45; filter: grayscale(1); }
.smac-art.has-img img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.25, .1, .25, 1); }
.smac-art.is-cut img { width: 92%; height: 92%; }
@media (hover: hover) { .smac-card:not(.is-out) .smac-art.has-img:not(.smac-gal):hover img { transform: scale(1.04); } }

/* Galeri 3 foto: geser, panah (muncul saat kursor di atas foto), titik ala iOS. Tanpa slide otomatis. */
.smac-gal { display: block; overflow: hidden; }
.smac-gal-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.smac-gal-track::-webkit-scrollbar { display: none; }
.smac-gal-s { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; height: 100%; padding-bottom: 14px; box-sizing: border-box; scroll-snap-align: center; scroll-snap-stop: always; }
.smac-art.smac-gal img { width: 100%; height: 100%; }
.smac-gal-s.is-cut img { width: 88%; height: 88%; }
.smac-gal-dots { position: absolute; left: 50%; bottom: 2px; display: flex; gap: 2px; transform: translateX(-50%); }
.smac-gal-dots button { position: relative; width: 16px; height: 16px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.smac-gal-dots button::before { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .2); transform: translate(-50%, -50%); transition: width .3s cubic-bezier(.25, .1, .25, 1), background-color .3s; }
.smac-gal-dots button[aria-current]::before { width: 14px; background: rgba(0, 0, 0, .72); }
.smac-gal-dots button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 8px; }
.smac-gal-nav { position: absolute; top: calc(50% - 7px); z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .06); color: var(--t1); cursor: pointer; opacity: 0; transition: opacity .2s, transform .2s; }
.smac-gal-nav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.smac-gal-nav.is-prev { left: 6px; } .smac-gal-nav.is-prev svg { transform: scaleX(-1); }
.smac-gal-nav.is-next { right: 6px; }
.smac-gal-nav:active { transform: scale(.92); }
.smac-gal-nav[disabled] { opacity: 0 !important; pointer-events: none; }
.smac-gal-nav:focus-visible { opacity: 1; outline: 2px solid var(--blue); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .smac-gal:hover .smac-gal-nav { opacity: 1; } }
.smac-card.is-out .smac-gal-s img { opacity: .45; filter: grayscale(1); }
.smac-card.is-out .smac-gal-dots, .smac-card.is-out .smac-gal-nav { filter: none; }
@media (max-width: 640px) { .smac-art { margin: 0 -6px; } .smac-art > .smac-ill { transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .smac-art.has-img img { transition: none; } }
.smac-scr { box-sizing: border-box; padding: 3px; background: var(--t1); border-radius: 6px 6px 2px 2px; }
.smac-scr i { display: block; width: 100%; height: 100%; border-radius: 2px; }
.smac-base { height: 5px; background: linear-gradient(#e3e3e6, #b9b9be); border-radius: 0 0 6px 6px; }
.smac .smac-card h3 { margin-top: 14px; font-size: 17px; line-height: 1.24; font-weight: 600; letter-spacing: -.022em; text-wrap: balance; }
.smac .smac-var { font-size: 14px; line-height: 1.35; color: var(--t3) !important; margin: 3px 0 0 !important; }
.smac .smac-spec { font-size: 14px; line-height: 1.4; color: var(--t3) !important; margin: 8px 0 0 !important; }
.smac .smac-pb { margin-top: auto; padding-top: 18px; }
.smac .smac-price { font-size: 19px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; margin: 0 !important; font-variant-numeric: tabular-nums; }
.smac .smac-price .smac-from { font-size: 12px; font-weight: 400; color: var(--t3) !important; letter-spacing: 0; margin-right: 1px; }
.smac-price small, .smac-big small { font-size: 12px; font-weight: 400; color: var(--t3) !important; letter-spacing: 0; }
.smac .smac-week { font-size: 14px; line-height: 1.35; color: var(--t3) !important; margin: 3px 0 0 !important; font-variant-numeric: tabular-nums; }
.smac .smac-card.is-out .smac-price { color: var(--t2) !important; }
.smac .smac-pick { margin-top: 14px; min-height: 44px; width: 100%; border-radius: 980px; border: 0; background: var(--blue); color: #fff !important; font-size: 14px; cursor: pointer; }
.smac .smac-pick:hover { background: #0077ed; }
.smac .smac-card.is-sel .smac-pick { background: var(--t1); }
.smac .smac-ask { margin-top: 14px; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 980px; border: 1px solid var(--blue); color: var(--link) !important; background: #fff; font-size: 14px; }
.smac-empty { text-align: center; color: var(--t3) !important; padding: 64px 0; }

/* ---------- Steps & terms ---------- */
.smac-steps { padding-top: 88px; }
#cara-sewa { scroll-margin-top: -40px; } /* judul tidak terlalu jauh dari atas layar saat dibuka dari menu */
.smac-steps ol { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-top: 28px !important; }
.smac-steps li { background: var(--fill); border-radius: 18px; padding: 26px; margin: 0; }
.smac-steps li span { font-size: 12px; font-weight: 600; color: var(--t3) !important; }
.smac-steps li strong { display: block; margin-top: 8px; font-size: 19px; font-weight: 600; }
.smac-steps li p { margin-top: 6px; font-size: 14px; line-height: 1.43; color: var(--t3) !important; }
.smac-terms { padding: 88px 0 120px; }
.smac-terms .smac-sub { margin-bottom: 28px; font-size: 17px; }
.smac-terms details { border-top: 1px solid var(--line); }
.smac-terms details:last-of-type { border-bottom: 1px solid var(--line); }
.smac-terms summary { cursor: pointer; padding: 22px 0; font-size: 21px; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.smac-terms summary::-webkit-details-marker { display: none; }
.smac-terms summary::marker { content: ""; }
/* Chevron seperti di apple.com: menunjuk ke bawah, berputar saat dibuka. */
.smac-terms summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid var(--t3); border-bottom: 2px solid var(--t3); transform: translateY(-3px) rotate(45deg); transition: transform .25s ease; }
.smac-terms details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.smac-terms summary:hover::after { border-color: var(--t1); }
@media (prefers-reduced-motion: reduce) { .smac-terms summary::after { transition: none; } }
.smac-terms dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px 32px; margin-bottom: 24px; }
.smac-terms dt { font-weight: 600; }
.smac-terms dd { margin-top: 2px; color: var(--t2) !important; }
.smac .smac-maplink { display: flex; width: fit-content; align-items: center; gap: 4px; min-height: 44px; margin: 2px 0 -10px; font-size: 17px; color: var(--link) !important; text-decoration: none !important; }
.smac .smac-maplink::after { content: ""; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 2px; }
.smac .smac-maplink .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.smac .smac-maplink:hover { text-decoration: underline !important; }
.smac .smac-maplink:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.smac-terms ul { padding-left: 20px; display: grid; gap: 10px; margin-bottom: 24px; color: var(--t2) !important; }
.smac-note { margin: -8px 0 24px !important; font-size: 14px; color: var(--t3) !important; }

/* ---------- Halaman servis ---------- */
.smac.smac-svcpage { max-width: 1184px; --gl: 22px; --gr: 22px; } /* sejajar header (isi 1140 px) */
@media (max-width: 833px) { .smac.smac-svcpage { --gl: 16px; --gr: 16px; } }
.smac-svc { padding-top: 88px; }

.smac .smac-svc-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr)); gap: 12px; margin: 0 !important; padding: 0 !important; }
.smac-svc-grid li { display: flex; flex-direction: column; margin: 0; padding: 24px 24px 12px; border-radius: 18px; background: var(--fill); }
.smac-svc-grid svg { width: 32px; height: 32px; fill: none; stroke: var(--t1); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.smac .smac-svc-grid h3 { margin-top: 16px; font-size: 19px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; }
.smac .smac-svc-grid p { flex: 1; margin-top: 6px; font-size: 14px; line-height: 1.43; letter-spacing: -.016em; color: var(--t3) !important; }
.smac .smac-svc-grid .smac-maplink { margin: 4px 0 0; font-size: 14px; }
.smac-svcloc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: start; padding-top: 88px; }
.smac-svcloc dl { display: grid; gap: 14px; margin-top: 20px; }
.smac-svcloc dt { font-weight: 600; }
.smac-svcloc dd { margin-top: 2px; color: var(--t2) !important; }
.smac-svcx { padding: 24px 24px 12px; border-radius: 18px; background: var(--fill); }
.smac-svcx strong { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.smac .smac-svcx p { margin-top: 6px; font-size: 14px; line-height: 1.43; color: var(--t3) !important; }
.smac .smac-svcx .smac-maplink { margin: 4px 0 0; font-size: 14px; }
.smac-svcpage .smac-terms { padding-bottom: 24px; }
.smac .smac-note a { color: var(--link) !important; text-decoration: underline !important; }
.smac-svcend { margin-bottom: 96px; padding: 48px 24px; border-radius: 18px; background: var(--fill); text-align: center; }
.smac .smac-svcend p { margin: 8px auto 20px; max-width: 460px; color: var(--t3) !important; }
@media (max-width: 700px) {
	.smac-svc, .smac-svcloc { padding-top: 64px; }
	.smac-svcloc { grid-template-columns: 1fr; }
	.smac-svcend { margin-bottom: 64px; padding: 40px 20px; }
	/* Kartu layanan jadi baris ringkas: ikon di kiri, teks di kanan. */
	.smac .smac-svc-grid { gap: 8px; }
	.smac-svc-grid li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; padding: 16px 18px 6px; border-radius: 14px; }
	.smac-svc-grid svg { grid-row: span 3; width: 28px; height: 28px; }
	.smac .smac-svc-grid h3 { margin-top: 2px; font-size: 17px; }
	.smac .smac-svc-grid p { margin-top: 2px; }
	.smac .smac-svc-grid .smac-maplink { margin: 0; }
}

/* ---------- Halaman Syarat & Ketentuan Sewa (gaya sama dengan beranda /sewa) ---------- */
.smac .smac-legal-date { margin-top: 12px; font-size: 14px; color: var(--t3) !important; }
.smac-legal .smac-perks { margin-top: 40px; }
.smac-legal .smac-terms { padding-bottom: 24px; }
.smac-legal .smac-terms dd a { color: var(--link) !important; text-decoration: underline !important; }
.smac .smac-svcend .smac-ctas { max-width: none; margin: 0; justify-content: center; }

/* ---------- Halaman dokumen (Kebijakan Privasi, S&K Servis) & 404 ---------- */
.smac-doc .smac-hero { padding-bottom: 8px; }
.smac-prose { max-width: 760px; margin: 0 auto; padding: 32px 0 96px; color: var(--t2) !important; font-size: 17px; line-height: 1.53; letter-spacing: -.022em; }
.smac .smac-prose h2 { margin: 48px 0 12px; font-size: 24px; line-height: 1.17; font-weight: 600; letter-spacing: -.012em; color: var(--t1) !important; }
.smac .smac-prose h3 { margin: 28px 0 8px; font-size: 19px; line-height: 1.21; font-weight: 600; letter-spacing: -.02em; color: var(--t1) !important; }
.smac .smac-prose p { margin: 0 0 14px; }
.smac .smac-prose ul, .smac .smac-prose ol { margin: 0 0 16px; padding-left: 1.25em; }
.smac .smac-prose li { margin: 0 0 8px; padding-left: 2px; }
.smac .smac-prose strong { font-weight: 600; color: var(--t1) !important; }
.smac .smac-prose a { color: var(--link) !important; text-decoration: underline !important; text-underline-offset: 2px; }
.smac-prose > :first-child { margin-top: 0; }
.smac-doc .smac-hero:only-child { padding-bottom: 120px; }
@media (max-width: 700px) {
	.smac-prose { padding: 24px 0 64px; }
	.smac .smac-prose h2 { margin-top: 40px; font-size: 21px; }
	.smac .smac-prose h3 { font-size: 17px; }
}

/* ---------- Bottom bar ---------- */
/* Bilah "Lanjutkan" (gaya ringkasan beli Apple Store): kaca buram, ringkas, satu baris di HP. */
.smac-bar { position: sticky; bottom: 0; z-index: 4; margin: 0 calc(-1 * var(--gr, 22px)) 0 calc(-1 * var(--gl, 22px)); background: rgba(255,255,255,.78); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: inset 0 .5px 0 rgba(0,0,0,.16); }
.smac-bar-in { display: flex; align-items: center; gap: 24px; min-height: 76px; padding: 12px var(--gr, 22px) calc(12px + env(safe-area-inset-bottom, 0px)) var(--gl, 22px); }
.smac-bar-info { flex: 1; min-width: 0; }
.smac .smac-bar-info strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.022em; color: var(--t1) !important; }
.smac .smac-bar-info span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 2px; font-size: 14px; line-height: 1.35; letter-spacing: -.016em; color: var(--t3) !important; }
.smac .smac-bar-info .m { display: none; }
.smac-bar-act { flex: none; display: flex; align-items: center; gap: 20px; }
.smac-bar-price { text-align: right; line-height: 1.25; }
.smac .smac-bar-price b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.022em; color: var(--t1) !important; white-space: nowrap; }
.smac .smac-bar-price small { display: block; margin-top: 2px; font-size: 12px; color: var(--t3) !important; white-space: nowrap; }
.smac .smac-bar .smac-cta { min-height: 44px; padding: 0 24px; font-size: 17px; letter-spacing: -.022em; }
body.smac-bar-on .jscroll-to-top { bottom: calc(var(--smac-barh, 0px) + 16px) !important; transition: bottom .25s ease; }
@media (max-width: 640px) {
	.smac-bar-in { gap: 12px; min-height: 64px; padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
	.smac .smac-bar-info strong { font-size: 15px; letter-spacing: -.016em; }
	.smac .smac-bar-info span { font-size: 13px; letter-spacing: -.008em; }
	.smac .smac-bar-info .d { display: none; } .smac .smac-bar-info .m { display: block; }
	.smac-bar-price { display: none; }
	.smac .smac-bar .smac-cta { padding: 0 18px; font-size: 16px; }
}

/* ---------- Sheet ---------- */
.smac-sheet-wrap { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; }
.smac-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.32); opacity: 0; transition: opacity .3s; }
.smac-sheet { position: relative; width: 100%; max-width: 760px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.18); transform: translateY(100%); transition: transform .32s cubic-bezier(.32,.72,0,1); outline: none; will-change: transform; contain: layout paint; }
/* Desktop: dialog di tengah layar, muncul cepat (pudar + sedikit membesar) seperti di apple.com. */
@media (min-width: 768px) {
	.smac-sheet-wrap { align-items: center; padding: 24px; }
	.smac-sheet { max-height: min(88vh, 900px); border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.22); transform: translateY(12px) scale(.98); opacity: 0; transition: transform .24s cubic-bezier(.32,.72,0,1), opacity .18s ease-out; will-change: transform, opacity; }
	.smac-sheet-wrap.is-open .smac-sheet { opacity: 1; }
	.smac-scrim { transition: opacity .2s; }
	.smac-grab { display: none; }
	.smac-sheet .smac-shead { padding-top: 18px; }
}
.smac-sheet-wrap.is-open .smac-scrim { opacity: 1; }
.smac-sheet-wrap.is-open .smac-sheet { transform: none; }
.smac-shead { position: sticky; top: 0; z-index: 2; background: #fff; padding: 10px 24px 14px; border-bottom: 1px solid #e8e8ed; }
.smac-grab { width: 36px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; }
.smac-srow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.smac-stitle { display: flex; gap: 4px; align-items: flex-start; min-width: 0; }
.smac-stitle p { font-size: 12px; font-weight: 600; color: var(--t3) !important; }
.smac .smac-stitle h2 { margin-top: 2px; font-size: 24px; line-height: 1.17; font-weight: 600; }
.smac .smac-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--link) !important; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.smac .smac-icon.close { background: #e8e8ed; color: var(--t1) !important; margin: -4px -6px 0 0; }
.smac-icon svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.smac-prog { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 8px; margin-top: 14px !important; }
.smac-prog li { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--t3) !important; margin: 0; }
.smac-prog li::before { content: ""; height: 4px; border-radius: 2px; background: var(--line); }
.smac-prog li.on, .smac-prog li.done { color: var(--t2) !important; }
.smac-prog li.on { color: var(--t1) !important; font-weight: 600; }
.smac-prog li.on::before, .smac-prog li.done::before { background: var(--blue); }

.smac-sbody { padding: 24px; display: grid; gap: 36px; }
.smac .smac-sbody h3 { font-size: 19px; font-weight: 600; margin-bottom: 4px; }
.smac-hint { font-size: 14px; line-height: 1.43; color: var(--t3) !important; margin-bottom: 14px !important; }
.smac-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.smac .smac-opt { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 60px; padding: 8px 16px; text-align: left; color: var(--t1) !important; background: #fff; cursor: pointer; border-radius: 12px; border: 1px solid #86868b; font-size: 17px; font-weight: 600; }
.smac .smac-opt small { font-size: 12px; font-weight: 400; color: var(--t3) !important; }
.smac .smac-opt[aria-checked="true"] { border: 2px solid var(--blue); padding: 7px 15px; }
.smac .smac-opt:disabled { opacity: .4; cursor: not-allowed; background: var(--fill); }

.smac-field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--t2) !important; }
.smac .smac-in { width: 100%; height: 52px; margin: 0; padding: 0 14px; border: 1px solid #86868b; border-radius: 12px; font: inherit; font-size: 17px; color: var(--t1) !important; background: #fff; box-shadow: none; -webkit-appearance: none; appearance: none; }
.smac textarea.smac-in { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.4; }
.smac .smac-in:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,125,250,.35); outline: none; }
.smac .smac-in.bad { border-color: var(--red); background: #fff5f5; }
.smac-pre { position: relative; display: block; }
.smac-pre b { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 17px; font-weight: 400; color: var(--t1) !important; pointer-events: none; }
.smac .smac-pre .smac-in { padding-left: 50px; letter-spacing: .02em; }
.smac-err { margin-top: 6px !important; font-size: 13px; color: var(--red) !important; }
.smac-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px 14px; }
.smac-stack { display: grid; gap: 14px; }

.smac-stepper { display: inline-flex; align-items: center; border: 1px solid #86868b; border-radius: 12px; height: 52px; }
.smac .smac-stepper button { width: 52px; height: 50px; border: 0; background: transparent; font-size: 22px; color: var(--link) !important; cursor: pointer; }
.smac-stepper output { min-width: 84px; text-align: center; font-size: 17px; font-weight: 600; }
.smac-sbody > * { min-width: 0; }
.smac-dur { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
.smac-pills { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; min-width: 0; flex: 1 1 320px; max-width: 440px; padding: 2px; border-radius: 10px; background: var(--seg); }
@media (max-width: 640px) { .smac-dur .smac-stepper { width: 100%; justify-content: space-between; } .smac-pills { flex: 1 1 100%; max-width: none; } }
.smac .smac-info.is-err { color: #d70015 !important; background: #fff2f2; }
/* Pilihan cepat durasi: kontrol segmen (HIG), sama seperti "Diantar | Ambil sendiri". */
.smac .smac-pill { min-width: 0; min-height: 40px; padding: 0 2px; border: 0; border-radius: 8px; background: transparent; color: var(--t1) !important; font-size: 14px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; box-shadow: none; }
.smac .smac-pill[aria-pressed="true"] { background: #fff; font-weight: 600; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); }
.smac .smac-loc { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 980px; border: 1px solid var(--line); background: #fff; color: var(--link) !important; font-size: 15px; cursor: pointer; }
.smac-loc svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.smac-ac { position: relative; }
.smac-sug { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; list-style: none; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.06); overflow: hidden; }
.smac-sug li { padding: 12px 16px; cursor: pointer; margin: 0; border-top: 1px solid #f0f0f2; }
.smac-sug li:first-child { border-top: 0; }
.smac-sug li[aria-selected="true"], .smac-sug li:hover { background: var(--fill); }
.smac-sug strong { display: block; font-size: 15px; font-weight: 600; }
.smac-sug span { font-size: 12px; color: var(--t3) !important; }
.smac-place { margin-top: 14px; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--fill); }
.smac-place svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.smac-place strong { display: block; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.smac-place span { font-size: 14px; color: var(--t3) !important; }
.smac-info { margin-top: 14px !important; padding: 14px 16px; border-radius: 12px; background: var(--fill); font-size: 14px; line-height: 1.47; color: var(--t2) !important; }

.smac-cost { background: var(--fill); border-radius: 18px; padding: 20px 22px; }
.smac-cost.line { background: #fff; border: 1px solid var(--line); }
.smac-cost dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: 17px; }
.smac-cost dt { color: var(--t2) !important; } .smac-cost dd { text-align: right; white-space: nowrap; }
.smac-cost dt small { display: block; margin-top: 1px; font-size: 13px; color: var(--t3); }
.smac-cost dd.muted { color: var(--t3) !important; white-space: normal; font-size: 15px; }
.smac-total b { text-align: right; white-space: nowrap; } .smac-total b small { display: block; font-size: 13px; font-weight: 400; color: var(--t3); }
.smac-save { margin-top: 10px !important; font-size: 12px; color: var(--green) !important; }
.smac-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.smac-total strong { font-size: 17px; } .smac-total b { font-size: 24px; font-weight: 600; }
.smac-fine { margin-top: 12px !important; font-size: 12px; line-height: 1.5; color: var(--t3) !important; }
.smac-check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.43; cursor: pointer; }
.smac .smac-check input[type="checkbox"] { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 22px; min-width: 22px; max-width: 22px; height: 22px; padding: 0; margin: 0; flex: none; border: 1.5px solid #86868b; border-radius: 6px; background: #fff center / 14px no-repeat; cursor: pointer; transition: background-color .15s, border-color .15s; }
.smac .smac-check input[type="checkbox"]:checked { background-color: var(--blue); border-color: var(--blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.3l2.6 2.6L11 4.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.smac .smac-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.smac .smac-check.bad input[type="checkbox"] { border-color: #d70015; box-shadow: 0 0 0 3px rgba(215,0,21,.12); }
.smac .smac-check { min-height: 44px; }
.smac .smac-review > .smac-err { margin-top: -10px !important; padding-left: 34px; }
.smac-check a { color: var(--link) !important; text-decoration: underline; }
.smac-review { display: grid; gap: 20px; }
.smac-rcard { background: var(--fill); border-radius: 18px; padding: 18px 22px; }
.smac-rhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.smac .smac-rhead h3 { margin: 0; font-size: 17px; }
.smac .smac-link { min-height: 36px; padding: 0 4px; border: 0; background: transparent; color: var(--link) !important; font-size: 15px; cursor: pointer; }
.smac-rcard dl { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 8px 16px; font-size: 17px; line-height: 1.4; }
.smac-rcard dt { color: var(--t3) !important; } .smac-rcard dd { overflow-wrap: anywhere; }
.smac-alert { padding: 14px 16px; border-radius: 12px; background: #fff5f5; color: var(--red) !important; font-size: 15px; }

.smac-sfoot { position: sticky; bottom: 0; background: #fff; border-top: 1px solid #e8e8ed; padding: 14px 24px 18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.smac-sfoot { flex-wrap: nowrap !important; }
.smac-sfoot > div { flex: 1; min-width: 0; }
.smac-sfoot > .smac-cta { flex: none; }
.smac-sfoot p { font-size: 13px; color: var(--t3) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smac-sfoot p.bad { color: var(--red) !important; }
.smac-big { font-size: 21px; font-weight: 600; letter-spacing: .011em; }
.smac .smac-cta { min-height: 48px; padding: 0 28px; border-radius: 980px; border: 0; background: var(--blue); color: #fff !important; font-size: 17px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.smac .smac-cta:hover { background: #0077ed; color: #fff !important; }
.smac .smac-cta:disabled { background: #e8e8ed; color: var(--t3) !important; cursor: default; }
.smac .smac-cta.is-busy { opacity: .7; cursor: progress; }

.smac-done { padding: 40px 24px 36px; text-align: center; }
.smac-done > svg { width: 72px; height: 72px; margin: 0 auto 20px; fill: none; stroke: var(--dot-green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.smac .smac-done h3 { font-size: 32px; line-height: 1.125; font-weight: 600; }
.smac-done .code { margin-top: 10px !important; color: var(--t3) !important; }
.smac-done .code strong { color: var(--t1) !important; }
.smac-done .box { max-width: 460px; margin: 28px auto 0 !important; text-align: left; background: var(--fill); border-radius: 18px; padding: 18px 22px; }
.smac-done .box b { display: block; font-size: 12px; color: var(--orange) !important; }
.smac-done .box span { font-size: 15px; }
.smac-done .smac-cta { margin-top: 24px; min-height: 52px; text-decoration: none; }
.smac-done .smac-cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.smac-done .adm { margin-top: 14px !important; font-size: 12px; color: var(--t3) !important; }
.smac .smac-finish { margin-top: 18px; min-height: 44px; padding: 0 16px; border: 0; background: transparent; color: var(--link) !important; font-size: 17px; cursor: pointer; }
.smac .smac-finish:disabled { color: #86868b !important; cursor: not-allowed; }
.smac-done .lock { margin-top: 4px !important; font-size: 12px; color: var(--t3) !important; }

body.smac-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.smac-sheet, .smac-scrim { transition: none; }
}

/* Panel dipindah ke <body>: jangan warisi lebar/padding .smac */
.smac.smac-aligned { max-width: none; margin-right: 0; }
.smac.smac-sheet-wrap { max-width: none; margin: 0; padding: 0; }
.smac-sheet > div:nth-child(2):not(.smac-sbody) { padding: 0; }
.smac-nw { white-space: nowrap; }
@media (max-width: 430px) { .smac .smac-price { font-size: 17px; } .smac .smac-card { padding: 20px 16px 16px; } }
.smac-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.smac .smac-ysel { position: relative; flex: none; display: inline-flex; align-items: center; margin: 0; }
.smac .smac-ysel select { -webkit-appearance: none; appearance: none; min-height: 36px; height: 36px; margin: 0; padding: 0 34px 0 14px; border: 1px solid var(--line); border-radius: 980px; background: #fff; color: var(--t1) !important; font: inherit; font-size: 14px; line-height: 34px; cursor: pointer; box-shadow: none; width: auto; max-width: none; font-variant-numeric: tabular-nums; }
.smac .smac-ysel select:hover { border-color: #86868b; }
.smac .smac-ysel select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.smac .smac-seg button:focus-visible, .smac .smac-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.smac .smac-ysel svg { position: absolute; right: 13px; top: 50%; width: 12px; height: 12px; margin-top: -6px; fill: none; stroke: var(--t3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.smac .smac-ghead h3:focus { outline: none; }
@media (max-width: 640px) { .smac .smac-ysel { order: -1; } }
@media (max-width: 430px) { .smac .smac-week { font-size: 13px; white-space: nowrap; letter-spacing: -.01em; } }
.smac [data-list] > .smac-grid { margin-top: 28px; }
.smac .smac-card h3:focus { outline: none; }
.smac .smac-ysel.is-on select { background: var(--t1); border-color: var(--t1); color: #fff !important; font-weight: 600; }
.smac .smac-ysel.is-on svg { stroke: #fff; }
.smac .smac-ysel option { color: var(--t1); background: #fff; font-weight: 400; }
.smac .smac-ysel option:disabled { color: #aeaeb2; }

/* ===================================================================== */
/* Filter mobile: kapsul mengambang (bawah) + lembar filter               */
/* ===================================================================== */
.smac-mmeta, .smac-fab { display: none; }
@media (max-width: 640px) {
	.smac .smac-filters { display: none; }
	.smac .smac-mmeta { display: block; margin: 0 0 14px !important; font-size: 14px; color: var(--t3) !important; }
	.smac [data-list] > .smac-grid { margin-top: 0; }
	.smac-units { padding-bottom: 72px; }

	.smac-fab { display: flex; position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px + var(--smac-barh, 0px)); z-index: 90; justify-content: center; pointer-events: none; transform: translateY(calc(100% + 40px)); opacity: 0; transition: transform .45s cubic-bezier(.32,.72,0,1), opacity .25s; }
	.smac-fab.is-shown { transform: none; opacity: 1; }
	.smac-fab-in { pointer-events: auto; display: flex; align-items: center; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.78); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 8px 28px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.06); }
	/* Kapsul ringkas ala tab bar Instagram/iOS: tinggi tampak 36px, area sentuh tetap ±44px lewat ::before. */
	.smac .smac-fab-in button { position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: var(--t1) !important; font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s; }
	.smac .smac-fab-in button:active { background: rgba(0,0,0,.06); }
	.smac .smac-fab-in button::before { content: ""; position: absolute; inset: -4px 0; }
	.smac-fab-in svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
	.smac-fab-in i { width: 1px; height: 16px; background: rgba(0,0,0,.14); }
	.smac-fab-in b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--blue); color: #fff; font-size: 11px; line-height: 18px; font-weight: 600; text-align: center; }
	.smac-bar { z-index: 91; }
}

/* Lembar filter */
.smac-fwrap .smac-fsheet { display: flex; flex-direction: column; max-height: 86vh; max-height: 86dvh; overflow: hidden; }
.smac-fhead { flex: none; padding: 8px 16px 10px; border-bottom: 1px solid #e8e8ed; }
.smac-frow2 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.smac .smac-frow2 h2 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; text-align: center; }
.smac .smac-flink { justify-self: start; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--link) !important; font: inherit; font-size: 17px; cursor: pointer; }
.smac .smac-flink:disabled { color: #c7c7cc !important; cursor: default; }
.smac .smac-fclose { justify-self: end; width: 30px; height: 30px; margin: 7px 0; border: 0; border-radius: 50%; background: rgba(118,118,128,.12); color: #6e6e73 !important; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.smac-fclose svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.smac-fbody { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 20px 8px !important; }
.smac-fbody section { padding: 18px 0 4px; }
.smac .smac-fbody h3 { margin: 0 0 10px; font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--t3) !important; letter-spacing: -0.003em; text-transform: none; }

.smac-mseg { display: grid; gap: 2px; padding: 2px; background: var(--seg); border-radius: 9px; }
.smac .smac-mseg button { min-height: 36px; padding: 0 6px; border: 0; border-radius: 7px; background: transparent; color: var(--t1) !important; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-tap-highlight-color: transparent; }
.smac .smac-mseg button[aria-checked="true"] { background: #fff; font-weight: 600; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); }
.smac .smac-mseg button:disabled { opacity: .35; cursor: default; }

.smac-mlist { border-radius: 12px; background: var(--fill); overflow: hidden; }
.smac .smac-mlist button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; background: transparent; color: var(--t1) !important; font: inherit; font-size: 17px; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; }
.smac .smac-mlist button + button::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: 1px; background: #e3e3e8; }
.smac .smac-mlist button:active { background: rgba(0,0,0,.05); }
.smac-mlist span { flex: 1; }
.smac .smac-mlist em { font-style: normal; font-size: 15px; color: var(--t3) !important; font-variant-numeric: tabular-nums; }
.smac-mlist svg, .smac-mlist i { flex: none; width: 20px; height: 20px; }
.smac-mlist svg { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.smac .smac-mlist button[aria-checked="true"] span { font-weight: 600; }
.smac .smac-mlist button:disabled { opacity: .35; cursor: default; }

.smac-mchips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.smac .smac-mchips button { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--t1) !important; font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s; }
.smac .smac-mchips button[aria-checked="true"] { background: var(--t1); border-color: var(--t1); color: #fff !important; font-weight: 600; }

.smac-mswitch { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--fill); cursor: pointer; position: relative; }
.smac-mswitch span { flex: 1; display: flex; flex-direction: column; }
.smac .smac-mswitch strong { font-size: 17px; font-weight: 400; color: var(--t1) !important; }
.smac .smac-mswitch small { font-size: 13px; color: var(--t3) !important; }
.smac-mswitch input { position: absolute; opacity: 0; width: 51px; height: 31px; right: 16px; margin: 0; cursor: pointer; }
.smac-mswitch i { flex: none; width: 51px; height: 31px; border-radius: 16px; background: #e9e9ea; position: relative; transition: background .2s; }
.smac-mswitch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06); transition: transform .25s cubic-bezier(.32,.72,0,1); }
.smac-mswitch input:checked + i { background: #34c759; }
.smac-mswitch input:checked + i::after { transform: translateX(20px); }
.smac-mswitch input:focus-visible + i { outline: 2px solid var(--blue); outline-offset: 2px; }

.smac-ffoot { flex: none; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e8e8ed; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.smac .smac-fapply { width: 100%; min-height: 50px; border: 0; border-radius: 12px; background: var(--blue); color: #fff !important; font: inherit; font-size: 17px; font-weight: 600; letter-spacing: -0.022em; cursor: pointer; }
.smac .smac-fapply:active { background: #006edb; }
.smac .smac-fapply:disabled { background: #e8e8ed; color: #8e8e93 !important; cursor: default; }
@media (prefers-reduced-motion: reduce) { .smac-fab, .smac-mswitch i, .smac-mswitch i::after { transition: none; } }

/* Draf dipulihkan & layar selesai (lanjut verifikasi) */
.smac .smac-info { padding: 12px 16px !important; }
.smac .smac-restored { margin: 0 0 4px !important; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.smac .smac-restored .smac-link { min-height: 32px; font-size: 14px; }
.smac-done .adm a { color: var(--link) !important; text-decoration: underline; }

/* ==========================================================================
   Pendukung keputusan: lencana, cocok untuk, hemat, sewa atau beli, FAQ
   ========================================================================== */
.smac .smac-badge { align-self: flex-start; margin: 14px 0 -10px !important; padding: 3px 8px; border-radius: 6px; background: #fff; color: var(--orange) !important; font-size: 12px; font-weight: 600; line-height: 1.33; letter-spacing: -.01em; }
.smac .smac-fit { margin: 8px 0 0 !important; font-size: 12px; line-height: 1.33; color: var(--t3) !important; letter-spacing: -.01em; }
.smac .smac-save { margin: 4px 0 0 !important; font-size: 12px; font-weight: 600; line-height: 1.33; color: var(--green) !important; letter-spacing: -.01em; }
.smac .smac-card.is-out .smac-save { color: var(--t3) !important; }

.smac-vs { padding-top: 88px; }
.smac-vs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.smac-vs-col { padding: 32px 32px 28px; border-radius: 18px; background: var(--fill); }
.smac-vs-col.is-rent { background: #fff; box-shadow: inset 0 0 0 2px var(--blue); }
.smac .smac-vs-k { margin: 0 0 14px !important; font-size: 19px; font-weight: 600; line-height: 1.21; letter-spacing: .012em; }
.smac-vs ul { display: grid; gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none; }
.smac-vs li { position: relative; margin: 0; padding-left: 26px; font-size: 17px; line-height: 1.47; color: var(--t2) !important; }
.smac-vs li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 12px; height: 7px; border-left: 2px solid var(--t3); border-bottom: 2px solid var(--t3); transform: rotate(-45deg); }
.smac-vs-col.is-rent li::before { border-color: var(--blue); }
.smac .smac-vs-price { margin: 20px 0 0 !important; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.43; color: var(--t3) !important; }
.smac .smac-vs-price strong { color: var(--t1) !important; font-weight: 600; }
.smac .smac-inline { color: var(--link) !important; }
.smac .smac-inline:hover { text-decoration: underline !important; }
@media (max-width: 700px) {
	.smac-vs { padding-top: 64px; }
	.smac-vs-grid { grid-template-columns: 1fr; gap: 12px; }
	.smac-vs-col { padding: 24px 20px 20px; }
	.smac-vs li { font-size: 15px; line-height: 1.47; }
}

.smac-faq { padding-bottom: 0; }
.smac-faq summary { font-size: 19px; line-height: 1.32; letter-spacing: .012em; }
.smac .smac-faq-a { margin: -6px 0 22px !important; max-width: 760px; color: var(--t2) !important; font-size: 17px; line-height: 1.53; }
.smac .smac-sub .smac-inline { white-space: nowrap; }
#sewa-syarat { padding-bottom: 72px; }
.smac-end { margin-top: 0; }
@media (max-width: 700px) {
	.smac-faq summary { font-size: 17px; line-height: 1.35; padding: 18px 0; }
	.smac .smac-faq-a { font-size: 15px; margin-bottom: 18px !important; }
	.smac-faq { padding-top: 64px; }
	#sewa-syarat { padding-top: 64px; padding-bottom: 56px; }
}

/* ---------- Layar sangat sempit (≤ 359 px, mis. Galaxy Fold, iPhone mode Zoom): kartu satu kolom ---------- */
@media (max-width: 359px) {
	.smac-grid { grid-template-columns: 1fr; gap: 12px; }
	.smac .smac-week { white-space: normal; }
}

/* ---------- Ponsel miring (tinggi layar kecil): lembar pesanan layar penuh, kepala ringkas ---------- */
@media (orientation: landscape) and (max-height: 520px) {
	.smac-sheet-wrap { padding: 0 !important; align-items: stretch; }
	.smac-sheet { max-width: none; height: 100vh; height: 100dvh; max-height: 100dvh !important; border-radius: 0 !important; }
	.smac-grab { display: none; }
	.smac-sheet .smac-shead { padding: 8px max(24px, env(safe-area-inset-right)) 8px max(24px, env(safe-area-inset-left)); }
	.smac .smac-stitle h2 { font-size: 19px; line-height: 1.21; }
	.smac-prog { margin-top: 8px !important; }
	.smac-prog li { font-size: 0; gap: 0; }
	.smac-sbody { padding: 16px max(24px, env(safe-area-inset-right)) 24px max(24px, env(safe-area-inset-left)); gap: 28px; }
}