/* ==========================================================
   AURAFARA SPA — BASE STYLESHEET
   Direction: Vibrant Coral & Cream (catchy, playful boutique
   energy, punchy two-tone headlines, framed page, big organic
   blobs)
   Palette & language sampled from design-lab reference
   (Dribbble: GlowMore — Skincare Website UI Exploration)
   ========================================================== */

:root{
  /* ---- Palette ---- */
  --peach:#FBDCC0;        /* Background luar / alt-bg section terang */
  --peach2:#F7C79A;        /* Gradient hero, secondary photo tone */
  --cream:#FFFBF6;        /* Base background page-frame & nav bar */
  --coral:#F2542E;        /* Primary accent — button utama (vibrant coral) */
  --coral-dark:#C23517;   /* Hover state / heading link (deep coral) */
  --gold:#F2921E;         /* Secondary accent — blob, badge, WhatsApp button */
  --rust:#24140D;         /* Heading text (near-black warm brown) */
  --rust-soft:#6B4F3E;    /* Body / muted text (warm brown) */
  --terracotta:#3D160B;   /* Satu-satunya bg gelap — footer & about sahaja (deep maroon) */
}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{background:var(--peach);}

body{
  font-family:'Poppins',sans-serif;
  color:var(--rust);
  line-height:1.6;
}

/* ---------------- PAGE FRAME & BLOBS ---------------- */
.page-blob{position:fixed;border-radius:50%;z-index:0;pointer-events:none;}
.blob-tr{width:340px;height:340px;background:var(--gold);top:-100px;right:-100px;opacity:.9;}
.blob-l{width:260px;height:260px;background:var(--coral);top:36%;left:-120px;opacity:.85;}
.page-frame{position:relative;z-index:1;max-width:1400px;margin:18px auto;border:1px solid var(--coral-dark);border-radius:26px;overflow:hidden;background:var(--cream);}
@media (max-width:760px){
  .page-frame{margin:10px;border-radius:18px;}
  .blob-tr{width:200px;height:200px;top:-70px;right:-70px;}
  .blob-l{width:150px;height:150px;left:-80px;}
}

h1,h2,h3{font-family:'Playfair Display',serif;font-weight:700;color:var(--rust);}
.quote{font-family:'Playfair Display',serif;font-style:italic;}
.muted{color:var(--rust-soft);}
a{text-decoration:none;color:inherit;}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

.badge{
  display:inline-block;
  font-size:12px;
  letter-spacing:2px;
  font-weight:700;
  color:var(--coral-dark);
  text-transform:uppercase;
  margin-bottom:10px;
}

