/* ================================================================
   KALULA STUDIO — Website Booking Wisuda
   CSS Design System v2.0 — Clean, Premium, Mobile-First
   
   Aesthetic: Refined Luxury Editorial
   Primary: Orange Kalula #f97316
   Secondary: Navy #1e293b
   Background: Warm Cream #FFFBF5
   Typography: Outfit (body) + Fraunces (display)
   ================================================================ */

/* ================================================================
   1. DESIGN TOKENS / CSS VARIABLES
   ================================================================ */
:root {
  /* — Colors — */
  --bg:     #FFFBF5;
  --bg2:    #FFF8F0;
  --bg3:    #FFF0DE;
  --surface:#ffffff;
  --navy:   #1e293b;
  --navy-l: #334155;
  --navy-xl:#475569;

  --ink:    #1e293b;
  --ink2:   #475569;
  --ink3:   #64748b;
  --ink4:   #94a3b8;

  --or:     #f97316;
  --or-d:   #ea580c;
  --or-l:   #fb923c;
  --or-pl:  #fff7ed;
  --or-glow:rgba(249,115,22,0.12);

  --wh:     #ffffff;
  --line:   #e2e8f0;
  --line-l: #f1f5f9;

  --green:     #16a34a;
  --green-bg:  #f0fdf4;
  --red:       #dc2626;
  --red-bg:    #fef2f2;

  /* — Typography — */
  --font:     'Outfit', sans-serif;
  --font-d:   'Fraunces', serif;

  /* — Spacing — */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;
  --sp-4xl: 80px;
  --sp-sec: 100px;

  /* — Radius — */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full:9999px;

  /* — Shadows — Berlapis, meniru jatuhnya cahaya studio.
       Tiap level punya 3 lapis: kontak (tajam), tengah, ambient (lebar). — */
  --shadow-sm:
    0 1px 2px rgba(30,41,59,0.05),
    0 2px 6px rgba(30,41,59,0.04),
    0 4px 12px rgba(30,41,59,0.03);
  --shadow-md:
    0 1px 2px rgba(30,41,59,0.06),
    0 4px 10px rgba(30,41,59,0.05),
    0 10px 28px rgba(30,41,59,0.06),
    0 20px 48px rgba(30,41,59,0.04);
  --shadow-lg:
    0 2px 4px rgba(30,41,59,0.07),
    0 8px 18px rgba(30,41,59,0.06),
    0 18px 44px rgba(30,41,59,0.08),
    0 36px 80px rgba(30,41,59,0.06);
  --shadow-xl:
    0 4px 8px rgba(30,41,59,0.08),
    0 14px 30px rgba(30,41,59,0.09),
    0 30px 70px rgba(30,41,59,0.10),
    0 60px 120px rgba(30,41,59,0.08);

  /* Tombol orange — glow + kontak, bukan blur datar */
  --shadow-or:
    0 1px 2px rgba(154,52,18,0.30),
    0 4px 10px rgba(249,115,22,0.28),
    0 10px 24px rgba(249,115,22,0.22);
  --shadow-or-hi:
    0 2px 4px rgba(154,52,18,0.32),
    0 8px 18px rgba(249,115,22,0.34),
    0 18px 40px rgba(249,115,22,0.26);

  /* Highlight tepi atas — efek cahaya mengenai sisi atas objek */
  --edge-hi:    inset 0 1px 0 rgba(255,255,255,0.9);
  --edge-hi-or: inset 0 1px 0 rgba(255,255,255,0.28);

  /* — Transitions — */
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:    0.3s;
}

/* ================================================================
   2. RESET & BASE
   ================================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

/* --- STUDIO LIGHT BLOOM ---
   Dua sumber cahaya lembut di belakang konten, seperti softbox
   yang jatuh ke backdrop studio. Memberi kedalaman pada background
   yang tadinya rata. Fixed supaya tidak ikut scroll. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(249,115,22,0.20), transparent 64%),
    radial-gradient(620px 460px at 86% 4%,   rgba(251,146,60,0.16), transparent 62%),
    radial-gradient(560px 420px at 12% 12%,  rgba(253,186,116,0.13), transparent 60%),
    radial-gradient(760px 540px at 8% 34%,   rgba(30,41,59,0.05),   transparent 64%);
}

/* Vignette halus di tepi — mendorong mata ke tengah */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 58%, rgba(30,41,59,0.05) 100%);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; cursor: pointer; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
ul { list-style: none; }

/* Font display (serif headings) */
.fd { font-family: var(--font-d); }

/* ================================================================
   3. LAYOUT
   ================================================================ */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* View system — hanya 1 view aktif */
.view { display: none; }
.view.active { display: block; }

/* ================================================================
   4. HEADER / NAVBAR
   ================================================================ */
/* Header mengambang di atas konten — kaca + bayangan lembut,
   bukan sekadar garis tipis */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,251,245,0.78);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid rgba(226,232,240,0.55);
  box-shadow:
    0 1px 2px rgba(30,41,59,0.03),
    0 6px 20px rgba(30,41,59,0.05),
    inset 0 1px 0 rgba(255,255,255,0.7);
  transition: box-shadow var(--dur) var(--ease);
}

.hdr-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex-shrink: 0;
}

.logo img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
}

.logo-text {
  font-family: var(--font-d);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.3px;
}

.logo-text span {
  font-weight: 400;
  color: var(--or);
}

/* Nav links — desktop */
.hdr-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hdr-nav a {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink2);
  border-radius: var(--radius-sm);
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  cursor: pointer;
}

