:root{
  --ink:#121212;
  --paper:#f6f4ee;
  --white:#ffffff;
  --blue:#3F34DB;
  --blue-deep:#3F34DB;
  --navy:#254787;
  --line:rgba(255,255,255,.28);
  --font-display:'Badeen Display', system-ui, sans-serif;
  --font-body:'Anuphan', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ background:var(--paper); color:var(--ink); font-family:var(--font-body); overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
button{ font-family:var(--font-body); cursor:pointer; }
::selection{ background:var(--blue); color:#fff; }

/* Badeen Display reserved ONLY for: ORCHIDEES / GALERI / INTERAKTIF / TENTANG KAMI */
.display{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1;
}
.stroke-white{ color:#fff; -webkit-text-stroke:2px var(--navy); paint-order:stroke fill; }

.flower-icon{
  display:inline-block;
  width:1em; height:1em;
  background-color:currentColor;
  -webkit-mask-image:url('logo-orked.png');
  mask-image:url('logo-orked.png');
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}

/* ---------- NAV (shared across pages) ---------- */
.site-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.8rem 2.5rem;
  flex-wrap:wrap;
  gap:1rem;
  position:sticky;
  top:0;
  z-index:40;
}
.site-nav .logo{ font-size:clamp(1.6rem, 4vw, 2.2rem); -webkit-text-stroke-width:2px; }
.site-nav .logo.logo-big{ font-size:clamp(3.5rem, 9vw, 7rem); -webkit-text-stroke-width:4px; }
.nav-links{ display:flex; gap:clamp(1rem, 3vw, 2.2rem); flex-wrap:wrap; font-family:var(--font-body); margin-left:auto; }
.nav-links a{ font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; transition:opacity .2s ease; }
.nav-links a:hover{ opacity:.65; }

.site-nav.on-dark{ position:relative; z-index:2; color:#fff; }
.site-nav.on-dark .logo{ color:#fff; }
.site-nav.on-dark .nav-links a{ color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.4); }

.site-nav.on-light{ color:var(--ink); background:var(--paper); }
.site-nav.on-light .logo{ color:var(--ink); -webkit-text-stroke:0; }
.site-nav.on-light .nav-links a{ color:var(--ink); }

.site-nav.on-blue{ color:#fff; background:var(--blue); }
.site-nav.on-blue .logo{ color:#fff; -webkit-text-stroke:1px var(--navy); paint-order:stroke fill; }
.site-nav.on-blue .nav-links a{ color:#fff; }

/* ---------- MARQUEE (hero page only) ---------- */
.marquee-bar{ background:var(--blue); border-bottom:2px solid var(--navy); overflow:hidden; white-space:nowrap; height:34px; display:flex; align-items:center; }
.marquee-track{ display:inline-flex; animation:scroll 22s linear infinite; }
.marquee-track span{ padding:0 1.5rem; font-size:.72rem; font-weight:600; letter-spacing:.08em; color:#fff; font-family:var(--font-body); }
.marquee-track span::after{ content:"//"; margin-left:1.5rem; color:var(--blue); }
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- HERO ---------- */
.hero{ position:relative; min-height:100vh; }
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--ink); }
.hero-bg-slide{ position:absolute; inset:0; background-size:cover; background-position:center 30%; opacity:0; transition:opacity 1.2s ease; }
.hero-bg-slide.active{ opacity:1; }
.hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,18,18,.55) 0%, rgba(18,18,18,.05) 30%, rgba(18,18,18,.05) 60%, rgba(18,18,18,.55) 100%); z-index:1; }
.hero .site-nav{ position:relative; z-index:2; }

/* ---------- SECTION SHELL ---------- */
.page-title{ font-size:clamp(2.4rem, 7vw, 4.5rem); display:flex; align-items:center; gap:.5rem; }
.page-title .flower-icon{ font-size:.45em; }

/* ---------- GALERI (vertical scroll stack) ---------- */
body.page-galeri{ background:var(--blue); color:#fff; }
.galeri-header.site-nav{ position:fixed; top:0; left:0; right:0; z-index:40; background:transparent; }
.page-galeri .page-title{ color:#fff; -webkit-text-stroke:1px var(--navy); paint-order:stroke fill; text-shadow:0 1px 10px rgba(0,0,0,.35); }
.scroll-stack{ display:flex; flex-direction:column; margin-top:0; }
.scroll-stack img{ width:100%; display:block; }

/* ---------- INTERAKTIF ---------- */
body.page-interaktif{ background:var(--blue); color:#fff; }
.page-interaktif .page-title{ color:#fff; -webkit-text-stroke:1px var(--navy); }
.interaktif-sub{ font-size:.85rem; letter-spacing:.03em; color:rgba(255,255,255,.85); max-width:320px; margin-top:.6rem; font-family:var(--font-body); }
.interaktif-body{ padding:2.5rem; }

.face-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.4rem 1rem; width:100%; margin-top:2.5rem; }
.face-cell{ position:relative; aspect-ratio:4/5; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; background:transparent; transition:border-color .2s ease, transform .2s ease; overflow:hidden; }
.face-cell:hover{ border-color:#fff; transform:translateY(-4px); }
.face-cell img{ width:70%; height:70%; object-fit:contain; }
.face-cell.filled{ cursor:default; border-color:#fff; }
.face-cell.filled img{ width:100%; height:100%; object-fit:cover; }
.face-cell.filled:hover{ transform:none; }
.face-badge{ position:absolute; top:.4rem; right:.4rem; background:#fff; color:var(--blue); font-size:.6rem; font-weight:700; padding:.15rem .4rem; border-radius:2px; letter-spacing:.05em; font-family:var(--font-body); }

@media(max-width:640px){ .face-grid{ grid-template-columns:repeat(3,1fr); } }

/* ---------- DRAW PAGE (Desktop 5) ---------- */
body.page-draw{ background:var(--blue); color:#fff; min-height:100vh; display:flex; flex-direction:column; }
.draw-body{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem; gap:1.2rem; }
.draw-caption{ font-size:.85rem; letter-spacing:.04em; text-align:center; font-family:var(--font-body); }
.canvas-wrap{ position:relative; width:100%; max-width:420px; aspect-ratio:4/5; border:1px dashed var(--line); }
.canvas-wrap canvas{ width:100%; height:100%; touch-action:none; cursor:crosshair; display:block; }
.draw-actions{ display:flex; gap:.7rem; width:100%; max-width:420px; }
.draw-actions button{ flex:1; padding:.8rem; border:2px solid #fff; background:transparent; color:#fff; font-family:var(--font-body); text-transform:uppercase; font-size:.8rem; letter-spacing:.04em; transition:background .2s ease, color .2s ease; }
.draw-actions button.primary{ background:#fff; color:var(--blue); }
.draw-actions button:hover{ opacity:.85; }
.draw-back{ font-size:.75rem; opacity:.75; text-decoration:underline; }

/* ---------- TENTANG KAMI ---------- */
body.page-tentang{ background:var(--blue-deep); color:#fff; }
.page-tentang .page-title{ color:#fff; -webkit-text-stroke:1px var(--navy); }
.tentang-body{ position:relative; z-index:1; padding:2.5rem; display:grid; grid-template-columns:1fr; align-items:center; gap:3rem; }
.tentang-copy p{ font-size:1rem; line-height:1.7; color:rgba(255,255,255,.9); max-width:520px; font-family:var(--font-body); }
.tentang-copy p + p{ margin-top:1.1rem; }
.tentang-address{ margin-top:1.6rem; font-size:.82rem; color:rgba(255,255,255,.75); font-family:var(--font-body); line-height:1.6; }
.tentang-copyright{ margin-top:.3rem; font-size:.75rem; color:rgba(255,255,255,.55); font-family:var(--font-body); }

.flower-stage{ position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.flower-stage img{ position:absolute; top:0; left:0; width:170px; filter:drop-shadow(0 10px 30px rgba(0,0,0,.25)); will-change:transform; }

@media(max-width:860px){
  .flower-stage img{ width:110px; }
}

.wall{ position:relative; z-index:1; padding:0 2.5rem 4rem; margin-top:1rem; }
.wall-inner{ padding-top:2.5rem; border-top:1px solid rgba(255,255,255,.18); }
.wall-head p{ font-size:.8rem; color:rgba(255,255,255,.7); max-width:340px; font-family:var(--font-body); margin-top:.4rem; }
.wall-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(90px, 1fr)); gap:.8rem; margin-top:1.5rem; }
.wall-grid img{ width:100%; aspect-ratio:4/5; object-fit:cover; border:1px solid rgba(255,255,255,.3); }
.wall-empty{ font-size:.82rem; color:rgba(255,255,255,.65); border:1px dashed rgba(255,255,255,.3); padding:1.4rem; text-align:center; margin-top:1.5rem; font-family:var(--font-body); }