/* =========================================================================
   Jastip Nabi — Stylesheet publik (tema Biru & Putih)
   ========================================================================= */

:root{
  /* Latar & permukaan */
  --bg:            #f6f9ff;
  --bg-soft:       #eef4ff;
  --surface:       #ffffff;
  --surface-2:     #f1f6ff;
  --surface-3:     #e8f0fe;
  --border:        #dfe8f5;
  --border-strong: #c5d6ee;

  /* Teks */
  --text:  #0d1b33;
  --muted: #4d5f7a;
  --dim:   #7c8ba3;

  /* Warna merek */
  --blue-900: #10275c;
  --blue-800: #14357f;
  --blue-700: #1b4bb8;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-400: #60a5fa;
  --blue-300: #93c5fd;
  --blue-100: #dbeafe;
  --blue-50:  #eff6ff;

  --accent:        #2563eb;
  --accent-hover:  #1d4ed8;
  --accent-text:   #1b4bb8;
  --accent-soft:   #eaf1ff;
  --accent-border: #bcd3f7;

  /* Warna status */
  --sky:   #0ea5e9;
  --cyan:  #06b6d4;
  --teal:  #0d9488;
  --green: #16a34a;
  --amber: #d97706;
  --red:   #dc2626;
  --slate: #64748b;

  /* Gradien */
  --grad:      linear-gradient(135deg,#1d4ed8 0%,#2563eb 45%,#38bdf8 100%);
  --grad-deep: linear-gradient(135deg,#10275c 0%,#1b4bb8 60%,#2563eb 100%);
  --grad-soft: linear-gradient(135deg,#eaf1ff 0%,#f2f8ff 100%);

  /* Bentuk & bayangan */
  --radius:    18px;
  --radius-sm: 12px;
  --shadow-sm: 0 2px 8px rgba(16,39,92,.06);
  --shadow:    0 14px 38px rgba(16,39,92,.10);
  --shadow-lg: 0 24px 60px rgba(16,39,92,.16);

  --font: 'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --wrap: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Sorot cahaya biru lembut di latar */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(780px 540px at 10% -12%, rgba(59,130,246,.20), transparent 64%),
    radial-gradient(680px 470px at 94% -4%,  rgba(14,165,233,.16), transparent 62%),
    radial-gradient(620px 600px at 50% 106%, rgba(37,99,235,.07),  transparent 60%);
}
body::after{
  content:'';
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.7;
  background-image:linear-gradient(rgba(37,99,235,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(37,99,235,.05) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 0%,#000 18%,transparent 76%);
  -webkit-mask-image:radial-gradient(circle at 50% 0%,#000 18%,transparent 76%);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

input[type="checkbox"], input[type="radio"]{ accent-color:var(--accent); }

::selection{ background:var(--blue-100); color:var(--blue-900); }

/* Scrollbar */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg-soft); }
::-webkit-scrollbar-thumb{ background:var(--blue-300); border-radius:99px; border:3px solid var(--bg-soft); }
::-webkit-scrollbar-thumb:hover{ background:var(--blue-400); }

/* -------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:22px; }

.section{ padding:84px 0; position:relative; }
.section--tight{ padding:56px 0; }
.section--alt{ background:var(--surface); border-block:1px solid var(--border); }

.section-head{ max-width:660px; margin-bottom:40px; }
.section-head.center{ margin-inline:auto; text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--accent-text); background:var(--accent-soft);
  border:1px solid var(--accent-border);
  padding:6px 14px; border-radius:99px; margin-bottom:18px;
}

h1,h2,h3,h4{ margin:0; line-height:1.2; letter-spacing:-.02em; font-weight:800; color:var(--blue-900); }
h2.section-title{ font-size:clamp(28px,4vw,42px); margin-bottom:14px; }
h3{ font-size:19px; }

.section-sub{ color:var(--muted); font-size:15.5px; margin:0; }

.gradient-text{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Label huruf kapital kecil berwarna aksen */
.label-caps{
  font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase;
  font-weight:800; color:var(--accent-text);
}
.link-accent{ color:var(--accent); text-decoration:underline; }
.link-accent:hover{ color:var(--accent-hover); }

/* -------------------------------------------------------------------------
   Navbar
   ------------------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  background:rgba(255,255,255,.82);
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.nav.scrolled{ background:rgba(255,255,255,.96); border-bottom-color:var(--border); box-shadow:var(--shadow-sm); }

.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:70px; gap:20px; }

.brand{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:17.5px; letter-spacing:-.4px; color:var(--blue-900); }
.brand-mark{
  width:38px; height:38px; border-radius:12px; background:var(--grad);
  display:grid; place-items:center; font-size:18px; flex-shrink:0; color:#fff;
  box-shadow:0 6px 18px rgba(37,99,235,.35);
}
.brand small{ display:block; font-size:10.5px; font-weight:700; color:var(--dim); letter-spacing:.6px; line-height:1; margin-top:2px; }

/* Logo yang diunggah admin (menggantikan .brand-mark) */
.brand-logo{
  height:40px; width:auto; max-width:190px;
  object-fit:contain; flex-shrink:0; display:block;
}
.brand-logo--lg{ height:56px; max-width:230px; }
@media(max-width:520px){
  .brand-logo{ height:34px; max-width:150px; }
  .brand-logo--lg{ height:46px; max-width:190px; }
}

.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  padding:9px 15px; border-radius:9px; font-size:14px; font-weight:600; color:var(--muted);
  transition:color .18s, background .18s;
}
.nav-links a:hover, .nav-links a.active{ color:var(--accent-text); background:var(--accent-soft); }

.nav-toggle{
  display:none; width:42px; height:42px; border-radius:11px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border); color:var(--blue-900);
  align-items:center; justify-content:center; font-size:19px;
}

@media(max-width:900px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute; top:70px; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; border-bottom:1px solid var(--border); box-shadow:var(--shadow);
    padding:14px 22px 20px;
    transform:translateY(-14px); opacity:0; visibility:hidden; transition:all .22s ease;
  }
  .nav-links.open{ transform:translateY(0); opacity:1; visibility:visible; }
  .nav-links a{ padding:13px 14px; font-size:15px; }
  .nav-links .btn{ margin-top:8px; justify-content:center; }
}

/* -------------------------------------------------------------------------
   Tombol
   ------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px; border-radius:11px; border:1px solid transparent;
  font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer;
  transition:transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s, color .2s;
  white-space:nowrap; line-height:1.3;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{ background:var(--grad); color:#fff; box-shadow:0 8px 22px rgba(37,99,235,.28); }
.btn-primary:hover{ box-shadow:0 12px 30px rgba(37,99,235,.40); transform:translateY(-2px); }

.btn-ghost{ background:var(--surface); color:var(--blue-800); border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.btn-ghost:hover{ background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent-text); }

.btn-wa{ background:#25D366; color:#05341a; box-shadow:0 8px 22px rgba(37,211,102,.30); }
.btn-wa:hover{ background:#1fbe5b; transform:translateY(-2px); }

.btn-lg{ padding:15px 30px; font-size:15.5px; border-radius:13px; }
.btn-sm{ padding:8px 15px; font-size:13px; border-radius:9px; }
.btn-block{ width:100%; }
.btn:disabled,.btn.is-disabled{ opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none; }

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero{ padding:76px 0 68px; position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center; }
@media(max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:44px; } }

.hero h1{
  font-size:clamp(34px,5.6vw,60px);
  line-height:1.08; letter-spacing:-.032em; margin-bottom:20px;
}
.hero p.lead{ font-size:clamp(15.5px,1.7vw,18px); color:var(--muted); max-width:540px; margin:0 0 32px; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-bottom:40px; }

.hero-stats{ display:flex; flex-wrap:wrap; gap:14px; }
.stat{
  flex:1 1 130px; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:16px 18px; box-shadow:var(--shadow-sm);
}
.stat b{ display:block; font-size:24px; font-weight:800; letter-spacing:-.5px; color:var(--accent); }
.stat span{ font-size:12px; color:var(--dim); font-weight:700; letter-spacing:.3px; }

/* Kartu tiket dekoratif di hero */
.hero-visual{ position:relative; display:grid; place-items:center; min-height:340px; }
.ticket-card{
  width:100%; max-width:390px; position:relative;
  background:var(--surface);
  border:1px solid var(--border); border-radius:22px; padding:26px;
  box-shadow:var(--shadow-lg);
  animation:floaty 6s ease-in-out infinite;
}
.ticket-card::before,.ticket-card::after{
  content:''; position:absolute; width:26px; height:26px; border-radius:50%;
  background:var(--bg); border:1px solid var(--border);
  top:calc(50% - 13px);
}
.ticket-card::before{ left:-14px; clip-path:inset(0 0 0 50%); }
.ticket-card::after{ right:-14px; clip-path:inset(0 50% 0 0); }

.ticket-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.ticket-label{ font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--accent-text); font-weight:800; }
.ticket-card h3{ font-size:23px; margin:10px 0 4px; letter-spacing:-.5px; }
.ticket-card .venue{ font-size:13.5px; color:var(--muted); }
.ticket-divider{
  margin:22px -26px; height:1px;
  background:repeating-linear-gradient(90deg,var(--border-strong) 0 8px,transparent 8px 16px);
}
.ticket-rows{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ticket-rows div span{ display:block; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--dim); font-weight:800; }
.ticket-rows div b{ font-size:14px; color:var(--blue-900); }

.glow-orb{
  position:absolute; border-radius:50%; filter:blur(72px); opacity:.55; z-index:-1;
  animation:floaty 9s ease-in-out infinite;
}
.glow-orb.a{ width:240px; height:240px; background:var(--blue-300); top:-28px; right:6%; }
.glow-orb.b{ width:210px; height:210px; background:#7dd3fc; bottom:-20px; left:2%; animation-delay:-4s; }

@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }

/* Marquee */
.marquee{
  border-block:1px solid var(--border); background:var(--surface);
  overflow:hidden; padding:15px 0; margin-top:8px;
}
.marquee-track{ display:flex; gap:52px; width:max-content; animation:scroll-x 32s linear infinite; }
.marquee-track span{
  display:inline-flex; align-items:center; gap:11px; white-space:nowrap;
  font-size:13.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--dim);
}
.marquee-track span i{ color:var(--accent); font-style:normal; }
@keyframes scroll-x{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* -------------------------------------------------------------------------
   Kartu event
   ------------------------------------------------------------------------- */
.event-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:24px; }

