/* Makeup page (/makeup/). Builds on css/style.css (tokens for both themes, type, buttons, announce
   bar, nav, footer bar, social-proof popup) and css/fonts.css (self-hosted fonts with metric-matched
   fallbacks). Only page-specific layout lives here: hairlines, no shadows, one ember accent. */

.mk picture { display: block; }
.mk h4 { margin: 0; font-weight: 400; }
.mk main h2 {
  font: 400 clamp(34px, 4.4vw, 56px)/1.02 var(--serif);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.mk h1 em, .mk h2 em { color: var(--accent); }
.m-sec { padding-top: clamp(76px, 10vw, 132px); }
.m-head .kicker { margin-bottom: 14px; }
.m-head .muted { margin-top: 14px; max-width: 58ch; font-size: 15.5px; }
.m-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.m-hero-fig figcaption, .bk-cover, .bk-fig figcaption, .pc-kick, .pc-meta dt, .grp, .mfoot-h, .cover-scale, .buy-legend {
  font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}

/* Sections below the first screen are laid out only when they come near the viewport: the first
   paint no longer waits for the whole 13,000 px page. html.cv is set by the inline head script and
   removed before anything jumps down the page (anchors, reload, text-fragment links), so those land
   exactly. The sizes are rough real heights (desktop / phone) so the scrollbar doesn't jump much;
   "auto" remembers the real height once a section has been shown. */
.cv .m-sec, .cv .mfoot { content-visibility: auto; contain-intrinsic-size: auto var(--cis, 900px); }
#bukti { --cis: 1100px; } #uji-coba { --cis: 1500px; } #kenapa { --cis: 800px; } #produk { --cis: 1700px; }
#cerita { --cis: 750px; } #beli { --cis: 650px; } #faq { --cis: 600px; } .mfoot { --cis: 460px; }
/* content-visibility clips painting at the section box: 10 px of room keeps focus rings whole */
.m-sec { padding-bottom: 10px; margin-bottom: -10px; }

.skip {
  position: absolute; left: 12px; top: -64px; z-index: 100;
  padding: 10px 14px; border-radius: 8px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- hero ---------- */
.m-hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
  padding-top: clamp(30px, 5vw, 70px);
}
.m-hero h1 {
  margin-top: 16px;
  font: 400 clamp(54px, 7.6vw, 108px)/0.92 var(--serif);
  letter-spacing: -0.015em;
}
.m-hero h1 em { display: block; }
.m-lead { margin-top: 24px; max-width: 48ch; font-size: clamp(16px, 1.35vw, 18px); line-height: 1.6; color: var(--fg-2); }
.m-lead b { color: var(--fg); font-weight: 600; }
.m-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 30px 0 0; padding: 0; }
.m-trust li {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2);
}
.m-trust li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.m-hero-fig { margin: 0; justify-self: end; width: 100%; max-width: 520px; }
.m-hero-fig img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  background: #c79f7b; border: 1px solid var(--line-2); border-radius: calc(var(--r) + 8px);
}
.m-hero-fig figcaption { margin-top: 12px; }

