@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(assets/fonts/poppins-400.woff2) format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(assets/fonts/poppins-600.woff2) format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(assets/fonts/poppins-700.woff2) format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url(assets/fonts/poppins-800.woff2) format('woff2');
}

:root{
  --purple: #5B2FD1;
  --purple-btn: #542CC8;
  --purple-dark: #3B1E96;
  --purple-bg: #F1EDFC;
  --purple-bg2: #E9E2FA;
  --navy: #0E1D33;
  --gray: #5B6478;
  --line: #E7E1F9;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; height:100%; overflow-x:hidden;}
body{
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  color: var(--navy);
  background-color: #FDFDFF;
  background-image: url('assets/bottom-img.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  background-attachment: fixed;
  min-height:100%;
  max-width:100vw;
  overflow-x:hidden;
}
/* Beranda is a fit-to-one-screen layout; every other page scrolls normally. */
body.is-beranda{
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
img,svg{display:block; max-width:100%;}
a{text-decoration:none; color:inherit;}
button{font-family:inherit; cursor:pointer;}

.wrap{
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 0 60px;
}
.wrap-hero{
  display:flex;
  flex-direction:column;
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------- PAGE SWITCHING ---------- */
.page{display:none;}
.page.active{display:block;}
#beranda.page.active{display:flex; flex-direction:column;}
body.is-beranda header.nav{
  flex-shrink:0;
}
body.is-beranda #beranda.page.active{flex:1 1 auto; min-height:0;}

/* ---------- NAV ---------- */
/* header.nav is the full-width bar (background lives here); .nav-inner is the
   centered, max-width row that lays out the nav content. It stays in normal
   flow (not sticky/fixed) — it scrolls away with the page like the rest of
   the content, it doesn't float pinned at the top. */
header.nav{
  position: relative;
  z-index: 2;
  width: 100%;
  flex-shrink: 0;
  /* Solid (not translucent) on every screen size — a distinct dusty-lavender,
     one step deeper than --purple-bg/--purple-bg2 used elsewhere on the page. */
  background: #DCD2F7;
  border-bottom: 1px solid #CBBDF0;
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: clamp(10px,2.5vh,24px) 60px;
  width:100%;
  max-width:1400px;
  margin:0 auto;
  gap: 24px;
  position: relative;
}
.logo-mark{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink: 0;
  cursor:pointer;
}
.logo-icon{
  height: 44px;
  width: auto;
}
.logo-wordblock{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.logo-text{
  height: 24px;
  width: auto;
}
.logo-tagline{
  font-size: 11px;
  font-weight: 600;
  color: var(--gray);
  white-space: nowrap;
  letter-spacing:.1px;
}
nav.links{
  display:flex;
  align-items:center;
  gap: 38px;
}
nav.links a{
  font-size: 15.5px;
  font-weight: 600;
  color: var(--navy);
  position:relative;
  padding-bottom:8px;
  transition: color .2s;
  cursor:pointer;
}
nav.links a:hover{color:var(--purple);}
nav.links a.active{color:var(--purple);}
nav.links a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:var(--purple);
  border-radius:2px;
}
.nav-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink: 0;
}
.hamburger{
  display:none;
  width:40px; height:40px;
  border:1.5px solid var(--line);
  background:#fff;
  border-radius:10px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  order:-1;
}
.hamburger svg{width:19px; height:19px; color:var(--navy);}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:15px;
  padding: 12px 22px;
  border-radius: 12px;
  border: none;
  white-space:nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-outline{
  background:#fff;
  color: var(--purple);
  border: 1.5px solid var(--purple);
}
.btn-primary{
  background: linear-gradient(135deg, var(--purple-btn), var(--purple-dark));
  color:#fff;
  box-shadow: 0 8px 18px rgba(84,44,200,.30);
}
.btn-primary:hover{box-shadow:0 12px 22px rgba(84,44,200,.4);}
.btn-ghost{
  background:#fff;
  color: var(--navy);
  border: 1.5px solid var(--line);
}
.btn:disabled{opacity:.6; cursor:not-allowed; transform:none !important;}
.btn-full{width:100%; justify-content:center;}

/* ---------- BERANDA HERO (backdrop lives on body, full width) ---------- */
.hero-bg{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display:flex;
  flex-direction:column;
}
main.hero{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: 50.8fr 49.2fr;
  gap: clamp(16px,3vh,40px);
  align-items:end;
  padding: clamp(8px,2vh,20px) 0 clamp(40px,14vh,140px);
  flex: 1 1 auto;
  min-height: 0;
}
.hero-left{
  display:flex;
  flex-direction:column;
  min-width: 0;
}
.hero-left h1{
  font-size: clamp(30px,6.4vh,54px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing:-.5px;
}
.hero-left h1 .line1{color: var(--navy);}
.hero-left h1 .line2{color: var(--purple);}
.hero-left h1 .line3-wrap{
  position:relative;
  display:inline-block;
  color: var(--purple);
}
.sparkle-accent{
  position:absolute;
  top:-14px; right:-26px;
  width:26px;height:26px;
  color: var(--purple);
}
.squiggle{
  display:block;
  margin-top: 2px;
  width: 230px;
}
.hero-left p.lead{
  margin-top: clamp(10px,2.7vh,26px);
  font-size: clamp(15px,2.1vh,17.5px);
  line-height: 1.6;
  color: var(--gray);
  max-width: 480px;
}
.hero-left p.lead b{color: var(--navy); font-weight:700;}

.feature-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: clamp(14px,3.6vh,34px);
  max-width: 560px;
}
.feature-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding: clamp(12px,1.8vh,16px);
  min-width: 0;
  box-shadow: 0 4px 14px rgba(30,20,80,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature-item:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(30,20,80,.1);}
.feature-item .ico{
  width:clamp(38px,5.6vh,48px); height:clamp(38px,5.6vh,48px);
  border-radius: 12px;
  background: var(--purple-bg);
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color: var(--purple);
}
.feature-item .ico img{width:68%; height:68%; object-fit:contain; opacity:.75;}
.feature-item h4{font-size: clamp(13.5px,1.8vh,15.5px); font-weight:700; color:var(--navy); margin-bottom:4px;}
.feature-item p{font-size: clamp(12.5px,1.6vh,13.5px); color: var(--gray); line-height:1.4;}

.cta-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top: clamp(14px,3.8vh,36px);
  flex-wrap: wrap;
}
.btn-lg{padding:clamp(10px,1.6vh,15px) 26px; font-size:15px; border-radius:13px;}
.btn-play{
  width:22px;height:22px;
  border-radius:50%;
  background: var(--purple-bg2);
  color: var(--purple);
  display:flex;align-items:center;justify-content:center;
}
.btn-play svg{width:11px;height:11px;}

.hashtag{
  margin-top: clamp(10px,2.7vh,26px);
  font-size: 15px;
  font-weight: 700;
  color: var(--purple);
}

.hero-right{
  position: relative;
  display:flex;
  align-items:flex-end;
  min-width: 0;
}
.hero-phones-img{
  width: 100%;
  height: auto;
}
.trust-card{
  position: absolute;
  right: 0;
  bottom: 4%;
  width: 220px;
  max-width: 42%;
  background: #fff;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 18px 40px rgba(30,20,80,.16);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.trust-card img{width:30px; height:30px; object-fit:contain;}
.trust-card h5{font-size:14px; font-weight:700; color:var(--navy);}
.trust-card p{font-size:11.5px; color:var(--gray); line-height:1.4;}

.float-badge{
  position:absolute;
  border-radius:50%;
  background:#fff;
  box-shadow:0 12px 26px rgba(30,20,80,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
}
.float-badge img{width:100%; height:100%; object-fit:contain;}
.badge-calendar{ top:2%; right:4%; width:64px; height:64px; }
.badge-bell{ top:20%; left:-4%; width:56px; height:56px; }
@media (max-width:1180px){
  .badge-calendar{width:52px;height:52px;}
  .badge-bell{width:46px;height:46px;}
}
@media (max-width:980px){
  .badge-bell{display:none;}
}

/* ================= SECONDARY PAGES (Event / Organizer / Fitur / Tentang) ================= */
.page-hero{
  padding: 56px 0 40px;
  text-align:center;
}
.page-hero h1{
  font-size: clamp(32px,4.2vw,46px);
  font-weight:800;
  letter-spacing:-.5px;
}
.page-hero h1 span{color:var(--purple);}
.page-hero p{
  margin:14px auto 0;
  max-width:560px;
  color:var(--gray);
  font-size:16px;
  line-height:1.6;
}
.page > .wrap{padding-bottom:90px;}

/* --- Event page --- */
.filter-row{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:38px;
}
.filter-pill{
  padding:10px 20px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:#fff;
  font-size:14px;
  font-weight:600;
  color:var(--navy);
  cursor:pointer;
  transition:.2s;
}
.filter-pill:hover{border-color:var(--purple); color:var(--purple);}
.filter-pill.active{background:var(--purple); border-color:var(--purple); color:#fff;}

.event-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.event-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(30,20,80,.06);
  transition:transform .2s, box-shadow .2s;
}
.event-card:hover{transform:translateY(-4px); box-shadow:0 16px 36px rgba(30,20,80,.12);}
.event-thumb{
  height:150px;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  font-size:44px;
  color:inherit; text-decoration:none;
}
.event-tag{
  position:absolute; top:12px; left:12px;
  background:rgba(255,255,255,.92);
  color:var(--purple);
  font-size:11.5px; font-weight:700;
  padding:5px 12px;
  border-radius:999px;
}
.event-body{padding:18px 20px 20px;}
.event-body h3{font-size:16.5px; font-weight:700; line-height:1.3; margin-bottom:10px;}
.event-body h3 a{color:inherit; text-decoration:none;}
.event-body h3 a:hover{color:var(--purple);}
.event-meta{font-size:12.5px; color:var(--gray); display:flex; align-items:center; gap:6px; margin-bottom:5px;}
.event-meta svg{width:14px;height:14px; flex-shrink:0;}
.event-footer{display:flex; align-items:center; justify-content:space-between; margin-top:14px;}
.event-count{font-size:12px; color:var(--gray); display:flex; align-items:center; gap:5px;}
.event-count svg{width:14px;height:14px;}
.btn-sm{padding:9px 18px; font-size:13px; border-radius:10px;}

/* --- Event Detail page --- */
.event-detail-page{padding:28px 0 90px;}
.breadcrumb{font-size:13px; color:var(--gray); margin-bottom:20px;}
.breadcrumb a{color:var(--purple); font-weight:600;}
.breadcrumb a:hover{text-decoration:underline;}

.event-banner{
  height:280px;
  border-radius:22px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:80px;
  margin-bottom:32px;
  overflow:hidden;
}
.event-banner .event-tag{
  position:absolute; top:18px; left:18px;
  font-size:13px; padding:7px 16px;
}

/* Banner event asli (poster/gambar yang diunggah Organizer) -- tinggi menyesuaikan rasio
   gambar (landscape maupun portrait sama-sama proporsional), dibatasi max-height supaya
   poster portrait yang sangat tinggi tidak mendorong halaman terlalu panjang. */
.event-banner-img-wrap{
  position:relative;
  border-radius:22px;
  margin-bottom:32px;
  overflow:hidden;
  background:var(--purple-bg);
  text-align:center;
  max-height:520px;
}
.event-banner-img-wrap .event-tag{
  position:absolute; top:18px; left:18px;
  font-size:13px; padding:7px 16px;
  z-index:1;
}
.event-banner-img{
  display:inline-block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:520px;
  object-fit:contain;
}

.event-detail-grid{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:40px;
  align-items:start;
}
.event-main{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:32px; box-shadow:0 18px 44px rgba(30,20,80,.08);
}
.event-main h1{
  font-size:clamp(24px,3.2vw,32px);
  font-weight:800;
  line-height:1.25;
  margin-bottom:16px;
}
.format-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.format-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--purple-bg); color:var(--purple);
  font-size:12.5px; font-weight:700;
  padding:7px 14px; border-radius:999px;
}
.event-meta-row{
  display:flex; flex-wrap:wrap; gap:20px;
  padding:18px 0; margin-bottom:20px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.event-meta-row .meta-item{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; color:var(--navy); font-weight:600;
}
.event-meta-row svg{width:17px; height:17px; color:var(--purple); flex-shrink:0;}

.organizer-chip{
  display:flex; align-items:center; gap:12px;
  margin-bottom:32px;
}
.organizer-avatar{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg,var(--purple-btn),var(--purple-dark));
  color:#fff; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.organizer-label{font-size:11.5px; color:var(--gray);}
.organizer-name{font-size:14px; font-weight:700; color:var(--navy);}

.event-main h2{font-size:19px; font-weight:800; margin:32px 0 14px;}
.event-main p{font-size:14.5px; color:var(--gray); line-height:1.8;}
.event-main ul{margin:10px 0 0 20px; color:var(--gray); font-size:14.5px; line-height:1.9;}

.speaker-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.speaker-card{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:16px;
}
.speaker-avatar{
  width:52px; height:52px; border-radius:50%;
  background:var(--purple-bg); color:var(--purple);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
}
.speaker-name{font-size:14.5px; font-weight:700; color:var(--navy);}
.speaker-role{font-size:12.5px; color:var(--gray); margin-top:2px;}

.agenda-list{display:flex; flex-direction:column; gap:0;}
.agenda-item{
  display:flex; gap:18px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.agenda-item:last-child{border-bottom:none;}
.agenda-time{
  flex-shrink:0; width:92px;
  font-size:13px; font-weight:700; color:var(--purple);
}
.agenda-title{font-size:14.5px; font-weight:700; color:var(--navy);}
.agenda-desc{font-size:13px; color:var(--gray); margin-top:3px;}

.event-sidebar{position:sticky; top:24px;}
.reg-card{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:26px; box-shadow:0 18px 44px rgba(30,20,80,.08);
}
.reg-price{font-size:26px; font-weight:800; color:var(--purple); margin-bottom:16px;}
.quota-row{display:flex; justify-content:space-between; font-size:12.5px; font-weight:600; color:var(--gray); margin-bottom:8px;}
.quota-row b{color:var(--navy);}
.quota-bar{width:100%; height:8px; background:var(--purple-bg); border-radius:999px; overflow:hidden; margin-bottom:20px;}
.quota-fill{height:100%; background:linear-gradient(90deg,var(--purple-btn),var(--purple)); border-radius:999px;}
.reg-note{
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; color:var(--gray);
  margin-top:14px; text-align:center; justify-content:center;
}
.reg-note svg{width:13px;height:13px; flex-shrink:0;}
.reg-divider{height:1px; background:var(--line); margin:18px 0;}
.reg-info-item{
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--navy); font-weight:600;
  margin-bottom:12px;
}
.reg-info-item:last-child{margin-bottom:0;}
.reg-info-item svg{width:16px;height:16px; color:var(--purple); flex-shrink:0;}

.related-events{margin-top:64px;}
.related-events h2{font-size:20px; font-weight:800; margin-bottom:20px;}

/* --- E-Tiket / Registration Success page --- */
.ticket-page{padding:48px 0 90px;}
.success-banner{text-align:center; max-width:520px; margin:0 auto 36px;}
.success-icon{
  width:76px; height:76px; margin:0 auto 20px;
  border-radius:50%;
  background:linear-gradient(135deg,#22C55E,#15803D);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px rgba(21,128,61,.3);
}
.success-icon svg{width:38px; height:38px; color:#fff;}
.success-banner h1{font-size:clamp(22px,3vw,28px); font-weight:800; margin-bottom:10px;}
.success-banner p{font-size:14.5px; color:var(--gray); line-height:1.7;}

.ticket-wrap{max-width:460px; margin:0 auto;}
.ticket-card{
  background:#fff; border-radius:22px; overflow:hidden;
  box-shadow:0 22px 50px rgba(30,20,80,.14);
}
.ticket-top{
  background:linear-gradient(135deg,#7C3AED,#4C1D95);
  color:#fff; padding:26px 26px 22px;
  position:relative;
}
.ticket-top .event-tag{position:static; display:inline-block; margin-bottom:12px;}
.ticket-top h2{font-size:19px; font-weight:800; line-height:1.3; margin-bottom:14px;}
.ticket-top .ticket-meta{font-size:13px; display:flex; align-items:center; gap:7px; opacity:.92; margin-bottom:6px;}
.ticket-top .ticket-meta svg{width:15px; height:15px; flex-shrink:0;}

.ticket-perforation{
  position:relative;
  height:0;
  border-top:2px dashed var(--line);
  margin:0 26px;
}
.ticket-perforation::before, .ticket-perforation::after{
  content:''; position:absolute; top:-13px;
  width:26px; height:26px; border-radius:50%;
  background:var(--purple-bg2);
}
.ticket-perforation::before{ left:-39px; }
.ticket-perforation::after{ right:-39px; }

.ticket-bottom{padding:28px 26px 30px; text-align:center;}
.qr-wrap{
  width:168px; height:168px; margin:0 auto 18px;
  padding:10px; background:#fff; border:1px solid var(--line); border-radius:14px;
}
.qr-svg{width:100%; height:100%; display:block;}
.ticket-id{font-size:12.5px; color:var(--gray); margin-bottom:2px;}
.ticket-id b{color:var(--navy); letter-spacing:.5px;}
.ticket-note{font-size:12px; color:var(--gray); margin-top:10px;}

.ticket-details{
  border-top:1px solid var(--line); margin-top:22px; padding-top:20px;
  text-align:left; display:flex; flex-direction:column; gap:12px;
}
.ticket-details .reg-info-item{margin-bottom:0;}

.ticket-actions{
  display:flex; gap:12px; margin-top:24px;
}
.ticket-actions .btn{flex:1; justify-content:center;}

/* Tombol "Unduh E-Tiket (PDF)" cuma window.print() -- supaya hasilnya HANYA kartu tiket
   (bukan header/nav, footer, banner "Pendaftaran Berhasil", info email, dan tombol aksi
   ikut tercetak), sembunyikan semuanya kecuali .ticket-card saat kondisi print. Dibatasi
   di bawah .ticket-page supaya tidak mempengaruhi halaman lain yang kebetulan memakai nama
   kelas serupa (mis. .ticket-actions juga dipakai di form Buat/Edit Event). */
@media print{
  /* .nav/.site-footer/.email-float: sama di semua halaman (PublicHeader ada SEBELUM
     .ticket-page di DOM, jadi tidak bisa dibatasi pakai selector "di dalam .ticket-page"
     -- disembunyikan global saat print, ini juga konvensi umum stylesheet cetak. */
  .nav, .site-footer, .email-float{ display:none !important; }
  .ticket-page .success-banner, .ticket-page .email-notice, .ticket-page .ticket-actions{
    display:none !important;
  }
  .ticket-page{padding:0 !important;}
  .ticket-page .wrap{max-width:none !important; padding:0 !important;}
  .ticket-page .ticket-wrap{max-width:420px !important; margin:24px auto !important;}
  .ticket-page .ticket-card{box-shadow:none !important; border:1px solid var(--line); page-break-inside:avoid;}

  /* Sama untuk "Unduh Sertifikat (PDF)": hasilnya HANYA kartu sertifikat
     (.certificate-frame), tanpa breadcrumb, catatan info, dan tombol aksi. */
  .certificate-page .breadcrumb, .certificate-page .certificate-note, .certificate-page .ticket-actions{
    display:none !important;
  }
  .certificate-page{padding:0 !important;}
  .certificate-page .wrap{max-width:none !important; padding:0 !important;}
  .certificate-page .certificate-wrap{max-width:none !important; margin:24px auto !important;}
  .certificate-page .certificate-frame{box-shadow:none !important; page-break-inside:avoid;}
}

/* --- Sertifikat (sertifikat.html) --- */
.certificate-page{padding:44px 0 90px;}
.certificate-wrap{max-width:760px; margin:0 auto;}

.certificate-frame{
  background:#fff;
  border-radius:20px;
  padding:12px;
  box-shadow:0 26px 60px rgba(30,20,80,.16);
}
.certificate-inner{
  border:2px solid var(--purple);
  border-radius:14px;
  padding:52px 46px 40px;
  position:relative;
  text-align:center;
}
.certificate-inner::before{
  content:'';
  position:absolute; inset:8px;
  border:1px solid var(--purple-bg2);
  border-radius:9px;
  pointer-events:none;
}
.certificate-logo{height:34px; margin-bottom:22px;}
.certificate-kicker{
  font-size:12.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--purple);
}
.certificate-given-to{font-size:13px; color:var(--gray); margin-top:22px;}
.certificate-name{
  font-size:clamp(26px,4vw,36px); font-weight:800; color:var(--navy);
  margin-top:10px; padding-bottom:16px; position:relative; letter-spacing:.2px;
}
.certificate-name::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:120px; height:3px; border-radius:99px;
  background:linear-gradient(90deg,var(--purple-btn),var(--purple));
}
.certificate-desc{font-size:14px; color:var(--gray); margin-top:20px; line-height:1.8; max-width:520px; margin-left:auto; margin-right:auto;}
.certificate-event-name{font-size:19px; font-weight:800; color:var(--purple); margin-top:6px;}
.certificate-meta{font-size:12.5px; color:var(--gray); margin-top:14px;}

.certificate-divider{height:1px; background:var(--purple-bg2); margin:34px 0 26px;}
.certificate-footer{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; text-align:left;}
.certificate-signature{display:flex; flex-direction:column; align-items:flex-start;}
.certificate-sign-line{width:150px; border-bottom:1.5px solid var(--navy); padding-bottom:8px; margin-bottom:8px;}
.certificate-sign-name{font-size:13.5px; font-weight:700; color:var(--navy);}
.certificate-sign-role{font-size:11.5px; color:var(--gray); margin-top:2px;}
.certificate-verify{display:flex; align-items:center; gap:10px;}
.certificate-verify .qr-wrap{width:64px; height:64px; margin:0; padding:5px;}
.certificate-verify-text{font-size:10.5px; color:var(--gray); line-height:1.5;}
.certificate-verify-text b{display:block; color:var(--navy); font-family:var(--mono, monospace); font-size:11px; letter-spacing:.3px;}

.certificate-note{
  display:flex; align-items:flex-start; gap:10px;
  font-size:12.5px; color:var(--gray); line-height:1.6;
  margin-top:24px; padding:0 6px;
}
.certificate-note svg{width:16px; height:16px; color:var(--purple); flex-shrink:0; margin-top:1px;}

/* --- Organizer page --- */
.split-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  padding:20px 0 60px;
}
.split-row h2{font-size:clamp(26px,3.2vw,36px); font-weight:800; line-height:1.2;}
.split-row h2 span{color:var(--purple);}
.split-row p{margin-top:16px; color:var(--gray); font-size:15.5px; line-height:1.7;}
.split-visual{
  background:linear-gradient(135deg,var(--purple-bg),var(--purple-bg2));
  border-radius:24px;
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
}
.split-visual .big-emoji{font-size:96px;}
.stat-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin:10px 0 60px;
  text-align:center;
}
.stat-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px 16px;
}
.stat-box .num{font-size:32px; font-weight:800; color:var(--purple);}
.stat-box .lbl{margin-top:6px; font-size:13.5px; color:var(--gray); font-weight:600;}

.benefit-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-bottom:50px;
}
.benefit-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px 22px;
}
.benefit-card .ico{
  width:54px;height:54px;border-radius:14px;
  background:var(--purple-bg);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.benefit-card .ico img{width:65%;height:65%;object-fit:contain;opacity:.8;}
.benefit-card h4{font-size:15.5px; font-weight:700; margin-bottom:8px;}
.benefit-card p{font-size:13px; color:var(--gray); line-height:1.55;}

.cta-banner{
  background:linear-gradient(135deg,var(--purple-btn),var(--purple-dark));
  border-radius:24px;
  padding:50px 40px;
  text-align:center;
  color:#fff;
  margin-bottom:20px;
}
.cta-banner h3{font-size:clamp(22px,2.6vw,30px); font-weight:800;}
.cta-banner p{margin:12px 0 26px; color:#DCD3F8; font-size:15px;}
.cta-banner .btn-outline{background:transparent; color:#fff; border-color:#fff;}
.cta-banner .btn-outline:hover{background:#fff; color:var(--purple);}

/* --- Fitur page --- */
.fitur-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-bottom:20px;
}
.fitur-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:30px 26px;
}
.fitur-card .ico{
  width:60px;height:60px;border-radius:16px;
  background:var(--purple-bg);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}
.fitur-card .ico img{width:66%;height:66%;object-fit:contain;opacity:.8;}
.fitur-card h4{font-size:17px; font-weight:700; margin-bottom:10px;}
.fitur-card p{font-size:13.5px; color:var(--gray); line-height:1.6;}

/* --- Tentang page --- */
.about-lead{
  max-width:720px;
  margin:0 auto 50px;
  text-align:center;
  color:var(--gray);
  font-size:16px;
  line-height:1.75;
}
.about-lead b{color:var(--navy);}

.contact-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-bottom:50px;
}
.contact-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px 22px;
  text-align:center;
  display:block;
}
.contact-card-link{transition:transform .2s, box-shadow .2s, border-color .2s; cursor:pointer;}
.contact-card-link:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(30,20,80,.1); border-color:var(--purple);}
.contact-card .ico{
  width:50px; height:50px; border-radius:14px;
  background:var(--purple-bg);
  color:var(--purple);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
}
.contact-card .ico svg{width:24px;height:24px;}
.contact-card h4{font-size:15px; font-weight:700; margin-bottom:6px;}
.contact-card p{font-size:13.5px; color:var(--gray);}

