/* =========================================================================
   Jastip Nabi — Stylesheet publik
   Tema Bluesky (langit) · mendukung mode terang & gelap
   ========================================================================= */

/* -------------------------------------------------------------------------
   Token warna — MODE TERANG (bawaan)
   ------------------------------------------------------------------------- */
:root{
  --bg:            #f4fafe;
  --bg-soft:       #e8f4fd;
  --surface:       #ffffff;
  --surface-2:     #f0f8fe;
  --surface-3:     #dceffb;
  --border:        #d8e8f4;
  --border-strong: #b9d8ec;

  --text:  #0b2239;
  --muted: #47607a;
  --dim:   #7891a8;

  --sky-900: #0b3a5c;
  --sky-800: #075985;
  --sky-700: #0369a1;
  --sky-600: #0284c7;
  --sky-500: #0ea5e9;
  --sky-400: #38bdf8;
  --sky-300: #7dd3fc;
  --sky-100: #e0f2fe;
  --sky-50:  #f0f9ff;

  --accent:        #0284c7;
  --accent-hover:  #0369a1;
  --accent-text:   #0369a1;
  --accent-soft:   #e5f4fd;
  --accent-border: #b3ddf5;

  --teal:  #0d9488;
  --green: #16a34a;
  --amber: #d97706;
  --red:   #dc2626;
  --slate: #64748b;

  --grad:      linear-gradient(135deg,#0369a1 0%,#0ea5e9 48%,#38bdf8 100%);
  --grad-deep: linear-gradient(135deg,#0b3a5c 0%,#0369a1 60%,#0ea5e9 100%);
  --grad-soft: linear-gradient(135deg,#e5f4fd 0%,#f2fafe 100%);

  --nav-bg:      rgba(255,255,255,.84);
  --nav-bg-solid:rgba(255,255,255,.97);

  --radius:    18px;
  --radius-sm: 12px;
  --shadow-sm: 0 2px 8px rgba(9,49,80,.06);
  --shadow:    0 14px 38px rgba(9,49,80,.10);
  --shadow-lg: 0 24px 60px rgba(9,49,80,.16);

  --glow-1: rgba(56,189,248,.22);
  --glow-2: rgba(14,165,233,.16);
  --glow-3: rgba(2,132,199,.07);
  --grid-line: rgba(2,132,199,.05);

  --poster-veil: rgba(11,34,57,.55);
  --arrow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347607a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

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

  color-scheme: light;
}

/* -------------------------------------------------------------------------
   Token warna — MODE GELAP
   Dipakai bila pengaturan sistem gelap DAN pengguna belum memilih terang,
   atau bila pengguna memilih gelap secara eksplisit.
   ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:            #0a1524;
    --bg-soft:       #0f1d31;
    --surface:       #122035;
    --surface-2:     #18293f;
    --surface-3:     #1f3450;
    --border:        #23374f;
    --border-strong: #33506f;

    --text:  #e6f0fa;
    --muted: #a2b8ce;
    --dim:   #7590ab;

    --accent:        #38bdf8;
    --accent-hover:  #7dd3fc;
    --accent-text:   #7dd3fc;
    --accent-soft:   rgba(56,189,248,.13);
    --accent-border: rgba(56,189,248,.34);

    --grad-soft: linear-gradient(135deg,rgba(56,189,248,.14) 0%,rgba(14,165,233,.05) 100%);

    --nav-bg:       rgba(10,21,36,.82);
    --nav-bg-solid: rgba(10,21,36,.97);

    --shadow-sm: 0 2px 8px rgba(0,0,0,.32);
    --shadow:    0 14px 38px rgba(0,0,0,.45);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.55);

    --glow-1: rgba(56,189,248,.20);
    --glow-2: rgba(14,165,233,.14);
    --glow-3: rgba(125,211,252,.06);
    --grid-line: rgba(125,211,252,.05);

    --poster-veil: rgba(4,10,18,.72);
    --arrow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a2b8ce' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

    color-scheme: dark;
  }
}

:root[data-theme="dark"]{
  --bg:            #0a1524;
  --bg-soft:       #0f1d31;
  --surface:       #122035;
  --surface-2:     #18293f;
  --surface-3:     #1f3450;
  --border:        #23374f;
  --border-strong: #33506f;

  --text:  #e6f0fa;
  --muted: #a2b8ce;
  --dim:   #7590ab;

  --accent:        #38bdf8;
  --accent-hover:  #7dd3fc;
  --accent-text:   #7dd3fc;
  --accent-soft:   rgba(56,189,248,.13);
  --accent-border: rgba(56,189,248,.34);

  --grad-soft: linear-gradient(135deg,rgba(56,189,248,.14) 0%,rgba(14,165,233,.05) 100%);

  --nav-bg:       rgba(10,21,36,.82);
  --nav-bg-solid: rgba(10,21,36,.97);

  --shadow-sm: 0 2px 8px rgba(0,0,0,.32);
  --shadow:    0 14px 38px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);

  --glow-1: rgba(56,189,248,.20);
  --glow-2: rgba(14,165,233,.14);
  --glow-3: rgba(125,211,252,.06);
  --grid-line: rgba(125,211,252,.05);

  --poster-veil: rgba(4,10,18,.72);
  --arrow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a2b8ce' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  color-scheme: dark;
}

*,*::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;
  transition:background-color .3s ease, color .3s ease;
}

/* Sorot cahaya langit di latar */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(780px 540px at 10% -12%, var(--glow-1), transparent 64%),
    radial-gradient(680px 470px at 94% -4%,  var(--glow-2), transparent 62%),
    radial-gradient(620px 600px at 50% 106%, var(--glow-3), transparent 60%);
}
body::after{
  content:'';
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.7;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 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(--accent-soft); color:var(--accent-text); }

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

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

/* Kontainer selebar layar — dipakai navbar, beranda, dan footer supaya
   isinya menempel ke tepi kiri/kanan, bukan mengambang di tengah. */
.wrap-fluid{
  width:100%; max-width:none; margin-inline:auto;
  padding-inline:clamp(18px, 2.2vw, 44px);
}

.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(--text); }
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:linear-gradient(135deg,var(--accent) 0%,var(--sky-400) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.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:var(--nav-bg);
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.nav.scrolled{ background:var(--nav-bg-solid); border-bottom-color:var(--border); box-shadow:var(--shadow-sm); }

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

.brand{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:17.5px; letter-spacing:-.4px; color:var(--text); }
.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(2,132,199,.32);
}
.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-right{ display:flex; align-items:center; gap:10px; }
.nav-tools{ display:flex; align-items:center; gap:8px; }

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

/* Tombol ganti mode terang/gelap */
.theme-toggle{
  width:42px; height:42px; border-radius:11px; cursor:pointer; flex-shrink:0;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  display:grid; place-items:center; font-size:17px; font-family:inherit;
  transition:background .18s, border-color .18s, transform .18s;
}
.theme-toggle:hover{ background:var(--accent-soft); border-color:var(--accent-border); transform:rotate(-12deg); }
.theme-toggle .icon-sun{ display:none; }
.theme-toggle .icon-moon{ display:block; }
:root[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{ display:block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{ display:none; }
}

@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:var(--surface); 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(2,132,199,.28); }
.btn-primary:hover{ box-shadow:0 12px 30px rgba(2,132,199,.42); transform:translateY(-2px); }

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

.btn-wa{ background:#22c55e; color:#04310f; box-shadow:0 8px 22px rgba(34,197,94,.28); }
.btn-wa:hover{ background:#16a34a; color:#fff; 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; }

/* -------------------------------------------------------------------------
   Beranda: sidebar kiri + konten utama
   ------------------------------------------------------------------------- */
.home{ padding-top:30px; }

.home-layout{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:36px;
  align-items:start;
}

/* min-width:0 wajib — tanpa ini isi yang lebar (carousel) memaksa kolom
   melebar melebihi layar dan seluruh halaman jadi meleset ke kanan. */
.home-side,
.home-main{ min-width:0; }

.home-side{
  position:sticky; top:92px;
  display:flex; flex-direction:column; gap:26px;
}

/* Blok perkenalan — sengaja kecil, sebagai pengganti hero lama */
.side-intro{ padding-bottom:22px; border-bottom:1px solid var(--border); }
.side-title{
  font-size:14px; line-height:1.45; font-weight:800;
  letter-spacing:-.01em; margin:0 0 8px; color:var(--text);
}
.side-sub{
  font-size:12.5px; line-height:1.65; color:var(--muted); margin:0;
}

/* Daftar rekomendasi */
.side-heading{
  font-size:11.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--dim); margin-bottom:12px;
}

.rec-list{ display:flex; flex-direction:column; gap:2px; }

.rec-item{
  display:flex; align-items:center; gap:11px;
  padding:8px 10px; border-radius:11px;
  transition:background .16s ease;
}
.rec-item:hover{ background:var(--surface-2); }

.rec-thumb{
  width:36px; height:36px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:var(--grad-soft); border:1px solid var(--border);
  display:grid; place-items:center;
}
.rec-thumb img{ width:100%; height:100%; object-fit:cover; }
.rec-fallback{ font-size:16px; opacity:.6; }

.rec-info{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.rec-name{
  font-size:13.5px; font-weight:700; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rec-meta{ font-size:11.5px; color:var(--dim); }

.side-link-all{
  font-size:12.5px; font-weight:700; color:var(--accent);
  padding:0 10px;
}
.side-link-all:hover{ color:var(--accent-hover); }

/* Layar lebar: beri ruang lebih untuk sidebar dan poster carousel */
@media(min-width:1500px){
  .home-layout{ grid-template-columns:280px minmax(0,1fr); gap:44px; }
  .spot-slide{ padding:54px 60px 58px; min-height:clamp(360px,24vw,460px); }
  .spot-title{ font-size:clamp(28px,2.1vw,40px); max-width:20ch; }
  .spot-sub{ font-size:15.5px; }
}

/* Versi baris geser hanya untuk HP — di layar lebar sidebar kiri yang dipakai */
.rec-wrap--strip{ display:none; }

/* Ponsel & tablet: sidebar turun ke bawah konten */
@media(max-width:960px){
  .home-layout{ grid-template-columns:1fr; gap:32px; }
  .home-side{ position:static; order:2; }
  .home-main{ order:1; }
  .side-intro{ padding-bottom:20px; }
  .rec-list{ gap:0; }

  /* Rekomendasi pindah ke atas daftar event, tetapi hanya di sini.
     Yang di sidebar disembunyikan supaya tidak muncul dua kali. */
  .rec-wrap--side{ display:none; }
  .rec-wrap--strip{ display:block; margin:18px 0 4px; }

  /* Baris mendatar yang bisa digeser jempol */
  .rec-wrap--strip .rec-list{
    flex-direction:row; gap:9px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding:2px 0 10px;
    scrollbar-width:none;
  }
  .rec-wrap--strip .rec-list::-webkit-scrollbar{ display:none; }

  .rec-wrap--strip .rec-item{
    flex:0 0 auto; max-width:200px;
    scroll-snap-align:start;
    padding:8px 14px 8px 8px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--surface);
    box-shadow:var(--shadow-sm);
  }
  .rec-wrap--strip .rec-item:active{ background:var(--surface-2); }
  .rec-wrap--strip .rec-thumb{ width:32px; height:32px; }
  .rec-wrap--strip .rec-name{ font-size:13px; }
  .rec-wrap--strip .rec-meta{ font-size:11px; }

  /* Kartu terakhir: jalan pintas ke daftar lengkap */
  .rec-wrap--strip .rec-more{
    padding-left:16px;
    border-style:dashed;
    border-color:var(--accent-border);
    background:var(--accent-soft);
  }
  .rec-wrap--strip .rec-more .rec-name{ color:var(--accent-text); }
}

/* -------------------------------------------------------------------------
   Pencarian event — menempel di bawah navbar selama daftar digulir
   ------------------------------------------------------------------------- */
.event-find{
  position:sticky; top:70px; z-index:20;   /* navbar 70px, z-index 60 */
  margin-bottom:20px;
  padding:12px 0 14px;
  background:var(--bg);                    /* wajib solid: kartu lewat di belakangnya */
}

.find-box{
  display:flex; align-items:center; gap:10px;
  padding:0 14px;
  border:1.5px solid var(--border-strong); border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.find-box:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}

.find-ico{ font-size:15px; opacity:.65; flex-shrink:0; }

.find-input{
  flex:1; min-width:0;
  border:0; background:none; outline:none;
  font-family:inherit; font-size:15px; font-weight:600; color:var(--text);
  padding:13px 0;
}
.find-input::placeholder{ color:var(--dim); font-weight:500; }
/* Sembunyikan tombol silang bawaan browser — kita punya sendiri */
.find-input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }

.find-clear{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  border:0; cursor:pointer;
  background:var(--surface-3); color:var(--muted);
  font-size:12px; line-height:1;
  display:grid; place-items:center;
}
.find-clear:hover{ background:var(--border-strong); color:var(--text); }

.find-count{
  margin:9px 2px 0;
  font-size:12.5px; font-weight:600; color:var(--dim);
}

.event-none{ padding:48px 24px; }

/* Dipakai script pencarian untuk menyembunyikan kartu / grup / pesan */
.is-hidden{ display:none !important; }

/* Beri jarak dari navbar lengket saat melompat ke #event */
[id="event"]{ scroll-margin-top:96px; }

/* -------------------------------------------------------------------------
   Sorotan event — carousel otomatis
   Gambar event tampil penuh; teks dibaca di atas lapisan gelap.
   ------------------------------------------------------------------------- */
.spot{
  margin-bottom:14px;
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background:var(--surface-3);
  box-shadow:var(--shadow-lg);
  isolation:isolate;
}

.spot-viewport{ overflow:hidden; border-radius:inherit; }

.spot-track{
  display:flex;
  transition:transform .62s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}

.spot-slide{
  min-width:100%;
  position:relative; isolation:isolate;
  display:flex; align-items:center;
  min-height:clamp(300px, 26vw, 420px);
  padding:40px 46px 52px;
}

/* Poster event sebagai latar penuh */
.spot-bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  /* Titik fokus diatur per event dari dashboard (atribut style). */
  object-fit:cover; object-position:center;
}

/* Lapisan gelap agar teks tetap terbaca di atas poster apa pun */
.spot-slide::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(3,10,20,.92) 0%,
    rgba(3,10,20,.80) 34%,
    rgba(3,10,20,.46) 62%,
    rgba(3,10,20,.22) 100%);
}

