/* La Gelato — lg-beranda — généré par outils/construire_css_theme.py depuis maquettes-2026-10 (ne pas modifier à la main). Couleurs pleines : aucune ombre, aucune transparence. */
h2{font-size:clamp(2.2rem,4.8vw,3.9rem)}
h3{font-size:1.6rem;font-weight:700;line-height:1.1}
.menu a:hover{background-size:100% 2px}
.wa-kepala svg,.wa-apung svg{width:20px;height:20px;flex:none}
.hero{position:relative;background:var(--hitam);color:var(--putih)}
.hero-foto{position:relative;height:clamp(520px,72vw,760px);overflow:hidden;background:var(--hitam)}
.slide{position:absolute;inset:0;clip-path:circle(0% at 12% 88%)}
.slide.aktif{clip-path:circle(150% at 12% 88%);z-index:1}
.slide.masuk{z-index:2;animation:sendok 1.2s cubic-bezier(.7,0,.2,1) forwards}
.slide img{width:100%;height:100%;object-fit:cover}
.slide.aktif img,.slide.masuk img{animation:perlahan 9s ease-out forwards}
@keyframes sendok{from{clip-path:circle(0% at 12% 88%)}to{clip-path:circle(150% at 12% 88%)}}
@keyframes perlahan{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-teks{position:absolute;z-index:5;left:max(16px,env(safe-area-inset-left,0px));bottom:44px;width:min(640px,calc(100% - 32px));background:var(--hitam);padding:34px 36px 36px;border-radius:0 34px 34px 34px}
.hero-teks h1{font-size:clamp(2.6rem,5.6vw,4.7rem);color:var(--putih)}
.hero-teks p{color:#E9E9E9;font-size:1.22rem}
.titik{position:absolute;z-index:5;right:max(24px,env(safe-area-inset-right,0px));bottom:44px;display:flex;gap:10px}
.titik button{width:14px;height:14px;border-radius:50%;border:2px solid var(--putih);background:var(--hitam);padding:0;cursor:pointer}
.titik button[aria-current="true"]{background:var(--putih)}
.tombol{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 26px;border-radius:999px;font-weight:800;font-size:1rem;text-decoration:none;border:2px solid var(--hitam);cursor:pointer;font-family:var(--f-teks);transition:transform .2s ease}
.tombol-putih{background:var(--putih);color:var(--hitam);border-color:var(--putih)}
.parade{background:var(--hitam);color:var(--putih);overflow:hidden;padding-block:22px;border-top:1px solid #222}
.parade-jalur{display:flex;width:max-content;animation:geser 38s linear infinite}
.parade ul{display:flex;gap:44px;list-style:none;margin:0;padding:0 22px}
.parade li{font-family:var(--f-judul);font-variation-settings:"SOFT" 100;font-weight:700;font-size:clamp(1.5rem,2.6vw,2.2rem);white-space:nowrap;display:flex;align-items:center;gap:16px}
.parade li::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--c)}
@keyframes geser{to{transform:translateX(-50%)}}
.video{background:var(--hitam);color:var(--putih);padding-block:36px 96px}
.video .wadah{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.video h2{color:var(--putih)}
.video p{color:#D6D6D6;font-size:1.1rem}
.layar{position:relative;display:block;border-radius:30px;overflow:hidden;border:2px solid #3A3A3A;text-decoration:none}
.layar img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s ease}
.layar:hover img{transform:scale(1.03)}
.putar{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;background:var(--wa);color:var(--wa-teks);display:flex;align-items:center;justify-content:center;animation:denyut 2.4s ease-in-out infinite}
.putar svg{width:40px;height:40px;margin-left:6px}
@keyframes denyut{50%{transform:scale(1.08)}}
.durasi{position:absolute;left:18px;bottom:16px;background:var(--hitam);color:var(--putih);font-weight:800;font-size:.95rem;padding:6px 14px;border-radius:999px}
.rumus{background:var(--es);padding-block:96px 40px}
.rumus h2{max-width:16ch}
.persamaan{display:grid;grid-template-columns:auto auto auto auto auto auto auto auto auto;align-items:center;gap:18px;margin-top:44px}
.unsur{background:var(--putih);border:2px solid var(--hitam);border-radius:28px;padding:18px 20px;text-align:center;min-width:0}
.unsur b{display:block;font-family:var(--f-judul);font-variation-settings:"SOFT" 100;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.05}
.unsur span{font-size:1rem;color:var(--abu);font-weight:600}
.unsur.sachet{padding:10px;width:150px}
.unsur.sachet img{width:130px;height:130px;object-fit:contain}
.unsur.hasil{background:var(--hitam);color:var(--putih);padding:26px 30px}
.unsur.hasil b{font-size:clamp(2.4rem,4.4vw,3.8rem)}
.unsur.hasil span{color:#D6D6D6}
.op{font-family:var(--f-judul);font-size:2.4rem;font-weight:500;text-align:center}
.rumus-ket{margin-top:30px;font-size:1.08rem;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.rumus-ket p{margin:0}
.tetes{display:block;width:100%;height:70px;background:var(--putih)}
.tetes path{fill:var(--es)}
.bagian{padding-block:96px}
.kepala-bagian{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px;margin-bottom:40px}
.kepala-bagian p{color:var(--abu);margin:0}
.pintu{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:22px}
.pintu a{display:flex;flex-direction:column;text-decoration:none;border-radius:30px;overflow:hidden;border:2px solid var(--hitam)}
.pintu .isi{padding:26px 28px 30px;display:flex;flex-direction:column;gap:6px;flex:1}
.pintu .isi p{margin:0 0 10px;flex:1}
.pintu .ajak{font-weight:800;display:inline-flex;gap:8px;align-items:center}
.pintu .ajak i{font-style:normal;transition:transform .25s ease}
.pintu a:hover .ajak i{transform:translateX(6px)}
.pintu .foto{overflow:hidden}
.pintu .foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.pintu a:hover .foto img{transform:scale(1.05)}
.p-toko{grid-row:1 / span 2;background:var(--pistachio)}
.p-toko .rak{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:26px 26px 0}
.p-toko .rak img{background:var(--putih);border-radius:22px;aspect-ratio:1/1;object-fit:contain;padding:8px;border:2px solid var(--hitam);transition:transform .4s ease}
.p-toko:hover .rak img:first-child{transform:rotate(-4deg)}
.p-toko:hover .rak img:last-child{transform:rotate(4deg)}
.p-bisnis{background:var(--stroberi);flex-direction:row}
.p-bisnis .foto{width:42%;flex:none;position:relative}
.p-bisnis .foto img,.p-paket .foto img{position:absolute;inset:0}
.p-paket{background:var(--mangga);flex-direction:row-reverse}
.p-paket .foto{width:42%;flex:none;position:relative}
.dingin{background:var(--hitam);color:var(--putih)}
.dingin .kepala-bagian p{color:#CFCFCF}
.langkah{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.garis-maju{position:absolute;left:0;top:0;height:3px;background:#333;width:100%}
.garis-maju span{display:block;height:100%;width:0;background:var(--es)}
.langkah li{padding:30px 24px 0 0}
.langkah li.garis-maju{padding:0}
.langkah .no{font-weight:700;color:#A9A9A9;font-size:.9rem}
.langkah .angka{display:block;white-space:nowrap;font-family:var(--f-judul);font-variation-settings:"SOFT" 100;font-weight:800;font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:1.05;margin:8px 0 10px;color:var(--es)}
.langkah h3{margin-bottom:.3em}
.langkah p{color:#D8D8D8;margin:0}
.moto{margin-top:46px;font-family:var(--f-judul);font-variation-settings:"SOFT" 100;font-size:clamp(1.4rem,2.4vw,2rem);font-weight:600;max-width:34ch}
.kartu{display:flex;flex-direction:column;border-radius:28px;overflow:hidden;border:2px solid var(--hitam);background:var(--putih);text-decoration:none;transition:background-color .3s ease}
.kartu .foto{aspect-ratio:1/1;background:var(--putih);display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:2px solid var(--hitam)}
.kartu .isi{padding:18px 20px 22px;display:flex;flex-direction:column;gap:4px;flex:1}
.label{align-self:flex-start;font-size:.8rem;font-weight:800;padding:4px 12px;border-radius:999px;background:var(--c);border:2px solid var(--hitam);margin-bottom:8px}
.kartu h3{margin:0}
.kartu .kecil{color:var(--abu);font-size:1rem;margin:0}
.kartu .hasil{font-weight:800;margin:6px 0 10px}
.kartu .harga{margin-top:auto;font-family:var(--f-judul);font-variation-settings:"SOFT" 100;font-weight:800;font-size:1.8rem}
.kartu .harga small{display:block;font-family:var(--f-teks);font-size:.85rem;font-weight:700;color:var(--abu)}
.kartu .harga.tanya{font-family:var(--f-teks);font-size:1rem;font-weight:800}
.tanpa-mesin{margin-top:22px;border-radius:28px;background:var(--es);border:2px solid var(--hitam);padding:22px 28px;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between}
.tanpa-mesin p{margin:0;font-size:1.08rem}
.bukti{background:var(--stroberi);padding-block:46px;border-block:2px solid var(--hitam)}
.bukti ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.bukti strong{display:block;font-family:var(--f-judul);font-variation-settings:"SOFT" 100;font-size:1.5rem;line-height:1.1;margin-bottom:6px}
.bukti span{font-size:1.05rem}
.bukti .halal{display:flex;gap:16px;align-items:flex-start}
.bukti .halal img{width:64px;height:auto;flex:none;background:var(--putih);border-radius:6px}
.bukti .halal a{font-weight:700}
.bukti li{min-width:0;overflow-wrap:anywhere}
.jeff .wadah{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.jeff-foto{border-radius:220px 220px 30px 30px;overflow:hidden;border:2px solid var(--hitam)}
.kutipan{font-family:var(--f-judul);font-variation-settings:"SOFT" 100;font-weight:700;font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.08;margin:0 0 18px;text-wrap:balance}
.kutipan-nama{font-weight:800;margin-bottom:22px}
.paket-band{background:var(--mangga);border-block:2px solid var(--hitam)}
.paket-isi{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.paket-foto{border-radius:30px;overflow:hidden;border:2px solid var(--hitam)}
.pilihan{display:grid;gap:12px;margin:26px 0 28px;padding:0;list-style:none}
.pilihan li{background:var(--putih);border:2px solid var(--hitam);border-radius:20px;padding:16px 20px;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.pilihan b{font-family:var(--f-judul);font-variation-settings:"SOFT" 100;font-size:1.35rem}
.pilihan span{font-weight:700;white-space:nowrap}
.banding{font-size:.95rem;color:#3A3020}
.resep{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.resep a{text-decoration:none;display:flex;flex-direction:column;gap:12px}
.resep .foto{border-radius:26px;overflow:hidden;border:2px solid var(--hitam);aspect-ratio:4/3}
.resep .foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.resep a:hover .foto img{transform:scale(1.06)}
.resep .jenis{font-weight:800;font-size:.85rem;color:var(--stroberi-kuat)}
.resep h3{margin:0}
.akademi{background:var(--taro);border-block:2px solid var(--hitam)}
.akademi .wadah{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.harga-kursus{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:10px}
.harga-kursus li{display:flex;justify-content:space-between;gap:16px;border-bottom:2px solid var(--hitam);padding-bottom:10px;font-weight:600}
.harga-kursus b{font-family:var(--f-judul);font-variation-settings:"SOFT" 100;font-size:1.3rem;white-space:nowrap}
.akademi-foto{border-radius:50%;overflow:hidden;border:2px solid var(--hitam);aspect-ratio:1/1}
.akademi-foto img{width:100%;height:100%;object-fit:cover}
.kaki img{width:110px;height:110px;border-radius:50%;margin-bottom:18px}
.persamaan.jalan > *{animation:pop .6s cubic-bezier(.2,.9,.3,1.4) both}
.persamaan.jalan > *:nth-child(2){animation-delay:.12s}
.persamaan.jalan > *:nth-child(3){animation-delay:.24s}
.persamaan.jalan > *:nth-child(4){animation-delay:.36s}
.persamaan.jalan > *:nth-child(5){animation-delay:.48s}
.persamaan.jalan > *:nth-child(6){animation-delay:.6s}
.persamaan.jalan > *:nth-child(7){animation-delay:.72s}
.persamaan.jalan > *:nth-child(8){animation-delay:.84s}
.persamaan.jalan > *:nth-child(9){animation-delay:1.05s}
@keyframes pop{from{transform:scale(.6)}to{transform:none}}
@media (max-width:1080px){
.persamaan{grid-template-columns:1fr 1fr;gap:12px}
.persamaan .op{display:none}
.persamaan .op.sama{display:block;grid-column:1 / -1;line-height:1}
.persamaan .unsur.hasil{grid-column:1 / -1}
.unsur.sachet{width:auto;display:flex;align-items:center;justify-content:center}
.pintu{grid-template-columns:1fr}
.p-toko{grid-row:auto}
.langkah{grid-template-columns:repeat(2,1fr);row-gap:30px}
.bukti ul{grid-template-columns:repeat(2,1fr)}
.bukti .halal{grid-column:1 / -1}
.jeff .wadah,.paket-isi,.akademi .wadah,.video .wadah{grid-template-columns:1fr;gap:36px}
.akademi-foto{max-width:360px}
.resep{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
.hero-foto{height:420px}
.hero-teks{position:relative;left:auto;bottom:auto;width:auto;border-radius:0;padding:30px max(16px,env(safe-area-inset-right,0px)) 34px max(16px,env(safe-area-inset-left,0px))}
.titik{bottom:auto;top:384px}
.deret .tombol{width:100%}
.bagian,.rumus{padding-block:64px}
.rumus{padding-bottom:28px}
.unsur{padding:14px 12px}
.unsur.sachet img{width:110px;height:110px}
.p-bisnis,.p-paket{flex-direction:column}
.p-bisnis .foto,.p-paket .foto{width:100%;aspect-ratio:16/10}
.kartu .harga{font-size:1.4rem}
.langkah{grid-template-columns:1fr}
.resep{grid-template-columns:1fr}
.pilihan li{flex-direction:column;gap:2px}
body{padding-bottom:84px}
}
@media (prefers-reduced-motion:reduce){
.slide.masuk{clip-path:circle(150% at 12% 88%)}
}