/* ---------- FOOTER (persistent across all pages) ---------- */
.site-footer{
  flex-shrink: 0;
  padding: 6px 24px;
  text-align: center;
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.45);
}
.site-footer p{
  max-width: 900px;
  margin: 0 auto;
  font-size: 9.5px;
  line-height: 1.45;
  color: var(--navy);
  font-weight: 500;
}
.nowrap-phrase{white-space:nowrap;}
@media (max-width:560px){
  .nowrap-phrase{white-space:normal;}
}

/* ---------- FLOATING EMAIL BUTTON ---------- */
.email-float{
  position:fixed;
  right:24px;
  bottom:24px;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--purple-btn);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 26px rgba(91,47,209,.45);
  z-index:1000;
  transition:transform .2s;
}
.email-float:hover{transform:scale(1.08);}
.email-float svg{width:30px; height:30px; fill:#fff;}
.email-float .email-ping{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--purple-btn);
  opacity:.55;
  animation:email-pulse 2.2s ease-out infinite;
}
/* ---------- EMAIL NOTIFICATION NOTICE (banner "juga dikirim via Email") ---------- */
.email-notice{
  display:flex; align-items:flex-start; gap:13px;
  background:var(--purple-bg); border:1px solid var(--purple-bg2); border-radius:14px;
  padding:14px 18px; margin:0 auto 24px; text-align:left;
}
.email-notice-ico{
  width:34px; height:34px; border-radius:50%; background:var(--purple-btn); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.email-notice-ico svg{width:18px; height:18px; fill:#fff;}
.email-notice p{margin:0; font-size:13.5px; line-height:1.55; color:var(--purple-dark);}
.email-notice b{color:var(--navy);}

/* ---------- BULK EMAIL SEND PANEL (organizer) ---------- */
.email-bulk-panel{
  background:var(--purple-bg); border:1px solid var(--purple-bg2); border-radius:14px;
  padding:18px 20px; margin-top:16px; display:none;
}
.email-bulk-panel.open{display:block;}
.email-bulk-panel textarea{
  width:100%; min-height:80px; resize:vertical; font-family:inherit; font-size:14px;
  border:1px solid var(--line,#DCE1DD); border-radius:10px; padding:10px 12px; margin:10px 0 12px;
}
.btn-email{background:var(--purple-btn); color:#fff; border:none;}
.btn-email:hover{background:var(--purple-dark);}

/* ---------- SETTINGS ROWS & TOGGLE SWITCH (admin-settings.html) ---------- */
.settings-row{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.settings-row:last-child{border-bottom:none; padding-bottom:0;}
.settings-row-text b{display:block; font-size:14.5px; font-weight:700; color:var(--navy); margin-bottom:3px;}
.settings-row-text span{font-size:12.5px; color:var(--gray); line-height:1.5;}
.toggle-switch{position:relative; display:inline-block; width:44px; height:26px; flex-shrink:0;}
.toggle-switch input{opacity:0; width:0; height:0;}
.toggle-slider{
  position:absolute; inset:0; cursor:pointer; background:#D9D9E3;
  border-radius:26px; transition:.2s;
}
.toggle-slider:before{
  content:""; position:absolute; height:20px; width:20px; left:3px; bottom:3px;
  background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider{background:var(--purple);}
.toggle-switch input:checked + .toggle-slider:before{transform:translateX(18px);}
.settings-save-bar{
  display:flex; align-items:center; gap:14px; justify-content:flex-end; margin-top:8px;
}

@keyframes email-pulse{
  0%{transform:scale(1); opacity:.55;}
  100%{transform:scale(1.7); opacity:0;}
}

/* --- Kebijakan page (Syarat & Ketentuan / Kebijakan Privasi tabs) --- */
.legal-panel{display:none;}
.legal-panel.active{display:block;}
.legal-doc{
  max-width: 760px;
  margin: 0 auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding: 40px 44px;
}
.legal-updated{
  font-size:12.5px;
  color:var(--gray);
  font-weight:600;
  margin-bottom:22px;
}
.legal-doc h3{
  font-size:16px;
  font-weight:700;
  color:var(--navy);
  margin-top:24px;
  margin-bottom:8px;
}
.legal-doc h3:first-of-type{margin-top:0;}
.legal-doc p{
  font-size:14px;
  color:var(--gray);
  line-height:1.75;
}
.legal-doc a{color:var(--purple); font-weight:600;}
.legal-doc a:hover{text-decoration:underline;}
.legal-doc b{color:var(--navy);}

/* ================= AUTH PAGES (masuk.html / daftar.html) ================= */
.auth-section{
  padding: 50px 0 80px;
  display:flex;
  justify-content:center;
}
.auth-card{
  width:100%;
  max-width:440px;
  background:#fff;
  border-radius:22px;
  padding:40px 36px;
  box-shadow:0 24px 60px rgba(30,20,80,.12);
  border:1px solid var(--line);
}
/* Wider variant for forms with more fields (e.g. Daftar), so it spreads
   sideways instead of growing tall. form-row-2 below already goes 2-up on
   desktop and collapses to 1 column under 560px. */
.auth-card.wide{max-width:640px;}
.auth-header{
  display:flex;
  align-items:center;
  gap:16px;
}
.auth-card .auth-icon{
  width:56px; height:56px;
  border-radius:16px;
  background:var(--purple-bg);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.auth-card .auth-icon img{width:60%; height:60%; object-fit:contain; opacity:.85;}
.auth-card h1{font-size:22px; font-weight:800; letter-spacing:-.3px;}
.auth-card .auth-sub{margin-top:4px; color:var(--gray); font-size:13.5px; line-height:1.45;}

.role-toggle{
  display:flex;
  gap:10px;
  margin-top:22px;
  background:var(--purple-bg);
  padding:5px;
  border-radius:12px;
}
.role-toggle button{
  flex:1;
  border:none;
  background:transparent;
  padding:10px 12px;
  border-radius:9px;
  font-size:13.5px;
  font-weight:700;
  color:var(--purple);
  transition:.2s;
}
.role-toggle button.active{background:#fff; color:var(--navy); box-shadow:0 4px 12px rgba(30,20,80,.1);}

.form-group{margin-top:18px;}
.form-group label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:7px;
}
.form-input{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--line);
  border-radius:11px;
  font-family:inherit;
  font-size:14.5px;
  color:var(--navy);
  background:#fff;
  transition:border-color .15s;
}
.form-input:focus{outline:none; border-color:var(--purple);}
.form-input::placeholder{color:#A6ADBB;}
.form-row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}

.form-extra{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
  font-size:13px;
}
.form-check{display:flex; align-items:center; gap:8px; color:var(--gray);}
.form-check input{width:15px;height:15px; accent-color:var(--purple);}
.form-link{color:var(--purple); font-weight:600; cursor:pointer;}
.form-link:hover{text-decoration:underline;}

.auth-terms{margin-top:16px; font-size:12.5px; color:var(--gray); line-height:1.5; display:flex; gap:8px; align-items:flex-start;}
.auth-terms input{width:15px; height:15px; margin-top:2px; accent-color:var(--purple); flex-shrink:0;}
.auth-terms a{color:var(--purple); font-weight:600;}

.auth-card .btn-primary{margin-top:22px;}

.auth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:22px 0;
  color:var(--gray);
  font-size:12.5px;
  font-weight:600;
}
.auth-divider::before, .auth-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
.btn-google{
  width:100%;
  justify-content:center;
  background:#fff;
  border:1.5px solid var(--line);
  color:var(--navy);
}
.btn-google svg{width:18px;height:18px;}

.auth-footer{
  margin-top:24px;
  text-align:center;
  font-size:13.5px;
  color:var(--gray);
}
.auth-footer a{color:var(--purple); font-weight:700; cursor:pointer;}
.auth-footer a:hover{text-decoration:underline;}

.auth-msg{
  margin-top:16px;
  padding:11px 14px;
  border-radius:10px;
  background:var(--purple-bg);
  color:var(--purple);
  font-size:12.5px;
  font-weight:600;
  text-align:center;
  display:none;
}
.auth-msg.show{display:block;}
.auth-msg a{color:inherit; font-weight:800; text-decoration:underline; display:inline-block; margin-top:4px;}

/* ================= DASHBOARD PESERTA (dashboard.html) ================= */
.dash-shell{display:flex; align-items:stretch; min-height:100vh;}

.dash-sidebar{
  width:260px; flex-shrink:0;
  background:#fff; border-right:1px solid var(--line);
  padding:26px 18px; display:flex; flex-direction:column;
}
.dash-sidebar-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 6px 22px; margin-bottom:14px;
  border-bottom:1px solid var(--line);
}
.dash-logo{display:flex; align-items:center; gap:10px;}
.dash-logo img{height:30px; width:auto;}
/* Hidden on desktop — only shown as the mobile drawer toggle (see media queries). */
.dash-nav-toggle{
  display:none;
  width:38px; height:38px;
  border:1.5px solid var(--line);
  background:#fff;
  border-radius:10px;
  align-items:center; justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}
.dash-nav-toggle svg{width:18px; height:18px; color:var(--navy);}
.dash-nav{display:flex; flex-direction:column; gap:3px; flex:1;}
.dash-nav a{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:12px;
  color:var(--gray); font-weight:600; font-size:14px;
  transition:.15s;
}
.dash-nav a svg{width:18px; height:18px; flex-shrink:0;}
.dash-nav a:hover{background:var(--purple-bg); color:var(--purple);}
.dash-nav a.active{background:var(--purple-bg); color:var(--purple);}
.dash-nav-divider{height:1px; background:var(--line); margin:12px 6px;}

.dash-main{flex:1; min-width:0; background:var(--purple-bg); padding:34px 40px 60px;}
.dash-topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:26px; gap:16px;
}
.dash-topbar h1{font-size:clamp(20px,2.4vw,26px); font-weight:800;}
.dash-topbar p{font-size:13.5px; color:var(--gray); margin-top:3px;}
.dash-user{display:flex; align-items:center; gap:10px;}
.dash-avatar{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,var(--purple-btn),var(--purple-dark));
  color:#fff; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.dash-user-name{font-size:13.5px; font-weight:700; color:var(--navy);}
.dash-user-role{font-size:11.5px; color:var(--gray);}

.dash-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:26px;}
.dash-stat-card{
  background:#fff; border-radius:18px; padding:20px 22px;
  box-shadow:0 10px 26px rgba(30,20,80,.06);
  display:flex; align-items:center; gap:14px;
}
.dash-stat-ico{
  width:46px; height:46px; border-radius:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.dash-stat-num{font-size:22px; font-weight:800; color:var(--navy); line-height:1.15;}
.dash-stat-lbl{font-size:12.5px; color:var(--gray);}

.dash-section{
  background:#fff; border-radius:20px; padding:24px 26px;
  box-shadow:0 10px 26px rgba(30,20,80,.06);
  margin-bottom:22px;
}
.dash-section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.dash-section-head h2{font-size:17px; font-weight:800;}
/* :not(.btn) so a "+ Buat Event Baru"-style button placed in the header keeps its
   own .btn-primary/.btn-outline colors instead of being forced purple-on-purple. */
.dash-section-head a:not(.btn){font-size:12.5px; font-weight:700; color:var(--purple);}
.dash-section-head a:not(.btn):hover{text-decoration:underline;}

.dash-event-row{
  display:flex; align-items:center; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.dash-event-row:last-child{border-bottom:none; padding-bottom:0;}
.dash-event-row:first-child{padding-top:0;}
.dash-event-thumb{
  width:54px; height:54px; border-radius:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.dash-event-info{flex:1; min-width:0;}
.dash-event-info h4{font-size:14.5px; font-weight:700; color:var(--navy); margin-bottom:4px;}
.dash-event-meta{font-size:12px; color:var(--gray); display:flex; align-items:center; gap:6px;}
.dash-event-meta svg{width:13px; height:13px; flex-shrink:0;}
.dash-badge{
  font-size:11px; font-weight:700; padding:5px 12px; border-radius:999px;
  background:#DCFCE7; color:#15803D; flex-shrink:0;
}

.cert-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.cert-card{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line); border-radius:14px; padding:14px 16px;
}
.cert-ico{
  width:42px; height:42px; border-radius:11px; flex-shrink:0;
  background:var(--purple-bg); color:var(--purple);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.cert-info{min-width:0; flex:1;}
.cert-info h4{font-size:13.5px; font-weight:700; color:var(--navy); line-height:1.3;}
.cert-info p{font-size:11.5px; color:var(--gray); margin-top:2px;}
.cert-download{
  width:34px; height:34px; border-radius:10px; flex-shrink:0; margin-left:auto;
  border:1.5px solid var(--line); background:#fff; color:var(--purple);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:.15s;
}
.cert-download svg{width:16px; height:16px;}
.cert-download:hover{background:var(--purple-bg); border-color:var(--purple);}

/* --- Dashboard Organizer (organizer-dashboard.html) --- */
.org-event-row{
  display:flex; align-items:center; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.org-event-row:last-child{border-bottom:none; padding-bottom:0;}
.org-event-row:first-child{padding-top:0;}
.org-status{
  font-size:11px; font-weight:700; padding:5px 12px; border-radius:999px; flex-shrink:0;
}
.org-status.published{background:#DCFCE7; color:#15803D;}
.org-status.draft{background:#F1F5F9; color:#64748B;}
.org-status.pending{background:#FEF3C7; color:#B45309;}
.org-status.rejected{background:#FEE2E2; color:#B91C1C;}
.org-quota-mini{width:120px; flex-shrink:0;}
.org-quota-mini .label{font-size:11px; color:var(--gray); font-weight:600;}
.org-quota-mini .bar{height:6px; background:var(--purple-bg); border-radius:999px; overflow:hidden; margin-top:6px;}
.org-quota-mini .fill{height:100%; background:linear-gradient(90deg,var(--purple-btn),var(--purple)); border-radius:999px;}
.org-actions{display:flex; gap:8px; flex-shrink:0;}

.activity-row{display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line);}
.activity-row:last-child{border-bottom:none; padding-bottom:0;}
.activity-row:first-child{padding-top:0;}
.activity-ico{
  width:38px; height:38px; border-radius:50%;
  background:#DCFCE7; color:#15803D;
  display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
}
.activity-text{flex:1; min-width:0; font-size:13.5px; color:var(--navy); line-height:1.5;}
.activity-text b{font-weight:700;}
.activity-time{font-size:11.5px; color:var(--gray); flex-shrink:0;}

/* --- Buat Event (organizer-create-event.html) --- */
.create-event-grid{
  display:grid; grid-template-columns:1fr 320px; gap:26px; align-items:start;
}
.create-event-form .form-section-title{
  font-size:15.5px; font-weight:800; color:var(--navy);
  margin:30px 0 4px;
  padding-top:22px; border-top:1px solid var(--line);
}
.create-event-form .form-section-title:first-child{margin-top:0; padding-top:0; border-top:none;}
textarea.form-input{resize:vertical; min-height:96px; font-family:inherit;}
select.form-input{cursor:pointer;}

.upload-box{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center;
  border:1.5px dashed var(--line); border-radius:14px;
  padding:30px 20px; margin-top:8px;
  cursor:pointer; color:var(--gray);
  transition:.15s;
}
.upload-box:hover{border-color:var(--purple); background:var(--purple-bg);}
.upload-box svg{width:26px; height:26px; color:var(--purple);}
.upload-box span{font-size:13.5px; font-weight:600; color:var(--navy);}
.upload-hint{font-size:11.5px; color:var(--gray); font-weight:500 !important;}

/* Pratinjau gambar banner yang dipilih/sudah ada -- elemen TERPISAH dari .upload-box
   (yang cuma tombol pemicu kecil), supaya gambar portrait maupun landscape sama-sama
   tampil utuh (bukan di-crop sempit seperti kalau dipaksa jadi background .upload-box). */
.banner-preview-wrap{
  margin-top:8px;
  border-radius:14px;
  overflow:hidden;
  background:var(--purple-bg);
  text-align:center;
  max-height:360px;
}
.banner-preview-img{
  display:inline-block;
  width:auto; max-width:100%;
  height:auto; max-height:360px;
  object-fit:contain;
}

.event-preview-wrap{position:sticky; top:24px;}
.event-preview-label{font-size:12.5px; font-weight:700; color:var(--gray); margin-bottom:10px; text-transform:uppercase; letter-spacing:.4px;}

/* --- Check-in Scanner (organizer-checkin.html) --- */
.checkin-grid{display:grid; grid-template-columns:1fr 360px; gap:22px; align-items:start;}
.scanner-card{text-align:center;}

.scanner-viewport{
  width:100%; max-width:300px; aspect-ratio:1/1; margin:0 auto 18px;
  background:#0E1D33; border-radius:20px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.scanner-frame{width:66%; height:66%; position:relative;}
.scanner-corner{position:absolute; width:26px; height:26px; border-color:#fff;}
.scanner-corner.tl{top:0; left:0; border-top:3px solid; border-left:3px solid; border-radius:8px 0 0 0;}
.scanner-corner.tr{top:0; right:0; border-top:3px solid; border-right:3px solid; border-radius:0 8px 0 0;}
.scanner-corner.bl{bottom:0; left:0; border-bottom:3px solid; border-left:3px solid; border-radius:0 0 0 8px;}
.scanner-corner.br{bottom:0; right:0; border-bottom:3px solid; border-right:3px solid; border-radius:0 0 8px 0;}
.scanner-line{
  position:absolute; left:16%; right:16%; top:16%; height:2px;
  background:linear-gradient(90deg,transparent,#22C55E,transparent);
  opacity:0;
}
.scanner-viewport.scanning .scanner-line{opacity:1; animation:scanmove 1.4s ease-in-out infinite;}
@keyframes scanmove{0%{top:16%;} 50%{top:84%;} 100%{top:16%;}}
.scanner-hint{position:absolute; bottom:12px; left:0; right:0; color:#fff; opacity:.65; font-size:11.5px;}
.scanner-status{font-size:13.5px; color:var(--gray); margin-bottom:16px; min-height:20px;}

.checkin-manual{display:flex; gap:10px; margin-top:20px; text-align:left;}
.checkin-manual .form-input{flex:1;}

.checkin-result-empty{
  text-align:center; padding:30px 10px; color:var(--gray);
}
.checkin-result-empty svg{width:38px; height:38px; color:var(--line); margin-bottom:10px;}
.checkin-result-empty p{font-size:13px;}

.checkin-result-card{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px; border-radius:14px;
  background:#DCFCE7; border:1px solid #86EFAC;
}
.checkin-result-card.warn{background:#FEF3C7; border-color:#FCD34D;}
.checkin-result-ico{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:#22C55E; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.checkin-result-card.warn .checkin-result-ico{background:#F59E0B;}
.checkin-result-name{font-size:14.5px; font-weight:800; color:var(--navy);}
.checkin-result-meta{font-size:12px; color:var(--gray); margin-top:2px; line-height:1.6;}
.checkin-result-status{font-size:12px; font-weight:700; color:#15803D; margin-top:6px;}
.checkin-result-card.warn .checkin-result-status{color:#B45309;}

/* --- Admin pages (admin-dashboard.html / admin-users.html / admin-events.html) --- */
.admin-toolbar{
  display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px;
}
.admin-toolbar .form-input{margin:0;}
.admin-search{flex:1; min-width:200px; position:relative;}
.admin-search svg{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--gray); pointer-events:none;
}
.admin-search input{padding-left:38px;}
.admin-toolbar select{width:auto; min-width:150px;}

.admin-table-wrap{overflow-x:auto; margin:0 -2px;}
.admin-table{width:100%; border-collapse:collapse; min-width:640px;}
.admin-table th{
  text-align:left; font-size:11px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:var(--gray);
  padding:0 14px 12px; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.admin-table td{
  padding:14px; border-bottom:1px solid var(--line);
  font-size:13.5px; color:var(--navy); vertical-align:middle;
}
.admin-table tr:last-child td{border-bottom:none;}
.admin-user-cell{display:flex; align-items:center; gap:10px;}
.admin-user-cell .dash-avatar{width:34px; height:34px; font-size:12px;}
.admin-user-name{font-weight:700;}
.admin-user-email{font-size:12px; color:var(--gray); font-weight:400;}

.role-pill{
  display:inline-block; font-size:11px; font-weight:700;
  padding:5px 12px; border-radius:999px; white-space:nowrap;
}
.role-pill.peserta{background:var(--purple-bg); color:var(--purple);}
.role-pill.organizer{background:#DBEAFE; color:#1D4ED8;}
.role-pill.admin{background:#0E1D33; color:#fff;}

.status-pill{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; padding:5px 12px; border-radius:999px; white-space:nowrap;
}
.status-pill::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor;}
.status-pill.active{background:#DCFCE7; color:#15803D;}
.status-pill.inactive{background:#F1F5F9; color:#64748B;}

.admin-table-actions{display:flex; gap:8px; white-space:nowrap;}

.category-tag-list{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px;}
.category-tag{
  display:flex; align-items:center; gap:8px;
  background:var(--purple-bg); color:var(--purple);
  font-size:13px; font-weight:700;
  padding:8px 14px; border-radius:999px;
}
.category-tag span.count{font-weight:600; opacity:.75;}
.category-tag button{
  border:none; background:none; color:inherit; cursor:pointer;
  font-size:14px; line-height:1; opacity:.6; padding:0;
}
.category-tag button:hover{opacity:1;}
.add-category-row{display:flex; gap:10px;}
.add-category-row .form-input{flex:1;}

/* --- Profil (profil.html — shared by Peserta / Organizer / Admin) --- */
.profile-grid{display:grid; grid-template-columns:1fr 300px; gap:22px; align-items:start;}
.profile-avatar-row{display:flex; align-items:center; gap:16px; margin-bottom:24px;}
.profile-avatar-preview{
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--purple-btn),var(--purple-dark));
  color:#fff; font-weight:700; font-size:20px;
  display:flex; align-items:center; justify-content:center;
}
.profile-avatar-hint{font-size:11.5px; color:var(--gray); margin-top:8px;}
.profile-form-actions{display:flex; align-items:center; gap:16px; margin-top:22px;}
.profile-form-actions .auth-msg{margin:0;}

.account-info-list{display:flex; flex-direction:column; gap:14px;}
.account-info-item{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--navy);}
.account-info-item svg{width:16px; height:16px; color:var(--purple); flex-shrink:0;}
.account-info-item b{font-weight:700;}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1180px){
  .wrap{padding:0 30px;}
  .nav-inner{padding:clamp(10px,2.5vh,24px) 30px;}
  nav.links{gap:22px; font-size:14px;}
  .hero-left h1{font-size:clamp(24px,5vh,42px);}
  .event-grid, .fitur-grid{grid-template-columns:repeat(2,1fr);}
  .benefit-grid, .contact-grid{grid-template-columns:repeat(2,1fr);}
  .event-detail-grid{grid-template-columns:1fr 300px; gap:26px;}
  .create-event-grid{grid-template-columns:1fr 280px; gap:20px;}
  .checkin-grid{grid-template-columns:1fr 320px;}
}
@media (max-width: 980px){
  /* Below this width the layout stacks to one column — fitting everything
     into one screen stops being realistic, so allow normal scrolling. */
  body{background-image:none;}
  /* Header is already solid on every breakpoint (set in the base rule above),
     so no mobile override is needed there. Footer still gets a solid mobile
     background too — no busy page background behind it once it's removed below. */
  .site-footer{
    background:var(--purple-bg2);
    backdrop-filter:none; -webkit-backdrop-filter:none;
    border-top:none;
    box-shadow: 0 -2px 14px rgba(91,47,209,.1);
    padding: 9px 20px;
  }
  .site-footer p{font-size:8.5px; line-height:1.5;}

  /* Footer must sit flush at the bottom with zero gap either above or below it.
     Keep body as a flex column with min-height:100vh (grows/scrolls normally
     for tall content, but never leaves blank space below a short page) and
     vertically CENTER the hero content within the leftover space instead of
     stretching it or leaving a single ugly empty block — any extra room gets
     split evenly above/below the content, which reads as intentional. */
  body.is-beranda{height:auto; min-height:100vh; overflow:visible;}
  body.is-beranda #beranda.page.active{min-height:auto;}
  /* .wrap-hero and main.hero keep their NATURAL content height (flex:none) so
     .hero-bg's justify-content:center below has actual leftover space to
     distribute — if they also grow to fill, there'd be nothing left to center. */
  .wrap-hero{flex:none; min-height:auto;}
  .hero-bg{min-height:auto; justify-content:center;}
  main.hero{flex:none; min-height:auto;}

  .nav-inner{flex-wrap:wrap;}
  nav.links{order:3; width:100%; justify-content:center; gap:18px; padding-top:14px; border-top:1px solid var(--line); margin-top:14px;}
  main.hero{grid-template-columns:1fr; align-items:center; padding:24px 0 22px;}
  .hero-left h1{font-size:38px;}
  .hero-left p.lead{margin-top:18px;}
  .feature-grid{margin-top:26px;}
  .cta-row{margin-top:28px;}
  .hashtag{margin-top:20px;}
  /* Phone mockup + floating badges hidden on mobile — keeps the page short and light. */
  .hero-right{display:none;}

  .split-row{grid-template-columns:1fr; gap:30px;}
  .split-row .split-visual{order:-1;}
  .stat-row{grid-template-columns:repeat(3,1fr);}

  .event-detail-grid{grid-template-columns:1fr; gap:28px;}
  .event-sidebar{position:static;}
  .event-banner{height:200px; font-size:56px;}
  .speaker-grid{grid-template-columns:1fr;}
  .event-meta-row{gap:14px;}

  /* Sidebar collapses to a slim top bar (logo + toggle); the nav list becomes
     a dropdown drawer opened via the toggle, same pattern as the main site nav. */
  .dash-shell{flex-direction:column;}
  .dash-sidebar{
    width:100%; position:relative;
    padding:14px 18px; border-right:none; border-bottom:1px solid var(--line);
  }
  .dash-sidebar-head{border-bottom:none; padding:0; margin-bottom:0;}
  .dash-nav-toggle{display:flex;}
  .dash-nav{
    display:none;
    position:absolute; top:100%; left:18px; right:18px;
    margin-top:10px; z-index:20;
    background:#fff; border:1px solid var(--line); border-radius:16px;
    padding:10px; box-shadow:0 18px 40px rgba(30,20,80,.16);
  }
  .dash-nav.open{display:flex;}
  .dash-main{padding:26px 22px 50px;}
  .dash-stats{grid-template-columns:1fr 1fr;}
  .cert-grid{grid-template-columns:1fr;}

  .org-event-row{flex-wrap:wrap;}
  .org-quota-mini{order:1; width:auto; flex:1 1 140px;}
  .org-actions{order:2;}

  .create-event-grid{grid-template-columns:1fr;}
  .event-preview-wrap{position:static;}

  .checkin-grid{grid-template-columns:1fr;}

  .profile-grid{grid-template-columns:1fr;}
}
@media (max-width: 560px){
  .wrap{padding:0 18px;}
  .nav-inner{padding:12px 18px;}
  .feature-grid{grid-template-columns:repeat(2,1fr); gap:12px; max-width:none;}
  .feature-item{padding:14px;}
  .hero-left h1{font-size:29px;}

  /* Nav links collapse behind a hamburger toggle instead of vanishing. */
  .hamburger{display:flex;}
  nav.links{
    display:none;
    position:absolute;
    top:100%;
    left:18px;
    right:18px;
    margin-top:10px;
    background:#fff;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:6px 18px;
    border-radius:16px;
    box-shadow:0 18px 40px rgba(30,20,80,.16);
    border:1px solid var(--line);
    z-index:20;
  }
  nav.links.open{display:flex;}
  nav.links a{
    padding:13px 0;
    border-bottom:1px solid var(--line);
    padding-bottom:13px;
  }
  nav.links a:last-child{border-bottom:none;}
  nav.links a.active::after{display:none;}

  /* Trim the logo and tighten gaps a touch so Masuk + Daftar both still fit
     alongside it on narrow phones — kept a little more generous than a bare
     minimum squeeze so it still feels comfortable, not cramped. */
  .nav-inner{gap:10px;}
  .logo-icon{height:34px;}
  .logo-text{height:17px;}
  .logo-tagline{display:none;}
  .nav-actions{gap:8px;}
  .nav-actions .btn{padding:9px 14px; font-size:12.5px; border-radius:10px;}
  .hamburger{width:34px; height:34px; border-radius:9px;}
  .hamburger svg{width:16px; height:16px;}

  .event-grid, .fitur-grid, .benefit-grid, .contact-grid{grid-template-columns:1fr;}
  .event-thumb{height:130px; font-size:36px;}
  .email-float{right:16px; bottom:16px; width:52px; height:52px;}
  .email-float svg{width:26px;height:26px;}
  .stat-row{grid-template-columns:1fr;}
  .page-hero{padding:40px 0 28px;}

  .auth-card{padding:30px 22px;}
  .legal-doc{padding:26px 22px;}
  .form-row-2{grid-template-columns:1fr;}

  .event-banner{height:150px; font-size:42px; border-radius:16px;}
  .event-meta-row{flex-direction:column; align-items:flex-start; gap:10px;}
  .agenda-item{gap:12px;}
  .agenda-time{width:66px; font-size:12px;}
  .reg-card{padding:20px;}
  .event-main{padding:22px 18px; border-radius:16px;}

  .ticket-page{padding:32px 0 70px;}
  .ticket-top{padding:22px 20px 18px;}
  .ticket-perforation{margin:0 20px;}
  .ticket-bottom{padding:24px 20px 26px;}
  .qr-wrap{width:140px; height:140px;}
  .ticket-actions{flex-direction:column;}

  .certificate-page{padding:28px 0 60px;}
  .certificate-inner{padding:36px 22px 28px;}
  .certificate-inner::before{inset:6px;}
  .certificate-desc{font-size:13px;}
  .certificate-footer{flex-direction:column; align-items:stretch; gap:22px;}
  .certificate-verify{justify-content:flex-start;}

  .dash-topbar{flex-wrap:wrap;}
  .dash-user-role{display:none;}
  .dash-stats{grid-template-columns:1fr;}
  .dash-stat-card{padding:16px 18px;}
  .dash-section{padding:20px 18px;}
  .dash-event-row{flex-wrap:wrap;}
  .dash-badge{margin-left:auto;}
  .dash-sidebar{padding:12px 16px;}
  .dash-nav-toggle{width:34px; height:34px; border-radius:9px;}
  .dash-nav-toggle svg{width:16px; height:16px;}
  .dash-nav{left:16px; right:16px;}

  .org-actions{width:100%;}
  .org-actions .btn{flex:1; justify-content:center;}

  .create-event-form .form-section-title{margin:24px 0 4px; padding-top:18px;}
  .upload-box{padding:22px 16px;}

  .scanner-viewport{max-width:230px;}
  .checkin-manual{flex-direction:column;}

  .admin-toolbar{flex-direction:column;}
  .admin-toolbar select{width:100%;}
  .admin-table{min-width:560px;}
  .add-category-row{flex-direction:column;}

  .profile-form-actions{flex-direction:column; align-items:stretch;}
}