/* Tanpa poster: pakai gradasi merek sebagai cadangan */
.spot-slide.no-art{ background:var(--grad-deep); }
.spot-slide.no-art::after{ background:none; }

.spot-text{ position:relative; z-index:2; max-width:min(600px,64%); min-width:0; }

.spot-tag{
  display:inline-block; margin-bottom:16px;
  padding:5px 14px; border-radius:99px;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28);
  color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.6px;
  backdrop-filter:blur(6px);
}

.spot-title{
  color:#fff; font-size:clamp(22px,2.6vw,34px); line-height:1.16;
  letter-spacing:-.03em; margin:0 0 12px; max-width:18ch;
  text-shadow:0 2px 18px rgba(0,0,0,.5);
}

.spot-sub{
  color:rgba(255,255,255,.9); font-size:15px; line-height:1.6; margin:0 0 26px;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}

.spot-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; border-radius:11px;
  background:#fff; color:var(--sky-800);
  font-size:14.5px; font-weight:800;
  transition:transform .18s, box-shadow .18s;
  box-shadow:0 8px 22px rgba(2,20,40,.34);
}
.spot-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(2,20,40,.44); }

/* Panah */
.spot-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3);
  color:#fff; font-size:24px; line-height:1; font-family:inherit;
  display:grid; place-items:center;
  backdrop-filter:blur(8px);
  transition:background .18s, transform .18s;
}
.spot-arrow:hover{ background:rgba(255,255,255,.34); }
.spot-arrow.prev{ left:18px; }
.spot-arrow.next{ right:18px; }
.spot-arrow.prev:hover{ transform:translateY(-50%) translateX(-2px); }
.spot-arrow.next:hover{ transform:translateY(-50%) translateX(2px); }

