:root{
  --ink:#1e2430;
  --panel:#272e3c;
  --panel-2:#313949;
  --line:#454e60;
  --brass:#c9a227;
  --brass-soft:#e6c65c;
  --teal:#3e8073;
  --text:#eee9df;
  --muted:#8b93a1;
  --danger:#c1554d;
  --radius:16px;
  --hole:var(--ink);
  --wrap:70%;
  --wrap-max:1000px;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--ink);color:var(--text);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;}
.display{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.5px;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--brass);color:#181a10;}

.wrap{width:var(--wrap);max-width:var(--wrap-max);margin:0 auto;}
@media(max-width:900px){ .wrap{width:92%;} }

@keyframes shimmer{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
.foil{
  background:linear-gradient(120deg,var(--brass),var(--brass-soft),var(--teal),var(--brass));
  background-size:300% 300%;animation:shimmer 6s ease infinite;
}

/* ---------- header ---------- */
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(18,21,28,.92);backdrop-filter:blur(10px);z-index:50;}
header .wrap{display:flex;align-items:center;justify-content:space-between;padding:20px 0;}
.brand{display:flex;align-items:center;gap:9px;}
.brand .display{font-size:21px;color:var(--text);}
.brand svg{width:20px;height:20px;}
nav.tabs{display:flex;gap:2px;}
nav.tabs a{
  background:none;border:none;color:var(--muted);padding:9px 16px;border-radius:999px;
  font-size:14px;cursor:pointer;transition:.15s;font-family:'Inter',sans-serif;font-weight:500;display:inline-block;
}
nav.tabs a:hover{color:var(--text);}
nav.tabs a.active{background:var(--panel);color:var(--brass-soft);}
.status-tag{
  display:flex;align-items:center;gap:8px;padding:7px 13px 7px 8px;border-radius:999px;
  font-size:12.5px;font-family:'IBM Plex Mono',monospace;border:1px dashed var(--line);background:var(--panel);
}
.status-tag .swatch{width:15px;height:15px;border-radius:50%;background:var(--muted);}
.status-tag.premium{border-color:var(--brass);color:var(--brass-soft);}
.status-tag.premium .swatch{background:none;}

/* ---------- pages ---------- */
.page{padding:56px 0 90px;}

.eyebrow{font-family:'IBM Plex Mono',monospace;color:var(--brass);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px;}

/* --- beranda --- */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px;}
h1.hero-title{font-size:clamp(30px,4.2vw,50px);line-height:1.06;margin:0;max-width:680px;}
h1.hero-title .accent{color:var(--brass-soft);}
.hero p.sub{color:var(--muted);font-size:15.5px;line-height:1.7;max-width:520px;margin:0;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.btn{border:none;border-radius:999px;padding:13px 24px;font-size:14px;font-weight:700;cursor:pointer;transition:.15s;font-family:'Inter',sans-serif;display:inline-block;}
.btn-brass{background:var(--brass);color:#211a06;}
.btn-brass:hover{background:var(--brass-soft);transform:translateY(-2px);}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text);}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass-soft);}