.hdr-nav a:hover {
  color: var(--or);
  background: var(--or-pl);
}

/* ================================================================
   5. HERO SECTION
   ================================================================ */
.hero {
  padding: 60px 0 40px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

/* Badge kaca — mengambang di atas bloom, bukan menempel rata */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 18px 7px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,240,222,0.9) 100%);
  border: 1px solid rgba(249,115,22,0.18);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  color: var(--or-d);
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 1px 2px rgba(154,52,18,0.06),
    0 4px 12px rgba(249,115,22,0.12),
    0 10px 28px rgba(249,115,22,0.08),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

.hero-badge .dot {
  width: 8px;
  height: 8px;
  background: var(--or);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.18), 0 0 8px rgba(249,115,22,0.55);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1);   box-shadow: 0 0 0 3px rgba(249,115,22,0.18), 0 0 8px rgba(249,115,22,0.55); }
  50%      { opacity: .6; transform: scale(0.8); box-shadow: 0 0 0 6px rgba(249,115,22,0.05), 0 0 4px rgba(249,115,22,0.30); }
}

.hero h1 {
  font-family: var(--font-d);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 20px;
  letter-spacing: -0.5px;
  /* Terangkat tipis dari backdrop, bukan menempel rata */
  text-shadow: 0 1px 0 rgba(255,255,255,0.7), 0 2px 12px rgba(30,41,59,0.07);
}

/* Baris aksen — diberi kilau hangat seperti kena cahaya softbox */
.hero h1 em {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(180deg, #fb923c 0%, var(--or) 52%, #e2580a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--or);
  text-shadow: 0 4px 22px rgba(249,115,22,0.22);
}

.hero-copy {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink3);
  max-width: 560px;
  margin: 0 auto 32px;
}

.hero-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ================================================================
   6. BUTTONS (Global)
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius);
  transition: transform 0.18s var(--ease-out),
              box-shadow 0.25s var(--ease),
              background 0.25s var(--ease),
              border-color 0.25s var(--ease),
              color 0.25s var(--ease);
  white-space: nowrap;
  border: none;
  cursor: pointer;
  position: relative;
  transform: translateY(0);
}

/* Tombol utama — punya "badan" 3D: gradasi, tepi atas terang, bayangan berlapis */
.btn-or {
  background: linear-gradient(180deg, var(--or-l) 0%, var(--or) 45%, var(--or-d) 100%);
  color: var(--wh);
  box-shadow: var(--shadow-or), var(--edge-hi-or);
}

.btn-or:hover {
  background: linear-gradient(180deg, #fca55c 0%, var(--or) 45%, var(--or-d) 100%);
  transform: translateY(-3px);
  box-shadow: var(--shadow-or-hi), var(--edge-hi-or);
}

/* Ditekan — turun & bayangan mengecil, seperti tombol fisik */
.btn-or:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 2px rgba(154,52,18,0.32),
    0 2px 5px rgba(249,115,22,0.22),
    inset 0 2px 5px rgba(154,52,18,0.22);
}

.btn-out {
  background: linear-gradient(180deg, #ffffff 0%, #fdfaf6 100%);
  color: var(--navy);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-sm), var(--edge-hi);
}

.btn-out:hover {
  border-color: var(--or-l);
  color: var(--or);
  background: linear-gradient(180deg, #fffaf4 0%, var(--or-pl) 100%);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), var(--edge-hi);
}

.btn-out:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(30,41,59,0.07);
}

.btn-back {
  background: var(--bg2);
  color: var(--ink3);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius);
}

.btn-back:hover {
  background: var(--line-l);
  color: var(--ink2);
}

.cta-outline-light {
  border-color: rgba(255,255,255,0.3);
  color: var(--wh);
  background: rgba(255,255,255,0.08);
}

.cta-outline-light:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.5);
  color: var(--wh);
}

/* ================================================================
   7. STATS BAR
   ================================================================ */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 0 0 60px;
  max-width: 480px;
  margin: 0 auto;
  perspective: 900px;
}

/* Kartu angka — seperti kartu tebal di atas backdrop, bukan kotak datar */
.si {
  text-align: center;
  padding: 22px 12px;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf3 100%);
  border: 1px solid rgba(226,232,240,0.9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), var(--edge-hi);
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease);
}

.si:hover {
  transform: translateY(-6px) rotateX(6deg) scale(1.02);
  box-shadow: var(--shadow-lg), var(--edge-hi);
}

.si .num {
  font-size: 28px;
  font-weight: 700;
  color: var(--or);
  line-height: 1;
  margin-bottom: 4px;
  text-shadow: 0 2px 10px rgba(249,115,22,0.22);
}

.si .lbl {
  font-size: 12px;
  color: var(--ink3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ================================================================
   8. SECTION TITLES
   ================================================================ */
.sec-title {
  text-align: center;
  margin-bottom: 40px;
}

.sec-title h2 {
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}

.sec-title p {
  font-size: 15px;
  color: var(--ink3);
  max-width: 480px;
  margin: 0 auto;
}

.sec-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--or);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

.sec-tag::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--or);
  border-radius: 2px;
}

/* ================================================================
   9. KEUNGGULAN / WHY SECTION
   ================================================================ */
.why-section {
  padding: 80px 0;
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.why-card {
  background: linear-gradient(180deg, #ffffff 0%, #fffcf8 100%);
  border: 1px solid rgba(226,232,240,0.85);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm), var(--edge-hi);
  transition: transform 0.32s var(--ease-out),
              box-shadow 0.32s var(--ease),
              border-color 0.32s var(--ease);
}

.why-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--or);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg), var(--edge-hi);
  border-color: rgba(249,115,22,0.22);
}

