/* Nurseri Lestari — css/landing.css v2 (L2, 31 Oct 2026; L3, 1 Nov 2026): "Rumah kaca malam". The landing's composition only:
   the Moss-style hero (two meta lines, the two-line sentence, the circle photo cropped by the right edge), the moving band,
   four numbers on one raised card, three rack cards, four tiles, three plain columns, three steps, three tips, the game
   invitation and the closing question on glass over a photograph. Every value is a base.css token; the primitives (.display,
   .glass*, .photo*, .card*, .btn*, .link-arrow, .marquee) come from there untouched; the product tile (.rak*) is P2's in
   components.css. No lines, no hard shadows, nothing italic or uppercase. */

/* ---- section heads: the heading left, a short note or an arrow link right, baseline-ish ---- */
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-10); }
.sec-head h2 { max-width: 18ch; }
.sec-note { max-width: 26rem; font-size: var(--fs-body); line-height: 1.5; }

/* ---- 1. hero ---- */
.hero { position: relative; isolation: isolate; overflow: clip; display: flex; flex-direction: column; min-height: 100svh; padding-top: var(--shell-clear, calc(var(--header-h) + 3rem)); padding-bottom: var(--s-16); }   /* the shell's own clearance token (A2 sets it on main > :first-child); the calc is only the fallback, never added on top */
.hero-in { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1 0 auto; }
.hero-meta { display: flex; justify-content: space-between; gap: var(--s-6); }
.hero-meta .meta-line { max-width: none; }
.hero-meta-r { margin-left: auto; justify-content: flex-end; text-align: right; }
@media (min-width: 1024px) { .hero-meta .meta-line { white-space: nowrap; } }   /* both captions on one line on desktop (client, 1 Nov); narrower screens may wrap */
.hero-h { margin-top: var(--s-8); }
.hero-bottom { margin-top: auto; padding-top: var(--s-8); max-width: 30rem; }   /* the lead at .86 of the lead size: five lines, so the whole hero fits a 1440 x 813 laptop viewport with the chip in view */
.hero-lead { font-size: calc(var(--fs-lead) * .86); line-height: 1.5; }
.hero-bottom .link-arrow { margin-top: var(--s-6); }
/* the circle: ~62 vw wide, its top a third down the hero, cropped by the right edge and the bottom like the reference */
.hero-photo { --d: min(62vw, 100svh); --hero-hold: 5000ms; --hero-fade: 1200ms; position: absolute; z-index: 1; top: 38%; right: calc(var(--d) * -0.14); width: var(--d); height: var(--d); }
/* the circle is a slow slideshow (H3, client round of 1 Nov): six photos stacked, the one showing on top. Every --hero-hold the
   next photo (decoded first by landing.js) fades in over it for --hero-fade while both drift at the same gentle rate, 1 → 1.05
   across the hold and on through the fade, so nothing ever stops or jumps; the one underneath is dropped, already covered, once
   the fade is done. The stack is aria-hidden and the first photo carries the alt; the circle keeps its own box, so no shift */
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; z-index: 0; opacity: 0; object-position: 50% 50%; }
.hero-slide.is-active { z-index: 2; opacity: 1; transition: opacity var(--hero-fade) var(--ease-out); }
.hero-slide.is-leaving { z-index: 1; opacity: 1; }
.hero-slide.is-active, .hero-slide.is-leaving { animation: hero-drift calc(var(--hero-hold) + var(--hero-fade)) linear forwards; }
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.062); } }   /* .01 a second: 1.05 at the 5 s mark, still moving through the fade */
html.reduced .hero-slide { animation: none; transition: none; }
html.reduced .hero-slide:not(.is-active) { display: none; }   /* only the first photo; the lazy ones are never fetched */
/* one glass CTA on the photo where the address chip was. From 900 px up it is the hero's only product link (the text link under
   the lead would say the same thing a few hundred px away); on phones the text link stays, since the circle sits below the first screen */
.hero-chip { position: absolute; z-index: 3; right: var(--gutter); bottom: var(--s-20); background: rgb(var(--moss-rgb) / .72); border-color: var(--glass-dark-border); }   /* moss-tinted glass: the white glass lost "Cek produk" over the pale pots of photos 02/03/06; sage stays ≥ 5:1 even over a cream pot, the blur and the glass edge stay */
.hero-chip:hover { background: rgb(var(--moss-rgb) / .84); }
@media (min-width: 900px) { .hero-bottom .link-arrow { display: none; } }
@media (max-width: 899px) {
  .hero { min-height: 0; padding-top: var(--shell-clear, calc(var(--header-h) + 2.5rem)); padding-bottom: 0; }
  .hero-in { flex: none; }
  .hero-meta { flex-direction: column; gap: var(--s-2); }
  .hero-meta-r { margin-left: 0; justify-content: flex-start; text-align: left; }
  .hero-bottom { padding-top: var(--s-10); }
  .hero-photo { --d: 100vw; position: relative; top: auto; right: auto; margin-top: var(--s-10); margin-left: 24vw; }
  .hero-chip { right: var(--gutter); bottom: clamp(3.5rem, 14vw, 6rem); }
}

