/* BEGADUH Theme — maps Design DNA onto Bootstrap 5 + BEGADUH components.
   See docs/DESIGN_GUIDE.md §15. Depends on bgd-tokens.css. */

/* ── Google fonts (self-host in web/fonts for production) ── */
@import url('google-fonts.css');
/* ── Bootstrap Icons (self-hosted) ── */
@import url('bootstrap-icons.min.css');

/* ── Bootstrap variable overrides ── */
:root {
  --bs-primary:#E23B2E; --bs-primary-rgb:226,59,46;
  --bs-secondary:#0d0c10; --bs-secondary-rgb:13,12,16;
  --bs-success:#1B9E54; --bs-warning:#F59E0B; --bs-danger:#DC2A2A; --bs-info:#E23B2E;
  --bs-body-color:#333C4E;
  --bs-body-font-family:var(--font-body);
  --bs-border-color:#E1E7F0;
  --bs-border-radius:.625rem;
  --bs-link-color:#E23B2E; --bs-link-hover-color:#57140E;
}

body { background:var(--surface-page); color:var(--slate-700); font-family:var(--font-body); }
h1,h2,h3,.display-heading { font-family:var(--font-display); font-weight:700; color:var(--slate-800); }
.text-muted-2 { color:var(--slate-500); }
.font-mono { font-family:var(--font-mono); }

/* ── Buttons ── */
.btn { font-weight:600; border-radius:var(--radius-md); }
.btn-primary { --bs-btn-bg:var(--royal-500); --bs-btn-border-color:var(--royal-500);
  --bs-btn-hover-bg:var(--royal-600); --bs-btn-hover-border-color:var(--royal-600);
  --bs-btn-active-bg:var(--royal-700); }
.btn-outline-primary { --bs-btn-color:var(--royal-500); --bs-btn-border-color:var(--royal-500);
  --bs-btn-hover-bg:var(--royal-500); }
.bgd-btn-gold { --bs-btn-bg:var(--gold-500); --bs-btn-color:var(--royal-900);
  --bs-btn-hover-bg:var(--gold-400); --bs-btn-hover-color:var(--royal-900);
  --bs-btn-active-bg:var(--gold-600); --bs-btn-border-color:transparent; font-weight:700; }
:focus-visible { outline:none; box-shadow:var(--ring); }

/* ── Navbar (public) ── */
.bgd-navbar { background:var(--surface-darkest); }
/* Custom dark bar isn't Bootstrap's .navbar-dark, so force a white hamburger
   icon — otherwise the toggler is near-invisible on the dark background. */