/* ---------------- EYEBROW (location tag / numbered section label) ---------------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--coral-dark);margin-bottom:16px;}
.eyebrow .rule{width:26px;height:2px;background:var(--coral-dark);display:inline-block;flex-shrink:0;}
.eyebrow .num{font-family:'Playfair Display',serif;font-style:italic;font-size:16px;text-transform:none;letter-spacing:0;color:var(--rust-soft);}
.eyebrow.center{justify-content:center;}
.eyebrow.on-dark{color:var(--peach2);}
.eyebrow.on-dark .rule{background:var(--peach2);}
.eyebrow.on-dark .num{color:var(--peach2);opacity:.7;}

/* ---------------- NAV ---------------- */
nav{position:sticky;top:0;background:var(--cream);z-index:50;border-bottom:1px solid #F5D9BC;}
nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding-top:16px;padding-bottom:16px;}
.logo{font-family:'Playfair Display',serif;font-style:italic;font-size:24px;color:var(--coral-dark);justify-self:center;}
.navlinks{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;font-weight:600;letter-spacing:.5px;justify-self:start;}
.navlinks a:hover{color:var(--coral);}
.nav-actions{display:flex;align-items:center;gap:14px;justify-self:end;}
.lang-switch{display:inline-flex;border:1px solid var(--coral-dark);border-radius:20px;overflow:hidden;}
.lang-switch button{font-family:inherit;font-size:11px;font-weight:700;letter-spacing:1px;padding:6px 12px;background:transparent;border:none;color:var(--coral-dark);cursor:pointer;transition:background-color .25s ease, color .25s ease;}
.lang-switch button.active{background:var(--coral-dark);color:var(--cream);}
@media (max-width:760px){
  nav .wrap{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .navlinks,.logo,.nav-actions{justify-self:center;}
}

/* ---------------- BUTTONS ----------------
   Primary CTA  = .btn-coral  (booking / action utama)
   Secondary    = .btn-outline (navigasi ringan)
   WhatsApp nav = .btn-gold
------------------------------------------- */
.btn{display:inline-block;padding:12px 26px;border-radius:30px;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.btn-coral{background:var(--coral);color:var(--cream);}
.btn-coral:hover{background:var(--coral-dark);}
.btn-gold{background:var(--gold);color:var(--terracotta);}
.btn-outline{border:2px solid var(--coral);color:var(--coral-dark);background:transparent;}
.btn-gold-outline{border-color:var(--gold);color:var(--gold);}
.btn-block{width:100%;text-align:center;display:block;}
.btn-sm{font-size:11px;padding:8px 18px;}

/* ---------------- HERO ---------------- */
.hero{background:linear-gradient(160deg,var(--peach) 0%, var(--peach2) 100%);padding:70px 0 90px;position:relative;overflow:hidden;}
.hero .wrap{display:flex;align-items:center;gap:50px;flex-wrap:wrap;}
.hero-copy{flex:1 1 420px;}
.hero-copy h1{font-size:52px;line-height:1.14;margin-bottom:18px;font-weight:700;}
.hero-copy h1 .accent{color:var(--coral);font-style:italic;}
.hero-copy p{color:var(--rust-soft);margin-bottom:26px;max-width:46ch;}
.hero-ctas{display:flex;gap:18px;flex-wrap:wrap;align-items:center;}
.hero-ctas.center{justify-content:center;}
.cta-link{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:600;color:var(--rust);}
.cta-circle{width:40px;height:40px;border-radius:50%;background:var(--cream);border:1px solid var(--coral-dark);display:inline-flex;align-items:center;justify-content:center;font-size:15px;color:var(--coral-dark);flex-shrink:0;}
.cta-link .label{text-decoration:underline;text-underline-offset:3px;}
.hero-photo{flex:1 1 340px;background:linear-gradient(160deg,var(--peach2),var(--coral));border-radius:220px 220px 32px 32px;min-height:400px;display:flex;align-items:center;justify-content:center;color:var(--cream);text-align:center;font-size:14px;padding:20px;}
.dot{position:absolute;border-radius:50%;opacity:.35;}
.dot1{width:70px;height:70px;background:var(--gold);top:30px;right:60px;opacity:.8;}
.dot2{width:90px;height:90px;background:var(--peach2);bottom:-30px;left:-30px;}

/* ---------------- SERVICE TICKER ---------------- */
.ticker{background:var(--terracotta);padding:16px 0;overflow:hidden;border-top:1px solid rgba(201,151,74,.25);border-bottom:1px solid rgba(201,151,74,.25);}
.ticker-track{display:flex;gap:36px;white-space:nowrap;width:max-content;animation:ticker-scroll 32s linear infinite;}
.ticker-track span{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--peach2);}
.ticker-track span.sep{color:var(--gold);}
@keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;overflow-x:auto;}
}

/* ---------------- SECTION SHELL ---------------- */
section{padding:70px 0;}
.section-head{text-align:center;margin-bottom:40px;}
.section-head h2{font-size:30px;margin-bottom:6px;}
.alt-bg{background:var(--peach);}

/* ---------------- ABOUT (numbered dark section) ---------------- */
.section-dark{background:var(--terracotta);color:var(--peach2);}
.section-dark h2{color:var(--cream);}
.about-grid{display:flex;gap:56px;align-items:center;flex-wrap:wrap;}
.about-copy{flex:1 1 420px;}
.about-copy p{color:var(--peach2);margin-bottom:28px;max-width:50ch;}
.stat-row{display:flex;gap:16px;flex-wrap:wrap;}
.stat-pill{background:var(--cream);color:var(--rust);border-radius:999px;padding:14px 28px;display:flex;flex-direction:column;align-items:center;min-width:120px;}
.stat-pill strong{font-size:22px;line-height:1.2;}
.stat-pill span{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--rust-soft);}
.capsule-row{flex:1 1 340px;display:flex;gap:14px;align-items:flex-end;}
.capsule-photo{flex:1;border-radius:999px;background:linear-gradient(165deg,var(--peach2),var(--coral));display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;color:var(--cream);padding:16px;}
.capsule-photo:nth-child(1){height:260px;}
.capsule-photo:nth-child(2){height:320px;}
.capsule-photo:nth-child(3){height:230px;}
@media (max-width:640px){
  .capsule-row{gap:10px;}
  .capsule-photo:nth-child(1),.capsule-photo:nth-child(2),.capsule-photo:nth-child(3){height:200px;}
}