/* Titik indikator */
.spot-dots{
  position:absolute; left:0; right:0; bottom:16px; z-index:3;
  display:flex; justify-content:center; gap:7px;
}
.spot-dots button{
  width:22px; height:4px; border-radius:99px; cursor:pointer; padding:0;
  background:rgba(255,255,255,.38); border:none;
  transition:background .25s, width .25s;
}
.spot-dots button:hover{ background:rgba(255,255,255,.62); }
.spot-dots button.active{ background:#fff; width:34px; }

@media(max-width:900px){
  .spot-slide{ padding:32px 28px 48px; min-height:clamp(260px,46vw,340px); }
  .spot-text{ max-width:100%; }
  /* Layar sempit: gelapkan dari bawah supaya teks tetap terbaca */
  .spot-slide::after{
    background:linear-gradient(180deg,
      rgba(3,10,20,.55) 0%,
      rgba(3,10,20,.72) 45%,
      rgba(3,10,20,.9) 100%);
  }
  .spot-arrow{ width:38px; height:38px; font-size:20px; }
  .spot-arrow.prev{ left:10px; } .spot-arrow.next{ right:10px; }
}
@media(max-width:640px){
  /* Di ponsel panah menimpa teks slide. Cukup andalkan titik indikator
     dan geser jari — panahnya disembunyikan. */
  .spot-arrow{ display:none; }
}

@media(max-width:520px){
  .spot{ border-radius:18px; }
  .spot-slide{ padding:26px 20px 44px; }
  .spot-sub{ font-size:14px; }
  .spot-title{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  .spot-track{ transition:none; }
}

/* -------------------------------------------------------------------------
   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(min(290px,100%),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(--accent-border); 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,var(--poster-veil) 2%,transparent 58%);
}

.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:#e5f4fd; border-color:#b3ddf5; color:#0369a1; }
.badge-indigo{ background:#e8ecff; border-color:#c2caf9; color:#3538cd; }
.badge-sky   { background:#e0f2fe; border-color:#a9ddfa; 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 versi gelap */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .badge-blue  { background:rgba(56,189,248,.15); border-color:rgba(56,189,248,.36); color:#7dd3fc; }
  :root:not([data-theme="light"]) .badge-indigo{ background:rgba(129,140,248,.15); border-color:rgba(129,140,248,.36); color:#a5b4fc; }
  :root:not([data-theme="light"]) .badge-sky   { background:rgba(14,165,233,.15); border-color:rgba(14,165,233,.36); color:#7dd3fc; }
  :root:not([data-theme="light"]) .badge-cyan  { background:rgba(34,211,238,.14); border-color:rgba(34,211,238,.34); color:#67e8f9; }
  :root:not([data-theme="light"]) .badge-teal  { background:rgba(20,184,166,.14); border-color:rgba(20,184,166,.34); color:#5eead4; }
  :root:not([data-theme="light"]) .badge-green { background:rgba(34,197,94,.14);  border-color:rgba(34,197,94,.34);  color:#86efac; }
  :root:not([data-theme="light"]) .badge-amber { background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.34); color:#fcd34d; }
  :root:not([data-theme="light"]) .badge-red   { background:rgba(239,68,68,.14);  border-color:rgba(239,68,68,.34);  color:#fca5a5; }
  :root:not([data-theme="light"]) .badge-slate { background:rgba(148,163,184,.14);border-color:rgba(148,163,184,.32);color:#cbd5e1; }
}
:root[data-theme="dark"] .badge-blue  { background:rgba(56,189,248,.15); border-color:rgba(56,189,248,.36); color:#7dd3fc; }
:root[data-theme="dark"] .badge-indigo{ background:rgba(129,140,248,.15); border-color:rgba(129,140,248,.36); color:#a5b4fc; }
:root[data-theme="dark"] .badge-sky   { background:rgba(14,165,233,.15); border-color:rgba(14,165,233,.36); color:#7dd3fc; }
:root[data-theme="dark"] .badge-cyan  { background:rgba(34,211,238,.14); border-color:rgba(34,211,238,.34); color:#67e8f9; }
:root[data-theme="dark"] .badge-teal  { background:rgba(20,184,166,.14); border-color:rgba(20,184,166,.34); color:#5eead4; }
:root[data-theme="dark"] .badge-green { background:rgba(34,197,94,.14);  border-color:rgba(34,197,94,.34);  color:#86efac; }
:root[data-theme="dark"] .badge-amber { background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.34); color:#fcd34d; }
:root[data-theme="dark"] .badge-red   { background:rgba(239,68,68,.14);  border-color:rgba(239,68,68,.34);  color:#fca5a5; }
:root[data-theme="dark"] .badge-slate { background:rgba(148,163,184,.14);border-color:rgba(148,163,184,.32);color:#cbd5e1; }

.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) } }

.event-badges .badge{ box-shadow:0 2px 8px rgba(4,15,28,.24); }

/* -------------------------------------------------------------------------
   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
   ------------------------------------------------------------------------- */
.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(--accent-border); box-shadow:var(--shadow); }

.card-accent{ background:var(--grad-soft); border-color:var(--accent-border); }
.card-warning{ background:rgba(217,119,6,.07); border-color:rgba(217,119,6,.3); }

.grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); gap:22px; }
.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),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(min(220px,100%),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(2,132,199,.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(--text); 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:var(--surface); 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:var(--dim); opacity:.75; }
.input:focus,select:focus,textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.input.is-invalid,select.is-invalid{ border-color:var(--red); box-shadow:0 0 0 3px rgba(220,38,38,.14); }
textarea{ resize:vertical; min-height:100px; }

select{
  appearance:none; cursor:pointer; padding-right:40px;
  background-image:var(--arrow);
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
}
select option{ background:var(--surface); 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(min(190px,100%),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:var(--surface);
  transition:all .18s ease; height:100%;
}
.choice label b{ display:block; font-size:14.5px; margin-bottom:4px; color:var(--text); }
.choice label small{ display:block; font-size:12px; color:var(--muted); line-height:1.5; font-weight:500; }
.choice label small.fee-tag{
  margin-top:8px; font-weight:800; color:var(--accent-text);
  font-size:12.5px; letter-spacing:.2px;
}
.choice input:checked + label{
  border-color:var(--accent); background:var(--accent-soft);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.choice input:focus-visible + label{ outline:2px solid var(--accent); 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:var(--surface); }
.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:var(--surface);
  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(--text); }
.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(--text); }
.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); }

/* -------------------------------------------------------------------------
   Testimoni
   ------------------------------------------------------------------------- */
.testi-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:22px;
}

.testi-card{
  margin:0; 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 .24s, border-color .24s, box-shadow .24s;
}
.testi-card:hover{ transform:translateY(-4px); border-color:var(--accent-border); box-shadow:var(--shadow); }

/* Tangkapan layar bukti */
.testi-shot{
  position:relative; display:block; width:100%; padding:0; cursor:zoom-in;
  border:none; border-bottom:1px solid var(--border);
  background:var(--surface-2); line-height:0;
  max-height:340px; overflow:hidden;
}
.testi-shot img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.testi-zoom{
  position:absolute; right:10px; bottom:10px;
  padding:5px 11px; border-radius:99px;
  background:rgba(4,15,28,.66); color:#fff;
  font-size:11.5px; font-weight:700; line-height:1.4;
  opacity:0; transition:opacity .2s; backdrop-filter:blur(6px);
}
.testi-card:hover .testi-zoom, .testi-shot:focus-visible .testi-zoom{ opacity:1; }
.testi-shot:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

.testi-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:12px; flex:1; }

.testi-stars{ color:var(--amber); font-size:15px; letter-spacing:2px; line-height:1; }
.testi-stars .dim{ color:var(--border-strong); }

.testi-quote{
  margin:0; font-size:14.5px; line-height:1.65; color:var(--muted);
  position:relative; padding-left:14px; border-left:2px solid var(--accent-border);
}

.testi-meta{ display:flex; align-items:center; gap:11px; margin-top:auto; padding-top:4px; }
.testi-meta b{ display:block; font-size:14px; color:var(--text); }
.testi-meta small{ display:block; font-size:12px; color:var(--dim); }

/* Penanda: kode pesanannya cocok dengan data kami */
.testi-verified{
  display:inline-block; margin-left:6px; vertical-align:1px;
  font-size:10.5px; font-weight:800; letter-spacing:.3px;
  padding:2px 7px; border-radius:999px;
  background:rgba(22,163,74,.12); border:1px solid rgba(22,163,74,.34); color:#15803d;
}

/* Balasan admin di bawah testimoni — bikin halamannya terasa hidup */
.testi-reply{
  margin-top:2px; padding:12px 14px;
  border-radius:12px; border:1px solid var(--accent-border);
  background:var(--accent-soft);
  border-left:3px solid var(--accent);
}
.testi-reply-who{
  font-size:11.5px; font-weight:800; color:var(--accent-text);
  letter-spacing:.2px; margin-bottom:4px;
}
.testi-reply-who span{ font-weight:600; color:var(--dim); }
.testi-reply p{ margin:0; font-size:13px; line-height:1.6; color:var(--muted); }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .testi-verified{
    background:rgba(74,222,128,.14); border-color:rgba(74,222,128,.34); color:#86efac;
  }
}
:root[data-theme="dark"] .testi-verified{
  background:rgba(74,222,128,.14); border-color:rgba(74,222,128,.34); color:#86efac;
}
.testi-avatar{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:var(--grad); color:#fff;
  display:grid; place-items:center; font-size:13px; font-weight:800;
}

/* Pratinjau unggahan di dashboard */
.testi-preview{
  width:100%; max-width:190px; min-height:130px; padding:10px;
  border-radius:12px; border:1px solid var(--border); background:var(--surface-2);
  display:grid; place-items:center; overflow:hidden;
}
.testi-preview img{ max-width:100%; max-height:220px; object-fit:contain; border-radius:8px; }
.testi-preview-empty{ font-size:34px; opacity:.5; }

/* -------------------------------------------------------------------------
   Panduan pemesanan (halaman Cara Pesan)
   ------------------------------------------------------------------------- */
.guide-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:24px;
}

.guide-step{
  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 .24s, border-color .24s, box-shadow .24s;
}
.guide-step:hover{ transform:translateY(-4px); border-color:var(--accent-border); box-shadow:var(--shadow); }

.guide-num{
  position:absolute; top:14px; left:14px; z-index:3;
  width:34px; height:34px; border-radius:11px;
  background:var(--grad); color:#fff;
  display:grid; place-items:center; font-size:16px; font-weight:800;
  box-shadow:0 6px 18px rgba(2,132,199,.4);
}

.guide-shot{
  display:block; width:100%; padding:0; cursor:zoom-in; line-height:0;
  border:none; border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.guide-shot img{ width:100%; height:auto; display:block; }
.guide-shot:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

.guide-text{ padding:18px 20px 22px; }
.guide-text h3{ font-size:17px; margin-bottom:8px; letter-spacing:-.2px; }
.guide-text p{ margin:0; font-size:14px; line-height:1.65; color:var(--muted); }
.guide-text b{ color:var(--text); font-weight:700; }

/* Catatan penting */
.guide-notes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:14px 24px; }
.guide-notes > div{ display:flex; gap:12px; align-items:flex-start; }
.guide-notes span{ font-size:19px; line-height:1.4; flex-shrink:0; }
.guide-notes p{ margin:0; font-size:14px; line-height:1.6; color:var(--muted); }
.guide-notes b{ color:var(--text); font-weight:700; }

/* -------------------------------------------------------------------------
   Lightbox
   ------------------------------------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(4,12,22,.9); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:32px 20px;
  animation:lb-in .2s ease;
}
.lightbox[hidden]{ display:none; }
@keyframes lb-in{ from{ opacity:0 } to{ opacity:1 } }

.lightbox-inner{ margin:0; max-width:min(920px,100%); max-height:100%; display:flex; flex-direction:column; gap:12px; }
.lightbox-inner img{
  max-width:100%; max-height:calc(100vh - 130px);
  object-fit:contain; border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.lightbox-inner figcaption{
  text-align:center; color:rgba(255,255,255,.86); font-size:13.5px; font-weight:600;
}

.lightbox-close{
  position:absolute; top:18px; right:20px;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24);
  color:#fff; font-size:19px; font-family:inherit;
  display:grid; place-items:center; backdrop-filter:blur(8px);
  transition:background .18s;
}
.lightbox-close:hover{ background:rgba(255,255,255,.28); }

/* -------------------------------------------------------------------------
   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:rgba(22,163,74,.10);  border-color:rgba(22,163,74,.34);  color:#15803d; }
.alert-error  { background:rgba(220,38,38,.10);  border-color:rgba(220,38,38,.34);  color:#b91c1c; }
.alert-warning{ background:rgba(217,119,6,.10);  border-color:rgba(217,119,6,.34);  color:#b45309; }
.alert-info   { background:var(--accent-soft);   border-color:var(--accent-border); color:var(--accent-text); }
.alert ul{ margin:6px 0 0; padding-left:18px; }
.alert a{ color:inherit; text-decoration:underline; font-weight:700; }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .alert-success{ color:#86efac; }
  :root:not([data-theme="light"]) .alert-error  { color:#fca5a5; }
  :root:not([data-theme="light"]) .alert-warning{ color:#fcd34d; }
}
:root[data-theme="dark"] .alert-success{ color:#86efac; }
:root[data-theme="dark"] .alert-error  { color:#fca5a5; }
:root[data-theme="dark"] .alert-warning{ color:#fcd34d; }

/* -------------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------------- */
.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(--text); 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
   ------------------------------------------------------------------------- */
.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),transparent);
}
.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 var(--surface); 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(--text); }
.timeline-item .tl-note{ font-size:13.5px; color:var(--muted); }

/* -------------------------------------------------------------------------
   Daftar detail
   ------------------------------------------------------------------------- */
.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:var(--surface); 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(--text); }

