/* =====================================================
   VAXA — style.css
   Urutan: warna > dasar > intro > menu > hero > bagian-bagian > tombol musik > HP
   ===================================================== */

/* ===== DASAR ===== */
:root{
  /* ✏️ WARNA — ubah di sini, seluruh website ikut berubah */
  --bg:#FFFBFD;        /* latar halaman */
  --ink:#2B1330;       /* warna teks utama */
  --muted:#6E5A75;     /* teks pendukung (abu keunguan) */
  --line:#F3D9EA;      /* garis pemisah */
  --pink:#FF4FA3;      /* pink utama */
  --pink-deep:#D6287F; /* pink tua untuk judul kecil */
  --soft:#FFB0EA;      /* pink muda */
  --blush:#FFEAF6;     /* pink sangat muda */
  --grad:linear-gradient(135deg,#FF4FA3 0%,#FF8FD0 55%,#FFB0EA 100%); /* gradasi tombol */
  /* ✏️ FONT */
  --display:"Sora","Segoe UI",system-ui,sans-serif;   /* judul */
  --body:"Figtree","Segoe UI",system-ui,sans-serif;   /* isi teks */
  /* ✏️ LOGO — ganti file ini di assets/images/ */
  --logo:url("../assets/images/logo_vaxa.svg");
  color-scheme:light;
}
/* ===== DASAR: reset, font, ukuran teks ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html.intro-on,html.intro-on body{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.65}
a{color:inherit}
:focus-visible{outline:3px solid var(--pink-deep);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.1;letter-spacing:-.025em}
p{margin:0 0 1em;max-width:60ch}
.wrap{max-width:70rem;margin:0 auto;padding:0 1.5rem}
.logo{display:block;aspect-ratio:900/264;background:var(--logo) center/contain no-repeat}

/* =====================================================
   INTRO: 4 kursor pink bertemu di tengah, lalu logo muncul
   Urutan (detik setelah tombol "Ketuk untuk masuk" ditekan):
     0 – 1.4   4 kursor meluncur dari 4 sudut layar
     1.6       kursor "mengklik"
     1.65      gelombang pink    1.7  logo muncul
     2.6       layar putih terangkat, isi website terlihat
   Kalau mengubah waktu di sini, samakan juga dengan
   assets/sounds/intro.mp3 dan INTRO_END_MS di js/script.js
   ===================================================== */
.intro{position:fixed;inset:0;z-index:100;background:#fff;clip-path:inset(0)}
.intro.play{animation:lift .8s cubic-bezier(.7,0,.2,1) 2.6s forwards;cursor:pointer}
.intro.skip{animation:lift .5s ease forwards}

/* tombol masuk (sebelum animasi mulai) */
.enter{position:absolute;left:50%;top:50%;translate:-50% -50%;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--ink);background:var(--grad);border:0;border-radius:999px;padding:.95rem 2rem;cursor:pointer;box-shadow:0 12px 30px rgba(255,79,163,.35);transition:opacity .25s,transform .2s}
.enter:hover{transform:scale(1.04)}
.welcome{position:absolute;left:0;right:0;bottom:calc(50% + 2.6rem);margin:0 auto;max-width:none;text-align:center;font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,4.5vw,2.2rem);letter-spacing:-.02em;color:var(--ink);padding:0 1.5rem;transition:opacity .25s}
.hint,.skiphint{position:absolute;left:0;right:0;text-align:center;color:var(--muted);font-size:.85rem;transition:opacity .3s}
.hint{top:calc(50% + 3.6rem)}
.skiphint{bottom:1.5rem;opacity:0}
.intro.play .enter,.intro.play .hint,.intro.play .welcome{opacity:0;pointer-events:none}
.intro.play .skiphint{opacity:1;transition-delay:.4s}

/* 4 kursor: --sx/--sy = posisi awal, --ex/--ey = posisi akhir, --r = arah panah */
.cur{position:absolute;left:50%;top:50%;width:38px;height:53px;transform-origin:0 0;opacity:0;
  filter:drop-shadow(0 6px 10px rgba(255,79,163,.35));translate:var(--sx) var(--sy);rotate:var(--r)}
