:root{
  --bg:#0a0a0a;--bg2:#111;--bg3:#1a1a1a;--gold:#c9a84c;--gold-l:#e2c97e;--gold-d:#9a7a2e;
  --gold-sub:rgba(201,168,76,.12);--grad:linear-gradient(135deg,#c9a84c,#e2c97e,#c9a84c);
  --tx:#f5f0e8;--tx2:#b8b0a0;--mut:#6b6560;--inv:#0a0a0a;
  --line:rgba(201,168,76,.15);--line2:rgba(201,168,76,.35);--grey:rgba(255,255,255,.08);
  --wa:#25D366;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost',-apple-system,Segoe UI,sans-serif;
  --r:12px;--r2:16px;--rf:9999px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);font-weight:300;background:var(--bg);color:var(--tx);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
.wrap{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative}
/* header */
.nav{position:sticky;top:0;z-index:30;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:rgba(10,10,10,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .logo{font-family:var(--serif);font-size:21px;font-weight:300}
.nav .logo em{color:var(--gold);font-style:italic}
.nav .ic{display:flex;gap:16px;color:var(--tx2)}
.nav .ic a{color:var(--tx2);display:grid;place-items:center}
.marquee{background:var(--bg3);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:8px 0}
.marquee div{display:inline-block;padding-left:100%;animation:mq 18s linear infinite;font-size:12px;letter-spacing:.06em;color:var(--gold-l)}
@keyframes mq{to{transform:translateX(-100%)}}
/* sections */
.sec{padding:24px 18px}
.sec+.sec{border-top:1px solid var(--grey)}
.ey{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:8px}
.h{font-family:var(--serif);font-weight:300;font-size:30px;line-height:1.18}
.h em{font-style:italic;color:var(--gold)}
.sub{color:var(--tx2);font-size:14px;margin-top:10px;line-height:1.65}
.trust{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.trust span{font-size:11px;color:var(--tx2);border:1px solid var(--line);border-radius:var(--rf);padding:5px 11px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:var(--rf);font-weight:500;letter-spacing:.04em;width:100%;text-align:center;border:none;cursor:pointer;font-family:inherit}
.btn-gold{background:var(--grad);color:var(--inv);text-transform:uppercase;font-size:13px;padding:15px;box-shadow:0 4px 20px rgba(201,168,76,.25)}
.btn-wa{background:var(--wa);color:#fff;font-size:15px;padding:16px;box-shadow:0 4px 20px rgba(37,211,102,.3)}
.btn-ghost{background:transparent;border:1px solid var(--gold);color:var(--gold);text-transform:uppercase;font-size:13px;padding:14px}
.btn+.btn{margin-top:10px}
/* grid + card */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .15s}
.card:active{transform:scale(.98)}
.card .ph{aspect-ratio:1;background:linear-gradient(135deg,#1c1a15,#0f0e0b);display:grid;place-items:center;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .mono{font-family:var(--serif);font-size:34px;color:rgba(201,168,76,.35);letter-spacing:.05em}
.card .b{padding:11px}
.card .br{font-size:10px;letter-spacing:.12em;color:var(--gold);font-weight:500;text-transform:uppercase}
.card .nm{font-family:var(--serif);font-size:16px;margin-top:3px;color:var(--tx)}
.card .meta{font-size:11px;color:var(--mut);margin-top:6px}
/* filters */
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-top:12px}
.chips a{flex:0 0 auto;font-size:12px;padding:7px 14px;border-radius:var(--rf);border:1px solid var(--grey);color:var(--tx2);white-space:nowrap}
.chips a.on{border-color:var(--gold);color:var(--gold-l);background:var(--gold-sub)}
.search{background:var(--bg3);border:1px solid var(--line);border-radius:var(--rf);padding:11px 16px;display:flex;align-items:center;gap:10px;color:var(--tx);width:100%}
.search input{flex:1;background:none;border:none;color:var(--tx);font-family:inherit;font-size:14px;outline:none}
.search input::placeholder{color:var(--mut)}
/* product page */
.gallery{aspect-ratio:4/5;background:linear-gradient(135deg,#1c1a15,#0d0c09);display:grid;place-items:center;border-bottom:1px solid var(--grey);overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery .mono{font-family:var(--serif);font-size:64px;color:rgba(201,168,76,.3)}
.spec{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--grey);font-size:13px}
.spec span:first-child{color:var(--mut)}
.ask{background:var(--gold-sub);border:1px solid var(--line2);border-radius:var(--r);padding:14px;margin-top:16px;text-align:center}
.ask .t1{font-size:12px;color:var(--tx2)}
.ask .t2{font-family:var(--serif);font-size:22px;color:var(--gold-l);margin-top:2px}
.rev{padding:13px 0;border-bottom:1px solid var(--grey)}
.rev .stars{color:var(--gold);font-size:12px}
.rev .body{font-size:13px;color:var(--tx2);margin:5px 0;font-style:italic}
.rev .who{font-size:11px;color:var(--mut)}
.ratingbar{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--mut);margin:4px 0}
.ratingbar .track{flex:1;height:5px;background:var(--grey);border-radius:3px;overflow:hidden}
.ratingbar .fill{height:100%;background:var(--gold)}
/* floating + gomin + popup */
/* Tombol mengambang.
   --fab-b = jarak dari bawah. Dinaikkan dari 18px agar tidak menempel tepi layar dan
   tidak tertutup bilah navigasi browser ponsel; env(safe-area-inset-bottom) menambah
   ruang di iPhone berponi. Ubah satu variabel ini untuk menggeser keduanya sekaligus. */
:root{--fab-b:34px;--fab-gap:70px}
.fab-wa{position:fixed;bottom:calc(var(--fab-b) + env(safe-area-inset-bottom,0px));right:calc(50% - 240px + 16px);width:54px;height:54px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 6px 24px rgba(37,211,102,.45);z-index:40;transition:transform .18s ease,box-shadow .18s ease}
.fab-wa:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(37,211,102,.55)}
.fab-wa:active{transform:scale(.94)}

/* Gomin — dibuat lebih elegan: cincin emas tipis, kilau lembut, dan denyut halus
   yang berhenti setelah 3 putaran supaya tidak mengganggu. */
.fab-g{position:fixed;bottom:calc(var(--fab-b) + var(--fab-gap) + env(safe-area-inset-bottom,0px));right:calc(50% - 240px + 16px);
  width:54px;height:54px;border-radius:50%;
  background:radial-gradient(120% 120% at 30% 20%,#22201b 0%,var(--bg3) 60%,#141310 100%);
  border:1px solid rgba(184,145,47,.55);display:grid;place-items:center;color:var(--gold-l);
  z-index:40;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 6px 22px rgba(0,0,0,.5),inset 0 1px 0 rgba(230,201,136,.18);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease}
.fab-g svg{transition:transform .25s ease}
.fab-g:hover{transform:translateY(-2px);border-color:var(--gold);color:#f2dfae;
  box-shadow:0 10px 30px rgba(184,145,47,.32),inset 0 1px 0 rgba(230,201,136,.3)}
.fab-g:hover svg{transform:scale(1.08)}
.fab-g:active{transform:scale(.94)}
.fab-g:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Cincin denyut — menarik perhatian sekali di awal, lalu diam. */
.fab-g::before{content:'';position:absolute;inset:-1px;border-radius:50%;
  border:1px solid var(--gold);opacity:0;animation:fabPulse 2.6s ease-out 1.2s 3;pointer-events:none}
@keyframes fabPulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.45);opacity:0}100%{opacity:0}}

/* Label muncul saat hover — hanya di layar lebar (tidak ada hover di ponsel). */
.fab-g::after{content:'Tanya Gomin';position:absolute;right:64px;top:50%;transform:translateY(-50%) translateX(6px);
  background:var(--bg2);border:1px solid var(--line2);color:var(--tx);font-size:12px;white-space:nowrap;
  padding:6px 11px;border-radius:8px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,.45)}
.fab-g:hover::after{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
@media(hover:none){.fab-g::after{display:none}}
@media(prefers-reduced-motion:reduce){.fab-g::before{animation:none}.fab-g,.fab-wa,.fab-g svg{transition:none}}

@media(max-width:520px){.fab-wa,.fab-g{right:16px}}
@media(max-width:380px){:root{--fab-b:26px;--fab-gap:64px}.fab-wa,.fab-g{width:50px;height:50px}}
.popup{position:fixed;inset:0;background:rgba(10,10,10,.82);backdrop-filter:blur(3px);z-index:50;display:none;align-items:center;justify-content:center;padding:24px}
.popup.show{display:flex}
.popup .box{background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r2);padding:26px;max-width:340px;text-align:center;position:relative}
.popup .box .x{position:absolute;top:12px;right:16px;color:var(--mut);font-size:22px;cursor:pointer}
.popup .box .h{font-size:26px}
.foot{padding:28px 18px 90px;text-align:center;color:var(--mut);font-size:11px;letter-spacing:.05em;border-top:1px solid var(--grey)}
.empty{text-align:center;color:var(--mut);padding:40px 20px;font-size:14px}
/* order form */
.sheet .box{max-width:400px;text-align:left;width:100%}
.oform .head{font-family:var(--serif);font-size:23px;margin-bottom:2px}
.oform .hint{font-size:11px;color:var(--mut);margin-bottom:6px}
.oform label{display:block;font-size:11px;color:var(--tx2);letter-spacing:.04em;margin:12px 0 5px}
.oform input,.oform textarea{width:100%;background:#1e1e1e;border:1px solid var(--line);border-radius:9px;padding:12px;color:var(--tx);font-family:inherit;font-size:14px;outline:none}
.oform input:focus,.oform textarea:focus{border-color:var(--gold)}
.oform input[readonly]{color:var(--gold-l);background:#181818}
.oform textarea{resize:vertical;min-height:52px}
.oform .msg{font-size:12px;color:#eb9a9a;margin-top:8px;min-height:15px}
/* gomin chat */
.gomin{position:fixed;bottom:calc(var(--fab-b) + env(safe-area-inset-bottom,0px));right:calc(50% - 240px + 16px);width:330px;max-width:calc(100vw - 32px);height:440px;max-height:70vh;background:var(--bg2);border:1px solid var(--line2);border-radius:16px;display:none;flex-direction:column;overflow:hidden;z-index:60;box-shadow:0 14px 44px rgba(0,0,0,.55)}
.gomin.show{display:flex;animation:gmIn .22s cubic-bezier(.2,.8,.3,1)}
@keyframes gmIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.gomin.show{animation:none}}
@media(max-width:520px){.gomin{right:16px;left:16px;width:auto}}
.gm-head{background:linear-gradient(180deg,#22201b,var(--bg3));padding:13px 16px;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:17px;color:var(--gold-l);display:flex;align-items:center;gap:9px}
.gm-dot{width:7px;height:7px;border-radius:50%;background:var(--wa);flex:0 0 7px;box-shadow:0 0 0 3px rgba(37,211,102,.16)}
.gm-head span{font-family:var(--sans);font-size:10px;color:var(--mut);flex:1}
.gm-head b{cursor:pointer;color:var(--mut);font-weight:400;font-size:22px;line-height:1;transition:color .15s}
.gm-head b:hover{color:var(--tx)}
.gm-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.gm-msg{max-width:82%;padding:9px 13px;border-radius:14px;font-size:13.5px;line-height:1.5}
.gm-msg.bot{background:var(--bg3);color:var(--tx);align-self:flex-start;border-bottom-left-radius:4px}
.gm-msg.user{background:linear-gradient(135deg,var(--gold-d),var(--gold));color:#0a0a0a;align-self:flex-end;border-bottom-right-radius:4px}
.gm-wa{align-self:flex-start;background:var(--wa);color:#fff;border:none;border-radius:20px;padding:8px 15px;font-size:12px;cursor:pointer;font-family:inherit}
.gm-in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.gm-in input{flex:1;background:var(--bg3);border:1px solid var(--line);border-radius:20px;padding:10px 14px;color:var(--tx);font-family:inherit;font-size:13px;outline:none}
.gm-in input:focus{border-color:rgba(184,145,47,.6)}
.gm-in button{background:linear-gradient(135deg,var(--gold-d),var(--gold));border:none;border-radius:50%;width:38px;height:38px;color:#0a0a0a;font-size:18px;cursor:pointer;flex:0 0 38px;transition:transform .15s,filter .15s}
.gm-in button:hover{filter:brightness(1.08)}
.gm-in button:active{transform:scale(.92)}
/* footer bersama (semua halaman) */
.site-ft{background:#100d09;border-top:1px solid rgba(198,162,83,.18);padding:34px 22px 92px;text-align:center}
.site-ft .lg{font-family:'Cormorant Garamond',serif;font-size:22px;color:#ece2d0}
.site-ft .lg em{font-style:italic;color:#c6a253}
.site-ft nav{display:flex;gap:18px;justify-content:center;margin:15px 0;font-size:12px}
.site-ft nav a{color:#b6aa92;text-decoration:none}
.site-ft .cp{font-size:10.5px;color:#847a66;letter-spacing:.04em}
/* wishlist heart — dipindah ke sini agar berstyle di Katalog/Produk juga */
.card{position:relative}
.card .wish{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(15,12,8,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(198,162,83,.22);display:grid;place-items:center;cursor:pointer;z-index:3}
.card .wish svg{width:16px;height:16px;stroke:#e2c583;fill:none;stroke-width:1.6}
.card .wish.on svg{fill:#e2c583}