.event-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .26s cubic-bezier(.4,0,.2,1), border-color .26s, box-shadow .26s;
}
.event-card:hover{ transform:translateY(-6px); border-color:var(--blue-300); box-shadow:var(--shadow-lg); }

.event-poster{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--grad-soft); }
.event-poster img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.event-card:hover .event-poster img{ transform:scale(1.06); }
.event-poster .placeholder{
  width:100%; height:100%; display:grid; place-items:center; font-size:52px; opacity:.35;
}
.event-poster::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(13,27,51,.55) 2%,rgba(13,27,51,.06) 38%,transparent 62%);
}

.event-badges{ position:absolute; top:13px; left:13px; right:13px; display:flex; gap:7px; flex-wrap:wrap; z-index:2; }

.event-body{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; gap:12px; }
.event-body h3{ font-size:17.5px; letter-spacing:-.3px; line-height:1.3; }
.event-meta{ display:flex; flex-direction:column; gap:7px; font-size:13px; color:var(--muted); }
.event-meta div{ display:flex; align-items:center; gap:8px; }
.event-meta i{ font-style:normal; opacity:.8; width:16px; text-align:center; flex-shrink:0; }

.event-price{
  margin-top:auto; padding-top:14px; border-top:1px dashed var(--border-strong);
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
}
.event-price small{ display:block; font-size:10.5px; letter-spacing:1.1px; text-transform:uppercase; color:var(--dim); font-weight:800; }
.event-price b{ font-size:17px; letter-spacing:-.3px; color:var(--accent); }