.c1{--sx:-60vw;--sy:-60vh;--ex:-130px;--ey:-62px;--r:180deg}  /* kiri atas */
.c2{--sx:60vw;--sy:-60vh;--ex:130px;--ey:-62px;--r:-90deg}    /* kanan atas */
.c3{--sx:-60vw;--sy:60vh;--ex:-130px;--ey:62px;--r:90deg}     /* kiri bawah */
.c4{--sx:60vw;--sy:60vh;--ex:130px;--ey:62px;--r:0deg}       /* kanan bawah */
.intro.play .cur{animation:fly 1.4s cubic-bezier(.16,.84,.3,1) forwards,tap .35s ease 1.6s,cfade .3s ease 2.3s forwards}
.intro.play .c2{animation-delay:.08s,1.6s,2.3s}
.intro.play .c3{animation-delay:.16s,1.6s,2.3s}
.intro.play .c4{animation-delay:.24s,1.6s,2.3s}

.ripple{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;border-radius:50%;border:2px solid var(--pink);opacity:0}
.intro.play .ripple{animation:ring .9s ease-out 1.65s}
.intro .logo{position:absolute;left:50%;top:50%;width:min(60vw,320px);translate:-50% -50%;opacity:0;scale:.9}
.intro.play .logo{animation:mark .8s cubic-bezier(.2,.8,.2,1) 1.7s forwards}

@keyframes fly{0%{translate:var(--sx) var(--sy);opacity:0}15%{opacity:1}100%{translate:var(--ex) var(--ey);opacity:1}}
@keyframes tap{50%{scale:.78}}
@keyframes cfade{to{opacity:0}}
@keyframes ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(26)}}
@keyframes mark{to{opacity:1;scale:1}}
@keyframes lift{to{clip-path:inset(0 0 100% 0);visibility:hidden}}

/* Pengunjung yang mengaktifkan "kurangi gerakan": intro dilewati */
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* Isi hero muncul bergantian saat layar intro terangkat */
html.intro-on .rise{opacity:0}
html.playing .rise{animation:up .8s cubic-bezier(.2,.8,.2,1) 2.9s both}
html.playing .rise:nth-child(2){animation-delay:3s}
html.playing .rise:nth-child(3){animation-delay:3.1s}
html.playing.skipped .rise,html.playing.skipped .rise:nth-child(n){animation-delay:.15s}
@keyframes up{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}

