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

/* ── Google fonts (self-host in web/fonts for production) ── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');
/* ── Bootstrap Icons ── */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');

/* ── Bootstrap variable overrides ── */
:root {
  --bs-primary:#1B4DD1; --bs-primary-rgb:27,77,209;
  --bs-secondary:#07193F; --bs-secondary-rgb:7,25,63;
  --bs-success:#1B9E54; --bs-warning:#F59E0B; --bs-danger:#DC2A2A; --bs-info:#1B4DD1;
  --bs-body-color:#333C4E;
  --bs-body-font-family:var(--font-body);
  --bs-border-color:#E1E7F0;
  --bs-border-radius:.625rem;
  --bs-link-color:#1B4DD1; --bs-link-hover-color:#112F80;
}

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); }
.psps-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) ── */
.psps-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. */
.psps-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");
}
.psps-navbar .navbar-brand, .psps-navbar .nav-link { color:rgba(255,255,255,.9); }
.psps-navbar .nav-link:hover { color:#fff; }
.psps-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) {
  .psps-navbar .nav-item.dropdown:hover > .dropdown-menu { display:block; }
  .psps-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; }
  .psps-navbar .navbar-nav { padding-bottom: .5rem; }
  .psps-navbar .nav-link { padding-top: .6rem; padding-bottom: .6rem; }
  .psps-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; }
  .psps-navbar .dropdown-menu .dropdown-item { color: rgba(255,255,255,.85); padding-top: .5rem; padding-bottom: .5rem; white-space: normal; }
  .psps-navbar .dropdown-menu .dropdown-item:hover,
  .psps-navbar .dropdown-menu .dropdown-item:active,
  .psps-navbar .dropdown-menu .dropdown-item.active { background: rgba(255,255,255,.12); color: #fff; }
  .psps-navbar .dropdown-divider { border-color: rgba(255,255,255,.2); }
}

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

/* ── Section band ── */
.psps-band { background:var(--royal-500); color:#fff; }
.psps-section-title { font-family:var(--font-display); text-transform:uppercase; color:var(--royal-500);
  position:relative; padding-bottom:.5rem; }
.psps-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. */
.psps-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); }
.psps-link-more:hover { color:var(--gold-600,#d4a017); gap:.6rem; }

/* ── Intro preloader (OM-style splash; shows once per browsing session) ── */
#psps-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,#1b4dd1), var(--royal-900,#07193f) 70%, #050e27);
  animation:psps-intro-out .6s ease 1.5s forwards; }
#psps-preloader .pl-inner { text-align:center; }
#psps-preloader .pl-crest { width:180px; height:180px; margin:0 auto; background:center/contain no-repeat;
  filter:drop-shadow(0 14px 40px rgba(0,0,0,.6)); animation:psps-intro-crest 1.5s cubic-bezier(.2,.7,.2,1) both; }
#psps-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:psps-intro-word .6s ease .5s forwards; }
#psps-preloader .pl-bar { width:160px; height:3px; margin:1rem auto 0; border-radius:3px; background:rgba(255,255,255,.18); overflow:hidden; }
#psps-preloader .pl-bar span { display:block; height:100%; width:40%; border-radius:3px; background:var(--gold-500,#ffc93c);
  animation:psps-intro-bar 1.3s ease-in-out infinite; }
@keyframes psps-intro-crest { 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 psps-intro-word { to { opacity:.9; } }
@keyframes psps-intro-bar { 0%{transform:translateX(-120%);} 100%{transform:translateX(320%);} }
@keyframes psps-intro-out { to { opacity:0; visibility:hidden; } }
html.intro-seen #psps-preloader { display:none; }

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

@media (prefers-reduced-motion: reduce) {
  #psps-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); }
.psps-card-hover { transition:transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base); }
.psps-card-hover:hover { transform:translateY(-2px); box-shadow:var(--shadow-e2); }

/* ── Badges & status pills ── */
.psps-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); }