.why-card:hover::before {
  opacity: 1;
}

/* Tile ikon — timbul, seperti tombol kecil yang menonjol dari kartu */
.why-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
  background: linear-gradient(180deg, #fff3e6 0%, #ffe3c7 100%);
  color: var(--or-d);
  flex-shrink: 0;
  box-shadow:
    0 1px 2px rgba(154,52,18,0.10),
    0 4px 10px rgba(249,115,22,0.14),
    inset 0 1px 0 rgba(255,255,255,0.95);
  transition: transform 0.32s var(--ease-out), box-shadow 0.32s var(--ease);
}

.why-card:hover .why-icon {
  transform: translateY(-2px) scale(1.06);
  box-shadow:
    0 2px 4px rgba(154,52,18,0.12),
    0 8px 18px rgba(249,115,22,0.22),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

.why-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}

.why-card p {
  font-size: 14px;
  color: var(--ink3);
  line-height: 1.6;
}

.why-no {
  font-family: var(--font-d);
  font-size: 32px;
  font-weight: 700;
  color: var(--or-pl);
  position: absolute;
  top: 16px;
  right: 20px;
  line-height: 1;
  user-select: none;
}

/* ================================================================
   10. ALUR BOOKING / STEPS SECTION
   ================================================================ */
/* Blok gelap — terasa "cekung" ke dalam halaman, kontras
   dengan kartu terang yang menonjol keluar */
.steps-section {
  padding: 80px 0;
  background:
    radial-gradient(900px 420px at 50% 0%, #26364f 0%, transparent 70%),
    linear-gradient(180deg, #223047 0%, var(--navy) 45%, #16202f 100%);
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow:
    inset 0 2px 12px rgba(0,0,0,0.35),
    inset 0 -2px 12px rgba(0,0,0,0.25),
    0 24px 60px rgba(30,41,59,0.18);
}

.steps-section::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249,115,22,0.16), transparent 68%);
}

.steps-section .sec-title h2 { color: var(--wh); }
.steps-section .sec-title p  { color: rgba(255,255,255,0.6); }
.steps-section .sec-tag       { color: var(--or-l); }
.steps-section .sec-tag::before { background: var(--or-l); }

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
}

.step-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  box-shadow:
    0 4px 14px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.10);
  transition: transform 0.32s var(--ease-out),
              box-shadow 0.32s var(--ease),
              background 0.32s var(--ease),
              border-color 0.32s var(--ease);
}

.step-card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.05) 100%);
  border-color: rgba(249,115,22,0.30);
  transform: translateY(-5px);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.30),
    0 20px 48px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

/* Nomor langkah — kubus kecil yang menonjol */
.step-num {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--or-l) 0%, var(--or) 50%, var(--or-d) 100%);
  color: var(--wh);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.30),
    0 6px 14px rgba(249,115,22,0.28),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

.step-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--wh);
  margin-bottom: 2px;
}

.step-card p {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}

/* ================================================================
   11. PAKET SECTION
   ================================================================ */
.paket-section {
  padding: 80px 0;
}

.pkg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 8px;
}

/* Kartu paket — punya ketebalan. Terangkat saat disentuh,
   terangkat lebih tinggi lagi saat dipilih. */
.pkg {
  background: linear-gradient(180deg, #ffffff 0%, #fffcf7 100%);
  border: 1.5px solid rgba(226,232,240,0.9);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm), var(--edge-hi);
  transition: transform 0.32s var(--ease-out),
              box-shadow 0.32s var(--ease),
              border-color 0.32s var(--ease);
}

.pkg:hover {
  border-color: var(--or-l);
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg), var(--edge-hi);
}

.pkg.sel {
  border-color: var(--or);
  transform: translateY(-4px);
  box-shadow:
    0 0 0 3px var(--or-glow),
    0 2px 4px rgba(154,52,18,0.08),
    0 10px 24px rgba(249,115,22,0.16),
    0 24px 56px rgba(249,115,22,0.12),
    var(--edge-hi);
}

.pkg .pkg-check {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--line-l);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  box-shadow: inset 0 1px 3px rgba(30,41,59,0.10);
  transition: all var(--dur) var(--ease);
}

.pkg.sel .pkg-check {
  background: linear-gradient(180deg, var(--or-l), var(--or-d));
  color: var(--wh);
  box-shadow:
    0 2px 6px rgba(249,115,22,0.40),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

/* Label Best Seller — pita timbul */
.pkg-pop {
  display: inline-block;
  padding: 5px 13px;
  background: linear-gradient(180deg, var(--or-l) 0%, var(--or) 50%, var(--or-d) 100%);
  color: var(--wh);
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  box-shadow:
    0 2px 6px rgba(249,115,22,0.32),
    0 6px 14px rgba(249,115,22,0.18),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

.pkg h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px;
}

.price {
  font-family: var(--font-d);
  font-size: 28px;
  font-weight: 700;
  color: var(--or);
  margin: 12px 0;
}

.price span {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink3);
  font-family: var(--font);
}

.pkg ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pkg ul li {
  font-size: 14px;
  color: var(--ink2);
  padding-left: 22px;
  position: relative;
}

.pkg ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
}

/* ================================================================
   12. PORTOFOLIO
   ================================================================ */
.portfolio-section {
  padding: 0 0 80px;
}

