:root{--hitam:#0C0B0A;--krem:#CDBFA9;--redup:#B3A88F;--garis:#6B6253;--bidang:#1A1816;--m:20px}
*{box-sizing:border-box;margin:0}
html{background:var(--hitam);-webkit-text-size-adjust:100%}
body{background:var(--hitam);color:var(--krem);font:300 17px/1.6 'Jost',sans-serif;overflow-x:hidden}
h1,h2{font-family:'Cormorant Garamond',serif;font-weight:300;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(42px,12vw,76px)}
h2{font-size:clamp(32px,8vw,52px)}
p{text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:2px solid var(--krem);outline-offset:3px}
.label,.merek,.tautan-atas,dt,.kecil,small,.foto span{font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--redup)}
.atas,.kaki{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px var(--m)}
.atas{border-bottom:2px solid var(--garis)}
.merek{color:var(--krem);font-size:14px}
.merek span{color:var(--redup);margin-left:.6em}
.tautan-atas{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
main{max-width:1180px;margin:0 auto}
section{padding:56px var(--m)}
.awal{display:grid;gap:32px;padding-top:40px}
.awal-teks{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.isi{max-width:30ch}
.harga{font-family:'Cormorant Garamond',serif;font-size:44px;line-height:1;font-variant-numeric:lining-nums}
.harga .label{display:block;margin-bottom:8px}
.tombol{display:inline-flex;flex-direction:column;justify-content:center;min-height:56px;padding:10px 26px;border:2px solid var(--krem);color:var(--hitam);background:var(--krem);text-decoration:none;font-weight:400;letter-spacing:.06em}
.tombol small{color:#4A3F32;font-size:12px;letter-spacing:.14em}
.tombol:hover{background:transparent;color:var(--krem)}
.tombol:hover small{color:var(--redup)}
.foto{aspect-ratio:4/5;background:var(--bidang);border:2px solid var(--garis);display:flex;align-items:flex-end;padding:16px;margin-left:18%}
.foto.kosong{background-image:repeating-linear-gradient(135deg,transparent 0 14px,#211F1C 14px 15px)}
.detail,.kirim,.pesan{border-top:2px solid var(--garis)}
.detail h2,.kirim h2,.pesan h2{margin-bottom:28px;max-width:14ch}
.tabel div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:2px solid var(--garis)}
.tabel dd{font-family:'Cormorant Garamond',serif;font-size:32px;line-height:1.1}
.tabel dd{padding-right:2px}.tabel dd.nanti{color:var(--redup);font-size:24px;font-style:italic}
.catatan{margin-top:20px;color:var(--redup);max-width:44ch;font-size:16px}
.daftar,.langkah{list-style:none;padding:0;display:grid;gap:0}
.daftar li,.langkah li{padding:16px 0;border-bottom:2px solid var(--garis)}
.daftar strong{font-weight:400}
.langkah{counter-reset:n;margin-bottom:32px}
.langkah li{counter-increment:n;display:flex;gap:20px;align-items:baseline}
.langkah li::before{content:counter(n,decimal-leading-zero);font-family:'Cormorant Garamond',serif;font-size:32px;color:var(--redup)}
.kaki{border-top:2px solid var(--garis);padding:32px var(--m)}
@media(min-width:820px){
  :root{--m:48px}
  .atas,.kaki{max-width:1180px;margin:0 auto;padding-left:var(--m);padding-right:var(--m)}
  .atas{border-bottom:0}
  .awal{grid-template-columns:1.1fr .9fr;gap:0;align-items:end;padding-top:72px;padding-bottom:88px}
  .awal-teks{padding-right:32px;border-right:2px solid var(--garis);align-self:stretch;justify-content:flex-end}
  .foto{margin-left:48px;max-height:680px;width:calc(100% - 48px)}
  .detail,.kirim,.pesan{display:grid;grid-template-columns:.8fr 1.2fr;column-gap:48px;row-gap:0;align-items:start}
  .detail h2,.kirim h2,.pesan h2{margin-bottom:0}
  .detail .catatan{grid-column:2}
  .pesan .tombol,.pesan .catatan{grid-column:2;justify-self:start}.pesan .tombol{margin-top:32px}
  .langkah{margin-bottom:0}
  .pesan .langkah{grid-column:2}
}
@media(prefers-reduced-motion:no-preference){.tombol{transition:background .2s,color .2s}}
.foto.dua{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;max-height:none}
.foto.dua img{width:100%;height:auto;display:block}
.foto.dua{align-self:center}
.catatan a{text-underline-offset:.25em;text-decoration-skip-ink:none}
.ukuran{width:100%;border-collapse:collapse;margin-top:24px}
.ukuran caption{text-align:left;font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--redup);padding-bottom:12px}
.ukuran th,.ukuran td{text-align:left;padding:12px 0;border-top:1px solid var(--garis);font-weight:400;font-variant-numeric:lining-nums}
.ukuran thead th{font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--redup)}
.ukuran tbody th{font-family:'Cormorant Garamond',serif;font-size:24px}
.ukuran td{font-size:18px}
@media(min-width:900px){.detail .ukuran{grid-column:2}}