/* =========================================================================
   INDONESIA SKATING DEVELOPMENT (ISD)
   Custom theme stylesheet — dibangun di atas Bootstrap 5
   Warna diambil langsung dari logo ISD:
     Merah  #DF0024   Hitam  #0D0D0D
   =========================================================================
   DAFTAR ISI
   1. Font & Variabel Warna
   2. Reset & Tipografi Dasar
   3. Utility Warna Custom (bg-*, text-*, border-*)
   4. Tombol Custom (btn-*, btn-outline-*)
   5. Komponen: Navbar
   6. Komponen: Hero
   7. Komponen: Quick Access Cards
   8. Komponen: Stats Strip
   9. Komponen: Section umum & Footer
   10. Animasi & Utility tambahan
   11. Responsive
   ========================================================================= */

@import url("fonts.css");

/* -------------------------------------------------------------------------
   1. VARIABEL WARNA
   Skala warna merah (brand) + hitam (ink) + netral bertema "es/skate"
------------------------------------------------------------------------- */
:root {
  /* --- Brand Red scale --- */
  --isd-red-50:  #FCEBED;
  --isd-red-100: #F9CCD3;
  --isd-red-300: #EA5971;
  --isd-red:     #DF0024;   /* primary brand red (dari logo) */
  --isd-red-600: #C4001F;
  --isd-red-700: #9C0019;   /* maroon / hover-active */
  --isd-red-900: #5E000F;

  /* --- Brand Black / Ink scale --- */
  --isd-black:     #0D0D0D; /* brand black (dari logo) */
  --isd-charcoal:  #2B2B2B; /* secondary dark surface */
  --isd-gray:      #6B6B6B; /* neutral body text sekunder */

  /* --- Netral bertema "es & perak" (skating) --- */
  --isd-silver:    #E7E7EA; /* border / divider terang */
  --isd-ice:       #F5F7FA; /* section background terang */
  --isd-white:     #FFFFFF;

  /* --- Semantic tokens --- */
  --isd-font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --isd-font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --isd-radius: 10px;
  --isd-shadow-sm: 0 2px 8px rgba(13,13,13,.06);
  --isd-shadow-md: 0 10px 30px rgba(13,13,13,.12);
  --isd-shadow-red: 0 10px 24px rgba(223,0,36,.28);

  --isd-skew: -8deg; /* sudut diagonal signature ISD, mengikuti garis miring logo */
}