/* ---------- before / after ---------- */
.bukti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.bk {
  display: flex; flex-direction: column;
  padding: 22px 20px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: calc(var(--r) + 4px);
}
.bk-head { display: flex; align-items: flex-end; gap: 16px; }
.bk-num { font: 400 clamp(64px, 6.2vw, 86px)/0.78 var(--serif); letter-spacing: -0.03em; color: var(--accent); }
.bk-num span { font-size: .52em; letter-spacing: 0; }
.bk h3 { font: 600 17px/1.25 var(--sans); }
.bk-cover { margin-top: 5px; }
.bk-what { margin-top: 18px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.bk-what b { color: var(--fg); font-weight: 600; }
.bk-fig { margin: auto 0 0; padding-top: 18px; }
.bk-fig img { width: 100%; height: auto; border-radius: 12px; background: var(--bg-2); } /* own ratio: nothing cut off */
.bk-fig figcaption { display: flex; justify-content: space-between; margin-top: 10px; }
.bk-fig figcaption span:last-child { color: var(--accent); }
@media (min-width: 761px) {
  /* the three cards share row heights, so percentages, texts and photos line up across cards */
  .bukti { grid-template-rows: auto auto 1fr; }
  .bk { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}

/* ---------- test videos ---------- */
.uji-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 32px 64px; align-items: end; }
.cover { margin: 0; padding: 18px 20px 16px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); }
.cover-rows { margin: 14px 0 0; display: grid; gap: 11px; }
.cover-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 12px; }
.cover-row dt { font-size: 13px; font-weight: 600; }
.cover-row dd { margin: 0; }
.cover-track {
  position: relative; display: block; height: 10px; border-radius: 999px;
  background:
    linear-gradient(90deg, transparent calc(33.333% - .5px), var(--bg) 0 calc(33.333% + .5px), transparent 0 calc(66.666% - .5px), var(--bg) 0 calc(66.666% + .5px), transparent 0),
    var(--line);
}
.cover-bar {
  position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: var(--accent); outline: 1px solid var(--accent); outline-offset: -1px; /* edge stays >= 3:1 */
}
.cv-lm { left: 0; width: 66.666%; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.cv-mf { left: 33.333%; width: 66.667%; background: color-mix(in srgb, var(--accent) 78%, transparent); }
.cv-f { left: 66.666%; width: 33.334%; }
/* label cells sit exactly under the three thirds of the track (118px name column + 12px gap) */
.cover-scale { display: grid; grid-template-columns: 130px repeat(3, minmax(0, 1fr)); margin-top: 10px; }
.cover-scale span { text-align: center; }
.cover-scale span:first-child { grid-column: 2; }

.ug {
  display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px;
  margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line);
}
.ug-head { display: flex; flex-direction: column; gap: 16px; }
.ug-img {
  width: 150px; height: 118px;
  background: radial-gradient(closest-side, var(--tint-2), transparent) no-repeat left center / 118px 118px;
}
.ug-img img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.ug h3 { font: 400 clamp(28px, 2.6vw, 34px)/1.02 var(--serif); }
.ug-cover { margin-top: 8px; font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.ug-cover b { display: block; margin-top: 2px; color: var(--accent); font-weight: 500; }
.vids { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vcard { display: block; color: inherit; text-decoration: none; border-radius: 12px; }
.vcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vcard-img { position: relative; display: block; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; }
.vcard-img img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .4s ease; }
.vcard:hover .vcard-img img { transform: scale(1.04); }
.vcard-img::after { /* play badge, top left: captions sit in the lower third, the watermark top centre */
  content: ''; position: absolute; left: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent) no-repeat 55% 50% / 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1.5v9l7.5-4.5z' fill='%231c0c05'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .vcard-img::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1.5v9l7.5-4.5z' fill='%23fff'/%3E%3C/svg%3E");
}
.vcard-t { display: block; margin-top: 11px; font-weight: 600; font-size: 14px; line-height: 1.35; }
.vcard-s { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ---------- why ---------- */
.why { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.why-fig { margin: 0; }
.why-fig img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  background: #efe2da; border: 1px solid var(--line); border-radius: calc(var(--r) + 8px);
}
.why-list {
  list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  margin: 34px 0 0; padding: 0; background: var(--line);
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line);
}
.why-list li { padding: 22px 22px 24px 0; background: var(--bg); }
.why-list li:nth-child(even) { padding-left: 22px; padding-right: 0; }
.why-list svg { width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.why-list h3 { margin-top: 14px; font: 600 16px/1.3 var(--sans); }
.why-list p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ---------- products ---------- */
.grp { display: flex; align-items: center; gap: 14px; margin-top: 44px; color: var(--fg-2); }
.grp::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.pc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.pc {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r) + 4px); overflow: hidden;
}
.pc-img { background: var(--bg-2); }
.pc-img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.pos-loose img { object-position: 28% 40%; }
.pos-blender img { object-position: 30% 50%; }
.pc-body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 20px; min-width: 0; }
.pc-kick { color: var(--accent); }
.pc h4 { margin-top: 8px; font: 400 clamp(28px, 2.5vw, 34px)/1.02 var(--serif); }
.pc-tag { margin-top: 4px; font: italic 400 19px/1.2 var(--serif); color: var(--fg-2); }
.pc-desc { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.pc-meta { display: grid; gap: 12px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.pc-meta div { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: baseline; gap: 10px; }
.pc-meta dd { margin: 0; }
.pc-price { font: 500 19px/1 var(--mono); letter-spacing: -0.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
.shades { list-style: none; display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 0; padding: 0; }
.shades li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--fg-2); }
.shades span { flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--c); border: 1px solid var(--line-2); }
.feat { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; }
.feat li { padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12px; line-height: 1.3; color: var(--fg-2); }
.pc-actions, .pk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 20px; }