.port-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Foto portofolio — seperti cetakan yang dipasang, bukan gambar tempel */
.port-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
  background: var(--bg2);
  box-shadow: var(--shadow-md);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease);
}

.port-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.port-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.port-item:hover img {
  transform: scale(1.07);
}

.port-cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 16px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  color: var(--wh);
  font-size: 13px;
  font-weight: 600;
}

.ph {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink4);
  font-size: 13px;
}

.ph .ico {
  font-size: 28px;
}

/* ================================================================
   13. CTA SECTION
   ================================================================ */
.home-cta-section {
  padding: 0 0 80px;
}

/* Blok CTA — mengambang tinggi di atas halaman */
.home-cta-card {
  background:
    radial-gradient(700px 300px at 50% 0%, #2a3a52 0%, transparent 68%),
    linear-gradient(135deg, var(--navy), #0f172a);
  border-radius: var(--radius-xl);
  padding: 48px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 10px rgba(15,23,42,0.16),
    0 16px 36px rgba(15,23,42,0.20),
    0 36px 80px rgba(15,23,42,0.18),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

.home-cta-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249,115,22,0.20), transparent 68%);
}

.home-cta-card::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(249,115,22,0.05);
}

.home-cta-card h2 {
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 700;
  color: var(--wh);
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.home-cta-card p {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  max-width: 480px;
  margin: 0 auto 28px;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

.home-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* ================================================================
   14. KONTAK & LOKASI
   ================================================================ */
.home-contact-section {
  padding: 0 0 80px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.contact-card {
  display: block;
  background: linear-gradient(180deg, #ffffff 0%, #fffcf8 100%);
  border: 1px solid rgba(226,232,240,0.85);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-decoration: none;
  box-shadow: var(--shadow-sm), var(--edge-hi);
  transition: transform 0.32s var(--ease-out),
              box-shadow 0.32s var(--ease),
              border-color 0.32s var(--ease);
}

.contact-card:hover {
  border-color: rgba(249,115,22,0.25);
  box-shadow: var(--shadow-lg), var(--edge-hi);
  transform: translateY(-6px);
}

.contact-k {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink4);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}

.contact-v {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}

.contact-address {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.contact-note {
  font-size: 13px;
  color: var(--or);
  font-weight: 500;
}

/* ================================================================
   15. FOOTER
   ================================================================ */
.ftr {
  border-top: 1px solid var(--line);
  padding: 24px 0;
  background: var(--bg2);
}

.ftr-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--ink3);
}

.ftr-inner a {
  color: var(--ink3);
  font-weight: 500;
  margin-left: 20px;
  transition: color var(--dur);
}

.ftr-inner a:hover {
  color: var(--or);
}

/* ================================================================
   16. CARD (Global — used by booking, success, tracking)
   ================================================================ */
.card {
  background: linear-gradient(180deg, #ffffff 0%, #fffcf8 100%);
  border: 1px solid rgba(226,232,240,0.85);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-md), var(--edge-hi);
}

/* ================================================================
   17. FORM FIELDS (Booking)
   ================================================================ */
.fm {
  display: flex;
  flex-direction: column;
}

.fm label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
  margin-bottom: 6px;
}

.fm input[type="text"],
.fm input[type="tel"],
.fm input[type="date"],
.fm input[type="email"] {
  width: 100%;
  padding: 13px 16px;
  font-size: 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: #fdfcfa;
  color: var(--ink);
  transition: all var(--dur) var(--ease);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  /* Cekung ke dalam — lawan dari tombol yang menonjol keluar */
  box-shadow: inset 0 2px 4px rgba(30,41,59,0.055),
              inset 0 1px 1px rgba(30,41,59,0.04);
}

.fm input:focus {
  border-color: var(--or);
  background: var(--wh);
  box-shadow: 0 0 0 3px var(--or-glow),
              inset 0 2px 4px rgba(30,41,59,0.04);
}

.fm .err {
  font-size: 12px;
  color: var(--red);
  margin-top: 4px;
  display: none;
}

.fm.has-err input {
  border-color: var(--red);
}

.fm.has-err .err {
  display: block;
}

.tanggal-prioritas {
  margin-bottom: 20px;
}

.tanggal-prioritas label {
  font-size: 13px;
  font-weight: 700;
  color: var(--or-d);
  letter-spacing: 0.5px;
}

.tgl-note {
  font-size: 12px;
  color: var(--ink4);
  margin-top: 6px;
}

.judul-pilih-paket {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}

/* ================================================================
   18. STEPPER (Booking)
   ================================================================ */
.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 28px;
  padding: 16px 20px;
  background: linear-gradient(180deg, #ffffff 0%, #fffcf7 100%);
  border: 1px solid rgba(226,232,240,0.85);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), var(--edge-hi);
}

.stp-item {
  display: flex;
  align-items: center;
}

.stp-c {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--line-l);
  color: var(--ink4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all var(--dur) var(--ease);
}

.stp-c.act {
  background: var(--or);
  color: var(--wh);
  box-shadow: 0 2px 8px rgba(249,115,22,0.3);
}

.stp-c.done {
  background: var(--green);
  color: var(--wh);
}

.stp-l {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink4);
  margin-left: 6px;
  white-space: nowrap;
  transition: color var(--dur);
}

.stp-l.act { color: var(--or); font-weight: 600; }
.stp-l.done { color: var(--green); }

.stp-line {
  width: 32px;
  height: 2px;
  background: var(--line);
  margin: 0 8px;
  flex-shrink: 0;
  transition: background var(--dur);
}

.stp-line.done { background: var(--green); }