/* -------------------------------------------------------------------------
   2. RESET & TIPOGRAFI DASAR
------------------------------------------------------------------------- */
body {
  font-family: var(--isd-font-body);
  color: var(--isd-black);
  background-color: var(--isd-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .isd-display {
  font-family: var(--isd-font-display);
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1.05;
  font-weight: 400; /* Bebas Neue hanya punya 1 weight, sudah tebal secara visual */
}

h5, h6 {
  font-family: var(--isd-font-body);
  font-weight: 700;
}

.isd-eyebrow {
  font-family: var(--isd-font-body);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

a { text-decoration: none; }

::selection { background: var(--isd-red); color: var(--isd-white); }

/* Focus ring yang jelas & konsisten (aksesibilitas) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
  outline: 3px solid var(--isd-red-300);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* -------------------------------------------------------------------------
   3. UTILITY WARNA CUSTOM
   Pola penamaan mengikuti Bootstrap: bg-red, text-red, border-red, dst.
   Tersedia: red, maroon, black, charcoal, gray, silver, ice
------------------------------------------------------------------------- */

/* ---- Background ---- */
.bg-red        { background-color: var(--isd-red)      !important; }
.bg-maroon     { background-color: var(--isd-red-700)   !important; }
.bg-black      { background-color: var(--isd-black)     !important; }
.bg-charcoal   { background-color: var(--isd-charcoal)  !important; }
.bg-gray       { background-color: var(--isd-gray)      !important; }
.bg-silver     { background-color: var(--isd-silver)    !important; }
.bg-ice        { background-color: var(--isd-ice)       !important; }

/* ---- Background subtle (versi terang, untuk badge / alert / section) ---- */
.bg-red-subtle     { background-color: var(--isd-red-50)  !important; }
.bg-black-subtle   { background-color: #F0F0F0            !important; }

/* ---- Background gradient (dipakai di hero / CTA) ---- */
.bg-gradient-red   { background: linear-gradient(135deg, var(--isd-red) 0%, var(--isd-red-700) 100%) !important; }
.bg-gradient-dark  { background: linear-gradient(135deg, var(--isd-charcoal) 0%, var(--isd-black) 100%) !important; }

/* ---- Text ---- */
.text-red      { color: var(--isd-red)      !important; }
.text-maroon   { color: var(--isd-red-700)  !important; }
.text-black    { color: var(--isd-black)    !important; }
.text-charcoal { color: var(--isd-charcoal) !important; }
.text-gray     { color: var(--isd-gray)     !important; }
.text-silver   { color: var(--isd-silver)   !important; }
.text-ice      { color: var(--isd-ice)      !important; }

/* ---- Border ---- */
.border-red      { border-color: var(--isd-red)      !important; }
.border-maroon   { border-color: var(--isd-red-700)  !important; }
.border-black    { border-color: var(--isd-black)    !important; }
.border-charcoal { border-color: var(--isd-charcoal) !important; }
.border-gray     { border-color: var(--isd-gray)     !important; }
.border-silver   { border-color: var(--isd-silver)   !important; }

.border-thick    { border-width: 3px !important; }

/* -------------------------------------------------------------------------
   4. TOMBOL CUSTOM (btn-red, btn-outline-red, dst.)
------------------------------------------------------------------------- */
.btn {
  font-family: var(--isd-font-body);
  font-weight: 700;
  letter-spacing: .3px;
  border-radius: var(--isd-radius);
  padding: .65rem 1.6rem;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }

/* ---- Solid: btn-red ---- */
.btn-red {
  background-color: var(--isd-red);
  border: 2px solid var(--isd-red);
  color: var(--isd-white);
}
.btn-red:hover,
.btn-red:focus-visible {
  background-color: var(--isd-red-700);
  border-color: var(--isd-red-700);
  color: var(--isd-white);
  box-shadow: var(--isd-shadow-red);
  transform: translateY(-2px);
}

/* ---- Outline: btn-outline-red ---- */
.btn-outline-red {
  background-color: transparent;
  border: 2px solid var(--isd-red);
  color: var(--isd-red);
}
.btn-outline-red:hover,
.btn-outline-red:focus-visible {
  background-color: var(--isd-red);
  color: var(--isd-white);
  transform: translateY(-2px);
}

/* ---- Solid: btn-black ---- */
.btn-black {
  background-color: var(--isd-black);
  border: 2px solid var(--isd-black);
  color: var(--isd-white);
}
.btn-black:hover,
.btn-black:focus-visible {
  background-color: var(--isd-charcoal);
  border-color: var(--isd-charcoal);
  color: var(--isd-white);
  transform: translateY(-2px);
}

/* ---- Outline: btn-outline-black ---- */
.btn-outline-black {
  background-color: transparent;
  border: 2px solid var(--isd-black);
  color: var(--isd-black);
}
.btn-outline-black:hover,
.btn-outline-black:focus-visible {
  background-color: var(--isd-black);
  color: var(--isd-white);
  transform: translateY(-2px);
}

/* ---- Outline khusus di atas latar gelap: btn-outline-white ---- */
.btn-outline-white {
  background-color: transparent;
  border: 2px solid var(--isd-white);
  color: var(--isd-white);
}
.btn-outline-white:hover,
.btn-outline-white:focus-visible {
  background-color: var(--isd-white);
  color: var(--isd-black);
  transform: translateY(-2px);
}

/* ---- Solid: btn-white (dipakai di atas hero merah/hitam) ---- */
.btn-white {
  background-color: var(--isd-white);
  border: 2px solid var(--isd-white);
  color: var(--isd-black);
}
.btn-white:hover,
.btn-white:focus-visible {
  background-color: var(--isd-ice);
  color: var(--isd-black);
  transform: translateY(-2px);
}

/* ---- Disabled / "Coming Soon" state ---- */
.btn.is-soon,
.btn.is-soon:hover {
  background-color: transparent;
  border: 2px dashed var(--isd-silver);
  color: var(--isd-gray);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---- Ukuran tombol tambahan ---- */
.btn-xl { padding: .9rem 2.2rem; font-size: 1.05rem; }

/* ---- Form controls bertema merah (menimpa focus biru default Bootstrap) ---- */
.form-control,
.form-select {
  border-color: var(--isd-silver);
  padding: .65rem .9rem;
  border-radius: 8px;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--isd-red);
  box-shadow: 0 0 0 .2rem rgba(223,0,36,.15);
}
.form-label { font-size: .9rem; }

/* -------------------------------------------------------------------------
   5. NAVBAR
------------------------------------------------------------------------- */
.isd-navbar {
  background-color: var(--isd-white);
  box-shadow: var(--isd-shadow-sm);
  padding-top: .6rem;
  padding-bottom: .6rem;
  transition: box-shadow .2s ease;
}

.isd-navbar .navbar-brand img { height: 42px; width: auto; }

.isd-navbar .nav-link {
  font-family: var(--isd-font-body);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .3px;
  color: var(--isd-black) !important;
  padding: .55rem .9rem !important;
  position: relative;
}

.isd-navbar .nav-link::before {
  content: "";
  position: absolute;
  left: .9rem; right: .9rem; bottom: .15rem;
  height: 3px;
  background: var(--isd-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.isd-navbar .nav-link:hover::before,
.isd-navbar .nav-link.active::before {
  transform: scaleX(1);
}
.isd-navbar .nav-link:hover,
.isd-navbar .nav-link.active {
  color: var(--isd-red) !important;
}

.isd-navbar .dropdown-menu {
  border: none;
  border-top: 3px solid var(--isd-red);
  box-shadow: var(--isd-shadow-md);
  border-radius: 0 0 var(--isd-radius) var(--isd-radius);
  padding: .4rem;
}
.isd-navbar .dropdown-item {
  font-weight: 600;
  font-size: .9rem;
  border-radius: 6px;
  padding: .55rem .8rem;
}
.isd-navbar .dropdown-item:hover,
.isd-navbar .dropdown-item:focus {
  background-color: var(--isd-red-50);
  color: var(--isd-red-700);
}

.isd-navbar .btn-red { padding: .5rem 1.3rem; font-size: .88rem; }

/* ---- Dropdown terbuka saat HOVER (desktop, >=992px) ----
   Mobile (<992px) tetap pakai klik/tap bawaan Bootstrap, karena hover
   tidak relevan di layar sentuh. */
@media (min-width: 992px) {
  .isd-navbar .nav-item.dropdown { position: relative; }

  .isd-navbar .dropdown-menu {
    display: block;              /* selalu di-render, kita atur tampil via opacity */
    opacity: 0;
    visibility: hidden;
    margin-top: 0;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    pointer-events: none;
  }

  /* Tampil saat: hover pada item navbar, ATAU dalam status "show" (klik/keyboard),
     ATAU salah satu anak di dalamnya sedang fokus (aksesibilitas keyboard/Tab). */
  .isd-navbar .dropdown:hover > .dropdown-menu,
  .isd-navbar .dropdown-menu.show,
  .isd-navbar .dropdown:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .isd-navbar .dropdown-toggle::after { transition: transform .18s ease; }
  .isd-navbar .dropdown:hover > .dropdown-toggle::after {
    transform: rotate(180deg);
  }
}

/* -------------------------------------------------------------------------
   6. HERO
   Motif diagonal terinspirasi bentuk huruf "I" miring pada logo ISD
------------------------------------------------------------------------- */
.isd-hero {
  position: relative;
  background-color: var(--isd-black);
  overflow: hidden;
  isolation: isolate;
}

.isd-hero .isd-hero-slash {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--isd-black);
}

.isd-hero .isd-hero-slash::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -15%;
  width: 60%;
  height: 130%;
  background: linear-gradient(160deg, var(--isd-red) 0%, var(--isd-red-700) 100%);
  transform: skewX(var(--isd-skew));
}

.isd-hero .isd-hero-slash::after {
  content: "";
  position: absolute;
  top: -10%;
  right: 8%;
  width: 4%;
  height: 130%;
  background: var(--isd-white);
  opacity: .12;
  transform: skewX(var(--isd-skew));
}

.isd-hero-content { position: relative; z-index: 2; padding-top: 6.5rem; padding-bottom: 6.5rem; }

.isd-hero h1 {
  color: var(--isd-white);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
}
.isd-hero h1 span { color: var(--isd-red-300); }

.isd-hero p.lead {
  color: rgba(255,255,255,.75);
  max-width: 34rem;
}

.isd-hero .isd-eyebrow { color: var(--isd-red-300); }

.isd-hero-cta { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 2rem; }

/* Garis kecepatan dekoratif ala lintasan slalom */
.isd-speedlines { position: absolute; z-index: 1; left: -5%; bottom: 8%; opacity: .18; }
.isd-speedlines span {
  display: block;
  height: 3px;
  background: var(--isd-white);
  margin-bottom: 10px;
  transform: skewX(var(--isd-skew));
}
.isd-speedlines span:nth-child(1) { width: 140px; }
.isd-speedlines span:nth-child(2) { width: 90px; }
.isd-speedlines span:nth-child(3) { width: 50px; }

/* -------------------------------------------------------------------------
   7. QUICK ACCESS CARDS (potongan diagonal pada sudut, senada hero)
------------------------------------------------------------------------- */
.isd-quicklinks { background-color: var(--isd-ice); }

.isd-card {
  background: var(--isd-white);
  border: 1px solid var(--isd-silver);
  border-radius: var(--isd-radius);
  padding: 2rem 1.6rem;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.isd-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 46px; height: 46px;
  background: var(--isd-red);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.isd-card .isd-card-icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--isd-red-50);
  color: var(--isd-red);
  font-size: 1.4rem;
  margin-bottom: 1.1rem;
}
.isd-card h5 { margin-bottom: .5rem; }
.isd-card p { color: var(--isd-gray); font-size: .92rem; margin-bottom: 1.1rem; }
.isd-card .isd-card-link {
  font-weight: 700; font-size: .88rem;
  color: var(--isd-black);
  display: inline-flex; align-items: center; gap: .4rem;
}
.isd-card .isd-card-link i { transition: transform .2s ease; color: var(--isd-red); }

.isd-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--isd-shadow-md);
  border-color: var(--isd-red-100);
}
.isd-card:hover .isd-card-link i { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   8. STATS STRIP
------------------------------------------------------------------------- */
.isd-stats {
  background: var(--isd-black);
  position: relative;
}
.isd-stats .isd-stat-num {
  font-family: var(--isd-font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--isd-white);
  line-height: 1;
}
.isd-stats .isd-stat-num span { color: var(--isd-red-300); }
.isd-stats .isd-stat-label {
  color: rgba(255,255,255,.6);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   9. SECTION UMUM & FOOTER
------------------------------------------------------------------------- */
.isd-section { padding-top: 5rem; padding-bottom: 5rem; }
.isd-section-title { margin-bottom: .5rem; }
.isd-section-sub { color: var(--isd-gray); max-width: 40rem; }

.isd-divider-red {
  width: 64px; height: 5px;
  background: var(--isd-red);
  border-radius: 3px;
  margin: 1rem 0 1.4rem;
}

.isd-footer {
  background: var(--isd-charcoal);
  color: rgba(255,255,255,.75);
  padding-top: 3.5rem;
}
.isd-footer h6 {
  color: var(--isd-white);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .85rem;
  margin-bottom: 1.1rem;
}
.isd-footer a { color: rgba(255,255,255,.7); }
.isd-footer a:hover { color: var(--isd-red-300); }
.isd-footer .isd-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 2.5rem;
  padding: 1.2rem 0;
  font-size: .85rem;
  color: rgba(255,255,255,.5);
}
.isd-social {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--isd-white);
  margin-right: .5rem;
  transition: background .2s ease, color .2s ease;
}
.isd-social:hover { background: var(--isd-red); color: var(--isd-white); }

.isd-badge-soon {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--isd-red-50);
  color: var(--isd-red-700);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: .4rem .8rem;
  border-radius: 999px;
}