/* ===== MENU ATAS (menempel saat di-scroll) ===== */
header.top{position:sticky;top:0;z-index:20;background:rgba(255,251,253,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4rem}
.bar .logo{width:104px}
.bar nav{display:flex;align-items:center;gap:1.5rem;font-family:var(--display);font-size:.92rem}
.bar nav a{text-decoration:none}
.bar nav a:not(.btn):hover{color:var(--pink-deep)}
/* tombol gradasi pink (.dark = hitam, .line = garis) */
.btn{display:inline-block;font-family:var(--display);font-weight:600;font-size:.95rem;text-decoration:none;padding:.75rem 1.4rem;border-radius:999px;background:var(--grad);color:var(--ink);transition:filter .2s,transform .2s}
.btn:hover{filter:saturate(1.2) brightness(1.04);transform:translateY(-1px)}
.btn.dark{background:var(--ink);color:#fff}
.btn.line{background:transparent;border:2px solid var(--ink)}
.bar .btn{padding:.55rem 1.1rem;font-size:.88rem}
section[id]{scroll-margin-top:4.5rem}

/* ===== HERO: judul besar di bagian paling atas ===== */
.hero{position:relative;overflow:hidden;padding:clamp(4rem,11vw,8.5rem) 0 clamp(4rem,9vw,7rem)}
.hero::before{content:"";position:absolute;right:-12%;top:-18%;width:min(70vw,52rem);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,79,163,.34),rgba(255,176,234,.22) 55%,transparent 78%);pointer-events:none}
.hero .wrap{position:relative}
.hero h1{font-size:clamp(2.7rem,8vw,5.8rem);font-weight:700;max-width:13ch}
.hero p.lead{font-size:1.2rem;color:var(--muted);margin:1.6rem 0 2rem;max-width:46ch}
.cta{display:flex;flex-wrap:wrap;gap:.75rem}
/* ===== BAGIAN-BAGIAN: tampilan umum, Tentang, dan Layanan ===== */
section.s{padding:clamp(3.5rem,8vw,6rem) 0;border-top:1px solid var(--line)}
.head{display:grid;grid-template-columns:12rem 1fr;gap:1.5rem;margin-bottom:2.5rem}
.head h2{font-size:1rem;font-weight:600;color:var(--pink-deep)}
.head p{font-family:var(--display);font-size:clamp(1.5rem,3.2vw,2.3rem);font-weight:600;line-height:1.2;letter-spacing:-.02em;margin:0;max-width:28ch}
.about{display:grid;grid-template-columns:12rem 1fr 1fr;gap:1.5rem}
.about h3{font-size:1rem;font-weight:600;color:var(--pink-deep)}
.rows{list-style:none;margin:0;padding:0}
.rows li{padding:1rem 0 1rem 1.1rem;border-top:1px solid var(--line);position:relative}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows li::before{content:"";position:absolute;left:0;top:1.35rem;width:.45rem;height:.45rem;border-radius:50%;background:var(--grad)}
.rows b{font-family:var(--display);font-weight:600;display:block}
.rows span{color:var(--muted);font-size:.98rem}
.svc{display:grid;grid-template-columns:12rem 1fr;gap:1.5rem;padding:1.5rem 0;border-top:1px solid var(--line)}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc h3{font-size:clamp(1.3rem,2.6vw,1.8rem)}
.svc p{margin:0;color:var(--muted)}
/* ===== TOKO PRODUK: kartu dengan harga dan tombol beli ===== */
.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.item{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:1.25rem;background:#fff;overflow:hidden;transition:transform .25s,box-shadow .25s}
.item:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(255,79,163,.16)}
.cover{position:relative;aspect-ratio:4/3;background:var(--grad)}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.item:nth-child(2n) .cover{background:linear-gradient(200deg,#FFB0EA,#FF4FA3)}
.item:nth-child(3n) .cover{background:linear-gradient(160deg,#FFEAF6,#FF8FD0 70%,#FF4FA3)}
.tag{position:absolute;left:.9rem;top:.9rem;padding:.25rem .8rem;border-radius:999px;background:rgba(255,255,255,.92);font-family:var(--display);font-weight:600;font-size:.8rem}
.info{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1.25rem 1.3rem;flex:1}
.info h3{font-size:1.1rem}
.info p{margin:0;color:var(--muted);font-size:.95rem;flex:1}
.buy{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.9rem}
.price{font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.2}
.price s,.price small{display:block;font-weight:400;font-size:.8rem;color:var(--muted)}
.buy .btn{padding:.55rem 1.3rem;font-size:.9rem}
.note{margin:1.75rem 0 0;color:var(--muted);font-size:.95rem}
/* ===== KONTAK + FOOTER ===== */
.contact{border-radius:2rem;background:var(--grad);padding:clamp(2rem,6vw,4.5rem)}
.contact h2{font-size:clamp(2rem,6vw,4rem);max-width:14ch;margin-bottom:1rem}
.contact p{max-width:44ch;margin-bottom:1.75rem}
footer{padding:2rem 0 3rem;color:var(--muted);font-size:.92rem}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
footer .logo{width:90px}

/* ===== TAMPILAN TABLET & HP ===== */
@media (max-width:1000px) and (min-width:761px){.shop{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .head,.about,.svc{grid-template-columns:1fr;gap:.6rem}
  .about>div{margin-bottom:1.25rem}
  .shop{grid-template-columns:1fr}
  .bar nav a:not(.btn){display:none}
}

/* ===== TOMBOL MUSIK MELAYANG (kanan bawah) ===== */
.music{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:50;width:3.2rem;height:3.2rem;border:0;border-radius:50%;background:var(--grad);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 26px rgba(255,79,163,.4);transition:transform .2s,opacity .4s}
.music[hidden]{display:none}
.music:hover{transform:scale(1.06)}
.music svg{width:1.3rem;height:1.3rem;fill:currentColor}
.music .i-pause{display:none}
.music.is-playing .i-pause{display:block}
.music.is-playing .i-play{display:none}
html.intro-on .music{opacity:0;pointer-events:none}   /* tersembunyi selama intro */