.step-anim {
  animation: stepFade 0.35s var(--ease);
}

@keyframes stepFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   19. CODE BOX (Success)
   ================================================================ */
.code-box {
  background: linear-gradient(180deg, #fff6ec 0%, #fffaf4 100%);
  border: 2px dashed var(--or);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin: 16px 0;
  text-align: center;
  box-shadow: inset 0 2px 8px rgba(249,115,22,0.09);
}

.code-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink4);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.code {
  font-family: var(--font-d);
  font-size: 32px;
  font-weight: 700;
  color: var(--or);
  letter-spacing: 2px;
}

/* ================================================================
   20. TRACKING — Badge, Info Grid, Timeline
   ================================================================ */

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-p  { background: #FFF7ED; color: #EA580C; }
.badge-pr { background: #EFF6FF; color: #2563EB; }
.badge-d  { background: #F0FDF4; color: #16A34A; }
.badge-x  { background: #FEF2F2; color: #DC2626; }

/* Info Grid */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ig-item {
  padding: 12px;
  background: var(--bg2);
  border-radius: var(--radius-sm);
}

.ig-k {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.ig-v {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}

/* Timeline */
.tl {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tl-i {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  position: relative;
}

.tl-i:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 12px;
  top: 42px;
  bottom: -2px;
  width: 2px;
  background: var(--line);
}

.tl-i.done:not(:last-child)::after { background: var(--green); }

.tl-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  color: transparent;
  transition: all var(--dur);
}

.tl-i.done .tl-dot { border-color: var(--green); background: var(--green); color: var(--wh); }
.tl-i.act .tl-dot  { border-color: var(--or); background: var(--or); color: var(--wh); box-shadow: 0 0 0 4px var(--or-glow); }
.tl-i.up .tl-dot   { border-color: var(--line); }

.tl-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink2);
}

.tl-i.up .tl-name { color: var(--ink4); }
.tl-i.act .tl-name { color: var(--or); }
.tl-i.done .tl-name { color: var(--green); }

.tl-time {
  font-size: 12px;
  color: var(--ink4);
  margin-top: 2px;
}

.tl-note {
  font-size: 12px;
  color: var(--ink3);
  margin-top: 2px;
}

/* Upload area (tracking) */
.up-area {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  transition: all var(--dur);
  background: var(--surface);
}

.up-area:hover, .up-area.dg {
  border-color: var(--or);
  background: var(--or-pl);
}

.up-prev {
  max-width: 100%;
  max-height: 240px;
  border-radius: var(--radius);
  object-fit: contain;
}

/* ================================================================
   21. SPINNER & TOAST
   ================================================================ */
.spin {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: var(--wh);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}

.spin-d {
  border-color: var(--line);
  border-top-color: var(--or);
  width: 24px;
  height: 24px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 24px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--wh);
  background: var(--navy);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  animation: toastIn 0.3s var(--ease);
  white-space: nowrap;
  max-width: 90vw;
  text-align: center;
}

.toast.ok  { background: var(--green); }
.toast.err { background: var(--red); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ================================================================
   22. BOOKING FORM — Layout, Card, Fields, Payment, Upload
   ================================================================ */

/* Wrapper */
.bk-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 0 60px;
}

/* Back link */
.bk-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink3);
  cursor: pointer;
  margin-bottom: 20px;
  transition: color var(--dur);
  padding: 6px 0;
}

.bk-back:hover { color: var(--or); }
.bk-back svg { flex-shrink: 0; }

/* Booking card */
.bk-card {
  background: var(--surface);
  border: 1px solid var(--line-l);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  box-shadow: var(--shadow-lg), var(--edge-hi);
}

.bk-card-head {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-l);
}

.bk-card-head h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}

.bk-card-head p {
  font-size: 14px;
  color: var(--ink3);
  line-height: 1.6;
}

/* Fields container */
.bk-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 2-column row */
.bk-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Field hint */
.fm-hint {
  font-size: 12px;
  color: var(--ink4);
  margin-top: 4px;
  display: block;
}

/* WhatsApp prefix wrap */
.fm-wa-wrap {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--dur) var(--ease);
  background: #fdfcfa;
  box-shadow: inset 0 2px 4px rgba(30,41,59,0.055);
}

.fm-wa-wrap:focus-within {
  border-color: var(--or);
  box-shadow: 0 0 0 3px var(--or-glow);
}

.fm-wa-prefix {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--bg2);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink3);
  border-right: 1px solid var(--line);
  white-space: nowrap;
  flex-shrink: 0;
}

.fm-wa-wrap input {
  border: none !important;
  box-shadow: none !important;
  background: transparent;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}

.fm.has-err .fm-wa-wrap {
  border-color: var(--red);
}

/* Actions bar */
.bk-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line-l);
}

.bk-actions-end {
  justify-content: flex-end;
}

/* Next button (larger) */
.bk-btn-next {
  padding: 16px 28px;
  font-size: 15px;
}

/* --- Step 2: Date section --- */
.bk-date-section {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-l);
}

.tanggal-prioritas label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tanggal-prioritas label svg {
  color: var(--or);
  flex-shrink: 0;
}

/* Package section in step 2 */
.bk-pkg-section {
  margin-bottom: 8px;
}

.bk-pkg-err {
  color: var(--red);
  font-size: 13px;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 16px;
  padding: 10px;
  background: var(--red-bg);
  border-radius: var(--radius-sm);
  font-weight: 500;
}

/* --- Step 3: Payment info --- */
.bk-pay-info {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
}

.bk-pay-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 20px;
}

