:root {
  --navy: #080806;
  --navy-deep: #030302;
  --text: #ffffff;
  --body-text: #181611;
  --muted: #8b8170;
  --accent: #d6a349;
  --button: #d6a349;
  --surface: #ffffff;
  --surface-soft: #1d1609;
  --border: rgba(214, 163, 73, 0.22);
}

/* Reference-matched Nawasena homepage */
.home-page .topbar,.home-page .social-strip,.home-page .club-eyebrow,.home-page .club-trust-list{display:none}
.home-page .container{width:min(1540px,calc(100% - 7rem))}
.home-page .site-header{min-height:104px}
.home-page .header-inner{min-height:104px}
.home-page .brand{min-width:112px}
.home-page .brand-logo{width:96px;height:78px;object-fit:contain}
.home-page .main-nav{gap:clamp(1.4rem,2.4vw,3.25rem)}
.home-page .main-nav a,.home-page .nav-dropdown{min-height:104px;font-size:.96rem;font-weight:500}
.home-page .main-nav a.active::after{bottom:24px}
.home-page .main-nav a.nav-cta{min-height:46px;border-radius:6px;padding:.72rem 1.45rem;font-weight:800}
.club-hero{min-height:535px;padding-top:104px}
.club-hero-media{inset:104px 0 0;transform:none;background-image:url("assets/hero-shooting-range-v3.webp?v=1");background-position:center}
.club-hero::before{inset:104px 0 0;background:linear-gradient(90deg,#030303 0%,rgba(3,3,3,.92) 24%,rgba(3,3,3,.46) 47%,rgba(3,3,3,.08) 78%),linear-gradient(180deg,rgba(0,0,0,.08),rgba(3,3,3,.5))}
.club-hero-inner{min-height:431px;padding:1.6rem 0 2.4rem}
.club-hero-copy{width:560px}
.club-hero h1{font-size:clamp(3.45rem,4.25vw,4.65rem);line-height:.95;letter-spacing:-.04em}
.club-tagline{margin-top:.85rem;font-size:1.45rem}
.club-intro{margin-top:1.7rem;padding-top:1.2rem;font-size:1rem;line-height:1.45;position:relative}
.club-intro::before{content:"";position:absolute;top:0;left:0;width:64px;height:3px;background:#d6a349}
.club-hero-actions{margin-top:1.65rem;gap:1.25rem}
.club-hero-actions .btn{min-height:56px;min-width:235px;justify-content:center;border-radius:7px}
.club-command{margin-top:0;padding:0 0 1.1rem;background:#030303}
.club-command-grid{grid-template-columns:minmax(0,1.5fr) minmax(490px,1fr);gap:.85rem}
.club-program-grid{gap:.85rem}
.club-program-card,.club-schedule-card{min-height:156px;border-color:rgba(214,163,73,.38);background:linear-gradient(135deg,rgba(18,18,15,.98),rgba(6,7,6,.98))}
.club-program-card{grid-template-columns:auto 1fr;padding:1.3rem 1.5rem}
.club-program-card>b{display:none}
.club-program-icon{width:4rem;height:4rem;border:0;background:transparent}
.club-program-icon svg{width:3.2rem;height:3.2rem;stroke-width:1.35}
.club-program-card strong{font-size:1rem}
.club-program-card small{font-size:.75rem}
.club-schedule-card{grid-template-columns:1fr;grid-template-rows:auto 1fr;position:relative;padding:1rem 1.35rem}
.club-schedule-heading h2{font-size:1.25rem}
.club-schedule-heading .club-program-icon{border:0}
.club-schedule-event{margin:.45rem 0 0;padding:.45rem 0 0;border-bottom:0}
.club-schedule-date{min-width:92px;border:1px solid rgba(214,163,73,.32);border-radius:6px;padding:.45rem}
.club-schedule-date b{color:#fff;font-size:2.1rem;line-height:1}
.club-schedule-event strong{font-size:.98rem}
.club-schedule-event div span{font-size:.7rem}
.club-schedule-card>a{position:absolute;right:1.3rem;bottom:1rem;padding:.65rem 1rem;border-radius:5px;background:#d6b35f;color:#111}
.home-page .sponsor-runner-strip{padding:0 0 1rem}
.home-page .hero-sponsor-runner{padding:0}
.home-page .sponsor-runner-label-row{margin-bottom:.65rem}
.home-page .sponsor-runner-label-track span{font-size:.9rem;letter-spacing:.22em}
.home-page .hero-sponsor-track{gap:1.2rem}
.home-page .hero-sponsor-logo{min-width:205px;height:92px;border-radius:5px;font-size:2rem;overflow:hidden}
.home-page .hero-sponsor-logo img{padding:.18rem;object-fit:contain}
.home-benefits{padding:0 0 .75rem;background:#050504;color:#fff}
.home-benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(214,163,73,.38);border-radius:16px;padding:1rem 1.3rem;background:linear-gradient(90deg,#17150e,#0d0e0b)}
.home-benefits article{display:grid;grid-template-columns:56px 1fr;gap:.75rem;align-items:center;padding:.2rem 1.2rem;border-right:1px solid rgba(214,163,73,.3)}
.home-benefits article:last-child{border-right:0}
.home-benefits article>span{color:#d6b35f;font-size:2.7rem;text-align:center}
.home-benefits strong,.home-benefits small{display:block}
.home-benefits strong{color:#d6b35f;font-size:.86rem}
.home-benefits small{margin-top:.2rem;color:rgba(255,255,255,.63);font-size:.68rem;line-height:1.4}
.club-benefits{padding:0 0 .75rem;background:#050504;color:#fff}
.club-benefit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid rgba(214,163,73,.38);border-radius:16px;padding:1rem 1.3rem;background:linear-gradient(90deg,#17150e,#0d0e0b)}
.club-benefit-grid article{display:grid;grid-template-columns:56px minmax(0,1fr);gap:.75rem;align-items:center;padding:.2rem 1.2rem;border-right:1px solid rgba(214,163,73,.3)}
.club-benefit-grid article:last-child{border-right:0}
.club-benefit-grid article>span{display:flex;width:48px;height:48px;align-items:center;justify-content:center;color:#d6b35f}
.club-benefit-grid article>span svg{display:block;width:42px!important;height:42px!important;max-width:42px;max-height:42px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.club-benefit-grid h3,.club-benefit-grid p{margin:0}
.club-benefit-grid h3{color:#d6b35f;font-size:.86rem}
.club-benefit-grid p{margin-top:.2rem;color:rgba(255,255,255,.63);font-size:.68rem;line-height:1.4}
@media(max-width:1220px){.club-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.club-benefit-grid article:nth-child(2){border-right:0}}
@media(max-width:640px){.club-benefit-grid{grid-template-columns:1fr}.club-benefit-grid article{border-right:0;border-bottom:1px solid rgba(214,163,73,.25)}.club-benefit-grid article:last-child{border-bottom:0}}
@media(max-width:1220px){.home-page .container{width:min(100% - 2rem,1100px)}.home-page .site-header{min-height:auto}.club-hero{padding-top:146px}.club-hero-media,.club-hero::before{top:146px}.club-command-grid{grid-template-columns:1fr}.home-benefits-grid{grid-template-columns:repeat(2,1fr)}.home-benefits article:nth-child(2){border-right:0}}
@media(max-width:640px){.home-page .container{width:calc(100% - 1.4rem)}.club-hero{padding-top:0;min-height:650px}.club-hero-media,.club-hero::before{inset:0}.club-hero-media{background-position:62% center}.club-hero-inner{min-height:650px;padding-top:5rem}.club-program-grid,.home-benefits-grid{grid-template-columns:1fr}.home-benefits article{border-right:0;border-bottom:1px solid rgba(214,163,73,.25)}.home-benefits article:last-child{border-bottom:0}}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: #0b0a08;
  color: var(--body-text);
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: min(1400px, calc(100% - 2rem));
  margin: 0 auto;
}

.home-page .club-visual-wrap {
  background:
    linear-gradient(90deg, rgba(2,2,2,.88) 0%, rgba(2,2,2,.34) 48%, rgba(2,2,2,.08) 100%),
    linear-gradient(180deg, rgba(0,0,0,.04) 55%, rgba(3,3,3,.72) 100%),
    url("assets/hero-shooting-range-v3.webp?v=1") center 48% / cover no-repeat;
}

.home-page .club-visual-wrap .club-hero-media {
  display: none;
}

.home-page .club-visual-wrap .club-hero {
  background: transparent;
}

.home-page .club-visual-wrap .club-command {
  background: transparent;
}

@media (max-width: 920px) {
  .home-page .club-visual-wrap {
    background-position: 61% center;
  }
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: rgba(8, 8, 6, 0.96);
  border-right: 0;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(10px);
}

.topbar {
  border-bottom: 1px solid rgba(214, 163, 73, 0.2);
  background: #02050a;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 700;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  gap: 1rem;
}

.topbar strong {
  color: var(--accent);
}

.hotline-wrap { display:inline-flex;align-items:center;gap:.65rem; }
.hotline-whatsapp { position:relative;display:grid;flex:0 0 auto;width:30px;height:30px;place-items:center;border-radius:50%;background:#18c766;color:#fff;box-shadow:0 0 0 0 rgba(24,199,102,.65);animation:hotlineWhatsappPulse 1.6s ease-out infinite; }
.hotline-whatsapp::before { position:absolute;inset:-5px;border:2px solid rgba(24,199,102,.55);border-radius:50%;content:"";animation:hotlineWhatsappRing 1.6s ease-out infinite; }
.hotline-whatsapp svg { position:relative;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.hotline-whatsapp svg path:last-child { fill:currentColor;stroke:none; }
.hotline-whatsapp:hover { transform:scale(1.08); }
@keyframes hotlineWhatsappPulse { 0%,100%{box-shadow:0 0 0 0 rgba(24,199,102,.58)} 55%{box-shadow:0 0 0 10px rgba(24,199,102,0)} }
@keyframes hotlineWhatsappRing { 0%{opacity:.9;transform:scale(.82)} 75%,100%{opacity:0;transform:scale(1.35)} }

.member-login-page { background:#070706; }
.member-login-hero { min-height:calc(100vh - 104px);display:grid;align-items:center;padding:4rem 0;background:linear-gradient(90deg,rgba(2,2,2,.96),rgba(2,2,2,.72)),url("assets/hero-shooting-range-v3.webp?v=1") center/cover; }
.member-login-layout { display:grid;grid-template-columns:minmax(0,680px) 1fr;align-items:center;gap:4rem; }
.member-login-copy > span,.member-login-label { color:#d6aa54;font-size:.75rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase; }
.member-login-copy h1 { margin:.5rem 0 1rem;color:#fff;font-size:clamp(3rem,7vw,6rem);line-height:.95; }
.member-login-copy p { max-width:620px;margin:0 0 1.7rem;color:rgba(255,255,255,.72);font-size:1.05rem;line-height:1.7; }
.member-login-copy .login-trigger { min-width:190px;cursor:pointer; }
.member-login-emblem { display:grid;place-items:center; }
.member-login-emblem img { width:min(330px,70%);filter:drop-shadow(0 18px 45px rgba(0,0,0,.65)); }
.member-login-page .login-modal { background:rgba(0,0,0,.82);backdrop-filter:blur(7px); }
.member-login-page .login-card { width:min(440px,100%);border:1px solid rgba(214,163,73,.5);border-radius:15px;padding:2rem;background:linear-gradient(145deg,#17150f,#080806);color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.68); }
.member-login-page .member-login-logo { width:86px;margin:0 auto .8rem; }
.member-login-page .member-login-label { display:block;text-align:center; }
.member-login-page .login-card h1 { margin:.4rem 0 .6rem;color:#fff;text-align:center;font-size:2rem; }
.member-login-intro,.member-login-help { color:rgba(255,255,255,.62);text-align:center;font-size:.82rem;line-height:1.5; }
.member-login-page .login-form { display:grid;gap:1rem;margin-top:1.3rem; }
.member-login-page .login-form label { display:grid;gap:.45rem;color:#fff;font-size:.8rem;font-weight:700; }
.member-login-page .login-form input { width:100%;height:48px;border:1px solid rgba(214,163,73,.35);border-radius:7px;padding:0 .9rem;background:#0b0a08;color:#fff;outline:none; }
.member-area-lock { display:grid; gap:.55rem; margin:1.25rem 0; padding:1rem 1.1rem; border:1px solid rgba(214,163,73,.45); border-radius:10px; background:rgba(214,163,73,.08); color:#fff; }
.member-area-lock span { color:rgba(255,255,255,.7); }
.member-area-lock .btn { width:max-content; margin-top:.3rem; }
.member-area-locked { position:relative; max-height:420px; overflow:hidden; }
.member-area-locked::after { content:"Login untuk melihat galeri lengkap"; position:absolute; inset:auto 0 0; display:grid; place-items:center; min-height:120px; padding-top:2.5rem; background:linear-gradient(transparent,rgba(8,8,6,.98) 45%); color:#d6aa54; font-weight:800; text-align:center; }
.member-kta-section { padding:3rem 0 4rem; background:#090806; color:#fff; }
.member-kta-heading span { color:#d6aa54; font-size:.75rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.member-kta-heading h2 { margin:.35rem 0 .4rem; }
.member-kta-heading p { color:#d6aa54; font-weight:800; }
.member-kta-card { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:1.5rem; align-items:center; width:min(100%,700px); min-height:250px; margin:1rem 0 1.25rem; padding:2rem; border-radius:14px; background:#050505 url("assets/kta-black-texture.jpeg") repeat; box-shadow:0 20px 45px rgba(0,0,0,.35); }
.member-kta-card-main { display:grid; gap:.6rem; }
.member-kta-card-main strong { font-size:clamp(1.3rem,4vw,2.1rem); text-transform:uppercase; }
.member-kta-card-main span,.member-kta-card-main b { color:#d6a349; font-size:1.1rem; text-transform:uppercase; }
.member-kta-card-main small { color:#d6a349; margin-top:.6rem; text-transform:uppercase; }
.member-kta-card-main em { font-size:1.35rem; font-style:normal; text-transform:uppercase; }
.member-kta-photo { display:grid; place-items:center; aspect-ratio:1/1; overflow:hidden; border-radius:10px; background:#392020; color:#d6a349; text-align:center; }
.member-kta-photo img { width:100%; height:100%; object-fit:cover; }
.member-login-page .login-form input:focus { border-color:#d6aa54;box-shadow:0 0 0 3px rgba(214,163,73,.1); }
.member-login-page .login-submit { min-height:48px;border:0;border-radius:7px;background:#d6aa54;color:#080706;font:inherit;font-weight:900;cursor:pointer; }
.member-login-page .login-create { display:block;width:max-content;margin:.7rem auto 0;color:#d6aa54;text-decoration:none;font-size:.82rem;font-weight:800; }
.member-login-page .login-close { color:#d6aa54;background:#0b0a08;border-color:rgba(214,163,73,.45); }
@media(max-width:800px){.member-login-layout{grid-template-columns:1fr}.member-login-emblem{display:none}.member-login-hero{min-height:650px;padding:3rem 0}.member-login-copy{text-align:center}.member-login-copy p{margin-right:auto;margin-left:auto}}

/* Mode ringan untuk perangkat yang meminta pengurangan animasi. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-sponsor-track { transform: none !important; will-change: auto !important; }
}

@media (max-width: 920px) {
  .site-header,
  .login-modal,
  .merch-cart-modal,
  .news-activity-lightbox { backdrop-filter: none !important; }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  min-height: 74px;
  padding: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 188px;
  text-decoration: none;
  color: var(--text);
}

.brand-logo {
  width: 170px;
  height: 58px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.brand-copy {
  display: grid;
  gap: 0.1rem;
  line-height: 1;
}

.brand-copy strong {
  color: #ffffff;
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  font-weight: 800;
}

.brand small {
  display: block;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  gap: clamp(0.65rem, 1.05vw, 1.15rem);
}

.main-nav a,
.social-links a {
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
}

.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 74px;
}

.main-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 74px;
  font-size: 0.88rem;
  white-space: nowrap;
}

.main-nav a.active {
  color: var(--accent);
  text-shadow: 0 0 18px rgba(214, 163, 73, 0.42);
}

.main-nav a.active::after {
  position: absolute;
  right: 0;
  bottom: 19px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--accent);
}

.main-nav a.nav-cta {
  min-height: auto;
  border: 1px solid rgba(214, 163, 73, 0.72);
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  font-size: 0.86rem;
  box-shadow: inset 0 0 0 1px rgba(214, 163, 73, 0.14), 0 0 22px rgba(214, 163, 73, 0.12);
}

.main-nav a.nav-cta::after {
  display: none;
}

.main-nav a.nav-cta-strong {
  border-color: var(--accent);
  background: var(--accent);
  color: #15130e;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 25;
  display: none;
  min-width: 270px;
  border: 1px solid #dddddd;
  background: #ffffff;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.16);
}

.nav-dropdown.is-open .dropdown-menu,
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  display: block;
}

.dropdown-menu a {
  display: flex;
  min-height: auto;
  padding: 1.35rem 1.5rem;
  border-bottom: 1px solid #e8e8e8;
  color: var(--body-text);
  font-size: 1.05rem;
  font-weight: 500;
}

.dropdown-menu a.active {
  background: var(--accent);
  color: #15130e;
}

.dropdown-menu a:last-child {
  border-bottom: 0;
}

.dropdown-menu a::after {
  display: none;
}

.dropdown-menu a:hover {
  background: #f4f7fa;
  color: var(--body-text);
}

.dropdown-menu a.active:hover {
  background: var(--accent);
  color: #15130e;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: none;
  border-radius: 0.85rem;
  padding: 0.95rem 1.6rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary {
  background: var(--button);
  color: #02050a;
  box-shadow: 0 14px 34px rgba(214, 163, 73, 0.36);
}

.btn-ghost {
  border: 1px solid rgba(214, 163, 73, 0.45);
  background: rgba(214, 163, 73, 0.08);
  color: var(--text);
  box-shadow: none;
}

.hero {
  min-height: calc(100vh - 110px);
  aspect-ratio: auto;
  max-height: none;
  padding: 110px 0 0;
  display: flex;
  align-items: flex-start;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 44%, rgba(0, 0, 0, 0.54)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18)),
    url("assets/logo-background-current.webp") left center / cover no-repeat;
  background-color: #02050a;
}

.hero-content {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: calc(100vh - 220px);
  padding-top: clamp(1.4rem, 2.4vw, 3rem);
}

.hero-copy {
  width: min(100%, 560px);
  margin-left: 0;
  margin-right: clamp(0rem, 4vw, 4rem);
  color: #ffffff;
  text-align: left;
}

.home-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.home-editor button {
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 0.25rem;
  padding: 0.65rem 1rem;
  background: rgba(0, 0, 0, 0.35);
  color: #ffffff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
}

.home-editor button:hover {
  background: rgba(0, 0, 0, 0.55);
}

.floating-editor {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.7rem;
  border-radius: 0.45rem;
  background: rgba(48, 47, 43, 0.92);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22);
}

body:not(.is-admin-session) .floating-editor,
body:not(.is-admin-session) .home-editor {
  display: none;
}

.floating-editor button {
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 0.25rem;
  padding: 0.6rem 0.9rem;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
}

.floating-editor button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.is-admin-session [contenteditable="true"] {
  outline: 2px dashed rgba(255, 225, 115, 0.9);
  outline-offset: 0.35rem;
  background: rgba(0, 0, 0, 0.22);
}

body:not(.is-admin-session) [contenteditable="true"] {
  outline: 0;
  background: transparent;
}

body:not(.is-admin-session) [data-edit-key] {
  caret-color: transparent;
}

.hero h1 {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  font-size: clamp(2.25rem, 3.55vw, 3.85rem);
  line-height: 0.96;
  letter-spacing: 0.02em;
  font-weight: 800;
  text-transform: uppercase;
  text-shadow: 0 10px 38px rgba(0, 0, 0, 0.82), 0 0 24px rgba(214, 163, 73, 0.16);
}

.hero h1 span {
  color: var(--accent);
  text-shadow: 0 0 28px rgba(214, 163, 73, 0.32);
  font-size: clamp(1.85rem, 2.9vw, 3.05rem);
}

.hero h1 strong {
  color: #ffffff;
  font: inherit;
}

.hero-kicker {
  display: inline-flex;
  margin-bottom: 1.15rem;
  color: var(--accent);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero p {
  max-width: 500px;
  margin: 1.35rem 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.95rem, 1.05vw, 1.08rem);
  font-weight: 500;
  line-height: 1.8;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1rem;
  margin-top: 2rem;
  padding-right: 0;
}

.hero-actions .btn {
  min-width: 170px;
  border-radius: 999px;
  padding: 1rem 1.35rem;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-sponsor-runner {
  display: block;
  width: min(100%, 980px);
  margin: 2.2rem auto 0;
  transform: none;
  overflow: hidden;
  padding: 0.4rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.hero-sponsor-track {
  --sponsor-gap: 1.25rem;
  display: flex;
  align-items: center;
  gap: var(--sponsor-gap);
  width: max-content;
  animation: sponsorRun 18s linear infinite;
}

.sponsor-runner-label-row {
  overflow: hidden;
  margin-bottom: 0.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.sponsor-runner-label-track {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.sponsor-runner-label-track span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.9rem;
  border-left: 2px solid var(--accent);
  color: #f4d487;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(214, 163, 73, 0.45);
  animation: sponsorLabelGlide 5s ease-in-out infinite alternate;
}

.hero-sponsor-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(178px, 16vw, 220px);
  height: clamp(86px, 7.5vw, 106px);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 800;
  text-decoration: none;
  backdrop-filter: blur(4px);
}

.hero-sponsor-logo img {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0.55rem;
  object-fit: contain;
  background: #ffffff;
  border-radius: inherit;
}

.sponsor-logo-popup {
  position: fixed;
  z-index: 100;
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  gap: 0.8rem;
  width: min(19rem, calc(100vw - 2rem));
  padding: 0.8rem;
  border: 1px solid rgba(244, 212, 135, 0.7);
  border-radius: 0.55rem;
  background: rgba(8, 13, 20, 0.97);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.48), 0 0 20px rgba(214, 163, 73, 0.16);
  color: #ffffff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.35rem);
  transition: opacity 150ms ease, transform 150ms ease;
}

.sponsor-logo-popup.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sponsor-popup-logo {
  display: grid;
  place-items: center;
  min-height: 4.4rem;
  overflow: hidden;
  border: 1px solid rgba(214, 163, 73, 0.42);
  border-radius: 0.35rem;
  background: #ffffff;
  color: #17130a;
  font-weight: 800;
}

.sponsor-popup-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.3rem;
}

.sponsor-popup-copy {
  min-width: 0;
}

.sponsor-popup-copy small {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--accent);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sponsor-popup-copy strong {
  display: block;
  color: #ffffff;
  font-size: 0.96rem;
}

.sponsor-popup-copy p {
  margin: 0.32rem 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.74rem;
  line-height: 1.45;
}

.hero-sponsor-runner:hover .hero-sponsor-track,
.hero-sponsor-runner:hover .sponsor-runner-label-track span {
  animation-play-state: paused;
}

.sponsor-runner-strip {
  overflow: hidden;
  padding: 1.05rem 0;
  border-top: 1px solid rgba(214, 163, 73, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #030302;
}

.sponsor-runner-strip .hero-sponsor-runner {
  width: 100%;
  margin: 0;
}

.merch-section {
  padding: clamp(1.25rem, 2vw, 2rem) 0 clamp(3.5rem, 5vw, 5.5rem);
  background: linear-gradient(180deg, #030302 0%, #080806 56%, #030302 100%);
  color: #ffffff;
}

.merch-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.6rem;
}

.merch-heading h2 {
  margin: 0.2rem 0 0;
  color: #ffffff;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.05;
}

.merch-section .text-link {
  color: var(--accent);
}

.merch-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(145px, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  padding-top: 1.7rem;
  border-top: 2px solid rgba(214, 163, 73, 0.85);
}

.merch-strip article {
  min-height: 220px;
  border: 1px solid rgba(214, 163, 73, 0.22);
  border-radius: 22px;
  padding: 1.15rem;
  background: #ffffff;
  color: #181611;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}

.merch-strip:not(.is-expanded) article:nth-child(n+6) { display:none; }
.merch-market-actions { display:flex;align-items:center;gap:.7rem; }
.merch-cart-button,.add-merch-product,.merch-show-more,.merch-add-cart,.merch-delete-product { border:1px solid rgba(214,163,73,.65);border-radius:7px;background:#0b0a08;color:#d6aa54;font:inherit;font-weight:800;cursor:pointer; }
.merch-cart-button,.add-merch-product { min-height:42px;padding:0 1rem;display:inline-flex;align-items:center;gap:.4rem; }
.merch-cart-button svg { flex:0 0 auto; }
.is-admin-session .add-merch-product.admin-only-control { display:inline-flex;align-items:center; }
.merch-cart-button b { display:inline-grid;min-width:22px;height:22px;place-items:center;margin-left:.35rem;border-radius:50%;background:#d6aa54;color:#090806; }
.merch-add-cart { width:100%;min-height:36px;margin-top:.8rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:#d6aa54;color:#090806; }
.merch-add-cart svg { flex:0 0 auto; }
.merch-delete-product { min-height:2.15rem;padding:0 .7rem;border-color:#b84a4a;color:#ff9b9b; }
.merch-show-more { display:flex;align-items:center;justify-content:center;gap:.55rem;min-width:160px;min-height:44px;margin:1.5rem auto 0; }
.merch-show-more:hover { background:#d6aa54;color:#090806; }
.merch-cart-modal { position:fixed;inset:0;z-index:10020;display:none;justify-content:flex-end;background:rgba(0,0,0,.72);backdrop-filter:blur(4px); }
.merch-cart-modal.is-open { display:flex; }
.merch-cart-panel { display:flex;width:min(440px,94vw);height:100%;flex-direction:column;padding:1.35rem;background:#0d0c09;border-left:1px solid rgba(214,163,73,.5);box-shadow:-20px 0 60px rgba(0,0,0,.5); }
.merch-cart-head { display:flex;align-items:center;justify-content:space-between;padding-bottom:1rem;border-bottom:1px solid rgba(214,163,73,.3); }
.merch-cart-head span { color:#d6aa54;font-size:.72rem;font-weight:800;text-transform:uppercase; }
.merch-cart-head h2 { margin:.25rem 0 0;color:#fff; }
.merch-cart-head button { width:42px;height:42px;border:1px solid rgba(214,163,73,.5);border-radius:8px;background:#080706;color:#d6aa54;font-size:1.8rem;cursor:pointer; }
.merch-cart-items { display:grid;gap:.7rem;overflow-y:auto;padding:1rem 0; }
.merch-cart-item { display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid rgba(214,163,73,.25);border-radius:9px;padding:.8rem;background:#14120e; }
.merch-cart-item strong,.merch-cart-item small { display:block;color:#fff; }
.merch-cart-item small { margin-top:.25rem;color:#d6aa54; }
.merch-cart-qty { display:flex;align-items:center;gap:.4rem; }
.merch-cart-qty button { min-width:30px;height:30px;border:1px solid rgba(214,163,73,.4);border-radius:5px;background:#080706;color:#fff;cursor:pointer; }
.merch-cart-qty .merch-cart-remove { width:auto;padding:0 .5rem;color:#ff8b8b; }
.merch-cart-empty { color:rgba(255,255,255,.6);text-align:center;padding:2rem 0; }
.merch-cart-summary { display:flex;justify-content:space-between;margin-top:auto;border-top:1px solid rgba(214,163,73,.35);padding:1rem 0;color:#fff;font-size:1.15rem; }
.merch-cart-summary strong { color:#d6aa54; }
.merch-cart-checkout { min-height:48px;border:0;border-radius:7px;background:#d6aa54;color:#090806;font:inherit;font-weight:900;cursor:pointer; }
.merch-cart-continue { min-height:44px;margin-top:.65rem;margin-bottom:.7rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid rgba(214,163,73,.55);border-radius:7px;background:transparent;color:#d6aa54;font:inherit;font-weight:800;cursor:pointer; }
.merch-cart-continue svg { flex:0 0 auto; }
@media(max-width:620px){.merch-market-actions{width:100%;justify-content:space-between}.merch-heading{gap:1rem}.merch-cart-button,.add-merch-product{padding:0 .7rem;font-size:.78rem}}

.merch-strip strong,
.merch-strip small {
  display: block;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.15;
}

.merch-strip small {
  margin-top: 0.1rem;
}

.merch-image {
  display: block;
  height: 132px;
  margin-bottom: 0.85rem;
  border-radius: 16px;
  background-color: #f5f7fb;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

.merch-image.has-custom-image {
  width: 88%;
  height: 145px;
  margin: 0 auto 0.85rem;
  border: 1px solid rgba(214, 163, 73, 0.24);
  background-color: #f5f7fb;
  background-size: 200% auto;
  background-position: left center;
}

.merch-image-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(5px);
}

.merch-image-modal.is-open { display: flex; }

.merch-image-modal img {
  display: block;
  max-width: min(92vw, 1050px);
  max-height: 86vh;
  object-fit: contain;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
}

.merch-image-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(214, 163, 73, 0.7);
  border-radius: 12px;
  background: #0b0a08;
  color: #d6a349;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.merch-mug {
  background:
    radial-gradient(circle at 65% 52%, transparent 0 24px, #d5d9e2 25px 34px, transparent 35px),
    linear-gradient(90deg, transparent 16%, #fbfbfc 17% 61%, #dfe3eb 62% 69%, transparent 70%),
    linear-gradient(180deg, #ffffff, #eef1f6);
}

.merch-tumbler {
  background:
    radial-gradient(ellipse at 50% 20%, #eef0f5 0 34px, transparent 35px),
    linear-gradient(90deg, transparent 27%, #f8f4da 28% 34%, #d8b84f 35% 63%, #f7efd0 64% 70%, transparent 71%),
    linear-gradient(180deg, #ffffff, #eef1f6);
}

.merch-shirt {
  background:
    radial-gradient(circle at 50% 25%, #ffffff 0 27px, transparent 28px),
    linear-gradient(120deg, transparent 19%, #f7f7f8 20% 33%, #ffffff 34% 66%, #eeeeef 67% 80%, transparent 81%),
    linear-gradient(180deg, #ffffff, #eef1f6);
}

.merch-cap {
  background:
    radial-gradient(ellipse at 50% 58%, #17130d 0 55px, transparent 56px),
    linear-gradient(12deg, transparent 52%, #d6a349 53% 66%, transparent 67%),
    linear-gradient(180deg, #ffffff, #eef1f6);
}

.merch-jersey {
  background:
    linear-gradient(90deg, transparent 21%, #f6f1e5 22% 34%, #d6a349 35% 48%, #f6f1e5 49% 62%, transparent 63%),
    radial-gradient(circle at 50% 22%, #ffffff 0 20px, transparent 21px),
    linear-gradient(180deg, #ffffff, #eef1f6);
}

.merch-admin-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.merch-upload-control,
.merch-remove-image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.15rem;
  border: 1px solid rgba(214, 163, 73, 0.55);
  border-radius: 999px;
  padding: 0 0.75rem;
  background: #181611;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.merch-upload-control input {
  display: none;
}

.merch-remove-image {
  background: #ffffff;
  color: #181611;
}

.social-strip {
  display: none;
  background: var(--navy);
  color: #ffffff;
  padding: 1.55rem 0;
}

.social-strip-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: 2rem;
}

.social-strip h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.1;
  text-align: center;
}

.social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 4vw, 4rem);
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  color: #ffffff;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.hero-values {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  padding: clamp(4.5rem, 7vw, 7.5rem) 0 clamp(4.5rem, 8vw, 8rem);
  background:
    linear-gradient(135deg, transparent 0 66%, rgba(214, 163, 73, 0.12) 76%, transparent 88%),
    linear-gradient(315deg, rgba(180, 124, 42, 0.28), transparent 24rem),
    linear-gradient(180deg, #040b14 0%, #06111d 45%, #03070d 100%);
  color: #ffffff;
}

.hero-values::before,
.hero-values::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.hero-values::before {
  inset: 0;
  opacity: 0.45;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}

.hero-values::after {
  right: -2rem;
  bottom: 0;
  width: 32rem;
  height: 14rem;
  background:
    repeating-linear-gradient(150deg, transparent 0 1.2rem, rgba(214, 163, 73, 0.34) 1.25rem 1.32rem, transparent 1.38rem 2.4rem),
    linear-gradient(135deg, transparent 20%, rgba(214, 163, 73, 0.36) 58%, transparent 86%);
  filter: blur(4px);
  transform: skewX(-18deg);
}

.values-heading {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.values-heading::before,
.values-heading::after {
  position: absolute;
  top: 0.85rem;
  width: min(8vw, 6rem);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(214, 163, 73, 0.78));
}

.values-heading::before {
  right: calc(50% + 12rem);
}

.values-heading::after {
  left: calc(50% + 12rem);
  transform: scaleX(-1);
}

.values-sight {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  margin-bottom: 0.85rem;
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.14);
}

.values-sight::before,
.values-sight::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 2.2rem;
  height: 1px;
  content: "";
  background: rgba(255, 255, 255, 0.28);
  transform: translate(-50%, -50%);
}

.values-sight::after {
  width: 1px;
  height: 2.2rem;
}

.values-heading p {
  margin: 0 0 1.25rem;
  color: #d6a349;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
}

.values-heading h2 {
  margin: 0;
  color: #f4d487;
  font-size: 5rem;
  line-height: 0.98;
  text-shadow:
    0 1px 0 rgba(255, 244, 205, 0.75),
    0 16px 34px rgba(0, 0, 0, 0.7),
    0 0 28px rgba(214, 163, 73, 0.26);
}

.values-heading > span:not(.values-sight) {
  display: block;
  margin-top: 1.35rem;
  color: rgba(244, 212, 135, 0.72);
  font-size: 1.25rem;
  font-weight: 700;
}

.values-heading i {
  display: block;
  width: 10rem;
  height: 1rem;
  margin-top: 1.25rem;
  background:
    linear-gradient(90deg, rgba(214, 163, 73, 0.05), rgba(214, 163, 73, 0.78), rgba(214, 163, 73, 0.05)) center / 100% 1px no-repeat,
    linear-gradient(120deg, transparent 0 34%, #d6a349 34% 45%, transparent 45% 50%, #d6a349 50% 61%, transparent 61% 66%, #d6a349 66% 77%, transparent 77%);
}

.hero-value-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, clamp(178px, 16vw, 220px)));
  justify-content: center;
  gap: clamp(0.8rem, 1.45vw, 1.25rem);
  max-width: 980px;
  margin: 0 auto;
  border: 0;
}

.hero-value-grid article {
  position: relative;
  display: grid;
  justify-items: center;
  height: clamp(86px, 7.5vw, 106px);
  min-height: 0;
  overflow: hidden;
  padding: 0.7rem 0.65rem 0.55rem;
  border: 1px solid rgba(214, 163, 73, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.01)),
    radial-gradient(circle at 50% 0, rgba(214, 163, 73, 0.24), transparent 8rem),
    rgba(5, 12, 21, 0.82);
  box-shadow:
    inset 0 0 45px rgba(255, 255, 255, 0.025),
    0 20px 42px rgba(0, 0, 0, 0.36);
  clip-path: polygon(6% 0, 94% 0, 100% 5%, 100% 95%, 94% 100%, 6% 100%, 0 95%, 0 5%);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.hero-value-grid article::before,
.hero-value-grid article::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.hero-value-grid article::before {
  top: -1px;
  left: 26%;
  width: 48%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d6a349, transparent);
  box-shadow: 0 0 18px #d6a349;
}

.hero-value-grid article::after {
  right: 12%;
  bottom: 0.5rem;
  left: 12%;
  height: 5px;
  opacity: 0.34;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 1px, transparent 2px) 0 0 / 12px 5px repeat-x;
}

.value-number {
  position: absolute;
  top: 0.55rem;
  left: 0.65rem;
  color: rgba(214, 163, 73, 0.12);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
}

.value-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(1.35rem, 2vw, 1.65rem);
  aspect-ratio: 1;
  margin-bottom: 0.35rem;
  background:
    radial-gradient(circle, rgba(214, 163, 73, 0.24), rgba(214, 163, 73, 0.07) 52%, transparent 70%),
    rgba(12, 13, 17, 0.74);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  filter: drop-shadow(0 0 16px rgba(214, 163, 73, 0.34));
  transition: transform 260ms ease, filter 260ms ease;
}

.value-icon::before {
  position: absolute;
  inset: 0.18rem;
  border: 1px solid rgba(214, 163, 73, 0.78);
  content: "";
  clip-path: inherit;
  box-shadow: inset 0 0 24px rgba(214, 163, 73, 0.18);
}

.value-icon svg {
  position: relative;
  width: 50%;
  height: 50%;
  fill: none;
  stroke: #d6a349;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4.4;
  filter: drop-shadow(0 0 7px rgba(214, 163, 73, 0.82));
  transition: transform 260ms ease, filter 260ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .hero-value-grid article:hover {
    z-index: 2;
    transform: translateY(-0.6rem) scale(1.015);
    border-color: #f4d487;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.018)),
      radial-gradient(circle at 50% 0, rgba(214, 163, 73, 0.42), transparent 10rem),
      rgba(5, 12, 21, 0.94);
    box-shadow:
      inset 0 0 52px rgba(214, 163, 73, 0.12),
      0 0 28px rgba(214, 163, 73, 0.26),
      0 26px 48px rgba(0, 0, 0, 0.52);
  }

  .hero-value-grid article:hover::before {
    box-shadow: 0 0 28px #f4d487;
  }

  .hero-value-grid article:hover .value-icon {
    transform: translateY(-0.25rem) scale(1.08) rotate(5deg);
    filter: drop-shadow(0 0 24px rgba(244, 212, 135, 0.7));
  }

  .hero-value-grid article:hover .value-icon svg {
    transform: scale(1.08);
    filter: drop-shadow(0 0 11px #f4d487);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-value-grid article,
  .value-icon,
  .value-icon svg {
    transition: none;
  }
}

.hero-value-grid h3 {
  margin: 0 0 0.28rem;
  color: #f4d487;
  font-size: 0.82rem;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(214, 163, 73, 0.24);
}

.hero-value-grid h3::after {
  display: block;
  width: 2.1rem;
  height: 1px;
  margin: 0.25rem auto 0;
  content: "";
  background: #d6a349;
  box-shadow: 0 0 12px rgba(214, 163, 73, 0.85);
}

.hero-value-grid p {
  display: -webkit-box;
  max-width: 9rem;
  margin: 0;
  color: rgba(244, 212, 135, 0.68);
  overflow: hidden;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-align: center;
}

.section {
  padding: 4rem 0;
  background: #0b0a08;
  color: #ffffff;
}

.content-page {
  padding-top: 110px;
}

.page-hero {
  padding: 5rem 0 3.5rem;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.28)),
    url("assets/logo-background-current.webp") center / cover no-repeat;
  color: #ffffff;
}

.page-hero h1 {
  margin: 0;
  font-size: clamp(2.25rem, 4vw, 4.5rem);
  line-height: 1.1;
}

.page-hero p {
  max-width: 780px;
  margin: 1rem 0 0;
  font-size: 1.15rem;
  line-height: 1.7;
}

.page-content {
  padding: 4rem 0;
  background: #0b0a08;
}

.page-content-card {
  max-width: 980px;
  border: 1px solid rgba(214, 163, 73, 0.25);
  border-radius: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: #11100d;
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.rich-edit-content ul {
  margin: 0.7rem 0 1.25rem;
  padding-left: 1.65rem;
}

.rich-edit-content li {
  margin-bottom: 1rem;
  padding-left: 0.2rem;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.75;
}

.rich-edit-content li:last-child {
  margin-bottom: 0;
}

.rich-edit-content strong {
  color: rgba(255, 255, 255, 0.72);
}

.sejarah-rich-content p{margin:0 0 1.5rem}
.sejarah-rich-content p:last-child{margin-bottom:0}
.sejarah-legacy-paragraphs{white-space:normal!important}
.sejarah-legacy-paragraphs p{margin:0 0 1.5rem;line-height:1.8;color:rgba(255,255,255,.68)}
.sejarah-legacy-paragraphs p:last-child{margin-bottom:0}

.page-content-card h2 {
  margin-top: 0;
}

.page-content-card p {
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.8;
}

.contact-info-list{display:grid;gap:1.15rem;margin-top:1.5rem;padding:0;list-style:none}
.contact-info-list li{display:grid;grid-template-columns:2.8rem minmax(0,1fr);gap:.9rem;align-items:start}
.contact-info-list li>i{display:grid;width:2.8rem;height:2.8rem;place-items:center;border:1px solid rgba(214,163,73,.35);border-radius:50%;background:rgba(214,163,73,.08);color:#d8ad4e;font-style:normal;font-size:1.1rem}
.contact-info-list li>div{display:grid;gap:.35rem;padding-top:.15rem}
.contact-info-list strong{color:#fff;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}
.contact-info-list span{color:rgba(255,255,255,.68);font-size:.88rem;line-height:1.65;white-space:pre-line}
@media(max-width:640px){.contact-info-list li{grid-template-columns:2.45rem minmax(0,1fr);gap:.75rem}.contact-info-list li>i{width:2.45rem;height:2.45rem}.contact-info-list span{font-size:.82rem}}
.contact-map-link{width:max-content;margin-top:.15rem;color:#d9ad4d;font-size:.78rem;font-weight:800;text-decoration:none}
.contact-map-link:hover{text-decoration:underline}
.contact-map-editor{display:grid;max-width:34rem;gap:.3rem;margin-top:.55rem;color:#d9ad4d;font-size:.72rem;font-weight:800}
.contact-map-editor input{width:100%;min-height:2.5rem;border:1px solid rgba(214,163,73,.38);border-radius:.4rem;padding:.5rem .65rem;background:#fff;color:#17130d;font:inherit}
.training-location-block{display:grid;gap:.35rem;margin-top:.7rem;padding-top:.7rem;border-top:1px solid rgba(214,163,73,.16)}
.training-location-block:first-of-type{margin-top:.25rem}
.training-location-block>b{color:#d9ad4d;font-size:.78rem;text-transform:uppercase}
.contact-instagram-link{width:max-content;color:#d9ad4d!important;font-size:.88rem;font-weight:700;text-decoration:none}
.contact-instagram-link:hover{text-decoration:underline}
.contact-instagram-link span{color:inherit!important}

.member-area-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.member-info-card,
.member-media-card {
  display: grid;
  gap: 0.7rem;
  min-height: 180px;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  padding: 1.2rem;
  background: var(--surface-soft);
  color: #ffffff;
}

.member-info-card h3,
.member-media-card h3 {
  margin: 0;
  color: #ffffff;
}

.member-info-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.member-info-list,
.member-info-form {
  display: grid;
  gap: 0.75rem;
}

.member-info-form label {
  color: #ffffff;
  font-weight: 800;
}

.member-info-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border: 1px dashed rgba(214, 163, 73, 0.35);
  border-radius: 0.55rem;
  padding: 1rem;
  background: #ffffff;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}

.member-sheet-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  background: #ffffff;
}

.member-info-sheet {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  color: var(--body-text);
  font-size: 0.92rem;
}

.member-info-sheet th,
.member-info-sheet td {
  border: 1px solid var(--border);
  padding: 0.75rem;
  text-align: left;
  vertical-align: top;
}

.member-info-sheet th {
  background: var(--navy);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.member-info-sheet th:first-child,
.member-info-sheet td:first-child {
  width: 3.4rem;
  text-align: center;
}

.member-info-sheet th:nth-child(2),
.member-info-sheet td:nth-child(2) {
  width: 8.5rem;
}

.member-info-sheet th:last-child,
.member-info-sheet td:last-child {
  width: 6rem;
  text-align: center;
}

.member-info-sheet td[contenteditable="true"] {
  background: #ffffff;
  outline: none;
}

.member-info-sheet td[contenteditable="true"]:focus {
  background: #fff9e8;
  box-shadow: inset 0 0 0 2px var(--accent);
}

.member-photo-sheet th:nth-child(2),
.member-photo-sheet td:nth-child(2) {
  width: 8rem;
  text-align: center;
}

.member-photo-sheet th:nth-child(3),
.member-photo-sheet td:nth-child(3) {
  width: 8.5rem;
}

.member-sheet-photo {
  display: block;
  width: 6rem;
  height: 4.5rem;
  margin: 0 auto;
  border-radius: 0.35rem;
  object-fit: fill;
  background: #000000;
}

.member-info-item {
  display: grid;
  gap: 0.45rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  padding: 1rem;
  background: #ffffff;
}

.member-info-item h4 {
  margin: 0;
  color: var(--body-text);
}

.member-info-item span {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 800;
}

.member-info-form input,
.member-info-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  padding: 0.8rem 0.85rem;
  background: #ffffff;
  color: var(--body-text);
  font: inherit;
  resize: vertical;
}

.member-media-date {
  margin: -0.25rem 0 0;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 800;
}

.member-card-label {
  width: max-content;
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  background: var(--navy);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.member-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.member-gallery-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  border: 1px dashed rgba(214, 163, 73, 0.35);
  border-radius: 0.55rem;
  padding: 1rem;
  background: #ffffff;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}

.member-gallery-item {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  background: #ffffff;
}

.member-gallery-item img,
.member-gallery-item video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: fill;
  background: #000000;
}

.member-gallery-body {
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem;
}

.member-gallery-body strong {
  color: var(--body-text);
  font-size: 0.9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.member-gallery-body span {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 800;
}

.member-upload-control,
.member-remove-media {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  padding: 0.65rem 0.85rem;
  background: #ffffff;
  color: var(--body-text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
}

.member-upload-control input {
  display: none;
}

.member-remove-media {
  background: transparent;
}

.section-bg {
  background: #12100d;
}

.section-alt {
  background: #12100d;
}

.section-label {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.section-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.section-heading-row h2 {
  margin: 0;
}

.berita-list-panel .section-heading-row h2 {
  color: #ffffff;
  font-weight: 800;
}

.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}

.values-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(243, 247, 250, 0.98)),
    url("assets/logo-background-current.webp") center / cover no-repeat;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.value-card {
  min-height: 230px;
  border: 1px solid rgba(214, 163, 73, 0.22);
  border-radius: 0.8rem;
  padding: 1.45rem;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.06);
}

.value-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 999px;
  background: var(--navy);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 800;
}

.value-card h3 {
  margin: 1.25rem 0 0.65rem;
  font-size: 1.35rem;
}

.value-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.split-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 2rem;
  align-items: start;
}

.feature-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.feature-list li {
  background: #11100d;
  border: 1px solid rgba(214, 163, 73, 0.25);
  border-radius: 1rem;
  padding: 1rem 1.2rem;
  color: #ffffff;
}

.card,
.news-card,
.service-card {
  background: #11100d;
  border: 1px solid rgba(214, 163, 73, 0.25);
  border-radius: 1.5rem;
  padding: 2rem;
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.card h3 {
  margin-top: 0;
}

.service-grid,
.news-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-card h3,
.news-card h3 {
  margin-top: 0;
}

.news-card {
  display: grid;
  align-content: start;
  gap: 0.8rem;
}

.berita-list-grid .news-card[hidden] {
  display: none !important;
}

.news-category-badge {
  display: inline-flex;
  width: max-content;
  min-height: 1.75rem;
  align-items: center;
  border: 1px solid rgba(214, 163, 73, 0.55);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  background: rgba(214, 163, 73, 0.12);
  color: #e1b55a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.news-category-control {
  align-items:center;
  gap:.65rem;
  color:#f4d487;
  font-size:.78rem;
  font-weight:800;
}
.is-admin-session .news-category-control.admin-only-control { display:flex; }
.news-category-control select {
  min-width:145px;
  height:38px;
  border:1px solid rgba(214,163,73,.55);
  border-radius:6px;
  padding:0 .7rem;
  background:#0b0a08;
  color:#fff;
  font:inherit;
  cursor:pointer;
}

.news-admin-tools {
  justify-content: flex-end;
  margin: 1rem 0 1.25rem;
}

.add-news-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border: 1px solid var(--navy);
  border-radius: 0.35rem;
  padding: 0.7rem 1rem;
  background: var(--navy);
  color: #ffffff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
}

.news-photo {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(214, 163, 73, 0.26);
  border-radius: 0.7rem;
  background:
    linear-gradient(135deg, rgba(214, 163, 73, 0.13), transparent 55%),
    #070604;
  color: rgba(244, 212, 135, 0.68);
  font-weight: 800;
}

.news-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
}

.news-full-text {
  min-height: 7.5rem;
  border: 1px dashed rgba(214, 163, 73, 0.45);
  border-radius: 0.45rem;
  padding: 0.85rem;
  background: rgba(214, 163, 73, 0.06);
  white-space: pre-wrap;
}

.news-card a {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.news-meta {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.berita-page-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.berita-sidebar {
  position: sticky;
  top: 116px;
  display: grid;
  gap: 1.5rem;
}

.berita-sidebar-card {
  display: grid;
  gap: 0.7rem;
  border: 1px solid rgba(214, 163, 73, 0.18);
  border-radius: 1.55rem;
  padding: 1.45rem;
  background: #0d0c09;
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.berita-sidebar-card h2,
.news-detail-sidebar h2 {
  position: relative;
  margin: 0 0 0.75rem;
  padding-left: 0.9rem;
  color: #ffffff;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.berita-sidebar-card h2::before,
.news-detail-sidebar h2::before {
  content: "";
  position: absolute;
  top: 0.1rem;
  bottom: 0.1rem;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--accent);
}

.berita-sidebar-card > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.berita-sidebar-card > a.active,
.berita-sidebar-card > a:hover {
  background: var(--accent);
  color: #15130e;
}

.berita-sidebar-card > a strong {
  color: inherit;
  font-size: 0.76rem;
}

.berita-list-panel {
  min-width: 0;
}

.berita-list-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.6rem;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.92rem;
}

.berita-list-topbar select {
  min-width: 126px;
  border: 1px solid rgba(214, 163, 73, 0.28);
  border-radius: 0.75rem;
  padding: 0.65rem 0.9rem;
  background: #0d0c09;
  color: #ffffff;
  font: inherit;
}

.berita-list-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.berita-list-grid .news-card {
  border-radius: 1.45rem;
  padding: 1.25rem;
}

.berita-list-grid .news-photo {
  border-radius: 0.95rem;
}

.berita-list-grid .news-card h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}

/* Berita & Informasi - magazine layout */
.news-magazine-page > .content-page > .page-hero { display: none; }
.news-magazine-page > .content-page > .page-content { padding-top: 1.4rem; }
.news-magazine-page .content-page > .page-content > .container { max-width: 1440px; }

@media (min-width: 1221px) {
  body.news-magazine-page:not(.home-page) > .content-page {
    padding-top: 150px !important;
  }
}
.news-magazine { color: #fff; }
.news-magazine-head { display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);align-items:end;gap:2rem; }
.news-magazine-head h1 { margin:0;color:#fff;font-size:clamp(1.8rem,3vw,2.55rem);line-height:1.05; }
.news-magazine-head p { margin:.45rem 0 0;color:rgba(255,255,255,.68); }
.news-search-box { display:flex;align-items:center;gap:.75rem;height:46px;border:1px solid rgba(214,163,73,.32);border-radius:8px;padding:0 .9rem;background:#0d0c0a;color:#fff; }
.news-search-box input { width:100%;border:0;outline:0;background:transparent;color:#fff;font:inherit; }
.news-search-box input::placeholder { color:rgba(255,255,255,.5); }
.news-filter-tabs { display:flex;flex-wrap:wrap;gap:.65rem;margin:1.15rem 0 1rem; }
.news-filter-tabs button { min-width:94px;height:38px;border:1px solid #b88a32;border-radius:999px;padding:0 1.2rem;background:transparent;color:#fff;font:inherit;cursor:pointer; }
.news-filter-tabs button.active,.news-filter-tabs button:hover { background:#d6aa54;color:#090806; }
.news-magazine-lead { display:grid;grid-template-columns:minmax(0,1.85fr) minmax(290px,1fr);gap:2.2rem;align-items:start; }
.news-feature-card { position:relative;min-height:390px;overflow:hidden;border:1px solid rgba(214,163,73,.65);border-radius:9px;background:#12110e; }
.news-feature-card img,.news-feature-placeholder { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.news-feature-placeholder { display:grid;place-items:center;background:linear-gradient(135deg,#2a2419,#080706);color:#d6aa54;font-weight:800; }
.news-feature-card::after { content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.5) 56%,rgba(0,0,0,.08)),linear-gradient(0deg,rgba(0,0,0,.75),transparent 65%); }
.news-feature-copy { position:absolute;z-index:1;left:1.5rem;right:1.5rem;bottom:1.35rem;max-width:670px; }
.news-feature-meta,.news-mini-meta,.news-tile-meta { display:flex;align-items:center;gap:.75rem;color:rgba(255,255,255,.72);font-size:.75rem; }
.news-feature-meta strong,.news-mini-meta strong,.news-tile-meta strong { color:#e0b250;text-transform:uppercase; }
.news-feature-copy h2 { margin:.65rem 0 .5rem;color:#fff;font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.14; }
.news-feature-copy p { margin:0 0 1rem;color:rgba(255,255,255,.8);line-height:1.55; }
.news-feature-copy a { display:inline-flex;min-height:40px;align-items:center;border-radius:6px;padding:0 1.35rem;background:#d6aa54;color:#090806;font-weight:800;text-decoration:none; }
.news-magazine-latest h2,.news-magazine-more > h2 { display:flex;align-items:center;gap:1rem;margin:0;color:#fff;font-size:1.35rem; }
.news-magazine-latest h2::after,.news-magazine-more > h2::after { content:"";height:1px;flex:1;background:rgba(214,163,73,.45); }
.news-mini-card { display:grid;grid-template-columns:140px 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid rgba(214,163,73,.32);text-decoration:none; }
.news-mini-card img,.news-mini-placeholder { width:140px;height:86px;object-fit:cover;border-radius:7px;background:#16130e; }
.news-mini-placeholder { display:grid;place-items:center;color:#d6aa54;font-size:.75rem;font-weight:800; }
.news-mini-card h3 { margin:.55rem 0 0;color:#fff;font-size:.98rem;line-height:1.32; }
.news-mini-card .news-arrow { display:block;margin-top:.35rem;color:#d6aa54;font-size:1.25rem; }
.news-magazine-latest > a { display:inline-flex;margin-top:.65rem;color:#d6aa54;text-decoration:none; }
.news-magazine-more { margin-top:1.65rem; }
.news-magazine-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem 1.7rem;margin-top:1rem; }
.news-tile-card { display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,1.15fr);gap:1rem;padding-bottom:1rem;border-bottom:1px solid rgba(214,163,73,.25); }
.news-tile-card img,.news-tile-placeholder { width:100%;height:145px;object-fit:cover;border:1px solid rgba(214,163,73,.28);border-radius:7px;background:#15120d; }
.news-tile-placeholder { display:grid;place-items:center;color:#d6aa54;font-weight:800; }
.news-tile-card h3 { margin:.55rem 0 .35rem;color:#fff;font-size:1rem;line-height:1.3; }
.news-tile-card p { display:-webkit-box;overflow:hidden;margin:0;color:rgba(255,255,255,.65);font-size:.78rem;line-height:1.5;-webkit-line-clamp:2;-webkit-box-orient:vertical; }
.news-tile-card a { display:inline-flex;margin-top:.7rem;color:#d6aa54;font-size:.8rem;font-weight:700;text-decoration:none; }
.news-magazine-empty { padding:3rem 1rem;text-align:center;color:rgba(255,255,255,.65); }
.news-pagination { display:flex;justify-content:center;gap:.7rem;margin-top:1.4rem; }
.news-pagination button { min-width:46px;height:42px;border:1px solid rgba(214,163,73,.55);border-radius:6px;background:#0b0a08;color:#fff;font:inherit;cursor:pointer; }
.news-pagination button.active { background:#d6aa54;color:#090806; }
.news-admin-editor { grid-template-columns:1fr;margin-top:2.5rem;border-top:1px solid rgba(214,163,73,.4);padding-top:2rem; }
.is-admin-session .news-admin-editor.admin-only-control { display:grid; }
.news-magazine-page.is-admin-session .news-magazine { display:none; }
.news-magazine-page.is-admin-session .news-admin-editor { margin-top:0;border-top:0;padding-top:.5rem; }
.news-magazine-page.is-admin-session .news-admin-editor .berita-list-grid { grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:1.25rem; }
.news-magazine-page.is-admin-session .news-admin-editor .news-card { align-self:start;height:auto;min-height:0;padding:1rem; }
.news-magazine-page.is-admin-session .news-admin-editor .news-photo { height:230px; }
.news-magazine-page.is-admin-session .news-admin-editor .news-card h3,
.news-magazine-page.is-admin-session .news-admin-editor .news-card > p { border:1px dashed rgba(214,163,73,.55);border-radius:5px;padding:.7rem;background:#090806; }
.news-magazine-page.is-admin-session .news-admin-editor .news-card h3:focus,
.news-magazine-page.is-admin-session .news-admin-editor .news-card > p:focus { border-style:solid;border-color:#d6aa54;outline:none;box-shadow:0 0 0 3px rgba(214,163,73,.1); }
.news-magazine-page.is-admin-session .news-admin-editor .news-full-text.admin-only-control { display:block;max-height:260px;overflow-y:auto;white-space:pre-line;scrollbar-color:#d6aa54 #12100c; }
.news-magazine-page.is-admin-session .news-admin-editor .news-full-text::before { display:block;margin-bottom:.55rem;color:#d6aa54;content:"ISI LENGKAP BERITA";font-size:.68rem;font-weight:900;letter-spacing:.08em; }
@media(max-width:900px){.news-magazine-page.is-admin-session .news-admin-editor .berita-list-grid{grid-template-columns:1fr}.news-magazine-page.is-admin-session .news-admin-editor .news-photo{height:auto}}

@media (max-width: 1050px) {
  .news-magazine-lead { grid-template-columns:1fr; }
  .news-magazine-latest > div { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; }
  .news-mini-card { grid-template-columns:1fr; }
  .news-mini-card img,.news-mini-placeholder { width:100%;height:130px; }
  .news-magazine-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 700px) {
  .news-magazine-head { grid-template-columns:1fr;gap:1rem; }
  .news-search-box { min-width:0; }
  .news-filter-tabs { flex-wrap:nowrap;overflow-x:auto;padding-bottom:.35rem; }
  .news-filter-tabs button { flex:0 0 auto; }
  .news-feature-card { min-height:470px; }
  .news-feature-copy { left:1rem;right:1rem;bottom:1rem; }
  .news-magazine-latest > div,.news-magazine-grid { grid-template-columns:1fr; }
  .news-mini-card { grid-template-columns:120px 1fr; }
  .news-mini-card img,.news-mini-placeholder { width:120px;height:82px; }
  .news-tile-card { grid-template-columns:125px 1fr; }
  .news-tile-card img,.news-tile-placeholder { height:110px; }
}

.news-image-actions {
  flex-wrap: wrap;
  gap: 0.45rem;
}

.news-upload-control,
.news-remove-image,
.delete-news-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  padding: 0.55rem 0.7rem;
  background: #ffffff;
  color: var(--body-text);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.news-upload-control input {
  display: none;
}

.news-remove-image {
  background: transparent;
  color: #ffffff;
}

.delete-news-btn {
  border-color: rgba(176, 45, 45, 0.35);
  background: #fff5f5;
  color: #9f1f1f;
}

.news-detail-hero {
  padding-bottom: 1.7rem;
}

.news-detail-hero .container {
  max-width: 1180px;
}

.news-detail-hero h1 {
  max-width: 850px;
  text-transform: uppercase;
}

.news-detail-hero p {
  max-width: 760px;
}

.news-detail-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 850px);
  gap: 2rem;
  align-items: start;
  justify-content: center;
}

.news-detail-sidebar {
  grid-column: auto;
  order: 1;
}

.news-detail-article {
  grid-column: auto;
  order: 2;
}

.news-detail-article,
.news-detail-sidebar section {
  border: 1px solid rgba(214, 163, 73, 0.18);
  border-radius: 0.85rem;
  background: #11100d;
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.news-detail-article {
  display: grid;
  gap: 1.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.news-detail-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(214, 163, 73, 0.16);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.news-detail-image {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(214, 163, 73, 0.28);
  border-radius: 0.7rem;
  background:
    linear-gradient(135deg, rgba(214, 163, 73, 0.13), transparent 55%),
    #070604;
  color: rgba(244, 212, 135, 0.68);
  font-weight: 800;
}

.news-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-detail-body {
  display: grid;
  gap: 1rem;
}

.news-detail-body p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  line-height: 1.8;
}

.news-detail-body strong {
  color: #f4d487;
}

.news-detail-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.news-detail-gallery-item {
  display: grid;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(214, 163, 73, 0.28);
  border-radius: 0.65rem;
  background: #11100d;
}

.news-detail-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-detail-gallery-item.is-active {
  border-color: var(--accent);
}

.news-detail-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(214, 163, 73, 0.16);
}

.news-detail-nav-link {
  display: grid;
  gap: 0.25rem;
  min-height: 3.2rem;
  color: #ffffff;
  text-decoration: none;
}

.news-detail-nav-link.next {
  text-align: right;
}

.news-detail-nav-label {
  color: rgba(244, 212, 135, 0.66);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.news-detail-nav-title {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.3;
}

.news-detail-nav-link:hover .news-detail-nav-title {
  color: var(--accent);
}

.news-detail-sidebar {
  position: sticky;
  top: 116px;
  display: grid;
  gap: 1rem;
}

.news-detail-sidebar section {
  display: grid;
  gap: 0.75rem;
  padding: 1.2rem;
  border-radius: 1.35rem;
}

.news-detail-sidebar a {
  display: flex;
  justify-content: space-between;
  border-radius: 0.45rem;
  padding: 0.75rem 0.85rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
}

.news-detail-sidebar a.active,
.news-detail-sidebar a:hover {
  background: var(--accent);
  color: #15130e;
}

.latest-news-link {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(214, 163, 73, 0.16);
}

.latest-news-link:last-child {
  border-bottom: 0;
}

.latest-news-link span {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.latest-news-link strong {
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1.35;
}

.latest-news-thumb {
  display: grid;
  place-items: center;
  width: 56px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0.55rem;
  background: #070604;
  color: rgba(244, 212, 135, 0.76);
  font-size: 0.7rem;
  font-weight: 800;
}

.latest-news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.latest-news-copy {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.gallery-section {
  background: #0b0a08;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 1rem;
}

.gallery-card {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  border-radius: 0.8rem;
  background: var(--navy);
  color: #ffffff;
}

.gallery-card-large {
  grid-row: span 2;
  min-height: 536px;
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.76;
}

.gallery-card div {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 0.35rem;
  padding: 1.2rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
}

.gallery-card strong {
  font-size: 1.15rem;
}

.gallery-card span {
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.5;
}

.stats {
  display: none;
  padding: 2rem 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  text-align: center;
}

.stats article {
  padding: 1.6rem 1.2rem;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 1.2rem;
}

.stats strong {
  display: block;
  font-size: 2rem;
  margin-bottom: 0.4rem;
}

.sponsor-section {
  background: #ffffff;
}

.sponsor-section h2 {
  margin-top: 0;
}

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.sponsor-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  min-height: 142px;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  padding: 1.2rem;
  background: #11100d;
  color: #ffffff;
}

.sponsor-card[hidden] { display: none; }
.is-admin-session .sponsor-card-hidden-notice { outline: 1px dashed rgba(255,140,140,.6); position: relative; }
.is-admin-session .sponsor-card-hidden-notice::after {
  content: "Disembunyikan (tidak tampil di publik)";
  position: absolute;
  top: 6px;
  right: 6px;
  padding: .2rem .5rem;
  border-radius: 4px;
  background: rgba(255,90,90,.85);
  color: #1a0505;
  font-size: .65rem;
  font-weight: 800;
}

.sponsor-card > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(8rem, 14vw, 10.5rem);
  height: clamp(5rem, 8vw, 6.5rem);
  border-radius: 0.5rem;
  background: var(--navy);
  color: #ffffff;
  font-weight: 800;
}

.sponsor-card > span img {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: inherit;
  object-fit: contain;
  padding: 0.5rem;
  background: #ffffff;
}

.sponsor-card strong {
  color: #ffffff;
  font-size: 1rem;
}

.sponsor-page-card {
  max-width: none;
}

.sponsor-page-card > p {
  max-width: 820px;
  margin-bottom: 2rem;
}

.sponsor-page-card .sponsor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sponsor-page-card .sponsor-card {
  min-height: 180px;
  background: #11100d;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.sponsor-copy {
  display: grid;
  flex: 1 1 220px;
  gap: 0.35rem;
}

.sponsor-copy small {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sponsor-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.92rem;
  line-height: 1.6;
}

.sponsor-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.sponsor-benefits article {
  border: 1px solid rgba(214, 163, 73, 0.25);
  border-radius: 0.65rem;
  padding: 1.25rem;
  background: #11100d;
  color: #ffffff;
}

.sponsor-benefits h3 {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
}

.sponsor-benefits p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.7;
}

.admin-only-control {
  display: none;
}

.is-admin-session .admin-only-control {
  display: flex;
}

.is-admin-session .main-nav > .admin-only-control {
  display: inline-flex;
}

.is-admin-session .dropdown-menu a.admin-only-control {
  display: block;
}

.is-admin-session .nav-dropdown.admin-only-control {
  display: inline-flex;
}

.is-admin-session .member-info-form.admin-only-control {
  display: grid;
}

.is-admin-session .contact-map-editor.admin-only-control {
  display: grid;
}

.sponsor-admin-tools {
  justify-content: flex-end;
  margin-top: 1rem;
}

.sponsor-card-actions {
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.sponsor-card .logo-upload-control,
.sponsor-card .remove-sponsor-image,
.sponsor-card .delete-sponsor-btn {
  min-height: 2.35rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.76rem;
}

.sponsor-link-control {
  display: grid;
  flex: 1 1 13rem;
  gap: 0.3rem;
  color: #f4d487;
  font-size: 0.72rem;
  font-weight: 800;
}

.sponsor-link-control input {
  width: 100%;
  min-height: 2.35rem;
  border: 1px solid rgba(214, 163, 73, 0.42);
  border-radius: 0.35rem;
  padding: 0.45rem 0.6rem;
  background: #ffffff;
  color: #1c1710;
  font: inherit;
}

.sponsor-home-toggle{display:inline-flex;min-height:2.35rem;align-items:center;gap:.55rem;padding:.5rem .7rem;border:1px solid rgba(214,163,73,.42);border-radius:.35rem;background:rgba(214,163,73,.08);color:#f4d487;font-size:.76rem;font-weight:800;cursor:pointer}
.sponsor-home-toggle input{width:1.05rem;height:1.05rem;margin:0;accent-color:#d6a349;cursor:pointer}
.sponsor-home-toggle span{display:inline!important;width:auto!important;height:auto!important;min-width:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;color:inherit!important;white-space:nowrap}

.admin-sponsor-section {
  background: #ffffff;
}

.admin-sponsor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.add-sponsor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin-top: 1rem;
  border: 1px solid var(--navy);
  border-radius: 0.35rem;
  padding: 0.7rem 1rem;
  background: var(--navy);
  color: #ffffff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
}

.admin-sponsor-grid article {
  display: grid;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  padding: 1.25rem;
  background: var(--surface-soft);
}

.admin-sponsor-grid span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-sponsor-grid strong {
  color: #ffffff;
  font-size: 1.7rem;
}

.admin-sponsor-copy {
  display: grid;
  gap: 0.35rem;
}

.admin-sponsor-copy small {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-sponsor-copy strong {
  color: #ffffff;
  font-size: 1.2rem;
  line-height: 1.25;
}

.admin-sponsor-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
  line-height: 1.5;
}

.admin-sponsor-copy span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
}

.admin-sponsor-copy b {
  color: #ffffff;
  font-size: 0.92rem;
}

.admin-logo-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(8.5rem, 10vw, 10rem);
  height: clamp(5.25rem, 7vw, 6.25rem);
  border-radius: 0.5rem;
  background: var(--navy);
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 800;
}

.admin-logo-preview img {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: inherit;
  object-fit: fill;
  padding: 0;
  background: #ffffff;
}

.admin-sponsor-grid p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
  line-height: 1.5;
}

.logo-upload-control,
.remove-sponsor-image,
.delete-sponsor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  padding: 0.65rem 0.85rem;
  background: #ffffff;
  color: var(--body-text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
}

.logo-upload-control input {
  display: none;
}

.remove-sponsor-image {
  background: transparent;
}

.sponsor-card .remove-sponsor-image,
.admin-sponsor-grid .remove-sponsor-image {
  color: #ffffff;
}

.delete-sponsor-btn {
  border-color: rgba(176, 45, 45, 0.35);
  background: #fff5f5;
  color: #9f1f1f;
}

.admin-user-section {
  background: var(--surface-soft);
}

.admin-site-section {
  background: #ffffff;
}

.admin-site-note {
  max-width: 720px;
  margin: 0.55rem 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.admin-user-form,
.admin-site-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: #ffffff;
}

.admin-site-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-site-form-wide {
  grid-column: span 2;
}

.admin-user-form label,
.admin-site-form label {
  display: grid;
  gap: 0.45rem;
  color: var(--body-text);
  font-size: 0.9rem;
  font-weight: 800;
}

.admin-user-form input,
.admin-site-form input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  padding: 0.75rem 0.85rem;
  font: inherit;
}

.admin-user-form button,
.admin-site-form button {
  align-self: end;
}

.admin-user-table-wrap {
  margin-top: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: #ffffff;
}

.admin-user-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-user-table th,
.admin-user-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.admin-user-table th {
  color: var(--body-text);
  font-size: 0.86rem;
  text-transform: uppercase;
}

.admin-user-table tr:last-child td {
  border-bottom: 0;
}

.master-user-main {
  min-height: calc(100vh - 150px);
  padding: 4.5rem 0 7rem;
  background: #070706;
}

html:has(.master-user-page),
body.master-user-page {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto !important;
}

.master-user-shell {
  padding: 2rem;
  border: 1px solid rgba(213, 174, 85, 0.35);
  border-radius: 1rem;
  background: linear-gradient(145deg, #15140f, #0c0c0a);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.master-user-heading h1 {
  margin: 0.45rem 0 0.55rem;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.master-user-heading p {
  margin: 0;
  color: #aaa;
}

.master-user-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.maintenance-switch { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 1rem; border: 1px solid rgba(213,174,85,.35); border-radius: 0.7rem; background: #0b0b09; cursor: pointer; }
.maintenance-switch span { display: grid; gap: 0.2rem; }
.maintenance-switch b { color: #fff; font-size: 0.9rem; }
.maintenance-switch small { color: #969696; font-size: 0.72rem; }
.maintenance-switch input { position: static; width: 24px; height: 24px; flex: 0 0 auto; opacity: 1; pointer-events: auto; accent-color: #d5ae55; cursor: pointer; }
.maintenance-switch:has(input:checked) { border-color: #d5ae55; background: rgba(213,174,85,.12); }

.master-user-form {
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  border-color: rgba(213, 174, 85, 0.3);
  background: #0b0b09;
}

.master-user-form label { color: #d8d8d8; }
.master-user-form input,
.master-user-form select {
  width: 100%;
  min-height: 46px;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(213, 174, 85, 0.42);
  border-radius: 0.5rem;
  background: #050505;
  color: #fff;
  font: inherit;
}

.master-user-table-wrap {
  border-color: rgba(213, 174, 85, 0.3);
  background: #0b0b09;
}

.master-user-table-wrap th { color: #d5ae55; }
.master-user-table-wrap td {
  border-color: rgba(213, 174, 85, 0.16);
  color: #e9e9e9;
}

@media (max-width: 1100px) {
  .master-user-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .master-user-main { padding: 2rem 0 4rem; }
  .master-user-shell { padding: 1.25rem; }
  .master-user-form { grid-template-columns: 1fr; }
  .master-user-heading { align-items: stretch; flex-direction: column; }
}

.user-management-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  gap: 1.25rem;
  margin-top: 2rem;
  align-items: start;
}

.user-panel {
  overflow: hidden;
  border: 1px solid rgba(213, 174, 85, 0.28);
  border-radius: 0.85rem;
  background: #0b0b09;
}

.user-panel > header {
  padding: 1.25rem 1.35rem;
  border-bottom: 1px solid rgba(213, 174, 85, 0.2);
}

.user-panel > header h2 { margin: 0; color: #fff; font-size: 1.15rem; }
.user-panel > header p { margin: 0.35rem 0 0; color: #999; font-size: 0.88rem; }

.user-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  padding: 1.2rem 1.35rem 0;
}

.user-guide-grid > div {
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem;
  border: 1px solid rgba(213, 174, 85, 0.2);
  border-radius: 0.55rem;
  background: #11110e;
}

.user-guide-grid b { color: #fff; font-size: 0.87rem; }
.user-guide-grid span { color: #929292; font-size: 0.77rem; line-height: 1.45; }

.master-user-form {
  display: block;
  margin: 0;
  padding: 1.35rem;
  border: 0;
  border-radius: 0;
}

.user-fields-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.user-access-heading {
  margin-top: 1.35rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(213, 174, 85, 0.2);
}

.user-access-heading h3 { margin: 0; color: #fff; }
.user-access-heading p { margin: 0.35rem 0 0; color: #929292; font-size: 0.84rem; }

.user-access-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.user-access-grid fieldset {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid rgba(213, 174, 85, 0.22);
  border-radius: 0.55rem;
  background: #11110e;
}

.user-access-grid legend { padding: 0 0.35rem; color: #d5ae55; font-weight: 800; }
.user-access-grid label { display: flex; grid-template-columns: none; align-items: center; gap: 0.55rem; color: #d2d2d2; font-size: 0.82rem; font-weight: 500; }
.user-access-grid input { width: 16px; min-height: 16px; accent-color: #d5ae55; }
.user-form-actions { display: flex; gap: 0.7rem; margin-top: 1.2rem; }
.user-cancel-edit,.user-edit-button { padding: 0.65rem 0.9rem; border: 1px solid rgba(213,174,85,.45); border-radius: .45rem; background: transparent; color: #d5ae55; font-weight: 800; cursor: pointer; }
.user-list-panel .master-user-table-wrap { margin: 0; border: 0; border-radius: 0; }
.user-list-panel .admin-user-table th,.user-list-panel .admin-user-table td { padding: 0.85rem 0.75rem; font-size: 0.78rem; }
.user-list-panel td:first-child strong,.user-list-panel td:first-child small { display: block; }
.user-list-panel td:first-child small { margin-top: 0.25rem; color: #888; }
.user-list-panel td:last-child { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.user-role-badge,.user-status-badge { display: inline-flex; padding: 0.3rem 0.55rem; border-radius: 999px; font-weight: 800; }
.user-role-badge.is-admin { background: rgba(213,174,85,.2); color: #e7c776; }
.user-role-badge.is-member { background: rgba(93,127,255,.16); color: #9ab0ff; }
.user-status-badge.is-active { background: rgba(39,174,96,.17); color: #74d69d; }
.user-status-badge.is-inactive { background: rgba(150,150,150,.15); color: #aaa; }
.user-access-summary { max-width: 210px; color: #aaa !important; line-height: 1.5; }

@media (max-width: 1180px) {
  .user-management-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .user-fields-grid,.user-access-grid,.user-guide-grid { grid-template-columns: 1fr; }
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: start;
}

.contact-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.contact-form {
  display: grid;
  gap: 1rem;
  background: #11100d;
  padding: 2rem;
  border: 1px solid rgba(214, 163, 73, 0.25);
  border-radius: 1.5rem;
}

.contact-form label {
  display: grid;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: #ffffff;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  padding: 0.95rem 1rem;
  background: #ffffff;
  color: var(--body-text);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(92, 73, 41, 0.55);
}

/* Formulir pendaftaran dibuat sama seperti formulir kontak di Beranda. */
.reservation-form-grid {
  align-items: stretch;
}

.reservation-form-grid > .page-content-card,
.reservation-form-grid > .contact-form {
  width: 100%;
  height: 100%;
}

/* Daftar pelatih */
.trainers-hero { background:linear-gradient(90deg,rgba(0,0,0,.94),rgba(0,0,0,.38)),url("assets/hero-shooting-range.webp") center/cover; }
.trainers-hero h1 { color:#fff; }
.trainers-hero p { max-width:720px;color:rgba(255,255,255,.78); }
.trainers-content > .container { max-width:1400px; }
.trainers-heading { display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:end;margin-bottom:1.5rem; }
.trainers-heading h2 { margin:.35rem 0 0;color:#fff;font-size:clamp(1.7rem,3vw,2.5rem); }
.trainers-heading p { margin:0;color:rgba(255,255,255,.68);line-height:1.7; }
.trainers-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem; }
.trainer-card { overflow:hidden;border:1px solid rgba(214,163,73,.38);border-radius:14px;background:linear-gradient(145deg,#15140f,#090806);box-shadow:0 20px 45px rgba(0,0,0,.25); }
.trainer-photo { display:grid;width:100%;aspect-ratio:4/3;place-items:center;overflow:hidden;background:linear-gradient(135deg,rgba(214,163,73,.15),#070604);color:#d6aa54;font-weight:800; }
.trainer-photo img { width:100%;height:100%;object-fit:cover; }
.trainer-copy { padding:1.25rem; }
.trainer-copy > span { color:#d6aa54;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase; }
.trainer-copy h3 { margin:.35rem 0 .65rem;color:#fff;font-size:1.35rem; }
.trainer-copy p { margin:0;color:rgba(255,255,255,.68);line-height:1.6; }
.trainer-copy h4 { margin:1rem 0 .35rem;color:#d6aa54;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase; }
.trainer-portfolio { color:rgba(255,255,255,.72);font-size:.88rem;line-height:1.6; }
.trainer-portfolio ul { margin:.25rem 0 0;padding-left:1.15rem; }
.trainer-contact { display:grid;gap:.55rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid rgba(214,163,73,.25); }
.trainer-contact a { display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid rgba(214,163,73,.3);border-radius:7px;padding:.65rem .75rem;color:#fff;text-decoration:none;transition:.2s ease; }
.trainer-contact a[hidden] { display:none!important; }
.trainer-contact a:hover { border-color:#d6aa54;background:rgba(214,163,73,.08); }
.trainer-contact a.is-empty:not(.trainer-pdf-link) { color:rgba(255,255,255,.48);pointer-events:none; }
.is-admin-session .trainer-contact a.is-empty:not(.trainer-pdf-link) { pointer-events:auto; }
.trainer-pdf-link.is-empty { background:rgba(214,163,73,.18)!important;color:rgba(255,255,255,.55)!important;cursor:pointer; }
.trainer-contact span { flex:0 0 auto;color:#d6aa54;font-size:.7rem;font-weight:800;text-transform:uppercase; }
.trainer-contact strong { overflow-wrap:anywhere;text-align:right;font-size:.8rem; }
.trainer-pdf-link { justify-content:center!important;background:#d6aa54!important;color:#090806!important;font-weight:900; }
.trainer-pdf-tools { gap:.5rem;margin-top:.65rem; }
.is-admin-session .trainer-pdf-tools.admin-only-control { display:flex; }
.trainer-pdf-tools label,.trainer-pdf-tools button { display:inline-flex;align-items:center;justify-content:center;min-height:36px;border:1px solid rgba(214,163,73,.45);border-radius:6px;padding:0 .7rem;background:#0b0a08;color:#d6aa54;font:inherit;font-size:.72rem;font-weight:800;cursor:pointer; }
.trainer-pdf-tools input { display:none; }
.trainer-photo-tools { gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid rgba(214,163,73,.25); }
.is-admin-session .trainer-photo-tools.admin-only-control { display:flex; }
.trainer-photo-tools label,.trainer-photo-tools button { display:inline-flex;align-items:center;min-height:36px;border:1px solid rgba(214,163,73,.45);border-radius:6px;padding:0 .8rem;background:#0b0a08;color:#d6aa54;font:inherit;font-size:.75rem;font-weight:800;cursor:pointer; }
.trainer-photo-tools input { display:none; }
@media(max-width:950px){.trainers-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.trainers-heading{grid-template-columns:1fr}}
@media(max-width:620px){.trainers-grid{grid-template-columns:1fr}}

.site-footer {
  background: var(--navy-deep);
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1.8rem 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.75fr 1fr 0.75fr;
  gap: 2rem;
  align-items: start;
}

.footer-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.footer-global-grid {
  grid-template-columns: 1.25fr 0.82fr 1.45fr;
}

.footer-brand-title {
  display: inline-flex !important;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem !important;
  color: #ffffff !important;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.footer-address p {
  max-width: 20rem;
}

.footer-address strong{display:block;margin:.7rem 0 .18rem;color:#d9ad4d;font-size:.72rem;text-transform:uppercase}
.footer-address strong:first-of-type{margin-top:0}
.footer-address p[data-footer-storage-key]{margin:.1rem 0 .55rem;white-space:pre-line;line-height:1.55}
.footer-address .contact-map-link{display:block;margin:-.25rem 0 .65rem;color:#d9ad4d;font-size:.7rem}
.footer-address .contact-map-link[hidden]{display:none}

.site-footer h3 {
  margin: 0 0 0.8rem;
  color: #ffffff;
  font-size: 1rem;
}

.site-footer p {
  margin: 0 0 0.65rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
}

.site-footer a {
  display: block;
  margin-bottom: 0.55rem;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
  text-decoration: none;
}

.site-footer section > a:not(.footer-brand-title)::first-letter {
  color: var(--accent);
}

.site-footer .footer-social {
  display: grid;
  gap: 0.1rem;
}

.footer-bottom {
  margin-top: 1.7rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
  margin: 0;
}

.footer-global-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-global-bottom .footer-social {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.footer-global-bottom .footer-social span {
  color: rgba(244, 212, 135, 0.72);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-global-bottom .footer-social a {
  margin: 0;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.footer-global-bottom .footer-social a .social-icon {
  flex: 0 0 auto;
}

.footer-social-editor{flex:1 1 100%;gap:.55rem;margin-top:.55rem}
.is-admin-session .footer-social-editor.admin-only-control{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));width:100%}
.footer-social-editor label{display:grid;gap:.25rem;color:#d9ad4d;font-size:.68rem;font-weight:800}
.footer-social-editor input{min-height:2.3rem;border:1px solid rgba(214,163,73,.35);border-radius:.35rem;padding:.45rem .6rem;background:#fff;color:#17130d;font:inherit}
.footer-social-editor button{grid-column:1/-1;min-height:2.35rem;border:1px solid #d9ad4d;border-radius:.35rem;background:#d9ad4d;color:#15120d;font-size:.75rem;font-weight:900;cursor:pointer}
@media(max-width:640px){.is-admin-session .footer-social-editor.admin-only-control{grid-template-columns:1fr}}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.social-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.login-page {
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.24)),
    url("assets/logo-background-current.webp") center / cover no-repeat;
}

.login-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 2rem;
}

.login-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.25rem 2rem;
  background: rgba(0, 0, 0, 0.3);
  overflow-y: auto;
}

.login-modal.is-open {
  display: flex;
}

.login-card {
  position: relative;
  width: min(100%, 360px);
  min-height: auto;
  border: 0;
  border-radius: 1rem;
  padding: 3.1rem 2.35rem 2.15rem;
  background: #ffffff;
  box-shadow: 0 28px 60px rgba(92, 73, 41, 0.2);
}

.login-modal-card {
  animation: loginPopup 180ms ease;
}

.login-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 0;
  border-radius: 999px;
  background: var(--surface-soft);
  color: #ffffff;
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.login-logo {
  display: inline-flex;
  margin-bottom: 0.9rem;
}

.login-logo .brand-logo {
  width: 150px;
  height: 50px;
}

.login-card h1 {
  margin: 0 0 2.15rem;
  color: #2a2114;
  font-size: 3.35rem;
  font-weight: 800;
  line-height: 1;
}

.login-form {
  display: grid;
  gap: 0.95rem;
}

.login-form input {
  width: 100%;
  min-height: 58px;
  border: 2px solid #dddddd;
  border-radius: 0.65rem;
  padding: 0 1.2rem;
  color: #2a2114;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 500;
}

.login-form input::placeholder {
  color: #80715a;
}

.login-help,
.login-create {
  justify-self: center;
  color: #7a633a;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.login-create {
  display: block;
  margin-top: 1.25rem;
  text-align: center;
}

.login-error {
  margin: -0.25rem 0 0;
  color: #b42318;
  font-size: 0.9rem;
  font-weight: 700;
}

.login-submit {
  min-height: 58px;
  margin-top: 1.2rem;
  border: 0;
  border-radius: 999px;
  background: #d6a349;
  color: #ffffff;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 0 #8a6420, 0 14px 18px rgba(92, 73, 41, 0.23);
}

.login-back {
  display: inline-flex;
  margin-top: 1.2rem;
  color: var(--body-text);
  font-weight: 700;
  text-decoration: none;
}

@keyframes loginPopup {
  from {
    opacity: 0;
    transform: translateY(0.8rem) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sponsorRun {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - (var(--sponsor-gap) / 2)));
  }
}

@keyframes sponsorLabelGlide {
  from {
    transform: translateX(-3.5rem);
  }

  to {
    transform: translateX(3.5rem);
  }
}

@media (max-width: 900px) {
  .split-grid,
  .service-grid,
  .news-grid,
  .berita-page-shell,
  .sponsor-grid,
  .sponsor-page-card .sponsor-grid,
  .admin-sponsor-grid,
  .admin-user-form,
  .admin-site-form,
  .member-area-grid,
  .news-detail-layout,
  .contact-grid,
  .stats-grid,
  .value-grid,
  .hero-value-grid,
  .gallery-grid,
  .sponsor-benefits,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-global-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-heading-row {
    align-items: start;
    flex-direction: column;
  }

  .berita-sidebar,
  .news-detail-sidebar {
    position: static;
  }

  .news-detail-sidebar,
  .news-detail-article {
    grid-column: auto;
    order: 0;
  }

  .berita-sidebar {
    order: 2;
  }

  .berita-list-panel {
    order: 1;
  }

  .berita-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-site-form-wide {
    grid-column: auto;
  }

  .gallery-card,
  .gallery-card-large {
    min-height: 280px;
  }

  .site-header {
    position: sticky;
  }

  .header-inner {
    min-height: auto;
    padding: 0.8rem 0 0.7rem;
    flex-direction: column;
    gap: 0.75rem;
  }

  .brand {
    min-width: 0;
    justify-content: center;
  }

  .main-nav {
    width: 100%;
    justify-content: flex-start;
    gap: 0.9rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 0 0.2rem;
    scrollbar-width: none;
  }

  .main-nav::-webkit-scrollbar {
    display: none;
  }

  .main-nav a {
    flex: 0 0 auto;
    min-height: auto;
  }

  .nav-dropdown {
    flex: 0 0 auto;
    min-height: auto;
  }

  .dropdown-menu {
    left: 50%;
    min-width: 235px;
    transform: translateX(-50%);
  }

  .main-nav a.active::after {
    bottom: -0.35rem;
  }

  .hero {
    min-height: auto;
    max-height: none;
    aspect-ratio: auto;
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
    background-position: center top;
    background-size: cover;
  }

  .content-page {
    padding-top: 0;
  }

  .hero-content {
    min-height: auto;
    justify-content: flex-start;
    padding-top: 1rem;
  }

  .hero-copy {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }

  .hero-actions {
    justify-content: flex-start;
    margin-top: 2rem;
    padding-right: 0;
  }

  .hero-sponsor-runner {
    margin-right: auto;
    transform: none;
  }

  .social-strip-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .login-modal {
    top: 0;
    justify-content: center;
    padding: 1.2rem;
  }

  .hero-value-grid {
    grid-template-columns: repeat(2, minmax(0, 178px));
    justify-content: center;
    max-width: 380px;
    gap: 0.7rem;
  }

  .hero-value-grid article {
    height: 86px;
    min-height: 0;
    padding: 0.68rem 0.58rem 0.52rem;
  }

  .values-heading h2 {
    font-size: 3.6rem;
    line-height: 1.02;
  }

  .hero-value-grid h3 {
    font-size: 0.78rem;
  }

  .values-heading::before,
  .values-heading::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .login-card {
    min-height: auto;
    padding: 3rem 1.4rem 2rem;
  }

  .login-card h1 {
    margin-bottom: 1.8rem;
    font-size: 2.8rem;
  }

  .login-form input,
  .login-submit {
    min-height: 62px;
    font-size: 1.05rem;
  }

  .login-help,
  .login-create {
    font-size: 1.1rem;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: auto;
    aspect-ratio: auto;
    padding-top: min(58vw, 15rem);
    padding-bottom: 2rem;
    background-position: center top;
    background-size: auto 58vw;
    background-repeat: no-repeat;
    background-color: #02050a;
  }

  .hero-content {
    width: 100%;
    min-height: auto;
    padding-top: 1.25rem;
    background:
      linear-gradient(180deg, rgba(2, 5, 10, 0.2), #02050a 3rem),
      #02050a;
  }

  .hero-copy {
    width: 100%;
  }

  .topbar {
    font-size: 0.76rem;
  }

  .topbar-inner {
    align-items: center;
    flex-direction: row;
    justify-content: center;
    gap: 0.75rem;
    min-height: 32px;
    padding: 0.35rem 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .topbar-inner::-webkit-scrollbar {
    display: none;
  }

  .header-inner {
    padding: 0.65rem 0 0.55rem;
    gap: 0.55rem;
  }

  .main-nav {
    gap: 0.7rem;
  }

  .main-nav a {
    padding: 0.35rem 0;
    font-size: 0.78rem;
  }

  .main-nav a.nav-cta {
    padding: 0.42rem 0.72rem;
    font-size: 0.76rem;
  }

  .dropdown-menu {
    position: fixed;
    top: 6.8rem;
  }

  .btn {
    width: 100%;
  }

  .berita-page-shell {
    gap: 1.35rem;
  }

  .berita-list-topbar {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 1rem;
  }

  .berita-list-grid {
    grid-template-columns: 1fr;
  }

  .berita-list-grid .news-card {
    padding: 1rem;
  }

  .berita-sidebar-card,
  .news-detail-sidebar section {
    border-radius: 1.1rem;
    padding: 1rem;
  }

  .news-detail-gallery {
    gap: 0.45rem;
  }

  .news-detail-navigation {
    gap: 0.75rem;
  }

  .news-detail-nav-title {
    font-size: 0.74rem;
  }

  .news-detail-hero h1 {
    font-size: 2rem;
  }

  .news-detail-body p {
    font-size: 0.95rem;
    line-height: 1.75;
  }

  .hero-actions {
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.6rem;
  }

  .hero h1 {
    font-size: 2.25rem;
    line-height: 1;
  }

  .hero h1 span {
    font-size: 1.65rem;
  }

  .hero-kicker {
    margin-bottom: 0.8rem;
    font-size: 0.86rem;
    letter-spacing: 0.14em;
  }

  .hero p {
    margin-top: 1rem;
    font-size: 0.95rem;
    line-height: 1.65;
  }

  .hero-sponsor-runner {
    width: 100%;
    margin-top: 1.4rem;
    margin-left: 0;
    padding: 0.35rem 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero-sponsor-track {
    gap: 0.7rem;
  }

  .hero-sponsor-logo {
    min-width: 136px;
    width: 136px;
    height: 74px;
    font-size: 0.95rem;
    border-radius: 0.28rem;
  }

  .hero-sponsor-logo img {
    padding: 0.45rem;
  }

  .hero-values {
    padding: 2.5rem 0 3rem;
  }

  .hero-value-grid {
    grid-template-columns: repeat(4, minmax(0, 72px));
    justify-content: center;
    gap: 0.35rem;
    max-width: 315px;
  }

  .hero-value-grid article {
    height: 64px;
    min-height: 0;
    padding: 0.45rem 0.25rem 0.32rem;
  }

  .values-heading h2 {
    font-size: 2.05rem;
    line-height: 1.04;
  }

  .values-heading p {
    font-size: 0.86rem;
  }

  .values-heading > span:not(.values-sight) {
    font-size: 0.94rem;
  }

  .hero-value-grid h3 {
    font-size: 0.5rem;
  }

  .hero-value-grid p {
    display: none;
  }

  .value-icon {
    width: 1rem;
    margin-bottom: 0.18rem;
  }

  .value-number {
    top: 0.28rem;
    left: 0.32rem;
    font-size: 0.62rem;
  }

  .member-gallery {
    grid-template-columns: 1fr;
  }

  .main-nav {
    font-size: 0.9rem;
  }

  .brand-logo {
    width: 9rem;
    height: 3.2rem;
  }

  .brand-copy strong {
    font-size: 1.1rem;
  }

  .brand small {
    font-size: 0.78rem;
  }

  .social-icons {
    gap: 1.45rem;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .topbar {
    display: none;
  }

  .header-inner {
    flex-direction: row;
    min-height: 64px;
    padding: 0.45rem 0;
  }

  .brand {
    flex: 0 0 auto;
  }

  .brand-logo {
    width: 8.2rem;
    height: 2.75rem;
  }

  .main-nav {
    flex: 1;
    justify-content: flex-start;
    gap: 0.75rem;
  }

  .main-nav a {
    padding: 0.35rem 0;
    font-size: 0.78rem;
  }

  .main-nav a.nav-cta {
    padding: 0.42rem 0.72rem;
    font-size: 0.76rem;
  }

  .dropdown-menu {
    position: fixed;
    top: 64px;
  }

  .hero {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    background-position: center center;
  }

  .hero-content {
    padding-top: 0.5rem;
  }

  .hero-copy {
    width: min(100%, 520px);
  }

  .hero h1 {
    font-size: 2.25rem;
  }

  .hero h1 span {
    font-size: 1.65rem;
  }

  .hero-kicker {
    margin-bottom: 0.65rem;
    font-size: 0.82rem;
  }

  .hero p {
    margin-top: 0.8rem;
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .hero-actions {
    flex-direction: row;
    margin-top: 1rem;
  }

  .hero-actions .btn {
    width: auto;
    min-width: 150px;
    padding: 0.75rem 1.1rem;
  }

  .hero-sponsor-runner {
    width: 100%;
    margin-left: 0;
    padding: 0.25rem 0;
  }

  .hero-sponsor-logo {
    min-width: 142px;
    width: 142px;
    height: 72px;
  }

  .hero-values {
    padding: 2.5rem 0;
  }

  .hero-value-grid {
    grid-template-columns: repeat(4, minmax(0, 72px));
    justify-content: center;
    max-width: 315px;
    gap: 0.35rem;
  }

  .hero-value-grid article {
    height: 62px;
    min-height: 0;
    padding: 0.42rem 0.25rem 0.3rem;
  }

  .value-icon {
    width: 0.95rem;
    margin-bottom: 0.16rem;
  }

  .values-heading h2 {
    font-size: 2.35rem;
  }
}

@media (max-width: 360px) {
  .hero-value-grid {
    grid-template-columns: repeat(4, minmax(0, 64px));
    max-width: 280px;
    gap: 0.25rem;
  }

  .hero-value-grid article {
    height: 58px;
  }

  .hero-value-grid h3 {
    font-size: 0.45rem;
  }
}

.hero.hero-card-showcase {
  min-height: auto;
  max-height: none;
  padding: clamp(8.6rem, 11vw, 10rem) 0 clamp(5rem, 7vw, 7rem);
  display: block;
  background: #030302;
}

.hero-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  gap: clamp(1rem, 2vw, 1.7rem);
}

.hero-story-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.7rem);
}

.hero-story-wide {
  grid-column: 1 / -1;
}

.hero-story-card {
  position: relative;
  min-height: 224px;
  overflow: hidden;
  border-radius: 28px;
  isolation: isolate;
  border: 1px solid rgba(214, 163, 73, 0.18);
  background: #080806;
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.2);
}

.hero-story-main {
  min-height: clamp(440px, 38vw, 560px);
}

.hero-story-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.82;
  filter: saturate(1.12) contrast(1.06);
}

.hero-story-card::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(3, 3, 2, 0.06) 0%, rgba(3, 3, 2, 0.26) 42%, rgba(3, 3, 2, 0.92) 100%),
    linear-gradient(90deg, rgba(3, 3, 2, 0.35), rgba(3, 3, 2, 0.02));
}

.hero-story-copy {
  position: absolute;
  right: clamp(1.2rem, 2vw, 1.8rem);
  bottom: clamp(1.2rem, 2vw, 1.8rem);
  left: clamp(1.2rem, 2vw, 1.8rem);
  z-index: 1;
  color: #ffffff;
}

.hero-story-copy h1,
.hero-story-copy h2 {
  margin: 0;
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.04;
  text-shadow: 0 8px 20px rgba(0, 0, 0, 0.46);
}

.hero-story-copy h1 {
  font-size: clamp(1.55rem, 2.6vw, 2.4rem);
}

.hero-story-copy h2 {
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.hero-story-copy p {
  margin: 0.35rem 0 1.35rem;
  max-width: none;
  color: #ffffff;
  font-size: clamp(0.9rem, 1vw, 1rem);
  font-weight: 800;
  line-height: 1.35;
  text-shadow: 0 5px 16px rgba(0, 0, 0, 0.45);
}

.hero-story-copy a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 999px;
  padding: 0 1.35rem;
  background: var(--accent);
  color: #15130e;
  font-size: 0.9rem;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.hero-unit-card {
  background: #eef1f8;
}

.hero-unit-card::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(3, 3, 2, 0.12) 44%, rgba(3, 3, 2, 0.34));
}

.hero-unit-visual {
  position: absolute;
  inset: 2rem 1.4rem 4.6rem;
  border-radius: 22px;
  background:
    linear-gradient(140deg, transparent 0 38%, #1f2431 39% 48%, transparent 49%),
    linear-gradient(36deg, transparent 0 35%, #333947 36% 47%, transparent 48%),
    linear-gradient(90deg, transparent 0 18%, #1a1f2b 19% 72%, transparent 73%),
    radial-gradient(circle at 72% 34%, #141923 0 14px, transparent 15px),
    linear-gradient(180deg, #f7f8fb, #d9deea);
}

.hero-unit-card .hero-story-copy h2 {
  color: #ffffff;
}

@media (max-width: 1100px) {
  .hero-card-grid {
    grid-template-columns: 1fr;
  }

  .hero-story-main {
    min-height: 430px;
  }
}

@media (max-width: 720px) {
  .hero.hero-card-showcase {
    padding: 7.5rem 0 3.5rem;
  }

  .hero-card-grid,
  .hero-story-side {
    gap: 0.9rem;
  }

  .hero-story-side {
    grid-template-columns: 1fr;
  }

  .hero-story-card,
  .hero-story-main {
    min-height: 290px;
    border-radius: 22px;
  }

  .hero-story-copy h1,
  .hero-story-copy h2 {
    font-size: 1.45rem;
  }

  .hero-story-copy a {
    min-height: 40px;
    padding: 0 1rem;
    font-size: 0.82rem;
  }
}

@media (max-width: 980px) {
  .merch-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .merch-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .merch-strip {
    grid-template-columns: 1fr;
  }

  .merch-strip article {
    min-height: 200px;
  }
}

/* Detail berita modern */
.news-detail-modern .news-detail-hero { padding:1.35rem 0 .7rem;background:transparent; }
.news-detail-modern .news-detail-hero .container,.news-detail-modern .page-content > .container,.news-detail-modern .news-detail-more { max-width:1320px; }
.news-detail-breadcrumb { display:flex;flex-wrap:wrap;gap:.65rem;margin-bottom:1.15rem;color:rgba(255,255,255,.62);font-size:.8rem; }
.news-detail-breadcrumb a { color:inherit;text-decoration:none; }
.news-detail-breadcrumb strong { color:#fff;font-weight:500; }
.news-detail-category-row { display:flex;align-items:center;gap:.85rem;color:rgba(255,255,255,.7);font-size:.78rem; }
.news-detail-modern .news-detail-hero h1 { max-width:820px;margin:.7rem 0 .45rem;color:#fff;font-size:clamp(2rem,3.5vw,3.25rem);line-height:1.1; }
.news-detail-summary { max-width:820px;margin:0;color:rgba(255,255,255,.74);line-height:1.6; }
.news-detail-author { display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:.85rem;color:rgba(255,255,255,.75);font-size:.8rem; }
.news-detail-modern .page-content { padding-top:.5rem; }
.news-detail-modern .news-detail-layout { display:block; }

@media (min-width: 1200px) {
  .news-detail-modern .news-detail-hero .container,
  .news-detail-modern .page-content > .container,
  .news-detail-modern .news-detail-more {
    width: calc(100% - 5rem);
    max-width: 1680px;
  }

  .news-detail-modern .news-detail-layout { display:block; }
}
.news-detail-modern .news-detail-article { width:100%;gap:1rem; }
.news-detail-modern .news-detail-image { aspect-ratio:16/7;border-color:rgba(214,163,73,.55);border-radius:8px; }
.news-detail-modern .news-detail-body { gap:.65rem; }
.news-detail-modern .news-detail-body strong { display:none; }
.news-detail-modern .news-detail-body p { color:#fff;font-size:.94rem;line-height:1.65; }
.news-detail-share { display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;border-top:1px solid rgba(214,163,73,.3);padding-top:1rem;color:#d6aa54;font-size:.8rem; }
.news-detail-share a,.news-detail-share button { display:inline-flex;align-items:center;justify-content:center;min-height:36px;border:1px solid rgba(214,163,73,.55);border-radius:6px;padding:0 1rem;background:#0b0a08;color:#d6aa54;font:inherit;text-decoration:none;cursor:pointer; }
.news-detail-share .news-back-link { margin-left:auto;min-width:220px; }
.news-detail-modern .news-detail-sidebar { grid-column:2;order:2;top:120px; }
.news-detail-modern .news-detail-sidebar section { border:1px solid rgba(214,163,73,.45);border-radius:10px;background:linear-gradient(145deg,#13120f,#090806); }
.news-detail-modern .news-detail-sidebar h2 { padding:0 0 .65rem;border-bottom:1px solid rgba(214,163,73,.25);color:#e0b250;font-size:1.05rem;text-transform:none; }
.news-detail-modern .news-detail-sidebar h2::before { display:none; }
.news-activity-gallery { margin-top:1.2rem;border-top:1px solid rgba(214,163,73,.35);padding-top:1.15rem; }
.news-activity-gallery:not(.has-images) { display:none; }
.is-admin-session .news-activity-gallery:not(.has-images) { display:block; }
.news-activity-gallery h2 { margin:0;color:#e0b250;font-size:1.2rem; }
.news-activity-gallery > p { margin:.35rem 0 1rem;color:rgba(255,255,255,.58);font-size:.8rem; }
.news-activity-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.65rem; }
.news-activity-item { position:relative;display:grid;overflow:hidden;aspect-ratio:4/3;place-items:center;border:1px solid rgba(214,163,73,.3);border-radius:7px;background:#080706;color:rgba(255,255,255,.52);font-size:.88rem;font-weight:700; }
.news-activity-item.is-empty { display:none; }
.is-admin-session .news-activity-item.is-empty { display:grid; }
.news-activity-item img { width:100%;height:100%;object-fit:cover;cursor:pointer;transition:transform .2s ease; }
.news-activity-item:hover img { transform:scale(1.04); }
.news-activity-actions { position:absolute;right:.3rem;bottom:.3rem;left:.3rem;display:none;gap:.3rem; }
.is-admin-session .news-activity-actions { display:flex; }
.news-activity-actions label,.news-activity-actions button { display:flex;min-width:0;min-height:38px;flex:1;align-items:center;justify-content:center;border:1px solid rgba(214,163,73,.7);border-radius:5px;padding:0 .5rem;background:rgba(5,5,4,.94);color:#e0b250;font:inherit;font-size:.82rem;font-weight:900;cursor:pointer; }
.news-activity-actions input { display:none; }
.news-activity-lightbox { position:fixed;inset:0;z-index:10040;display:none;place-items:center;padding:2rem;background:rgba(0,0,0,.9);backdrop-filter:blur(5px); }
.news-activity-lightbox.is-open { display:grid; }
.news-activity-lightbox img { max-width:min(1100px,94vw);max-height:88vh;border:1px solid rgba(214,163,73,.5);border-radius:8px;object-fit:contain; }
.news-activity-lightbox button { position:absolute;top:1.2rem;right:1.2rem;width:44px;height:44px;border:1px solid rgba(214,163,73,.6);border-radius:50%;background:#090806;color:#e0b250;font-size:1.8rem;cursor:pointer; }
.news-detail-modern .latest-news-link { grid-template-columns:112px 1fr;padding:.85rem 0; }
.news-detail-modern .latest-news-thumb { width:112px;aspect-ratio:4/3; }
.news-detail-modern .latest-news-copy > span { font-size:.65rem; }
.news-detail-modern .latest-news-copy strong { font-size:.86rem; }
.news-related-all { justify-content:center!important;color:#d6aa54!important; }
.news-detail-more { margin-top:1.4rem; }
.news-detail-more-head { display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(214,163,73,.35); }
.news-detail-more-head h2 { margin:0;color:#d6aa54;font-size:1.2rem; }
.news-detail-more-head a { color:#d6aa54;font-size:.8rem;text-decoration:none; }
.news-detail-more-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem; }
.news-detail-more-card { display:grid;grid-template-columns:42% 1fr;overflow:hidden;border:1px solid rgba(214,163,73,.4);border-radius:8px;background:#0d0c0a; }
.news-detail-more-card > img,.news-detail-more-placeholder { width:100%;height:145px;object-fit:cover;background:#17140e; }
.news-detail-more-placeholder { display:grid;place-items:center;color:#d6aa54;font-weight:800; }
.news-detail-more-card > div { padding:.8rem; }
.news-detail-more-card small { color:#d6aa54;font-size:.6rem;text-transform:uppercase; }
.news-detail-more-card h3 { margin:.4rem 0;color:#fff;font-size:.9rem;line-height:1.3; }
.news-detail-more-card p { display:-webkit-box;overflow:hidden;margin:0;color:rgba(255,255,255,.58);font-size:.68rem;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical; }
.news-detail-more-card a { display:inline-flex;margin-top:.55rem;color:#d6aa54;font-size:.7rem;text-decoration:none; }

@media(max-width:900px){
  .news-detail-modern .news-detail-layout{grid-template-columns:1fr}
  .news-detail-modern .news-detail-article,.news-detail-modern .news-detail-sidebar{grid-column:1}
  .news-detail-modern .news-detail-sidebar{position:static}
  .news-detail-more-grid{grid-template-columns:1fr}
  .news-activity-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .news-detail-modern .news-detail-hero h1{font-size:1.8rem}
  .news-detail-modern .news-detail-image{aspect-ratio:4/3}
  .news-detail-share .news-back-link{width:100%;margin-left:0}
  .news-detail-modern .latest-news-link{grid-template-columns:90px 1fr}
  .news-detail-modern .latest-news-thumb{width:90px}
  .news-detail-more-card{grid-template-columns:120px 1fr}
  .news-activity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Home 2026 — club-first identity */
.home-page {
  background: radial-gradient(circle at 70% 6%, rgba(214, 163, 73, 0.08), transparent 24rem), #050504;
  color: #f7f4ec;
}

.home-page .site-header {
  background: rgba(5, 5, 4, 0.93);
  border-bottom: 1px solid rgba(214, 163, 73, 0.16);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
}

.home-page .topbar {
  background: #020202;
}

.home-page .dropdown-menu {
  border-color: rgba(214, 163, 73, 0.26);
  background: #11100d;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.48);
}

.home-page .dropdown-menu a {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #f7f4ec;
}

.home-page .dropdown-menu a:hover {
  background: rgba(214, 163, 73, 0.13);
  color: #f4c867;
}

.dropdown-menu-right {
  right: 0;
  left: auto;
}

.club-hero {
  position: relative;
  min-height: 690px;
  padding-top: 110px;
  overflow: hidden;
  isolation: isolate;
  background: #050504;
}

.club-hero-media {
  position: absolute;
  inset: 110px 0 0;
  z-index: -2;
  background: #080806 url("assets/logo-background-current.webp") center center / cover no-repeat;
  transform: scaleX(-1);
}

.club-hero::before {
  position: absolute;
  inset: 110px 0 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(90deg, rgba(2, 2, 2, 0.97) 0%, rgba(2, 2, 2, 0.86) 31%, rgba(2, 2, 2, 0.3) 60%, rgba(2, 2, 2, 0.14) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18) 42%, rgba(5, 5, 4, 0.88) 100%);
}

.club-hero-inner {
  display: flex;
  align-items: center;
  min-height: 580px;
  padding-top: clamp(2.5rem, 5vw, 5rem);
  padding-bottom: 7.5rem;
}

.club-hero-copy {
  width: min(100%, 680px);
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.65);
}

.club-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.15rem;
  color: #e4bd65;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.club-eyebrow i {
  display: inline-block;
  width: 2.6rem;
  height: 2px;
  background: #d6a349;
  box-shadow: 0 0 18px rgba(214, 163, 73, 0.7);
}

.club-hero h1 {
  display: block;
  max-width: 680px;
  margin: 0;
  color: #d9aa50;
  font-size: clamp(3.4rem, 5.8vw, 6.2rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.88;
  text-transform: uppercase;
}

.club-hero h1 span {
  display: block;
  color: #ffffff;
}

.club-tagline {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.35rem 0 0;
  color: #ffffff;
  font-size: clamp(1.2rem, 1.75vw, 1.65rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.club-tagline b {
  color: #d6a349;
}

.club-intro {
  max-width: 610px;
  margin: 1.15rem 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.03rem;
  line-height: 1.75;
  text-shadow: 0 2px 18px #000000;
}

.club-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.75rem;
}

.club-hero-actions .btn {
  min-height: 54px;
  border-radius: 0.55rem;
  padding-inline: 1.35rem;
  font-size: 0.92rem;
  font-weight: 800;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.club-hero-actions .btn:hover {
  transform: translateY(-2px);
}

.club-hero-actions .btn-primary {
  background: linear-gradient(135deg, #e3bc64, #bd8c34);
  box-shadow: 0 18px 45px rgba(214, 163, 73, 0.24);
}

.club-hero-actions .btn-ghost {
  border-color: rgba(226, 184, 91, 0.65);
  background: rgba(4, 4, 3, 0.58);
  backdrop-filter: blur(8px);
}

.club-hero-actions svg,
.club-program-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.club-trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 1.45rem 0 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.83rem;
  font-weight: 600;
  list-style: none;
}

.club-trust-list li {
  display: flex;
  align-items: center;
  gap: 0.38rem;
}

.club-trust-list li span {
  display: inline-grid;
  width: 1.12rem;
  height: 1.12rem;
  place-items: center;
  border: 1px solid rgba(214, 163, 73, 0.5);
  border-radius: 50%;
  color: #e2b85b;
  font-size: 0.66rem;
}

.club-command {
  position: relative;
  z-index: 3;
  margin-top: -70px;
  padding-bottom: 2.7rem;
}

.club-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(350px, 0.85fr);
  gap: 0.8rem;
}

.club-program-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.club-program-card,
.club-schedule-card {
  border: 1px solid rgba(214, 163, 73, 0.34);
  background: linear-gradient(145deg, rgba(29, 27, 22, 0.98), rgba(8, 8, 7, 0.98));
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.34);
}

.club-program-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  min-height: 154px;
  padding: 1.15rem;
  border-radius: 0.75rem;
  color: #f7f4ec;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.club-program-card:hover {
  border-color: rgba(226, 184, 91, 0.8);
  background: linear-gradient(145deg, rgba(48, 40, 23, 0.98), rgba(10, 9, 7, 0.98));
  transform: translateY(-3px);
}

.club-program-icon {
  display: inline-grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid rgba(214, 163, 73, 0.65);
  border-radius: 0.6rem;
  color: #e2b85b;
  background: rgba(214, 163, 73, 0.06);
}

.club-program-card strong,
.club-program-card small {
  display: block;
}

.club-program-card strong {
  color: #ffffff;
  font-size: 0.92rem;
  line-height: 1.3;
}

.club-program-card small {
  margin-top: 0.42rem;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.73rem;
  line-height: 1.5;
}

.club-program-card > b {
  color: rgba(226, 184, 91, 0.72);
  font-size: 1.15rem;
}

.club-schedule-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 154px;
  padding: 1rem 1.15rem;
  border-radius: 0.75rem;
  color: #f7f4ec;
}

.club-schedule-heading,
.club-schedule-event {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.club-schedule-heading .club-program-icon {
  width: 2.45rem;
  height: 2.45rem;
}

.club-schedule-heading small {
  color: #d9aa50;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.club-schedule-heading h2 {
  margin: 0.12rem 0 0;
  font-size: 1rem;
}

.club-schedule-event {
  margin: 0.8rem 0;
  padding: 0.65rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.club-schedule-date {
  display: grid;
  min-width: 4rem;
  padding-right: 0.8rem;
  border-right: 1px solid rgba(214, 163, 73, 0.25);
  color: #e2b85b;
  text-align: center;
}

.club-schedule-date b {
  font-size: 1.05rem;
}

.club-schedule-date small {
  margin-top: 0.18rem;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
}

.club-schedule-event div {
  min-width: 0;
}

.club-schedule-event strong,
.club-schedule-event div span {
  display: block;
}

.club-schedule-event strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 0.78rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.club-schedule-event div span {
  margin-top: 0.28rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.66rem;
}

.club-schedule-card > a {
  justify-self: end;
  color: #d9aa50;
  font-size: 0.72rem;
  font-weight: 800;
  text-decoration: none;
}

.club-schedule-card > a span {
  margin-left: 0.35rem;
}

.home-page .social-strip {
  border-top: 1px solid rgba(214, 163, 73, 0.1);
  background: #080806;
}

.home-page .sponsor-runner-strip {
  background: #050504;
}

@media (max-width: 1220px) {
  .home-page .header-inner {
    min-height: auto;
    padding: 0.7rem 0 0.6rem;
    flex-direction: column;
    gap: 0.55rem;
  }

  .home-page .brand {
    min-width: 0;
  }

  .home-page .brand-logo {
    width: 142px;
    height: 48px;
  }

  .home-page .main-nav {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
  }

  .home-page .main-nav::-webkit-scrollbar {
    display: none;
  }

  .home-page .main-nav a,
  .home-page .nav-dropdown {
    min-height: 40px;
    flex: 0 0 auto;
  }

  .home-page .main-nav a.active::after {
    bottom: 0;
  }

  .club-hero {
    padding-top: 146px;
  }

  .club-hero-media,
  .club-hero::before {
    top: 146px;
  }

  .club-command-grid {
    grid-template-columns: 1fr;
  }

  .club-schedule-card {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    align-items: center;
  }

  .club-schedule-event {
    margin: 0 1rem;
    padding: 0 1rem;
    border-top: 0;
    border-bottom: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }
}

@media (max-width: 900px) {
  .dropdown-menu-right {
    right: auto;
    left: 50%;
  }

  .club-hero {
    min-height: 650px;
    padding-top: 0;
  }

  .club-hero-media,
  .club-hero::before {
    inset: 0;
  }

  .club-hero-inner {
    min-height: 650px;
    padding-top: 4.5rem;
    padding-bottom: 7rem;
  }

  .club-hero::before {
    background:
      linear-gradient(90deg, rgba(2, 2, 2, 0.96), rgba(2, 2, 2, 0.68) 62%, rgba(2, 2, 2, 0.28)),
      linear-gradient(180deg, rgba(0, 0, 0, 0.1) 35%, rgba(5, 5, 4, 0.9) 100%);
  }

  .club-program-grid {
    grid-template-columns: 1fr;
  }

  .club-program-card {
    min-height: 112px;
  }

  .club-schedule-card {
    grid-template-columns: 1fr;
  }

  .club-schedule-event {
    margin: 0.75rem 0;
    padding: 0.7rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .club-hero {
    min-height: 620px;
  }

  .club-hero-media {
    background-position: 58% center;
  }

  .club-hero::before {
    background:
      linear-gradient(90deg, rgba(2, 2, 2, 0.95), rgba(2, 2, 2, 0.66)),
      linear-gradient(180deg, rgba(0, 0, 0, 0.1) 25%, rgba(5, 5, 4, 0.96) 100%);
  }

  .club-hero-inner {
    min-height: 620px;
    padding-top: 3rem;
    padding-bottom: 6.5rem;
  }

  .club-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
  }

  .club-eyebrow i {
    width: 1.65rem;
  }

  .club-hero h1 {
    font-size: clamp(2.75rem, 14vw, 4rem);
  }

  .club-tagline {
    gap: 0.45rem;
    font-size: 1.02rem;
  }

  .club-intro {
    font-size: 0.9rem;
    line-height: 1.65;
  }

  .club-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .club-hero-actions .btn {
    width: 100%;
  }

  .club-trust-list {
    gap: 0.55rem 0.8rem;
    font-size: 0.72rem;
  }

  .club-command {
    margin-top: -54px;
  }

  .club-program-card {
    min-height: 104px;
    padding: 0.9rem;
  }

  .club-program-icon {
    width: 2.65rem;
    height: 2.65rem;
  }

  .club-schedule-event strong {
    white-space: normal;
  }
}

/* Final homepage reference overrides (kept last for cascade priority) */
.home-page .topbar,.home-page .social-strip,.home-page .club-eyebrow,.home-page .club-trust-list{display:none}
.home-page .container{width:min(1540px,calc(100% - 7rem))}
.home-page .site-header{min-height:104px}
.home-page .header-inner{min-height:104px;padding:0;flex-direction:row}
.home-page .brand{min-width:112px}.home-page .brand-logo{width:96px;height:78px;object-fit:contain}
.home-page .main-nav{width:auto;justify-content:flex-end;gap:clamp(1.4rem,2.4vw,3.25rem);overflow:visible;padding:0}
.home-page .main-nav a,.home-page .nav-dropdown{min-height:104px;font-size:.96rem;font-weight:500}
.home-page .main-nav a.active::after{bottom:24px}.home-page .main-nav a.nav-cta{min-height:46px;border-radius:6px;padding:.72rem 1.45rem;font-weight:800}
.club-hero{min-height:535px;padding-top:104px}.club-hero-media{inset:104px 0 0;transform:none;background-image:url("assets/hero-shooting-range-v3.webp?v=1");background-position:center}
.club-hero::before{inset:104px 0 0;background:linear-gradient(90deg,#030303 0%,rgba(3,3,3,.92) 24%,rgba(3,3,3,.46) 47%,rgba(3,3,3,.08) 78%),linear-gradient(180deg,rgba(0,0,0,.08),rgba(3,3,3,.5))}
.club-hero-inner{min-height:431px;padding:1.6rem 0 2.4rem}.club-hero-copy{width:560px}.club-hero h1{font-size:clamp(3.45rem,4.25vw,4.65rem);line-height:.95;letter-spacing:-.04em}
.club-tagline{margin-top:.85rem;font-size:1.45rem}.club-intro{margin-top:1.7rem;padding-top:1.2rem;font-size:1rem;line-height:1.45;position:relative}.club-intro::before{content:"";position:absolute;top:0;left:0;width:64px;height:3px;background:#d6a349}
.club-hero-actions{margin-top:1.65rem;gap:1.25rem}.club-hero-actions .btn{min-height:56px;min-width:235px;justify-content:center;border-radius:7px}
.club-command{margin-top:0;padding:0 0 1.1rem;background:#030303}.club-command-grid{grid-template-columns:minmax(0,1.5fr) minmax(490px,1fr);gap:.85rem}.club-program-grid{gap:.85rem}
.club-program-card,.club-schedule-card{min-height:156px;border-color:rgba(214,163,73,.38);background:linear-gradient(135deg,rgba(18,18,15,.98),rgba(6,7,6,.98))}
.club-program-card{grid-template-columns:auto 1fr;padding:1.3rem 1.5rem}.club-program-card>b{display:none}.club-program-icon{width:4rem;height:4rem;border:0;background:transparent}.club-program-icon svg{width:3.2rem;height:3.2rem;stroke-width:1.35}
.club-program-card strong{font-size:1rem}.club-program-card small{font-size:.75rem}.club-schedule-card{grid-template-columns:1fr;grid-template-rows:auto 1fr;position:relative;padding:1rem 1.35rem}
.club-schedule-heading h2{font-size:1.25rem}.club-schedule-heading .club-program-icon{border:0}.club-schedule-event{margin:.45rem 0 0;padding:.45rem 0 0;border-bottom:0}.club-schedule-date{min-width:92px;border:1px solid rgba(214,163,73,.32);border-radius:6px;padding:.45rem}.club-schedule-date b{color:#fff;font-size:2.1rem;line-height:1}.club-schedule-event strong{font-size:.98rem}.club-schedule-event div span{font-size:.7rem}.club-schedule-card>a{position:absolute;right:1.3rem;bottom:1rem;padding:.65rem 1rem;border-radius:5px;background:#d6b35f;color:#111}
.home-page .sponsor-runner-strip{padding:0 0 1rem}.home-page .hero-sponsor-runner{padding:0}.home-page .sponsor-runner-label-row{margin-bottom:.65rem}.home-page .sponsor-runner-label-track span{font-size:.9rem;letter-spacing:.22em}.home-page .hero-sponsor-track{gap:1.2rem}.home-page .hero-sponsor-logo{min-width:205px;height:92px;border-radius:5px;font-size:2rem;overflow:hidden}.home-page .hero-sponsor-logo img{padding:.18rem;object-fit:contain}
@media(max-width:1220px){.home-page .container{width:min(100% - 2rem,1100px)}.home-page .header-inner{padding:.7rem 0 .6rem;flex-direction:column}.home-page .main-nav{width:100%;justify-content:flex-start;overflow-x:auto}.home-page .main-nav a,.home-page .nav-dropdown{min-height:40px}.club-hero{padding-top:146px}.club-hero-media,.club-hero::before{top:146px}.club-command-grid{grid-template-columns:1fr}.home-benefits-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.home-page .container{width:calc(100% - 1.4rem)}.club-hero{padding-top:0;min-height:650px}.club-hero-media,.club-hero::before{inset:0}.club-hero-media{background-position:62% center}.club-hero-inner{min-height:650px;padding-top:5rem}.club-program-grid,.home-benefits-grid{grid-template-columns:1fr}}

/* Susunan pengurus */
.management-list{display:grid;gap:0;margin:1.4rem 0 0;color:rgba(255,255,255,.82)}
.management-row{display:grid;grid-template-columns:minmax(220px,34%) 1fr;gap:1.4rem;padding:.7rem 0;border-bottom:1px solid rgba(214,163,73,.13)}
.management-row:last-child{border-bottom:0}
.management-row dt,.management-row dd{margin:0;line-height:1.55}
.management-row dt{color:#d8b45e;font-weight:700}
.management-row dd{position:relative;padding-left:1rem;font-weight:500}
.management-row dd::before{position:absolute;left:0;content:":";color:#d8b45e;font-weight:700}
.management-row-multiple dd{display:grid;gap:.25rem}
.management-row-multiple dd span::before{content:"– ";color:#d8b45e}
@media(max-width:640px){.management-row{grid-template-columns:1fr;gap:.15rem;padding:.8rem 0}.management-row dd{padding-left:0}.management-row dd::before{display:none}}

/* Program latihan */
.training-program-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.5rem}
.training-program-card{position:relative;min-height:220px;padding:1.5rem;border:1px solid rgba(214,163,73,.28);border-radius:.7rem;background:linear-gradient(145deg,rgba(27,25,20,.92),rgba(8,8,7,.96));overflow:hidden}
.training-program-number{display:block;margin-bottom:2rem;color:#d8b45e;font-size:.8rem;font-weight:800;letter-spacing:.12em}
.training-program-card h3{margin:0;color:#fff;font-size:1.15rem}
.training-program-card p{margin:.75rem 0 0;color:rgba(255,255,255,.66);font-size:.86rem;line-height:1.7}
.training-program-cta{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.25rem;padding:1.1rem 1.25rem;border-left:3px solid #d6a349;background:rgba(214,163,73,.07)}
.training-program-cta p{margin:0;color:rgba(255,255,255,.75)}
@media(max-width:800px){.training-program-grid{grid-template-columns:1fr}.training-program-card{min-height:0}.training-program-cta{align-items:flex-start;flex-direction:column}}

/* Desktop pixel tuning against the supplied 1672 x 941 reference */
@media(min-width:1221px){
  .home-page .container{width:min(1544px,calc(100% - 8rem))}
  .home-page .nav-dropdown>a>span{display:none}
  .club-hero-media{background-image:url("assets/hero-shooting-range-v3.webp?v=1");background-size:cover;background-position:center 48%}
  .club-command-grid{grid-template-columns:minmax(0,1.34fr) minmax(0,1fr)}
  .home-page .hero-sponsor-track{--sponsor-gap:1.3rem;display:flex;grid-template-columns:none;gap:var(--sponsor-gap);width:max-content;animation:sponsorRun 18s linear infinite}
  .home-page .hero-sponsor-logo{min-width:245px;width:245px}
  .home-page .hero-sponsor-logo:nth-child(n+6){display:inline-flex}
}

/* Satu standar header dan menu untuk seluruh halaman */
body:not(.home-page) .topbar{display:none}
body:not(.home-page) .site-header{min-height:104px;background:rgba(5,5,4,.96);border-bottom:1px solid rgba(214,163,73,.16)}
body:not(.home-page) .header-inner{min-height:104px}
body:not(.home-page) .brand{min-width:112px}
body:not(.home-page) .brand-logo{width:96px;height:78px;object-fit:contain}
body:not(.home-page) .main-nav{gap:clamp(.8rem,1.35vw,1.7rem)}
body:not(.home-page) .main-nav>a,body:not(.home-page) .nav-dropdown{min-height:104px;font-size:.85rem;font-weight:500}
body:not(.home-page) .main-nav>a.active::after,body:not(.home-page) .nav-dropdown>a.active::after{bottom:24px}
body:not(.home-page) .content-page{padding-top:104px}
@media(max-width:1220px){body:not(.home-page) .header-inner{min-height:auto;padding:.7rem 0 .6rem;flex-direction:column;gap:.55rem}body:not(.home-page) .main-nav{width:100%;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:.25rem}body:not(.home-page) .main-nav>a,body:not(.home-page) .nav-dropdown{min-height:40px;flex:0 0 auto}body:not(.home-page) .content-page{padding-top:0}}

/* Beranda HP - mengikuti komposisi referensi tanpa mengubah desktop */
.club-program-mobile-heading,.club-program-mobile-dots{display:none}
@media(max-width:920px){
  .home-page{overflow-x:hidden}
  .home-page .container{width:calc(100% - 2rem)}
  .home-page .club-hero{min-height:690px;padding:0;border-bottom:0}
  .home-page .club-hero-media{inset:0;background-image:url("assets/hero-shooting-range-v3.webp?v=1");background-position:61% center;background-size:cover;transform:none}
  .home-page .club-hero::before{inset:0;background:linear-gradient(90deg,rgba(2,2,2,.93) 0%,rgba(2,2,2,.58) 48%,rgba(2,2,2,.12) 100%),linear-gradient(180deg,rgba(0,0,0,.05) 20%,rgba(2,2,2,.26) 52%,#030303 100%)}
  .home-page .club-hero-inner{min-height:690px;padding:7.5rem 0 2.2rem;align-items:flex-end}
  .home-page .club-hero-copy{width:min(100%,540px)}
  .home-page .club-hero-brandmark,.home-page .club-eyebrow,.home-page .social-strip{display:none}
  .home-page .club-hero h1{max-width:520px;margin:0;font-size:clamp(2.75rem,8.2vw,4.15rem);line-height:.98;letter-spacing:-.045em}
  .home-page .club-hero h1 span{display:block;color:#fff}
  .home-page .club-tagline{margin-top:1rem;gap:.55rem;font-size:clamp(1.05rem,3.2vw,1.4rem)}
  .home-page .club-intro{max-width:440px;margin-top:1.65rem;padding-top:1.3rem;font-size:1rem;line-height:1.55}
  .home-page .club-hero-actions{display:grid;width:min(100%,370px);grid-template-columns:1fr;gap:.7rem;margin-top:1.5rem}
  .home-page .club-hero-actions .btn{width:100%;min-width:0;min-height:58px;font-size:1rem;border-radius:8px}

  .home-page .club-command{margin:0;padding:1.65rem 0 1.2rem;background:#030303}
  .home-page .club-command-grid{display:grid;grid-template-columns:1fr;gap:1rem}
  .club-program-mobile-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;color:#d9ad4d;font-size:.79rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase}
  .club-program-mobile-heading a{color:#d9ad4d;font-size:.82rem;font-weight:500;letter-spacing:0;text-transform:none}
  .home-page .club-program-grid{display:flex;width:calc(100vw - 1rem);gap:.75rem;overflow-x:auto;padding:0 1rem .2rem 0;scroll-snap-type:x mandatory;scroll-padding-left:0;scrollbar-width:none}
  .home-page .club-program-grid::-webkit-scrollbar{display:none}
  .home-page .club-program-card{display:grid;flex:0 0 clamp(225px,69vw,285px);min-height:245px;grid-template-columns:1fr;align-content:start;gap:1rem;padding:1.3rem;border-radius:14px;scroll-snap-align:start}
  .home-page .club-program-icon{width:4rem;height:4rem}
  .home-page .club-program-icon svg{width:3.35rem;height:3.35rem}
  .home-page .club-program-card strong{font-size:1.05rem;line-height:1.35}
  .home-page .club-program-card small{margin-top:.5rem;font-size:.88rem;line-height:1.55}
  .club-program-mobile-dots{display:none}

  .home-page .club-schedule-card{display:grid;min-height:205px;grid-template-columns:1fr;gap:.65rem;padding:1.2rem 1.35rem 1.3rem;border-radius:14px}
  .home-page .club-schedule-heading{align-items:center}
  .home-page .club-schedule-heading small{display:none}
  .home-page .club-schedule-heading h2{font-size:1.3rem}
  .home-page .club-schedule-event{display:grid;grid-template-columns:auto 1fr;gap:1rem;margin:0;padding:.2rem 0;border:0}
  .home-page .club-schedule-date{min-width:92px;padding:.55rem}
  .home-page .club-schedule-event strong{font-size:.95rem;line-height:1.35;white-space:normal}
  .home-page .club-schedule-event div span{margin-top:.35rem;font-size:.78rem;line-height:1.45}
  .home-page .club-schedule-card>a{position:static;justify-self:end;padding:.72rem 1rem;font-size:.78rem}

  .home-page .sponsor-runner-strip{padding:.4rem 0 1.15rem;background:#030303}
  .home-page .sponsor-runner-strip .container{width:100%}
  .home-page .sponsor-runner-label-row{width:calc(100% - 2rem);margin:0 auto .65rem}
  .home-page .sponsor-runner-label-track span{font-size:.75rem;letter-spacing:.22em}
  .home-page .hero-sponsor-track{--sponsor-gap:.7rem;display:flex;width:max-content;gap:var(--sponsor-gap);animation:sponsorRun 18s linear infinite}
  .home-page .hero-sponsor-logo{flex:0 0 clamp(180px,55vw,235px);width:clamp(180px,55vw,235px);min-width:0;height:105px;border-radius:8px}

  /* Sponsor HP tetap bergerak mulus ketika halaman disentuh atau digulir. */
  .home-page .hero-sponsor-runner{overflow:hidden;touch-action:pan-y;-webkit-mask-image:none;mask-image:none}
  .home-page .hero-sponsor-track{padding:0 .75rem;animation:sponsorRun 18s linear infinite;will-change:transform}
  .home-page .hero-sponsor-runner:hover .hero-sponsor-track,.home-page .hero-sponsor-runner:hover .sponsor-runner-label-track span{animation-play-state:running!important}
  .home-page .hero-sponsor-logo{user-select:none;-webkit-user-drag:none}
  .home-page .hero-sponsor-logo img{pointer-events:none;user-select:none;-webkit-user-drag:none}

  .home-page .club-benefits{padding:.25rem 0 2rem;background:#030303}
  .home-page .club-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;padding:0;border:0;background:none}
  .home-page .club-benefit-grid article{min-height:150px;grid-template-columns:50px minmax(0,1fr);gap:.6rem;padding:1rem;border:1px solid rgba(214,163,73,.45)!important;border-radius:12px;background:linear-gradient(135deg,#171711,#090a08)}
  .home-page .club-benefit-grid article>span{width:44px;height:44px}
  .home-page .club-benefit-grid article>span svg{width:40px!important;height:40px!important}
  .home-page .club-benefit-grid h3{font-size:.88rem;line-height:1.3}
  .home-page .club-benefit-grid p{font-size:.72rem;line-height:1.5}
}

@media(max-width:520px){
  .home-page .container{width:calc(100% - 1.5rem)}
  .home-page .club-hero{min-height:680px}
  .home-page .club-hero-inner{min-height:680px;padding:5rem 0 1.6rem}
  .home-page .club-hero h1{font-size:clamp(2.45rem,12vw,3.35rem)}
  .home-page .club-tagline{font-size:.98rem}
  .home-page .club-intro{max-width:310px;font-size:.9rem}
  .home-page .club-program-grid{width:calc(100vw - .75rem);padding-right:.75rem}
  .home-page .club-schedule-card>a{width:100%;justify-content:center}
  .home-page .club-benefit-grid article{min-height:160px;grid-template-columns:1fr;align-content:start;padding:.9rem}
  .home-page .club-benefit-grid article>span{width:40px;height:40px}
  .home-page .club-benefit-grid h3{font-size:.82rem}
  .home-page .club-benefit-grid p{font-size:.68rem}
}

.trainer-pdf-modal { position: fixed; inset: 0; z-index: 10030; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); padding: 1rem; }
.trainer-pdf-modal[hidden] { display: none !important; }
body.trainer-pdf-modal-open { overflow: hidden; }
.trainer-pdf-modal-box { width: min(900px, 100%); height: min(85vh, 900px); background: #fff; border-radius: .6rem; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.trainer-pdf-modal-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; background: #17130d; color: #f4d487; font-weight: 800; }
.trainer-pdf-modal-head button { background: transparent; border: none; color: #f4d487; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: .1rem .4rem; }
.trainer-pdf-modal-body { position: relative; flex: 1; background: #f3f3f3; }
.trainer-pdf-modal-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.trainer-pdf-modal-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #444; background: #f3f3f3; z-index: 1; }
.trainer-pdf-modal-loading[hidden] { display: none; }
@media (max-width: 640px) {
  .trainer-pdf-modal-box { height: 90vh; }
}