/* --- harga --- */
.section-head{margin-bottom:30px;text-align:center;}
.section-head h2{font-size:clamp(24px,3vw,32px);margin:0;}
.section-head p.sh-sub{color:var(--muted);font-size:14px;margin:10px 0 0;font-family:'Inter',sans-serif;text-transform:none;letter-spacing:0;}
.tickets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.price-ticket{background:var(--panel);border:1px solid var(--line);border-radius:18px;position:relative;display:flex;flex-direction:column;overflow:hidden;}
.price-ticket.featured{border-color:var(--brass);}
.ribbon{
  position:absolute;top:16px;right:-34px;transform:rotate(38deg);
  background:var(--brass);color:#1a1204;font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:700;
  padding:5px 40px;letter-spacing:.5px;
}
.price-ticket .pt-head{padding:24px 22px 16px;}
.price-ticket .pt-head .plan-name{font-size:19px;}
.price-ticket .pt-head .price-row{display:flex;align-items:baseline;gap:6px;margin-top:10px;}
.price-ticket .pt-head .price-row .amount{font-family:'IBM Plex Mono',monospace;font-size:28px;color:var(--brass-soft);}
.price-ticket .pt-head .price-row .per{font-size:12px;color:var(--muted);}
.price-ticket .note{font-size:11px;color:var(--teal);font-family:'IBM Plex Mono',monospace;margin-top:6px;}
.price-ticket .pt-body{padding:16px 22px;flex:1;display:flex;flex-direction:column;gap:12px;}
.price-ticket ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.price-ticket li{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:flex-start;}
.price-ticket li svg{width:14px;height:14px;flex-shrink:0;margin-top:2px;stroke:var(--teal);}
.price-ticket.featured li svg{stroke:var(--brass-soft);}
.price-ticket .pt-foot{padding:18px 22px 22px;}
.plan-btn{
  width:100%;border:1px solid var(--line);background:transparent;color:var(--text);
  padding:11px;border-radius:999px;font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s;font-family:'Inter',sans-serif;
}
.plan-btn.primary{background:var(--brass);color:#1a1204;border-color:var(--brass);}
.plan-btn.primary:hover{filter:brightness(1.08);}
.plan-btn.active{background:var(--teal);color:#0d1a17;border-color:var(--teal);}
.plan-btn:not(.active):not(.primary):hover{border-color:var(--brass);color:var(--brass-soft);}

/* --- katalog --- */
.filters{display:flex;gap:8px;margin-bottom:26px;justify-content:center;}
.filters button{
  background:var(--panel);border:1px solid var(--line);color:var(--muted);
  padding:8px 16px;border-radius:999px;font-size:13px;cursor:pointer;font-family:'Inter',sans-serif;
}
.filters button.active{color:var(--text);border-color:var(--brass);}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;}
.stub{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;position:relative;overflow:hidden;}
.stub-cover{
  width:100%;aspect-ratio:16/9;background:var(--panel-2);overflow:hidden;
  border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;
}
.stub-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s;}
.stub:hover .stub-cover img{transform:scale(1.04);}
.stub-cover .cover-icon{font-size:44px;opacity:.7;}
.stub-top{padding:18px 18px 14px;display:flex;gap:12px;align-items:stretch;flex:1;}
.stub-icon{width:40px;height:40px;border-radius:10px;background:var(--panel-2);flex-shrink:0;align-self:flex-start;display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid var(--line);}
.stub-top h3{margin:0 0 4px;font-size:15px;font-family:'Inter',sans-serif;}
.stub-top p{
  margin:0;font-size:12.5px;color:var(--muted);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.stub-top p.full{display:block;-webkit-line-clamp:unset;overflow:visible;}
.stub-top .stub-body{display:flex;flex-direction:column;flex:1;min-width:0;}
.tag-row{margin-top:auto;padding-top:10px;display:flex;gap:6px;flex-wrap:wrap;}
.tag-row .tag{margin-top:0;}
.stub .tag{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);border:1px dashed var(--line);padding:3px 8px;border-radius:999px;display:inline-block;margin-top:8px;}
.stub-action{padding:14px 18px;display:flex;justify-content:flex-end;}
.go-btn{font-size:12.5px;font-weight:700;padding:9px 16px;border-radius:999px;border:none;cursor:pointer;background:var(--teal);color:#0d1a17;font-family:'Inter',sans-serif;}
.go-btn:hover{filter:brightness(1.1);}
.preview-btn{
  font-size:12.5px;font-weight:700;padding:9px 16px;border-radius:999px;cursor:pointer;
  background:var(--brass);border:none;color:#211a06;font-family:'Inter',sans-serif;
  display:inline-block;transition:.15s;
}
.preview-btn:hover{background:var(--brass-soft);}

/* --- kategori & pagination --- */
.cat-btn{
  background:var(--panel);border:1px solid var(--line);color:var(--muted);
  padding:8px 16px;border-radius:999px;font-size:13px;cursor:pointer;font-family:'Inter',sans-serif;
  display:inline-block;transition:.15s;
}
.cat-btn:hover{color:var(--text);}
.cat-btn.active{color:#211a06;border-color:var(--brass);background:var(--brass);font-weight:700;}

.pagination{display:flex;justify-content:center;gap:8px;margin-top:36px;flex-wrap:wrap;}
.page-btn{
  min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line);color:var(--muted);
  border-radius:10px;font-size:14px;font-weight:600;transition:.15s;font-family:'IBM Plex Mono',monospace;
}
.page-btn:hover{border-color:var(--brass);color:var(--brass-soft);}
.page-btn.active{background:var(--brass);border-color:var(--brass);color:#211a06;}
.locked-btn{font-size:12.5px;font-weight:700;padding:9px 16px;border-radius:999px;cursor:pointer;background:transparent;border:1px solid var(--brass);color:var(--brass-soft);font-family:'Inter',sans-serif;}
.stamp{position:absolute;top:36%;right:-24px;transform:rotate(-18deg);font-size:12px;letter-spacing:2px;padding:5px 28px;border:2px solid var(--brass);color:var(--brass-soft);opacity:.85;}
.stamp.unlocked{border-color:transparent;color:#1a1204;font-weight:700;}
.empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius);}

/* ---------- admin ---------- */
.admin-toggle{position:fixed;bottom:20px;right:20px;z-index:60;}
.admin-toggle button{background:var(--panel);border:1px solid var(--line);color:var(--muted);width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:16px;}
.admin-panel{position:fixed;bottom:74px;right:20px;width:320px;max-height:70vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;z-index:60;box-shadow:0 20px 50px rgba(0,0,0,.5);display:none;}
.admin-panel.open{display:block;}
.admin-panel h4{margin:0 0 12px;font-size:16px;}
.admin-panel input, .admin-panel select, .admin-panel textarea{width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--text);padding:9px 10px;border-radius:8px;font-size:13px;margin-bottom:8px;font-family:'Inter',sans-serif;}
.admin-panel textarea{resize:vertical;min-height:50px;}
.admin-panel label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-family:'IBM Plex Mono',monospace;}
.admin-list{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;}
.admin-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line);gap:8px;}
.admin-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.admin-row button{background:none;border:none;color:var(--danger);cursor:pointer;font-size:12px;}

