:root{
  --bg:#111;--bg2:#181818;--text:#f6ebdd;--muted:#a9a398;
  --primary:#b51f2e;--primary-dark:#7a0e1a;--accent:#c9a961;--on-primary:#f6ebdd;
  --accent-text:var(--accent);--line:rgba(246,235,221,.12);--hero-img:url(/assets/website-hero-background-1920x800.webp);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:72px;background:var(--bg)}
body{background:var(--bg);color:var(--text);font:400 17px/1.65 Barlow,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:10px 24px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font:700 24px/1 "Barlow Condensed",sans-serif;letter-spacing:2px}
.nav nav{display:flex;gap:22px;margin-left:auto;font-weight:600;font-size:15px}
.nav nav a{opacity:.8}.nav nav a:hover{opacity:1;color:var(--accent-text)}
.lang{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.lang button{background:none;border:0;color:var(--text);font:600 13px Barlow,sans-serif;padding:6px 11px;cursor:pointer}
.lang button[aria-pressed=true]{background:var(--accent-text);color:var(--bg)}

.hero{min-height:calc(100svh - 61px);display:flex;align-items:center;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 88%,transparent),color-mix(in srgb,var(--bg) 25%,transparent) 70%),var(--hero-img) center/cover no-repeat,linear-gradient(135deg,var(--primary-dark),var(--bg))}
.hero.compact{min-height:52vh}
.hero-inner{max-width:1100px;width:100%;margin:auto;padding:72px 24px}
.eyebrow{font:600 13px "Barlow Condensed",sans-serif;letter-spacing:3px;color:var(--accent-text);text-transform:uppercase}
h1{font:700 clamp(64px,15vw,190px)/.92 "Barlow Condensed",sans-serif;letter-spacing:2px;margin:10px 0 18px}
.hero.compact h1{font-size:clamp(52px,10vw,120px)}
.tag{max-width:540px;font-size:clamp(18px,2.4vw,22px)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-block;padding:13px 26px;background:var(--primary);color:var(--on-primary);font-weight:700;border-radius:6px;border:1px solid var(--primary);transition:.2s;cursor:pointer;font-family:inherit;font-size:16px}
.btn:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.btn.ghost{background:transparent;border-color:var(--accent-text);color:var(--accent-text)}
.btn.ghost:hover{background:var(--accent-text);color:var(--bg)}
.btn.small{padding:9px 16px;font-size:14px;margin-top:auto;align-self:flex-start}
.btn.disabled{background:transparent;border:1px dashed var(--line);color:var(--muted);cursor:default}