/* -------------------------------------------------------------------------
   10. HALAMAN DALAM: Kejuaraan, Verifikasi Piagam, Klub
------------------------------------------------------------------------- */

/* ---- Page header kecil (dipakai di halaman selain Beranda) ---- */
.isd-page-header {
  background-color: var(--isd-black);
  position: relative;
  overflow: hidden;
  padding: 3.2rem 0 3.6rem;
}
.isd-page-header::before {
  content: "";
  position: absolute;
  top: -20%; right: -8%;
  width: 40%; height: 180%;
  background: linear-gradient(160deg, var(--isd-red) 0%, var(--isd-red-700) 100%);
  transform: skewX(var(--isd-skew));
  opacity: .9;
}
.isd-page-header .container { position: relative; z-index: 2; }
.isd-page-header h1 { color: var(--isd-white); font-size: clamp(2rem, 4.5vw, 2.8rem); }
.isd-page-header p { color: rgba(255,255,255,.7); max-width: 38rem; }
.isd-breadcrumb { font-size: .82rem; font-weight: 600; }
.isd-breadcrumb a { color: rgba(255,255,255,.6); }
.isd-breadcrumb a:hover { color: var(--isd-white); }
.isd-breadcrumb .sep { color: rgba(255,255,255,.35); margin: 0 .4rem; }
.isd-breadcrumb .current { color: var(--isd-red-300); }