.sub-section{padding-top:56px;padding-bottom:56px;border-top:1px solid var(--line);margin-top:56px;}
.tint-band{
  background:#f2f2f2;
  color:var(--text);
  --panel:#ffffff;
  --panel-2:#e7e7e7;
  --line:#d8d8d8;
  --text:#181a16;
  --muted:#5c655f;
  --hole:#f2f2f2;
  --brass-soft:#a3801d;
}

/* --- FAQ / Q&A --- */
.faq{display:flex;flex-direction:column;gap:12px;max-width:720px;margin:0 auto;}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.faq-q{
  width:100%;background:none;border:none;color:var(--text);text-align:left;
  padding:16px 20px;font-size:14.5px;font-weight:600;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:'Inter',sans-serif;
}
.faq-q .plus{color:var(--brass);font-size:18px;transition:transform .2s;flex-shrink:0;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-item.open .faq-a{max-height:200px;}
.faq-a p{margin:0;padding:0 20px 18px;color:var(--muted);font-size:13.5px;line-height:1.65;}

footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);font-size:12px;font-family:'IBM Plex Mono',monospace;}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

@media(max-width:860px){
  .tickets-grid{grid-template-columns:1fr;}
}

/* --- panel admin --- */
.admin-table-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:auto;background:var(--panel);}
.admin-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.admin-table th{
  text-align:left;padding:14px 16px;color:var(--muted);font-family:'IBM Plex Mono',monospace;
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--line);
}
.admin-table td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle;}
.admin-table tr:last-child td{border-bottom:none;}
.badge-on{background:rgba(62,128,115,.2);color:var(--teal);padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;}
.badge-off{background:rgba(193,85,77,.15);color:var(--danger);padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;}
.mini-btn{
  font-size:12px;font-weight:600;padding:7px 13px;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--text);font-family:'Inter',sans-serif;
  display:inline-block;transition:.15s;
}
.mini-btn:hover{border-color:var(--brass);color:var(--brass-soft);}
.mini-btn.danger{border-color:rgba(193,85,77,.5);color:var(--danger);}
.mini-btn.danger:hover{border-color:var(--danger);background:rgba(193,85,77,.1);}
.admin-form{display:flex;flex-direction:column;gap:6px;}
.admin-form label{
  font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;
  font-family:'IBM Plex Mono',monospace;margin-top:12px;
}
.admin-form input, .admin-form select, .admin-form textarea{
  width:100%;background:var(--panel);border:1px solid var(--line);color:var(--text);
  padding:11px 14px;border-radius:9px;font-size:14px;font-family:'Inter',sans-serif;
}
.admin-form textarea{resize:vertical;}

/* --- halaman detail produk (galeri + info) --- */
.produk-detail{display:grid;grid-template-columns:1.05fr 0.95fr;gap:32px;align-items:start;}
@media(max-width:800px){.produk-detail{grid-template-columns:1fr;}}
.pd-gallery{position:sticky;top:96px;}
.pd-main{
  position:relative;width:100%;
  background:transparent;border:none;padding:0;overflow:visible;
  display:flex;align-items:center;justify-content:center;
}
.pd-main img{width:100%;height:auto;object-fit:contain;display:block;border-radius:18px;}
.pd-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.pd-thumbs img{
  width:76px;height:56px;object-fit:contain;background:var(--panel);padding:4px;border-radius:8px;cursor:pointer;
  border:2px solid var(--line);opacity:.65;transition:.15s;
}
.pd-thumbs img:hover{opacity:1;}
.pd-thumbs img.active{border-color:var(--brass);opacity:1;}
.pd-info h1{margin:0 0 8px;font-size:24px;font-family:'Inter',sans-serif;font-weight:700;}
.pd-info .pd-desc{margin:0;font-size:14.5px;color:var(--muted);line-height:1.6;}
.pd-preview{font-size:14px;line-height:1.8;color:var(--text);}