.bk-pay-title svg {
  color: var(--or);
  flex-shrink: 0;
}

.bk-pay-bank {
  background: linear-gradient(180deg, #ffffff 0%, #fffdfa 100%);
  border: 1px solid rgba(226,232,240,0.9);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm), var(--edge-hi);
}

.bk-pay-bank-badge {
  display: inline-block;
  background: linear-gradient(180deg, #0b4bb5 0%, #003087 100%);
  color: var(--wh);
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  box-shadow:
    0 2px 5px rgba(0,48,135,0.30),
    inset 0 1px 0 rgba(255,255,255,0.25);
}

.bk-pay-detail {
  margin-bottom: 12px;
}

.bk-pay-detail:last-child {
  margin-bottom: 0;
}

.bk-pay-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink4);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.bk-pay-rek {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--ink);
}

.bk-pay-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.bk-pay-amount {
  background: linear-gradient(180deg, var(--or-l) 0%, var(--or) 48%, var(--or-d) 100%);
  color: var(--wh);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-align: center;
  margin-bottom: 12px;
  box-shadow:
    0 2px 6px rgba(154,52,18,0.26),
    0 8px 20px rgba(249,115,22,0.26),
    inset 0 1px 0 rgba(255,255,255,0.30);
}

.bk-pay-amount-label {
  font-size: 12px;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.bk-pay-amount-value {
  font-size: 32px;
  font-weight: 800;
}

.bk-pay-warn {
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.6;
  padding: 12px 14px;
  background: rgba(249,115,22,0.06);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--or);
}

/* --- Upload zone --- */
.bk-upload-zone {
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  background: var(--bg2);
}

.bk-upload-zone:hover {
  border-color: var(--or);
  background: var(--or-pl);
}

.bk-upload-zone svg {
  margin: 0 auto 12px;
  display: block;
}

.bk-upload-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink2);
  margin-bottom: 4px;
}

.bk-upload-sub {
  font-size: 12px;
  color: var(--ink4);
}

.fm.has-err .bk-upload-zone {
  border-color: var(--red);
}

/* --- Agreement checkbox --- */
.bk-agree {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 16px;
  background: var(--bg2);
  border-radius: var(--radius);
  border: 1.5px solid var(--line);
  margin: 20px 0 8px 0;
  transition: border-color var(--dur);
}

.bk-agree:hover {
  border-color: var(--or-l);
}

.bk-agree span {
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.6;
}

.bk-agree-check {
  min-width: 24px;
  height: 24px;
  border: 2px solid var(--ink4);
  border-radius: 7px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur) var(--ease);
  margin-top: 1px;
  flex-shrink: 0;
}

.bk-agree-err {
  color: var(--red);
  font-size: 12px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--red-bg);
  border-radius: var(--radius-sm);
}

/* ================================================================
   22B. SUCCESS PAGE
   ================================================================ */
.suc-wrap {
  max-width: 540px;
  margin: 0 auto;
  padding: 48px 0 60px;
  text-align: center;
}

.suc-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), #15803d);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 6px 24px rgba(22,163,74,0.25);
  animation: sucBounce 0.6s var(--ease);
}

@keyframes sucBounce {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.suc-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}

.suc-subtitle {
  font-size: 14px;
  color: var(--ink3);
  margin-bottom: 28px;
}

.suc-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--or-pl);
  color: var(--or-d);
  border: 1px solid rgba(249,115,22,0.15);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur);
  margin-top: 12px;
}

.suc-copy-btn:hover {
  background: var(--or);
  color: var(--wh);
}

.suc-card {
  background: var(--surface);
  border: 1px solid var(--line-l);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  text-align: left;
  margin: 24px 0;
  box-shadow: var(--shadow-lg), var(--edge-hi);
}

.suc-card-title {
  font-family: var(--font-d);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 16px;
}

.suc-status-ok {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--green-bg);
  border: 1px solid rgba(22,163,74,0.15);
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.suc-status-ok svg {
  color: var(--green);
  flex-shrink: 0;
  margin-top: 1px;
}

.suc-status-ok-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 2px;
}

.suc-status-ok-desc {
  font-size: 12px;
  color: var(--ink2);
}

.suc-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.suc-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.5;
}

.suc-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--or);
  color: var(--wh);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.suc-step-done {
  background: var(--green);
}

.suc-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ================================================================
   22C. TRACKING PAGE
   ================================================================ */
.tr-wrap {
  max-width: 660px;
  margin: 0 auto;
  padding: 32px 0 60px;
}

.tr-header {
  margin-bottom: 24px;
}

.tr-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}

.tr-header p {
  font-size: 14px;
  color: var(--ink3);
}

/* Search bar */
.tr-search {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
  transition: border-color var(--dur), box-shadow var(--dur);
  box-shadow: var(--shadow-md), var(--edge-hi);
}

.tr-search:focus-within {
  border-color: var(--or);
  box-shadow: 0 0 0 3px var(--or-glow);
}

.tr-search-icon {
  padding: 0 4px 0 16px;
  display: flex;
  flex-shrink: 0;
}

.tr-search input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 16px 12px;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 0;
}

.tr-search-btn {
  margin: 6px 6px 6px 0;
  border-radius: var(--radius);
  padding: 12px 20px;
  flex-shrink: 0;
}

/* States */
.tr-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--ink3);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tr-state-card {
  text-align: center;
  padding: 48px 32px;
  background: linear-gradient(180deg, #ffffff 0%, #fffcf8 100%);
  border: 1px solid rgba(226,232,240,0.85);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md), var(--edge-hi);
}