.pk-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.pk { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r) + 4px); overflow: hidden; }
.pk img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-2); }
.pos-mousse img { object-position: 40% 30%; }
.pos-eyeconic img { object-position: 58% 40%; }
.pk-body { display: flex; flex: 1; flex-direction: column; padding: 16px 16px 18px; }
.pk h4 { font: 600 16px/1.3 var(--sans); }
.pk-tag { margin-top: 4px; font: italic 400 20px/1.15 var(--serif); color: var(--fg-2); }
.pk-desc { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.pk-price { margin-top: 12px; font: 500 16px/1 var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---------- founder ---------- */
.story {
  display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(28px, 5vw, 64px); align-items: center;
  padding: clamp(22px, 4vw, 48px);
  background: radial-gradient(80% 140% at 100% 0%, var(--tint-2), transparent 60%), var(--surface);
  border: 1px solid var(--line-2); border-radius: calc(var(--r) + 8px);
}
.story-fig { margin: 0; }
.story-fig img { width: 100%; max-width: 400px; height: auto; aspect-ratio: 1442 / 1920; object-fit: cover; background: #040509; border-radius: var(--r); }
.mk main .story-copy h2 { margin-top: 14px; font-size: clamp(34px, 3.8vw, 50px); }
.story-body { margin-top: 22px; }
.story-body p { font-size: 15.5px; line-height: 1.7; color: var(--fg-2); }
.story-body p + p { margin-top: 14px; }
.story-sign { width: min(277px, 100%); height: auto; margin-top: 26px; }
:root[data-theme="light"] .story-sign { filter: invert(1) brightness(0.25); }
.story-by { margin-top: 8px; font-size: 13.5px; color: var(--muted); }

/* ---------- where to buy ---------- */
.buy {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(22px, 4vw, 48px);
  background: radial-gradient(80% 140% at 0% 100%, var(--tint-2), transparent 60%), var(--surface);
  border: 1px solid var(--line-2); border-radius: calc(var(--r) + 8px);
}
.buy-copy h2 { margin-top: 14px; }
.buy-lead { margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--fg-2); }
.buy-lead b { color: var(--fg); font-weight: 600; }
.buy-copy .muted { margin-top: 10px; font-size: 14.5px; }
.buy-map {
  display: block; color: inherit; text-decoration: none;
  background: radial-gradient(120% 90% at 50% 45%, var(--tint), transparent 60%), var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  transition: border-color .18s;
}
.buy-map:hover { border-color: var(--line-3); }
/* dot map = two CSS masks coloured by theme tokens; aspect-ratio = the SVGs' viewBox
   (scripts/build-mini-map.mjs prints it) */
.peta { position: relative; display: block; margin: 18px 14px 10px; aspect-ratio: 999 / 392; }
.peta::before, .peta::after {
  content: ''; position: absolute; inset: 0;
  -webkit-mask: url(/assets/makeup/peta-darat.svg) center / contain no-repeat;
          mask: url(/assets/makeup/peta-darat.svg) center / contain no-repeat;
  background: var(--line-3);
  background: color-mix(in srgb, var(--sand) 62%, transparent);
}
:root[data-theme="light"] .peta::before { background: color-mix(in srgb, var(--sand) 78%, transparent); }
.peta::after {
  -webkit-mask-image: url(/assets/makeup/peta-agen.svg);
          mask-image: url(/assets/makeup/peta-agen.svg);
  background: var(--accent);
}
.buy-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 16px; border-top: 1px solid var(--line); }
:root[data-theme="light"] .buy-legend .lg { color: var(--muted); }
.buy-legend .lg-pusat::before { width: 8px; height: 8px; border-radius: 50%; transform: none; background: none; border: 1px solid var(--accent); }
.buy-go { margin-left: auto; color: var(--fg-2); }
.buy-map:hover .buy-go { color: var(--accent); }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 28px 64px; align-items: start; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 20px 0; list-style: none; cursor: pointer;
  font: 600 16px/1.4 var(--sans);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+'; content: '+' / ''; /* decorative: not part of the question's accessible name */
  flex: none; font: 300 26px/1 var(--sans); color: var(--accent); transition: transform .2s ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:hover { color: var(--strong); }
.faq-list details p { max-width: 64ch; padding: 0 36px 22px 0; font-size: 15px; line-height: 1.65; color: var(--muted); }
.faq-list a { color: var(--fg); text-underline-offset: 3px; text-decoration-color: var(--line-3); }

/* ---------- footer ---------- */
.mfoot { margin-top: clamp(76px, 10vw, 128px); border-top: 1px solid var(--line); }
.mfoot-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(5, minmax(0, 1fr)); gap: 32px 24px; /* brand, 3 series, Parfum, quick links — as css/lp.css */
  padding-top: 46px; padding-bottom: 40px;
}
.mfoot-nav { display: contents; } /* one landmark, its columns sit in the footer grid */
.mfoot-brand img { height: 26px; width: auto; filter: var(--logo-filter); }
.mfoot-brand p { margin-top: 16px; font: 400 24px/1.15 var(--serif); }
.mfoot-brand em { color: var(--accent); }
.social { list-style: none; display: flex; gap: 10px; margin: 20px 0 0; padding: 0; }
.social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line-2); border-radius: 50%; color: var(--fg-2);
  transition: border-color .15s, color .15s;
}
.social a:hover { color: var(--strong); border-color: var(--line-3); }
.social svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.social .fill { fill: currentColor; stroke: none; }
.mfoot-h { margin-bottom: 14px; font-weight: 500; }
.mfoot ul:not(.social) { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; }
.mfoot nav a { color: var(--muted); font-size: 13.5px; text-decoration: none; }
.mfoot nav a:hover { color: var(--fg); }
.mfoot .foot { padding-top: 20px; }