/* --- dashboard admin --- */
.dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;}
@media(max-width:800px){.dash-grid{grid-template-columns:1fr;}}
.dash-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;}
.dash-card.highlight{border-color:var(--brass);}
.dash-label{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.dash-value{font-family:'Anton',sans-serif;font-size:32px;margin-top:8px;color:var(--brass-soft);}
.dash-sub{font-size:12.5px;color:var(--muted);margin-top:4px;}
.dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:800px){.dash-cols{grid-template-columns:1fr;}}
.dash-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;}
.dash-panel h3{margin:0 0 16px;font-size:15px;font-family:'Inter',sans-serif;font-weight:700;}
.bar-list{display:flex;flex-direction:column;gap:12px;}
.bar-row{display:grid;grid-template-columns:110px 1fr 90px;gap:10px;align-items:center;font-size:12.5px;}
.bar-label{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar-track{height:10px;background:var(--panel-2);border-radius:999px;overflow:hidden;}
.bar-fill{height:100%;background:var(--brass);border-radius:999px;min-width:2px;}
.bar-fill.teal{background:var(--teal);}
.bar-val{text-align:right;font-family:'IBM Plex Mono',monospace;color:var(--text);}

/* --- kotak pencarian di header --- */
.search-box{
  display:flex;align-items:center;gap:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;min-width:180px;transition:.15s;
}
.search-box:focus-within{border-color:var(--brass);}
.search-box svg{width:15px;height:15px;color:var(--muted);flex-shrink:0;}
.search-box input{
  background:none;border:none;outline:none;color:var(--text);
  font-size:13.5px;font-family:'Inter',sans-serif;width:100%;
}
.search-box input::placeholder{color:var(--muted);}
@media(max-width:980px){.search-box{min-width:120px;}}

/* --- dropdown live search --- */
.search-box{position:relative;}
.search-dropdown{
  position:absolute;top:calc(100% + 8px);left:0;right:0;min-width:280px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.4);overflow:hidden;display:none;z-index:80;
}
.search-dropdown.open{display:block;}
.search-item{
  display:flex;align-items:center;gap:11px;padding:10px 14px;
  border-bottom:1px solid var(--line);transition:.12s;text-decoration:none;
}
.search-item:last-child{border-bottom:none;}
.search-item:hover{background:var(--panel-2);}
.search-item img, .search-item .si-icon{
  width:42px;height:32px;border-radius:6px;object-fit:cover;flex-shrink:0;
  background:var(--panel-2);display:flex;align-items:center;justify-content:center;font-size:16px;
}
.search-item .si-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.3;}
.search-item .si-cat{font-size:11px;color:var(--muted);font-family:'IBM Plex Mono',monospace;}
.search-empty{padding:14px;text-align:center;color:var(--muted);font-size:13px;}

/* --- riwayat download member --- */
.history-list{display:flex;flex-direction:column;gap:12px;}
.history-row{
  display:flex;align-items:center;gap:14px;padding:12px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
}
.history-thumb{
  width:80px;height:56px;border-radius:8px;overflow:hidden;flex-shrink:0;
  background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:24px;
}
.history-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.history-body{flex:1;min-width:0;}
.history-title{font-size:14.5px;font-weight:600;color:var(--text);display:block;}
.history-title:hover{color:var(--brass-soft);}
.history-meta{font-size:12px;color:var(--muted);margin-top:3px;}
.history-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;}
@media(max-width:640px){
  .history-row{flex-wrap:wrap;}
  .history-actions{width:100%;justify-content:flex-end;}
}

/* --- tombol support whatsapp --- */
.wa-btn{
  position:fixed;bottom:22px;right:22px;z-index:90;
  display:flex;align-items:center;gap:10px;
  background:#25d366;color:#fff;text-decoration:none;
  padding:11px 18px;border-radius:999px;
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:.15s;
}
.wa-btn:hover{background:#1fbd5a;transform:translateY(-2px);}
.wa-btn svg{width:22px;height:22px;flex-shrink:0;}
@media(max-width:640px){
  .wa-btn span{display:none;} /* di HP cukup ikon bulat */
  .wa-btn{padding:13px;}
}