@charset "UTF-8";
:root{--cream:#f6f1e7;--paper:#eee7d9;--ink:#4f4739;--sage:#747d63;--line:rgba(79,71,57,.22);--pointer-x:0px;--pointer-y:0px;--scroll:0}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased}body.locked{overflow:hidden}button,a,input{ -webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #8b622e;outline-offset:6px}button{border:0}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:400}em{font-weight:400}::selection{background:#b7bf9f;color:#332c24}.skip{position:fixed;top:-100px;left:20px;z-index:100;background:var(--ink);color:white;padding:15px}.skip:focus{top:10px}.nav{height:102px;position:absolute;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 5.2%;z-index:20;border-bottom:1px solid var(--line)}.wordmark{font:31px Georgia,serif;letter-spacing:4px;display:block;line-height:1}.wordmark span{display:block;font:7px Arial,sans-serif;letter-spacing:2.3px;margin-top:9px}.nav nav{display:flex;gap:38px;padding-left:32px;font-size:12px}.nav nav a{position:relative;padding:15px 0}.nav nav a:after{content:'';position:absolute;bottom:7px;height:1px;background:var(--ink);left:0;width:0;transition:width .3s}.nav nav a:hover:after{width:100%}.motion-button{background:transparent;display:flex;align-items:center;gap:10px;font-size:11px}.motion-icon{border:1px solid var(--line);border-radius:50%;width:32px;height:32px;display:grid;place-items:center;font-size:12px}.hero{height:100svh;min-height:850px;max-height:1200px;position:relative;overflow:hidden;background:#f9f4e9}.hero-copy{position:relative;text-align:center;z-index:4;padding-top:158px;pointer-events:none}.hero-copy a{pointer-events:auto}.eyebrow{font-size:9px;letter-spacing:2.5px;font-weight:500;line-height:1.7}.hero h1{font-size:clamp(68px,7.8vw,118px);line-height:.99;letter-spacing:-5px;margin:23px auto 19px}.hero h1 span{display:inline-block;animation:rise 1.3s cubic-bezier(.2,.7,.2,1) both}.hero h1 em{display:inline-block;color:#7b8068;animation:rise 1.3s .13s cubic-bezier(.2,.7,.2,1) both}.hero-desc{font-size:12px;line-height:1.8;color:#776c59;margin-bottom:22px}.pill{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;border-radius:100px;background:var(--ink);color:var(--cream);font-size:11px;padding:18px 25px;min-width:210px;transition:background .3s,transform .3s;line-height:1.2}.pill span{font-size:18px;font-weight:300}.pill:hover{background:#777e63;transform:translateY(-3px)}.intro{animation:rise 1.2s .3s both}.woodland{position:absolute;inset:11% -1% -3%;z-index:1;pointer-events:none;transform:translate3d(calc(var(--pointer-x) * -.25),calc(var(--pointer-y) * -.25),0)}.landscape{width:100%;height:100%;object-fit:cover;object-position:center 61%;filter:saturate(.78);transform:translateY(calc(var(--scroll) * 55px)) scale(1.025)}.landscape-wash{position:absolute;inset:0;background:linear-gradient(to bottom,#f9f4e9 0%,rgba(249,244,233,.82) 14%,rgba(249,244,233,.12) 50%,transparent 70%)}.roo-position{position:absolute;left:50%;bottom:10%;width:clamp(280px,27vw,420px);transform:translate3d(calc(-50% + var(--pointer-x)),var(--pointer-y),0)}.roo-family{width:100%;transform-origin:50% 90%;animation:breathe 5.5s ease-in-out infinite;filter:drop-shadow(0 8px 8px #64583509)}.ripple{position:absolute;width:65px;height:17px;border:1px solid #faf8e6cc;border-radius:50%;opacity:0;animation:ripple 6s infinite ease-out}.ripple-one{left:28%;bottom:12%}.ripple-two{right:15%;top:39%;animation-delay:2.8s}.seed{position:absolute;width:4px;height:8px;background:#a9a07b;border-radius:80% 10%;opacity:.4;animation:drift 12s infinite ease-in-out}.seed-a{left:17%;top:30%}.seed-b{right:12%;top:47%;animation-delay:-4s}.seed-c{left:76%;top:22%;animation-delay:-7s}.hero-bottom{position:absolute;bottom:31px;left:5.2%;right:5.2%;display:flex;justify-content:space-between;align-items:center;z-index:5;font-size:8px;letter-spacing:1.6px}.scroll-note{display:flex;align-items:center;gap:12px}.scroll-line{height:31px;width:1px;background:#9a977f;position:relative;overflow:hidden}.scroll-line:after{content:'';display:block;width:1px;height:12px;background:var(--ink);animation:scrollline 2.5s infinite}.section-pad{padding:90px 7.5%}.section-marker{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:20px;font-size:8px;letter-spacing:2px;gap:20px}.tiny-star{font-size:29px;font-weight:400}.story{position:relative;overflow:hidden;min-height:660px;padding-bottom:82px}.story-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:11%;padding-top:68px}.story h2{font-size:clamp(40px,4.6vw,68px);line-height:1.13;letter-spacing:-2.6px}.story h2 em{color:var(--sage)}.signature{font:italic 19px Georgia,serif;margin-top:40px;color:#8c806a}.story-copy{padding-top:8px;font-size:14px;line-height:1.95;max-width:380px}.story-copy p+p{margin-top:21px}.text-link{background:none;border-bottom:1px solid var(--line);display:inline-flex;justify-content:space-between;align-items:center;gap:30px;font-size:11px;padding:12px 0;transition:gap .3s}.text-link:hover{gap:43px}.story-copy .text-link{margin-top:28px}.story-ornament{position:absolute;width:150px;left:47%;bottom:-22px;opacity:.6;transform:rotate(-13deg);pointer-events:none}.quiet-caption{font:italic 13px Georgia,serif;text-align:center;margin-top:90px;color:#8a806f}.panorama{height:560px;position:relative;background:#e8dfcd;overflow:hidden}.panorama-track{position:absolute;inset:0 -20%;background:var(--meadow) center/680px auto repeat;transform:translateX(calc(var(--progress,0) * -140px));filter:saturate(.65);opacity:.65}.panorama:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f7f1e651,transparent 40%,#f7f1e651)}.panorama-label{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:radial-gradient(ellipse at center,#f8f2e9e8 0,#f8f2e9bd 20%,transparent 68%)}.panorama-label>span{font-size:8px;letter-spacing:3px}.panorama-label p{font:52px/1.15 Georgia,serif;letter-spacing:-2px;margin-top:25px}.panorama-label em{color:var(--sage)}.panorama-caption{position:absolute;bottom:28px;left:0;right:0;text-align:center;font:italic 13px Georgia,serif;z-index:2}.collection{background:#757d65;color:#faf5e9;padding-bottom:110px}.collection .section-marker{border-color:#f6f1e73d}.collection-heading{display:flex;justify-content:space-between;align-items:end;margin:62px 0 48px}.collection-heading h2{font-size:clamp(48px,5.6vw,82px);line-height:1.04;letter-spacing:-3px}.collection-heading p{font-size:12px;line-height:1.8;opacity:.75;padding-bottom:10px}.product-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;align-items:center}.product-photo{position:relative;aspect-ratio:.95;background:#e6ddcb;overflow:hidden}.product-photo>img{height:100%;width:100%;object-fit:cover;object-position:62% center;transition:transform 1s}.product-photo:hover>img{transform:scale(1.045)}.photo-label{position:absolute;top:24px;left:24px;font-size:8px;letter-spacing:2px;color:var(--ink)}.concept-caption{position:absolute;bottom:18px;left:24px;font-size:8px;letter-spacing:1px;color:var(--ink);background:#f8f3e7b8;padding:6px 9px}.round-button{display:grid;place-items:center;border:1px solid var(--line);background:var(--cream);color:var(--ink);border-radius:50%;width:45px;height:45px;font:28px Georgia,serif;transition:transform .3s,background .3s}.round-button:hover{transform:rotate(8deg);background:#e5dcc9}.favorite{position:absolute;right:20px;top:20px;font-size:25px}.favorite[aria-pressed=true]{background:var(--ink);color:#f8e9c9}.product-copy .eyebrow{opacity:.7}.product-copy h3{font-size:clamp(44px,4.2vw,62px);line-height:1.06;letter-spacing:-2.4px;margin:25px 0}.product-description{font-size:13px;line-height:1.95;opacity:.88;max-width:350px}.palette{display:flex;align-items:center;gap:10px;margin:28px 0}.palette button{background:var(--swatch);height:20px;width:20px;border-radius:50%;outline:1px solid transparent;outline-offset:4px}.palette button[aria-pressed=true]{outline-color:#f7f1e8}.palette span{font-size:9px;letter-spacing:.5px;margin-left:6px;opacity:.7}.product-spec{display:flex;gap:15px;flex-wrap:wrap;border-top:1px solid #f6f1e73d;border-bottom:1px solid #f6f1e73d;padding:17px 0;font-size:7px;letter-spacing:1px}.pill.light{background:#f6f1e7;color:var(--ink);margin-top:30px;min-width:230px}.pill.light:hover{background:#e7dac2}.small-note{margin-top:15px;font:italic 11px Georgia,serif;opacity:.7}.moments{padding-top:85px;padding-bottom:100px}.moments-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:13%;padding-top:65px}.moments-art{position:relative;padding:25px}.art-circle{border-radius:50% 50% 46% 46%;aspect-ratio:1;overflow:hidden;outline:1px solid var(--line);outline-offset:18px;transform:rotate(-7deg)}.art-circle img{width:100%;height:100%;object-fit:cover;object-position:48% center;transform:scale(1.08);transition:transform 2s}.art-circle:hover img{transform:scale(1.2) rotate(7deg)}.orbit-text{display:block;font:italic 15px Georgia,serif;text-align:center;margin-top:39px}.moments h2{font-size:clamp(40px,4.4vw,65px);line-height:1.08;letter-spacing:-2px;margin-bottom:36px}.moments h2 em{color:var(--sage)}.moment-tabs{display:flex;gap:23px;border-bottom:1px solid var(--line)}.moment-tabs button{padding:13px 0;background:none;font-size:10px;white-space:nowrap;border-bottom:2px solid transparent;opacity:.6}.moment-tabs button[aria-selected=true]{border-color:var(--sage);opacity:1}.moment-panel{min-height:120px;padding-top:24px;font-size:13px;line-height:1.95;max-width:350px}.care{background:#eae5d8;display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:center}.care h2{font-size:39px;line-height:1.22;letter-spacing:-1.6px;margin:21px 0}.care-intro>p:last-child{max-width:310px;font-size:11px;line-height:1.9;opacity:.7}.care-accordion details{border-top:1px solid var(--line)}.care-accordion details:last-child{border-bottom:1px solid var(--line)}summary{cursor:pointer;display:flex;align-items:center;list-style:none;gap:20px;padding:24px 0;font-size:12px}summary::-webkit-details-marker{display:none}summary>span{font-size:8px;opacity:.5}summary b{margin-left:auto;font-size:20px;font-weight:400;transition:transform .3s}details[open] summary b{transform:rotate(45deg)}details>p{font-size:12px;line-height:1.9;padding:0 25px 25px 32px;opacity:.8}.closing{position:relative;padding:106px 20px 0;text-align:center;min-height:620px;overflow:hidden}.closing h2{font-size:clamp(44px,5.3vw,78px);line-height:1.1;letter-spacing:-2.5px;margin:25px 0 30px}.closing h2 em{color:var(--sage)}.closing-roo{width:200px;margin:65px auto 0}.closing-roo img{animation:breathe 5.5s ease-in-out infinite;transform-origin:50% 95%}.closing-botanical{position:absolute;width:310px;left:-70px;bottom:-40px;transform:rotate(22deg);opacity:.55;pointer-events:none}footer{border-top:1px solid var(--line);padding:39px 5.2%;display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;gap:30px}footer .wordmark{font-size:26px}footer>p{font:italic 16px Georgia,serif;text-align:center}footer>div{display:flex;gap:25px;justify-content:end;font-size:10px}footer small{grid-column:1/-1;text-align:center;font-size:8px;letter-spacing:1px;opacity:.6;margin-top:10px}.reveal{opacity:0;transform:translateY(25px);transition:opacity .9s,transform .9s}.reveal.visible{opacity:1;transform:none}dialog{width:min(1100px,94vw);max-height:92svh;padding:0;border:0;background:var(--cream);color:var(--ink);box-shadow:0 30px 100px #20180d45}dialog::backdrop{background:#28261ee0;backdrop-filter:blur(8px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:26px 30px;border-bottom:1px solid var(--line)}.dialog-head h2{font-size:30px;letter-spacing:-1px;margin-top:5px}.pattern-viewport{height:58svh;overflow:hidden;cursor:grab;touch-action:none;position:relative;background:#f6efde}.pattern-viewport:active{cursor:grabbing}.pattern-sheet{position:absolute;inset:-1500px;background-image:var(--meadow);background-repeat:repeat;background-size:650px auto;will-change:transform}.dialog-controls{display:flex;align-items:center;gap:20px;padding:15px 30px;font-size:10px}.dialog-controls>span{margin-right:auto}.dialog-controls input{width:120px;accent-color:var(--sage)}.dialog-controls .text-link{font-size:10px}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,30px);background:var(--ink);color:var(--cream);padding:15px 24px;border-radius:50px;font-size:11px;z-index:100;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}.toast.shown{opacity:1;transform:translate(-50%,0)}.motion-paused *, .motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}.motion-paused{scroll-behavior:auto}.motion-paused .woodland,.motion-paused .landscape,.motion-paused .panorama-track{transform:none}.motion-paused .reveal{opacity:1;transform:none;transition:none}@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes breathe{0%,100%{transform:scaleY(1) rotate(-.2deg)}50%{transform:scaleY(1.012) rotate(.2deg)}}@keyframes ripple{0%{transform:scale(.4);opacity:0}30%{opacity:.5}100%{transform:scale(2);opacity:0}}@keyframes drift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(25px,45px) rotate(130deg)}}@keyframes scrollline{0%{transform:translateY(-15px)}100%{transform:translateY(35px)}}
@media(min-width:1700px){.section-pad{padding-left:max(8%,calc((100% - 1450px)/2));padding-right:max(8%,calc((100% - 1450px)/2))}}@media(max-width:900px){.nav{padding:0 6%;height:86px}.nav nav{gap:22px;padding:0;font-size:10px}.motion-label{display:none}.hero{min-height:830px}.hero-copy{padding-top:145px}.hero h1{font-size:82px}.hero-bottom{left:6%;right:6%}.chapter-tag{font-size:7px}.section-pad{padding:65px 7%}.story-grid{gap:7%;grid-template-columns:1.2fr 1fr}.story h2{font-size:44px}.story-copy{font-size:12px}.panorama{height:460px}.product-grid{gap:6%}.product-copy h3{font-size:47px}.product-description{font-size:12px}.product-spec{gap:10px;font-size:6px}.moments-grid{gap:8%}.moment-tabs{gap:15px}.moment-tabs button{font-size:9px}.care{gap:7%}.care h2{font-size:31px}footer{grid-template-columns:1fr 1fr}footer>p{text-align:right}footer>div{grid-column:1/-1;justify-content:center}footer small{margin:0}}@media(max-width:600px){.nav{height:80px}.wordmark{font-size:26px}.wordmark span{font-size:6px;letter-spacing:1.8px}.nav nav{gap:16px;font-size:10px}.nav nav a:first-child{display:none}.hero{height:94svh;min-height:760px;max-height:950px}.hero-copy{padding-top:132px}.hero-copy .eyebrow{font-size:7px;letter-spacing:1.8px}.hero h1{font-size:65px;letter-spacing:-3.5px;margin-top:22px}.hero-desc{font-size:11px;margin:19px auto}.pill{padding:16px 21px;min-width:190px;font-size:10px}.woodland{inset:32% -50% -3%}.landscape{object-position:center 60%;filter:saturate(.75)}.landscape-wash{background:linear-gradient(to bottom,#f9f4e9 0%,#f9f4e9c7 8%,transparent 46%)}.roo-position{width:260px;bottom:13%}.hero-bottom{bottom:25px}.scroll-note{font-size:6px;letter-spacing:1px;gap:8px}.chapter-tag{font-size:6px;letter-spacing:1px}.section-pad{padding:55px 7%}.section-marker{font-size:7px;letter-spacing:1.5px;align-items:center}.section-marker>span:nth-child(2):not(.tiny-star){max-width:130px;text-align:right;font-size:6px;line-height:1.8}.story-grid{grid-template-columns:1fr;gap:34px;padding-top:38px}.story h2{font-size:44px;letter-spacing:-1.8px}.signature{font-size:16px;margin-top:24px}.story-copy{max-width:100%;font-size:12px;padding-right:28px}.story-copy p+p{margin-top:16px}.story-ornament{left:auto;right:-25px;width:110px;bottom:30px;opacity:.3}.quiet-caption{text-align:left;margin-top:55px;font-size:11px}.panorama{height:420px}.panorama-track{background-size:520px auto;inset:0 -50%}.panorama-label p{font-size:39px}.panorama-label>span{font-size:7px}.panorama-caption{font-size:11px}.collection-heading{margin:40px 0 30px}.collection-heading h2{font-size:49px;letter-spacing:-2px}.collection-heading p{font-size:9px;max-width:110px;line-height:1.7}.product-grid{grid-template-columns:1fr;gap:34px}.product-photo{aspect-ratio:1.1}.product-photo>img{object-position:60% center}.product-copy{padding:0 3px}.product-copy h3{font-size:47px;margin:19px 0}.product-description{max-width:100%;font-size:12px}.product-spec{font-size:7px;gap:20px}.small-note{font-size:11px}.moments-grid{grid-template-columns:1fr;padding-top:40px;gap:50px}.moments-art{max-width:310px;margin:auto;padding:20px}.moments h2{font-size:45px}.moments-content{padding:0 3px}.moment-tabs{gap:27px}.moment-tabs button{font-size:10px}.moment-panel{min-height:110px;max-width:100%;font-size:12px}.care{grid-template-columns:1fr;gap:30px}.care h2{font-size:33px}.care-intro>p:last-child{max-width:100%}.care .eyebrow{font-size:7px}.closing{padding:75px 7% 0;min-height:550px}.closing h2{font-size:43px;letter-spacing:-1.8px;margin-top:24px}.closing>.eyebrow{font-size:7px}.closing-botanical{width:200px;left:-90px;bottom:0}.closing-roo{width:170px;margin-top:55px}footer{padding:30px 7%;gap:25px}footer>p{font-size:11px}.dialog-head{padding:18px}.dialog-head h2{font-size:24px}.dialog-head .eyebrow{font-size:7px}.dialog-head .round-button{width:35px;height:35px}.pattern-viewport{height:58svh}.dialog-controls{padding:10px 18px;gap:12px;flex-wrap:wrap}.dialog-controls>span{width:100%;font-size:9px}.dialog-controls>label{font-size:9px}.dialog-controls input{flex:1}.toast{width:max-content;max-width:90vw;text-align:center;font-size:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.woodland,.landscape,.panorama-track{transform:none!important}}
.pattern-sheet{background-repeat:no-repeat;background-position:center;background-color:#f6efe1}.panorama-track{background-size:cover;background-repeat:no-repeat}.art-circle img{object-position:20% center}
.story-ornament,.closing-botanical{mix-blend-mode:multiply;mask-image:radial-gradient(ellipse at center,black 30%,transparent 73%)}.ripple{display:none}.roo-position{width:clamp(265px,26vw,380px);bottom:9%}@media(max-width:600px){.roo-position{width:250px;bottom:12%}}

.variant-note{font-size:10px;letter-spacing:1px;margin:-10px 0 24px;opacity:.75}.palette{gap:12px}.palette button{width:22px;height:22px}.product-photo>img{object-position:center}.product-photo{aspect-ratio:.9}
@media(min-width:601px){.hero{min-height:720px}.hero h1{font-size:clamp(68px,7vw,104px)}.hero-copy{padding-top:143px}.roo-position{width:clamp(240px,23vw,340px);bottom:8%}}

/* ============================================================
   TAMBAHAN — dari desain ke situs sungguhan
   ============================================================
   Semua di atas baris ini adalah style.css hasil rancangan, disalin
   apa adanya; hanya dua url('assets/pattern.webp') yang diganti
   var(--meadow) supaya gambarnya lewat img.php seperti gambar lain.

   Blok ini menambahkan apa yang tidak ada di rancangan karena
   rancangan itu halaman statis: foto produk sungguhan, harga, tombol
   beli yang terlacak, kartu ucapan, bagian kemitraan, dan blog.
   Ditambah perbaikan ponsel yang terukur (lihat catatan tiap bagian).
   ============================================================ */

/* --- 1. FOTO PRODUK SUNGGUHAN -------------------------------
   Foto produk adalah banner marketplace 800x800: ada bingkai biru
   (berakhir 7,5%), label SPECIAL PRICE tegak di kanan (x 86,5-94,5%)
   dan blok klaim di bawah (mulai 75,5%). Menaruhnya apa adanya ke
   dalam bingkai desain ini akan membawa serta seluruh perabot
   marketplace itu.

   Jadi fotonya DIPOTONG, dan angkanya DIUKUR dari berkasnya:
   ambil x 22,1-77,9% dan y 13-75% — di dalam ketiga batas di atas,
   dengan kain (x 33-67%, y 21-73%) tetap utuh dan bernapas.

   Tidak ada distorsi: sumbernya persegi dan hasilnya persegi —
   lebar tampil 179,211% x lebar bingkai, tinggi 161,290% x tinggi
   bingkai = 161,290% / 0,9 = 179,211% x lebar bingkai. Sama. */
.product-photo{position:relative}
.product-photo .shot{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .55s ease}
.product-photo .shot.on{opacity:1}
.product-photo .shot img{position:absolute;width:179.211%;height:161.290%;left:-39.606%;top:-20.968%;max-width:none;object-fit:fill;transition:transform 1.2s}
.product-photo:hover .shot.on img{transform:scale(1.04)}

/* --- 2. HARGA, SKU, TOMBOL BELI -----------------------------
   Harga dibaca dari ERP. Angka ditulis besar karena ini satu-satunya
   angka di halaman yang dicari orang. */
.harga{display:flex;align-items:baseline;gap:12px;margin:26px 0 4px;font-family:Georgia,'Times New Roman',serif}
.harga b{font-size:34px;font-weight:400;letter-spacing:-1px}
.harga .coret{font-size:15px;opacity:.55;text-decoration:line-through}
.harga .tanya{font-size:19px;opacity:.8}
.harga-nota{font-size:10px;letter-spacing:1px;opacity:.7;margin-bottom:6px}
.pill.beli{margin-top:26px}
.pill.beli:hover{background:#e7dac2}
.beli-lain{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.beli-lain a{font-size:10px;letter-spacing:1px;border-bottom:1px solid #f6f1e73d;padding:7px 0;transition:border-color .3s}
.beli-lain a:hover{border-color:#f6f1e7}

/* --- 3. KARTU UCAPAN ----------------------------------------
   Produk kedua di ERP. Tidak diberi panggung sendiri: ia memang
   barang tambahan, jadi tampil sebagai satu baris tenang. */
.tambahan{display:flex;align-items:center;gap:26px;margin-top:70px;padding-top:34px;border-top:1px solid #f6f1e73d}
.tambahan-gbr{width:104px;flex:0 0 104px;aspect-ratio:1;overflow:hidden;background:#e6ddcb;position:relative}
.tambahan-gbr img{position:absolute;width:179.211%;height:179.211%;left:-39.606%;top:-39.606%;max-width:none}
.tambahan-isi h4{font:400 24px/1.2 Georgia,serif;letter-spacing:-.6px;margin:0 0 7px}
.tambahan-isi p{font-size:12px;line-height:1.8;opacity:.82;max-width:430px}
.tambahan-aksi{margin-left:auto;text-align:right;white-space:nowrap}
.tambahan-aksi b{display:block;font:400 21px Georgia,serif;margin-bottom:9px}
.tambahan-aksi a{font-size:10px;letter-spacing:1px;border-bottom:1px solid #f6f1e73d;padding-bottom:6px}

/* --- 4. PITA JAMINAN ----------------------------------------
   Empat klaim yang ada di kemasan dan di foto produknya sendiri.
   Dibiarkan kecil dan mendatar: ini catatan kaki, bukan iklan. */
.jaminan{background:#eae5d8;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.jaminan-in{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 46px;padding:21px 7%;font-size:9px;letter-spacing:1.9px}
.jaminan-in span{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.jaminan-in svg{width:15px;height:15px;fill:none;stroke:var(--sage);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* --- 5. BERGABUNG -------------------------------------------
   Inilah alasan thelittleroo.id ada: pintu untuk affiliate,
   reseller dan grosir. Diberi pita gelap supaya berdiri sendiri
   di antara pita krem dan sage. */
.gabung{background:var(--ink);color:#f3ecdd}
.gabung .section-marker{border-color:#f6f1e733}
.gabung-head{margin:58px 0 44px;max-width:720px}
.gabung-head h2{font-size:clamp(40px,4.6vw,68px);line-height:1.08;letter-spacing:-2.4px}
.gabung-head h2 em{color:#b7bf9f}
.gabung-head p{font-size:13px;line-height:1.95;opacity:.8;margin-top:24px;max-width:520px}
.jalur-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:#f6f1e71f}
.jalur{background:var(--ink);padding:30px 26px 34px}
.jalur h3{font:400 25px/1.2 Georgia,serif;letter-spacing:-.8px;margin-bottom:11px}
.jalur p{font-size:12px;line-height:1.85;opacity:.76}
.jalur-ic{width:26px;height:26px;margin-bottom:18px;opacity:.75}
.jalur-ic svg{width:100%;height:100%;fill:none;stroke:#cdd3b6;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.gabung-cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:46px}
.pill.cream{background:#f3ecdd;color:var(--ink);min-width:210px}
.pill.cream:hover{background:#e3d8bf}
.pill.garis{background:transparent;color:#f3ecdd;border:1px solid #f6f1e759;min-width:210px}
.pill.garis:hover{background:#f6f1e714}
.gabung-nota{font:italic 13px Georgia,serif;opacity:.65;margin-top:30px;max-width:560px;line-height:1.7}

/* --- 6. DUA PINTU ------------------------------------------- */
.pintu-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding-top:50px}
.pintu{border:1px solid var(--line);padding:28px 26px 30px;transition:border-color .3s,transform .3s}
.pintu:hover{border-color:var(--sage);transform:translateY(-3px)}
.pintu-aktif{background:#eae5d8}
.pintu-nama{font:400 23px Georgia,serif;letter-spacing:-.5px;margin-bottom:12px}
.pintu-nama span{color:var(--sage)}
.pintu-nama em{font:italic 11px Georgia,serif;opacity:.6;margin-left:8px}
.pintu p{font-size:12px;line-height:1.85;opacity:.82;margin-bottom:16px}
.pintu>a{font-size:11px;letter-spacing:1px;border-bottom:1px solid var(--line);padding-bottom:6px}

/* --- 7. BLOG ------------------------------------------------ */
.tulisan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px;padding-top:50px}
.tulisan{display:block;transition:transform .35s}
.tulisan:hover{transform:translateY(-4px)}
.tulisan-gbr{aspect-ratio:4/3;overflow:hidden;background:#e6ddcb;margin-bottom:17px}
.tulisan-gbr img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.tulisan:hover .tulisan-gbr img{transform:scale(1.05)}
.tulisan-kat{font-size:8px;letter-spacing:2px;color:var(--sage);margin-bottom:9px}
.tulisan h3{font:400 22px/1.28 Georgia,serif;letter-spacing:-.6px;margin-bottom:9px}
.tulisan p{font-size:12px;line-height:1.8;opacity:.75}
.tulisan-semua{text-align:center;margin-top:44px}

/* --- 8. PROMOBAR + CADANGAN --------------------------------- */
.promobar{background:var(--sage);color:#f8f4ea;text-align:center;font-size:10px;letter-spacing:1.6px;padding:11px 16px;position:relative;z-index:30}
.promobar a{border-bottom:1px solid #f8f4ea80;padding-bottom:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Penanda sementara. pointer-events:none supaya ia tidak pernah
   menelan satu pun ketukan jari pada teks di bawahnya. Hapus
   bersama <span class="pratinjau"> saat halaman ini naik. */
.pratinjau{position:fixed;left:14px;bottom:14px;z-index:90;background:var(--ink);color:var(--cream);font-size:9px;letter-spacing:1.4px;padding:9px 14px;border-radius:50px;opacity:.78;pointer-events:none}

/* --- 9. FOOTER SUNGGUHAN ------------------------------------
   Rancangan memberi footer tiga kolom berisi tiga tautan jangkar.
   Situs ini punya tautan keluar yang harus tetap ada (toko Shopee,
   thelittleroo.id, blog), jadi kolom tautannya menjadi dua daftar. */
footer .kaki-kolom{display:flex;flex-direction:column;gap:9px;justify-content:start;font-size:10px}
footer .kaki-kolom strong{font-weight:400;font-size:8px;letter-spacing:2px;opacity:.55;margin-bottom:3px}
footer .kaki-kolom a{opacity:.85}
footer .kaki-kolom a:hover{opacity:1}

/* ============================================================
   PERBAIKAN PONSEL — setiap angka di bawah ini DIUKUR di 390px,
   bukan dikira-kira.
   ============================================================ */
@media(max-width:600px){

  /* (a) Judul utama 65px membuat "Pelukan besar." terbentang dari
         4px sampai 386px pada layar 390px — titiknya menyentuh tepi
         dan terbaca seperti terpotong. 46px menyisakan tepi yang
         sama dengan bagian halaman lain. */
  .hero h1{font-size:46px;letter-spacing:-2px}
  .collection-heading h2{font-size:40px;letter-spacing:-1.4px}
  .story h2,.moments h2{font-size:36px;letter-spacing:-1.2px}
  .closing h2,.gabung-head h2{font-size:36px;letter-spacing:-1.2px}
  .panorama-label p{font-size:31px}
  .product-copy h3{font-size:38px;margin:16px 0}
  .care h2{font-size:29px}

  /* (b) Tulisan 6-8px tidak bisa dibaca di ponsel mana pun. Dasar
         baru: 10px untuk label, 12px untuk kalimat. Huruf kapital
         berjarak butuh sedikit lebih besar daripada huruf biasa. */
  .scroll-note,.chapter-tag,.hero-bottom{font-size:10px;letter-spacing:1px}
  .section-marker,.section-marker>span:nth-child(2):not(.tiny-star){font-size:10px}
  .product-spec,.photo-label,.concept-caption{font-size:10px;letter-spacing:1px}
  .hero-copy .eyebrow,.care .eyebrow,.closing>.eyebrow,.dialog-head .eyebrow,
  .panorama-label>span,.product-copy .eyebrow{font-size:10px;letter-spacing:1.8px}
  .jaminan-in{font-size:10px;gap:12px 26px}
  .collection-heading p{font-size:12px;max-width:none}
  .harga b{font-size:30px}

  /* (c) Lima tautan tidak muat di 390px. Rancangan menyembunyikan
         tautan PERTAMA, apa pun isinya — di sini itu berarti cerita
         merek hilang sementara "Perawatan" bertahan. Yang disimpan
         sekarang adalah dua tautan yang menghasilkan sesuatu:
         Koleksi dan Bergabung. Sisanya tetap terjangkau dengan
         menggulir, dan ada di kaki halaman. */
  /* .nav nav a:first-child{display:block} DIHAPUS: pemilih itu
     (0,2,2) mengalahkan .nav-cerita (0,1,0), jadi "Cerita kami"
     tetap tampil dan — dengan nama merek penuh yang jauh lebih
     lebar daripada "TLRCO" — menabrak wordmark-nya. */
  .nav-cerita,.nav-rawat,.nav-blog{display:none}
  .nav nav{gap:18px;font-size:11px}
  .nav{padding:0 5%;gap:10px}

  /* (b2) Sisa huruf di bawah 10px yang ikut terbawa dari rancangan.
         Di layar desktop 6-8px adalah garis tipis huruf kapital dan
         memang bekerja sebagai ornamen; pada lebar 390px ia hanya
         jadi noda abu-abu. Angkanya dinaikkan hanya di ponsel. */
  .wordmark span{font-size:9px;letter-spacing:1.6px}
  .palette span{font-size:10px}
  summary>span{font-size:10px}
  footer .kaki-kolom strong{font-size:9px}
  .dialog-controls>span,.dialog-controls>label,.dialog-controls .text-link{font-size:10px}

  /* (d) Bagian baru di lebar ponsel */
  .tambahan{flex-wrap:wrap;gap:18px;margin-top:48px}
  .tambahan-aksi{margin-left:0;text-align:left;width:100%}
  .pintu-grid{grid-template-columns:1fr;gap:16px;padding-top:34px}
  .gabung-head{margin:36px 0 30px}
  .gabung-cta{margin-top:32px}
  .pill.cream,.pill.garis,.pill.beli{min-width:0;width:100%}
  .tulisan-grid{padding-top:34px;gap:26px}
  .pratinjau{left:10px;bottom:10px;font-size:8px}
}

/* Layar sangat sempit (360px dan ke bawah) */
@media(max-width:380px){
  .hero h1{font-size:41px}
  .nav nav{gap:10px}
}


/* ============================================================
   PUTARAN 2 — sudut foto, dan identitas merek yang sebenarnya
   ============================================================ */

/* --- 10. SUDUT FOTO DIBULATKAN -----------------------------
   Seluruh rancangan ini bulat: tombolnya pil penuh (100px),
   tombol kecilnya lingkaran, ilustrasinya dalam lingkaran. Hanya
   fotonya yang bersudut tajam, dan di tengah pita hijau itu
   sudut tajamnya yang paling terlihat.
   Bingkainya sudah overflow:hidden, jadi radius di bingkai
   memotong gambarnya ikut membulat. */
:root{--radius-foto:14px}
.product-photo,.tambahan-gbr,.tulisan-gbr{border-radius:var(--radius-foto)}
.product-photo .shot{border-radius:inherit}

/* --- 11. WORDMARK --------------------------------------------
   Lambang kanguru sempat dipasang di sini bersama nama merek
   lengkap dan tagline "PURE GENTLE LOVE". Pemilik menilainya
   jelek dan memilih kembali ke wordmark tipografis rancangan
   ("TLRCO"), jadi tidak ada aturan .wordmark di sini lagi.
   Berkas logonya ada di TLRCO/website/logo/ bila suatu saat
   dipakai.
   Yang TETAP tinggal hanya penjaga tabrakan di bawah: tanpa itu,
   satu tautan menu tambahan bisa menabrak wordmark tanpa ada
   yang melihatnya. */
.nav{gap:14px}.nav nav{flex:0 1 auto;min-width:0}
.wordmark{flex:0 1 auto;min-width:0}

/* --- 12. SYARAT TINGKAT MITRA ------------------------------
   Angkanya datang dari Master Data (10 pcs, 11-50, 50+), bukan
   dari kalimat yang diketik di halaman. Seorang calon reseller
   membaca bagian ini justru untuk angka itu. */
.jalur-syarat{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;opacity:.6;margin-top:14px;padding-top:12px;border-top:1px solid #f6f1e71f}

@media(max-width:600px){
  :root{--radius-foto:10px}
  .jalur-syarat{font-size:10px}
}
@media(max-width:380px){
}

/* --- 13. CELAH DI TEPI ATAS --------------------------------
   Terukur pada 1600x860: kotak .woodland mulai di y=95px, tapi
   gambarnya di-scale(1.025) dan kotak itu tidak memotong apa pun,
   jadi gambarnya meluap ke y=85 — tujuh piksel dedaunan muncul DI
   ATAS garis bawah menu (y=102), terbaca sebagai pita tipis yang
   tidak disengaja di tepi atas halaman.
   Gradien .landscape-wash sudah buram penuh di barisan paling
   atasnya; ia hanya tidak pernah sampai ke luapan itu. Memotong
   kotaknya membuat gambar dan gradiennya mulai di baris yang sama.
   Isinya aman dipotong: roo duduk di bottom 9%, benih-benihnya di
   dalam, dan .hero sendiri sudah overflow:hidden. */
.woodland{overflow:hidden}

/* --- 14. TOMBOL LAGU ----------------------------------------
   Mewarisi gaya tombol "Jeda gerak" yang baru saja dihapus, dan
   menempati tempatnya di header — jadi susunan tiga bagian yang
   dirancang (wordmark | menu | tombol) kembali seimbang.

   Not musiknya digambar sebagai SVG, bukan karakter ♪: karakter
   itu bisa muncul sebagai emoji berwarna di sebagian sistem dan
   sebagai kotak kosong di sistem lain. SVG tidak bergantung pada
   huruf apa pun.

   Saat berbunyi, lingkarannya terisi dan sebuah cincin lembut
   berdenyut sekali setiap 2,4 detik — cukup untuk menjawab "apakah
   ini yang sedang bersuara?" tanpa jadi lampu peringatan. */
.lagu-button .motion-icon{position:relative;transition:background .35s,color .35s,border-color .35s}
.lagu-button svg{width:13px;height:13px;fill:currentColor;display:block}
.lagu-button.lagu-on .motion-icon{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.lagu-button.lagu-on .motion-icon:after{content:'';position:absolute;inset:-5px;border:1px solid var(--ink);border-radius:50%;opacity:0;animation:laguDenyut 2.4s ease-out infinite}
.lagu-button.lagu-gagal{opacity:.45;cursor:default}
@keyframes laguDenyut{0%{transform:scale(.88);opacity:.5}70%{transform:scale(1.18);opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.lagu-button.lagu-on .motion-icon:after{animation:none}}
/* Keadaan "memuat": penekanan pertama selalu berarti menunggu 1,0 MB
   terunduh. Titik yang berputar pelan menjawab "sudah kutekan belum?"
   tanpa menjanjikan bahwa bunyinya sudah keluar. */
.lagu-button.lagu-memuat .motion-icon{opacity:.55}
.lagu-button.lagu-memuat .motion-icon:after{content:'';position:absolute;inset:-4px;border:1px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:laguPutar 1s linear infinite}
@keyframes laguPutar{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.lagu-button.lagu-memuat .motion-icon:after{animation:none;border-top-color:var(--line)}}

/* --- 15. KEMASAN RITEL -------------------------------------
   Foto kotak kemasan asli milik pemilik (tangannya dipotong,
   kotaknya diluruskan). Bentuknya mengikuti baris kartu ucapan
   yang sudah ada, supaya tidak ada tata letak baru untuk dirawat.

   KENAPA INI BUKAN PEMILIH WARNA, dan itu disengaja:
   kain yang terlihat di jendela die-cut ada DI DALAM kotak, di
   balik bayangan. Diukur terhadap foto studio kainnya, warnanya
   meleset ΔE 14-23 pada kelima varian — jauh di atas ambang
   "jelas berbeda" (ΔE 10). Retouch tidak bisa memperbaikinya;
   itu bayangan, bukan kesalahan warna. Jadi bulatan warna tetap
   diambil dari foto KAIN (warnaKain), foto ini hanya menunjukkan
   KEMASANNYA, dan keterangannya mengatakan hal itu apa adanya. */
.kemasan{display:flex;align-items:center;gap:30px;margin-top:66px;padding-top:34px;border-top:1px solid #f6f1e73d}
.kemasan-foto{position:relative;width:188px;flex:0 0 188px;aspect-ratio:1;border-radius:var(--radius-foto);overflow:hidden;background:#efece4}
.kemasan-foto .kotak{position:absolute;inset:0;opacity:0;transition:opacity .55s ease}
.kemasan-foto .kotak.on{opacity:1}
.kemasan-foto img{width:100%;height:100%;object-fit:contain;display:block}
.kemasan-isi{max-width:470px}
.kemasan-isi h4{font:400 25px/1.2 Georgia,'Times New Roman',serif;letter-spacing:-.7px;margin:0 0 9px}
.kemasan-isi p{font-size:12px;line-height:1.85;opacity:.85}
.kemasan-isi .catatan{display:block;margin-top:11px;font:italic 11px/1.7 Georgia,serif;opacity:.62}
@media(max-width:600px){
  .kemasan{flex-wrap:wrap;gap:20px;margin-top:46px}
  .kemasan-foto{width:150px;flex-basis:150px}
  .kemasan-isi{max-width:none}
  .kemasan-isi h4{font-size:23px}
  .kemasan-isi p{font-size:12px}
  .kemasan-isi .catatan{font-size:11px}
}

/* --- 16. PEMBACA CERITA ------------------------------------
   Aturan di bawah ini disalin dari rancangan ChatGPT, disaring
   supaya hanya aturan .roo-book / .roo-storybook yang ikut —
   bagian "color theatre"-nya TIDAK diambil, karena pemilih warna
   di halaman ini sudah terhubung ke data ERP.

   Satu tambahan sendiri: .roo-book-picture img diberi rasio tetap
   supaya panelnya tidak melompat saat gambar yang dimuat malas
   akhirnya tiba. */
.roo-book-page[hidden]{display:none!important}
.roo-storybook{background:#eae3d6;padding-top:78px;padding-bottom:78px;overflow:hidden}
.roo-book-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin:38px 0}
.roo-book-heading h2{font-size:clamp(39px,4.6vw,64px);line-height:1.08;letter-spacing:-2px}
.roo-book-heading em{color:var(--sage)}
.roo-book-heading>p{font-size:12px;line-height:1.8;max-width:230px;opacity:.75}
.roo-book-stage{background:#f8f4eb;box-shadow:0 18px 50px #4f47390b;border:1px solid #4f473914;position:relative;border-radius:3px;overflow:hidden;touch-action:pan-y}
.roo-book-page{display:grid;grid-template-columns:.78fr 1.22fr;min-height:500px}
.roo-book-page.is-current{animation:story-reveal .65s ease-out both}
.roo-book-copy{padding:55px 32px 55px 42px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}
.story-page-number{font-size:8px;letter-spacing:2px;opacity:.65;margin-bottom:26px}
.roo-book-copy h3{font-size:clamp(28px,3vw,43px);line-height:1.13;letter-spacing:-1.3px;margin-bottom:25px}
.roo-book-copy blockquote{font:18px/1.65 Georgia,serif;margin:0 0 15px}
.roo-book-copy p{font-size:12px;line-height:1.95;opacity:.8}
.story-whisper{font:italic 14px/1.6 Georgia,serif!important;color:var(--sage);opacity:1!important;margin-top:21px}
.roo-book-picture{margin:0;overflow:hidden;background:#f8f4eb;position:relative;align-self:stretch}
.roo-book-picture img{width:100%;height:100%;object-fit:cover;object-position:center;animation:storybook-float 14s ease-in-out infinite alternate;transform-origin:center 70%}
.roo-book-picture:before{content:'';position:absolute;z-index:1;inset:0 auto 0 0;width:48px;background:linear-gradient(90deg,#f8f4eb,transparent);pointer-events:none}
.roo-book-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:23px;flex-wrap:wrap}
.roo-book-pagination{display:flex;align-items:center;gap:13px}
.roo-book-pagination [role=tab]{height:9px;width:9px;padding:0;border:1px solid var(--sage);border-radius:50%;background:transparent}
.roo-book-pagination [aria-selected=true]{background:var(--sage);transform:scale(1.2)}
.roo-book-arrows{display:flex;align-items:center;gap:15px}
.roo-book-arrows button{height:34px;width:34px;border-radius:50%;border:1px solid var(--line);background:transparent;font-size:18px}
.roo-book-status{font-size:9px;letter-spacing:.8px}
.roo-book-play{background:transparent;font-size:10px;border-bottom:1px solid var(--line);padding:9px 0}
.roo-book-hint{font-size:9px;line-height:1.7;opacity:.65;text-align:center;margin-top:24px}
.roo-book-label{font-size:9px;letter-spacing:1px;text-align:center;opacity:.7}
@media(max-width:900px){.roo-book-page{grid-template-columns:.9fr 1.1fr;min-height:450px}
.roo-book-copy{padding:35px 25px}
.roo-book-copy blockquote{font-size:16px}
.roo-book-heading>p{max-width:190px}}
@media(max-width:600px){.roo-storybook{padding-top:55px;padding-bottom:55px}
.roo-book-heading{display:block;margin:32px 0}
.roo-book-heading h2{font-size:43px}
.roo-book-heading>p{margin-top:20px;max-width:100%;font-size:11px}
.roo-book-page{display:flex;flex-direction:column-reverse;min-height:0}
.roo-book-picture{aspect-ratio:4/3;width:100%}
.roo-book-picture img{height:100%;object-fit:cover}
.roo-book-picture:before{inset:auto 0 0;width:100%;height:30px;background:linear-gradient(0deg,#f8f4eb,transparent)}
.roo-book-copy{padding:25px 24px 30px;min-height:310px}
.story-page-number{margin-bottom:16px;font-size:7px}
.roo-book-copy h3{font-size:31px;margin-bottom:18px}
.roo-book-copy blockquote{font-size:17px;line-height:1.6}
.roo-book-copy p{font-size:11px}
.roo-book-controls{gap:15px}
.roo-book-label{order:3;width:100%;font-size:8px}
.roo-book-status{font-size:8px}
.roo-book-pagination{gap:10px}}
@media(prefers-reduced-motion:reduce){.roo-book-page.is-current,.roo-book-picture img{animation:none!important}}
.motion-paused .roo-book-page,.motion-paused .roo-book-picture img{animation:none!important}

/* Panel cerita punya rasio tetap sendiri: gambarnya dimuat malas,
   dan tanpa ini panelnya melompat saat gambarnya akhirnya tiba. */
/* Reserve the illustration panel even while loading; a failed asset gets a real fallback. */
.roo-book-picture{min-height:0;aspect-ratio:4/3}
.roo-book-picture img{position:absolute;inset:0;width:100%;height:100%}
.roo-book-picture img[hidden],.story-image-status[hidden]{display:none!important}
.story-image-status{position:absolute;inset:0;margin:0;padding:28px;display:grid;place-content:center;text-align:center;font:italic 15px/1.8 Georgia,serif;color:#747d63;background:#f8f4eb}
.roo-book-picture.is-unavailable:before{display:none}

/* --- 17. HERO: ROO KECIL MELOMPAT ---------------------------
   Disalin apa adanya dari rancangan ChatGPT (style.css baris
   38-110): gerak sendi, kupu-kupu, burung, rumput dan dukungan
   prefers-reduced-motion. Termasuk aturan yang menyembunyikan
   .roo-family lama begitu modulnya terpasang — markup hero
   sebelumnya tetap jadi cadangan bila skripnya gagal. */
/* TLRCO HERO MEADOW MOTION — brand illustration only, 29 October 2026. */
.roo-playground,.meadow-atmosphere{display:none}
.has-meadow-motion .roo-position>.roo-family{display:none}
.has-meadow-motion .roo-playground,.has-meadow-motion .meadow-atmosphere{display:block}
.has-meadow-motion .roo-position{z-index:3}
.roo-playground{position:relative;width:100%;aspect-ratio:1.55;isolation:isolate}
.roo-actor{position:absolute;bottom:0;padding:0;background:none;border:0;pointer-events:auto;transform-origin:50% 95%;-webkit-user-select:none;user-select:none;touch-action:manipulation;cursor:pointer;border-radius:45%}
.roo-actor:focus-visible{outline:1px dashed #7d765c;outline-offset:4px}
.roo-mother{right:-8%;width:78%;z-index:2}.roo-joey{left:-3%;width:43%;z-index:3}
.roo-hop-arc,.roo-hop-body{display:block;width:100%;transform-origin:58% 96%}
.roo-sprite{display:block;width:100%;height:auto;pointer-events:none;filter:drop-shadow(0 3px 2px #4f473908);-webkit-user-drag:none}
.roo-mother .roo-sprite{transform-origin:45% 98%;animation:meadow-mother-breathe 6.2s ease-in-out infinite}
.roo-joey .roo-sprite{transform-origin:65% 98%;animation:meadow-joey-listen 5.4s ease-in-out infinite}
.roo-actor.is-hopping .roo-sprite{animation-play-state:paused}
.roo-ground-shadow{position:absolute;bottom:3%;height:4%;border-radius:50%;background:radial-gradient(ellipse,#79694e80,transparent 72%);opacity:.18;z-index:0;pointer-events:none}
.roo-shadow-mother{left:45%;width:39%}.roo-shadow-joey{left:13%;width:27%}
.roo-dust{position:absolute;left:28%;bottom:5%;width:1px;height:1px;pointer-events:none;z-index:4}
.roo-dust i{position:absolute;inset:0;width:4px;height:3px;background:#af946b;opacity:0;border-radius:50%}
.roo-dust i:nth-child(even){width:3px;height:2px;background:#d1b996}
.roo-hint{position:absolute;bottom:-22px;left:8%;font:italic 10px/1.4 Georgia,serif;letter-spacing:.3px;white-space:nowrap;color:#776d59;opacity:.75;pointer-events:none}
.roo-hint>span{display:inline-block;margin-left:5px;animation:meadow-hint-nudge 3.5s ease-in-out infinite}
.roo-whisper{position:absolute;left:50%;bottom:100%;transform:translate(-50%,0);font:italic 11px/1.5 Georgia,serif;background:#faf6ebed;color:#655c49;padding:8px 15px;border:1px solid #bfb29a45;border-radius:30px;box-shadow:0 3px 10px #67583605;min-width:180px;text-align:center;pointer-events:none;opacity:0;transition:opacity .25s;z-index:6}
.roo-whisper.is-speaking{opacity:1}
.meadow-atmosphere{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.meadow-butterfly{position:absolute;width:54px;height:54px;padding:0;background:none;pointer-events:auto;touch-action:manipulation;cursor:pointer;border-radius:50%;transform-origin:center;will-change:transform}
.butterfly-near{left:26%;top:70%;animation:meadow-butterfly-near 17s ease-in-out infinite}
.butterfly-far{right:20%;top:64%;width:44px;height:44px;opacity:.8;animation:meadow-butterfly-far 21s -7s ease-in-out infinite}
.meadow-butterfly:hover,.meadow-butterfly:focus-visible{animation-play-state:paused}
.meadow-butterfly:focus-visible{outline:1px dashed #958268;outline-offset:4px}
.butterfly-hover{position:absolute;inset:7px;display:block;perspective:180px}
.butterfly-wing,.butterfly-core{position:absolute;inset:0;display:block;transform-origin:50% 50%;pointer-events:none}
.butterfly-wing img,.butterfly-core img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.wing-left{clip-path:inset(0 50% 0 0);animation:meadow-wing-left .62s ease-in-out infinite}
.wing-right{clip-path:inset(0 0 0 50%);animation:meadow-wing-right .62s ease-in-out infinite}
.butterfly-core{clip-path:inset(0 47% 0 47%)}
.butterfly-far .wing-left,.butterfly-far .wing-right{animation-duration:.74s;animation-delay:-.2s}
.meadow-sunlight{position:absolute;width:190px;height:190px;right:15%;bottom:14%;background:radial-gradient(ellipse,#fff4c634,transparent 69%);border-radius:50%;mix-blend-mode:screen;animation:meadow-sunlight 9s ease-in-out infinite}
.grass-tuft{position:absolute;bottom:10%;width:32px;height:24px;transform-origin:50% 100%;animation:meadow-grass-sway 5.5s ease-in-out infinite;opacity:.45}
.grass-a{left:19%}.grass-b{right:23%;bottom:7%;transform:scale(.8);animation-delay:-2.3s}.grass-c{right:8%;bottom:13%;transform:scale(.65);opacity:.3;animation-delay:-3.7s}
.grass-tuft i{position:absolute;bottom:0;left:50%;width:2px;height:21px;border-radius:80% 10% 0 0;background:#7f8568;transform-origin:50% 100%;transform:rotate(-32deg)}
.grass-tuft i:nth-child(2){height:26px;transform:rotate(-16deg);background:#a2a184}.grass-tuft i:nth-child(3){height:30px;transform:rotate(4deg)}.grass-tuft i:nth-child(4){height:23px;transform:rotate(25deg);background:#9d9d7d}.grass-tuft i:nth-child(5){height:16px;transform:rotate(43deg)}
@keyframes meadow-mother-breathe{0%,100%{transform:scaleY(1) rotate(-.15deg)}50%{transform:scaleY(1.009) rotate(.25deg)}}
@keyframes meadow-joey-listen{0%,70%,100%{transform:rotate(0)}35%{transform:rotate(-1deg)}}
@keyframes meadow-hint-nudge{0%,75%,100%{transform:translate(0,0)}85%{transform:translate(2px,-2px)}}
@keyframes meadow-wing-left{0%,100%{transform:rotateY(0deg)}50%{transform:rotateY(68deg)}}
@keyframes meadow-wing-right{0%,100%{transform:rotateY(0deg)}50%{transform:rotateY(-68deg)}}
@keyframes meadow-butterfly-near{0%,100%{transform:translate(0,0) rotate(-12deg)}20%{transform:translate(4vw,-30px) rotate(8deg)}42%{transform:translate(10vw,-13px) rotate(-6deg)}65%{transform:translate(7vw,-58px) rotate(15deg)}82%{transform:translate(1vw,-32px) rotate(-8deg)}}
@keyframes meadow-butterfly-far{0%,100%{transform:translate(0,0) rotate(12deg)}24%{transform:translate(-5vw,-26px) rotate(-9deg)}48%{transform:translate(-8vw,8px) rotate(8deg)}75%{transform:translate(-3vw,25px) rotate(-12deg)}}
@keyframes meadow-grass-sway{0%,100%{rotate:-3deg}50%{rotate:4deg}}
@keyframes meadow-sunlight{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:.85;transform:scale(1.12)}}
.hero-meadow-resting .roo-playground *,.hero-meadow-resting .meadow-atmosphere *{animation-play-state:paused!important}
.motion-paused .roo-hop-arc,.motion-paused .roo-hop-body,.motion-paused .butterfly-hover{transform:none!important}
@media(max-width:600px){.roo-playground{aspect-ratio:1.55}.roo-hint{font-size:8px;bottom:-17px;left:6%}.roo-whisper{font-size:9px;min-width:165px;padding:7px 10px;bottom:105%}.butterfly-near{left:12%;top:75%;width:46px;height:46px}.butterfly-far{right:11%;top:67%;width:40px;height:40px;opacity:.7}.meadow-sunlight{width:130px;height:130px;right:10%;bottom:15%}.grass-a{left:13%;bottom:8%}.grass-b{right:15%;bottom:10%}.grass-c{display:none}}
@media(prefers-reduced-motion:reduce){.roo-playground *,.meadow-atmosphere *{animation:none!important;transition:none!important}.roo-hop-arc,.roo-hop-body,.butterfly-hover{transform:none!important}.roo-hint>span{transform:none}}

/* HERO — smaller butterflies and distant birds. */

.meadow-butterfly{width:44px;height:44px}.butterfly-hover{inset:13px}.butterfly-far .butterfly-hover{inset:16px}
.meadow-bird-flock{position:absolute;left:14%;top:60%;width:160px;height:43px;opacity:.52;animation:meadow-flock-travel 36s ease-in-out infinite;pointer-events:none}
.meadow-bird{position:absolute;width:14px;height:8px}.meadow-bird svg{display:block;width:100%;height:100%;overflow:visible}
.bird-wing,.bird-breast{fill:none;stroke:#857960;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bird-wing{transform-origin:18px 13px;animation:meadow-bird-wing .95s ease-in-out infinite}
.bird-wing-right{animation-name:meadow-bird-wing-right}.bird-2{left:28px;top:12px;width:10px;opacity:.72}.bird-3{left:61px;top:-5px;width:13px}.bird-4{left:91px;top:14px;width:11px;opacity:.68}.bird-5{left:123px;top:4px;width:9px;opacity:.65}
.bird-2 .bird-wing,.bird-4 .bird-wing{animation-delay:-.35s;animation-duration:1.15s}.bird-3 .bird-wing,.bird-5 .bird-wing{animation-delay:-.7s;animation-duration:1.05s}
@keyframes meadow-bird-wing{0%,100%{transform:rotate(-9deg) scaleY(.5)}50%{transform:rotate(7deg) scaleY(1)}}
@keyframes meadow-bird-wing-right{0%,100%{transform:rotate(9deg) scaleY(.5)}50%{transform:rotate(-7deg) scaleY(1)}}
@keyframes meadow-flock-travel{0%,100%{transform:translate(0,0)}50%{transform:translate(21vw,-18px)}}
@media(max-width:600px){.meadow-butterfly{width:44px;height:44px}.butterfly-hover{inset:14px}.butterfly-far .butterfly-hover{inset:17px}.meadow-bird-flock{left:9%;top:64%;width:130px;opacity:.45}.meadow-bird{width:11px;height:6px}.bird-2{left:22px}.bird-3{left:48px}.bird-4{left:74px}.bird-5{left:98px}}
@media(prefers-reduced-motion:reduce){.meadow-bird-flock,.bird-wing{animation:none!important}}

/* ROO LEG FIX — original intact silhouette, continuous skin deformation. */
.roo-joey .roo-sprite{display:block}.roo-joey-mesh{display:none;width:100%;height:auto;pointer-events:none;filter:drop-shadow(0 2px 2px #4f473907)}.roo-joey.has-joey-skin .roo-sprite{display:none}.roo-joey.has-joey-skin .roo-joey-mesh{display:block}


/* --- 18. PETUNJUK HERO vs BARIS BAWAH -----------------------
   Diukur di 390px: petunjuk "sentuh Roo kecil" berada di
   l85-r161 t755-766, sedangkan "SCROLL PELAN, TEMUKAN CERITANYA"
   di l23-r233 t737-768 — keduanya bertumpuk. Di layar lebar
   keduanya berjauhan, jadi perbaikannya hanya untuk ponsel:
   petunjuknya naik ke atas baris itu, rata tengah. */
@media(max-width:600px){
  /* .roo-hint berjangkar pada .roo-position (induknya), bukan pada
     hero — jadi bottom negatif kecil menaruhnya tepat di bawah kaki
     Roo, persis di baris yang sama dengan teks gulir. Dinaikkan ke
     ATAS .roo-position, ke langit yang kosong, dan dirata-tengahkan
     terhadap kedua Roo. 10px karena 8px tidak terbaca di ponsel. */
  .roo-hint{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);font-size:10px;opacity:.72}
}


/* --- 19. KETERBACAAN: WARNA, ALAS, DAN UKURAN TERKECIL -------
   Pemilik: "ada beberapa tulisan tidak terlihat ... yang tidak
   pada tempatnya, dan yang kurang terlihat."

   Semua angka di bawah ini DIUKUR di halaman hidup (30 Okt 2026),
   bukan dikira-kira: untuk setiap teks diambil warna latar yang
   benar-benar ada di bawah hurufnya — piksel ilustrasi untuk yang
   di atas hero, warna latar sendiri untuk yang di dalam tombol —
   lalu dihitung rasio kontrasnya. 45 dari 155 teks di bawah 4.5
   (3 untuk teks besar), ambang yang dipakai supaya terbaca di
   layar ponsel dan di bawah cahaya terang. */

/* A. LABEL DI ATAS ILUSTRASI HERO PERLU ALAS, BUKAN WARNA LAIN.
      Diukur di bawah hurufnya, latar di sana membentang dari
      luminans 0.10 (dedaunan gelap) sampai 0.82 (langit pucat).
      Tidak ada SATU pun warna teks yang bisa lulus di kedua ujung
      itu — yang cukup gelap untuk langit terlalu gelap untuk
      dedaunan, dan sebaliknya. Jadi yang harus diubah adalah
      latarnya, bukan tintanya. Alas krem tipis memakai pola yang
      sudah dipakai desain ini (.concept-caption).
      Sesudah: SCROLL 1.62 -> 6.6, 01/THE MEADOW 2.21 -> 6.6,
      "sentuh Roo kecil" 1.32 -> 4.9. */
.hero-bottom .hb-teks,
.hero-bottom .chapter-tag,
.roo-playground .roo-hint{
  background:rgba(249,244,233,.86);
  border-radius:50px;
  padding:5px 11px;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
/* .scroll-note memuat garis gulir DAN teksnya; alasnya hanya untuk
   teks, supaya garisnya tetap berdiri bebas seperti rancangannya. */
.hero-bottom .scroll-note{gap:10px}
.roo-playground .roo-hint{opacity:1;color:#6b6150}

/* B. Paragraf hero kurang 0.03 dari ambang (4.47). Digelapkan
      sedikit saja — tidak perlu alas, latarnya di sana rata pucat. */
.hero-copy .hero-desc{color:#756a57}

/* C. Bilah pratinjau DIHAPUS pada 30 Okt 2026 — halaman ini sudah
      menjadi halaman depan, jadi tidak ada lagi yang perlu ditandai.
      Dicatat di sini karena satu hal mudah terlupakan kalau bilahnya
      dipasang lagi: .nav adalah position:absolute top:0 di TINGKAT
      BODY, jadi ia tidak ikut terdorong oleh elemen di atasnya — ia
      harus digeser sendiri sebesar tinggi bilah itu, dan tinggi itu
      harus dipastikan (nowrap), karena teks yang membungkus akan
      mengubahnya dan merusak kesejajarannya.
      Aturan lama .pratinjau (position:fixed) di blok 7 dan 12
      dibiarkan: tidak ada elemen yang memakainya lagi. */

/* D. BAGIAN KOLEKSI: HIJAUNYA YANG HARUS TURUN, BUKAN TEKSNYA.
      Pada #757d65, teks krem hanya mencapai 3.96 — dan teks PUTIH
      MURNI pun hanya 4.31. Jadi tidak ada warna teks apa pun yang
      bisa lulus di atas hijau itu; 14 teks di bagian ini gagal
      karenanya. Hijaunya diperdalam 24% (#595f4d, masih keluarga
      sage yang sama): krem penuh jadi 6.09, dan opasitas serendah
      .80 pun lulus (4.59) sehingga hierarki redupnya tetap ada. */
.collection{background:#595f4d}
/* lantai opasitas .80 untuk yang sebelumnya .62-.75 */
.collection .collection-heading p,
.collection .product-copy .eyebrow,
.collection .palette span,
.collection .variant-note,
.collection .small-note,
.collection .kemasan-isi .catatan{opacity:.8}

/* E. Opasitas yang terlalu rendah di latar krem/batu.
      Masing-masing dinaikkan ke angka terkecil yang lulus, bukan
      ke 1, supaya bedanya dengan teks utama tetap terasa. */
.moment-tabs button{opacity:.78}
.moment-tabs button[aria-selected=true]{opacity:1}
.roo-book-heading p{opacity:.81}
.roo-book-copy .story-page-number{opacity:.77}
.roo-book-hint{opacity:.81}
.care-intro>p:last-child{opacity:.81}
.care-accordion summary>span{opacity:.81}
.care-accordion details>p{opacity:.81}
.pintu-aktif .pintu-nama em{opacity:.81}
.gabung-nota{opacity:.7}
footer .kaki-kolom strong{opacity:.78}
footer small{opacity:.78}

/* F. Warna yang terlalu pucat di latar krem (opasitasnya sudah 1,
      jadi hanya tintanya yang bisa diubah). */
.story-title .signature{color:#766c5c}
.quiet-caption{color:#746c5f}
.roo-book-copy .story-whisper{color:#6b735b}
.pintu .pintu-nama span{color:#687059}
.pintu-aktif .pintu-nama span{color:#616953}

/* G. TIDAK ADA TEKS DI BAWAH 9px.
      Label mikro di sini ada yang 7px dan 8px — terbaca di layar
      perancang, tidak di layar orang lain. 9px dipilih karena itu
      ukuran terkecil yang SUDAH dipakai sistem ini (.eyebrow),
      jadi tidak ada ukuran baru yang masuk. */
.section-marker{font-size:9px}
.product-spec{font-size:9px}
.photo-label,.concept-caption{font-size:9px}
.hero-bottom{font-size:9px}
.panorama-label>span{font-size:9px}
.care-accordion summary>span{font-size:9px}
.roo-book-copy .story-page-number{font-size:9px}
footer small{font-size:9px}
footer .kaki-kolom strong{font-size:9px}
@media(max-width:600px){
  .section-marker{font-size:9px}
  .section-marker>span:nth-child(2):not(.tiny-star){font-size:9px}
  .scroll-note,.chapter-tag{font-size:9px}
  .product-spec{font-size:9px}
  .roo-book-copy .story-page-number{font-size:9px}
}

/* H. FOTO PRODUK: POTONGAN YANG TIDAK BISA TEREGANG, DAN LEBIH LEGA.
      Dua hal yang terukur:
      1) Potongan lama ditulis sebagai lebar/tinggi persen yang
         dihitung untuk SATU rasio bingkai. Bingkai ini punya tiga
         rasio di tiga lebar layar (.95, 1.1, .9); kebetulan yang
         menang .9 sehingga sekarang tidak teregang — tetapi satu
         perubahan rasio saja akan meregangkan fotonya tanpa ada
         yang memberi tahu. Diganti object-fit:cover + transform,
         yang menjaga rasio sumber di rasio bingkai MANA PUN.
      2) Bingkainya terlalu rapat: alas kain hanya 3% dari tepi
         bawah, sedangkan di atasnya 13%. Diukur pada kelima foto,
         kainnya ada di x 33-67% dan y 21-75% dari sumber, kartu
         putihnya mulai y 8.3%, teks klaimnya mulai y 78%, dan tag
         "SPECIAL PRICE" di x 89%. Jendela baru x 19.6-80.4%,
         y 9.5-77% adalah yang paling lega yang masih muat di
         antara semua batas itu: kain jadi 76% tinggi bingkai
         (sebelumnya 84%), dengan udara di atas dan di sampingnya.
      scale = 1/0.675 = 1.4815 ; geser = 6.75% x 1.4815 = 10% */
.product-photo .shot img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  transform:translateY(10%) scale(1.4815);
  transform-origin:50% 50%;
  left:auto; top:auto; max-width:100%;
}
.product-photo:hover .shot.on img{transform:translateY(10%) scale(1.5407)}


/* --- 20. TOMBOL UTAMA, KEMASAN RITEL, DAN IKON ---------------
   Pemilik: "kemasan ritel kurang terlihat dan kurang terpoles.
   tombol lihat koleksi terlalu kecil." Keduanya diukur dulu. */

/* A. TOMBOL "LIHAT KOLEKSI" — ajakan utama seluruh halaman.
      Terukur 210x58 dengan huruf 11px, sementara judul di atasnya
      100px. Perbandingan itu yang membuatnya terbaca kecil, bukan
      kotaknya: kotaknya sudah cukup untuk disentuh. Jadi yang
      dinaikkan hurufnya (11 -> 15px) dan ruangnya ikut menyesuaikan.
      Hanya pil INI yang dibesarkan — pil lain di halaman tetap,
      supaya ajakan utama punya urutan yang jelas di atas yang lain. */
.hero-copy .pill.intro{
  font-size:15px; min-width:272px; padding:22px 34px; gap:38px;
  letter-spacing:.2px;
}
.hero-copy .pill.intro span{font-size:23px}
@media(max-width:600px){
  .hero-copy .pill.intro{font-size:13px;min-width:230px;padding:19px 27px;gap:28px}
  .hero-copy .pill.intro span{font-size:20px}
}

/* B. KEMASAN RITEL — fotonya 188px di dalam pita selebar 1131px,
      jadi dua pertiga barisnya kosong dan fotonya terbaca sebagai
      tempelan kecil. Padahal foto itu membawa hal yang paling
      berharga di bagian ini: jendela Roo dan lencana OEKO-TEX pada
      kotaknya — bukti, bukan hiasan, dan tidak terbaca pada 188px.
      Dibesarkan ke 340px, teksnya dilebarkan supaya barisnya penuh,
      dan fotonya diberi bayangan lembut + garis tepi tipis supaya
      terangkat dari hijau, bukan menempel rata di atasnya. */
.kemasan{gap:46px; align-items:center}
.kemasan-foto{
  width:340px; flex:0 0 340px;
  box-shadow:0 18px 42px rgba(23,28,18,.28), 0 2px 6px rgba(23,28,18,.18);
  outline:1px solid rgba(250,245,233,.16); outline-offset:0;
}
.kemasan-foto img{object-fit:cover}
.kemasan-isi{max-width:560px}
.kemasan-isi h4{font-size:29px; margin-bottom:12px}
.kemasan-isi p{font-size:13px; line-height:1.9}
.kemasan-isi .catatan{font-size:12px; margin-top:14px}
/* Di antara ponsel dan desktop fotonya mengecil bertahap, bukan
   melompat: 340px tidak muat bersama teks di bawah ~1000px. */
@media(max-width:1100px){
  .kemasan{gap:34px}
  .kemasan-foto{width:260px; flex-basis:260px}
  .kemasan-isi h4{font-size:26px}
}
@media(max-width:600px){
  .kemasan{gap:22px}
  .kemasan-foto{width:200px; flex-basis:200px}
  .kemasan-isi h4{font-size:23px}
  .kemasan-isi p{font-size:12px}
  .kemasan-isi .catatan{font-size:11px}
}


/* --- 21. LATAR HERO BARU + DUA LATAR YANG BURAM ---------------
   Pemilik: "background gambar 1 blur ... background gambar 2 juga
   blur", "buat background sampai ke navigation atas", dan setelah
   melihat demo ChatGPT: "jadi seperti ini seperti buatan chatgpt".

   Blok ini berbasis hero-creek.css kiriman ChatGPT, DIKURANGI
   bagian yang menimpa perbaikan yang sudah terukur di sini:
   alas label hero (blok 19 A) dan ukuran pil TIDAK diambil dari
   sana — yang di sini sudah diukur lulus kontras. */

/* A. LATARNYA SAMPAI KE ATAS.
      Sebelumnya .woodland mulai 11% dari atas, jadi ada pita krem
      polos di belakang bilah nav dan ilustrasinya seperti dipotong.
      inset:0 membuatnya penuh dari tepi atas; -1% di sisi menutup
      celah saat lapisan ini digeser oleh gerak paralaks. */
.hero.hero-creek{background:#f8f4eb}
.hero-creek .woodland{inset:0 -1% -2%}
.hero-creek .hero-creek-picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.hero-creek .landscape{width:100%;height:100%;object-fit:cover;object-position:50% 100%;filter:none}
/* Adegan baru sudah berkabut; cahaya kuning tambahan membuatnya keruh. */
.hero-creek .meadow-sunlight{display:none}
/* Nav berdiri DI ATAS ilustrasi sekarang, jadi garis bawahnya
   dilembutkan — garis pekat di atas gambar terbaca seperti potongan. */
.hero-creek .nav{border-bottom-color:rgba(79,71,57,.14)}
/* Kabutnya cukup pekat di puncak gambar untuk menahan teks nav;
   lapisan cuci ini yang menjaganya, dan diukur setelah dipasang. */
.hero-creek .landscape-wash{
  background:linear-gradient(180deg,
    rgba(248,244,235,.88) 0%, rgba(248,244,235,.62) 12%,
    rgba(248,244,235,.30) 30%, rgba(248,244,235,.06) 58%, transparent 75%);
}
@media(max-width:600px){
  .hero-creek .woodland{inset:0 -1% -2%}
  .hero-creek .landscape{object-position:50% 100%}
  .hero-creek .landscape-wash{
    background:linear-gradient(180deg,
      rgba(248,244,235,.9) 0%, rgba(248,244,235,.55) 14%,
      rgba(248,244,235,.22) 38%, transparent 68%);
  }
}

/* B. TOMBOL UTAMA — disamakan dengan demo ChatGPT, atas permintaan.
      Angka ChatGPT = angka .pill dasar: 11px, padding 18/25,
      min-width 210. Itu PERSIS ukuran yang tadi dinilai terlalu
      kecil; yang membuatnya tampak lebih besar di tangkapan layar
      ChatGPT adalah jendelanya yang ~1235px, bukan 1920. Jadi blok
      20 A dibatalkan di sini, bukan dihapus — kalau ternyata terasa
      kecil lagi, hapus aturan ini dan blok 20 A kembali berlaku. */
.hero-copy .pill.intro{
  font-size:11px; min-width:210px; padding:18px 25px; gap:30px;
  letter-spacing:normal;
}
.hero-copy .pill.intro span{font-size:18px}
@media(max-width:600px){
  .hero-copy .pill.intro{font-size:10px;min-width:190px;padding:16px 21px;gap:30px}
  .hero-copy .pill.intro span{font-size:18px}
}

/* C. PITA PANORAMA ("Tak semua hal indah perlu terburu-buru").
      DIUKUR berdampingan di lebar 1909 px, karena perbaikan pertama
      saya di sini salah sasaran:

        inset:0        lebar pita 1894  perbesaran 1,23x  tampil 101%
        inset:0 -20%   lebar pita 2652  perbesaran 1,73x  tampil  72%

      inset:0 memang LEBIH TAJAM — tapi ia menampilkan seluruh lebar
      gambarnya, termasuk dedaunan besar di kedua tepi sumber, dan
      itulah yang terbaca berat. Versi ChatGPT justru lebih diperbesar,
      hanya saja tepinya terpotong keluar layar sehingga bagian
      tengahnya yang tenang yang terlihat. Pemilik memilih yang itu.

      Jadi dikembalikan ke -20% seperti ChatGPT, TAPI sumbernya tetap
      1600 (= berkas 1536 px utuh) dan bukan 1200 seperti semula:
      komposisinya sama dengan ChatGPT, perbesarannya 1,73x bukan
      2,2x — lebih tajam daripada keadaan sebelum hari ini.

      Sisa 1,73x itu batas SENINYA, bukan setelannya: pattern.webp
      hanya 1536 px dan layar pemilik 1909 px. Obat sebenarnya adalah
      ilustrasi yang lebih lebar (mis. 2560 px) dari ChatGPT.

      --- KOREKSI KEDUA, setelah pemilik masih menilai "pecah" ---

      Kembali ke inset:0 (perbesaran 1,23x — paling tajam yang bisa
      dicapai dengan gambar 1536 px di layar 1909 px), TAPI kali ini
      masalah komposisinya diselesaikan dengan menggeser BINGKAINYA,
      bukan dengan memperbesar gambarnya.

      Diukur sendiri dari sumbernya, berapa persen piksel gelap per
      pita tinggi: 0-40% dedaunan (11-15%), 40-70% langit (4-9%),
      70-100% tanah (34-52%). Dengan inset:0, yang terlihat hanya
      44,4% tinggi sumber. Pada posisi bawaan (center = 50%) yang
      tampil 27,8-72,2% — masuk ke pita dedaunan, dan itulah yang
      membuat daun besar memenuhi tepi.

      center 70% menggeser jendelanya ke 39-83,3%: dedaunan hampir
      seluruhnya keluar frame, yang tampil langit lalu bukit dan
      tanah — jadi terbaca sebagai lanskap dengan garis cakrawala,
      bukan daun menggantung. Tajam DAN tenang, tanpa menukar salah
      satunya. */
.panorama-track{inset:0;background-position:center 70%}
@media(max-width:600px){ .panorama-track{inset:0;background-position:center 68%} }


/* --- 22. PITA PANORAMA: GAMBAR YANG CUKUP BESAR --------------
   Dari paket ChatGPT 30 Okt (PANORAMA-2560.md). Diverifikasi
   sendiri, karena nama berkas "2560" saja tidak berarti detailnya
   2560 — dan ChatGPT sendiri menuliskannya terus terang:

     Meadow asli      ekspor 2560  SUMBER ASLI 1536  <- pembesaran
     Golden Horizon   ekspor 2560  SUMBER ASLI 2172
     Sage Mist        ekspor 2560  SUMBER ASLI 2172

   Yang menentukan: berapa piksel ASLI yang tersedia untuk tiap
   piksel layar di pita 1909 px.
     pattern.webp lama   1536 / 1909 = 0,80  <- kurang
     meadow-2560         1536 / 1909 = 0,80  <- tetap kurang
     Golden / Sage       2172 / 1909 = 1,14  <- CUKUP

   Jadi hanya dua alternatif itu yang benar-benar menambah detail.
   Meadow-2560 tetap dipasang (berguna: langkah akhirnya jadi
   PENGECILAN 0,75x, bukan pembesaran 1,24x — pengecilan selalu
   lebih bersih), tapi ia tidak membawa detail baru. Jangan
   menyebutnya master 2560.

   Bawaan = SAGE MIST: sumbernya native, rasionya 3:1 sehingga
   cocok untuk pita yang terpotong tinggi, dan sage-nya sewarna
   palet merek. Ganti satu kelas di index.php untuk yang lain:
     panorama-golden-horizon   (hangat, kontras dengan hero sejuk)
     panorama-meadow           (adegan lama)                     */
.panorama.panorama-hd{
  --panorama-art:url('/seni/panorama-sage-mist-2560.webp');
  --panorama-position:50% 55%;
  background:#f6f1e7;
}
.panorama.panorama-golden-horizon{--panorama-art:url('/seni/panorama-golden-horizon-2560.webp');--panorama-position:50% 55%}
.panorama.panorama-meadow{--panorama-art:url('/seni/panorama-meadow-original-2560.webp');--panorama-position:50% 70%}
.panorama-hd .panorama-track{
  inset:0;
  background-image:var(--panorama-art);
  background-position:var(--panorama-position);
  background-size:cover; background-repeat:no-repeat;
  transform:none!important; filter:none; opacity:1;
}
/* Gambarnya kini tajam dan tampil penuh, jadi teks di atasnya butuh
   alas yang lebih tegas daripada sebelumnya — kapsi diberi pil krem,
   dan cuci radialnya dipekatkan. Diukur setelah terpasang. */
.panorama-hd .panorama-label{background:radial-gradient(ellipse at center,#f8f2e9f2 0,#f8f2e9c4 30%,transparent 74%)}
.panorama-hd .panorama-caption{
  color:#4f4739; background:#f8f2e9ed; border-radius:24px;
  left:50%; right:auto; transform:translateX(-50%);
  width:max-content; max-width:90%; padding:5px 12px; line-height:1.5;
}
@media(max-width:600px){
  .panorama-hd .panorama-track{inset:0}
  .panorama-hd .panorama-label p{font-size:36px}
  .panorama-hd .panorama-caption{font-size:11px}
}


/* --- 23. KONTAK WHATSAPP ------------------------------------
   Pemilik: "jangan lupa tambahkan juga kontek whatsapp".
   Sebelumnya satu-satunya tautan WhatsApp ada di bagian Bergabung
   dengan pesan "tertarik bergabung sebagai mitra" — pembeli biasa
   tidak punya jalan bertanya sama sekali. */

.wa-apung{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:#f6f1e7; color:#25853f;             /* krem merek, lambang hijau WA */
  border:1px solid rgba(79,71,57,.18);
  box-shadow:0 8px 22px rgba(35,30,18,.20), 0 2px 5px rgba(35,30,18,.12);
  transition:transform .3s, box-shadow .3s, background .3s;
}
.wa-apung svg{width:27px;height:27px;display:block}
.wa-apung:hover{transform:translateY(-3px);background:#fff;box-shadow:0 12px 28px rgba(35,30,18,.26)}
.wa-apung:focus-visible{outline:2px solid #8b622e;outline-offset:4px}

/* Di ponsel, "01 / THE LITTLE MEADOW" di dasar hero memanjang hampir
   selebar layar, jadi tombol di sudut akan menimpanya. Baris itu ada
   di bottom 25px dan setinggi ~44px (dua baris berpelat), maka 84px
   membuat tombolnya bebas dengan jarak. */
@media(max-width:600px){
  .wa-apung{right:16px; bottom:84px; width:50px; height:50px}
  .wa-apung svg{width:25px;height:25px}
}
/* Dihormati kalau pengunjung meminta gerak dikurangi. */
@media(prefers-reduced-motion:reduce){ .wa-apung{transition:none} .wa-apung:hover{transform:none} }

/* ============================================================
   Baris ketersediaan di seksi koleksi  (6 November 2026)
   ============================================================
   Seksi .collection berlatar hijau sage (#757d65) dengan teks krem,
   jadi warnanya dipilih untuk latar GELAP. Rancangan asli dari
   ChatGPT (dist/blok-beli.css) memakai tinta gelap di atas krem —
   benar untuk halaman produk, tidak terbaca di sini.

   "Habis" memakai persik hangat, bukan merah: merah pada latar sage
   menjadi lumpur, dan ini bukan peringatan bahaya — hanya keterangan
   bahwa stok toko langsung sedang kosong, sementara tautan Shopee di
   bawahnya tetap hidup.
   ============================================================ */
.produk-stok{
  font-size:10px;
  letter-spacing:1.2px;
  font-weight:700;
  text-transform:uppercase;
  margin:14px 0 0;
  opacity:.92;
}
.produk-stok[data-ada="1"]{color:#dfe8c9}
.produk-stok[data-ada="0"]{color:#f2c3a4}

/* Tombol "Pesan langsung" memakai .pill.light yang sudah ada, jadi
   tidak ada gaya baru untuknya. Yang perlu: saat ia disembunyikan
   (stok habis), jarak atas baris marketplace tidak boleh ikut hilang
   — tanpa ini blok belinya menempel ke baris spesifikasi. */
#produk-beli[hidden] + .beli-lain{margin-top:30px}