/* =========================================================
   STUDIO 80 INVITE - Shared Stylesheet
   ========================================================= */
:root {
  --navy: #10233f;
  --navy-light: #1c3a63;
  --gold: #c9a24b;
  --gold-light: #e4c877;
  --cream: #faf7f0;
  --text: #000000;
  --text-muted: #000000;
  --border: #e4e7ec;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(16, 35, 63, 0.08);
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: #fff;
  line-height: 1.6;
}
h1, h2, h3, h4 { font-family: var(--font-heading); margin: 0 0 12px; color: #000; }
p { margin: 0 0 12px; }
a { color: #000; }
img { max-width: 100%; display: block; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, #f70487 0%, #6b0250 55%, #14000d 100%); color: #fff; box-shadow: 0 8px 20px rgba(247,4,135,.35); }
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: #000; box-shadow: 0 8px 20px rgba(201,162,75,.3); }
.btn-outline { background: #fff; color: #000; border: 1.5px solid var(--border); }
.btn-block { width: 100%; text-align: center; }
.btn-sm { padding: 8px 16px; font-size: 13px; }

/* ===================== LANDING NAVBAR ===================== */
.navbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.navbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; max-width: 1220px; margin: 0 auto; }   /* UPDATE KE-273: lebar sama dengan isi Beranda (1180 + padding) supaya logo lurus dengan judul */
.logo { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: #000; text-decoration: none; display: inline-flex; align-items: center; }
.logo span { color: var(--gold); }
.logo img { height: 42px; width: auto; display: block; }
.nav-links { display: flex; gap: 28px; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; color: #f70487; font-weight: 700; font-family: 'DM Sans', sans-serif; font-size: 15px; }
.nav-links a:hover { opacity: .8; }
.nav-links a.active { color: #f70487; font-weight: 700; }
.nav-links a.btn, .nav-links a.btn:hover, .nav-links a.btn.active { color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; }
.nav-links a.btn-gold, .nav-links a.btn-gold:hover, .nav-links a.btn-gold.active { color: #000; font-family: 'Poppins', sans-serif; font-weight: 600; }
.nav-toggle { display: none; background: none; border: none; font-size: 26px; cursor: pointer; color: #000; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    flex-direction: column; align-items: flex-start; padding: 16px 20px;
    border-bottom: 1px solid var(--border); display: none; gap: 16px;
  }
  .nav-links.open { display: flex; }
}

/* ===================== HERO ===================== */
.hero { background: linear-gradient(180deg, #f4f7fb 0%, #ffffff 65%); color: var(--text); padding: 64px 20px 56px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 10%, rgba(201,162,75,.14), transparent 55%); pointer-events: none; }
.hero-inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center; }
.hero-text { text-align: left; }
.hero-kicker { display: inline-block; background: #f70487; border: 1px solid #f70487; color: #fff; padding: 6px 16px; border-radius: 999px; font-size: 13px; letter-spacing: .04em; margin-bottom: 20px; }
.hero h1 { color: #f70487; font-size: clamp(22px, 3vw, 34px); line-height: 1.2; margin-bottom: 18px; }
.hero h1 .hero-line2 { color: #1f1a24; font-size: .82em; display: inline-block; margin-top: 6px; }   /* KE-379 */
.hero-rotate { color: #000; display: inline-block; transition: opacity .25s ease; }
.hero p.lead { color: #f70487; font-size: 17px; max-width: 520px; margin: 0 0 26px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.btn-glow { box-shadow: 0 0 0 4px rgba(201,162,75,.22), 0 8px 20px rgba(201,162,75,.35); }
.btn-wa { display: inline-flex; align-items: center; gap: 9px; }
.wa-dot { width: 10px; height: 10px; border-radius: 50%; background: #25D366; display: inline-block; flex: 0 0 auto; }

/* Tombol "Dibuatin Admin Aja" di hero: gaya glassmorphism (kaca buram) */
.hero-ctas .btn-wa {
  min-height: 56px; padding: 0 26px; border-radius: 18px;
  color: #f70487; font-weight: 700;
  background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,228,242,.34));
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 10px 30px rgba(247,4,135,.14), 0 2px 6px rgba(16,35,63,.06), inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(247,4,135,.10);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s, background .28s;
}
.hero-ctas .btn-wa:hover {
  color: #f70487; transform: translateY(-3px);
  background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,220,238,.45));
  box-shadow: 0 16px 36px rgba(247,4,135,.22), 0 2px 6px rgba(16,35,63,.06), inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(247,4,135,.16);
}
@media (max-width: 480px) { .hero-ctas .btn-wa { min-height: 52px; padding: 0 20px; } }
.hero-note { font-size: 13px; color: #f70487; font-style: italic; margin: 14px 0 0; }
.hero-note strong { color: #f70487; font-style: normal; }

/* ---- Tombol motion "Buat Undangan Gratis" (glow pink, shimmer saat hover, ripple saat klik) ---- */
.btn-motion-wrap { position: relative; display: inline-flex; }
.btn-motion-wrap::before {
  content: ""; position: absolute; inset: -10px; z-index: -1; border-radius: 26px;
  background: #f70487; filter: blur(22px); opacity: .28; pointer-events: none;
  animation: btnMotionBreathe 3.8s ease-in-out infinite;
}
.btn-motion {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 11px;
  min-height: 56px; padding: 0 26px; overflow: hidden; border: 0; border-radius: 18px;
  color: #fff; text-decoration: none;
  background: linear-gradient(115deg, #ff49ae 0%, #f70487 48%, #bd005f 100%);
  box-shadow: 0 12px 28px rgba(247,4,135,.35), inset 0 1px 1px rgba(255,255,255,.35);
  font: 700 16px 'DM Sans', 'Poppins', sans-serif; letter-spacing: .01em; cursor: pointer;
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
}
.btn-motion::before {
  content: ""; position: absolute; z-index: -1; top: var(--y, 50%); left: var(--x, 50%);
  width: 25px; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.43);
  transform: translate(-50%,-50%) scale(0);
}
.btn-motion::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.31) 49%, transparent 63%);
  transform: translateX(-120%) skewX(-18deg); transition: transform .75s ease;
}
.btn-motion:hover { color: #fff; transform: translateY(-5px) scale(1.025); box-shadow: 0 22px 42px rgba(247,4,135,.52), inset 0 1px 1px rgba(255,255,255,.4); }
.btn-motion:hover::after { transform: translateX(130%) skewX(-18deg); }
.btn-motion:active { transform: translateY(0) scale(.95); }
.btn-motion.ripple::before { animation: btnMotionRipple .65s ease-out; }
.btn-motion-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.2); font-size: 17px; line-height: 1; transition: transform .3s; }
.btn-motion:hover .btn-motion-icon { transform: rotate(-8deg) scale(1.1); }
.btn-motion-arrow { margin-left: 2px; font-size: 20px; line-height: 1; transition: transform .28s; }
.btn-motion:hover .btn-motion-arrow { transform: translateX(5px); }
@keyframes btnMotionRipple { to { transform: translate(-50%,-50%) scale(16); opacity: 0; } }
@keyframes btnMotionBreathe { 50% { transform: scale(1.12); opacity: .42; } }
@media (max-width: 480px) {
  .btn-motion { min-height: 52px; padding: 0 20px; font-size: 15px; gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-motion-wrap::before { animation: none; }
  .btn-motion, .btn-motion::after, .btn-motion-icon, .btn-motion-arrow { transition: none; }
}

.hero-visual { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 500px; gap: 14px; }

.hero-carousel { position: relative; width: 100%; max-width: 420px; height: 450px; margin: 0 auto; touch-action: pan-y; cursor: grab; user-select: none; }
.hero-carousel.is-dragging { cursor: grabbing; }
.hero-carousel-track { position: relative; width: 100%; height: 100%; }

/* ---- Kartu = HP model iPhone (bingkai titanium, Dynamic Island, tombol samping) ---- */
.hero-slide {
  position: absolute; top: 50%; left: 50%; width: 226px; height: 420px;
  padding: 3px; border-radius: 44px;
  background: linear-gradient(145deg, #e9e6e0 0%, #9c9891 22%, #f4f2ee 48%, #86827b 74%, #d6d3cd 100%);
  box-shadow: 0 30px 55px -12px rgba(16,35,63,.38), 0 0 0 1px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.55);
  z-index: 0; pointer-events: none;
  transition: transform .6s cubic-bezier(.22,.9,.32,1), filter .6s ease, box-shadow .6s ease;
  will-change: transform;
}
.iphone-bezel { position: relative; width: 100%; height: 100%; border-radius: 41px; background: #0a0a0b; padding: 7px; }
.iphone-screen {
  position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden;
  background-color: #1a1a1a; background-size: cover; background-position: center top; background-repeat: no-repeat;
}
.iphone-screen::after { /* kilau kaca */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 38%);
}
.iphone-status {
  position: absolute; top: 0; left: 0; right: 0; height: 34px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 22px;
  font-family: -apple-system, 'SF Pro Text', 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: -.01em;
}
.iphone-bar-light .iphone-status { color: #fff; }
.iphone-bar-dark .iphone-status  { color: #111; }
.iphone-island { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 64px; height: 19px; border-radius: 12px; background: #000; }
.iphone-icons { display: inline-flex; align-items: center; gap: 4px; }
.iphone-battery { position: relative; width: 20px; height: 10px; border: 1px solid currentColor; border-radius: 3px; opacity: .9; }
.iphone-battery::after { content: ""; position: absolute; right: -3px; top: 3px; width: 1.5px; height: 3px; border-radius: 0 1px 1px 0; background: currentColor; }
.iphone-battery span { position: absolute; inset: 1px; right: 4px; border-radius: 1.5px; background: currentColor; }
.iphone-home { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 72px; height: 4px; border-radius: 3px; z-index: 2; }
.iphone-bar-light .iphone-home { background: rgba(255,255,255,.85); }
.iphone-bar-dark .iphone-home  { background: rgba(0,0,0,.75); }
.iphone-btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #7d7973, #c9c5bf, #8b8781); }
.iphone-btn-action  { left: -2px;  top: 88px;  height: 22px; }
.iphone-btn-volup   { left: -2px;  top: 124px; height: 38px; }
.iphone-btn-voldown { left: -2px;  top: 170px; height: 38px; }
.iphone-btn-power   { right: -2px; top: 132px; height: 58px; }
.iphone-btn-camera  { right: -1px; top: 250px; height: 40px; width: 2px; opacity: .8; }

/* Posisi kartu. Semua kartu tetap kelihatan (tidak hilang) saat bergeser. */
.hero-slide[data-pos="0"]   { z-index: 5; pointer-events: auto; transform: translate(-50%,-50%) scale(1) rotate(0deg); }
.hero-slide[data-pos="-1"]  { z-index: 4; pointer-events: auto; transform: translate(calc(-50% - 132px),-50%) scale(.72) rotate(-8deg); filter: brightness(.94); }
.hero-slide[data-pos="1"]   { z-index: 4; pointer-events: auto; transform: translate(calc(-50% + 132px),-50%) scale(.72) rotate(8deg);  filter: brightness(.94); }
.hero-slide[data-pos="-2"]  { z-index: 3; pointer-events: auto; transform: translate(calc(-50% - 205px),-50%) scale(.54) rotate(-14deg); filter: brightness(.88); }
.hero-slide[data-pos="2"]   { z-index: 3; pointer-events: auto; transform: translate(calc(-50% + 205px),-50%) scale(.54) rotate(14deg);  filter: brightness(.88); }
.hero-slide[data-pos="far"] { z-index: 1; transform: translate(-50%,-50%) scale(.45); filter: brightness(.85); }

.hero-carousel-arrow {
  width: 38px; height: 38px; border-radius: 50%; border: none; flex: 0 0 auto;
  background: #fff; color: #000; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 6px 16px rgba(16,35,63,.15);
  transition: background .2s ease, color .2s ease;
}
.hero-carousel-arrow:hover { background: #f70487; color: #fff; }

.hero-carousel-meta { display: flex; align-items: center; gap: 14px; }
.hero-carousel-dots { display: flex; gap: 7px; }
.hero-carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); border: none; padding: 0; cursor: pointer; transition: background .2s ease, width .2s ease; }
.hero-carousel-dot.is-active { background: #f70487; width: 20px; border-radius: 4px; }
.hero-carousel-count { font-size: 12.5px; color: var(--text-muted); font-weight: 600; letter-spacing: .03em; }

.hero-stats { display: flex; gap: 40px; justify-content: center; margin-top: 56px; flex-wrap: wrap; position: relative; z-index: 1; }
.hero-stat strong { display: block; font-size: 28px; color: var(--gold); }
.hero-stat span { font-size: 13px; color: var(--text-muted); }

/* UPDATE KE-274: di laptop, label "Undangan Digital by Studio 80" naik ke pojok kiri atas (tepat di bawah logo), judul & teks tetap lurus dengan logo */
@media (min-width: 861px) {
  .hero-text { position: static; }
  .hero-kicker { position: absolute; top: -50px; left: 0; margin: 0; z-index: 2; }
}
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-text { text-align: center; }
  .hero-ctas, .hero p.lead { justify-content: center; margin-left: auto; margin-right: auto; }
  .hero-visual { min-height: 340px; margin-top: 12px; }
  .hero-carousel { height: 350px; max-width: 300px; }
  .hero-slide { width: 176px; height: 328px; border-radius: 36px; }
  .iphone-bezel { border-radius: 33px; padding: 6px; }
  .iphone-screen { border-radius: 27px; }
  .iphone-status { height: 28px; padding: 0 12px 0 17px; font-size: 9.5px; }
  .iphone-island { top: 7px; width: 50px; height: 15px; }
  .iphone-battery { width: 17px; height: 9px; }
  .iphone-icons svg { width: 11px; height: 8px; }
  .iphone-home { width: 56px; bottom: 5px; }
  .iphone-btn-action  { top: 68px;  height: 17px; }
  .iphone-btn-volup   { top: 96px;  height: 30px; }
  .iphone-btn-voldown { top: 132px; height: 30px; }
  .iphone-btn-power   { top: 102px; height: 45px; }
  .iphone-btn-camera  { top: 195px; height: 31px; }
  .hero-slide[data-pos="-1"] { transform: translate(calc(-50% - 92px),-50%) scale(.7) rotate(-8deg); }
  .hero-slide[data-pos="1"]  { transform: translate(calc(-50% + 92px),-50%) scale(.7) rotate(8deg); }
  .hero-slide[data-pos="-2"] { transform: translate(calc(-50% - 138px),-50%) scale(.52) rotate(-14deg); }
  .hero-slide[data-pos="2"]  { transform: translate(calc(-50% + 138px),-50%) scale(.52) rotate(14deg); }
  .hero-carousel-arrow { width: 34px; height: 34px; font-size: 17px; }
}

/* ===================== SECTIONS ===================== */
.section-wrap { padding: 80px 20px; }
.section-wrap.alt { background: var(--cream); }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.eyebrow { color: var(--gold); font-weight: 700; letter-spacing: .06em; font-size: 13px; text-transform: uppercase; }
.section-head h2 { font-size: clamp(24px, 3.5vw, 34px); margin-top: 8px; }
.section-head p { color: var(--text-muted); }

/* Features */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; }
.feature-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.feature-icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #f70487, #6b0250); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; color: #fff; }
.feature-card h3 { font-size: 18px; }
.feature-card p { color: var(--text-muted); font-size: 14px; margin: 0; }

/* Steps */
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; max-width: 1000px; margin: 0 auto; counter-reset: step; }
.step-card { text-align: center; padding: 20px; }
.step-num { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #f70487, #6b0250); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; margin: 0 auto 16px; }
.step-card h4 { font-size: 16px; }
.step-card p { color: var(--text-muted); font-size: 14px; }

/* Themes preview */
.themes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; }
.theme-preview-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); background: #fff; }
.theme-preview-thumb { height: 200px; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-heading); font-size: 20px; text-align: center; padding: 20px; }
.theme-preview-thumb.elegant { background: linear-gradient(160deg, #10233f, #2a4e7f); }
.theme-preview-thumb.minimalist { background: linear-gradient(160deg, #f4f4f4, #d9d9d9); color: #1f2530; }
.theme-preview-thumb.floral { background: linear-gradient(160deg, #f7c9d8, #f2a6c1); color: #5a2439; }
.theme-preview-body { padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; }
.theme-preview-body h4 { margin: 0; font-size: 16px; }
.theme-preview-body span { color: var(--text-muted); font-size: 13px; }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; align-items: stretch; }
.price-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; position: relative; }
.price-card.featured { border: 2px solid var(--gold); transform: translateY(-8px); }
.price-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #000; font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 999px; }
.price-card h3 { font-size: 18px; margin-bottom: 4px; }
.price-amount { font-size: 32px; font-weight: 700; color: #000; margin-bottom: 4px; }
.price-amount small { font-size: 13px; font-weight: 400; color: var(--text-muted); }
.price-list { list-style: none; padding: 0; margin: 20px 0; flex-grow: 1; }
.price-list li { padding: 7px 0; font-size: 14px; color: var(--text); border-top: 1px dashed var(--border); }
.price-list li:first-child { border-top: none; }

/* Testimonials */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; max-width: 1100px; margin: 0 auto; }
.testi-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.testi-stars { color: var(--gold); margin-bottom: 10px; }
.testi-card p { font-size: 14px; color: var(--text); }
.testi-name { font-weight: 700; font-size: 14px; margin-top: 14px; }
.testi-role { font-size: 12px; color: var(--text-muted); }

/* FAQ */
.faq-wrap { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); padding: 18px 0; cursor: pointer; }
.faq-question { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.faq-question::after { content: "+"; font-size: 22px; color: var(--gold); transition: transform .2s; }
.faq-item.open .faq-question::after { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; color: var(--text-muted); font-size: 14px; transition: max-height .25s ease; }
.faq-item.open .faq-answer { max-height: 300px; padding-top: 12px; }

/* CTA band */
.cta-band { background: linear-gradient(135deg, #f70487 0%, #c10370 50%, #6b0250 100%); box-shadow: 0 18px 40px rgba(247,4,135,.22); color: #fff; text-align: center; padding: 70px 20px; border-radius: 24px; max-width: 1100px; margin: 0 auto; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.88); max-width: 480px; margin: 0 auto 26px; }
.cta-band .btn-gold { background: #fff; color: #c10370; box-shadow: 0 10px 24px rgba(60,0,35,.28); }   /* UPDATE KE-269 */
.cta-band .btn-gold:hover { background: #fff0f7; color: #a0025d; }

/* Footer */
.site-footer { background: linear-gradient(160deg, #6b0250 0%, #3d012d 100%); color: rgba(255,255,255,.75); padding: 56px 20px 26px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; max-width: 1140px; margin: 0 auto 32px; }
.footer-grid h5 { color: #fff; font-size: 14px; margin-bottom: 14px; }
.footer-grid a { color: rgba(255,255,255,.7); text-decoration: none; display: block; margin-bottom: 8px; font-size: 14px; }
.footer-grid a:hover { color: #ffb3da; }
.footer-bottom { text-align: center; font-size: 13px; border-top: 1px solid rgba(255,255,255,.16); padding-top: 20px; max-width: 1140px; margin: 0 auto; }

/* WhatsApp floating button */
.wa-float { position: fixed; bottom: 22px; right: 22px; background: #25d366; color: #fff; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; text-decoration: none; box-shadow: 0 8px 22px rgba(0,0,0,.25); z-index: 60; }

/* ===================== AUTH PAGES ===================== */
.auth-body { background: var(--cream); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px; }
.auth-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 40px; max-width: 400px; width: 100%; }
.auth-card .app-logo { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: #000; text-decoration: none; display: inline-flex; align-items: center; }
.auth-card .app-logo span { color: var(--gold); }
.auth-card .app-logo img { height: 44px; width: auto; display: block; }
.auth-card h1 { margin-top: 20px; font-size: 24px; }
.auth-sub { color: var(--text-muted); font-size: 14px; }
.auth-form label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
.auth-form input { width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 14px; }
.auth-form .btn { margin-top: 22px; }
.auth-switch { text-align: center; margin-top: 18px; font-size: 14px; }
.alert-error { background: #fdecea; color: #b3261e; padding: 12px 16px; border-radius: 10px; font-size: 14px; margin: 16px 0; }
.alert-success { background: #eaf7ee; color: #1e7b3b; padding: 12px 16px; border-radius: 10px; font-size: 14px; margin: 16px 0; }

/* ===================== APP (DASHBOARD/BUILDER) ===================== */
.app-body { background: #f7f8fa; }
.app-topbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; }
.app-logo { font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: #000; text-decoration: none; display: inline-flex; align-items: center; }
.app-logo span { color: var(--gold); }
.app-logo img { height: 36px; width: auto; display: block; }
.app-nav { display: flex; gap: 22px; align-items: center; }
.app-nav a { text-decoration: none; color: var(--text); font-size: 14px; font-weight: 500; }
.app-logout { color: #b3261e !important; }
.app-main { max-width: 900px; margin: 0 auto; padding: 32px 20px 60px; }
.page-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.page-head p { color: var(--text-muted); margin: 0; }
.app-footer { text-align: center; color: var(--text-muted); font-size: 13px; padding: 30px 0; }

/* Panel Admin -- layout sidebar kiri (beda dari .app-topbar milik area pengguna biasa) */
.admin-layout { display: flex; align-items: stretch; min-height: 100vh; }
.admin-sidebar {
  width: 240px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--border);
  padding: 20px 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-sidebar .app-logo { margin-bottom: 24px; padding: 0 8px; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.admin-nav a {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text);
  font-size: 14px; font-weight: 500; padding: 11px 12px; border-radius: 10px; transition: background .15s;
}
.admin-nav a:hover { background: var(--cream); }
.admin-nav a.active { background: var(--navy); color: #fff; }
.admin-nav-icon { font-size: 16px; line-height: 1; }
.admin-nav-sep { height: 1px; background: var(--border); margin: 10px 4px; }
/* Sub-menu (anak dari menu di atasnya), mis. "Studio" di bawah "Kelola Tema" */
.admin-nav a.admin-nav-sub { position: relative; margin-left: 26px; padding-top: 9px; padding-bottom: 9px; font-size: 14px; }
.admin-nav a.admin-nav-sub::before { content: ""; position: absolute; left: -12px; top: -4px; bottom: 50%; width: 10px; border-left: 2px solid var(--border); border-bottom: 2px solid var(--border); border-bottom-left-radius: 8px; }
.admin-nav a.admin-nav-sub .admin-nav-icon { color: #f70487; }
.admin-nav a.admin-nav-sub.active { background: #fde6f2; color: #f70487; }
.admin-nav a.app-logout { margin-top: auto; }
.admin-content { flex: 1; min-width: 0; padding: 32px; max-width: 1000px; }
.admin-content.admin-content-wide { max-width: 1320px; }
.admin-footnote { text-align: center; color: var(--text-muted); font-size: 13px; margin-top: 40px; }

@media (max-width: 860px) {
  .admin-layout { flex-direction: column; }
  .admin-sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; padding: 12px 16px; overflow-x: auto; }
  .admin-sidebar .app-logo { margin-bottom: 0; margin-right: 8px; flex-shrink: 0; }
  .admin-nav { flex-direction: row; flex: none; gap: 4px; }
  .admin-nav a { white-space: nowrap; padding: 8px 10px; font-size: 13px; }
  .admin-nav-sep { display: none; }
  .admin-nav a.admin-nav-sub { margin-left: 0; }
  .admin-nav a.admin-nav-sub::before { display: none; }
  .admin-nav a.app-logout { margin-top: 0; margin-left: auto; }
  .admin-content { padding: 20px 16px; }
}

.empty-state { background: #fff; border: 1px dashed var(--border); border-radius: var(--radius); padding: 50px 20px; text-align: center; }
.invite-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.invite-grid.products-grid { grid-template-columns: 1fr; }
.invite-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.invite-card-body { padding: 20px; }
.badge { display: inline-block; background: var(--cream); color: #000; font-size: 12px; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
.invite-date { color: var(--text-muted); font-size: 13px; }
.rsvp-summary { font-size: 13px; color: var(--text-muted); }
.invite-card-actions { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); flex-wrap: wrap; }

/* ===== Preview HP/Laptop di form Tambah/Edit Produk ===== */
/* Kolom kiri (form isian) dibikin bisa menyempit ("min-width:0") supaya
   tidak mendorong/ketiban panel preview di kanan waktu layarnya pas-pasan. */
.product-form-grid { display: flex; align-items: flex-start; gap: 28px; }
.product-form-main { flex: 1 1 0; min-width: 0; }
/* .product-preview-panel di sini CUMA "penjaga tempat" (spacer) di dalam
   flex row-nya, supaya kolom form kiri tahu harus menyempit sejauh mana --
   box yang beneran kelihatan (.preview-panel-box) sengaja dibikin
   position:fixed relatif ke LAYAR (bukan sticky relatif ke kolom ini),
   soalnya sticky ternyata tetap ikut ke-scroll/kepotong begitu mendekati
   ujung bawah kolom form yang panjang. Posisi kiri & lebar box fixed itu
   disamakan persis sama spacer ini lewat JS (lihat syncPreviewPanelFixed()
   di bawah), jadi tetap kelihatan pas di tempat yang sama, tapi sekarang
   BENERAN diam di tengah layar terus, tidak peduli di-scroll sejauh apa. */
.product-preview-panel { width: 440px; flex-shrink: 0; }
.preview-panel-box {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 30;
  width: 440px; max-height: calc(100vh - 32px); overflow-y: auto;
}
@media (max-width: 1300px) {
  .product-form-grid { flex-direction: column; }
  .product-preview-panel { width: 100%; }
  .preview-panel-box {
    position: static !important; transform: none !important; left: auto !important;
    width: 100% !important; max-height: none; overflow-y: visible;
  }
  .device-frame-wrap { display: flex; justify-content: center; }
}
/* Header, tombol HP/Laptop, dan dropdown Preview Halaman dibikin lebih
   ringkas (padding & teksnya dikecilkan) -- supaya total tinggi panel ini
   (header + bingkai HP) tetap muat penuh di layar laptop biasa tanpa
   bingkai HP-nya kepotong di bawah. */
.preview-panel-box { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.preview-panel-box h3 { font-size: 15px; margin: 0 0 10px; }
.preview-device-toggle { display: flex; gap: 8px; margin-bottom: 10px; }
.preview-device-toggle button {
  flex: 1; padding: 8px 8px; border-radius: 9px; border: 1.5px solid var(--border);
  background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; color: var(--text);
}
.preview-device-toggle button.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.preview-page-label { display: block; font-size: 12px; font-weight: 600; margin: 0 0 4px; }
.preview-page-select {
  width: 100%; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 9px;
  font-size: 13px; font-family: inherit; background: #fff; margin-bottom: 12px;
}
.device-frame-wrap { position: relative; display: flex; justify-content: center; margin-bottom: 8px; }
/* Panah naik/turun buat pindah halaman preview tanpa buka dropdown -- bentuk &
   warnanya disamakan sama .category-tabs-arrow yang sudah ada di halaman
   depan (lingkaran putih border tipis), cuma diposisikan menempel di
   atas/bawah bingkai HP-nya. Scroll/swipe langsung di bingkainya juga bisa
   (lihat JS), tombol ini cuma alternatif buat yang lebih nyaman klik. */
.device-page-nav {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--border);
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--navy);
  padding: 0;
}
.device-page-nav:hover { border-color: var(--gold); }
.device-page-nav:disabled { opacity: .3; cursor: not-allowed; }
.device-page-nav-up { top: -6px; }
.device-page-nav-down { bottom: -6px; }
/* Bingkainya sengaja disamakan gayanya sama bingkai HP di kartu "Pilihan Tema"
   (lihat .theme-card-phone di bawah) -- border tebal warna navy + notch,
   bukan bezel hitam generik ala mockup HP pada umumnya -- biar senada sama
   tampilan yang sudah ada di halaman depan/kategori situs. Ukurannya
   dikecilkan lagi dari versi sebelumnya (280x560) supaya bingkainya selalu
   muat penuh kelihatan di layar laptop (tidak kepotong di bawah) -- rasio
   HP tetap sama (1:2), cuma diskalakan lebih kecil.
*/
.device-frame {
  position: relative; box-sizing: border-box; overflow: hidden; background: #fff;
  border: 6px solid var(--navy);
  box-shadow: 0 10px 24px rgba(16,35,63,.18);
  transition: width .2s, height .2s, border-radius .2s;
}
.device-frame.is-phone { width: 210px; height: 420px; border-radius: 30px; }
.device-frame.is-laptop { width: 100%; max-width: 320px; height: 206px; border-width: 6px; border-radius: 14px 14px 5px 5px; }
.device-frame.is-laptop::after {
  content: ''; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  width: 70%; height: 9px; border-radius: 0 0 6px 6px; background: var(--navy);
}
.device-notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 52px; height: 13px; border-radius: 0 0 10px 10px; background: var(--navy); z-index: 3;
}
.device-browserbar { position: absolute; top: 6px; left: 10px; display: flex; gap: 5px; z-index: 3; }
.device-browserbar span { width: 7px; height: 7px; border-radius: 50%; background: var(--navy); opacity: .55; display: block; }
.device-screen {
  position: relative; width: 100%; height: 100%; background-color: #f3f1ec;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* 2 layer background ditumpuk buat efek crossfade waktu ganti halaman (lihat
   updatePreviewFrame() di JS) -- bikin transisinya kerasa smooth, bukan
   langsung "meloncat" ganti gambar kayak sebelumnya. */
.device-screen-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity .32s ease; z-index: 1;
}
.device-screen-bg.is-active { opacity: 1; z-index: 2; }
.device-screen-placeholder { position: relative; z-index: 3; color: #9c9488; font-size: 11px; text-align: center; padding: 0 16px; line-height: 1.4; }
.preview-panel-box > .hint { font-size: 11px; margin-top: 4px; line-height: 1.4; }

/* Kotak "Photo" tambahan (Update 36) -- ditumpuk DI ATAS background tapi DI
   BAWAH layer teks (z-index 3, teksnya 4), jadi bisa digeser & di-resize
   bebas (tarik pojok kanan-bawahnya) tanpa nutupin Teks 1-5/Teks Terakhir. */
#preview-photo-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.preview-photo-item {
  position: absolute; overflow: hidden; border-radius: 10px; cursor: grab;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); pointer-events: auto; touch-action: none;
}
.preview-photo-item:active { cursor: grabbing; }
.preview-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.photo-resize-handle {
  position: absolute; right: -7px; bottom: -7px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; border: 2px solid var(--navy); cursor: nwse-resize;
  pointer-events: auto; z-index: 2;
}

/* Layer teks (Teks 1-5 + Teks Terakhir) di atas foto background preview --
   pointer-events:none di layer-nya sendiri supaya scroll/swipe ganti halaman
   (lihat previewScrollTarget di JS) tidak ketutup, tapi tiap item teksnya
   pointer-events:auto lagi supaya masih bisa digeser (drag) langsung. */
#preview-text-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.preview-text-item {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  cursor: grab; user-select: none; -webkit-user-select: none; pointer-events: auto;
  max-width: 90%; overflow: hidden; text-overflow: ellipsis; touch-action: none;
}
.preview-text-item:active { cursor: grabbing; }
.preview-text-item.is-final {
  white-space: normal; border-radius: 8px; font-weight: 600; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center;
}

/* Garis bantu "tengah layar" -- cuma muncul sesaat waktu 1 item teks lagi
   digeser dan posisinya sudah dekat sekali dengan tengah (lihat
   CENTER_SNAP_THRESHOLD di JS), biar gampang naruh teks persis di tengah. */
.preview-center-guide { position: absolute; z-index: 6; pointer-events: none; background: #ff4d5e; opacity: 0; transition: opacity .08s ease; }
.preview-center-guide.is-active { opacity: .85; }
.preview-center-guide-v { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px; }
.preview-center-guide-h { left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; }

/* 6 jenis animasi kemunculan teks (Fade In, Fade Up, dst) -- tiap keyframe
   ikut nulis ulang transform translate(-50%,-50%) dasarnya (biar teksnya
   tetap center-anchor sama posisi drag-nya), supaya tidak "geser" pas
   animasi selesai. Direplay dari JS (playTextAnimation()) dengan cara buang
   lalu pasang lagi class anim-nya (dipaksa reflow dulu lewat el.offsetWidth). */
@keyframes anim-fade-in-kf { from { opacity: 0; } to { opacity: 1; } }
.anim-fade-in { animation: anim-fade-in-kf .6s ease both; }

@keyframes anim-fade-up-kf {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(24px); }
  to { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}
.anim-fade-up { animation: anim-fade-up-kf .6s ease both; }

@keyframes anim-fade-down-kf {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(-24px); }
  to { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}
.anim-fade-down { animation: anim-fade-down-kf .6s ease both; }

@keyframes anim-blur-sharp-kf {
  from { opacity: 0; filter: blur(8px); }
  to { opacity: 1; filter: blur(0); }
}
.anim-blur-sharp { animation: anim-blur-sharp-kf .7s ease both; }

@keyframes anim-blur-fade-up-kf {
  from { opacity: 0; filter: blur(8px); transform: translate(-50%, -50%) translateY(20px); }
  to { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) translateY(0); }
}
.anim-blur-fade-up { animation: anim-blur-fade-up-kf .7s ease both; }

@keyframes anim-slide-up-reveal-kf {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(40px); clip-path: inset(100% 0 0 0); }
  to { opacity: 1; transform: translate(-50%, -50%) translateY(0); clip-path: inset(0 0 0 0); }
}
.anim-slide-up-reveal { animation: anim-slide-up-reveal-kf .7s ease both; }

.builder-section { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; margin-bottom: 20px; }
.builder-section h2 { font-size: 16px; }
.builder-form label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 6px; }
.builder-form input[type=text], .builder-form input[type=date], .builder-form textarea, .builder-form input[type=file], .builder-form select,
.builder-section input[type=text], .builder-section input[type=date], .builder-section textarea, .builder-section input[type=file], .builder-section select {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 14px; font-family: inherit; background: #fff;
}
.btn-danger { color: #b3261e; border-color: #f3c9c5; }
.btn-danger:hover { background: #fdecea; }

/* Editor "Teks di Halaman Ini" (Teks 1-5 + Teks Terakhir) di dalam tiap blok
   Halaman (section 4) -- tiap slot dibungkus <details> biar rapi/collapsible
   karena ada 6 slot per halaman dan bisa banyak halaman sekaligus. */
.page-text-editor { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border); }
.text-slot-row { border: 1.5px solid var(--border); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.text-slot-row summary {
  padding: 10px 14px; cursor: pointer; font-size: 13px; font-weight: 600; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #faf9f6;
}
.text-slot-row summary::-webkit-details-marker { display: none; }
.text-slot-row summary::before { content: '▸'; margin-right: 8px; color: #9c9488; }
.text-slot-row[open] summary::before { content: '▾'; }
.text-slot-summary-val { font-weight: 400; color: #9c9488; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; margin-left: auto; }
.text-slot-body { padding: 4px 14px 14px; }
.text-slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px 12px; margin-top: 4px; }
.text-slot-grid label { margin: 0 0 4px; }
.text-slot-body input[type=color] { padding: 4px; height: 40px; cursor: pointer; }
.text-anim-replay { margin-left: 8px; }
/* Bar aksi bawah form Tambah/Edit Tema (gaya "Kembali / Arsipkan / Update"
   di halaman Edit Produk Shopee) -- fixed nempel di bawah LAYAR (bukan di
   bawah form), jadi selalu kelihatan & tidak ikut ke-scroll waktu isi form
   di atasnya di-scroll naik/turun. Kiri bar-nya disesuaikan lebar sidebar
   admin (240px, lihat .admin-sidebar) supaya tidak numpuk sama menu kiri;
   di layar sempit sidebar-nya sudah pindah jadi bar atas jadi kiri bar ini
   diset 0 (lihat media query di bawah). */
.product-form-main .builder-form { padding-bottom: 92px; }
.form-bottom-bar {
  position: fixed; left: 240px; right: 0; bottom: 0; z-index: 40;
  background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -6px 18px rgba(0,0,0,.07);
  padding: 14px 32px; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
@media (max-width: 860px) {
  .form-bottom-bar { left: 0; padding: 12px 16px; }
}
.music-list { display: flex; flex-direction: column; gap: 12px; }
.music-row { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.music-row-info { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 220px; }
.music-row-info audio { width: 100%; max-width: 320px; height: 32px; }
.music-current-preview { margin-bottom: 12px; }
.music-current-preview audio { width: 100%; max-width: 360px; height: 32px; display: block; margin-bottom: 6px; }
.status-toggle { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.status-toggle-option { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 16px; cursor: pointer; font-size: 14px; }
.status-toggle-option:has(input:checked) { border-color: var(--navy); background: var(--cream); font-weight: 600; }
.status-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.status-pill { text-decoration: none; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border); color: var(--text); }
.status-pill.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.product-status-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; margin-left: 6px; }
.product-status-badge.active { background: #eaf7ee; color: #1e7b3b; }
.product-status-badge.inactive { background: #f1f1f1; color: #777; }
.bulk-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 20px; margin-bottom: 18px; }
.bulk-select-all { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.bulk-count { font-size: 13px; color: var(--text-muted); }
.bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.bulk-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.invite-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.product-select-checkbox { width: 18px; height: 18px; cursor: pointer; }
.confirm-modal-overlay { position: fixed; inset: 0; background: rgba(20, 20, 30, 0.45); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.confirm-modal { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; max-width: 380px; width: 100%; text-align: center; }
.confirm-modal h3 { margin: 0 0 10px; }
.confirm-modal p { margin: 0 0 20px; color: var(--text-muted); font-size: 14px; }
.confirm-modal-actions { display: flex; gap: 10px; justify-content: center; }
.confirm-modal-actions .btn { flex: 1; }
.products-filter-form { margin-top: 18px; }
.products-filter-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
.products-filter-row > div { min-width: 220px; }
.products-filter-row > div:last-child { flex: 1; max-width: 360px; }
.search-input-group { display: flex; gap: 8px; }
.search-input-group input[type="text"] { flex: 1; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.theme-picker { display: flex; gap: 16px; flex-wrap: wrap; }
.theme-option { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.theme-swatch { width: 64px; height: 64px; border-radius: 12px; display: block; border: 2px solid transparent; }
.theme-option input:checked + .theme-swatch { border-color: var(--gold); }
.theme-swatch-elegant { background: linear-gradient(160deg, #10233f, #2a4e7f); }
.theme-swatch-minimalist { background: linear-gradient(160deg, #f4f4f4, #d9d9d9); }
.theme-swatch-floral { background: linear-gradient(160deg, #f7c9d8, #f2a6c1); }
.theme-swatch-classic { background: linear-gradient(160deg, #6b4423, #c9a24b); }
.theme-swatch-midnight { background: linear-gradient(160deg, #0d0d0d, #d4af37); }
.theme-swatch-nature { background: linear-gradient(160deg, #2f4a3c, #8faf7a); }
.theme-swatch-romantic { background: linear-gradient(160deg, #f7c9d8, #e8a0b3); }
.theme-swatch-silver { background: linear-gradient(160deg, #3a3f47, #9aa3ad); }
.gallery-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.gallery-preview img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; }

@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
  .app-nav { gap: 12px; }
  .app-nav a { font-size: 13px; }
}

/* ===================== INVITATION (PUBLIC PAGE) — base layout ===================== */
.invite-body { margin: 0; background: var(--cream); }
.cover { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; background: linear-gradient(160deg, var(--navy), var(--navy-light)); color: #fff; position: relative; overflow: hidden; }
.cover::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cover.has-photo { background-size: cover; background-position: center; }
.cover.has-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35) 40%, rgba(0,0,0,.6)); }
.cover.has-photo .cover-inner { position: relative; z-index: 1; }
.cover-kicker { letter-spacing: .1em; text-transform: uppercase; font-size: 13px; color: var(--gold-light); margin-bottom: 10px; }
.cover-names { font-size: clamp(32px, 8vw, 56px); color: #fff; margin-bottom: 20px; }
.cover-guest { color: rgba(255,255,255,.85); margin-bottom: 30px; }
.btn-open { background: var(--gold); color: #000; }

.invite-content {
  max-width: 640px; margin: 0 auto; background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section { padding: 60px 28px; text-align: center; border-bottom: 1px solid var(--border); }
.intro-text { max-width: 440px; margin: 0 auto 24px; color: var(--text-muted); }
.couple-block { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.couple-person h2 { font-size: 22px; }
.couple-person p { font-size: 13px; color: var(--text-muted); max-width: 200px; }
.couple-ampersand { font-family: var(--font-heading); font-size: 26px; color: var(--gold); }

.countdown { display: flex; gap: 14px; justify-content: center; margin-top: 20px; }
.countdown div { background: var(--cream); border-radius: 12px; padding: 14px 16px; min-width: 66px; }
.countdown span { display: block; font-size: 24px; font-weight: 700; color: #000; }
.countdown small { font-size: 11px; color: var(--text-muted); }

.event-grid { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.event-card { background: var(--cream); border-radius: var(--radius); padding: 24px; min-width: 220px; }
.event-card h4 { color: var(--gold); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.map-embed { margin-top: 24px; border-radius: var(--radius); overflow: hidden; }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.gallery-grid img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; }

.rsvp-form { text-align: left; max-width: 380px; margin: 24px auto 0; }
.rsvp-form label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 6px; }
.rsvp-form input, .rsvp-form select, .rsvp-form textarea { width: 100%; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 14px; font-family: inherit; }
.rsvp-list { max-width: 420px; margin: 30px auto 0; text-align: left; }
.rsvp-item { border-top: 1px solid var(--border); padding: 12px 0; font-size: 14px; }
.rsvp-status { font-size: 12px; color: var(--text-muted); }

.invite-footer { padding: 30px; text-align: center; font-size: 13px; color: var(--text-muted); }
.music-toggle { position: fixed; bottom: 20px; right: 20px; width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--navy); color: #fff; font-size: 20px; cursor: pointer; box-shadow: var(--shadow); z-index: 30; }

/* ===================== INVITATION: GROOM/BRIDE, QUOTE, EVENT MAPS, BOTTOM NAV ===================== */
.person-block { padding: 20px 0; }
.person-block-label { display: inline-block; font-family: var(--font-heading); font-size: 22px; letter-spacing: .04em; color: var(--gold); margin-bottom: 18px; text-transform: uppercase; }
.person-arch { width: 200px; height: 70px; display: block; margin: 0 auto -8px; }
.person-arch text, .person-arch textPath { font-family: var(--font-heading); font-size: 15px; letter-spacing: .12em; fill: var(--gold); }
.person-photo { width: 170px; height: 170px; border-radius: 50%; margin: 0 auto 18px; overflow: hidden; border: 4px solid var(--gold-light); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; background: var(--cream); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-photo-fallback { font-family: var(--font-heading); font-size: 58px; color: var(--gold); }
.person-photo-sm { width: 110px; height: 110px; margin-bottom: 14px; }

.story-timeline { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; text-align: left; }
.story-item { background: var(--cream); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.story-photo { width: 100%; aspect-ratio: 4/3; overflow: hidden; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-item h4 { font-family: var(--font-heading); color: var(--gold); font-size: 19px; margin: 16px 20px 8px; }
.story-item p { margin: 0 20px 18px; color: var(--text-muted); line-height: 1.7; font-size: 14px; }

.section-quote { background: var(--cream); }
.quote-heading { font-family: var(--font-heading); font-size: 30px; color: var(--gold); margin-bottom: 16px; }
.quote-text { max-width: 480px; margin: 0 auto; color: var(--text-muted); line-height: 1.9; }

.event-maps-btn { margin-top: 14px; display: inline-block; }

.rsvp-meta { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.invite-bottom-nav {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: none; align-items: center; gap: 6px;
  background: rgba(255,255,255,.97); border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 8px; z-index: 50; backdrop-filter: blur(6px);
}
.invite-bottom-nav.show { display: flex; }
.invite-nav-btn {
  width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 18px; text-decoration: none; color: var(--navy); background: transparent; border: none; cursor: pointer;
}
.invite-nav-btn:hover { background: var(--cream); }
.invite-nav-btn.active { background: var(--gold); color: #fff; }

.invite-toast {
  position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%) translateY(10px);
  background: #1a1a1a; color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 60;
}
.invite-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.preview-bar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  background: #1a1a1a; color: #fff; padding: 12px 16px; text-align: center; font-size: 13px;
}
.preview-bar span { max-width: 480px; font-weight: 600; }
.preview-bar strong { color: var(--gold, #d4af37); }
.preview-bar-blue { background: #2563eb; color: #fff; border: none; }
.preview-bar-blue:hover { background: #1d4ed8; }
.preview-bar-green { background: #16a34a; color: #fff; border: none; }
.preview-bar-green:hover { background: #15803d; }

@media (max-width: 480px) {
  .person-photo { width: 120px; height: 120px; }
  .person-block-label { font-size: 18px; }
  .preview-bar { font-size: 12px; padding: 10px 12px; }
}

/* ===================== PREVIEW TEMA (admin/product_preview.php) =====================
   Mockup 1 halaman penuh (background + Photo + Teks 1-5 + Teks Terakhir)
   dari 1 tema di "Kelola Tema" -- 1 section per Halaman, ditumpuk dari atas
   ke bawah (di-scroll biasa), posisi teksnya persis hasil geser (drag) di
   panel Preview Tampilan form Tambah/Edit Tema. Animasi kemunculannya pakai
   class anim-* yang sama seperti yang sudah didefinisikan di atas. */
.tema-preview-page {
  position: relative; min-height: 100vh; width: 100%; overflow: hidden;
  background-color: #f3f1ec; background-size: cover; background-position: center;
}
/* .preview-bar di atas ikut makan tinggi layar (bukan overlay) -- supaya
   tombol "Buka Undangan" di section Cover tetap kelihatan tanpa perlu
   discroll dulu, tinggi section Cover dikurangi setinggi bar itu (nilai
   --preview-bar-h diisi JS di product_preview.php, defaultnya ditaksir). */
.tema-preview-cover-wrap { position: relative; min-height: calc(100vh - var(--preview-bar-h, 64px)); }
.tema-preview-cover-wrap .tema-preview-page { min-height: calc(100vh - var(--preview-bar-h, 64px)); }
.tema-preview-photo {
  /* left/top/width/height diisi inline per Halaman (hasil geser/resize admin
     di panel Preview Tampilan, lihat migration_v12_photo_position_size.sql) --
     pojok kiri-atas jadi acuan (BUKAN posisi tengah kayak item teks). */
  position: absolute; border-radius: 18px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.28); z-index: 2;
}
.tema-preview-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tema-preview-textlayer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.tema-preview-text-item {
  position: absolute; transform: translate(-50%, -50%); opacity: 0;
  max-width: 90%; text-align: center; line-height: 1.35;
  text-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.tema-preview-text-item.is-final {
  display: flex; align-items: center; justify-content: center; border-radius: 10px;
  font-weight: 600; box-shadow: 0 6px 18px rgba(0,0,0,.22); text-shadow: none; padding: 0 10px;
}
.tema-preview-open-btn {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); z-index: 10;
  padding: 14px 36px; border-radius: 999px; border: none; font-weight: 600; font-size: 15px;
  cursor: pointer; box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

/* Tombol "📱 HP" / "💻 Laptop" di preview-bar -- ganti mode tampilan Preview
   Tema tanpa perlu benar-benar buka HP/Laptop asli. */
.tema-device-toggle { display: flex; gap: 6px; }
.tema-device-toggle button {
  padding: 7px 14px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.35);
  background: transparent; color: #fff; font-weight: 600; font-size: 12.5px; cursor: pointer;
}
.tema-device-toggle button.active { background: var(--gold, #c9a15a); color: #000; border-color: var(--gold, #c9a15a); }

/* Mode "📱 HP" -- semua Halaman dibungkus 1 bingkai HP sungguhan (lebar tetap
   ~390px, ada notch) yang di-scroll SENDIRI (bukan scroll halaman browser),
   jadi kelihatan persis proporsi layar HP walau dibuka di layar laptop lebar.
   Mode "💻 Laptop" -- bingkainya dilepas, isi tema tampil selebar browser
   seperti sebelumnya (persis kalau dibuka langsung di laptop). */
.tema-device-stage { display: flex; justify-content: center; background: #dcd7cb; padding: 16px 0; }
.tema-device-frame {
  position: relative; background: #f3f1ec; width: 100%;
  transition: width .2s ease, height .2s ease, border-radius .2s ease;
}
.tema-device-frame.is-phone {
  width: 390px; max-width: 92vw;
  height: calc(100vh - var(--preview-bar-h, 64px) - 32px);
  border: 10px solid #16161a; border-radius: 38px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden;
}
.tema-device-frame.is-laptop {
  height: auto; border: none; border-radius: 0; box-shadow: none; overflow: visible;
}
.tema-device-notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 120px; height: 22px; background: #16161a; border-radius: 0 0 14px 14px; z-index: 20;
}
.tema-device-frame.is-laptop .tema-device-notch { display: none; }
.tema-device-scroll { width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tema-device-frame.is-laptop .tema-device-scroll { height: auto; overflow: visible; }

/* Di dalam bingkai HP, 1 Halaman = persis 1 layar penuh bingkai itu (bukan
   100vh browser beneran) -- di mode Laptop dikembalikan seperti semula.
   Dipakai px (--tema-frame-h, diisi JS) bukan 100% -- soalnya #tema-preview-
   rest sendiri tingginya "auto" (isinya cuma elemen position:absolute), jadi
   height:100% dari elemen di dalamnya tidak ada acuan buat dihitung. */
.tema-device-frame.is-phone .tema-preview-cover-wrap,
.tema-device-frame.is-phone .tema-preview-cover-wrap .tema-preview-page,
.tema-device-frame.is-phone #tema-preview-rest .tema-preview-page {
  min-height: var(--tema-frame-h, 700px); height: var(--tema-frame-h, 700px);
}
.tema-device-frame.is-laptop .tema-preview-cover-wrap,
.tema-device-frame.is-laptop .tema-preview-cover-wrap .tema-preview-page,
.tema-device-frame.is-laptop #tema-preview-rest .tema-preview-page {
  min-height: calc(100vh - var(--preview-bar-h, 64px)); height: auto;
}

@media (max-width: 480px) {
  .tema-device-toggle button { padding: 6px 11px; font-size: 11.5px; }
}

/* ===================== CATEGORY STRIP (Landing page) ===================== */
.category-strip-wrap { padding: 70px 20px; background: var(--cream); scroll-margin-top: 80px; }
.category-strip-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.category-strip-head p { color: var(--text-muted); }
.category-strip-outer { display: flex; align-items: center; gap: 10px; max-width: 1140px; margin: 0 auto; }
.category-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 2px 12px;
  flex: 1;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.category-grid::-webkit-scrollbar { display: none; }
.category-card {
  flex: 0 0 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 12px;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  text-align: center;
}
.category-card:hover, .category-card:focus {
  transform: translateY(-4px);
  border-color: var(--gold);
}
.category-card.active {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  border-color: var(--navy);
  color: #fff;
}
.category-icon { font-size: 32px; line-height: 1; }
.category-name { font-size: 13px; font-weight: 600; }

@media (max-width: 640px) {
  .category-card { flex-basis: 110px; padding: 18px 10px; }
  .category-icon { font-size: 26px; }
  .category-name { font-size: 12px; }
}

/* ===================== HOMEPAGE THEME PREVIEW CARDS ===================== */
.theme-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; max-width: 1100px; margin: 0 auto; }
@media (max-width: 900px) { .theme-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .theme-cards-grid { grid-template-columns: 1fr; } }
.theme-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 18px; text-align: center; }
.theme-card-phone { width: 130px; height: 240px; margin: 0 auto 16px; border-radius: 20px; border: 5px solid var(--navy); position: relative; overflow: hidden; }
.theme-card-phone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 42px; height: 11px; background: var(--navy); border-radius: 0 0 8px 8px; z-index: 2; }
.theme-card-phone-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 10px; text-align: center; }
.theme-card-phone-elegant { background: linear-gradient(160deg, var(--navy), var(--navy-light) 60%, #2a4e7f); }
.theme-card-phone-elegant .theme-card-phone-screen { color: #fff; }
.theme-card-phone-minimalist { background: #fafafa; border-color: var(--border); }
.theme-card-phone-minimalist .theme-card-phone-screen { color: var(--text); }
.theme-card-phone-floral { background: linear-gradient(160deg, #f7d9e3, #fbeef2); }
.theme-card-phone-floral .theme-card-phone-screen { color: #7a3b52; }
.theme-card-phone-classic { background: linear-gradient(160deg, #6b4423, #8a5f3a 60%, #c9a24b); }
.theme-card-phone-classic .theme-card-phone-screen { color: #fff; }
.theme-card-phone-midnight { background: linear-gradient(160deg, #0d0d0d, #2b2b2b 60%, #3d3d3d); }
.theme-card-phone-midnight .theme-card-phone-screen { color: #fff; }
.theme-card-phone-nature { background: linear-gradient(160deg, #2f4a3c, #4a6b57 60%, #6f9c81); }
.theme-card-phone-nature .theme-card-phone-screen { color: #fff; }
.theme-card-phone-romantic { background: linear-gradient(160deg, #f7d9e1, #f2b8c9); }
.theme-card-phone-romantic .theme-card-phone-screen { color: #7a2e40; }
.theme-card-phone-silver { background: linear-gradient(160deg, #3a3f47, #5c6470 60%, #7d8792); }
.theme-card-phone-silver .theme-card-phone-screen { color: #fff; }
.theme-card-phone-kicker { font-size: 10px; letter-spacing: .08em; opacity: .75; text-transform: uppercase; }
.theme-card-phone-name { font-family: var(--font-heading); font-size: 14px; }
.theme-card h4 { margin: 0 0 6px; font-size: 16px; }
.theme-card-stars { color: var(--gold); font-size: 13px; margin-bottom: 14px; }
.theme-card-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ===================== CATEGORY PICKER (Builder step 1) ===================== */
.category-picker-head { text-align: center; margin-bottom: 24px; }
.category-picker-head p { color: var(--text-muted); }

/* ===================== CATEGORY TABS (Builder page: switch form without reload) ===================== */
.category-tabs-outer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  background: #f7f8fa;
  padding: 10px 0;
}
.category-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 2px;
  flex: 1;
  scrollbar-width: none;
}
.category-tabs::-webkit-scrollbar { display: none; }
.category-tab {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 104px;
  padding: 14px 8px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.category-tab:hover { border-color: var(--gold); transform: translateY(-2px); }
.category-tab.active {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  border-color: var(--navy);
  color: #fff;
}
.category-tab .category-icon { font-size: 24px; line-height: 1; }
.category-tab .category-name { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.25; }
.category-tabs-arrow {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: #fff;
  color: #000;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.category-tabs-arrow:hover { border-color: var(--gold); }

@media (max-width: 640px) {
  .category-tab { width: 84px; padding: 10px 6px; }
  .category-tab .category-icon { font-size: 20px; }
  .category-tab .category-name { font-size: 11px; }
}

/* ===================== BUILDER: EVENT BLOCKS ===================== */
.event-block {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  position: relative;
}
.event-block .grid-2 { margin-top: 0; }
.event-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #fdecea;
  color: #b3261e;
  border: none;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.event-remove:hover { background: #fbd9d5; }
#add-event { margin-top: 4px; }

/* Tombol "Hapus Halaman" bergaya pill dengan animasi Menghapus... -> Terhapus,
   dipakai khusus di section "Halaman & Background" form Tambah/Edit Produk. */
.page-remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #f2564f, #dd332b);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(221, 51, 43, 0.35);
  transition: transform 0.15s ease, background 0.2s ease;
}
.page-remove-btn:hover:not(:disabled) { transform: translateY(-1px); }
.page-remove-btn:disabled { cursor: default; }
.page-remove-btn.is-deleted {
  background: linear-gradient(180deg, #3cc274, #22a355);
  box-shadow: 0 4px 12px rgba(34, 163, 85, 0.35);
}
.page-remove-btn .prb-icon { font-size: 13px; }
.page-remove-btn .prb-check { font-size: 14px; font-weight: 700; }
.prb-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: prb-spin 0.7s linear infinite;
}
@keyframes prb-spin { to { transform: rotate(360deg); } }

.undo-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(16px);
  background: #262631;
  color: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.undo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.undo-toast button {
  background: none;
  border: none;
  color: #8ab4ff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}


/* =========================================================
   UPDATE KE-93: Panel admin berkarakter pink #f70487
   (hanya berlaku di halaman admin: body.admin-body -- halaman
   pengunjung & undangan tidak berubah)
   ========================================================= */
.admin-body {
  --navy: #f70487; --navy-light: #ff47a8; --cream: #fff0f7;
  --admin-pink: #f70487; --admin-pink-dark: #c9036d; --admin-pink-soft: #fff0f7; --admin-pink-line: #fbd3e7;
  --shadow: 0 10px 30px rgba(247, 4, 135, 0.08);
  accent-color: #f70487; background: #fbf7fa;
}
.admin-body ::selection { background: #fbd3e7; }
.admin-body .admin-sidebar { border-right-color: #f6e3ee; }
.admin-body .admin-nav a { color: #1d1d22; }
.admin-body .admin-nav a .admin-nav-icon { width: 20px; height: 20px; display: inline-grid; place-items: center; color: var(--admin-pink); }
.admin-body .admin-nav a .admin-nav-icon svg { width: 19px; height: 19px; }
.admin-body .admin-nav a:hover { background: var(--admin-pink-soft); color: var(--admin-pink); }
.admin-body .admin-nav a.active { background: var(--admin-pink); color: #fff; box-shadow: 0 8px 20px rgba(247, 4, 135, .28); }
.admin-body .admin-nav a.active .admin-nav-icon { color: #fff; }
.admin-body .admin-nav a:focus-visible { outline: 2px solid var(--admin-pink); outline-offset: 2px; }
.admin-body .admin-nav-sep { background: #f6e3ee; }
.admin-body .admin-nav a.app-logout { color: #1d1d22 !important; }
.admin-body .admin-nav a.app-logout:hover { color: var(--admin-pink) !important; }
.admin-body .badge { background: var(--admin-pink-soft); color: var(--admin-pink-dark); border: 1px solid var(--admin-pink-line); }
.admin-body .invite-card { border: 1px solid #f6e3ee; }
.admin-body .empty-state { border-color: var(--admin-pink-line); }
.admin-body input:focus, .admin-body select:focus, .admin-body textarea:focus { border-color: var(--admin-pink); outline: none; box-shadow: 0 0 0 3px rgba(247, 4, 135, .12); }
.admin-body .admin-footnote { color: #9a8a94; }

/* Dashboard admin (UPDATE KE-93) */
.adm-dash-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 18px 22px; background: linear-gradient(120deg, #f70487 0%, #c9036d 60%, #7a0243 100%); color: #fff; border-radius: 18px; margin-bottom: 18px; box-shadow: 0 14px 34px rgba(247, 4, 135, .22); }
.adm-dash-head h1 { color: #fff; font-size: 24px; line-height: 1.2; margin: 0 0 4px; }
.adm-dash-head p { color: rgba(255,255,255,.88); font-size: 13.5px; margin: 0; }
.adm-dash-head .btn { background: #fff; color: #f70487; box-shadow: none; padding: 10px 20px; font-size: 14px; white-space: nowrap; }
.adm-dash-head .btn:hover { background: #fff0f7; }
.adm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.adm-stat { background: #fff; border: 1px solid #f6e3ee; border-radius: 14px; padding: 14px 16px; }
.adm-stat b { display: block; font-size: 26px; line-height: 1.1; color: #f70487; font-variant-numeric: tabular-nums; }
.adm-stat span { font-size: 12.5px; color: #6b6f76; }
.adm-panel { background: #fff; border: 1px solid #f6e3ee; border-radius: 16px; padding: 16px 18px; }
.adm-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.adm-panel-head h2 { font-size: 16px; margin: 0; }
.adm-panel-head a { color: #f70487; font-size: 13px; font-weight: 600; text-decoration: none; }
.adm-recent { list-style: none; margin: 0; padding: 0; }
.adm-recent li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #f6eef3; }
.adm-recent li:first-child { border-top: 0; }
.adm-recent .nm { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-recent .cat { font-size: 11px; color: #c9036d; background: #fff0f7; border: 1px solid #fbd3e7; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.adm-recent .st { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; background: #f3f3f5; color: #555; }
.adm-recent .st.pub { background: #e8f7ee; color: #1a7f45; }
.adm-recent .dt { font-size: 12px; color: #8a8f98; white-space: nowrap; }
.adm-recent a.ed { font-size: 12.5px; font-weight: 600; color: #f70487; text-decoration: none; padding: 4px 10px; border: 1px solid #fbd3e7; border-radius: 8px; }
.adm-recent a.ed:hover { background: #fff0f7; }
.adm-empty { text-align: center; padding: 26px 10px; color: #6b6f76; font-size: 14px; }
@media (max-width: 600px) {
  .adm-dash-head { padding: 16px; }
  .adm-dash-head h1 { font-size: 20px; }
  .adm-stats { gap: 8px; }
  .adm-stat { padding: 10px 12px; }
  .adm-stat b { font-size: 21px; }
  .adm-recent .dt, .adm-recent .cat { display: none; }
}