/* ============================================================
   Cussgo Design System
   Palette: Indigo-violet primer + Coral aksen + netral hangat
   Type: Plus Jakarta Sans
   Signature: motif "ticket stub" (tepi perforasi) pada kartu & e-ticket
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --indigo:#5B39F6;
  --indigo-dark:#24118F;
  --violet:#3C22D8;
  --indigo-soft:#EEEAFF;
  --coral:#FF6B6B;
  --coral-dark:#FF5555;
  --ink:#0F1020;
  --muted:#667085;
  --line:#E7E8F0;
  --bg:#F5F6FA;
  --card:#FFFFFF;
  --ok:#16A34A;     --ok-bg:#E7F6EC;
  --warn:#B45309;   --warn-bg:#FCF1DC;
  --bad:#DC2626;    --bad-bg:#FBE7E7;
  --radius:28px;
  --radius-sm:16px;
  --shadow:0 1px 2px rgba(16,16,32,.04), 0 12px 40px rgba(16,24,40,.06);
  --maxw:1180px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{overflow-x:hidden}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  line-height:1.55; font-size:15px; -webkit-font-smoothing:antialiased;
}
a{color:var(--indigo); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2; margin:0 0 .5em; font-weight:800; letter-spacing:-.02em}
h1{font-size:clamp(28px,4vw,40px)}
h2{font-size:22px; margin-top:8px}
h3{font-size:17px}
.muted{color:var(--muted)}
img{max-width:100%; display:block}

/* ---- environment banner ---- */
.envbar{padding:9px 16px; text-align:center; font-size:13px; font-weight:700; color:#fff; letter-spacing:.01em}
.envbar.demo{background:var(--bad)}
.envbar.sandbox{background:var(--warn)}

/* ---- top navigation ---- */
.topbar{
  background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
.topbar .inner{
  max-width:var(--maxw); margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:24px;
  position:relative;
}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:20px; color:var(--ink); letter-spacing:-.03em}
.brand:hover{text-decoration:none}
.brand svg{display:block}
.topbar .primary-nav{margin-left:auto; display:flex; gap:6px; align-items:center}
.topbar .primary-nav a{
  color:var(--muted); font-weight:600; font-size:14px;
  padding:8px 14px; border-radius:10px;
}
.topbar .primary-nav a:hover{background:var(--indigo-soft); color:var(--indigo); text-decoration:none}

.topbar-actions{display:flex; gap:2px; align-items:center}
.ic-btn{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:none; background:transparent;
  color:var(--ink); cursor:pointer;
  transition:background .15s, color .15s;
  text-decoration:none; padding:0;
  font-family:inherit;
}
.ic-btn:hover{background:var(--indigo-soft); color:var(--indigo); text-decoration:none}
.ic-btn:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}

.drawer{
  position:absolute; top:calc(100% + 6px); right:20px;
  min-width:248px; background:#fff;
  border:1px solid var(--line); border-radius:12px;
  box-shadow:0 14px 40px rgba(16,24,40,.14);
  padding:6px; display:none; z-index:50;
}
.drawer.is-open{display:block; animation:drawerIn .15s ease-out}
@keyframes drawerIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.drawer a{
  display:flex; align-items:center; gap:11px;
  padding:10px 13px; border-radius:8px;
  color:var(--ink); font-weight:600; font-size:14px; text-decoration:none;
}
.drawer a:hover{background:var(--indigo-soft); color:var(--indigo); text-decoration:none}
.drawer a .dic{width:20px; height:20px; flex:0 0 20px; display:inline-flex; align-items:center; justify-content:center; color:var(--indigo)}
.drawer a .dic svg{width:19px; height:19px}
.drawer a:hover .dic{color:var(--indigo)}
.drawer-div{height:1px; background:var(--line); margin:6px 0}