/* ---------------- SERVICE / CARD GRID ---------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;}
.card{background:var(--cream);border:1px solid #F5D9BC;border-radius:16px;padding:24px;}
.card-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(160deg,var(--peach2),var(--peach));font-size:24px;margin-bottom:14px;transition:transform .35s ease;}
.card:hover .card-icon{transform:scale(1.1) rotate(-6deg);}
.card h3{font-size:18px;margin-bottom:10px;color:var(--coral-dark);}
.card ul{list-style:none;margin-bottom:16px;}
.card ul li{font-size:14px;color:var(--rust-soft);padding:4px 0 4px 18px;position:relative;}
.card ul li:before{content:"→";position:absolute;left:0;color:var(--coral);font-weight:700;}
.card .price-hint{font-size:12px;color:var(--coral-dark);font-weight:700;margin-bottom:10px;}
.card-desc{margin-bottom:16px;font-size:14px;}
.benefit{margin-top:14px;padding-top:14px;border-top:1px dashed #F5D9BC;}
.benefit .benefit-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--coral-dark);margin-bottom:6px;}
.benefit p{font-size:13px;color:var(--rust-soft);font-style:italic;font-family:'Playfair Display',serif;}
.new-tag{background:var(--gold);color:var(--terracotta);font-size:11px;font-weight:700;letter-spacing:1px;padding:3px 10px;border-radius:20px;display:inline-block;margin-bottom:10px;}
.badge-value{background:var(--gold);color:var(--terracotta);font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;margin-left:8px;}

/* ---------------- AURAFARA PICKS (AFFILIATE) ---------------- */
.picks{background:linear-gradient(90deg,#FCE9D4,var(--peach));}
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:20px;}
.product-card{background:var(--cream);border-radius:16px;padding:18px;text-align:center;border:1px solid var(--peach2);}
.product-photo{background:var(--peach2);border-radius:10px;height:110px;display:flex;align-items:center;justify-content:center;color:var(--coral-dark);font-size:12px;margin-bottom:12px;}
.product-card h4{font-size:14px;margin-bottom:8px;}
.disclosure{text-align:center;font-size:12px;font-style:italic;color:#8A6A52;font-family:'Playfair Display',serif;}

/* ---------------- BEAUTY SECRET (sister-brand, branding berbeza) ---------------- */
.beauty-secret{
  --peach:#F6E4EE;
  --peach2:#E3BFD6;
  --cream:#FFFBFC;
  --coral:#8C2F52;
  --coral-dark:#6B2141;
  --gold:#C9A15A;
  --rust:#2B1420;
  --rust-soft:#6B4A57;
  background:var(--peach);
}
.beauty-secret .disclosure{color:#8A5A72;}
.beauty-secret .product-grid,
.beauty-secret .grid{margin-bottom:36px;}
.beauty-subhead{font-size:20px;margin:0 0 20px;text-align:center;}
.beauty-subhead:not(:first-of-type){margin-top:8px;}

/* ---------------- TESTIMONI ---------------- */
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;}
.testi-card{background:var(--peach);border-radius:16px;padding:20px;border:1px solid var(--gold);}
.testi-card .stars{color:var(--gold);margin-bottom:8px;font-size:14px;}
.testi-card p{font-size:13.5px;color:var(--rust-soft);margin-bottom:10px;}
.testi-card .name{font-size:13px;font-weight:700;color:var(--coral-dark);}

/* ---------------- FOOTER (satu-satunya bg gelap) ---------------- */
footer{background:var(--terracotta);color:var(--peach2);padding:60px 0 30px;text-align:center;}
footer .logo{color:var(--cream);font-size:26px;margin-bottom:16px;}
footer p{font-size:13.5px;margin-bottom:6px;color:#E8B99A;}
footer .socials{margin-top:20px;display:flex;justify-content:center;gap:16px;font-size:13px;}
footer .socials a{border:1px solid var(--gold);padding:8px 16px;border-radius:20px;color:var(--gold);font-weight:600;}
footer hr{border:none;border-top:1px solid rgba(242,146,30,.3);width:200px;margin:26px auto 16px;}
footer .fine{font-size:11px;color:#B98F6E;}

/* ---------------- BOOKING & PAYMENT (struktur asas — gateway belum disambungkan) ---------------- */
.booking-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:start;}
.booking-form{background:var(--cream);border:1px solid #F5D9BC;border-radius:20px;padding:32px;}
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.form-row label{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--coral-dark);}
.form-row input,.form-row select,.form-row textarea{font-family:inherit;font-size:14px;padding:12px 14px;border:1px solid #F5D9BC;border-radius:10px;background:var(--cream);color:var(--rust);}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:2px solid var(--coral-dark);outline-offset:1px;}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

.payment-panel{background:var(--terracotta);color:var(--peach2);border-radius:20px;padding:32px;position:sticky;top:100px;}
.payment-panel h3{color:var(--cream);margin-bottom:6px;font-size:18px;}
.payment-panel .muted-dark{color:var(--peach2);opacity:.8;font-size:13px;margin-bottom:20px;}
.gateway-option{display:flex;align-items:center;justify-content:space-between;background:rgba(251,245,242,.06);border:1px solid rgba(247,199,154,.25);border-radius:12px;padding:14px 16px;margin-bottom:12px;font-size:13px;}
.gateway-option .tag-soon{background:var(--gold);color:var(--terracotta);font-size:10px;font-weight:700;letter-spacing:.5px;padding:3px 10px;border-radius:20px;text-transform:uppercase;}
.payment-total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-top:1px solid rgba(247,199,154,.25);margin-top:8px;margin-bottom:20px;}
.payment-total strong{font-size:24px;color:var(--cream);}
.btn-disabled{background:rgba(251,245,242,.15);color:var(--peach2);cursor:not-allowed;width:100%;text-align:center;border:1px solid rgba(247,199,154,.25);}
@media (max-width:860px){
  .booking-grid{grid-template-columns:1fr;}
  .payment-panel{position:static;}
  .form-grid-2{grid-template-columns:1fr;}
}

/* ---------------- MOTION & INTERACTION ---------------- */
html{scroll-behavior:smooth;}
section[id]{scroll-margin-top:90px;}

nav{transition:box-shadow .3s ease, background-color .3s ease;}
nav.scrolled{box-shadow:0 8px 24px -14px rgba(36,20,13,.28);background:rgba(255,251,246,.92);backdrop-filter:blur(8px);}

.btn{transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;}
.btn-coral:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(194,53,23,.55);}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 22px -10px rgba(242,146,30,.55);}
.btn-outline:hover{transform:translateY(-2px);background:var(--peach);}

.cta-circle{transition:transform .3s ease, background-color .3s ease, color .3s ease;}
.cta-link:hover .cta-circle{transform:translateX(4px);background:var(--coral-dark);color:var(--cream);}
a.cta-circle:hover{transform:scale(1.08);background:var(--coral-dark);color:var(--cream);}

.card,.testi-card,.product-card{transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;}
.card:hover,.product-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -22px rgba(36,20,13,.3);border-color:var(--coral);}
.testi-card{position:relative;overflow:hidden;}
.testi-card:hover{transform:translateY(-6px);box-shadow:0 20px 36px -20px rgba(36,20,13,.22);}
.testi-card::before{content:"\201C";position:absolute;top:-16px;right:14px;font-family:'Playfair Display',serif;font-size:76px;color:var(--gold);opacity:.3;line-height:1;pointer-events:none;}

.capsule-photo{transition:transform .45s ease, box-shadow .45s ease;}
.capsule-photo:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 24px 40px -20px rgba(0,0,0,.4);}

/* floating hero dots */
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.dot1{animation:floaty 6s ease-in-out infinite;}
.dot2{animation:floaty 7s ease-in-out infinite;animation-delay:-2.5s;}

/* scroll reveal */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s ease;}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
[data-reveal-delay="1"]{transition-delay:.08s;}
[data-reveal-delay="2"]{transition-delay:.16s;}
[data-reveal-delay="3"]{transition-delay:.24s;}
[data-reveal-delay="4"]{transition-delay:.32s;}
[data-reveal-delay="5"]{transition-delay:.4s;}
[data-reveal-delay="6"]{transition-delay:.48s;}

.stat-pill strong{font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .dot1,.dot2{animation:none;}
  [data-reveal]{opacity:1;transform:none;transition:none;}
  .btn,.cta-circle,.card,.card-icon,.testi-card,.product-card,.capsule-photo{transition:none;}
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:640px){
  .hero-copy h1{font-size:36px;}
  .navlinks{gap:14px;font-size:12px;}
  .hero-photo{border-radius:120px 120px 24px 24px;min-height:280px;}
}