.sec{padding:88px 24px}
.sec.alt{background:var(--bg2);border-block:1px solid var(--line)}
.wrap{max-width:1100px;margin:auto}.wrap.narrow{max-width:700px}
.sec-head{margin-bottom:32px}
h2{font:700 clamp(36px,6vw,60px)/1 "Barlow Condensed",sans-serif;letter-spacing:1px;margin:8px 0 12px}
.sub{max-width:580px;color:var(--muted)}
.note{margin-top:18px;font-size:14px;color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grid.two{grid-template-columns:repeat(2,1fr)}
.card{display:block;background:var(--bg2);border:1px solid var(--line);border-top:3px solid var(--primary);border-radius:8px;padding:22px}
.alt .card{background:var(--bg)}
.card h3{font:700 24px/1.2 "Barlow Condensed",sans-serif;letter-spacing:.5px;margin-bottom:6px}
.card p{color:var(--muted);font-size:15px}
.card.link{border-top-color:var(--accent);transition:transform .2s}.card.link:hover{transform:translateY(-4px)}
.card.soon p{font-style:italic}
.go{display:inline-block;margin-top:14px;color:var(--accent-text);font-weight:600;font-size:15px}

.clubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.club-card{display:flex;flex-direction:column;gap:6px;background:var(--bg2);border:1px solid var(--line);border-top:4px solid var(--card-accent,var(--primary));border-radius:8px;padding:22px;min-height:170px;transition:transform .2s}
a.club-card:hover{transform:translateY(-4px)}
.club-card h3{font:700 30px/1.1 "Barlow Condensed",sans-serif;letter-spacing:.5px}
.club-card p{color:var(--muted);font-size:15px;flex:1}
.club-card.is-soon{opacity:.75}
.pill{align-self:flex-start;border:1px solid var(--line);border-radius:99px;padding:3px 12px;font-size:13px;font-weight:600;color:var(--accent-text)}

/* katalog */
.soon-box{padding:28px;border:1px dashed var(--line);border-radius:8px;color:var(--muted)}
.banner{background:color-mix(in srgb,var(--accent) 22%,transparent);border:1px solid var(--accent);border-radius:6px;padding:10px 14px;font-size:14px;margin-bottom:16px}
.disclosure{font-size:14px;color:var(--muted);border-left:3px solid var(--accent);padding:4px 0 4px 14px;margin-bottom:24px;max-width:860px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tabs button{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:99px;padding:8px 18px;font:600 15px Barlow,sans-serif;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.tier-note{font-size:14px;color:var(--muted);max-width:760px;margin-bottom:18px}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.filters select,.filters input{background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:9px 12px;font:inherit;font-size:15px}
.filters input{flex:1 1 200px;min-width:160px}
.pcount{font-size:13px;color:var(--muted);margin-bottom:14px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.pcard{display:flex;flex-direction:column;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:18px}
.pcard.tier-A{border-top:3px solid var(--accent)}.pcard.tier-B{border-top:3px solid var(--primary)}.pcard.tier-D{border-top:3px solid var(--muted)}
.pcard h3{font:600 17px/1.35 Barlow,sans-serif;overflow-wrap:anywhere}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{font-size:12px;font-weight:700;letter-spacing:.3px;padding:2px 9px;border-radius:4px;border:1px solid var(--line);color:var(--muted)}
.badge.tier-A{border-color:var(--accent);color:var(--accent-text)}
.badge.tier-B{border-color:var(--primary);color:var(--text);background:color-mix(in srgb,var(--primary) 30%,transparent)}
.price{font-weight:600;font-size:15px}
.meta,.multi{font-size:13px;color:var(--muted)}
.multi{border-left:2px solid var(--accent);padding-left:8px}
.empty{grid-column:1/-1;padding:26px;border:1px dashed var(--line);border-radius:8px;color:var(--muted)}

.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-bottom:24px}
.vgrid[hidden]{display:none}
.vitem{border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:8px;overflow:hidden;background:var(--bg)}
.vitem .frame{aspect-ratio:16/9;background:#000}
.vitem iframe{width:100%;height:100%;border:0;display:block}
.vitem p{padding:12px 16px;font-weight:600;font-size:15px}

.foot{border-top:1px solid var(--line);padding:36px 24px;background:color-mix(in srgb,var(--bg) 85%,#000);color:var(--muted);font-size:14px}
.foot-in{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.foot .brand{color:var(--text);font-size:20px}
.foot p{flex:1 1 280px}.copy{flex:0 0 auto!important}

@media(max-width:860px){
  .nav nav{display:none}.lang{margin-left:auto}
  .grid,.grid.two{grid-template-columns:1fr}.sec{padding:60px 20px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card.link,a.club-card{transition:none}}

html[data-mode=light] .hero{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 14%,var(--bg)),var(--bg))}
html[data-mode=light] .foot{background:var(--bg2)}

/* jelajah, paket, halaman teks */
.flink{color:var(--accent-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.foot .flink{margin-right:8px}
.entry{display:grid;gap:22px}
.tgroup h3{font:700 15px "Barlow Condensed",sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.tiles{display:flex;flex-wrap:wrap;gap:10px}
.tile{display:inline-flex;align-items:center;gap:8px;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:99px;padding:9px 16px;font:600 15px Barlow,sans-serif;cursor:pointer;transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--accent-text);transform:translateY(-2px)}
.tile small{color:var(--muted);font-size:12px}
.gift{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;padding:18px;border:1px dashed var(--line);border-radius:8px}
.gift select{background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:10px 12px;font:inherit;font-size:15px;flex:1 1 180px}
.pkgrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.card.pkg{display:flex;flex-direction:column;gap:8px}
.card.pkg .badge{align-self:flex-start}
.wrap.narrow-wide{max-width:760px}
.pitem{margin-bottom:26px}
.pitem .why{margin-top:10px;font-size:17px;color:var(--text);font-style:italic;padding-left:14px;border-left:3px solid var(--accent)}
.total{margin:30px 0;padding:18px 20px;border:1px solid var(--accent);border-radius:8px;background:color-mix(in srgb,var(--accent) 10%,transparent);display:flex;flex-direction:column;gap:4px}
.total strong{font:700 28px "Barlow Condensed",sans-serif;letter-spacing:.5px}
.total small{color:var(--muted);font-size:13px}
.closing{font-size:19px;margin-bottom:26px}
.pcard .why{font-size:15px;font-style:italic;color:var(--text)}
.prose h2{font-size:30px;margin:34px 0 8px}
.prose p{margin-bottom:12px;color:var(--text)}