/* ── Standings table ── */
.psps-standings thead th { background:var(--royal-500); color:#fff; text-transform:uppercase; font-size:.8rem; }
.psps-standings td, .psps-standings th { vertical-align:middle; }
.psps-standings .is-psps { background:var(--royal-100); box-shadow:inset 3px 0 0 var(--gold-500); font-weight:700; }

/* ── Social wall tiles ── */
.psps-social-tile { display:block; position:relative; aspect-ratio:1/1; border-radius:var(--radius-md,10px); overflow:hidden; }
.psps-social-tile img { width:100%; height:100%; object-fit:cover; transition:transform var(--motion-slow) var(--ease-standard); }
.psps-social-tile:hover img { transform:scale(1.06); }
.psps-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(7,25,63,.55), rgba(7,25,63,.05));
  opacity:0; transition:opacity var(--motion-base) var(--ease-standard); }
.psps-social-tile:hover .psps-social-overlay { opacity:1; }

/* ── Home gallery mosaic ── */
.psps-gallery-tile { position:relative; cursor:pointer; }
.psps-gallery-tile img { width:100%; height:100%; object-fit:cover; transition:transform var(--motion-slow) var(--ease-standard); }
.psps-gallery-tile:hover img { transform:scale(1.05); }
.psps-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(7,25,63,.78), rgba(7,25,63,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; }
.psps-gallery-tile:hover .psps-gallery-cap { opacity:1; transform:translateY(0); }

/* ── Home PSPS TV (click-to-play) ── */
.psps-video-thumb { cursor:pointer; background:#000; }
.psps-video-thumb img { transition:transform var(--motion-slow) var(--ease-standard); }
.psps-video-thumb:hover img { transform:scale(1.05); }
.psps-video-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border:0; background:linear-gradient(0deg, rgba(7,25,63,.35), rgba(7,25,63,.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); }
.psps-video-thumb:hover .psps-video-play { transform:scale(1.08); background:linear-gradient(0deg, rgba(7,25,63,.45), rgba(7,25,63,.08)); }

/* ── Animated montage intro (gallery title sequence, OM-style) ── */
.psps-montage { position:relative; overflow:hidden; min-height:clamp(320px,52vh,520px);
  background:linear-gradient(135deg,#0e2e78,#1b4dd1 60%,#15348c); display:flex; align-items:center; }
.psps-montage-layer { position:absolute; inset:0; pointer-events:none; }
.psps-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; }
.psps-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; }
.psps-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; }
.psps-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; }
.psps-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; }
.psps-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; }
.psps-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; }
.psps-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);} }
.psps-montage-title { position:relative; z-index:2; color:#fff; }
.psps-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; }
.psps-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; }
.psps-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;} }
.psps-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 */
.psps-board-wrap { position:relative; }
.psps-board { display:flex; border-radius:6px 6px 0 0; overflow:hidden; box-shadow:0 6px 16px rgba(11,35,88,.18);
  border:1px solid var(--slate-200); border-bottom:0; }