.tr-state-card svg {
  margin: 0 auto 16px;
  display: block;
}

.tr-state-card h3 {
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 8px;
}

.tr-state-card p {
  font-size: 14px;
  color: var(--ink3);
  max-width: 360px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Info card */
.tr-info-card {
  background: linear-gradient(180deg, #ffffff 0%, #fffcf8 100%);
  border: 1px solid rgba(226,232,240,0.85);
  border-radius: var(--radius-xl);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-md), var(--edge-hi);
}

.tr-info-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-l);
}

.tr-info-head h3 {
  font-size: 22px;
  color: var(--navy);
}

/* Cancelled */
.tr-cancelled-card {
  text-align: center;
  padding: 32px 24px;
  background: var(--red-bg);
  border: 1.5px solid rgba(220,38,38,0.2);
  border-radius: var(--radius-xl);
  margin-bottom: 16px;
}

.tr-cancelled-card svg {
  margin: 0 auto 12px;
  display: block;
}

.tr-cancelled-card h3 {
  font-size: 22px;
  color: #DC2626;
  margin-bottom: 8px;
}

.tr-cancelled-card p {
  font-size: 14px;
  color: #7F1D1D;
  line-height: 1.6;
  margin-bottom: 16px;
}

.tr-cancelled-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: #DC2626;
  color: #fff;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur);
}

.tr-cancelled-btn:hover {
  background: #B91C1C;
}

/* Upload card (tracking) */
.tr-upload-card {
  background: var(--or-pl);
  border: 1.5px solid rgba(249,115,22,0.2);
  border-radius: var(--radius-xl);
  padding: 24px;
  margin-bottom: 16px;
}

.tr-upload-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--or-d);
  margin-bottom: 16px;
}

.tr-upload-title svg {
  color: var(--or);
  flex-shrink: 0;
}

.tr-upload-bank {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}

.tr-upload-bank-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.tr-upload-bank-an {
  font-size: 12px;
  color: var(--ink3);
}

.tr-upload-rek-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tr-upload-rek {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--ink);
}

.tr-upload-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  background: var(--or);
  color: var(--wh);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur);
  white-space: nowrap;
  font-family: inherit;
}

.tr-upload-copy:hover {
  background: var(--or-d);
}

.tr-upload-dp {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--or-d);
}

.tr-upload-warn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--red-bg);
  border: 1px solid rgba(220,38,38,0.12);
  border-radius: var(--radius);
  margin-bottom: 14px;
  font-size: 12px;
  color: #991B1B;
  line-height: 1.5;
}

.tr-upload-warn svg {
  color: #DC2626;
  flex-shrink: 0;
  margin-top: 1px;
}

.tr-upload-hint {
  font-size: 13px;
  color: var(--ink2);
  margin-bottom: 12px;
}

.tr-upload-submit {
  width: 100%;
  margin-top: 12px;
}

/* Uploaded card */
.tr-uploaded-card {
  background: var(--green-bg);
  border: 1.5px solid rgba(22,163,74,0.15);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  margin-bottom: 16px;
}

.tr-uploaded-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.tr-uploaded-head svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.tr-uploaded-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 2px;
}

.tr-uploaded-desc {
  font-size: 13px;
  color: var(--ink2);
}

/* Timeline card */
.tr-timeline-card {
  background: linear-gradient(180deg, #ffffff 0%, #fffcf8 100%);
  border: 1px solid rgba(226,232,240,0.85);
  border-radius: var(--radius-xl);
  padding: 24px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-md), var(--edge-hi);
}

.tr-timeline-title {
  font-size: 18px;
  margin-bottom: 16px;
}

.tr-realtime-note {
  text-align: center;
  font-size: 12px;
  color: var(--ink4);
  margin-top: 8px;
  padding: 6px;
}

/* ================================================================
   23. ENTRANCE ANIMATIONS
   ================================================================ */
.ani {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.7s var(--ease) forwards;
}