/* ---------- sticky phone CTA ---------- */
.m-sticky { display: none; }

/* ---------- lightbox (always dark, whatever the theme) ---------- */
html:has(dialog.lightbox[open]) { overflow: hidden; } /* the page behind doesn't scroll */
html:has(body.mk) { scrollbar-gutter: stable; }      /* ...and doesn't jump when the scrollbar goes */
.lightbox {
  width: 100vw; height: 100vh; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0;
  border: 0; background: transparent; color: #f2eadf; overflow: hidden;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(8, 6, 5, 0.92); }
.lb-stage { display: grid; place-items: center; }
/* the frame takes each video's own shape (--ar = width / height, 4:5 unless the card says otherwise)
   and the largest size that fits the screen, leaving room for the caption */
.lb-stage iframe {
  display: block; border: 0; border-radius: 12px; background: #000;
  aspect-ratio: var(--ar, .8); height: auto;
  width: min(92vw, 1100px, calc((100vh - 140px) * var(--ar, .8)));
  width: min(92vw, 1100px, calc((100dvh - 140px) * var(--ar, .8)));
}
.lb-cap {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); width: max-content; max-width: 84vw; text-align: center;
  font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 234, 223, 0.75);
}
.lb-btn, .lb-close {
  position: fixed; z-index: 1; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(242, 234, 223, 0.22); background: rgba(20, 16, 13, 0.72); color: #f2eadf;
  font: 400 18px/1 var(--sans);
}
.lb-btn:hover, .lb-close:hover { border-color: rgba(242, 234, 223, 0.5); }
.lb-btn { top: 50%; margin-top: -23px; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-close { top: 16px; right: 16px; font-size: 22px; }
.lightbox.single .lb-btn { display: none; }

/* ---------- responsive ---------- */
@media (min-width: 761px) and (max-width: 1100px) {
  /* 5 small product cards: 3 + 2, the last row centred */
  .pk-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pk { grid-column: span 2; }
  .pk:nth-child(4) { grid-column: 2 / span 2; }
}
@media (max-width: 1100px) {
  .mfoot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mfoot-brand { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .m-hero, .uji-top, .ug, .why, .pc-grid, .story, .buy, .faq { grid-template-columns: minmax(0, 1fr); }
  .m-hero-fig { justify-self: start; max-width: 460px; }
  .cover { max-width: 520px; }
  .ug { gap: 20px; }
  .ug-head { flex-direction: row; align-items: center; gap: 18px; }
  .ug-img { width: 104px; height: 88px; background-size: 88px 88px; }
  .why-fig { display: none; } /* like the original: the photo is desktop-only (and never downloaded here) */
  .pc-img img { aspect-ratio: 16 / 9; }
  /* the square product photos stay whole in the wide box, on their own background colour */
  .pos-fd img, .pos-cp img { object-fit: contain; }
  .pos-fd { background: #d39763; }
  .pos-cp { background: #c8b7a5; }
  .story-fig img { max-width: 280px; }
}
@media (max-width: 760px) {
  .bukti {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 340px);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut));
    padding: 0 var(--gut) 12px; scroll-padding-left: var(--gut);
    scrollbar-width: thin; scrollbar-color: var(--line-3) transparent;
  }
  .bk { scroll-snap-align: start; }
  .bukti:focus-visible { outline-offset: -3px; } /* the scroller spans the full width: keep its ring inside */
  .vids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk:last-child:nth-child(odd) picture { position: relative; }
  .pk:last-child:nth-child(odd) img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .peta { margin: 12px 4px 8px; }
  .peta::before, .peta::after { -webkit-mask-image: url(/assets/makeup/peta-darat-m.svg); mask-image: url(/assets/makeup/peta-darat-m.svg); }
  .peta::after { -webkit-mask-image: url(/assets/makeup/peta-agen-m.svg); mask-image: url(/assets/makeup/peta-agen-m.svg); }
  .why-list { grid-template-columns: 1fr; }
  .why-list li, .why-list li:nth-child(even) { padding: 20px 0 22px; }
  .mfoot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .m-sticky:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--nav-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line-2);
  }
  .m-sticky span { font: 500 10.5px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
  .lp-sticky .lp-sticky-code, .m-sticky .lp-sticky-code { font-size: 12.5px; letter-spacing: .06em; color: var(--fg-2); }
  .lp-sticky-code b { color: var(--fg); font-weight: 600; }
  .lp-sticky-code .gc-left { color: var(--accent); }
  .m-sticky .btn { margin-left: auto; }
  .lp-sticky-code[hidden] + .btn { flex: 1; } /* no coupon: one full-width button */
  body.has-sticky { padding-bottom: 72px; }
  html.has-sticky { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); } /* focus never hides under the bar */
  body.has-sticky .proof { bottom: calc(8px + env(safe-area-inset-bottom)); } /* over the bar, not stacked on it */

}
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  /* phones and portrait tablets: arrows under the video, not over its sides */
  .lb-btn { top: auto; bottom: 56px; margin-top: 0; }
  .lb-stage iframe { /* keep clear of the arrow buttons and the caption at the bottom */
    width: min(92vw, calc((100vh - 250px) * var(--ar, .8)));
    width: min(92vw, calc((100dvh - 250px) * var(--ar, .8)));
  }
}
@media (max-width: 640px) {
  .pc-img img { aspect-ratio: 16 / 10; }
}
@media (max-width: 420px) {
  .m-actions .btn-lg { width: 100%; }
  .m-actions .btn-lg, .mk .pk-actions .btn {
    height: auto; min-height: 48px; padding-block: 10px; white-space: normal; text-align: center; line-height: 1.25;
  }
  .pc-meta div { grid-template-columns: 1fr; gap: 6px; }
  .pk-grid { gap: 10px; }
  .pk-body { padding: 14px 12px 14px; }
  .mk .pk-actions .btn { flex: 1 1 auto; padding-inline: 10px; min-height: 40px; }
  .buy-go { margin-left: 0; }
}
@media (max-width: 380px) {
  /* coverage chart: name above a full-width track, so the Light/Medium/Full labels have room */
  .cover-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cover-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cover-scale span:first-child { grid-column: 1; }
}
@media (pointer: coarse) {
  /* bigger touch targets on phones and tablets */
  .mk .btn-sm { height: 40px; }
  .mk .theme-btn { width: 40px; height: 40px; }
  .social a { width: 44px; height: 44px; }
  .mfoot nav a { display: inline-block; padding: 5px 0; margin: -5px 0; }
}

/* Cek shade (js/shade.js): the call-out with the accent button under a shade section / above the complexion cards (owner: the
   ghost button was not visible enough); the finder's own styles are css/shade.css */
.sf-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 22px; margin-top: 26px; padding: 18px 20px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: radial-gradient(90% 140% at 100% 0%, var(--tint-2), transparent 60%), var(--surface); }
.sf-cta-copy { flex: 1 1 260px; min-width: 0; }
.sf-cta-copy b { display: block; font: 600 16px/1.3 var(--sans); color: var(--fg); }
.sf-cta-s { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 44ch; }
.sf-btn { flex: none; gap: 10px; text-decoration: none; }
.sf-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-cta { margin: 14px 0 22px; }
@media (max-width: 560px) { .sf-cta { padding: 16px; } .sf-btn { flex: 1 1 100%; } }