.container{max-width:var(--maxw); margin:0 auto; padding:28px 20px 64px}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--indigo); color:#fff; font-weight:700; font-size:14px;
  border:none; border-radius:12px; padding:12px 20px; cursor:pointer;
  transition:transform .06s ease, background .15s ease; font-family:inherit;
}
.btn:hover{background:var(--indigo-dark); text-decoration:none; color:#fff}
.btn:active{transform:translateY(1px)}
.btn.coral{background:var(--coral)} .btn.coral:hover{background:var(--coral-dark)}
.btn.secondary{background:var(--indigo-soft); color:var(--indigo)}
.btn.secondary:hover{background:#E2DAFF; color:var(--indigo-dark)}
.btn.ghost{background:transparent; color:var(--muted); border:1px solid var(--line)}
.btn.ghost:hover{background:var(--bg); color:var(--ink)}
.btn.block{width:100%}
.btn.lg{padding:15px 26px; font-size:15px}

/* ---- cards ---- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:22px; box-shadow:var(--shadow)}
.card + .card{margin-top:16px}

/* ---- forms ---- */
.form label{display:block; font-weight:600; font-size:13px; margin:14px 0 6px; color:var(--ink)}
.input,.form select,.form textarea,select.input{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:11px;
  font-family:inherit; font-size:14px; background:#fff; color:var(--ink);
}
.input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--indigo); outline-offset:1px; border-color:transparent}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* ---- grid & event cards (signature: ticket stub notch) ---- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px}
.event-card{padding:0; overflow:hidden; transition:transform .12s ease, box-shadow .12s ease; position:relative}
.event-card:hover{transform:translateY(-3px); box-shadow:0 18px 48px rgba(91,57,246,.18)}
.event-card .thumb{aspect-ratio:16/9; background:linear-gradient(145deg,var(--indigo),var(--indigo-dark)); object-fit:cover; width:100%}
.event-card .body{padding:16px 18px 20px}
.event-card h3{margin:0 0 6px; font-size:16px}
.event-card .price{color:var(--indigo); font-weight:800; margin-top:10px; font-size:15px}
.pill{display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; letter-spacing:.02em}
.pill.free{background:var(--ok-bg); color:var(--ok)}
.pill.cat{background:var(--indigo-soft); color:var(--indigo)}

/* hero */
.hero{
  background:linear-gradient(145deg,var(--indigo) 0%,var(--violet) 55%,var(--indigo-dark) 100%);
  color:#fff; border-radius:24px; padding:48px 40px; margin-bottom:32px; position:relative; overflow:hidden;
}
.hero h1{color:#fff; max-width:16ch}
.hero p{font-size:16px; opacity:.92; max-width:46ch; margin:0}
.hero .blob{position:absolute; right:-60px; top:-60px; width:280px; height:280px; background:rgba(255,255,255,.08); border-radius:50%}

/* ---- tables ---- */
.table{width:100%; border-collapse:collapse; background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); font-size:14px}
.table th{background:var(--indigo-soft); color:var(--indigo-dark); text-align:left; padding:12px 14px; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.03em}
.table td{padding:12px 14px; border-top:1px solid var(--line)}
.table tr:hover td{background:var(--bg)}

/* ---- status chips ---- */
.status{display:inline-block; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.02em}
.status.unused,.status.paid,.status.ok{background:var(--ok-bg); color:var(--ok)}
.status.pending{background:var(--warn-bg); color:var(--warn)}
.status.used,.status.failed,.status.expired,.status.cancelled,.status.bad{background:var(--bad-bg); color:var(--bad)}

