/* =========================================================
   Natcha Beauty — Stylesheet
   Palet warna diambil dari kemasan asli RAN Cosmetic
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --wine: #C8102E;       /* merah cerah RAN — dipakai sbg aksen, bukan dominan */
  --rust: #A0121F;
  --pop: #C8102E;
  --nude: #EAD3C6;
  --paper: #FFFFFF;       /* background utama: putih bersih */
  --paper-2: #FAF8F6;
  --ink: #23201D;
  --muted: #8A8A8A;
  --white: #FFFFFF;
  --shadow: 0 12px 28px rgba(0,0,0,0.08);
  --radius: 4px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; width:100%; }
body{
  font-family:'Manrope', sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
}
h1,h2,h3,.serif{ font-family:'Manrope', sans-serif; font-weight:800; letter-spacing:-0.01em; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
@media(max-width:640px){ .container{ padding:0 18px; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 30px; font-weight:800; font-size:13.5px;
  border-radius:2px; cursor:pointer; border:1.5px solid transparent; letter-spacing:.02em;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease; font-family:inherit;
  text-transform:uppercase;
}
.btn-primary{ background:var(--wine); color:var(--white); }
.btn-primary:hover{ background:#a20d26; box-shadow:var(--shadow); }
.btn-outline{ background:transparent; color:var(--wine); border-color:var(--wine); }
.btn-outline:hover{ background:var(--wine); color:var(--white); }
.btn-block{ width:100%; justify-content:center; }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

/* ---------- nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.94); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(33,35,15,0.08);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:20px; }
.logo{ font-family:'Fraunces', serif; font-size:22px; font-weight:600; color:var(--wine); display:flex; align-items:center; gap:8px; }
.logo .dot{ width:8px; height:8px; border-radius:50%; background:var(--pop); display:inline-block; }
.logo-mark{ height:36px; width:auto; display:block; }
.nav-links{ display:flex; gap:32px; font-size:14.5px; font-weight:600; }
.nav-links a{ opacity:.82; display:inline-flex; align-items:center; gap:7px; }
.nav-links a::before{ content:''; width:6px; height:6px; background:var(--wine); display:inline-block; flex-shrink:0; }
.nav-links a:hover{ opacity:1; color:var(--wine); }
.nav-actions{ display:flex; align-items:center; gap:14px; }
.nav-actions .btn{ padding:10px 20px; font-size:13px; }
.search-toggle{ background:none; border:none; cursor:pointer; color:var(--ink); display:flex; align-items:center; padding:4px; }
.search-toggle:hover{ color:var(--wine); }
.menu-toggle{ display:none; background:none; border:none; cursor:pointer; color:var(--ink); order:0; }
@media(max-width:840px){
  .nav{ position:relative; }
  .menu-toggle{ display:block; order:0; }
  .nav .logo{ order:1; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
  .nav .logo-mark{ height:46px; }
  .nav-actions{ order:2; margin-left:auto; }
  .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--white); flex-direction:column; gap:0; border-bottom:1px solid rgba(33,35,15,0.1); box-shadow:var(--shadow); }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:16px 24px; border-bottom:1px solid rgba(33,35,15,0.06); }
}
@media(max-width:480px){
  .nav-actions .btn{ padding:8px 14px; font-size:11.5px; }
}
.user-chip{ font-size:13px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:10px; }
.user-chip a{ color:var(--muted); text-decoration:underline; font-weight:600; }

/* ---------- hero ---------- */
.hero{ padding:0; background:var(--paper); }
.hero-split{ display:grid; grid-template-columns:1fr 1fr; min-height:520px; }
@media(max-width:900px){ .hero-split{ grid-template-columns:1fr; } }
.hero-text{ display:flex; flex-direction:column; justify-content:center; padding:60px 64px; }
@media(max-width:900px){ .hero-text{ padding:48px 32px; } }
.eyebrow{ font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--wine); margin-bottom:18px; }
.hero h1{ font-size:clamp(32px,4.2vw,46px); line-height:1.12; color:var(--ink); margin-bottom:20px; font-weight:800; }
.hero h1 em{ font-style:normal; color:var(--wine); }
.hero p.lede{ font-size:15.5px; line-height:1.75; color:#5a5a5a; max-width:420px; margin-bottom:28px; }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-visual{ position:relative; overflow:hidden; background:var(--paper-2); min-height:320px; }
.hero-visual img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.hero-badge{ position:absolute; top:20px; right:20px; background:#fff; border-radius:50%; width:84px; height:84px; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; font-size:9.5px; font-weight:800; color:var(--wine); box-shadow:var(--shadow); line-height:1.3; z-index:2; }

/* ---------- about ---------- */
.about{ padding:80px 0; background:var(--paper); text-align:center; }
.about-inner{ max-width:720px; margin:0 auto; }
.about h2{ font-size:clamp(26px,3.4vw,36px); color:var(--ink); margin-bottom:18px; font-weight:800; }
.about .divider{ width:48px; height:3px; background:var(--wine); margin:0 auto 24px; }
.about p{ color:#5a5a5a; line-height:1.8; font-size:15.5px; margin-bottom:10px; }
.about .signature{ font-weight:800; font-size:16px; color:var(--ink); margin-top:22px; }
.about-points{ display:flex; flex-direction:column; gap:14px; text-align:left; max-width:520px; margin:36px auto 0; }
.about-points .point{ display:flex; gap:12px; align-items:flex-start; }
.about-points .point .mark{ width:22px; height:22px; border-radius:50%; background:var(--wine); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; margin-top:2px; }

/* ---------- section head ---------- */
section{ padding:70px 0; }
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:40px; flex-wrap:wrap; }
.sec-head h2{ font-size:clamp(28px,3.2vw,38px); color:var(--wine); }
.sec-head p{ max-width:380px; color:var(--muted); font-size:14.5px; line-height:1.6; }

/* ---------- products ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
@media(max-width:900px){ .product-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media(max-width:560px){ .product-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }
.prod-tile{ display:flex; flex-direction:column; height:100%; }
.prod-card{ background:var(--white); border:1px solid rgba(33,35,15,0.10); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s ease, transform .2s ease; }
.prod-card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
.prod-photo{ aspect-ratio:1/1; background:var(--paper-2); position:relative; overflow:hidden; }
.prod-photo img.slide{ width:100%; height:100%; object-fit:contain; display:none; position:absolute; inset:0; }
.prod-photo img.slide.active{ display:block; }
.prod-photo .stock-badge, .prod-photo .prod-badge{ position:absolute; top:10px; left:10px; background:var(--pop); color:var(--white); font-size:10px; font-weight:800; padding:4px 9px; border-radius:16px; text-transform:uppercase; letter-spacing:.04em; z-index:3; }
.prod-photo .stock-badge.habis{ background:#8A7D74; }
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  background:rgba(255,255,255,0.9); border:none; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:18px; color:var(--ink);
  box-shadow:0 2px 8px rgba(0,0,0,0.15); line-height:1; padding:0;
}
.carousel-arrow.prev{ left:8px; }
.carousel-arrow.next{ right:8px; }
.carousel-arrow:hover{ background:var(--white); color:var(--wine); }
.carousel-dots{ position:absolute; bottom:8px; left:0; right:0; display:flex; justify-content:center; gap:5px; z-index:4; }
.carousel-dots .dot{ width:6px; height:6px; border-radius:50%; background:rgba(0,0,0,0.25); border:none; cursor:pointer; padding:0; }
.carousel-dots .dot.active{ background:var(--wine); width:16px; border-radius:3px; }
.prod-info{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:5px; flex:1; }
.prod-cat{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--rust); }
.prod-name{ font-family:'Fraunces'; font-size:16px; line-height:1.28; color:var(--ink); min-height:2.4em; }
.prod-desc{ font-size:12.5px; color:var(--muted); line-height:1.5; margin:1px 0 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.prod-detail{
  background:none; border:none; padding:0; margin:0 0 10px; text-align:left;
  font-size:11.5px; font-weight:700; color:var(--rust); text-decoration:underline;
  cursor:pointer; width:fit-content; font-family:inherit;
}
.prod-detail:hover{ color:var(--wine); }
.prod-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; flex-wrap:wrap; }
.prod-price{ font-family:'Fraunces'; font-size:15px; color:var(--wine); font-weight:600; white-space:nowrap; }
.prod-add{
  background:var(--wine); border:none; color:var(--white); padding:8px 12px; border-radius:24px;
  font-weight:800; font-size:11px; cursor:pointer; white-space:nowrap; font-family:inherit; flex-shrink:0;
}
.prod-add:hover{ background:#4A0709; }
.prod-add:disabled{ background:#c9c0ba; cursor:not-allowed; }
.prod-buy{ background:var(--wine); border:none; color:var(--white); padding:8px 14px; border-radius:24px; font-weight:800; font-size:11.5px; cursor:pointer; white-space:nowrap; font-family:inherit; }
.prod-buy:hover{ background:#4A0709; }
.prod-buy:disabled{ background:#c9c0ba; cursor:not-allowed; }
.empty-state{ text-align:center; padding:60px 20px; color:var(--muted); }

@media(max-width:560px){
  .prod-info{ padding:12px 10px 14px; }
  .prod-name{ font-size:14px; min-height:2.2em; }
  .prod-price{ font-size:13.5px; }
  .prod-add{ font-size:10px; padding:7px 10px; }
  .prod-foot{ gap:6px; }
}
@media(max-width:380px){
  .prod-foot{ flex-direction:column; align-items:stretch; gap:8px; }
  .prod-add{ width:100%; text-align:center; padding:9px 10px; }
}

/* ---------- testimonials ---------- */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:800px){ .testi-grid{ grid-template-columns:1fr; } }

.join-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; align-items:stretch; }
@media(max-width:900px){ .join-grid{ grid-template-columns:1fr; } }
.join-card{ background:var(--white); border:1px solid rgba(0,0,0,0.08); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; }
.join-card-img{ height:190px; overflow:hidden; background:var(--paper-2); }
.join-card-img img{ width:100%; height:100%; object-fit:cover; }
.join-card-body{ padding:24px 26px; display:flex; flex-direction:column; flex:1; }
.join-card h3{ font-size:18px; color:var(--ink); margin-bottom:10px; }
.join-card p{ font-size:13.5px; color:var(--muted); line-height:1.6; margin-bottom:20px; flex:1; }
.join-buttons{ display:flex; gap:8px; flex-wrap:wrap; }
.join-buttons .btn{ padding:9px 16px; font-size:11.5px; flex:1; text-align:center; justify-content:center; min-width:80px; }
.join-card-small .join-buttons .btn{ flex:none; width:100%; }
.testi{ background:var(--paper-2); border:1px solid rgba(33,35,15,0.08); padding:26px; border-radius:var(--radius); }
.testi .stars{ color:var(--pop); font-size:14px; margin-bottom:12px; letter-spacing:2px; }
.testi p{ font-size:14px; line-height:1.6; color:#3c352f; margin-bottom:16px; font-family:'Fraunces'; font-style:italic; }
.testi .who{ font-size:12px; font-weight:800; letter-spacing:.03em; color:var(--rust); text-transform:uppercase; }

/* ---------- footer ---------- */
footer{ background:var(--paper); color:var(--ink); padding:48px 0 24px; border-top:1px solid rgba(0,0,0,0.08); }
.foot-grid{ display:grid; grid-template-columns:1.2fr repeat(4,1fr); gap:28px; margin-bottom:40px; }
@media(max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr 1fr; } }
@media(max-width:760px){ .foot-grid{ grid-template-columns:1fr; gap:30px; } }
.foot-grid h4{ font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--wine); margin-bottom:14px; font-weight:800; }
.foot-grid ul{ display:flex; flex-direction:column; gap:9px; }
.foot-grid a{ font-size:13.5px; color:var(--muted); overflow-wrap:anywhere; }
.foot-grid a:hover{ color:var(--wine); }
.foot-grid p{ font-size:13.5px; color:var(--muted); line-height:1.6; max-width:250px; }
.foot-social li a{ display:flex; align-items:flex-start; gap:9px; min-width:0; }
.foot-social svg{ flex-shrink:0; width:16px; height:16px; color:var(--wine); margin-top:1px; }
.foot-social li a{ overflow-wrap:anywhere; word-break:break-word; }
.foot-bottom{ display:flex; justify-content:space-between; padding-top:22px; border-top:1px solid rgba(0,0,0,0.08); font-size:11.5px; color:var(--muted); flex-wrap:wrap; gap:10px; }

@media(max-width:480px){
  .foot-grid a{ font-size:12.5px; }
  .foot-social svg{ width:14px; height:14px; }
}

/* ---------- modal (shared: checkout & login) ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(35,32,29,0.55); z-index:100; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open{ display:flex; }
.modal{ background:var(--white); max-width:460px; width:100%; border-radius:10px; padding:30px; max-height:90vh; overflow-y:auto; position:relative; }
.modal h3{ font-size:22px; color:var(--wine); margin-bottom:6px; }
.modal p.sub{ font-size:13.5px; color:var(--muted); margin-bottom:20px; }
.modal-close{ position:absolute; top:16px; right:16px; background:none; border:none; cursor:pointer; font-size:22px; color:var(--wine); line-height:1; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.field input, .field textarea, .field select{
  width:100%; padding:11px 14px; border:1.5px solid rgba(33,35,15,0.15); border-radius:8px; font-family:inherit;
  font-size:14px; background:var(--paper-2);
}
.field textarea{ resize:vertical; min-height:64px; }
.field-hint{ font-size:11.5px; color:var(--muted); margin-top:5px; }
.modal-summary{ background:var(--paper-2); border-radius:8px; padding:14px; margin-bottom:16px; font-size:13.5px; }
.modal-summary .row{ display:flex; justify-content:space-between; margin-bottom:6px; }
.modal-summary .row.total{ font-weight:800; color:var(--wine); border-top:1px dashed rgba(33,35,15,0.15); padding-top:8px; margin-top:8px; }
.alert{ padding:12px 14px; border-radius:8px; font-size:13.5px; margin-bottom:16px; }
.alert-error{ background:#FBE3E0; color:#8a1f1f; }
.alert-success{ background:#E4F3E6; color:#1f6a2a; }
.modal-switch{ text-align:center; font-size:13px; color:var(--muted); margin-top:14px; }
.modal-switch a{ color:var(--wine); font-weight:700; text-decoration:underline; }

/* ---------- product detail modal ---------- */
.detail-modal{ max-width:560px; }
.detail-modal .d-cat{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--pop); font-weight:800; }
.detail-modal h3{ font-size:22px; color:var(--wine); margin:4px 0 2px; }
.detail-modal .d-price{ font-family:'Fraunces'; font-size:18px; color:var(--wine); font-weight:600; margin-bottom:12px; }
.detail-modal .d-tagline{ font-family:'Fraunces'; font-style:italic; color:var(--rust); font-size:14.5px; margin-bottom:14px; }
.detail-modal p.d-desc{ font-size:14px; line-height:1.7; color:#4a423d; margin-bottom:10px; }
.detail-modal h4{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--wine); font-weight:800; margin:20px 0 10px; }
.detail-modal ul.d-list{ display:flex; flex-direction:column; gap:8px; }
.detail-modal ul.d-list li{ font-size:13.5px; line-height:1.55; color:#4a423d; padding-left:18px; position:relative; }
.detail-modal ul.d-list li::before{ content:'✦'; position:absolute; left:0; color:var(--pop); font-size:10px; top:3px; }
.detail-modal .d-ingredient{ margin-bottom:12px; }
.detail-modal .d-ingredient .name{ font-size:13.5px; font-weight:800; color:var(--ink); margin-bottom:2px; }
.detail-modal .d-ingredient .text{ font-size:13px; line-height:1.55; color:var(--muted); }
.detail-modal .d-shades{ display:flex; flex-wrap:wrap; gap:8px; }
.detail-modal .d-shades span{ background:var(--paper-2); border:1px solid rgba(33,35,15,0.1); padding:6px 12px; border-radius:20px; font-size:12px; font-weight:700; color:var(--ink); }
.detail-modal .d-meta{ margin-top:16px; padding-top:14px; border-top:1px solid rgba(33,35,15,0.1); font-size:12.5px; color:var(--muted); }
.detail-modal .d-meta b{ color:var(--ink); }
.detail-modal .d-gallery{ margin:-30px -30px 18px; }
.detail-modal .d-gallery-main{ position:relative; aspect-ratio:1/1; background:var(--paper-2); overflow:hidden; }
.detail-modal .d-gallery-main img{ width:100%; height:100%; object-fit:contain; }
.detail-modal .d-gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  background:rgba(255,255,255,0.9); border:none; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:20px; color:var(--ink);
  box-shadow:0 2px 8px rgba(0,0,0,0.15); line-height:1; padding:0;
}
.detail-modal .d-gallery-arrow.prev{ left:10px; }
.detail-modal .d-gallery-arrow.next{ right:10px; }
.detail-modal .d-gallery-arrow:hover{ background:var(--white); color:var(--wine); }
.detail-modal .d-gallery-thumbs{ display:flex; gap:8px; padding:12px 30px 0; overflow-x:auto; }
.detail-modal .d-thumb{ width:56px; height:56px; object-fit:contain; background:var(--paper-2); border-radius:6px; cursor:pointer; border:2px solid transparent; flex-shrink:0; }
.detail-modal .d-thumb.active{ border-color:var(--wine); }
.detail-modal .d-social{ display:flex; align-items:center; gap:14px; margin:2px 0 16px; }
.detail-modal .d-social a{ display:flex; align-items:center; opacity:0.85; transition:opacity .15s ease, transform .15s ease; }
.detail-modal .d-social a:hover{ opacity:1; transform:translateY(-1px); }
.detail-modal .d-social svg{ width:20px; height:20px; }