/* ---- 2. the moving band ---- */
.band-words { padding-block: var(--s-10); }
.band-row { display: flex; align-items: center; gap: var(--s-6); }
.band-row .marquee { flex: 1 1 auto; min-width: 0; }
.band-row .marquee-track { padding-right: var(--s-12); }   /* the track's gap plus this trailing space: one period = exactly half the width, so the -50 % loop never jumps */
.band-item { display: flex; align-items: center; gap: var(--s-12); white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); letter-spacing: -0.015em; color: var(--sage-2); }
.band-item::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--olive); }
.band-pause { flex: 0 0 auto; }
html.reduced .band-pause { display: none; }

/* ---- 3. facts: one raised card on the moss ground (the photo behind it is gone at the client's request), four numbers from the
   Tokopedia storefront and, as the fifth cell, the two Shopee storefronts as links (their numbers cannot be fetched) ---- */
.facts { padding-block: var(--s-2) 0; }
/* one wrapping row: every cell takes its own width and the leftover spreads between them, so a number set nowrap can never run
   into its neighbour (equal columns did, at the card's width); below 700 px a two-column grid */
.facts-strip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-6) var(--s-10); margin: 0; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3.5vw, 3rem); }
.fact { display: flex; flex-direction: column-reverse; gap: var(--s-1); min-width: 0; }
.fact dd { font-family: var(--font-display); font-weight: 600; font-size: calc(var(--fs-h2) * .9); line-height: 1.05; letter-spacing: -0.025em; white-space: nowrap; color: var(--sage); }
.fact dt { font-size: var(--fs-sm); color: var(--sage-2); }
/* the Shopee cell reads label first, then the two shops as arrow links at the h4 size */
.fact-also { flex-direction: column; gap: var(--s-2); }
.fact-also dd { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.01em; white-space: normal; }
.fact-also .link-arrow { gap: .35rem; font-size: inherit; }
.fact-also .link-arrow .icon { width: 1.05em; height: 1.05em; }
@media (max-width: 699px) {
  .facts-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-5); }
  .fact dd { font-size: clamp(1.5rem, 6.4vw, 1.75rem); }   /* "Gratis ongkir" stays on one line inside its half */
  .fact-also { grid-column: 1 / -1; }
}

/* ---- 4. three rack cards (4:5), the caption on glass at the foot ---- */
.racks { padding-top: calc(var(--section-y) * .75); }   /* the facts card above carries no padding of its own */
.racks-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-10); }
.rack-card { display: block; aspect-ratio: 4 / 5; }
.rack-card img { position: absolute; inset: 0; width: 100%; height: 100%; }
.rack-cap { position: absolute; z-index: 1; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); }
.rack-cap-text { display: grid; gap: var(--s-1); min-width: 0; }
.rack-cap .h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); line-height: 1.15; letter-spacing: -0.01em; color: var(--sage); }
.rack-cap .meta { display: block; min-height: 1.4em; color: var(--sage-2); }
.rack-arrow { display: grid; place-items: center; flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--sage); color: var(--moss); transition: background var(--dur-2) var(--ease-out); }
.rack-arrow .icon { width: 1.25rem; height: 1.25rem; transition: translate var(--dur-2) var(--ease-out); }
@media (hover: hover) { .rack-card:hover .rack-arrow { background: var(--sage-3); } .rack-card:hover .rack-arrow .icon { translate: 3px 0; } }
@media (max-width: 699px) { .racks-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } .rack-card { aspect-ratio: 4 / 4.6; } }

/* ---- 5. four tiles, the most sold first (markup from tileHTML in js/catalog.js with its CTA pill; the tile itself, image edge to
   edge, "terjual", the pill, is P2's shared .rak* rule set in components.css, so the landing only places the four and keeps the
   section short: the client found the old band of air above the heading too tall) ---- */
.featured { padding-block: calc(var(--section-y) * .55); }
.featured-rak { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-8); }
.featured-rak:empty { min-height: 26rem; }   /* reserved until landing.js fills it: nothing below jumps */
@media (max-width: 1023px) { .featured-rak { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .featured-rak { gap: var(--s-4) var(--s-3); margin-top: var(--s-6); } }

/* ---- 6. three plain columns: an olive mark, a heading, one sentence; space does the separating (sections 6–8 sit on
   .section-tight, .55 of the section space, since the client found the old gaps too tall) ---- */
.daily-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8) var(--s-10); margin-top: var(--s-8); }
.daily-grid > div::before { content: ""; display: block; width: .5rem; height: .5rem; margin-bottom: var(--s-4); border-radius: 50%; background: var(--olive); }
.daily-grid p { margin-top: var(--s-3); max-width: 32ch; }
@media (max-width: 699px) { .daily-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } .daily-grid h3, .daily-grid p { max-width: 30rem; } }