/* ---- stat cards ---- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:8px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow)}
.stat .n{font-size:26px; font-weight:800; letter-spacing:-.02em}
.stat .l{color:var(--muted); font-size:13px; font-weight:600; margin-top:2px}
.stat.accent{background:linear-gradient(145deg,var(--indigo),var(--indigo-dark)); color:#fff; border:none}
.stat.accent .l{color:rgba(255,255,255,.85)}

/* ---- admin layout (sidebar) ---- */
.admin-wrap{display:grid; grid-template-columns:230px 1fr; gap:0; min-height:100vh}
.sidebar{background:var(--ink); color:#fff; padding:22px 16px; position:sticky; top:0; height:100vh}
.sidebar .brand{color:#fff; margin-bottom:24px; padding:0 8px}
.sidebar a{display:block; color:#B8B3C9; font-weight:600; font-size:14px; padding:10px 12px; border-radius:10px; margin-bottom:2px}
.sidebar a:hover,.sidebar a.active{background:rgba(255,255,255,.08); color:#fff; text-decoration:none}
.admin-main{padding:28px 32px 64px; max-width:1000px}
.admin-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:16px; flex-wrap:wrap}

/* ---- banner / event detail ---- */
.banner{width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:20px; margin-bottom:20px; background:linear-gradient(145deg,var(--indigo),var(--indigo-dark))}

/* ---- e-ticket (signature: portrait ticket, notched, sesuai brief) ---- */
.ticket-wrap{max-width:360px; margin:24px auto}
.eticket{
  position:relative; overflow:hidden; text-align:center; background:var(--card);
  /* sudut ter-notch ala tiket portrait (brief clip-path) */
  clip-path:polygon(6% 0,94% 0,100% 4%,100% 96%,94% 100%,6% 100%,0 96%,0 4%);
  filter:drop-shadow(0 20px 50px rgba(16,24,40,.18));
}
.eticket .head{
  background:linear-gradient(145deg,var(--indigo),var(--indigo-dark));
  color:#fff; padding:30px 26px 26px; text-align:left;
}
.eticket .head .wm{font-size:30px; font-weight:800; letter-spacing:-.05em; line-height:1; margin:0}
.eticket .head .coral-line{width:46px; height:5px; background:var(--coral); border-radius:4px; margin:12px 0 18px}
.eticket .head h2{color:#fff; margin:0 0 16px; font-size:23px; font-weight:800; letter-spacing:-.03em; line-height:1.12; text-transform:uppercase}
.eticket .head .meta-row{font-size:13px; opacity:.92; margin:3px 0; font-weight:500}
.eticket .qr-zone{background:#fff; padding:28px 20px 18px}
.eticket .qr-zone .qrbox{display:flex; justify-content:center}
.eticket .qr-zone .qrbox img,.eticket .qr-zone .qrbox canvas{width:210px; height:210px}
.eticket .qr-zone .tid-label{margin-top:14px; font-size:13px; font-weight:800; letter-spacing:.14em; color:#98A2B3; text-transform:uppercase}
.eticket .qr-zone .tid-value{font-size:18px; font-weight:800; letter-spacing:.04em; color:var(--ink); margin-top:2px}
.eticket .holder{background:#fff; color:var(--muted); font-size:13px; padding:0 20px 14px}
.eticket .holder strong{color:var(--ink); font-weight:700}
.eticket .band{background:var(--coral); color:#fff; padding:18px; font-weight:800; font-size:19px; letter-spacing:.02em; text-transform:uppercase}
.eticket .band .st{display:block; font-size:11px; font-weight:700; letter-spacing:.1em; opacity:.9; margin-top:4px}
.ticket-actions{display:flex; flex-direction:column; gap:8px; margin-top:18px}

/* ---- scanner ---- */
.scanbox{max-width:480px; margin:0 auto}
.scan-result-box{margin-top:16px; padding:26px 16px; border-radius:16px; text-align:center; font-weight:700; background:#E9E7F0; color:var(--muted); transition:background .15s}
.scan-result-box .big{font-size:26px; font-weight:800; line-height:1.2; margin-bottom:6px}
.scan-result-box .name{font-size:20px; font-weight:700}
.scan-result-box .sub{font-size:14px; opacity:.85; margin-top:4px}
.scan-result-box.ok{background:var(--ok); color:#fff}
.scan-result-box.bad{background:var(--bad); color:#fff}
.scan-result-box.checking{background:#FBBF24; color:#1f2937}

/* footer */
.footer{border-top:1px solid var(--line); padding:24px 20px; text-align:center; color:var(--muted); font-size:13px}

/* helpers */
.field-row{margin-bottom:8px}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.center{text-align:center}

/* responsive */
@media (max-width:760px){
  .admin-wrap{grid-template-columns:1fr}
  .sidebar{position:static; height:auto; display:flex; flex-wrap:wrap; gap:4px; padding:12px}
  .sidebar .brand{width:100%; margin-bottom:8px}
  .sidebar a{flex:0 0 auto}
  .admin-main{padding:20px}
  .hero{padding:32px 24px}
}

/* print: only e-ticket */
@media print{
  body *{visibility:hidden}
  #ticket-print,#ticket-print *{visibility:visible}
  #ticket-print{position:absolute; left:0; top:0; width:100%}
  .no-print{display:none !important}
  .envbar,.topbar,.footer{display:none !important}
  @page{margin:10mm}
}

/* ---- category chips (jelajah) ---- */
.chip{display:inline-block;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-weight:700;font-size:13px;cursor:pointer;transition:all .12s}
.chip:hover{border-color:var(--indigo);color:var(--indigo);text-decoration:none}
.chip.active{background:var(--indigo);border-color:var(--indigo);color:#fff}
.chip.active:hover{color:#fff}

/* ---- revenue calculator rows ---- */
.calc-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:15px}
.calc-row span{color:var(--muted)}
.calc-row.total{border-top:2px solid var(--line);margin-top:6px;padding-top:14px;font-size:18px}
.calc-row.total span{color:var(--ink);font-weight:700}
.calc-row.total strong{font-size:22px;font-weight:800}

/* ---- home search bar ---- */
.home-search{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.home-search .input[name=q]{flex:1;min-width:200px}
.home-search select{width:auto;min-width:140px}
.home-search .btn{flex-shrink:0}

/* ---- banner carousel ---- */
.carousel{position:relative;border-radius:20px;overflow:hidden;margin-bottom:24px;box-shadow:var(--shadow)}
.carousel .slides{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.slide{position:relative;flex:0 0 100%;height:340px;background-size:cover;background-position:center;display:flex;align-items:flex-end;text-decoration:none;color:#fff}
.slide:hover{text-decoration:none;color:#fff}
.slide-tag{position:absolute;top:18px;left:18px;background:var(--coral);color:#fff;font-weight:800;font-size:11px;letter-spacing:.06em;padding:5px 12px;border-radius:999px}
.slide-cap{padding:26px 28px;width:100%}
.slide-cap h2{color:#fff;margin:0 0 6px;font-size:26px;letter-spacing:-.02em;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.slide-cap p{margin:0;opacity:.95;font-size:14px;font-weight:500;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.car-btn:hover{background:#fff}
.car-btn.prev{left:14px} .car-btn.next{right:14px}
.car-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:7px}
.car-dots .dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:all .2s}
.car-dots .dot.active{background:#fff;width:24px;border-radius:5px}

/* ---- section heads, chips row ---- */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin:8px 0 16px}
.sec-head h2{margin:0}
.chips-row{gap:8px;margin-bottom:22px;flex-wrap:wrap}

/* ---- calendar ---- */
.cal{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-grid .dow{text-align:center;font-size:12px;font-weight:700;color:var(--muted);padding:4px 0}
.cal-cell{min-height:74px;border:1px solid var(--line);border-radius:10px;padding:6px;font-size:12px;background:#fff}
.cal-cell.empty{background:transparent;border:none}
.cal-cell .dnum{font-weight:700;color:var(--muted);font-size:12px}
.cal-cell.today{border-color:var(--indigo);box-shadow:0 0 0 1px var(--indigo) inset}
.cal-ev{display:block;background:var(--indigo-soft);color:var(--indigo-dark);border-radius:6px;padding:2px 5px;margin-top:3px;font-size:11px;font-weight:600;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-ev:hover{background:var(--indigo);color:#fff;text-decoration:none}

/* ---- news article ---- */
.article{max-width:720px;margin:0 auto}
.article .cover{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;margin-bottom:20px}
.article h1{margin-bottom:8px}
.article .meta{color:var(--muted);font-size:14px;margin-bottom:24px}
.article .body{font-size:16px;line-height:1.8}
.article .body p{margin:0 0 16px}

/* ---- mobile responsive ---- */
@media (max-width:760px){
  .slide{height:240px}
  .slide-cap h2{font-size:20px}
  .home-search{flex-direction:column}
  .home-search .input[name=q],.home-search select,.home-search .btn{width:100%}
  .topbar .primary-nav{display:none}
  .topbar .inner{gap:12px}
  .sec-head{flex-direction:row;align-items:center}
  .cal-cell{min-height:54px;padding:3px}
  .cal-ev{font-size:10px}
}
@media (max-width:420px){
  .cal-cell .dnum{font-size:11px}
  .slide-cap{padding:18px}
}

/* ---- inline link-style button (admin tables) ---- */
.linkbtn{background:none;border:none;padding:0;margin:0;font:inherit;color:var(--indigo);cursor:pointer;text-decoration:none}
.linkbtn:hover{text-decoration:underline}

/* ---- sidebar badge ---- */
.badge{display:inline-block;background:var(--coral);color:#fff;font-size:11px;font-weight:800;padding:1px 7px;border-radius:999px;margin-left:4px}

/* ============================================================
   UI POLISH v3 — perbaikan tata letak, ukuran, font, kontras
   ============================================================ */

/* event hero (halaman event) lebih pendek, tidak memenuhi layar */
.event-hero,.event-banner{max-height:300px}
.event-card .thumb{aspect-ratio:3/2}

/* judul kartu lebih ringkas */
.event-card h3{font-size:15px;line-height:1.3}
.event-card .body{padding:14px 16px 18px}

/* jarak antar section dirapatkan */
.sec-head{margin:28px 0 14px}
.grid+.sec-head{margin-top:34px}

/* tombol coral: pastikan teks kontras (coral sudah digelapkan via token) */
.btn.coral{color:#fff;background:linear-gradient(180deg,#FF6B6B,#E85555)}.btn.coral:hover{background:linear-gradient(180deg,#FF5555,#E04848)}

/* login & kartu kecil: judul tidak terlalu besar */
.auth-card h1,.card>h1:first-child{font-size:26px}

/* envbar sandbox lebih halus (tidak terlalu mencolok saat demo) */
.envbar.sandbox{background:#3C2E66;font-weight:600;letter-spacing:0;font-size:12px;opacity:.96}

/* footer berkolom */
.footer{padding:0;text-align:left}
.foot-inner{max-width:var(--maxw);margin:0 auto;padding:32px 20px 20px;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot-links{display:flex;flex-direction:column;gap:8px}
.foot-links a{color:var(--muted);font-size:14px}
.foot-links a:hover{color:var(--indigo);text-decoration:none}
.foot-bottom{border-top:1px solid var(--line);padding:14px 20px;text-align:center;color:var(--muted);font-size:12px;max-width:var(--maxw);margin:0 auto}

/* hint scroll pada nav mobile + sembunyikan label panjang */
@media (max-width:760px){
  .foot-inner{flex-direction:column;gap:18px}
}

/* empty-state ramah */
.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.empty .ico{font-size:40px;margin-bottom:10px;opacity:.5}
.empty p{margin:0 0 14px}

/* form grouping di halaman event */
.form-group{padding:16px 0 4px;border-top:1px solid var(--line);margin-top:8px}
.form-group:first-of-type{border-top:none}
.form-sec{font-size:15px;margin:0 0 10px;color:var(--ink)}
.banner.event-banner{width:100%;height:280px;object-fit:cover;border-radius:16px;margin-bottom:18px}

/* ============================================================
   HOME: Download Ticket CTA + FAQ
   ============================================================ */

/* download-ticket band */
.dl-ticket{
  margin:36px 0;
  background:linear-gradient(135deg,var(--indigo),var(--indigo-dark));
  border-radius:var(--radius-sm);
  padding:34px 30px;
  color:#fff;
  position:relative;overflow:hidden;
}
.dl-ticket::before{ /* motif ticket-stub samar */
  content:"";position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:200px;height:200px;border-radius:24px;
  background:radial-gradient(circle at 0 50%, transparent 14px, rgba(255,255,255,.06) 15px) ,
            radial-gradient(circle at 100% 50%, transparent 14px, rgba(255,255,255,.06) 15px);
  background-size:100% 100%;opacity:.6;pointer-events:none;
}
.dl-inner{display:flex;align-items:center;gap:30px;justify-content:space-between;flex-wrap:wrap;position:relative;z-index:1}
.dl-text{flex:1;min-width:260px}
.dl-tag{display:inline-block;background:rgba(255,255,255,.18);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;padding:4px 10px;border-radius:999px;margin-bottom:10px}
.dl-text h2{color:#fff;margin:0 0 6px;font-size:22px}
.dl-text p{margin:0;opacity:.92;font-size:14px;max-width:52ch}
.dl-form{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.dl-form .input{min-width:220px;border:none}
.dl-form .btn{white-space:nowrap}

/* FAQ accordion */
.faq-sec{margin:40px 0 8px}
.faq{display:flex;flex-direction:column;gap:10px;max-width:820px}
.faq-item{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:0;overflow:hidden;transition:border-color .15s ease;
}
.faq-item[open]{border-color:var(--indigo)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:16px 48px 16px 18px;
  font-weight:700;font-size:15px;position:relative;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-size:22px;font-weight:400;color:var(--indigo);transition:transform .2s ease;line-height:1;
}
.faq-item[open] summary::after{content:"−"}
.faq-item summary:hover{color:var(--indigo)}
.faq-a{padding:0 18px 18px;color:var(--muted);font-size:14px;line-height:1.65}
.faq-a strong{color:var(--ink)}

@media (max-width:640px){
  .dl-ticket{padding:26px 20px}
  .dl-inner{flex-direction:column;align-items:flex-start;gap:18px}
  .dl-form{width:100%}
  .dl-form .input{flex:1;min-width:0}
}

/* ============================================================
   FAQ v2 (label kiri · accordion kanan) — identitas Cussgo
   ============================================================ */
.faq2{display:grid;grid-template-columns:0.8fr 1.2fr;gap:40px;align-items:start;margin:48px 0 8px}
.faq2-head h2{font-size:34px;margin:0}
.faq2-rule{display:block;width:64px;height:4px;border-radius:2px;background:var(--coral);margin:10px 0 16px}
.faq2-head p{font-size:14px;max-width:34ch}
.faq2-list{display:flex;flex-direction:column;gap:12px}
.faq2-item{background:var(--indigo);border-radius:14px;overflow:hidden;transition:background .15s ease;box-shadow:0 6px 18px rgba(91,57,246,.18)}
.faq2-item[open]{background:var(--indigo-dark)}
.faq2-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;color:#fff;font-weight:700;font-size:15px}
.faq2-item summary::-webkit-details-marker{display:none}
.faq2-ico{position:relative;width:18px;height:18px;flex:0 0 18px}
.faq2-ico::before,.faq2-ico::after{content:"";position:absolute;background:#fff;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.faq2-ico::before{left:0;top:8px;width:18px;height:2px}
.faq2-ico::after{left:8px;top:0;width:2px;height:18px}
.faq2-item[open] .faq2-ico::after{transform:scaleY(0);opacity:0}
.faq2-a{padding:0 20px 18px;color:rgba(255,255,255,.86);font-size:14px;line-height:1.65}
.faq2-a strong{color:#fff}

/* ============================================================
   STAY IN THE LOOP (subscribe) — split, identitas Cussgo
   ============================================================ */
.sub2{margin:48px 0 12px}
.sub2-card{
  display:grid;grid-template-columns:1.1fr .9fr;gap:0;align-items:stretch;
  background:linear-gradient(135deg,#1a0f4d,var(--ink));
  border:1px solid rgba(255,255,255,.08);border-radius:24px;overflow:hidden;
  box-shadow:var(--shadow);
}
.sub2-left{padding:44px 40px}
.sub2-left h2{color:#fff;font-size:34px;letter-spacing:-.01em;margin:0;text-transform:uppercase}
.sub2-rule{display:block;width:120px;height:4px;border-radius:2px;background:var(--coral);margin:14px 0 20px}
.sub2-left p{color:rgba(255,255,255,.72);font-size:15px;max-width:42ch;margin:0 0 24px}
.sub2-input{display:flex;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:6px 6px 6px 18px;max-width:420px}
.sub2-input input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:15px;font-family:inherit;padding:12px 0}
.sub2-input input::placeholder{color:rgba(255,255,255,.45)}
.sub2-input button{flex:0 0 auto;width:42px;height:42px;border:none;border-radius:10px;background:var(--coral);color:#fff;font-size:18px;cursor:pointer;transition:background .15s ease}
.sub2-input button:hover{background:var(--coral-dark)}
.sub2-msg{font-size:13px;margin:12px 0 0}
.sub2-msg.ok{color:#86efac}
.sub2-msg.err{color:#fda4a4}
/* sisi kanan: art bergaya (glow + ticket-stub), tanpa foto eksternal */
.sub2-right{position:relative;min-height:200px;background:radial-gradient(120% 120% at 80% 30%,rgba(91,57,246,.55),transparent 60%)}
.sub2-art{position:absolute;inset:0;overflow:hidden}
.sub2-glow{position:absolute;right:14%;top:50%;transform:translateY(-50%);width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(248,89,91,.5),transparent 65%);filter:blur(8px)}
.sub2-ticket{position:absolute;right:18%;top:50%;transform:translateY(-50%) rotate(-8deg);width:150px;height:96px;border-radius:14px;background:rgba(255,255,255,.10);border:1px dashed rgba(255,255,255,.25)}
.sub2-ticket::before,.sub2-ticket::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;background:var(--ink)}
.sub2-ticket::before{left:-9px}.sub2-ticket::after{right:-9px}

/* ============================================================
   IKLAN SPONSOR (ad slots)
   ============================================================ */
.ad-wrap{margin:30px 0}
.ad-slot{position:relative;display:block;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--card)}
.ad-slot img,.ad-slot video{width:100%;height:auto;display:block}
.ad-slot.ad-leaderboard{max-height:160px}
.ad-slot.ad-leaderboard img{height:160px;object-fit:cover}
.ad-label{position:absolute;top:8px;left:8px;z-index:2;background:rgba(15,16,32,.72);color:#fff;font-size:10px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:6px;text-transform:uppercase}
.ad-fallback{display:flex;align-items:center;justify-content:center;min-height:120px;color:var(--muted);font-weight:700}
.ad-sidebar{max-width:300px}
.ad-inline{margin:18px 0}

@media (max-width:820px){
  .faq2{grid-template-columns:1fr;gap:20px}
  .sub2-card{grid-template-columns:1fr}
  .sub2-right{min-height:140px;order:-1}
  .sub2-left{padding:32px 24px}
  .sub2-left h2,.faq2-head h2{font-size:26px}
}

/* ---- toggle switch (terbit/sembunyikan cepat) ---- */
.toggle{
  display:inline-block;width:44px;height:24px;border-radius:999px;border:none;cursor:pointer;
  background:var(--line);position:relative;padding:0;transition:background .18s ease;vertical-align:middle;
}
.toggle .knob{
  position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s ease;
}
.toggle.on{background:var(--ok)}
.toggle.on .knob{transform:translateX(20px)}
.toggle:hover{filter:brightness(.97)}

/* ---- iklan samping FAQ (kolom kiri) ---- */
.faq2-ad{margin-top:24px;position:sticky;top:90px}
.faq2-ad .ad-slot{border-radius:14px}
@media (max-width:820px){ .faq2-ad{position:static;margin-top:16px;max-width:100%} }