.psps-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; }
.psps-board .bd:last-child { border-right:0; }
.psps-board .bd img { max-height:48px; max-width:100%; object-fit:contain; }
/* grass strip beneath the boards, like the pitch in front of them */
.psps-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){ .psps-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,#07193f),var(--royal-700,#1542a8)); color:#fff; }
.partner-aside::after { content:""; position:absolute; right:-44px; bottom:-44px; width:210px; height:210px;
  background:url(../img/logo.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); }

.psps-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); }
.psps-chip input { position:absolute; opacity:0; width:0; height:0; }
.psps-chip .chip-tick { width:0; opacity:0; overflow:hidden; transition:opacity var(--motion-base), width var(--motion-base); }
.psps-chip:hover { border-color:var(--royal-400,#5b7fe0); }
.psps-chip.is-on, .psps-chip:has(input:checked) { border-color:var(--royal-600,#1b4dd1); background:var(--royal-100,#e7eeff); color:var(--royal-800,#0e2e78); font-weight:600; }
.psps-chip.is-on .chip-tick, .psps-chip:has(input:checked) .chip-tick { width:1rem; opacity:1; color:var(--royal-600,#1b4dd1); }
@media (prefers-reduced-motion: reduce) {
  .psps-montage .m-frag, .psps-montage .m-sketch, .psps-montage-title * { animation:none !important; }
  .psps-montage .m-frag { opacity:.14; } .psps-montage .m-sketch { opacity:.45; }
  .psps-montage-title .mt-kicker, .psps-montage-title h1, .psps-montage-title p { opacity:1; }
}

/* ── Footer ── */
.psps-footer { background:var(--surface-darkest); color:rgba(255,255,255,.85); }
.psps-footer a { color:rgba(255,255,255,.75); text-decoration:none; }
.psps-footer a:hover { color:#fff; }
.psps-tricolor { height:4px; background:linear-gradient(90deg,var(--flag-red) 0 33%,#fff 33% 66%,var(--flag-green) 66% 100%); }

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

/* Hero — rich diagonal gradient + faded crest watermark */
.psps-hero {
  background: linear-gradient(135deg, var(--royal-900) 0%, var(--royal-800) 45%, var(--royal-600) 100%);
  position: relative; overflow: hidden;
}
.psps-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(27,77,209,.5), transparent 60%);
  pointer-events:none;
}
.psps-hero::after {
  content:""; position:absolute; right:-60px; top:50%; transform:translateY(-50%);
  width:360px; height:360px; background:url(../img/logo.png) center/contain no-repeat;
  opacity:.07; pointer-events:none;
}
.psps-hero > .container { position:relative; z-index:1; }

/* Photo hero — immersive (OM-style): full-bleed image layer + cinematic overlay */
.psps-hero--photo { min-height:clamp(560px, 82vh, 820px); display:flex; align-items:center; }
.psps-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) */
.psps-hero-video, .psps-hero-video-el { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.psps-hero-video-el { width:100%; height:100%; object-fit:cover; }
.psps-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; }
.psps-hero--photo::before {
  z-index:1;
  background: linear-gradient(90deg, rgba(7,25,63,.95) 0%, rgba(7,25,63,.78) 42%, rgba(7,25,63,.25) 100%),
              linear-gradient(0deg, rgba(7,25,63,.88), rgba(7,25,63,.15) 45%, transparent 72%);
}
.psps-hero--photo::after { display:none; }   /* clean cinematic look — drop crest watermark */
.psps-hero--photo > .container { z-index:2; }
.psps-hero--photo h1 { font-size:clamp(2.2rem, 5vw, 4rem); }

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

/* Staggered text entrance on the active slide */
.carousel-item.active .psps-hero-content > * { animation:psps-hero-in .7s cubic-bezier(.2,.7,.2,1) both; }
.carousel-item.active .psps-hero-content > *:nth-child(1){ animation-delay:.05s; }
.carousel-item.active .psps-hero-content > *:nth-child(2){ animation-delay:.15s; }
.carousel-item.active .psps-hero-content > *:nth-child(3){ animation-delay:.25s; }
.carousel-item.active .psps-hero-content > *:nth-child(n+4){ animation-delay:.35s; }
@keyframes psps-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 */
.psps-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:psps-hero-bounce 2s ease-in-out infinite; }
.psps-hero-scroll:hover { background:var(--gold-500); color:var(--royal-900); border-color:var(--gold-500); }
@keyframes psps-hero-bounce { 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,6px); } }

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

/* Next-match band — gradient, gold edge, crest watermark */
.psps-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);
}
.psps-band::after {
  content:""; position:absolute; right:0; top:0; bottom:0; width:260px;
  background:url(../img/logo.png) right center/contain no-repeat; opacity:.10; pointer-events:none;
}
.psps-band .container { position:relative; z-index:1; }

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

/* Branded image fallback (instead of blank gray box) */
.psps-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));
}
.psps-ph img { width:46%; max-width:128px; opacity:.9; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.psps-ph::after {
  content:"PSPS 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 */
.psps-btn-gold { box-shadow:0 6px 16px rgba(245,179,1,.32); }
.psps-btn-gold:hover { box-shadow:0 8px 22px rgba(245,179,1,.42); }

/* Match / schedule card — gold left accent */
.psps-match { border-left:3px solid var(--gold-500); }

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

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

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

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

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

/* Team crest fallback (non-PSPS teams) */
.psps-crest { display:inline-flex; align-items:center; justify-content:center; }
.psps-crest-fallback {
  display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:linear-gradient(135deg, var(--royal-600), var(--royal-900)); color:#fff;
  font-family:var(--font-display); font-weight:700; line-height:1; border:2px solid var(--silver-300);
}

/* Club-style fixture (match) card */
.psps-fixture { 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); }
.psps-fixture:hover { transform:translateY(-3px); box-shadow:var(--shadow-e2); }
.psps-fixture .fx-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; }
.psps-fixture .fx-body { padding:1.1rem 1rem .9rem; }
.psps-fixture .fx-team { font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--slate-800); line-height:1.1; }
.psps-fixture .fx-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); }