.bgd-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.92%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.bgd-navbar .navbar-brand, .bgd-navbar .nav-link { color:rgba(255,255,255,.9); }
.bgd-navbar .nav-link:hover { color:#fff; }
.bgd-navbar .nav-link.active { color:var(--gold-500); box-shadow:inset 0 -2px 0 var(--gold-500); }
/* Desktop: open navbar dropdowns on hover (no click needed); no gap so the
   pointer can travel into the menu. Mobile keeps the tap-to-open behaviour. */
@media (min-width: 992px) {
  .bgd-navbar .nav-item.dropdown:hover > .dropdown-menu { display:block; }
  .bgd-navbar .nav-item.dropdown > .dropdown-menu { margin-top:0; }
}
/* Mobile: collapsed menu — scrollable, bigger tap targets, dark submenus */
@media (max-width: 991.98px) {
  #mainNav { max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .bgd-navbar .navbar-nav { padding-bottom: .5rem; }
  .bgd-navbar .nav-link { padding-top: .6rem; padding-bottom: .6rem; }
  .bgd-navbar .dropdown-menu { border: 0; box-shadow: none; margin: .1rem 0 .4rem; padding-left: .5rem;
    background: rgba(255,255,255,.06); border-left: 2px solid var(--gold-500); border-radius: 0; }
  .bgd-navbar .dropdown-menu .dropdown-item { color: rgba(255,255,255,.85); padding-top: .5rem; padding-bottom: .5rem; white-space: normal; }
  .bgd-navbar .dropdown-menu .dropdown-item:hover,
  .bgd-navbar .dropdown-menu .dropdown-item:active,
  .bgd-navbar .dropdown-menu .dropdown-item.active { background: rgba(255,255,255,.12); color: #fff; }
  .bgd-navbar .dropdown-divider { border-color: rgba(255,255,255,.2); }
}

/* ── Hero ── */
.bgd-hero { background:var(--surface-dark); color:#fff; position:relative; }
.bgd-hero--photo { background-size:cover; background-position:center; }
.bgd-hero--photo::before { content:""; position:absolute; inset:0; background:var(--hero-gradient); }
.bgd-hero > .container { position:relative; z-index:1; }
.bgd-hero h1 { color:#fff; text-transform:uppercase; letter-spacing:.5px; line-height:.95;
  font-size:clamp(2.5rem,6vw,4.5rem); }

/* ── Section band ── */
.bgd-band { background:var(--royal-500); color:#fff; }
.bgd-section-title { font-family:var(--font-display); text-transform:uppercase; color:var(--royal-500);
  position:relative; padding-bottom:.5rem; }
.bgd-section-title::after { content:""; display:block; width:48px; height:3px; background:var(--gold-500); margin-top:.4rem; }

/* "Selengkapnya →" inline link — branded, no default blue underline. */
.bgd-link-more { display:inline-flex; align-items:center; gap:.35rem; font-weight:600; font-size:.85rem;
  color:var(--royal-600); text-decoration:none; text-transform:uppercase; letter-spacing:.03em;
  transition:color var(--motion-base) var(--ease-standard), gap var(--motion-base) var(--ease-standard); }
.bgd-link-more:hover { color:var(--gold-600,#d4a017); gap:.6rem; }

/* ── Intro preloader (OM-style splash; shows once per browsing session) ── */
#bgd-preloader { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 38%, var(--royal-700,#E23B2E), var(--royal-900,#0d0c10) 70%, #0d0c10);
  animation:bgd-intro-out .6s ease 1.5s forwards; }
#bgd-preloader .pl-inner { text-align:center; }
#bgd-preloader .pl-mark { width:320px; height:150px; margin:0 auto; background:center/contain no-repeat;
  filter:drop-shadow(0 14px 40px rgba(0,0,0,.6)); animation:bgd-intro-mark 1.5s cubic-bezier(.2,.7,.2,1) both; }
#bgd-preloader .pl-word { margin-top:1rem; color:#fff; font-family:var(--font-display,inherit); letter-spacing:.35em;
  font-weight:700; font-size:.95rem; opacity:0; animation:bgd-intro-word .6s ease .5s forwards; }
#bgd-preloader .pl-bar { width:160px; height:3px; margin:1rem auto 0; border-radius:3px; background:rgba(255,255,255,.18); overflow:hidden; }
#bgd-preloader .pl-bar span { display:block; height:100%; width:40%; border-radius:3px; background:var(--gold-500,#ffc93c);
  animation:bgd-intro-bar 1.3s ease-in-out infinite; }
@keyframes bgd-intro-mark { 0%{opacity:0; transform:translateX(120px) scale(.92);} 55%{opacity:1; transform:translateX(0) scale(1.08);} 100%{opacity:1; transform:translateX(0) scale(1);} }
@keyframes bgd-intro-word { to { opacity:.9; } }
@keyframes bgd-intro-bar { 0%{transform:translateX(-120%);} 100%{transform:translateX(320%);} }
@keyframes bgd-intro-out { to { opacity:0; visibility:hidden; } }
html.intro-seen #bgd-preloader { display:none; }

/* After the splash, reveal navbar first then the content (first visit only) */
@keyframes bgd-reveal { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
html:not(.intro-seen) body > header { animation:bgd-reveal .7s ease 1.55s both; }
html:not(.intro-seen) body > main { animation:bgd-reveal .8s ease 1.8s both; }

@media (prefers-reduced-motion: reduce) {
  #bgd-preloader { display:none; }
  html:not(.intro-seen) body > header,
  html:not(.intro-seen) body > main { animation:none !important; }
}

/* ── Cards ── */
.card { border:1px solid var(--slate-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-e1); }
.bgd-card-hover { transition:transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base); }
.bgd-card-hover:hover { transform:translateY(-2px); box-shadow:var(--shadow-e2); }

/* ── Badges & status pills ── */
.bgd-badge-cat { background:var(--royal-500); color:#fff; border-radius:var(--radius-pill);
  text-transform:uppercase; font-size:.75rem; font-weight:600; letter-spacing:.05em; padding:.25rem .6rem; }
.pill { border-radius:var(--radius-pill); padding:.2rem .6rem; font-size:.8rem; font-weight:600; }
.pill-success { background:var(--success-bg); color:var(--success); }
.pill-warning { background:var(--warning-bg); color:#9a6500; }
.pill-danger  { background:var(--danger-bg);  color:var(--danger); }
.pill-muted   { background:var(--slate-100);  color:var(--slate-600); }


/* ── Social wall tiles ── */
.bgd-social-tile { display:block; position:relative; aspect-ratio:1/1; border-radius:var(--radius-md,10px); overflow:hidden; }
.bgd-social-tile img { width:100%; height:100%; object-fit:cover; transition:transform var(--motion-slow) var(--ease-standard); }
.bgd-social-tile:hover img { transform:scale(1.06); }
.bgd-social-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.6rem; background:linear-gradient(0deg, rgba(13,12,16,.55), rgba(13,12,16,.05));
  opacity:0; transition:opacity var(--motion-base) var(--ease-standard); }
.bgd-social-tile:hover .bgd-social-overlay { opacity:1; }

/* ── Home gallery mosaic ── */
.bgd-gallery-tile { position:relative; cursor:pointer; }
.bgd-gallery-tile img { width:100%; height:100%; object-fit:cover; transition:transform var(--motion-slow) var(--ease-standard); }
.bgd-gallery-tile:hover img { transform:scale(1.05); }
.bgd-gallery-cap { position:absolute; left:0; right:0; bottom:0; padding:.6rem .75rem;
  color:#fff; font-size:.8rem; font-weight:600; line-height:1.2;
  background:linear-gradient(0deg, rgba(13,12,16,.78), rgba(13,12,16,0));
  opacity:0; transform:translateY(8px); transition:opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bgd-gallery-tile:hover .bgd-gallery-cap { opacity:1; transform:translateY(0); }

/* ── Home BEGADUH TV (click-to-play) ── */
.bgd-video-thumb { cursor:pointer; background:#000; }
.bgd-video-thumb img { transition:transform var(--motion-slow) var(--ease-standard); }
.bgd-video-thumb:hover img { transform:scale(1.05); }
.bgd-video-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border:0; background:linear-gradient(0deg, rgba(13,12,16,.35), rgba(13,12,16,.05));
  color:#fff; font-size:3.2rem; line-height:1; text-shadow:0 2px 10px rgba(0,0,0,.55);
  transition:transform var(--motion-base) var(--ease-standard), background var(--motion-base); }
.bgd-video-thumb:hover .bgd-video-play { transform:scale(1.08); background:linear-gradient(0deg, rgba(13,12,16,.45), rgba(13,12,16,.08)); }

/* ── Animated montage intro (gallery title sequence, OM-style) ── */
.bgd-montage { position:relative; overflow:hidden; min-height:clamp(320px,52vh,520px);
  background:linear-gradient(135deg,#191317 0%,#57140E 42%,#E23B2E 100%); display:flex; align-items:center; }
.bgd-montage-layer { position:absolute; inset:0; pointer-events:none; }
.bgd-montage .m-frag { position:absolute; color:#fff; font-family:var(--font-display,Georgia,serif);
  font-weight:800; text-transform:uppercase; line-height:.8; white-space:nowrap; opacity:0; }
.bgd-montage .m-1 { top:-4%; left:2%;  font-size:clamp(5rem,18vw,16rem); animation:m-in-l 1.3s cubic-bezier(.2,.7,.2,1) .10s both; }
.bgd-montage .m-2 { top:8%;  right:4%; font-size:clamp(3rem,10vw,8rem);  animation:m-in-r 1.3s cubic-bezier(.2,.7,.2,1) .25s both; }
.bgd-montage .m-3 { bottom:6%; left:6%; font-size:clamp(2.4rem,8vw,6.5rem); animation:m-in-up 1.3s cubic-bezier(.2,.7,.2,1) .40s both; }
.bgd-montage .m-4 { top:14%; left:40%; font-size:clamp(4rem,12vw,10rem); animation:m-in-zoom 1.4s cubic-bezier(.2,.7,.2,1) .15s both; }
.bgd-montage .m-5 { bottom:30%; left:0; font-size:clamp(1.4rem,4vw,3rem); animation:m-in-l5 1.3s cubic-bezier(.2,.7,.2,1) .55s both; }
.bgd-montage .m-6 { bottom:-3%; right:3%; font-size:clamp(3.5rem,12vw,9rem); animation:m-in-r 1.3s cubic-bezier(.2,.7,.2,1) .35s both; }
.bgd-montage .m-sketch { position:absolute; right:6%; top:16%; width:clamp(120px,16vw,220px); animation:m-sketch-in 1.6s ease .5s both; }
@keyframes m-in-l { 0%{opacity:0; transform:translateX(-120px) scale(.96);} 100%{opacity:.16; transform:none;} }
@keyframes m-in-r { 0%{opacity:0; transform:translateX(120px) scale(.96);} 100%{opacity:.16; transform:none;} }
@keyframes m-in-up { 0%{opacity:0; transform:translateY(80px);} 100%{opacity:.14; transform:none;} }
@keyframes m-in-zoom { 0%{opacity:0; transform:scale(.6);} 60%{opacity:.22;} 100%{opacity:.13; transform:scale(1);} }
@keyframes m-in-l5 { 0%{opacity:0; transform:translateX(-120px) rotate(-6deg);} 100%{opacity:.15; transform:rotate(-6deg);} }
@keyframes m-sketch-in { 0%{opacity:0; transform:scale(.6) rotate(-4deg);} 100%{opacity:.5; transform:rotate(-4deg);} }
.bgd-montage-title { position:relative; z-index:2; color:#fff; }
.bgd-montage-title .mt-kicker { display:inline-block; letter-spacing:.3em; text-transform:uppercase; font-size:.8rem;
  color:var(--gold-500); opacity:0; animation:m-title-in .7s ease .8s both; }
.bgd-montage-title h1 { font-size:clamp(2rem,5vw,3.6rem); margin:.3rem 0; color:#fff; text-shadow:0 4px 24px rgba(0,0,0,.4);
  opacity:0; animation:m-title-in .7s ease .95s both; }
.bgd-montage-title p { max-width:46ch; color:rgba(255,255,255,.8); opacity:0; animation:m-title-in .7s ease 1.1s both; }
@keyframes m-title-in { 0%{opacity:0; transform:translateY(18px);} 100%{opacity:1; transform:none;} }
.bgd-montage::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--gold-500); z-index:2; }

/* Sponsor / partner cards — logo on a clean white tile */
.sponsor-card { border:1px solid var(--slate-200); }
.sponsor-logo-wrap { display:flex; align-items:center; justify-content:center; width:100%; }
.sponsor-logo-wrap img { max-height:100%; max-width:100%; object-fit:contain; transition:transform var(--motion-base) var(--ease-standard); }
.sponsor-card:hover .sponsor-logo-wrap img { transform:scale(1.05); }

/* Pitchside perimeter boards — a static row of printed ad panels along the touchline */
.bgd-board-wrap { position:relative; }
.bgd-board { display:flex; border-radius:6px 6px 0 0; overflow:hidden; box-shadow:0 6px 16px rgba(23,21,26,.18);
  border:1px solid var(--slate-200); border-bottom:0; }
.bgd-board .bd { flex:1 1 0; min-width:0; height:74px; background:#fff; display:flex; align-items:center; justify-content:center;
  padding:8px 12px; border-right:1px solid #eef1f6; }
.bgd-board .bd:last-child { border-right:0; }
.bgd-board .bd img { max-height:48px; max-width:100%; object-fit:contain; }
/* grass strip beneath the boards, like the pitch in front of them */
.bgd-board-grass { height:14px; border-radius:0 0 6px 6px;
  background:repeating-linear-gradient(90deg, #2e8b57 0 28px, #34995f 28px 56px); box-shadow:inset 0 6px 10px rgba(0,0,0,.18); }
@media (max-width:575px){ .bgd-board .bd { height:58px; } }

/* Partnership page — branded benefit panel + chip-style interest selectors */
.partner-aside { position:relative; overflow:hidden; border-radius:var(--radius-xl,16px);
  background:linear-gradient(150deg,var(--royal-900,#0d0c10),var(--royal-700,#8E1A11)); color:#fff; }
.partner-aside::after { content:""; position:absolute; right:-44px; bottom:-44px; width:210px; height:210px;
  background:url(../img/logo-mark.png) center/contain no-repeat; opacity:.07; pointer-events:none; }
.partner-aside .pa-body { position:relative; z-index:1; padding:2rem; }
.partner-aside ul li span { color:rgba(255,255,255,.88); font-size:.92rem; }
.partner-aside ul li i { color:var(--gold-500); font-size:1.1rem; flex:0 0 auto; }
.partner-aside .pa-tier { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .7rem; border-radius:999px;
  font-size:.78rem; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); }
.partner-aside .pa-tier i { color:var(--gold-500); }

.bgd-chip { display:inline-flex; align-items:center; gap:.3rem; padding:.5rem .85rem; border:1.5px solid var(--slate-200,#dfe3ea);
  border-radius:999px; cursor:pointer; font-size:.85rem; color:var(--slate-700,#3b4555); user-select:none;
  transition:border-color var(--motion-base) var(--ease-standard), background var(--motion-base), color var(--motion-base); }
.bgd-chip input { position:absolute; opacity:0; width:0; height:0; }
.bgd-chip .chip-tick { width:0; opacity:0; overflow:hidden; transition:opacity var(--motion-base), width var(--motion-base); }
.bgd-chip:hover { border-color:var(--royal-400,#E85446); }
.bgd-chip.is-on, .bgd-chip:has(input:checked) { border-color:var(--royal-600,#E23B2E); background:var(--royal-100,#F9D2CE); color:var(--royal-800,#57140E); font-weight:600; }
.bgd-chip.is-on .chip-tick, .bgd-chip:has(input:checked) .chip-tick { width:1rem; opacity:1; color:var(--royal-600,#E23B2E); }
@media (prefers-reduced-motion: reduce) {
  .bgd-montage .m-frag, .bgd-montage .m-sketch, .bgd-montage-title * { animation:none !important; }
  .bgd-montage .m-frag { opacity:.14; } .bgd-montage .m-sketch { opacity:.45; }
  .bgd-montage-title .mt-kicker, .bgd-montage-title h1, .bgd-montage-title p { opacity:1; }
}

/* ── Footer ── */
.bgd-footer { background:var(--surface-darkest); color:rgba(255,255,255,.85); }
.bgd-footer a { color:rgba(255,255,255,.75); text-decoration:none; }
.bgd-footer a:hover { color:#fff; }
.bgd-tricolor { height:4px; background:linear-gradient(90deg,var(--royal-500) 0 40%,var(--gold-500) 40% 60%,#0d0c10 60% 100%); }

/* ════════════════════ PREMIUM POLISH ════════════════════ */

/* Hero — rich diagonal gradient + faded logo watermark */
.bgd-hero {
  background: linear-gradient(135deg, var(--royal-900) 0%, var(--royal-800) 45%, var(--royal-600) 100%);
  position: relative; overflow: hidden;
}
.bgd-hero::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 380px at 85% -10%, rgba(245,179,1,.16), transparent 60%),
    radial-gradient(700px 360px at -5% 120%, rgba(226,59,46,.5), transparent 60%);
  pointer-events:none;
}
.bgd-hero::after {
  content:""; position:absolute; right:-60px; top:50%; transform:translateY(-50%);
  width:360px; height:360px; background:url(../img/logo-mark.png) center/contain no-repeat;
  opacity:.07; pointer-events:none;
}
.bgd-hero > .container { position:relative; z-index:1; }

/* Photo hero — immersive (OM-style): full-bleed image layer + cinematic overlay */
.bgd-hero--photo { min-height:clamp(560px, 82vh, 820px); display:flex; align-items:center; }
.bgd-hero-bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; will-change:transform; }
/* Optional muted-loop video background (YouTube iframe or <video> file) */
.bgd-hero-video, .bgd-hero-video-el { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.bgd-hero-video-el { width:100%; height:100%; object-fit:cover; }
.bgd-hero-video iframe { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw; min-height:100%; min-width:177.78vh; border:0; }
.bgd-hero--photo::before {
  z-index:1;
  background: linear-gradient(90deg, rgba(13,12,16,.95) 0%, rgba(13,12,16,.78) 42%, rgba(13,12,16,.25) 100%),
              linear-gradient(0deg, rgba(13,12,16,.88), rgba(13,12,16,.15) 45%, transparent 72%);
}
.bgd-hero--photo::after { display:none; }   /* clean cinematic look — drop logo watermark */
.bgd-hero--photo > .container { z-index:2; }
.bgd-hero--photo h1 { font-size:clamp(2.2rem, 5vw, 4rem); }

/* Ken Burns slow zoom on the active slide */
.carousel-item.active .bgd-hero-bg { animation:bgd-kenburns 16s ease-out both; }
@keyframes bgd-kenburns { from { transform:scale(1.05); } to { transform:scale(1.16) translateY(-2%); } }

/* Staggered text entrance on the active slide */
.carousel-item.active .bgd-hero-content > * { animation:bgd-hero-in .7s cubic-bezier(.2,.7,.2,1) both; }
.carousel-item.active .bgd-hero-content > *:nth-child(1){ animation-delay:.05s; }
.carousel-item.active .bgd-hero-content > *:nth-child(2){ animation-delay:.15s; }
.carousel-item.active .bgd-hero-content > *:nth-child(3){ animation-delay:.25s; }
.carousel-item.active .bgd-hero-content > *:nth-child(n+4){ animation-delay:.35s; }
@keyframes bgd-hero-in { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }

/* Slim gold carousel indicators */
#heroCarousel .carousel-indicators { margin-bottom:1.4rem; }
#heroCarousel .carousel-indicators [data-bs-target] { width:26px; height:4px; border-radius:2px; background:rgba(255,255,255,.45); border:0; opacity:1; transition:background var(--motion-base), width var(--motion-base); }
#heroCarousel .carousel-indicators .active { background:var(--gold-500); width:40px; }

/* Scroll-down cue */
.bgd-hero-scroll { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.18);
  color:#fff; align-items:center; justify-content:center; cursor:pointer; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  animation:bgd-hero-bounce 2s ease-in-out infinite; }
.bgd-hero-scroll:hover { background:var(--gold-500); color:var(--royal-900); border-color:var(--gold-500); }
@keyframes bgd-hero-bounce { 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,6px); } }

@media (prefers-reduced-motion: reduce) {
  .carousel-item.active .bgd-hero-bg,
  .carousel-item.active .bgd-hero-content > *,
  .bgd-hero-scroll { animation:none !important; }
}

/* Next-event band — gradient, gold edge, logo watermark */
.bgd-band {
  background: linear-gradient(120deg, var(--royal-700), var(--royal-500));
  position: relative; overflow: hidden;
  border-top: 3px solid var(--gold-500); border-bottom: 3px solid var(--gold-500);
}
.bgd-band::after {
  content:""; position:absolute; right:0; top:0; bottom:0; width:260px;
  background:url(../img/logo-mark.png) right center/contain no-repeat; opacity:.10; pointer-events:none;
}
.bgd-band .container { position:relative; z-index:1; }

/* Cards — deeper hover + image zoom */
.card { overflow:hidden; }
.bgd-card-hover { transition:transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard); }
.bgd-card-hover:hover { transform:translateY(-4px); box-shadow:var(--shadow-e3); }
.bgd-card-hover img { transition:transform var(--motion-slow) var(--ease-standard); }
.bgd-card-hover:hover img { transform:scale(1.06); }

/* Branded image fallback (instead of blank gray box) */
.bgd-ph {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 50% 38%, var(--royal-700), var(--royal-900));
}
.bgd-ph img { width:46%; max-width:128px; opacity:.9; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.bgd-ph::after {
  content:"BEGADUH PEKANBARU"; position:absolute; bottom:10px;
  font-family:var(--font-display); font-size:.66rem; letter-spacing:.18em; color:rgba(255,255,255,.45);
}

/* Gold button — soft glow */
.bgd-btn-gold { box-shadow:0 6px 16px rgba(245,179,1,.32); }
.bgd-btn-gold:hover { box-shadow:0 8px 22px rgba(245,179,1,.42); }


/* Footer — faded logo watermark */
.bgd-footer { position:relative; overflow:hidden; flex-shrink:0; }
.bgd-footer::after {
  content:""; position:absolute; right:-40px; bottom:-50px; width:260px; height:260px;
  background:url(../img/logo-mark.png) center/contain no-repeat; opacity:.05; pointer-events:none;
}
.bgd-footer .container { position:relative; z-index:1; }

/* Sponsor strip — full color, subtle lift on hover */
.bgd-sponsor-logo { max-height:54px; opacity:.95; transition:opacity var(--motion-base), transform var(--motion-base); }
.bgd-sponsor-logo:hover { opacity:1; transform:translateY(-2px); }

/* Section band background tint for alternating sections */
.bgd-section-soft { background:linear-gradient(180deg,#fff, var(--slate-50)); }

/* Fix: logo watermark collides with photo on photo-hero — hide it there */
.bgd-hero--photo::after { display:none; }

/* Sponsor logos — larger & clearer */
.bgd-sponsor-logo { max-height:80px; }


/* Event card */
.bgd-event-card { background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-e1); overflow:hidden; transition:transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base); }
.bgd-event-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-e2); }
.bgd-event-card .ev-meta { background:var(--royal-900); color:rgba(255,255,255,.92); font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; padding:.5rem 1rem; display:flex; justify-content:space-between; gap:.5rem; }
.bgd-event-card .ev-body { padding:1.1rem 1rem .9rem; }
.bgd-event-card .ev-team { font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--slate-800); line-height:1.1; }
.bgd-event-card .ev-vs { width:40px; height:40px; border-radius:50%; background:var(--gold-500); color:var(--royal-900);
  font-family:var(--font-display); font-weight:700; display:inline-flex; align-items:center; justify-content:center; font-size:.85rem;
  box-shadow:0 4px 10px rgba(245,179,1,.4); }



.bgd-status-pill { display:inline-block; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  background:var(--gold-500); color:var(--royal-900); border-radius:99px; padding:.2rem .7rem; font-weight:700; }


/* Hero carousel indicators — gold pills */
#heroCarousel .carousel-indicators [data-bs-target] { width:28px; height:5px; border-radius:99px; background:rgba(255,255,255,.5); border:0; }
#heroCarousel .carousel-indicators .active { background:var(--gold-500); }
#heroCarousel .carousel-control-prev, #heroCarousel .carousel-control-next { width:6%; opacity:.6; z-index:3; }
#heroCarousel .carousel-control-prev:hover, #heroCarousel .carousel-control-next:hover { opacity:1; }

/* ════════════════════ EDITORIAL HOMEPAGE (club-media style) ════════════════════ */

/* Bigger, tighter hero headline */
.bgd-hero h1 { font-size:clamp(2.75rem,7vw,5.25rem); }

/* Section header row: big title + action on the right */
.bgd-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.bgd-section-head .bgd-section-title { margin-bottom:0; font-size:clamp(1.5rem,3vw,2.25rem); }

/* Quick-action shortcut tiles */
.bgd-shortcut { display:flex; flex-direction:column; gap:.35rem; padding:1.4rem 1.25rem; border-radius:var(--radius-lg);
  background:linear-gradient(140deg,var(--royal-800),var(--royal-600)); color:#fff; text-decoration:none;
  position:relative; overflow:hidden; box-shadow:var(--shadow-e1);
  transition:transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard); }
.bgd-shortcut:hover { transform:translateY(-4px); box-shadow:var(--shadow-e3); color:#fff; }
.bgd-shortcut .sc-icon { font-size:2rem; color:var(--gold-500); }
.bgd-shortcut .sc-label { font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:1.2rem; letter-spacing:.02em; line-height:1; }
.bgd-shortcut .sc-sub { font-size:.8rem; color:rgba(255,255,255,.72); }
.bgd-shortcut .sc-arrow { position:absolute; right:1rem; bottom:1rem; color:var(--gold-500); opacity:0; transform:translateX(-6px);
  transition:opacity var(--motion-base), transform var(--motion-base); }
.bgd-shortcut:hover .sc-arrow { opacity:1; transform:translateX(0); }
.bgd-shortcut::after { content:""; position:absolute; right:-28px; top:-28px; width:118px; height:118px;
  background:url(../img/logo-mark.png) center/contain no-repeat; opacity:.06; pointer-events:none; }

/* Featured news — large image with the headline overlaid */
.bgd-feature-news { position:relative; display:block; border-radius:var(--radius-lg); overflow:hidden; min-height:380px;
  box-shadow:var(--shadow-e1); }
.bgd-feature-news > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--motion-slow) var(--ease-standard); }
.bgd-feature-news:hover > img { transform:scale(1.05); }
.bgd-feature-news .fn-overlay { position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(13,12,16,.94) 0%, rgba(13,12,16,.35) 55%, transparent 100%); }
.bgd-feature-news .fn-body { position:absolute; left:0; right:0; bottom:0; padding:1.5rem; z-index:1; }
.bgd-feature-news .fn-title { font-family:var(--font-display); font-weight:700; color:#fff;
  font-size:clamp(1.4rem,2.5vw,2.1rem); line-height:1.05; margin:.55rem 0 .35rem; }
.bgd-feature-news .fn-date { color:rgba(255,255,255,.72); font-size:.82rem; }


/* Editorial news list (sidebar) */
.bgd-news-item { display:flex; gap:.9rem; padding:.7rem 0; border-bottom:1px solid var(--slate-200); text-decoration:none; }
.bgd-news-item:last-child { border-bottom:0; }
.bgd-news-item .ni-thumb { width:104px; height:68px; border-radius:var(--radius-md); overflow:hidden; flex:0 0 auto; position:relative; background:var(--slate-100); }
.bgd-news-item .ni-thumb img { width:100%; height:100%; object-fit:cover; transition:transform var(--motion-slow) var(--ease-standard); }
.bgd-news-item:hover .ni-thumb img { transform:scale(1.07); }
.bgd-news-item .ni-title { font-family:var(--font-display); font-weight:700; color:var(--slate-800); line-height:1.15; font-size:1.02rem; }
.bgd-news-item:hover .ni-title { color:var(--royal-500); }
.bgd-news-item .ni-date { color:var(--slate-500); font-size:.75rem; margin-top:.2rem; }
.bgd-news-item .ni-thumb .bgd-ph img { width:50%; }

/* ══ Homepage editorial (pola promotor combat sport) ══════════ */

/* Ritme seksi — lebih lega, gaya editorial */
.bgd-sec { padding-top:5.5rem; padding-bottom:5.5rem; }
@media (max-width:767.98px){ .bgd-sec { padding-top:3.25rem; padding-bottom:3.25rem; } }
.bgd-sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  margin-bottom:2.25rem; flex-wrap:wrap; }
.bgd-kicker { display:inline-block; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-500); font-weight:700; margin-bottom:.5rem; }

/* ── Next Event spotlight (modul utama) ── */
.bgd-next-event { position:relative; overflow:hidden; background:var(--surface-darkest); color:#fff; }
.bgd-next-event .ne-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.42; }
.bgd-next-event .ne-veil { position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(13,12,16,.96) 0%, rgba(13,12,16,.82) 42%, rgba(87,20,14,.55) 72%, rgba(226,59,46,.35) 100%); }
.bgd-next-event > .container { position:relative; z-index:2; }
.ne-title { font-family:var(--font-display); font-weight:800; text-transform:uppercase; line-height:.94;
  font-size:clamp(2.1rem,5vw,4rem); color:#fff; margin:.35rem 0 .5rem; }
.ne-title .vs { color:var(--gold-500); }
.ne-tagline { color:rgba(255,255,255,.78); max-width:52ch; }
.ne-meta { display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; color:rgba(255,255,255,.82); font-size:.95rem; }
.ne-meta i { color:var(--gold-500); margin-right:.35rem; }

/* Countdown */
.bgd-countdown { display:flex; gap:.6rem; }
.bgd-countdown .cd-box { min-width:72px; text-align:center; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:.65rem .4rem; }
.bgd-countdown .cd-num { font-family:var(--font-display); font-size:1.95rem; font-weight:800; line-height:1; color:#fff; }
.bgd-countdown .cd-lbl { font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin-top:.28rem; }

/* CTA band — ajakan naik ring */
.bgd-cta-band { background:linear-gradient(120deg,#191317 0%,#57140E 52%,#E23B2E 100%); color:#fff; }

/* Kartu petarung ringkas (strip roster) */
.bgd-fighter-tile { background:var(--surface-darkest); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.08); transition:transform var(--motion-base) var(--ease-standard); }
.bgd-fighter-tile:hover { transform:translateY(-3px); border-color:var(--gold-500); }

/* ── Halaman petarung ─────────────────────────────────────── */
.bgd-fighter-hero { position:relative; overflow:hidden; background:var(--surface-darkest); color:#fff; }
.bgd-fighter-hero .fh-bg { position:absolute; inset:0;
  background:radial-gradient(700px 420px at 78% 20%, rgba(231,184,75,.22), transparent 62%),
             radial-gradient(600px 380px at 5% 110%, rgba(226,59,46,.28), transparent 60%); }
.bgd-fighter-hero > .container { position:relative; z-index:2; }
.fh-photo { width:clamp(140px,18vw,210px); height:clamp(140px,18vw,210px); border-radius:50%;
  object-fit:cover; border:4px solid var(--gold-500); box-shadow:0 18px 48px rgba(0,0,0,.5); }
.fh-photo--empty { display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:4px solid rgba(255,255,255,.18); }
.fh-name { font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(2rem,4.4vw,3.4rem); line-height:1; color:#fff; }
.fh-nick { color:var(--gold-500); font-family:var(--font-display); font-size:1.35rem; }

/* Tale of the tape */
.bgd-tape { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg); overflow:hidden; }
.bgd-tape .tp { background:var(--surface-darkest); padding:1rem .75rem; text-align:center; }
.bgd-tape .tp-num { font-family:var(--font-display); font-size:1.8rem; font-weight:800; line-height:1; color:#fff; }
.bgd-tape .tp-lbl { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-top:.35rem; }

/* Riwayat laga */
.bgd-bout-row { display:flex; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--slate-200); }
.bgd-bout-row:last-child { border-bottom:0; }
.bgd-bout-res { min-width:56px; text-align:center; font-family:var(--font-display); font-weight:800;
  border-radius:8px; padding:.35rem .5rem; font-size:.85rem; letter-spacing:.05em; }
.res-win  { background:rgba(27,158,84,.14);  color:#1B9E54; }
.res-loss { background:rgba(220,42,42,.12);  color:#DC2A2A; }
.res-draw { background:var(--slate-100);      color:var(--slate-600); }
.res-tba  { background:var(--slate-100);      color:var(--slate-500); }

/* ── Daftar event: baris poster-led ───────────────────────── */
.bgd-event-row { display:grid; grid-template-columns:minmax(0,320px) 1fr; background:var(--surface-card);
  border:1px solid var(--slate-200); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-e1);
  transition:transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base); }
.bgd-event-row:hover { transform:translateY(-3px); box-shadow:var(--shadow-e2); }
@media (max-width:767.98px){ .bgd-event-row { grid-template-columns:1fr; } }
.bgd-event-row .er-poster { position:relative; min-height:230px; background-size:cover; background-position:center; }
.bgd-event-row .er-poster::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,12,16,.15), rgba(13,12,16,.55)); }
.bgd-event-row .er-date { position:absolute; z-index:2; top:14px; left:14px; background:rgba(13,12,16,.86);
  border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:.5rem .75rem; text-align:center; color:#fff; }
.bgd-event-row .er-day { font-family:var(--font-display); font-size:1.6rem; font-weight:800; line-height:1; }
.bgd-event-row .er-mon { font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-500); margin-top:.15rem; }
.bgd-event-row .er-body { padding:1.6rem; display:flex; flex-direction:column; }
.bgd-event-row .er-title { font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.25rem,2.3vw,1.85rem); line-height:1.05; color:var(--slate-800); margin:.35rem 0 .5rem; }
.bgd-event-row .er-title .vs { color:var(--royal-500); }

/* ── Tipografi artikel berita ─────────────────────────────── */
.bgd-article > *:first-child { margin-top:0; }
.bgd-article p { margin-bottom:1.4rem; color:var(--slate-700); }
.bgd-article h2, .bgd-article h3 { font-family:var(--font-display); text-transform:uppercase;
  color:var(--slate-800); margin:2.4rem 0 1rem; }
.bgd-article h2 { font-size:1.6rem; } .bgd-article h3 { font-size:1.3rem; }
.bgd-article img { max-width:100%; height:auto; border-radius:var(--radius-md); margin:1.5rem 0; }
.bgd-article a { color:var(--royal-500); }
.bgd-article blockquote { border-left:4px solid var(--gold-500); padding:.4rem 0 .4rem 1.2rem;
  margin:1.8rem 0; font-style:italic; color:var(--slate-600); }
.bgd-article ul, .bgd-article ol { margin-bottom:1.4rem; padding-left:1.3rem; color:var(--slate-700); }
.bgd-article li { margin-bottom:.5rem; }

/* ── Header halaman utilitas (keranjang/checkout/member/gate) ── */
.bgd-pagehead { position:relative; color:#fff; padding:2.6rem 0 2.2rem;
  background:linear-gradient(120deg,#191317 0%,#2a1015 58%,#431115 100%); }
.bgd-pagehead::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--royal-500) 0 45%,var(--gold-500) 45% 62%,#0d0c10 62% 100%); }
.bgd-pagehead .ph-title { font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.55rem,2.9vw,2.3rem); line-height:1.05; margin:.15rem 0 0; color:#fff; }
.bgd-pagehead .ph-sub { color:rgba(255,255,255,.7); font-size:.95rem; margin-top:.4rem; }
.bgd-pagehead .ph-back { display:inline-flex; align-items:center; gap:.35rem; color:rgba(255,255,255,.65);
  text-decoration:none; font-size:.85rem; margin-bottom:.6rem; }
.bgd-pagehead .ph-back:hover { color:var(--gold-500); }

/* Seksi konten halaman utilitas — lebih ringkas dari .bgd-sec */
.bgd-sec-sm { padding-top:3rem; padding-bottom:4rem; }

/* Gate / validasi — layar operasional, kontras tinggi & target sentuh besar */
.bgd-gate { background:var(--surface-darkest); min-height:100vh; color:#fff; }
.bgd-gate .gate-card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg); color:#fff; transition:border-color var(--motion-base), transform var(--motion-base); }
.bgd-gate .gate-card:hover { border-color:var(--gold-500); transform:translateY(-3px); }
.bgd-gate .gate-icon { font-size:2.4rem; color:var(--gold-500); }