/* ---- Filter bar (form GET native PHP) ---- */
.isd-filter-bar {
  background: var(--isd-white);
  border: 1px solid var(--isd-silver);
  border-radius: var(--isd-radius);
  padding: 1.2rem;
  box-shadow: var(--isd-shadow-sm);
  margin-top: -3.4rem;
  position: relative;
  z-index: 3;
}

/* ---- Status badge (kejuaraan) ---- */
.isd-status {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  padding: .32rem .7rem;
  border-radius: 999px;
}
.isd-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.isd-status-open     { background: var(--isd-red-50); color: var(--isd-red-700); }
.isd-status-upcoming { background: #FFF3E0; color: #B9660A; }
.isd-status-closed   { background: #F0F0F0; color: var(--isd-gray); }

/* ---- Kartu Kejuaraan ---- */
.isd-event-card {
  background: var(--isd-white);
  border: 1px solid var(--isd-silver);
  border-radius: var(--isd-radius);
  overflow: hidden;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.isd-event-card:hover { transform: translateY(-5px); box-shadow: var(--isd-shadow-md); border-color: var(--isd-red-100); }

.isd-event-date {
  background: var(--isd-black);
  color: var(--isd-white);
  width: 64px; height: 64px;
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.1;
  flex-shrink: 0;
}
.isd-event-date .d { font-family: var(--isd-font-display); font-size: 1.5rem; }
.isd-event-date .m { font-size: .68rem; text-transform: uppercase; font-weight: 700; letter-spacing: .5px; }

.isd-event-card .isd-event-body { padding: 1.4rem; }
.isd-event-card h5 { margin-bottom: .3rem; }
.isd-event-meta { font-size: .84rem; color: var(--isd-gray); display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.isd-event-meta i { color: var(--isd-red); width: 14px; }
.isd-event-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0; }
.isd-tag {
  font-size: .74rem; font-weight: 600;
  background: var(--isd-ice); color: var(--isd-charcoal);
  border: 1px solid var(--isd-silver);
  padding: .25rem .6rem; border-radius: 999px;
}

/* ---- Verifikasi Piagam ---- */
.isd-verify-box {
  background: var(--isd-white);
  border: 1px solid var(--isd-silver);
  border-radius: var(--isd-radius);
  box-shadow: var(--isd-shadow-sm);
  padding: 2rem;
}
.isd-verify-result {
  border-radius: var(--isd-radius);
  padding: 1.6rem;
  margin-top: 1.6rem;
}
.isd-verify-result.is-valid { background: var(--isd-red-50); border: 1px solid var(--isd-red-100); }
.isd-verify-result.is-invalid { background: #F5F5F5; border: 1px solid var(--isd-silver); }
.isd-verify-icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.isd-verify-result.is-valid .isd-verify-icon { background: var(--isd-red); color: var(--isd-white); }
.isd-verify-result.is-invalid .isd-verify-icon { background: var(--isd-gray); color: var(--isd-white); }
.isd-verify-detail dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .4px; color: var(--isd-gray); font-weight: 700; }
.isd-verify-detail dd { font-weight: 600; margin-bottom: .8rem; }

/* ---- Kartu Klub ---- */
.isd-club-card {
  background: var(--isd-white);
  border: 1px solid var(--isd-silver);
  border-radius: var(--isd-radius);
  padding: 1.6rem;
  height: 100%;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.isd-club-card:hover { transform: translateY(-5px); box-shadow: var(--isd-shadow-md); border-color: var(--isd-red-100); }
.isd-club-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  margin: 0 auto .9rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--isd-gradient-club, linear-gradient(135deg, var(--isd-red) 0%, var(--isd-black) 100%));
  color: var(--isd-white);
  font-family: var(--isd-font-display);
  font-size: 1.3rem;
  letter-spacing: 1px;
}
.isd-club-card h5 { margin-bottom: .15rem; }
.isd-club-city { color: var(--isd-red); font-size: .84rem; font-weight: 700; margin-bottom: .8rem; }
.isd-club-stats { display: flex; justify-content: center; gap: 1.4rem; font-size: .8rem; color: var(--isd-gray); margin-bottom: 1rem; }
.isd-club-stats strong { display: block; color: var(--isd-black); font-family: var(--isd-font-display); font-size: 1.1rem; letter-spacing: .5px; }

.isd-search-box { position: relative; }
.isd-search-box i {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--isd-gray);
}
.isd-search-box input { padding-left: 2.5rem; }

.isd-empty-state { text-align: center; padding: 3rem 1rem; color: var(--isd-gray); }
.isd-empty-state i { font-size: 2.4rem; color: var(--isd-silver); margin-bottom: 1rem; }

/* ---- Sembunyikan kotak "Search" bawaan DataTables ----
   Dipakai di halaman yang sudah punya kotak pencarian custom sendiri (mis. Cari NIA),
   supaya tidak ada 2 kotak pencarian yang membingungkan. Sorting & pagination DataTables
   tetap aktif seperti biasa. */
.isd-hide-dt-search .dataTables_filter { display: none; }

/* ---- Baris filter per kolom di dalam tabel DataTables (mis. halaman Cari NIA) ---- */
.isd-datatable thead tr.isd-column-filters th {
  padding: .5rem .5rem;
  background: var(--isd-ice);
  border-bottom: 2px solid var(--isd-silver);
  font-weight: 400;
}
.isd-datatable thead tr.isd-column-filters .form-control,
.isd-datatable thead tr.isd-column-filters .form-select {
  font-size: .8rem;
  padding: .35rem .6rem;
  border-radius: 6px;
}

/* -------------------------------------------------------------------------
   11. ANIMASI
------------------------------------------------------------------------- */
@keyframes isdFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.isd-animate { animation: isdFadeUp .6s ease both; }
.isd-delay-1 { animation-delay: .1s; }
.isd-delay-2 { animation-delay: .2s; }
.isd-delay-3 { animation-delay: .3s; }
.isd-delay-4 { animation-delay: .4s; }

/* -------------------------------------------------------------------------
   12. RESPONSIVE
------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .isd-hero-slash::before { width: 90%; right: -35%; }
  .isd-hero-content { padding-top: 4rem; padding-bottom: 4rem; text-align: center; }
  .isd-hero p.lead { margin-left: auto; margin-right: auto; }
  .isd-hero-cta { justify-content: center; }
  .isd-speedlines { display: none; }
}

@media (max-width: 575.98px) {
  .isd-section { padding-top: 3.2rem; padding-bottom: 3.2rem; }
  .btn-xl { width: 100%; }
}

@media (max-width: 767.98px) {
  .isd-filter-bar { margin-top: 1rem; }
}