/* Player (squad) card */
.psps-player-num { position:absolute; top:8px; left:8px; z-index:2; font-family:var(--font-display); font-weight:700;
  font-size:1.35rem; color:#fff; background:var(--royal-600); border:2px solid var(--gold-500); border-radius:10px;
  width:42px; height:42px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-e1); }
.psps-player .card-body { border-top:3px solid var(--gold-500); }

/* Match score (result card) */
.fx-score { font-family:var(--font-display); font-weight:700; font-size:1.9rem; color:var(--royal-900); white-space:nowrap; line-height:1; }
.fx-score .dash { color:var(--slate-400); margin:0 .35rem; font-size:1.2rem; vertical-align:middle; }
.fx-ft { font-size:.62rem; letter-spacing:.1em; color:var(--slate-500); text-transform:uppercase; }

/* Match detail hero scoreboard */
.match-score { font-family:var(--font-display); font-weight:700; font-size:3.2rem; line-height:1; color:#fff; }
.match-score .dash { color:rgba(255,255,255,.5); margin:0 .4rem; }
.match-kick { font-family:var(--font-display); font-size:1.7rem; color:var(--gold-500); line-height:1; }
.match-team-name { font-family:var(--font-display); color:#fff; font-size:1.3rem; margin-top:.6rem; }
.match-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; }

/* Club-style standings */
.psps-standings { border-collapse:separate; border-spacing:0; }
.psps-standings thead th { background:var(--royal-900); color:#fff; border:0; padding:.7rem .8rem; font-size:.78rem; letter-spacing:.04em; }
.psps-standings tbody td { border-bottom:1px solid var(--slate-100); padding:.5rem .8rem; }
.psps-standings tbody tr:hover { background:var(--slate-50); }
.psps-standings .pos { width:26px; height:26px; border-radius:50%; background:var(--slate-100); color:var(--slate-700);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; }
.psps-standings .team-cell { display:flex; align-items:center; gap:.6rem; font-weight:600; color:var(--slate-800); }
.psps-standings .is-psps { background:linear-gradient(90deg, rgba(245,179,1,.18), rgba(245,179,1,.03)); font-weight:700; }
.psps-standings .is-psps td:first-child { box-shadow:inset 4px 0 0 var(--gold-500); }
.psps-standings .is-psps .pos { background:var(--gold-500); color:var(--royal-900); }

/* 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 */
.psps-hero h1 { font-size:clamp(2.75rem,7vw,5.25rem); }

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

/* Quick-action shortcut tiles */
.psps-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); }
.psps-shortcut:hover { transform:translateY(-4px); box-shadow:var(--shadow-e3); color:#fff; }
.psps-shortcut .sc-icon { font-size:2rem; color:var(--gold-500); }
.psps-shortcut .sc-label { font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:1.2rem; letter-spacing:.02em; line-height:1; }
.psps-shortcut .sc-sub { font-size:.8rem; color:rgba(255,255,255,.72); }
.psps-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); }
.psps-shortcut:hover .sc-arrow { opacity:1; transform:translateX(0); }
.psps-shortcut::after { content:""; position:absolute; right:-28px; top:-28px; width:118px; height:118px;
  background:url(../img/logo.png) center/contain no-repeat; opacity:.06; pointer-events:none; }

/* Featured news — large image with the headline overlaid */
.psps-feature-news { position:relative; display:block; border-radius:var(--radius-lg); overflow:hidden; min-height:380px;
  box-shadow:var(--shadow-e1); }
.psps-feature-news > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--motion-slow) var(--ease-standard); }
.psps-feature-news:hover > img { transform:scale(1.05); }
.psps-feature-news .fn-overlay { position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(7,25,63,.94) 0%, rgba(7,25,63,.35) 55%, transparent 100%); }
.psps-feature-news .fn-body { position:absolute; left:0; right:0; bottom:0; padding:1.5rem; z-index:1; }
.psps-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; }
.psps-feature-news .fn-date { color:rgba(255,255,255,.72); font-size:.82rem; }

/* Hero player cutout (foto-ready: swap web/img/hero-player.png) */
.psps-hero-player { position:absolute; right:4%; bottom:0; height:96%; max-height:560px; width:auto; z-index:1;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.45)); pointer-events:none; }
@media (max-width:1199.98px){ .psps-hero-player { display:none !important; } }

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