/* ---------- simple pages: login/riwayat wrapper ---------- */
.page-wrap{ max-width:480px; margin:60px auto; padding:0 20px; }
.page-card{ background:var(--white); border:1px solid rgba(33,35,15,0.1); border-radius:12px; padding:34px; }
.page-card h1{ font-size:26px; color:var(--wine); margin-bottom:6px; }
.page-card p.sub{ color:var(--muted); font-size:14px; margin-bottom:26px; }

/* ---------- riwayat order table ---------- */
.order-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.order-table th, .order-table td{ padding:12px 10px; text-align:left; border-bottom:1px solid rgba(33,35,15,0.08); }
.order-table th{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:800; }
.status-pill{ padding:4px 10px; border-radius:16px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; display:inline-block; }
.status-pending{ background:#FBE9C6; color:#8a5a00; }
.status-diproses{ background:#D6E6FA; color:#1a4a8a; }
.status-selesai{ background:#D9F0DC; color:#1f6a2a; }
.status-batal{ background:#F3D9D6; color:#8a1f1f; }

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); z-index:110;
  background:var(--wine); color:var(--white); padding:13px 24px; border-radius:30px; font-size:13.5px;
  font-weight:700; opacity:0; pointer-events:none; transition:all .3s ease; box-shadow:var(--shadow);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }