/*
Theme Name:  Nysma
Theme URI:   https://nysma.id
Author:      NYSMA Beauty Clinic
Description: Tema custom satu-halaman untuk NYSMA Beauty Clinic. Dibangun dari
             desain company-profile statis, dipindah ke WordPress supaya tim
             klinik bisa mengubah teks, layanan, dan ulasan sendiri lewat
             wp-admin -- tanpa perlu sentuh kode. Sengaja TIDAK memakai page
             builder (Elementor dkk) supaya kode tetap kecil dan permukaan
             serangannya minim.
Version:     1.0.0
Requires PHP: 7.4
Text Domain: nysma
License:     Proprietary

Palet & tipografi diturunkan dari logo asli: serif berkontras tinggi untuk
"NYSMA", aksen script untuk nuansa "Beauty Clinic", di atas dasar gading hangat
dengan tinta coklat marun dan aksen emas. Situs ini sengaja satu tema (terang).
*/

:root{
  --ground:      #FBF5EC;
  --ground-2:    #F6EBDC;
  --surface:     #FFFDF9;
  --ink:         #3F2A1E;
  --ink-soft:    #7A5C48;
  --ink-faint:   #A8907C;
  --accent:      #A97A2E;
  --accent-2:    #C99A4C;
  --accent-soft: #F1E1BE;
  --rule:        #E6D6C0;
  --rule-strong: #D8C2A2;
  --shadow:      0 20px 45px -25px rgba(63,42,30,.35);

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-script:  "Alex Brush", "Brush Script MT", cursive;
  --font-body:    "Jost", "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--ink); color:var(--surface); padding:.8em 1.2em; border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.eyebrow{
  font-family:var(--font-body);
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .9rem;
}

h1,h2,h3{ font-family:var(--font-display); color:var(--ink); text-wrap:balance; margin:0 0 1rem; }
h2{ font-size:clamp(1.9rem, 3.2vw, 2.6rem); font-weight:700; }
h3{ font-size:1.3rem; font-weight:700; }
p{ margin:0 0 1rem; max-width:62ch; color:var(--ink-soft); }

.script{ font-family:var(--font-script); font-weight:400; color:var(--accent); }

.section-inner{ max-width:1120px; margin:0 auto; padding:6.5rem 1.75rem; }

/* Header sticky menutupi bagian atas target saat lompat-anchor (klik menu,
   atau scrollIntoView) tanpa ini -- setiap section yang jadi tujuan #anchor
   perlu ruang cadangan setinggi header. */
#tentang, #layanan, #kontak{ scroll-margin-top:76px; }

/* ---------------------------------- reveal ---------------------------------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.08s; }
.reveal:nth-child(3){ transition-delay:.16s; }
.reveal:nth-child(4){ transition-delay:.24s; }

/* ---------------------------------- buttons ---------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  padding:.85em 1.6em; border-radius:999px; font-family:var(--font-body);
  font-size:.95rem; font-weight:500; letter-spacing:.01em; white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-cta{ background:var(--ink); color:var(--surface); box-shadow:var(--shadow); }
.btn-cta:hover{ transform:translateY(-2px); box-shadow:0 22px 40px -20px rgba(63,42,30,.5); }
.btn-ghost{ border:1.5px solid var(--rule-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.icon-wa{ width:1.05em; height:1.05em; fill:currentColor; }

/* ---------------------------------- header ---------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:transparent;
  transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.site-header.is-scrolled{
  background:rgba(251,245,236,.86);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--rule);
}
.header-inner{
  max-width:1200px; margin:0 auto; padding:1rem 1.75rem;
  display:flex; align-items:center; gap:1.5rem;
}
.brand{ margin-right:auto; }
/* Wordmark ditulis sebagai teks, bukan gambar -- berkas logo sumber tidak
   punya kanal alpha sungguhan (diperiksa: color type RGB, bukan RGBA), jadi
   kotak putih di baliknya ikut tercetak dan tidak pernah menyatu dengan
   latar apa pun. Teks asli selalu transparan secara alami. */
.brand-mark{
  display:flex; flex-direction:column; line-height:1.05;
  font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--ink);
}
.brand-mark em{
  font-family:var(--font-script); font-style:normal; font-weight:400;
  font-size:.95rem; color:var(--accent); margin-top:.1rem;
}

.main-nav{ display:flex; gap:2.2rem; font-size:.92rem; font-weight:500; }
.main-nav a{ position:relative; padding:.3rem 0; }
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.main-nav a:hover::after{ transform:scaleX(1); }
.nav-wa{ display:none; }

.header-cta{ padding:.65em 1.3em; font-size:.85rem; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; width:26px; background:none; border:0; cursor:pointer; padding:0;
}
.nav-toggle span{ height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }

/* ---------------------------------- hero ---------------------------------- */
.hero{
  position:relative; overflow:hidden;
  padding:7.5rem 1.75rem 6rem;
  background:
    radial-gradient(ellipse 60% 50% at 85% -10%, var(--accent-soft) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at -5% 110%, var(--ground-2) 0%, transparent 60%),
    var(--ground);
}
.hero-ghost{
  position:absolute; right:-2vw; top:-8vw; z-index:0;
  font-family:var(--font-display); font-weight:900; font-style:italic;
  font-size:min(48vw, 620px); line-height:1; color:var(--ink);
  opacity:.045; user-select:none; pointer-events:none;
}
.hero-inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center; }
.hero-title{ font-size:clamp(2.4rem, 5.4vw, 3.9rem); font-weight:700; line-height:1.12; }
.hero-lede{ font-size:1.1rem; max-width:52ch; margin:0 auto 2.2rem; }
.hero-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.6rem; }
.hero-tagline{
  font-size:1.15rem; color:var(--ink-soft); letter-spacing:.02em; margin:0;
}
.tagline-script{ font-size:1.5rem; }

/* ---------------------------------- tentang ---------------------------------- */
.tentang{ background:var(--surface); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
/* Teks tetap sempit -- baris yang terlalu lebar justru susah dibaca -- tapi
   carousel di bawahnya sengaja TIDAK ikut dibatasi, supaya di layar desktop
   ia memakai penuh lebar section-inner (1120px) dan bisa menampilkan lebih
   banyak kartu ulasan sekaligus, bukan menyisakan ruang kosong di kanan-kiri. */
.tentang-copy{ max-width:640px; }

/* ---- carousel ulasan: beberapa kartu tampil sekaligus, digeser lewat
   scrollLeft native (drag/swipe bawaan browser), bukan transform. ---- */
.review-carousel{ margin-top:2.2rem; }

.review-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:1.1rem; flex-wrap:wrap;
}
.review-head-number{ font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--ink); }
.review-head-stars{ color:var(--accent); font-size:.95rem; letter-spacing:.1em; margin:0 .5rem; }
.review-head-meta{ font-size:.82rem; color:var(--ink-faint); }

.review-controls{ display:flex; gap:.6rem; }
.review-arrow{
  width:36px; height:36px; border-radius:50%; border:1.5px solid var(--rule-strong);
  background:var(--surface); color:var(--ink); font-size:1.2rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  transition:border-color .2s ease, color .2s ease;
}
.review-arrow:hover{ border-color:var(--accent); color:var(--accent); }

.review-track{
  display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.2rem .2rem 1rem; margin:0 -.2rem;
  scrollbar-width:thin; scrollbar-color:var(--rule-strong) transparent;
}
.review-card{
  flex:0 0 268px; scroll-snap-align:start; box-sizing:border-box;
  background:var(--ground); border:1px solid var(--rule-strong); border-radius:16px;
  padding:1.5rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.7rem;
}
.review-card-top{ display:flex; align-items:center; gap:.7rem; }
.review-avatar{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  background:var(--accent); color:var(--surface);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
}
.review-name-col{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.review-name{ font-weight:600; font-size:.9rem; color:var(--ink); }
.review-time{ font-size:.74rem; color:var(--ink-faint); }
.review-card-stars{ color:var(--accent); font-size:.82rem; letter-spacing:.1em; }
.review-card-text{ margin:0; font-size:.88rem; color:var(--ink-soft); max-width:none; line-height:1.55; }

.review-card-agregat{
  justify-content:center; align-items:flex-start; background:var(--ink); border-color:var(--ink);
}
.review-card-agregat-lede{ margin:0; font-size:.92rem; color:var(--ground-2); max-width:none; line-height:1.55; }
.review-card-link{
  font-size:.85rem; font-weight:600; color:var(--accent-2);
  border-bottom:1px solid transparent; transition:border-color .2s ease;
}
.review-card-link:hover{ border-color:var(--accent-2); }

/* ---------------------------------- layanan ---------------------------------- */
.layanan-tabs{
  display:flex; gap:.6rem; overflow-x:auto; margin:2.2rem 0 0; padding-bottom:.6rem;
  scrollbar-width:thin; scrollbar-color:var(--rule-strong) transparent;
}
.layanan-tab{
  flex:0 0 auto; white-space:nowrap; font-family:var(--font-body);
  background:var(--surface); border:1.5px solid var(--rule-strong); color:var(--ink-soft);
  padding:.6em 1.15em; border-radius:999px; font-size:.85rem; font-weight:500;
  cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.layanan-tab:hover{ border-color:var(--accent); color:var(--ink); }
.layanan-tab.is-active{ background:var(--ink); border-color:var(--ink); color:var(--surface); }

/* Tanpa harga/durasi, tiap entri cukup sebagai satu potong nama pendek --
   dirender sebagai chip yang mengalir (flex-wrap), bukan tabel. Ini menskala
   baik dari kategori berisi 1 item sampai yang berisi puluhan: chip pendek
   berdempetan rapat, chip panjang mengambil baris sendiri secara alami,
   tanpa kolom kosong atau scroll box yang harus digulir terus. */
.layanan-list-wrap{
  margin-top:1.6rem; border:1px solid var(--rule); border-radius:16px;
  background:var(--surface); padding:1.7rem;
}
.layanan-chips{ display:flex; flex-wrap:wrap; gap:.65rem; }
/* Panel kategori yang tidak aktif disembunyikan lewat atribut [hidden] --
   tanpa baris ini, rule ".layanan-chips{display:flex}" di atas (aturan
   penulis) menang atas [hidden] bawaan browser (aturan user-agent), jadi
   panel yang seharusnya tersembunyi malah tetap tampil bertumpuk. */
.layanan-chips[hidden]{ display:none; }
.layanan-chip{
  display:inline-flex; align-items:center;
  padding:.55em 1.15em; border-radius:999px; border:1px solid var(--rule-strong);
  background:var(--ground); color:var(--ink); font-size:.87rem; line-height:1.3;
  transition:background .2s ease, border-color .2s ease;
}
.layanan-chip:hover{ background:var(--accent-soft); border-color:var(--accent); }

.layanan-note{
  margin-top:2.8rem; padding:1.2rem 1.5rem; border-radius:12px;
  background:var(--accent-soft); color:var(--ink); font-size:.92rem; max-width:none;
  border:1px dashed var(--rule-strong);
}

/* ---------------------------------- kontak ---------------------------------- */
.kontak{ background:var(--ground-2); }
.kontak-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start; }

.kontak-list{ list-style:none; margin:0 0 2rem; padding:0; display:flex; flex-direction:column; gap:1.1rem; }
.kontak-list li{ display:flex; flex-direction:column; gap:.25rem; font-size:1rem; }
.kontak-label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.kontak-list a:hover{ color:var(--accent); }

.sosial{ display:flex; gap:.9rem; margin-top:1.8rem; }
.sosial a{
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--rule-strong);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.sosial a:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.sosial svg{ width:19px; height:19px; }

.kontak-map{
  border-radius:18px; overflow:hidden; border:1px solid var(--rule-strong);
  box-shadow:var(--shadow); aspect-ratio:4/3.4; min-height:320px;
}
.kontak-map iframe{ width:100%; height:100%; border:0; filter:sepia(8%) saturate(85%); }

/* ---------------------------------- footer ---------------------------------- */
.site-footer{ background:var(--ink); color:var(--ground); padding:2.6rem 1.75rem; }
.footer-inner{
  max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  justify-content:space-between;
}
.footer-mark{
  display:flex; flex-direction:column; line-height:1.05;
  font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--ground);
}
.footer-mark em{
  font-family:var(--font-script); font-style:normal; font-weight:400;
  font-size:.85rem; color:var(--accent-2); margin-top:.1rem;
}
.footer-inner p{ margin:0; color:var(--ground-2); font-size:.85rem; max-width:none; }
.footer-inner a{ font-size:.85rem; color:var(--accent-2); }
.footer-inner a:hover{ color:var(--accent-soft); }

/* ---------------------------------- responsive ---------------------------------- */
@media (max-width: 860px){
  .kontak-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .kontak-map{ min-height:260px; }
}

@media (max-width: 720px){
  .main-nav{
    position:fixed; inset:0 0 auto auto; top:66px; right:0;
    background:var(--surface); flex-direction:column; gap:0;
    width:min(78vw, 320px); padding:.5rem 0; border-radius:0 0 0 16px;
    box-shadow:var(--shadow); transform:translateX(100%); transition:transform .3s ease;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav a{ padding:1rem 1.75rem; border-bottom:1px solid var(--rule); }
  .nav-wa{ display:block; color:var(--accent); font-weight:600; }
  .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .hero{ padding-top:6rem; }
  .section-inner{ padding:4.5rem 1.5rem; }
  .footer-inner{ flex-direction:column; text-align:center; }

  .review-card{ flex-basis:240px; }
  .layanan-list-wrap{ padding:1.3rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; opacity:1; transform:none; }
  .btn-cta:hover, .sosial a:hover{ transform:none; }
}

/* ---------------------------------- wp-admin bar ---------------------------------- */
/* Saat pegawai login dan admin bar WordPress tampil di atas, header sticky
   kita perlu turun sedikit supaya tidak tertindih. Pengunjung publik yang
   tidak login tidak pernah melihat admin bar, jadi ini tidak memengaruhi
   tampilan yang dilihat pelanggan. */
body.admin-bar .site-header{ top:32px; }
@media (max-width: 782px){
  body.admin-bar .site-header{ top:46px; }
}