/* -------------------------------------------------------------------------
   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
   ------------------------------------------------------------------------- */
.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:var(--surface); 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(--text);
  transition:transform .16s, border-color .16s;
}
.fab-item:hover{ transform:translateX(-3px); border-color:#22c55e; }
.fab-item .dot{
  width:26px; height:26px; border-radius:50%; background:#22c55e; 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:#22c55e; color:#fff;
  display:grid; place-items:center; font-size:26px; cursor:pointer; border:none;
  box-shadow:0 10px 26px rgba(34,197,94,.42); transition:transform .2s;
}
.fab-wa:hover{ transform:scale(1.07); }
.fab-wrap.open .fab-wa{ transform:rotate(90deg); }

/* -------------------------------------------------------------------------
   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; }
}

.w-100{ width:100% !important; }

/* Detail Hero Layout (Event & Lightstick) */
.event-hero{
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  gap:38px;
  align-items:start;
}
.event-hero-sticky{
  position:sticky;
  top:92px;
}
@media(max-width:960px){
  .event-hero{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
  .event-hero-sticky{
    position:static !important;
    max-width:440px;
    margin-inline:auto;
    width:100%;
  }
}
@media(max-width:640px){
  .event-hero-sticky{
    max-width:100%;
  }
  .card-responsive-pad{
    padding:18px 14px !important;
  }
  .field .hint{
    font-size:11px;
  }
  .choice label{
    padding:12px 14px;
  }
  .choice label b{
    font-size:13.5px;
  }
}

input[type="date"]{
  max-width:100%;
  min-height:46px;
}