/* Badge */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:99px; font-size:11px; font-weight:800; letter-spacing:.3px;
  border:1px solid; white-space:nowrap;
}
.badge-blue  { background:#eaf1ff; border-color:#bcd3f7; color:#1b4bb8; }
.badge-indigo{ background:#e8ecff; border-color:#c2caf9; color:#3538cd; }
.badge-sky   { background:#e6f6fe; border-color:#b6e5fb; color:#0369a1; }
.badge-cyan  { background:#e2f8fb; border-color:#a9e9f2; color:#0e7490; }
.badge-teal  { background:#e0f7f3; border-color:#a5e5da; color:#0f766e; }
.badge-green { background:#e6f8ec; border-color:#aee5c1; color:#15803d; }
.badge-amber { background:#fef4e3; border-color:#f7d9a4; color:#b45309; }
.badge-red   { background:#fdeaea; border-color:#f6bfbf; color:#b91c1c; }
.badge-slate { background:#eef2f7; border-color:#d3dce7; color:#475569; }

.badge-live::before{
  content:''; width:6px; height:6px; border-radius:50%; background:currentColor;
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.3; transform:scale(.75) } }

/* Badge di atas poster perlu latar solid agar terbaca */
.event-badges .badge{ box-shadow:0 2px 8px rgba(13,27,51,.18); }

/* -------------------------------------------------------------------------
   Countdown
   ------------------------------------------------------------------------- */
.countdown{ display:flex; gap:9px; flex-wrap:wrap; }
.countdown-box{
  min-width:62px; text-align:center; padding:10px 8px;
  background:var(--surface); border:1px solid var(--accent-border); border-radius:11px;
  box-shadow:var(--shadow-sm);
}
.countdown-box b{ display:block; font-size:22px; font-weight:800; letter-spacing:-.5px; font-variant-numeric:tabular-nums; color:var(--accent); }
.countdown-box span{ font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--dim); font-weight:800; }

/* -------------------------------------------------------------------------
   Kartu umum / panel
   ------------------------------------------------------------------------- */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-sm);
}
.card-hover{ transition:transform .24s, border-color .24s, box-shadow .24s; }
.card-hover:hover{ transform:translateY(-5px); border-color:var(--blue-300); box-shadow:var(--shadow); }

/* Kartu bernuansa aksen (pengganti gaya inline lama) */
.card-accent{ background:var(--grad-soft); border-color:var(--accent-border); }
.card-warning{ background:#fffaf0; border-color:#f7d9a4; }

.grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:22px; }
.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:22px; }

.icon-badge{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  font-size:22px; background:var(--accent-soft); border:1px solid var(--accent-border); margin-bottom:16px;
}

/* Langkah / step */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; }
.step{ position:relative; padding-top:12px; }
.step-num{
  width:44px; height:44px; border-radius:13px; background:var(--grad); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:17px; margin-bottom:16px;
  box-shadow:0 8px 20px rgba(37,99,235,.30);
}
.step h3{ font-size:17px; margin-bottom:8px; }
.step p{ margin:0; color:var(--muted); font-size:14px; }

/* -------------------------------------------------------------------------
   Formulir
   ------------------------------------------------------------------------- */
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.form-grid .full{ grid-column:1 / -1; }
@media(max-width:680px){ .form-grid{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:13px; font-weight:700; color:var(--blue-800); letter-spacing:.2px; }
.field label .req{ color:var(--red); }
.field .hint{ font-size:11.5px; color:var(--dim); line-height:1.5; }
.field .error{ font-size:12px; color:var(--red); font-weight:600; }

.input,select,textarea{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--border-strong); background:#fff; color:var(--text);
  font-family:inherit; font-size:14.5px; outline:none;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.input::placeholder,textarea::placeholder{ color:#9babc0; }
.input:focus,select:focus,textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.input.is-invalid,select.is-invalid{ border-color:var(--red); box-shadow:0 0 0 3px rgba(220,38,38,.12); }
textarea{ resize:vertical; min-height:100px; }

select{
  appearance:none; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d5f7a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
}
select option{ background:#fff; color:var(--text); }

.input-prefix{ position:relative; display:flex; align-items:center; }
.input-prefix span{
  position:absolute; left:14px; font-size:14px; color:var(--muted); font-weight:700; pointer-events:none;
}
.input-prefix .input{ padding-left:44px; }

/* Pilihan kartu (radio) */
.choice-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.choice{ position:relative; }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice label{
  display:block; cursor:pointer; padding:15px 17px; border-radius:var(--radius-sm);
  border:1.5px solid var(--border-strong); background:#fff;
  transition:all .18s ease; height:100%;
}
.choice label b{ display:block; font-size:14.5px; margin-bottom:4px; color:var(--blue-900); }
.choice label small{ display:block; font-size:12px; color:var(--muted); line-height:1.5; font-weight:500; }
.choice input:checked + label{
  border-color:var(--accent); background:var(--accent-soft);
  box-shadow:0 0 0 3px rgba(37,99,235,.13);
}
.choice input:focus-visible + label{ outline:2px solid var(--sky); outline-offset:2px; }

/* Stepper jumlah */
.qty-stepper{ display:flex; align-items:center; width:fit-content; border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow:hidden; background:#fff; }
.qty-stepper button{
  width:44px; height:46px; border:none; background:var(--surface-2); color:var(--accent-text);
  font-size:20px; cursor:pointer; font-family:inherit; font-weight:700; transition:background .16s;
}
.qty-stepper button:hover:not(:disabled){ background:var(--accent-soft); }
.qty-stepper button:disabled{ opacity:.35; cursor:not-allowed; }
.qty-stepper input{
  width:64px; height:46px; text-align:center; border:none; background:#fff;
  color:var(--text); font-size:16px; font-weight:800; font-family:inherit; outline:none;
  -moz-appearance:textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Upload */
.dropzone{
  border:1.5px dashed var(--border-strong); border-radius:var(--radius-sm);
  padding:26px 20px; text-align:center; cursor:pointer;
  background:var(--surface-2); transition:all .2s;
}
.dropzone:hover,.dropzone.dragover{ border-color:var(--accent); background:var(--accent-soft); }
.dropzone input{ display:none; }
.dropzone .dz-icon{ font-size:30px; margin-bottom:8px; opacity:.8; }
.dropzone b{ display:block; font-size:14px; margin-bottom:4px; color:var(--blue-900); }
.dropzone small{ color:var(--dim); font-size:12px; }
.dz-preview{ display:none; margin-top:14px; align-items:center; gap:12px; text-align:left; }
.dz-preview.show{ display:flex; }
.dz-preview img{ width:52px; height:52px; object-fit:cover; border-radius:9px; border:1px solid var(--border); }
.dz-preview .dz-name{ font-size:13px; font-weight:700; word-break:break-all; }
.dz-preview .dz-size{ font-size:11.5px; color:var(--dim); }

/* Ringkasan biaya */
.summary{
  background:var(--grad-soft);
  border:1px solid var(--accent-border); border-radius:var(--radius); padding:22px;
}
.summary h4{ font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color:var(--accent-text); margin-bottom:16px; }
.summary-row{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; font-size:14px; }
.summary-row span{ color:var(--muted); }
.summary-row b{ font-weight:700; color:var(--blue-900); }
.summary-total{
  margin-top:12px; padding-top:15px; border-top:1px solid var(--accent-border);
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
}
.summary-total span{ font-size:13px; color:var(--muted); }
.summary-total b{ font-size:22px; letter-spacing:-.5px; color:var(--accent); }
.summary-divider{ border-top:1px dashed var(--accent-border); margin-top:12px; padding-top:14px; }

/* Daftar rekening tujuan transfer */
.account-list{ display:grid; gap:10px; }
.account-item{
  padding:13px 15px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface-2);
  transition:border-color .18s, background .18s;
}
.account-item:hover{ border-color:var(--accent-border); background:var(--accent-soft); }

/* -------------------------------------------------------------------------
   Alert
   ------------------------------------------------------------------------- */
.alert{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 17px; border-radius:var(--radius-sm); font-size:14px; line-height:1.6;
  border:1px solid; margin-bottom:18px;
}
.alert i{ font-style:normal; font-size:17px; line-height:1.4; flex-shrink:0; }
.alert-success{ background:#e9f9ef; border-color:#b3e6c6; color:#166534; }
.alert-error  { background:#fdecec; border-color:#f5c2c2; color:#991b1b; }
.alert-warning{ background:#fff7e8; border-color:#f6d79c; color:#92400e; }
.alert-info   { background:#eaf1ff; border-color:#bcd3f7; color:#1b4bb8; }
.alert ul{ margin:6px 0 0; padding-left:18px; }
.alert a{ color:inherit; text-decoration:underline; font-weight:700; }

/* -------------------------------------------------------------------------
   FAQ (accordion)
   ------------------------------------------------------------------------- */
.faq-item{
  border:1px solid var(--border); border-radius:var(--radius-sm);
  margin-bottom:12px; overflow:hidden; background:var(--surface);
  box-shadow:var(--shadow-sm); transition:border-color .2s, box-shadow .2s;
}
.faq-item.open{ border-color:var(--accent-border); box-shadow:var(--shadow); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:17px 20px; background:none; border:none; cursor:pointer;
  color:var(--blue-900); font-family:inherit; font-size:15px; font-weight:700; text-align:left;
}
.faq-q .chev{ transition:transform .25s; flex-shrink:0; color:var(--accent); font-size:13px; }
.faq-item.open .chev{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a > div{ padding:0 20px 18px; color:var(--muted); font-size:14px; }

/* -------------------------------------------------------------------------
   Timeline status pesanan
   ------------------------------------------------------------------------- */
.timeline{ position:relative; padding-left:30px; }
.timeline::before{
  content:''; position:absolute; left:8px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(to bottom,var(--accent),var(--blue-100));
}
.timeline-item{ position:relative; padding-bottom:22px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:''; position:absolute; left:-27px; top:5px; width:12px; height:12px; border-radius:50%;
  background:var(--accent); border:2.5px solid #fff; box-shadow:0 0 0 2px var(--accent-border);
}
.timeline-item .tl-time{ font-size:11.5px; color:var(--dim); font-weight:700; }
.timeline-item .tl-title{ font-size:14.5px; font-weight:700; margin:2px 0 3px; color:var(--blue-900); }
.timeline-item .tl-note{ font-size:13.5px; color:var(--muted); }

/* -------------------------------------------------------------------------
   Daftar detail (key–value)
   ------------------------------------------------------------------------- */
.detail-list{ display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.detail-list > div{ display:flex; justify-content:space-between; gap:16px; padding:13px 17px; background:#fff; font-size:14px; }
.detail-list > div > span{ color:var(--muted); flex-shrink:0; }
.detail-list > div > b{ text-align:right; font-weight:700; word-break:break-word; color:var(--blue-900); }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.footer{ border-top:1px solid var(--border); background:var(--surface); padding:54px 0 26px; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; margin-bottom:38px; }
@media(max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:30px; } }
.footer h4{ font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim); margin-bottom:15px; }
.footer p{ color:var(--muted); font-size:14px; margin:14px 0 0; max-width:380px; }
.footer-links{ display:flex; flex-direction:column; gap:10px; }
.footer-links a{ color:var(--muted); font-size:14px; transition:color .18s; }
.footer-links a:hover{ color:var(--accent); }
.footer-bottom{
  border-top:1px solid var(--border); padding-top:22px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:13px; color:var(--dim);
}

/* -------------------------------------------------------------------------
   Tombol WhatsApp mengambang (mendukung lebih dari satu nomor)
   ------------------------------------------------------------------------- */
.fab-wrap{ position:fixed; right:20px; bottom:20px; z-index:70; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }

.fab-menu{
  display:flex; flex-direction:column; gap:8px; align-items:flex-end;
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.96);
  transform-origin:bottom right; transition:all .2s cubic-bezier(.22,1,.36,1);
}
.fab-wrap.open .fab-menu{ opacity:1; visibility:visible; transform:none; }

.fab-item{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--border); border-radius:99px;
  padding:9px 16px 9px 12px; box-shadow:var(--shadow);
  font-size:13.5px; font-weight:700; color:var(--blue-900);
  transition:transform .16s, border-color .16s;
}
.fab-item:hover{ transform:translateX(-3px); border-color:#25D366; }
.fab-item .dot{
  width:26px; height:26px; border-radius:50%; background:#25D366; color:#fff;
  display:grid; place-items:center; font-size:14px; flex-shrink:0;
}
.fab-item small{ display:block; font-size:11px; color:var(--dim); font-weight:600; }

.fab-wa{
  width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:grid; place-items:center; font-size:26px; cursor:pointer; border:none;
  box-shadow:0 10px 26px rgba(37,211,102,.42); transition:transform .2s;
}
.fab-wa:hover{ transform:scale(1.07); }
.fab-wrap.open .fab-wa{ transform:rotate(90deg); }

/* -------------------------------------------------------------------------
   Halaman kosong / empty state
   ------------------------------------------------------------------------- */
.empty{ text-align:center; padding:64px 24px; border:1.5px dashed var(--border-strong); border-radius:var(--radius); background:var(--surface); }
.empty .emoji{ font-size:52px; margin-bottom:16px; opacity:.7; }
.empty h3{ margin-bottom:8px; }
.empty p{ color:var(--muted); margin:0 auto; max-width:420px; font-size:14.5px; }

/* -------------------------------------------------------------------------
   Utilitas
   ------------------------------------------------------------------------- */
.text-center{ text-align:center; }
.text-muted{ color:var(--muted); }
.text-dim{ color:var(--dim); }
.text-accent{ color:var(--accent); }
.mt-0{ margin-top:0 } .mt-1{ margin-top:8px } .mt-2{ margin-top:16px } .mt-3{ margin-top:24px } .mt-4{ margin-top:32px }
.mb-0{ margin-bottom:0 } .mb-1{ margin-bottom:8px } .mb-2{ margin-bottom:16px } .mb-3{ margin-bottom:24px } .mb-4{ margin-bottom:32px }
.flex{ display:flex } .items-center{ align-items:center } .justify-between{ justify-content:space-between }
.gap-1{ gap:8px } .gap-2{ gap:16px } .wrap-flex{ flex-wrap:wrap }
.hide-sm{ display:initial }
@media(max-width:640px){ .hide-sm{ display:none } }

/* Animasi masuk saat di-scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}