/* ---- 7. steps: the heading and one note beside a stacked list, each step one tone up from the ground; the list takes the
   wider column so the heading's side no longer stands mostly empty ---- */
.steps-split { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(2rem, 4vw, 4rem); }
.steps-head { display: grid; gap: var(--s-4); }
.steps-head .sec-note { color: var(--ink-2); }
.steps-list { display: grid; gap: var(--s-3); }
.steps-list li { padding: var(--s-5) var(--s-6); }
.steps-list h3 { max-width: 24ch; }
.steps-list p { margin-top: var(--s-2); max-width: 44ch; color: var(--ink-2); }
@media (max-width: 899px) { .steps-split { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }
@media (max-width: 639px) { .steps-list li { padding: var(--s-5) var(--s-5); } }

/* ---- 8. three tips: photo, title, one meta line; the game card follows right after with a small gap ---- */
.notes { padding-bottom: var(--s-8); }
.notes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-8); margin-top: var(--s-8); }
.notes-grid:empty { min-height: 22rem; }
.note-card { display: block; }
.note-photo { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.note-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.note-photo.is-illus { background: var(--moss-2); }
.note-photo.is-illus img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.note-card h3 { margin-top: var(--s-5); font-size: var(--fs-h4); line-height: 1.25; max-width: 30ch; }
.note-card .meta { display: block; margin-top: var(--s-2); }
@media (max-width: 699px) { .notes-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); } }

/* ---- 9. the game, an invitation: Tunas large on the left, the game's stage foliage (assets/illus/game-foliage.svg, the one
   place its pine shows on a page) faint at both edges of the card, the headline, one line, one solid pill ---- */
.play { padding-block: 0 calc(var(--section-y) * .55); }
.play-card { position: relative; isolation: isolate; overflow: clip; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3.5rem); }
.play-card::before, .play-card::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; width: 16rem; background: url("../assets/illus/game-foliage.svg") left top / 240px 900px no-repeat; opacity: .3; pointer-events: none; }
.play-card::before { left: 0; }
.play-card::after { right: 0; scale: -1 1; }
.play-sprite { width: clamp(9rem, 16vw, 14rem); height: auto; margin-inline: clamp(0rem, 1.5vw, 1.5rem); }
.play-body { max-width: 40rem; }
.play-card h2 { max-width: 20ch; }
.play-card p { margin-top: var(--s-3); max-width: 44ch; font-size: var(--fs-lead); line-height: 1.5; }
.play-card .play-record { margin-top: var(--s-2); font-size: var(--fs-sm); }
.play-card .btn { margin-top: var(--s-6); }
@media (max-width: 639px) {
  .play-card { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--s-5); }
  .play-card::after { display: none; }
  .play-sprite { width: 8.5rem; margin: 0; }
  .play-card h2 { font-size: var(--fs-h3); }
  .play-card p { font-size: var(--fs-body); }
  .play-card .btn { width: 100%; }
}

/* ---- 10. closing: the pots photograph edge to edge under a flat moss tint, one glass panel in the middle with the question,
   one line and a WhatsApp pill per shop (Cipete solid, BSD glass) ---- */
.closing { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(34rem, 82svh, 50rem); padding-block: var(--s-16); }
.closing-photo { position: absolute; inset: 0; border-radius: 0; }
.closing-photo img { position: absolute; inset: 0; object-position: 50% 50%; }
.closing-photo::after { content: ""; position: absolute; inset: 0; background: rgb(var(--moss-rgb) / .48); pointer-events: none; }   /* a flat scrim: the glass and the sage type need a dark field, not a gradient */
.closing-in { position: relative; z-index: 1; display: flex; justify-content: center; }
.closing-panel { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); width: min(100%, 42rem); padding: clamp(1.75rem, 4vw, 3.25rem); text-align: center; }
.closing-panel h2 { font-size: var(--fs-h1); max-width: 12ch; }
.closing-panel p { max-width: 30rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--sage); }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-3); }
@media (max-width: 639px) {
  .closing { min-height: 0; padding-block: var(--s-12); }
  .closing-actions { flex-direction: column; align-items: stretch; }   /* two btn-lg pills side by side ran 7 px past a 375 px viewport */
  .closing-actions .btn { width: 100%; }
  .closing-panel { gap: var(--s-3); }
  .closing-panel h2 { font-size: var(--fs-h2); }
  .closing-panel p { font-size: var(--fs-body); }
  .closing-actions { flex-direction: column; align-items: stretch; width: 100%; }
}