.d1 { animation-delay: 0.1s; }
.d2 { animation-delay: 0.2s; }
.d3 { animation-delay: 0.35s; }
.d4 { animation-delay: 0.45s; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   23. MOBILE — max 640px
   ================================================================ */
@media (max-width: 640px) {
  /* Header */
  .hdr-inner { height: auto; flex-wrap: wrap; padding: 12px 0; gap: 8px; }
  .hdr-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    order: 2;
  }
  .hdr-nav a {
    text-align: center;
    padding: 10px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink3);
    background: var(--bg2);
    border-radius: var(--radius-sm);
  }
  .hdr-nav a:hover, .hdr-nav a:active {
    background: var(--or);
    color: var(--wh);
  }
  .logo { order: 1; }

  /* Hero */
  .hero { padding: 40px 0 28px; }
  .hero-copy { font-size: 15px; margin-bottom: 24px; }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-btns .btn { justify-content: center; }

  /* Stats */
  .stats-bar { gap: 8px; padding-bottom: 40px; }
  .si { padding: 16px 8px; }
  .si .num { font-size: 22px; }

  /* Sections */
  .why-section { padding: 50px 0; }
  .steps-section { padding: 50px 20px; }
  .paket-section { padding: 50px 0; }

  /* Info grid */
  .info-grid { grid-template-columns: 1fr; }

  /* Stepper mobile */
  .stp-l { display: none; }
  .stp-line { width: 24px; margin: 0 4px; }

  /* Booking mobile */
  .bk-wrap { padding: 20px 0 40px; }
  .bk-card { padding: 24px 18px; border-radius: var(--radius-lg); }
  .bk-card-head h2 { font-size: 22px; }
  .bk-card-head p { font-size: 13px; }
  .bk-row { grid-template-columns: 1fr; gap: 16px; }
  .bk-actions { flex-direction: column-reverse; gap: 10px; }
  .bk-actions .btn { width: 100%; justify-content: center; min-height: 48px; }
  .bk-actions-end { flex-direction: column; }
  .bk-btn-next { padding: 16px 20px; }
  .bk-pay-rek { font-size: 20px; letter-spacing: 1px; }
  .bk-pay-amount-value { font-size: 28px; }
  .bk-pay-info { padding: 18px; }
  .bk-pay-bank { padding: 16px; }
  .bk-upload-zone { padding: 28px 16px; }
  .bk-agree { padding: 14px; gap: 10px; }
  .bk-agree span { font-size: 12px; }
  .bk-date-section { margin-bottom: 20px; padding-bottom: 18px; }

  /* Success mobile */
  .suc-wrap { padding: 36px 0 48px; }
  .suc-title { font-size: 24px; }
  .suc-card { padding: 22px 18px; }
  .suc-actions { flex-direction: column; align-items: stretch; }
  .suc-actions .btn { justify-content: center; }

  /* Tracking mobile */
  .tr-wrap { padding: 20px 0 40px; }
  .tr-header h2 { font-size: 24px; }
  .tr-search input { font-size: 14px; padding: 14px 10px; }
  .tr-search-btn { padding: 10px 16px; font-size: 14px; }
  .tr-info-card { padding: 18px; }
  .tr-info-head h3 { font-size: 18px; }
  .tr-upload-card { padding: 18px; }
  .tr-upload-rek { font-size: 18px; letter-spacing: 1px; }
  .tr-cancelled-card { padding: 24px 18px; }
  .tr-timeline-card { padding: 18px; }
  .tr-uploaded-card { padding: 16px 18px; }

  /* Footer mobile */
  .ftr-inner {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  .ftr-inner a { margin-left: 0; margin-right: 16px; }

  /* Form inputs — prevent iOS zoom */
  .fm input[type="text"],
  .fm input[type="tel"],
  .fm input[type="date"],
  .tr-search input {
    font-size: 16px;
  }
}

/* ================================================================
   24. SMALL PHONES — max 360px
   ================================================================ */
@media (max-width: 360px) {
  .container { padding: 0 14px; }
  /* Margin negatif harus sama dengan padding container,
     kalau tidak blok ini meluber keluar layar */
  .steps-section { margin: 0 -14px; padding: 44px 14px; }
  .bk-card { padding: 20px 14px; }
  .bk-pay-rek { font-size: 18px; letter-spacing: 0.5px; }
  .bk-pay-amount-value { font-size: 24px; }
  .bk-pay-info { padding: 14px; }
  .bk-pay-bank { padding: 14px; }
  .hdr-nav a { font-size: 11px; padding: 8px 2px; }
  .stp-c { width: 28px; height: 28px; font-size: 12px; }
  .stp-line { width: 18px; margin: 0 2px; }
  .tr-upload-rek { font-size: 16px; }
  .tr-upload-bank { padding: 12px; }
  .suc-icon { width: 60px; height: 60px; }
  .suc-icon svg { width: 32px; height: 32px; }
}

/* ================================================================
   25. TABLET — min 641px
   ================================================================ */
@media (min-width: 641px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  #landing-pkg.pkg-grid { grid-template-columns: repeat(3, 1fr); }
  .port-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .contact-card-wide { grid-column: 1 / -1; }
}

/* ================================================================
   25. DESKTOP — min 1024px
   ================================================================ */
@media (min-width: 1024px) {
  .hero { padding: 80px 0 48px; }
  .hero h1 { font-size: 44px; }
  .hero-copy { font-size: 17px; }
  .why-grid { grid-template-columns: repeat(4, 1fr); }
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
  .steps-section { margin: 0 -20px; padding: 100px 40px; }
}

/* ================================================================
   27. GUARD — Perangkat Sentuh & Aksesibilitas
   ================================================================ */

/* Di HP/tablet, :hover bisa "nyangkut" setelah di-tap.
   Efek angkat hanya diaktifkan di perangkat yang benar-benar
   punya mouse. Bayangan diam tetap tampil di semua perangkat. */
@media (hover: none) {
  .si:hover,
  .why-card:hover,
  .pkg:hover,
  .port-item:hover,
  .contact-card:hover,
  .step-card:hover,
  .btn-or:hover,
  .btn-out:hover {
    transform: none;
  }
  .why-card:hover .why-icon { transform: none; }
  .port-item:hover img      { transform: none; }

  /* Paket terpilih tetap terangkat — ini penanda status, bukan hover */
  .pkg.sel { transform: translateY(-4px); }
}

/* Fokus keyboard terlihat jelas */
.btn:focus-visible,
.hdr-nav a:focus-visible,
.pkg:focus-visible,
.contact-card:focus-visible,
.tr-search input:focus-visible,
.suc-copy-btn:focus-visible,
.tr-upload-copy:focus-visible {
  outline: 3px solid var(--or);
  outline-offset: 3px;
}

/* Hormati preferensi pengguna yang mematikan animasi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ani { opacity: 1; transform: none; }
  .si:hover, .why-card:hover, .pkg:hover, .port-item:hover,
  .contact-card:hover, .step-card:hover,
  .btn-or:hover, .btn-out:hover { transform: none; }
}