/* ============ FONTS ============ */
@font-face{
  font-family:'Supertalls';
  src:url('../fonts/Supertalls.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Chelsea Basis';
  src:url('../fonts/ChelseaBasis-Light.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Chelsea Basis';
  src:url('../fonts/ChelseaBasis-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Chelsea Basis';
  src:url('../fonts/ChelseaBasis-Medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Chelsea Basis';
  src:url('../fonts/ChelseaBasis-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --blue-deep:#15306B;
  --blue-primary:#224EAD;
  --white:#FFFFFF;
  --title:#121926;
  --desc:#4B5565;
  --border:#CDD5DF;
  --bg-soft:#F5F5F5;
  --gradient-card: linear-gradient(180deg, #224EAD 0%, #15306B 100%);
}
*{margin:0;padding:0;box-sizing:border-box;}
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
::selection{ background:var(--blue-primary); color:var(--white); }

/* Focus states for keyboard navigation */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.social-icon:focus-visible,
.banner-btn:focus-visible,
.see-all:focus-visible{
  outline:2px solid var(--white);
  outline-offset:3px;
  border-radius:4px;
}
.news-card a:focus-visible,
.news-card .see-all:focus-visible{
  outline-color:var(--blue-primary);
}

body{
  font-family:'Chelsea Basis', 'Montserrat', sans-serif;
  color:var(--title);
  background:var(--white);
}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
.display{
  font-family:'Supertalls', sans-serif;
  letter-spacing:0.01em;
  text-transform:uppercase;
}
.container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 80px;
}
@media (max-width:1280px){
  .container{padding:0 32px;}
}

/* ===== HEADER / HERO ===== */
.hero{
  position:relative;
  width:100%;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:
    linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    var(--pb-hero-img, url('../img/hero-image.avif'));
  background-size:cover;
  background-position:center;
  overflow:hidden;
  color:var(--white);
}

.site-header{
  width:100%;
  padding:16px 80px;
}
@media (max-width:1280px){ .site-header{padding:16px 32px;} }
.nav-wrap{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.logo-mark{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.logo-mark img{width:100%;height:100%;object-fit:contain;}
.main-nav{
  display:flex;
  align-items:center;
  gap:32px;
  flex-wrap:wrap;
}
.main-nav a{
  font-weight:500;
  font-size:16px;
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;
  font-family:'Chelsea Basis', sans-serif;
  position:relative;
  padding-bottom:4px;
  transition:opacity .2s ease;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0%;
  height:2px;
  background:var(--white);
  transition:width .25s ease;
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after{
  width:100%;
}
.main-nav a:hover{ opacity:0.85; }
.caret-icon{
  width:14px;
  height:14px;
  display:inline-block;
  transition:transform .2s ease;
}

/* ===== Dropdown: Tentang Kami ===== */
.nav-dropdown{
  position:relative;
  padding-bottom:16px;
  margin-bottom:-16px;
}
.nav-dropdown-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  background:none;
  border:none;
  color:var(--white);
  font-family:'Chelsea Basis', sans-serif;
  font-weight:500;
  font-size:16px;
  cursor:pointer;
  padding:0 0 4px;
  position:relative;
}
.nav-dropdown-toggle::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0%;
  height:2px;
  background:var(--white);
  transition:width .25s ease;
}
.nav-dropdown:hover .nav-dropdown-toggle::after,
.nav-dropdown-toggle:focus-visible::after,
.nav-dropdown.is-open .nav-dropdown-toggle::after{
  width:100%;
}
.nav-dropdown.is-open .caret-icon,
.nav-dropdown:hover .caret-icon{
  transform:rotate(180deg);
}
.nav-dropdown-menu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(-8px);
  background:var(--white);
  border-radius:12px;
  box-shadow:0 12px 32px rgba(18,25,38,0.18);
  padding:8px;
  min-width:200px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease .15s, transform .2s ease .15s, visibility .2s ease .15s, pointer-events 0s .15s;
  z-index:20;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition-delay:0s;
}
.nav-dropdown-menu li a{
  display:block;
  padding:10px 16px;
  border-radius:8px;
  color:var(--title);
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
  transition:background .15s ease;
}
.nav-dropdown-menu li a:hover,
.nav-dropdown-menu li a:focus-visible{
  background:var(--bg-soft);
  color:var(--blue-primary);
}

/* ===== Mobile hamburger toggle ===== */
.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px;
  height:32px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
}
.menu-toggle span{
  display:block;
  width:100%;
  height:2px;
  background:var(--white);
  border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.menu-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity:0; }
.menu-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-cta{ flex-shrink:0; }
.main-nav a.nav-cta-mobile{ display:none; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:48px;
  width:auto;
  padding:0 36px;
  border-radius:12px;
  font-weight:700;
  font-family:'Chelsea Basis', sans-serif;
  font-size:16px;
  cursor:pointer;
  border:1px solid var(--white);
  white-space:nowrap;
  box-sizing:border-box;
  flex-shrink:0;
  transition:opacity .2s ease, transform .2s ease;
}
.btn:hover{ opacity:0.85; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); opacity:0.95; }
.btn:disabled,
.btn[disabled],
.btn.is-disabled{
  background:#b0b7c3 !important;
  border-color:#b0b7c3 !important;
  color:#fff !important;
  opacity:1 !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
  transform:none !important;
  box-shadow:none !important;
}
.btn-icon{
  width:20px;
  height:20px;
  flex-shrink:0;
}
.btn-outline-white{ color:var(--white); background:transparent; }
.btn-solid-white{ color:var(--title); background:var(--white); }
.btn-solid-blue{ color:var(--white); background:var(--blue-primary); border-color:var(--blue-primary); }

.hero-content{
  position:relative;
  z-index:2;
  flex:1;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:36px;
  padding:60px 80px;
}
@media (max-width:1280px){ .hero-content{padding:60px 32px;} }
.hero-title{
  font-size:200px;
  line-height:150%;
  color:var(--white);
}
.hero-subtitle{
  font-family:'Montserrat', sans-serif;
  font-size:48px;
  line-height:150%;
  font-weight:600;
  letter-spacing:-0.02em;
}
.hero-buttons{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  justify-content:center;
}
.follow-us{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.follow-us-title{ font-size:24px; }
.social-links{ display:flex; gap:24px; }
.social-icon{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease, opacity .2s ease;
}
.social-icon img{ width:100%; height:100%; }
.social-icon:hover{ transform:translateY(-2px); opacity:0.85; }

/* ===== BODY SECTION ===== */
.body-section{
  background:linear-gradient(180deg, var(--bg-soft) 0%, rgba(250,250,250,0) 100%);
  padding:50px 80px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:50px;
}
@media (max-width:1280px){ .body-section{padding:50px 32px;} }
.full-page{
  width:100%;
  max-width:1280px;
  display:flex;
  flex-direction:column;
  gap:24px;
}

.top-section{
  display:flex;
  gap:24px;
  align-items:stretch;
}
@media (max-width:960px){ .top-section{flex-direction:column;} }

.card{
  background:var(--white);
  border:0.5px solid var(--border);
  border-radius:16px;
  padding:16px;
}
.next-match{
  flex:1;
  background:var(--gradient-card);
  color:var(--white);
  display:flex;
  flex-direction:column;
  gap:16px;
}
@media (max-width:960px){ .next-match{flex:1;} }

.next-match-empty{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  padding:16px 8px;
  opacity:0.9;
  color:var(--white);
}
.next-match-empty svg{ opacity:0.6; margin-bottom:4px; }
.next-match-empty-title{
  font-size:15px;
  font-weight:700;
}
.next-match-empty-desc{
  font-size:12px;
  line-height:1.6;
  opacity:0.75;
  max-width:200px;
}
.next-match-empty-link{
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  color:var(--white);
  border:1px solid rgba(255,255,255,0.4);
  border-radius:8px;
  padding:6px 14px;
  transition:background .2s ease;
}
.next-match-empty-link:hover{ background:rgba(255,255,255,0.12); }
.next-match-empty-link img{ filter:brightness(0) invert(1); }

.section-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.eyebrow{ font-weight:700; font-size:16px; }
.eyebrow-sub{ font-weight:400; font-size:12px; }
.match-row{
  display:flex;
  align-items:center;
  gap:24px;
}
.team{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}
.team-logo{
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
}
.team-logo img{width:100%;height:100%;object-fit:contain;}
.team-name{ font-size:12px; font-weight:700; line-height:1.5; }
.vs{
  font-size:24px;
  font-weight:700;
}
.divider{
  border:none;
  border-top:1px solid rgba(255,255,255,0.1);
  width:100%;
}
.match-meta{
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:14px;
}
.match-meta-row{ display:flex; align-items:center; gap:12px; }
.meta-icon{ width:18px; height:18px; flex-shrink:0; }

.news-card{
  flex:0 0 776px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.eyebrow-dark{ font-weight:700; font-size:16px; color:var(--title); }
.see-all{
  display:flex; align-items:center; gap:8px;
  font-weight:700; font-size:12px; color:var(--blue-primary);
  white-space:nowrap;
  transition:gap .2s ease, opacity .2s ease;
}
.see-all:hover{
  gap:11px;
  opacity:0.8;
}
.arrow-icon{
  width:16px;
  height:16px;
  flex-shrink:0;
}
.news-grid{
  display:flex;
  gap:24px;
  flex:1;
}
@media (max-width:760px){ .news-grid{flex-direction:column;} }
.news-featured{
  position:relative;
  flex:0 0 320px;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(160deg,#2c2c2c,#0a0a0a);
  min-height:224px;
  display:flex;
  align-items:flex-end;
  cursor:pointer;
  transition:box-shadow .25s ease;
}
.news-featured:hover{
  box-shadow:0 8px 24px rgba(18,25,38,0.18);
}
.news-featured img.bg{
  transition:transform .4s ease;
}
.news-featured:hover img.bg{
  transform:scale(1.05);
}
.news-featured img.bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.news-featured::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%);
  z-index:1;
}
.news-featured-title{
  position:relative;
  z-index:2;
  color:var(--white);
  font-weight:700;
  font-size:14px;
  line-height:1.5;
  padding:16px;
}
.news-list{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
}
.news-item{
  display:flex;
  align-items:center;
  gap:16px;
  cursor:pointer;
  padding:6px;
  margin:-6px;
  border-radius:8px;
  transition:background .2s ease;
}
.news-item:hover{
  background:rgba(34,78,173,0.06);
}
.news-item:hover .news-item-title{
  color:var(--blue-primary);
}
.news-thumb{
  transition:transform .25s ease;
}
.news-item:hover .news-thumb{
  transform:scale(1.03);
}
.news-thumb{
  width:108px;height:64px;
  border-radius:4px;
  background:linear-gradient(160deg,#cfd8e3,#9fb0c6);
  flex-shrink:0;
  overflow:hidden;
}
.news-thumb img{width:100%;height:100%;object-fit:cover;}
.news-item-title{
  font-weight:700;
  font-size:14px;
  line-height:1.5;
  color:var(--title);
  transition:color .2s ease;
}

.bottom-section{
  display:flex;
  gap:24px;
}
@media (max-width:960px){ .bottom-section{flex-direction:column;} }
.stats-card{
  flex:0 0 776px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
@media (max-width:960px){ .stats-card{flex:1;} }
.stats-row{
  display:flex;
  align-items:stretch;
}
@media (max-width:600px){ .stats-row{flex-direction:column; gap:24px;} }
.stat{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:12px;
  text-align:center;
  border-radius:12px;
  transition:background .2s ease, transform .2s ease;
}
.stat:hover{
  transform:translateY(-2px);
}
.stat-icon{
  width:42px;
  height:42px;
}
.stat-number{ font-size:36px; font-weight:700; }
.stat-label{ font-size:16px; color:var(--desc); }
.v-line{
  width:1px;
  background:var(--border);
  align-self:stretch;
}

.banner{
  flex:1;
  background:var(--gradient-card);
  border:0.5px solid var(--border);
  border-radius:16px;
  padding:16px;
  display:flex;
  align-items:center;
  gap:16px;
  color:var(--white);
  min-height:208px;
}
.banner-img{
  width:226px;height:100%;
  flex-shrink:0;
  overflow:hidden;
}
.banner-img img{width:100%;height:100%;object-fit:contain;}
.banner-info{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.banner-title{ font-size:16px; font-weight:700; line-height:1.5; }
.banner-desc{ font-size:12px; line-height:1.5; }
.banner-btn{
  align-self:flex-start;
  background:var(--white);
  color:var(--blue-primary);
  border:1px solid var(--white);
  border-radius:8px;
  padding:5px 16px;
  font-weight:700;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  height: 40px;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.banner-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.18);
}
.banner-btn:active{
  transform:translateY(0);
}

/* Sponsor */
.sponsor{
  width:100%;
  max-width:1280px;
  padding:50px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
}
.sponsor-title{ font-weight:700; font-size:16px; text-align:center; }
.sponsor-logos{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:48px;
  flex-wrap:wrap;
}
.sponsor-logo{
  height:48px;
  display:flex;align-items:center;
  font-weight:700;
  font-size:22px;
  color:var(--title);
  transition:transform .2s ease;
}
.sponsor-logo:hover{
  transform:translateY(-2px);
}
.sponsor-logo img{
  height:100%;
  width:auto;
  object-fit:contain;
  filter:grayscale(100%) opacity(0.6);
  transition:filter .25s ease;
}
.sponsor-logo:hover img{
  filter:grayscale(0%) opacity(1);
}

/* Footer */
.footer{
  background:var(--gradient-card);
  color:var(--white);
  padding:50px 80px;
  display:flex;
  flex-direction:column;
  gap:50px;
}
@media (max-width:1280px){ .footer{padding:50px 32px;} }
.footer-content{
  max-width:1280px;
  width:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:48px;
  flex-wrap:wrap;
}
.footer-line{
  width:1px;
  height:76px;
  background:var(--border);
  flex-shrink:0;
}
.footer-block{
  flex: 1;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:200px;
}
.footer-label{font-size:16px;}
.footer-value{ font-size:24px; font-weight:700;}
.footer-socials{ display:flex; gap:24px; }

/* Footer typing text */
.footer-bigtext{
  max-width:1280px;
  width:100%;
  margin:0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  height:160px;
  overflow:hidden;
}
.typing-wrap{
  display:inline-flex;
  align-items:center;
  gap:0.12em;
  max-width:100%;
  height:1em;
  font-size:clamp(32px, 7vw, 120px);
}
.footer-bigtext .display{
  font-size:1em;
  color:var(--white);
  text-align:center;
  white-space:nowrap;
  line-height:1;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.typing-caret{
  width:0.07em;
  min-width:4px;
  height:1em;
  background:var(--white);
  flex-shrink:0;
  animation: blink-caret 0.9s step-end infinite;
  border-radius:1px;
}
@keyframes blink-caret{
  0%, 50%{ opacity:1; }
  51%, 100%{ opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .typing-caret{ animation:none; }
}

/* =========================================================
   MOBILE RESPONSIVE (<= 768px) — padding utama 16px
   ========================================================= */
/* =========================================================
   TABLET (769px - 1280px) — transisi halus dari 200px desktop
   ========================================================= */
@media (max-width:1280px){
  .hero-title{ font-size:clamp(72px, 14vw, 200px); line-height:150%; }
  .hero-subtitle{ font-size:clamp(24px, 4vw, 48px); line-height:150%; }
}

@media (max-width:768px){

  .container,
  .site-header,
  .hero-content,
  .body-section,
  .footer{
    padding-left:16px;
    padding-right:16px;
  }

  /* ----- Header & navigasi ----- */
  .site-header{ padding-top:14px; padding-bottom:14px; }
  .nav-wrap{ position:relative; }

  .menu-toggle{ display:flex; }
  .nav-cta{
    display:none;
  }
  .main-nav a.nav-cta-mobile{
    display:flex;
    width:100%;
    margin-top:8px;
  }

  .main-nav{
    position:absolute;
    top:calc(100% + 12px);
    left:0;
    right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    background:var(--blue-deep);
    border-radius:16px;
    padding:16px;
    box-shadow:0 16px 40px rgba(0,0,0,0.35);
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transition:max-height .3s ease, opacity .25s ease;
    z-index:30;
  }
  .main-nav.is-open{
    max-height:80vh;
    opacity:1;
    visibility:visible;
    overflow:auto;
  }
  .main-nav a,
  .nav-dropdown-toggle{
    width:100%;
    padding:12px 8px;
    font-size:16px;
  }
  .main-nav a::after{ display:none; }

  /* Dropdown jadi accordion inline di mobile */
  .nav-dropdown{ width:100%; padding-bottom:0; margin-bottom:0; }
  .nav-dropdown-toggle{
    justify-content:space-between;
    padding-bottom:12px;
  }
  .nav-dropdown-toggle::after{ display:none; }
  .nav-dropdown-menu{
    position:static;
    transform:none;
    width:100%;
    min-width:0;
    box-shadow:none;
    background:rgba(255,255,255,0.06);
    max-height:0;
    padding:0 8px;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    overflow:hidden;
    transition:max-height .25s ease, padding .25s ease;
  }
  .nav-dropdown.is-open .nav-dropdown-menu{
    max-height:300px;
    padding:8px;
    transform:none;
  }
  .nav-dropdown-menu li a{
    color:var(--white);
  }
  .nav-dropdown-menu li a:hover,
  .nav-dropdown-menu li a:focus-visible{
    background:rgba(255,255,255,0.1);
    color:var(--white);
  }

  /* ----- Hero ----- */
  .hero{
    min-height:0;
    animation:none;
    background-size:cover;
  }
  .page-hero-bg::before{ animation:none; }
  .hero-content{
    padding-top:64px;
    padding-bottom:64px;
    gap:28px;
  }
  .hero-title{ font-size:clamp(40px, 16vw, 72px); line-height:150%; }
  .hero-subtitle{ font-size:clamp(16px, 5vw, 22px); line-height:150%; }
  .hero-buttons{
    flex-direction:column;
    width:auto;
    align-items:center;
    gap:12px;
  }
  .follow-us-title{ font-size:24px; }

  /* ----- Body section ----- */
  .body-section{ padding-top:32px; padding-bottom:32px; gap:32px; }
  .full-page{ gap:16px; }

  .top-section,
  .bottom-section{
    flex-direction:column;
    gap:16px;
  }
  .next-match,
  .news-card,
  .stats-card{ flex:1; width:100%; }

  .card{ padding:16px; }

  .match-row{ gap:12px; }
  .team-name{ font-size:14px; }

  .news-grid{ flex-direction:column; gap:16px; }
  .news-featured{ flex:1; min-height:180px; }
  .news-list{ gap:12px; }
  .news-thumb{ width:84px; height:56px; }
  .news-item-title{ font-size:13px; }

  .stats-row{ flex-direction:column; gap:24px; }
  .v-line{ display:none; }
  .stat{ flex-direction:column; justify-content:center; text-align:center; gap:16px; padding:8px; }
  .stat-icon{ flex-shrink:0; }

  .banner{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
  }
  .banner-img{ width:226px; height:160px; align-self:center; }

  /* ----- Sponsor ----- */
  .sponsor{ padding:32px 16px; gap:20px; }
  .sponsor-logos{ gap:28px; }

  /* ----- Footer ----- */
  .footer{ padding-top:32px; padding-bottom:32px; gap:32px; }
  .footer-content{
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
  }
  .footer-line{
    display:none;
  }
  .footer-block{ min-width:0; width:100%; }
  .footer-block[style*="align-items:center"]{ align-items:flex-start !important; }
  .footer-socials{ justify-content:flex-start; }

  .footer-bigtext{ height:auto; padding:8px 0; }
  .typing-wrap{ font-size:clamp(28px, 13vw, 56px); }
}

/* Extra-small phones */
@media (max-width:380px){
  .hero-buttons .btn{ padding:0 24px; }
  .typing-wrap{ font-size:clamp(22px, 13vw, 40px); }
}

/* =========================================================
   PAGE HERO — Berita Terbaru (& halaman dalam lainnya)
   ========================================================= */
.page-hero{
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  color:var(--white);
  /* overflow TIDAK di-hidden di sini supaya dropdown nav tidak terpotong */
}
.page-hero-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}
.page-hero-bg::before{
  content:"";
  position:absolute;
  inset:-10px -39px;
  background:
    linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    var(--pb-hero-img, url('../img/hero-image.avif'));
  background-size:cover;
  background-position:center;
  filter:blur(4px);
}
.page-hero .site-header{
  position:relative;
  z-index:2;
  width:100%;
  padding:16px 80px;
}
.page-hero-content{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1280px;
  padding:50px 80px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:16px;
}
.page-hero-title{
  font-size:100px;
  line-height:150%;
  color:var(--white);
}
.page-hero-subtitle{
  font-family:'Chelsea Basis', sans-serif;
  font-size:24px;
  line-height:150%;
  letter-spacing:-0.025em;
  color:var(--white);
}

/* Tablet/mobile scaling, sebanding dengan hero title utama */
@media (max-width:1280px){
  .page-hero-title{ font-size:clamp(48px, 9vw, 100px); line-height:150%; }
  .page-hero-subtitle{ font-size:clamp(16px, 2.5vw, 24px); line-height:150%; }
}
@media (max-width:768px){
  .page-hero .site-header,
  .page-hero-content{ padding-left:16px; padding-right:16px; }
  .page-hero-content{ padding-top:40px; padding-bottom:40px; gap:12px; }
}

/* Nav active state */
.main-nav a.is-active{
  opacity:1;
  font-weight:700;
}
.main-nav a.is-active::after{ width:100%; }

/* =========================================================
   NEWS PAGE LAYOUT
   ========================================================= */
.news-page-layout{
  display:flex;
  align-items:flex-start;
  gap:36px;
  width:100%;
}
.news-list-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* ---- News list card ---- */
.news-list-card{
  display:flex;
  align-items:stretch;
  gap:24px;
  background:var(--white);
  border:0.5px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  transition:box-shadow .25s ease, transform .2s ease;
}
.news-list-card:hover{
  box-shadow:0 8px 28px rgba(18,25,38,0.1);
  transform:translateY(-2px);
}
.news-list-img{
  position:relative;
  flex:0 0 320px;
  min-height:248px;
  background:linear-gradient(160deg,#cfd8e3,#9fb0c6);
  overflow:hidden;
}
.news-list-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.news-list-card:hover .news-list-img img{
  transform:scale(1.05);
}
.news-badge{
  position:absolute;
  left:16px; bottom:16px;
  padding:2px 12px;
  background:rgba(255,255,255,0.2);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  border-radius:8px;
  color:var(--white);
  font-family:'Chelsea Basis', sans-serif;
  font-weight:700;
  font-size:16px;
  line-height:150%;
  white-space:nowrap;
}
.news-list-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
}
.news-list-date{
  font-size:12px;
  line-height:150%;
  color:var(--desc);
}
.news-list-title{
  font-size:24px;
  font-weight:700;
  line-height:130%;
  color:var(--title);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.news-list-excerpt{
  font-size:16px;
  font-weight:400;
  line-height:150%;
  color:var(--desc);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.read-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:14px;
  color:var(--blue-primary);
  margin-top:auto;
  transition:gap .2s ease, opacity .2s ease;
}
.news-list-card:hover .read-more{
  gap:11px;
  opacity:0.85;
}

/* ---- Pagination ---- */
.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}
.pagination-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  background:var(--white);
  border:1px solid #D0D5DD;
  border-radius:8px;
  box-shadow:0 1px 2px rgba(16,24,40,0.05);
  font-weight:700;
  font-size:14px;
  color:#344054;
  transition:background .2s ease, transform .2s ease;
}
.pagination-btn:hover{
  background:var(--bg-soft);
  transform:translateY(-1px);
}
.pagination-arrow{
  width:10px;height:10px;
  border-right:1.66667px solid #344054;
  border-bottom:1.66667px solid #344054;
  display:inline-block;
}
.pagination-arrow-left{ transform:rotate(135deg); }
.pagination-arrow-right{ transform:rotate(-45deg); }
.pagination-numbers,
ul.page-numbers{
  display:flex;
  align-items:center;
  gap:2px;
  list-style:none;
  padding:0;margin:0;
  flex-wrap:wrap;
}
.pagination-number,
ul.page-numbers li{
  display:flex;
  align-items:center;
  justify-content:center;
}
.pagination-number,
ul.page-numbers li a.page-numbers,
ul.page-numbers li span.page-numbers{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border-radius:8px;
  font-weight:500;
  font-size:14px;
  color:var(--desc);
  transition:background .2s ease, color .2s ease;
  text-decoration:none;
}
.pagination-number:hover,
ul.page-numbers li a.page-numbers:hover{
  background:var(--bg-soft);
}
.pagination-number.is-active,
ul.page-numbers li span.page-numbers.current{
  background:#F9FAFB;
  color:var(--title);
  font-weight:700;
}
.pagination-ellipsis,
ul.page-numbers li span.page-numbers.dots{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  color:var(--desc);
  font-size:14px;
}

/* ---- Sidebar ---- */
.news-sidebar{
  flex:0 0 360px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.sidebar-card{
  background:var(--white);
  border:0.5px solid var(--border);
  border-radius:16px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.sidebar-title{
  font-size:16px;
  font-weight:700;
  line-height:150%;
  color:var(--title);
}
.popular-news-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.popular-news-item{
  display:flex;
  align-items:center;
  gap:16px;
  border-radius:8px;
  padding:4px;
  margin:-4px;
  transition:background .2s ease;
}
.popular-news-item:hover{
  background:rgba(34,78,173,0.06);
}
.popular-news-item:hover .popular-news-title{
  color:var(--blue-primary);
}
.popular-news-thumb{
  flex:0 0 108px;
  width:108px;height:64px;
  border-radius:4px;
  background:linear-gradient(160deg,#cfd8e3,#9fb0c6);
  overflow:hidden;
}
.popular-news-thumb img{ width:100%; height:100%; object-fit:cover; }
.popular-news-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
}
.popular-news-title{
  font-size:14px;
  font-weight:700;
  line-height:150%;
  color:var(--title);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  transition:color .2s ease;
}
.popular-news-date{
  font-size:12px;
  color:var(--desc);
}

/* ---- Sidebar banner KTA ---- */
.sidebar-banner{
  position:relative;
  isolation:isolate;
  background:var(--gradient-card);
  border:0.5px solid var(--border);
  border-radius:16px;
  padding:16px;
  min-height:240px;
  display:flex;
  flex-direction:column;
  gap:12px;
  color:var(--white);
  overflow:hidden;
}
.sidebar-banner-text{ position:relative; z-index:1; }
.sidebar-banner .banner-title{ font-size:16px; font-weight:700; line-height:150%; margin-bottom:4px; }
.sidebar-banner .banner-desc{ font-size:12px; line-height:150%; }
.sidebar-banner .banner-btn{
  position:relative;
  z-index:1;
  align-self:flex-start;
}
.sidebar-banner-img{
  position:absolute;
  right:-25px;
  bottom:-10px;
  width:226px;
  height:140px;
  z-index:0;
  opacity:0.95;
}
.sidebar-banner-img img{ width:100%; height:100%; object-fit:contain; }

/* ---- Kategori Berita ---- */
.category-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.category-list li a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:16px;
  line-height:150%;
  color:var(--title);
  padding:4px 0;
  transition:color .2s ease;
}
.category-list li a span{
  font-weight:500;
  color:var(--title);
}
.category-list li a:hover{
  color:var(--blue-primary);
}

/* =========================================================
   RESPONSIVE — NEWS PAGE (<= 768px, padding 16px)
   ========================================================= */
@media (max-width:1024px){
  .news-page-layout{ flex-direction:column; align-items:stretch; }
  .news-sidebar{ flex:1; width:100%; }
}

@media (max-width:768px){
  .news-list-card{ flex-direction:column; }
  .news-list-img{ flex:none; width:100%; min-height:200px; }
  .news-list-title{ font-size:20px; }
  .news-list-body{ padding:16px; gap:8px; }

  .pagination{ justify-content:center; gap:8px; }
  .pagination-numbers{ order:3; width:100%; justify-content:center; }
  .pagination-btn{ flex:1; justify-content:center; }

  .sidebar-banner-img{ width:160px; height:100px; right:-15px; bottom:-6px; }
}

/* =========================================================
   ARTICLE DETAIL PAGE — berita-detail.html
   ========================================================= */

/* Compact hero variant: hanya breadcrumb, tanpa judul besar */
.page-hero-compact{ min-height:0; }
.page-hero-content-compact{
  padding-top:32px;
  padding-bottom:32px;
  align-items:flex-start;
  text-align:left;
  gap:0;
}
.breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:14px;
  color:rgba(255,255,255,0.75);
}
.breadcrumb a{
  color:rgba(255,255,255,0.75);
  transition:color .2s ease;
}
.breadcrumb a:hover{ color:var(--white); }
.breadcrumb-sep{ color:rgba(255,255,255,0.4); }
.breadcrumb-current{
  color:var(--white);
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:320px;
}

/* ---- Article main column ---- */
.article-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:20px;
  background:var(--white);
  border:0.5px solid var(--border);
  border-radius:16px;
  padding:32px;
}
.news-badge-static{
  position:static;
  align-self:flex-start;
  background:var(--gradient-card);
  color:var(--white);
  backdrop-filter:none;
}
.article-title{
  font-size:36px;
  font-weight:700;
  line-height:130%;
  color:var(--title);
}
.article-meta{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  padding-bottom:20px;
  border-bottom:1px solid var(--border);
  font-size:14px;
  color:var(--desc);
}
.article-meta-item{
  display:flex;
  align-items:center;
  gap:8px;
}
.meta-icon-dark{
  filter:brightness(0) saturate(100%) invert(45%);
  opacity:0.7;
}
.article-featured-img{
  width:100%;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(160deg,#cfd8e3,#9fb0c6);
}
.article-featured-img img{
  width:100%;
  display:block;
  object-fit:cover;
  max-height:480px;
}

/* ---- Article body typography ---- */
.article-body{
  display:flex;
  flex-direction:column;
  gap:20px;
  font-size:16px;
  line-height:170%;
  color:var(--title);
}
.article-body p{ margin:0; }
.article-body h2{
  font-size:24px;
  font-weight:700;
  line-height:140%;
  color:var(--title);
  margin-top:8px;
}
.article-body ul{
  list-style:disc;
  padding-left:24px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.article-body blockquote{
  margin:0;
  padding:16px 24px;
  border-left:4px solid var(--blue-primary);
  background:var(--bg-soft);
  border-radius:0 8px 8px 0;
  font-style:italic;
  color:var(--title);
}

/* ---- Tags ---- */
.article-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding-top:8px;
}
.tag{
  padding:6px 14px;
  background:var(--bg-soft);
  border-radius:20px;
  font-size:13px;
  font-weight:500;
  color:var(--blue-primary);
  transition:background .2s ease, color .2s ease;
}
.tag:hover{
  background:var(--blue-primary);
  color:var(--white);
}

/* ---- Share bar ---- */
.share-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-top:20px;
  border-top:1px solid var(--border);
}
.share-label{
  font-size:14px;
  font-weight:700;
  color:var(--title);
}
.share-icons{ display:flex; gap:12px; }
.share-icon{
  width:36px;height:36px;
  border-radius:50%;
  background:var(--gradient-card);
  display:flex;align-items:center;justify-content:center;
  padding:9px;
  transition:transform .2s ease, opacity .2s ease;
}
.share-icon img{ width:100%; height:100%; }
.share-icon:hover{ transform:translateY(-2px); opacity:0.85; }

/* ---- Related articles ---- */
.related-section{
  padding-top:12px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.related-title{
  font-size:20px;
  font-weight:700;
  color:var(--title);
}
.related-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.related-card{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.related-card-img{
  width:100%;
  aspect-ratio:16/10;
  border-radius:8px;
  overflow:hidden;
  background:linear-gradient(160deg,#cfd8e3,#9fb0c6);
}
.related-card-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.related-card:hover .related-card-img img{ transform:scale(1.06); }
.related-card-date{ font-size:12px; color:var(--desc); }
.related-card-title{
  font-size:14px;
  font-weight:700;
  line-height:150%;
  color:var(--title);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  transition:color .2s ease;
}
.related-card:hover .related-card-title{ color:var(--blue-primary); }

/* ---- Responsive: article detail (<=768px) ---- */
@media (max-width:768px){
  .article-main{ padding:20px; gap:16px; }
  .article-title{ font-size:26px; }
  .article-featured-img img{ max-height:280px; }
  .related-grid{ grid-template-columns:1fr; }
  .breadcrumb-current{ max-width:160px; }
  .share-bar{ flex-direction:column; align-items:flex-start; gap:12px; }
}

/* =========================================================
   KORWIL PAGE — korwil.html
   ========================================================= */

/* Breadcrumb versi terang (untuk dipakai di atas background putih) */
.breadcrumb-light{
  color:var(--desc);
  margin-bottom:8px;
}
.breadcrumb-light a{ color:var(--desc); }
.breadcrumb-light a:hover{ color:var(--blue-primary); }
.breadcrumb-light .breadcrumb-sep{ color:#C8CEDA; }
.breadcrumb-light .breadcrumb-current{ color:var(--title); }

.section-heading{
  font-size:20px;
  font-weight:700;
  color:var(--title);
}

.korwil-layout{
  display:flex;
  align-items:flex-start;
  gap:36px;
  width:100%;
}
.korwil-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* ---- Peta placeholder ---- */
.korwil-map{
  position:relative;
  width:100%;
  min-height:340px;
  border-radius:16px;
  background:
    radial-gradient(circle at 30% 20%, rgba(34,78,173,0.55), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(21,48,107,0.6), transparent 55%),
    linear-gradient(160deg, #15306B 0%, #0c1d44 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.korwil-map-placeholder{
  color:rgba(255,255,255,0.45);
  font-size:14px;
  font-weight:500;
  letter-spacing:0.02em;
}
.korwil-map-stat{
  position:absolute;
  left:16px; bottom:16px;
  background:rgba(8,18,40,0.55);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:12px;
  padding:12px 16px;
  display:flex;
  flex-direction:column;
  gap:2px;
  color:var(--white);
}
.korwil-map-stat-label{ font-size:11px; letter-spacing:0.05em; opacity:0.7; text-transform:uppercase; }
.korwil-map-stat-number{ font-size:28px; font-weight:700; line-height:1.2; }
.korwil-map-stat-sub{ font-size:12px; opacity:0.8; }

/* ---- Filter bar ---- */
.korwil-filters{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.korwil-search{
  position:relative;
  flex:1;
  min-width:220px;
}
.korwil-search input{
  width:100%;
  height:48px;
  padding:0 44px 0 16px;
  border:1px solid var(--border);
  border-radius:10px;
  font-family:'Chelsea Basis', sans-serif;
  font-size:14px;
  color:var(--title);
  box-sizing:border-box;
}
.korwil-search input:focus{
  outline:none;
  border-color:var(--blue-primary);
}
.korwil-search-icon{
  position:absolute;
  right:16px; top:50%;
  transform:translateY(-50%);
  width:18px; height:18px;
  filter:brightness(0) saturate(100%) invert(45%);
  pointer-events:none;
}
.korwil-select{
  height:48px;
  padding:0 16px;
  border:1px solid var(--border);
  border-radius:10px;
  font-family:'Chelsea Basis', sans-serif;
  font-size:14px;
  color:var(--title);
  background:var(--white);
  cursor:pointer;
  min-width:170px;
}
.korwil-select:focus{ outline:none; border-color:var(--blue-primary); }

/* ---- Grid kartu Korwil ---- */
.korwil-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.korwil-card{
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:0.5px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  transition:box-shadow .25s ease, transform .2s ease;
}
.korwil-card:hover{
  box-shadow:0 10px 28px rgba(18,25,38,0.12);
  transform:translateY(-3px);
}
.korwil-card-img{
  width:100%;
  aspect-ratio:4/3;
  background:linear-gradient(160deg,#cfd8e3,#9fb0c6);
  overflow:hidden;
}
.korwil-card-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.korwil-card:hover .korwil-card-img img{ transform:scale(1.06); }
.korwil-card-body{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px;
}
.korwil-card-name{
  font-size:15px;
  font-weight:700;
  color:var(--title);
  margin-bottom:2px;
}
.korwil-card-location{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--desc);
  margin-bottom:8px;
}
.korwil-card-location .meta-icon{ width:13px; height:13px; flex-shrink:0; }
.korwil-card-label{
  font-size:11px;
  color:#9AA4B2;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.korwil-card-value{
  font-size:13px;
  font-weight:600;
  color:var(--title);
  margin-bottom:6px;
}
.korwil-badge{
  align-self:flex-start;
  margin-top:4px;
  padding:3px 12px;
  background:var(--blue-primary);
  color:var(--white);
  border-radius:20px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.02em;
}

/* ---- Load more button ---- */
.load-more-btn{
  align-self:center;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 28px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--white);
  font-family:'Chelsea Basis', sans-serif;
  font-weight:700;
  font-size:14px;
  color:var(--blue-primary);
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.load-more-btn:hover{
  background:var(--bg-soft);
  transform:translateY(-1px);
}
.load-more-arrow{
  width:8px;height:8px;
  border-right:1.6px solid var(--blue-primary);
  border-bottom:1.6px solid var(--blue-primary);
  transform:rotate(45deg);
}

/* ---- Sidebar: CTA Korwil banner ---- */
.korwil-cta-banner{ min-height:260px; }

/* ---- Korwil terbaru: badge "BARU" ---- */
.popular-news-title .new-badge{
  display:inline-block;
  margin-left:6px;
  padding:1px 8px;
  background:var(--blue-primary);
  color:var(--white);
  font-size:9px;
  font-weight:700;
  border-radius:10px;
  letter-spacing:0.03em;
  vertical-align:middle;
}

/* ---- Category list active state ---- */
.category-list li a.is-active{
  color:var(--blue-primary);
  font-weight:700;
  background:rgba(34,78,173,0.06);
  border-radius:8px;
}
.category-list li a.is-active span{ color:var(--blue-primary); }

/* ---- Filter kategori header & empty state ---- */
.news-category-header{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
  margin-bottom:4px;
}
.news-category-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:var(--blue-primary);
  cursor:pointer;
  width:fit-content;
  transition:gap .2s ease, opacity .2s ease;
}
.news-category-back:hover{ gap:10px; opacity:0.75; }
.news-category-title{
  font-size:22px;
  font-weight:700;
  color:var(--title);
}
.news-empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:48px 24px;
  color:var(--desc);
  text-align:center;
}
.news-empty-state svg{ opacity:0.35; }
.news-empty-state p{ font-size:15px; }

/* ---- Info Korwil card ---- */
.info-card{
  background:var(--white);
  border:0.5px solid var(--border);
  border-radius:16px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.info-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.info-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  line-height:160%;
  color:var(--desc);
}
.info-icon{
  flex-shrink:0;
  width:20px;height:20px;
  border-radius:50%;
  background:var(--gradient-card);
  color:var(--white);
  font-size:11px;
  font-weight:700;
  font-style:italic;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:1px;
}
.info-card-btn{
  align-self:stretch;
  justify-content:center;
}

/* =========================================================
   RESPONSIVE — KORWIL PAGE
   ========================================================= */
@media (max-width:1024px){
  .korwil-layout{ flex-direction:column; align-items:stretch; }
  .news-sidebar{ flex:1; width:100%; }
  .korwil-grid{ grid-template-columns:repeat(3, 1fr); }
}

@media (max-width:768px){
  .korwil-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .korwil-filters{ flex-direction:column; }
  .korwil-select{ width:100%; }
  .korwil-map{ min-height:240px; }
  .korwil-map-stat-number{ font-size:22px; }
}

@media (max-width:480px){
  .korwil-grid{ grid-template-columns:1fr; }
}




/* =========================================================
   JADWAL & HASIL PAGE — jadwal.html
   ========================================================= */

/* ---- Tabs ---- */
.schedule-tabs{
  display:flex;
  gap:8px;
  background:var(--bg-soft);
  padding:6px;
  border-radius:12px;
  width:fit-content;
}
.schedule-tab{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  border:none;
  border-radius:10px;
  background:transparent;
  font-family:'Chelsea Basis', sans-serif;
  font-weight:700;
  font-size:14px;
  color:var(--desc);
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.tab-icon{
  width:18px;height:18px;
  filter:brightness(0) saturate(100%) invert(45%);
}
.schedule-tab.is-active{
  background:var(--gradient-card);
  color:var(--white);
  box-shadow:0 4px 12px rgba(34,78,173,0.25);
}
.schedule-tab.is-active .tab-icon{ filter:brightness(0) invert(1); }
.schedule-tab:hover:not(.is-active){ color:var(--blue-primary); }

/* ---- Filter row ---- */
.schedule-filters{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.filter-chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.filter-chip{
  padding:8px 20px;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--white);
  font-family:'Chelsea Basis', sans-serif;
  font-weight:500;
  font-size:13px;
  color:var(--title);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.filter-chip.is-active{
  background:var(--blue-primary);
  border-color:var(--blue-primary);
  color:var(--white);
  font-weight:700;
}
.filter-chip:hover:not(.is-active){
  border-color:var(--blue-primary);
  color:var(--blue-primary);
}
.schedule-filters .korwil-select{ min-width:190px; }

/* ---- Featured match (Jadwal Selanjutnya) ---- */
.featured-match{ width:100%; }
.featured-match .match-row{ gap:0; justify-content:space-between; }
.match-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  padding:0 24px;
}
.match-center-date{
  font-size:12px;
  line-height:150%;
  text-align:center;
  opacity:0.85;
}
.ticket-btn{
  align-self:flex-start;
  margin-top:4px;
  width:100%;
  justify-content:center;
}

/* ---- Schedule list (rows) ---- */
.schedule-empty-state{
  border-radius:20px;
  overflow:hidden;
  border:0.5px solid var(--border);
}
.schedule-empty-inner{
  display:flex;
  align-items:stretch;
  min-height:280px;
}
.schedule-empty-graphic{
  width:260px;
  flex-shrink:0;
  background:var(--gradient-card);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:40px 24px;
  position:relative;
  overflow:hidden;
}
.schedule-empty-graphic::before{
  content:'';
  position:absolute;
  inset:0;
  background:url('../img/hero-image.avif') center/cover no-repeat;
  opacity:.08;
}
.schedule-empty-logo{
  position:relative;
  width:72px; height:72px;
  background:rgba(255,255,255,.12);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}
.schedule-empty-logo img{
  width:100%; height:100%;
  object-fit:contain;
  filter:brightness(0) invert(1);
}
.schedule-empty-dots{
  position:relative;
  display:flex;
  gap:8px;
}
.schedule-empty-dots span{
  width:8px; height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.3);
  animation:empty-pulse 1.4s ease-in-out infinite;
}
.schedule-empty-dots span:nth-child(2){ animation-delay:.2s; }
.schedule-empty-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes empty-pulse{
  0%,100%{ opacity:.3; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.2); }
}
.schedule-empty-body{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
  padding:40px 36px;
  background:var(--white);
}
.schedule-empty-eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--blue-primary);
}
.schedule-empty-title{
  font-size:26px;
  font-weight:700;
  color:var(--title);
  line-height:1.25;
}
.schedule-empty-desc{
  font-size:14px;
  line-height:1.7;
  color:var(--desc);
  max-width:420px;
}
.schedule-empty-actions{
  display:flex;
  gap:12px;
  margin-top:8px;
  flex-wrap:wrap;
}
.btn-outline-blue{
  color:var(--blue-primary);
  background:transparent;
  border-color:var(--blue-primary);
}
.btn-outline-blue:hover{ background:rgba(34,78,173,.06); }
@media (max-width:700px){
  .schedule-empty-inner{ flex-direction:column; }
  .schedule-empty-graphic{ width:100%; min-height:140px; flex-direction:row; gap:16px; padding:24px; }
  .schedule-empty-body{ padding:24px; }
  .schedule-empty-title{ font-size:20px; }
}

.schedule-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media (max-width:960px){ .schedule-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .schedule-list{ grid-template-columns:1fr; } }

/* ---- Match card ---- */
.schedule-card{
  background:var(--white);
  border:0.5px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:box-shadow .2s ease, transform .2s ease;
}
.schedule-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(34,78,173,0.10);
}
.sc-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 16px;
  background:var(--bg-soft);
  border-bottom:1px solid var(--border);
}
.sc-badge{ display:flex; align-items:center; gap:6px; }
.sc-league{
  font-size:12px;
  font-weight:700;
  color:var(--blue-primary);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.sc-sep{ color:var(--border); font-size:12px; }
.sc-matchday{ font-size:12px; color:var(--desc); }
.sc-header-right{
  display:flex;
  align-items:center;
  gap:8px;
}
.sc-datetime{
  font-size:12px;
  font-weight:600;
  color:var(--title);
  white-space:nowrap;
}
.sc-ha-tag{
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:20px;
  white-space:nowrap;
}
.sc-home{
  background:#E8F0FF;
  color:var(--blue-primary);
}
.sc-away{
  background:#FFF3E0;
  color:#B45309;
}
.sc-match{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:20px 16px;
  flex:1;
}
.sc-team{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
}
.sc-logo{ width:52px; height:52px; flex-shrink:0; }
.sc-logo img{ width:100%; height:100%; object-fit:contain; }
.sc-name{
  font-size:14px;
  font-weight:700;
  color:var(--title);
  text-align:center;
  line-height:1.35;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.sc-vs{
  font-size:16px;
  font-weight:700;
  color:var(--desc);
  flex-shrink:0;
  padding:0 4px;
  opacity:.6;
}
.sc-venue{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 16px;
  border-top:1px solid var(--border);
  font-size:12px;
  color:var(--desc);
}
.sc-venue-text{
  display:flex;
  align-items:center;
  gap:6px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  min-width:0;
}
.sc-venue .meta-icon{ width:13px; height:13px; flex-shrink:0; filter:brightness(0) saturate(100%) invert(45%); }

/* ---- Sidebar: Klasemen Sementara ---- */
.sidebar-subtitle{
  font-size:12px;
  color:var(--desc);
  margin-top:-12px;
}
.standings-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.standings-table th{
  text-align:left;
  font-size:11px;
  color:var(--desc);
  font-weight:500;
  padding:6px 4px;
  border-bottom:1px solid var(--border);
}
.standings-table td{
  padding:8px 4px;
  color:var(--title);
  border-bottom:1px solid var(--border);
}
.standings-table th:first-child,
.standings-table td:first-child{ width:20px; }
.standings-table th:not(:first-child):not(:nth-child(2)),
.standings-table td:not(:first-child):not(:nth-child(2)){
  text-align:center;
  width:24px;
}
.standings-table tr:last-child td{ border-bottom:none; }
.standings-table tr.is-highlighted td{
  background:rgba(34,78,173,0.06);
  font-weight:700;
  color:var(--blue-primary);
}
.standings-table tr.is-highlighted td:first-child{ border-radius:6px 0 0 6px; }
.standings-table tr.is-highlighted td:last-child{ border-radius:0 6px 6px 0; }

/* ---- Sidebar: Top Scorer ---- */
.topscorer-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.topscorer-list li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
}
.topscorer-rank{
  width:20px;height:20px;
  border-radius:50%;
  background:var(--bg-soft);
  color:var(--title);
  font-weight:700;
  font-size:11px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.topscorer-name{
  flex:1;
  font-weight:600;
  color:var(--title);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.topscorer-team{
  font-size:11px;
  color:var(--desc);
}
.topscorer-goals{
  font-weight:700;
  color:var(--blue-primary);
  width:18px;
  text-align:right;
}

/* ---- Sidebar Next Match (dipakai di halaman ini) ---- */
.sidebar-next-match{ width:100%; }
.sidebar-next-match .ticket-btn{ margin-top:8px; }

/* =========================================================
   RESPONSIVE — JADWAL & HASIL PAGE
   ========================================================= */
@media (max-width:768px){
  .schedule-tabs{ width:100%; }
  .schedule-tab{ flex:1; justify-content:center; font-size:12px; padding:10px 12px; }

  .schedule-filters{ flex-direction:column; align-items:stretch; }
  .filter-chips{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .filter-chip{ white-space:nowrap; }

  .featured-match .match-row{ flex-wrap:wrap; gap:16px; justify-content:center; }
  .match-center{ order:3; width:100%; padding:12px 0 0; border-top:1px solid rgba(255,255,255,0.15); }

  .schedule-row{
    grid-template-columns:1fr;
    gap:10px;
    text-align:center;
  }
  .schedule-row-team-left,
  .schedule-row-team-right{ justify-content:center; text-align:center; }
  .schedule-venue{ justify-content:center; }
  .schedule-chevron{ display:none; }
}

/* =========================================================
   SUBMIT BERITA PAGE — submit-berita.html
   ========================================================= */

.submit-form-card{
  background:var(--white);
  border:0.5px solid var(--border);
  border-radius:16px;
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* ---- Status banner ---- */
.status-banner{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  background:rgba(34,78,173,0.06);
  border:1px solid rgba(34,78,173,0.2);
  border-radius:10px;
  font-size:13px;
  line-height:160%;
  color:var(--title);
}
.status-banner .status-icon{
  flex-shrink:0;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--gradient-card);
  color:var(--white);
  font-size:12px;
  font-weight:700;
  font-style:italic;
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}

/* ---- Form layout ---- */
.form-fields{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.form-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.form-group label{
  font-size:14px;
  font-weight:700;
  color:var(--title);
}
.required{ color:#E04F4F; }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea{
  width:100%;
  padding:12px 16px;
  border:1px solid var(--border);
  border-radius:10px;
  font-family:'Chelsea Basis', sans-serif;
  font-size:14px;
  color:var(--title);
  box-sizing:border-box;
  background:var(--white);
}
.form-group textarea{
  resize:vertical;
  line-height:160%;
  font-family:'Montserrat', sans-serif;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--blue-primary);
  box-shadow:0 0 0 3px rgba(34,78,173,0.1);
}
.form-hint{
  font-size:12px;
  color:var(--desc);
}

/* ---- File upload drop area ---- */
.file-input-hidden{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  overflow:hidden;
}
.file-drop{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:32px 16px;
  border:1.5px dashed var(--border);
  border-radius:12px;
  background:var(--bg-soft);
  cursor:pointer;
  text-align:center;
  transition:border-color .2s ease, background .2s ease;
}
.file-drop:hover{
  border-color:var(--blue-primary);
  background:rgba(34,78,173,0.04);
}
.file-drop-icon{
  width:28px;height:28px;
  filter:brightness(0) saturate(100%) invert(45%);
}
.file-drop-text{
  font-size:14px;
  font-weight:600;
  color:var(--title);
}
.file-drop-hint{
  font-size:12px;
  color:var(--desc);
}

/* ---- Checkbox ---- */
.form-checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.form-checkbox input[type="checkbox"]{
  margin-top:3px;
  width:16px;height:16px;
  accent-color:var(--blue-primary);
  flex-shrink:0;
  cursor:pointer;
}
.form-checkbox label{
  font-size:13px;
  line-height:160%;
  color:var(--desc);
  cursor:pointer;
}

/* ---- Form actions ---- */
.form-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin-top:28px;
}
.btn-secondary-outline{
  padding:12px 24px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--white);
  font-family:'Chelsea Basis', sans-serif;
  font-weight:700;
  font-size:14px;
  color:var(--title);
  cursor:pointer;
  transition:background .2s ease;
}
.btn-secondary-outline:hover{ background:var(--bg-soft); }
.submit-btn{
  background:var(--blue-primary);
  border-color:var(--blue-primary);
  color:var(--white);
}
.submit-btn:hover{ opacity:0.9; }

/* ---- Multi-select kategori (chip checkbox) ---- */
.form-hint-inline{
  font-weight:400;
  color:var(--desc);
  font-size:12px;
}
.category-chip-group{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:4px;
  border-radius:10px;
  transition:box-shadow .2s ease;
}
.category-chip-group.has-error{
  box-shadow:0 0 0 2px #E04F4F;
}
.category-chip-input{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  overflow:hidden;
}
.category-chip-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 18px;
  border:1px solid var(--border);
  border-radius:20px;
  font-family:'Chelsea Basis', sans-serif;
  font-weight:500;
  font-size:13px;
  color:var(--title);
  cursor:pointer;
  user-select:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.category-chip-input:checked + .category-chip-label{
  background:var(--blue-primary);
  border-color:var(--blue-primary);
  color:var(--white);
  font-weight:700;
}
.category-chip-input:focus-visible + .category-chip-label{
  outline:2px solid var(--blue-primary);
  outline-offset:2px;
}
.category-chip-label:hover{
  border-color:var(--blue-primary);
}

/* ---- Alur Penayangan (process steps) ---- */
.process-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.process-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.process-step{
  flex-shrink:0;
  width:28px;height:28px;
  border-radius:50%;
  background:var(--gradient-card);
  color:var(--white);
  font-size:13px;
  font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.process-title{
  font-size:13px;
  font-weight:700;
  color:var(--title);
  margin-bottom:2px;
}
.process-desc{
  font-size:12px;
  line-height:150%;
  color:var(--desc);
}

/* =========================================================
   RESPONSIVE — SUBMIT BERITA PAGE
   ========================================================= */
@media (max-width:768px){
  .submit-form-card{ padding:20px; }
  .form-row{ grid-template-columns:1fr; gap:16px; }
  .form-actions{ flex-direction:column-reverse; align-items:stretch; }
  .form-actions button{ width:100%; justify-content:center; }
}

/* =========================================================
   SUBMIT BERITA — SUCCESS PAGE
   ========================================================= */
.success-page-card{
  width:100%;
  max-width:640px;
  margin:24px auto 0;
  background:var(--white);
  border:0.5px solid var(--border);
  border-radius:16px;
  padding:48px 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:16px;
}
.success-page-icon{
  width:64px;height:64px;
  border-radius:50%;
  background:var(--gradient-card);
  color:var(--white);
  font-size:32px;
  font-weight:700;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:4px;
}
.success-page-status{
  padding:4px 14px;
  background:rgba(34,78,173,0.08);
  color:var(--blue-primary);
  font-size:12px;
  font-weight:700;
  border-radius:20px;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.success-page-title{
  font-size:28px;
  font-weight:700;
  color:var(--title);
  line-height:130%;
}
.success-page-desc{
  font-size:14px;
  line-height:170%;
  color:var(--desc);
  max-width:460px;
}

/* ---- Step progress ---- */
.success-page-steps{
  display:flex;
  align-items:center;
  gap:8px;
  margin:16px 0;
  width:100%;
  max-width:420px;
}
.success-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:var(--desc);
  font-weight:600;
}
.success-step-icon{
  width:28px;height:28px;
  border-radius:50%;
  background:var(--bg-soft);
  color:var(--desc);
  font-size:12px;
  font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.success-step.is-done .success-step-icon{
  background:var(--blue-primary);
  color:var(--white);
}
.success-step.is-done{ color:var(--blue-primary); }
.success-step.is-current .success-step-icon{
  background:var(--gradient-card);
  color:var(--white);
  box-shadow:0 0 0 4px rgba(34,78,173,0.12);
}
.success-step.is-current{ color:var(--title); }
.success-step-line{
  flex:1;
  height:2px;
  background:var(--border);
  margin-bottom:18px;
}

.success-page-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:8px;
}

@media (max-width:768px){
  .success-page-card{ padding:32px 20px; margin-top:16px; }
  .success-page-title{ font-size:22px; }
  .success-page-actions{ flex-direction:column; width:100%; }
  .success-page-actions a{ width:100%; justify-content:center; }
}

/* =========================================================
   NAV — dropdown toggle active state (halaman dalam Tentang Kami)
   ========================================================= */
.nav-dropdown-toggle.is-active{
  opacity:1;
  font-weight:700;
}
.nav-dropdown-toggle.is-active::after{ width:100%; }

/* =========================================================
   GALERI PAGE — galeri.html
   ========================================================= */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.gallery-card{
  position:relative;
  display:block;
  border-radius:16px;
  overflow:hidden;
  aspect-ratio:4/3;
  background:linear-gradient(160deg,#cfd8e3,#9fb0c6);
}
.gallery-card-lg{
  grid-column:span 1;
}
.gallery-card-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.gallery-card-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.gallery-card-img-dark{
  background:
    radial-gradient(circle at 25% 25%, rgba(34,78,173,0.55), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(21,48,107,0.65), transparent 55%),
    linear-gradient(160deg, #1d3f8f 0%, #0c1d44 100%);
}
.gallery-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
  pointer-events:none;
}
.gallery-card:hover .gallery-card-img img{ transform:scale(1.06); }

/* Card info overlay (title + badges) */
.gallery-card-info{
  position:absolute;
  bottom:0; left:0; right:0;
  z-index:1;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.gallery-card-title{
  color:var(--white);
  font-family:'Chelsea Basis', sans-serif;
  font-weight:700;
  font-size:14px;
  line-height:1.35;
  text-shadow:0 1px 4px rgba(0,0,0,0.4);
}
.gallery-card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.gallery-badge-category{
  z-index:1;
  display:inline-block;
  padding:5px 10px;
  background:var(--blue-primary);
  color:var(--white);
  border-radius:8px;
  font-family:'Chelsea Basis', sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:0.02em;
}
.gallery-badge-count{
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 10px;
  background:rgba(255,255,255,0.2);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  border-radius:8px;
  color:var(--white);
  font-family:'Chelsea Basis', sans-serif;
  font-weight:600;
  font-size:11px;
}
.gallery-cam-icon{ width:13px; height:13px; color:var(--white); flex-shrink:0; }
.gallery-cta-banner{ min-height:220px; }
.load-more-arrow-down{
  border-right:none;
  border-bottom:none;
  border-left:1.6px solid var(--blue-primary);
  border-top:1.6px solid var(--blue-primary);
  transform:rotate(-135deg);
}

@media (max-width:1024px){
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:480px){
  .gallery-grid{ grid-template-columns:1fr; gap:12px; }
}

/* =========================================================
   SEJARAH PAGE — sejarah.html
   ========================================================= */
.timeline-hero-range{
  display:inline-flex;
  margin-top:4px;
  padding:4px 16px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.25);
  border-radius:20px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--white);
}

.timeline-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:8px 0;
}
.timeline-wrap::before{
  content:"";
  position:absolute;
  left:50%;
  top:0; bottom:0;
  width:2px;
  background:var(--border);
  transform:translateX(-50%);
  z-index:0;
}
.timeline-item{
  position:relative;
  display:flex;
  align-items:stretch;
  gap:0;
  z-index:1;
}
.timeline-card{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0 40px 64px 0;
}
.timeline-item.is-reverse .timeline-card{
  padding:0 0 64px 40px;
}
.timeline-spacer{
  flex:1;
}
.timeline-dot-col{
  flex:0 0 32px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:24px;
}
.timeline-photo{
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(18,25,38,0.12);
  background:linear-gradient(160deg,#cfd8e3,#9fb0c6);
  margin-bottom:20px;
}
.timeline-photo img{ width:100%; height:100%; object-fit:cover; }
.timeline-photo-dark{
  background:
    radial-gradient(circle at 30% 25%, rgba(34,78,173,0.55), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(21,48,107,0.65), transparent 55%),
    linear-gradient(160deg, #1d3f8f 0%, #0c1d44 100%);
}
.timeline-card-body{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.timeline-year-badge{
  display:inline-block;
  font-family:'Chelsea Basis', sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  color:var(--blue-primary);
  background:rgba(34,78,173,0.08);
  border:1px solid rgba(34,78,173,0.18);
  border-radius:20px;
  padding:6px 12px;
  width:fit-content;
}
.timeline-dot{
  width:18px; height:18px;
  border-radius:50%;
  background:var(--white);
  border:3px solid var(--blue-primary);
  box-shadow:0 0 0 4px var(--white);
  flex-shrink:0;
  margin-top:6px;
}
.timeline-title{
  font-size:18px;
  font-weight:700;
  color:var(--title);
  margin:0;
}
.timeline-desc{
  font-size:14px;
  line-height:160%;
  color:var(--desc);
  margin:0;
}

/* ---- Stats banner (Panser Biru Dalam Angka) ---- */
.stats-banner{
  width:100%;
  background:var(--gradient-card);
  border-radius:20px;
  padding:32px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}
.stats-banner-title{
  color:var(--white);
  font-weight:700;
  font-size:16px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  opacity:0.9;
}
.stats-banner-row{ width:100%; }
.stats-banner-row .stat-icon{ filter:brightness(0) invert(1); }
.stats-banner-row .stat-number{ color:var(--white); }
.stats-banner-row .stat-label{ color:rgba(255,255,255,0.75); }
.v-line-light{ background:rgba(255,255,255,0.2); }

/* ---- Dokumentasi Perjalanan grid ---- */
.doc-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:16px;
}
.doc-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:3/4;
  background:linear-gradient(160deg,#cfd8e3,#9fb0c6);
  padding:14px;
  gap:8px;
  text-align:center;
}
.doc-card-img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
}
.doc-card-img img{ width:100%; height:100%; object-fit:cover; }
.doc-card-img-dark{
  background:
    radial-gradient(circle at 30% 20%, rgba(34,78,173,0.55), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(21,48,107,0.65), transparent 55%),
    linear-gradient(160deg, #1d3f8f 0%, #0c1d44 100%);
}
.doc-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.6) 100%);
  pointer-events:none;
}
.doc-card-year{
  position:relative;
  z-index:1;
  color:var(--white);
  font-weight:700;
  font-size:16px;
}
.doc-card-btn{
  position:relative;
  z-index:1;
  padding:4px 14px;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  border:1px solid rgba(255,255,255,0.3);
  border-radius:20px;
  color:var(--white);
  font-size:11px;
  font-weight:600;
  transition:background .2s ease;
}
.doc-card:hover .doc-card-btn{ background:rgba(255,255,255,0.3); }

/* ---- CTA banner wide (sebelum sponsor) ---- */
.banner-wide{
  width:100%;
  min-height:auto;
  justify-content:space-between;
  padding:28px 32px;
}
.banner-wide-info{ gap:6px; }
.banner-wide-title{ font-size:20px; }
.banner-wide-desc{ font-size:14px; opacity:0.9; }
.banner-wide-btn{ flex-shrink:0; }

/* =========================================================
   RESPONSIVE — SEJARAH PAGE
   ========================================================= */
@media (max-width:1024px){
  .doc-grid{ grid-template-columns:repeat(3, 1fr); }
  .stats-banner-row{ flex-wrap:wrap; gap:20px; }
  .stats-banner-row .stat{ flex:1 1 30%; min-width:140px; }
  .stats-banner-row .v-line{ display:none; }
}

@media (max-width:768px){
  .timeline-wrap::before{ left:16px; }
  .timeline-item,
  .timeline-item.is-reverse{
    flex-direction:row;
  }
  .timeline-item .timeline-card,
  .timeline-item.is-reverse .timeline-card{
    padding:0 0 48px 16px;
    order:2;
  }
  .timeline-item .timeline-spacer,
  .timeline-item.is-reverse .timeline-spacer{ display:none; }
  .timeline-item .timeline-dot-col,
  .timeline-item.is-reverse .timeline-dot-col{
    flex:0 0 32px;
    order:1;
  }

  .doc-grid{ grid-template-columns:repeat(2, 1fr); }

  .banner-wide{ flex-direction:column; align-items:flex-start; gap:16px; }
  .banner-wide-btn{ align-self:stretch; justify-content:center; }
}

@media (max-width:480px){
  .doc-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
}

/* =========================================================
   UX UPGRADE — Navbar fixed + glassmorphism, Ken Burns,
   Fade-up reveal, Timeline reveal
   ========================================================= */
:root{
  --header-h:80px;
}
@media (max-width:768px){
  :root{ --header-h:76px; }
}

/* ---- Navbar: fixed + glass saat scroll ---- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:transparent;
  transition:background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}
/* Geser site-header ke bawah admin bar WordPress saat login */
.admin-bar .site-header{
  top:32px;
}
@media screen and (max-width:782px){
  .admin-bar .site-header{
    top:46px;
  }
}
.site-header.is-scrolled{
  background:rgba(8,16,36,0.6);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 8px 30px rgba(0,0,0,0.18);
  border-bottom:0.5px solid rgba(255,255,255,0.08);
}

/* Kompensasi tinggi header yang sekarang fixed, supaya konten hero tidak tertutup */
.hero-content{
  padding-top:calc(60px + var(--header-h));
}
.page-hero-content{
  padding-top:50px;
  padding-bottom:50px;
}
@media (max-width:1280px){
  .hero-content{ padding-top:calc(60px + var(--header-h)); }
}
@media (max-width:768px){
  .hero-content{ padding-top:calc(64px + var(--header-h)); padding-bottom:64px; }
  .page-hero-content{ padding-top:40px; padding-bottom:40px; }
}

/* Tabel klasemen: scrollable horizontal di layar kecil */
.table-scroll{ width:100%; overflow-x:auto; }
.table-scroll .standings-table{ min-width:340px; }

/* Ken Burns dihapus — background hero statis */

/* ---- Fade up saat scroll ---- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---- Timeline reveal: fade up ---- */
.timeline-item.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.timeline-item.is-reverse.reveal{
  transform:translateY(32px);
}
.timeline-item.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---- Stagger halus untuk grid/list (anak ke-n sedikit delay) ---- */
.korwil-grid .reveal:nth-child(2),
.gallery-grid .reveal:nth-child(2),
.doc-grid .reveal:nth-child(2),
.related-grid .reveal:nth-child(2){ transition-delay:.06s; }
.korwil-grid .reveal:nth-child(3),
.gallery-grid .reveal:nth-child(3),
.doc-grid .reveal:nth-child(3),
.related-grid .reveal:nth-child(3){ transition-delay:.12s; }
.korwil-grid .reveal:nth-child(4),
.gallery-grid .reveal:nth-child(4),
.doc-grid .reveal:nth-child(4){ transition-delay:.18s; }

/* ---- Hormati prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce){
  .hero,
  .page-hero-bg::before{ animation:none; }
  .reveal,
  .timeline-item.reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* =========================================================
   PERBAIKAN RESPONSIVE TAMBAHAN — semua halaman
   ========================================================= */
@media (max-width:1024px){
  .doc-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:900px){
  .news-page-layout,
  .korwil-layout{ flex-direction:column; align-items:stretch; }
}
@media (max-width:768px){
  /* Sejarah: stats banner & timeline padding lebih rapat di mobile */
  .stats-banner{ padding:24px 16px; }
  .stats-banner-title{ font-size:14px; text-align:center; }
  .timeline-card{ min-width:0; }
  .timeline-title{ font-size:16px; }
  .timeline-desc{ font-size:13px; }

  /* Galeri: filter & search jadi full width rapi */
  .korwil-filters{ width:100%; }
  .filter-chips{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
  .filter-chip{ white-space:nowrap; }

  /* Sidebar kartu next-match/korwil/jadwal full width konsisten */
  .news-sidebar{ width:100%; }

  /* Banner wide (sejarah CTA) full width rapi */
  .banner-wide{ padding:24px 20px; }

  /* Section heading sedikit lebih kecil supaya proporsional di mobile */
  .section-heading{ font-size:18px; }
}
@media (max-width:480px){
  .gallery-card-lg{ grid-column:span 1; }
  .doc-grid{ grid-template-columns:repeat(2, 1fr); }
  .korwil-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   PERBAIKAN RESPONSIVE LANJUTAN — fix card belum full-width
   ========================================================= */

/* ---- Sejarah: stats banner full-width rapi di semua ukuran ---- */
@media (max-width:768px){
  .stats-banner-row{ flex-wrap:wrap; gap:16px; justify-content:center; }
  .stats-banner-row .stat{ flex:1 1 45%; min-width:120px; }
}
@media (max-width:480px){
  .stats-banner-row .stat{ flex:1 1 100%; }
}

/* ---- Sejarah: dokumentasi perjalanan ---- */
@media (max-width:600px){
  .doc-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .doc-card-year{ font-size:14px; }
  .doc-card-btn{ font-size:10px; padding:3px 10px; }
}

/* ---- Galeri: kartu featured tidak lagi span ganda, full width di mobile ---- */
@media (max-width:600px){
  .gallery-grid{ grid-template-columns:1fr; gap:14px; }
  .gallery-card,
  .gallery-card-lg{ grid-column:1/-1; width:100%; }
}

/* ---- Korwil: kartu, peta, filter full width ---- */
@media (max-width:600px){
  .korwil-grid{ grid-template-columns:1fr; }
  .korwil-card{ width:100%; }
  .korwil-map{ padding:16px; }
  .korwil-map-stat{ left:12px; right:12px; bottom:12px; }
}

/* ---- Sidebar: pastikan semua kartu sidebar full width, tidak terpotong ---- */
@media (max-width:768px){
  .news-sidebar,
  .news-sidebar .sidebar-card,
  .news-sidebar .sidebar-banner,
  .news-sidebar .info-card,
  .news-sidebar .card{
    width:100%;
    max-width:100%;
  }
  .sidebar-banner-img{ max-width:140px; }
}

/* ---- Jadwal: featured match & schedule full width, tidak sempit ---- */
@media (max-width:768px){
  .next-match,
  .featured-match{ width:100%; }
  .match-row{ display:flex; justify-content:center; align-items: flex-start; height: auto;}
  .team{ min-width:96px; }
}

/* ---- Submit Berita: form, status banner, file-drop full width ---- */
@media (max-width:768px){
  .submit-form-card,
  .status-banner,
  .file-drop,
  .category-chip-group{ width:100%; }
  .form-group{ width:100%; }
  .form-group input,
  .form-group textarea,
  .form-group select{ width:100%; }
}

/* ---- Sukses submit: step progress tidak sempit di layar kecil ---- */
@media (max-width:480px){
  .success-page-steps{ flex-wrap:wrap; gap:12px 4px; justify-content:center; }
  .success-step-line{ flex:0 0 100%; order:99; height:0; margin:0; }
}

/* ---- Footer: blok info full width rapi di semua ukuran kecil ---- */
@media (max-width:480px){
  .footer-content{ gap:16px; }
  .footer-block{ gap:6px; }
}

/* ---- Safety net umum: cegah elemen meluber/menyempit di layar sempit ---- */
@media (max-width:480px){
  .full-page,
  .body-section,
  .korwil-layout,
  .news-page-layout{ width:100%; }
  .card,
  .news-list-card,
  .korwil-card,
  .gallery-card,
  .sidebar-card,
  .sidebar-banner,
  .banner,
  .doc-card,
  .related-card,
  .submit-form-card,
  .success-page-card,
  .stats-banner{
    width:100%;
    max-width:100%;
  }
}

/* =========================================================
   CEK KTA PAGE — cek-kta.html
   ========================================================= */
.kta-hero-title{ font-size:96px; }
@media (max-width:1280px){ .kta-hero-title{ font-size:clamp(40px, 7vw, 96px); } }

.kta-page-wrap{
  gap:24px;
  align-items:center;
  max-width:880px;
}

/* ---- Form cek KTA (light, konsisten dgn .card lain) ---- */
.kta-form-card{
  width:100%;
  background:var(--white);
  border:0.5px solid var(--border);
  border-radius:16px;
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.kta-form-label{
  font-size:13px;
  font-weight:700;
  color:var(--title);
}
.kta-form-row{
  display:flex;
  gap:12px;
}
.kta-input-wrap{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  height:52px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg-soft);
  padding:0 16px;
  gap:8px;
  transition:border-color .2s ease, background .2s ease;
}
.kta-input-wrap:focus-within{
  border-color:var(--blue-primary);
  background:var(--white);
}
.kta-input-icon{
  width:18px;height:18px;
  color:#9AA4B2;
  flex-shrink:0;
}
.kta-input-prefix{
  font-family:'Chelsea Basis', sans-serif;
  font-weight:700;
  font-size:14px;
  color:var(--desc);
  flex-shrink:0;
  padding-right:8px;
  border-right:1px solid var(--border);
}
.kta-input-wrap input{
  flex:1;
  min-width:0;
  height:100%;
  border:none;
  background:transparent;
  color:var(--title);
  font-family:'Chelsea Basis', sans-serif;
  font-size:14px;
  outline:none;
}
.kta-input-wrap input::placeholder{ color:#9AA4B2; }
.kta-submit-btn{ flex-shrink:0; height:52px; padding:0 28px; }
.kta-submit-btn:disabled{ opacity:.45; cursor:not-allowed; }
.kta-form-hint{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--desc);
}
.kta-hint-icon{ width:14px; height:14px; flex-shrink:0; color:#9AA4B2; }
.kta-form-hint strong{ color:var(--title); }

@media (max-width:600px){
  .kta-form-row{ flex-direction:column; }
  .kta-submit-btn{ width:100%; justify-content:center; }
}

/* ---- Status badge: ditemukan / tidak ditemukan ---- */
/* ── Animasi KTA ── */
@keyframes kta-badge-pop{
  0%  { opacity:0; transform:scale(0.5) translateY(-20px); }
  65% { opacity:1; transform:scale(1.15) translateY(4px); }
  80% { transform:scale(0.95) translateY(0); }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}
@keyframes kta-card-reveal{
  0%  { opacity:0; transform:translateY(60px) scale(0.88); filter:blur(4px); }
  70% { filter:blur(0); }
  100%{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@keyframes kta-shimmer{
  0%  { left:-120%; opacity:1; }
  100%{ left:220%; opacity:1; }
}
@keyframes kta-glow{
  0%  { box-shadow:0 20px 56px rgba(12,29,68,0.38); }
  50% { box-shadow:0 0 0 6px rgba(99,151,255,0.35), 0 24px 64px rgba(12,29,68,0.5); }
  100%{ box-shadow:0 20px 56px rgba(12,29,68,0.38); }
}
.kta-status-found.kta-animate{
  animation:kta-badge-pop .6s cubic-bezier(.34,1.56,.64,1) both;
}
.kta-card.kta-animate{
  animation:
    kta-card-reveal .7s cubic-bezier(.22,.61,.36,1) .25s both,
    kta-glow 1s ease .9s both;
}
.kta-card.kta-animate::after{
  content:'';
  position:absolute;
  top:0;left:-120%;
  width:70%;height:100%;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,0.32) 50%,transparent 70%);
  animation:kta-shimmer 1s ease 1s forwards;
  pointer-events:none;
  z-index:10;
}

.kta-status{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:14px;
  letter-spacing:0.02em;
}
.kta-status-found{ color:var(--blue-primary); }
.kta-status-found .kta-status-icon{ color:var(--blue-primary); width:22px; height:22px; }
.kta-status-notfound{ color:#D6432E; }
.kta-status-icon-error{ width:20px; height:20px; }

/* ---- Kartu KTA (tetap gelap, seperti kartu fisik) ---- */
.kta-card{
  width:100%;
  max-width:640px;
  margin:0 auto;
  position:relative;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 20px 56px rgba(12,29,68,0.38);
  aspect-ratio:16/10;
  /* Container query: teks mengikuti lebar card */
  container-type:inline-size;
  container-name:ktacard;
}
.kta-card-bg-img{
  position:absolute;
  inset:0;
  background:url('../img/kta-template.avif') center/cover no-repeat,
             linear-gradient(160deg, #1d3f8f 0%, #0c1d44 100%);
}
.kta-card-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(12px, 4cqw, 24px);
}
.kta-card-overlay-top{
  display:flex;
  justify-content:flex-end;
}
.kta-valid-badge{
  display:inline-flex;
  align-items:center;
  gap:clamp(3px, 1cqw, 6px);
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(6px);
  border:1.5px solid #3DDC84;
  color:#3DDC84;
  border-radius:20px;
  padding:clamp(3px, 1cqw, 6px) clamp(7px, 2.3cqw, 14px);
  font-size:clamp(9px, 2cqw, 12px);
  font-weight:700;
  letter-spacing:0.04em;
}
.kta-card-overlay-body{
  border-radius:14px;
  padding:clamp(10px, 3.5cqw, 24px);
}
.kta-overlay-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(8px, 2cqw, 16px) clamp(10px, 3cqw, 24px);
}
.kta-overlay-field{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.kta-overlay-label{
  font-size:clamp(7px, 1.7cqw, 10px);
  font-weight:600;
  letter-spacing:0.08em;
  color:rgba(255,255,255,0.55);
  text-transform:uppercase;
}
.kta-overlay-value{
  font-size:clamp(11px, 2.7cqw, 16px);
  font-weight:700;
  color:#fff;
  line-height:1.3;
}
.kta-overlay-value-accent{
  color:#7FA8F0;
}

/* ---- KTA Skeleton loading ---- */
@keyframes kta-pulse{
  0%,100%{ opacity:.45; }
  50%{ opacity:.15; }
}
.kta-skeleton{
  width:100%;
  aspect-ratio:16/10;
  border-radius:20px;
  background:linear-gradient(160deg,#1a3370 0%,#0c1d44 100%);
  position:relative;
  overflow:hidden;
  container-type:inline-size;
}
.kta-skeleton-badge{
  position:absolute;
  top:clamp(10px,4cqw,20px);
  right:clamp(10px,4cqw,20px);
  width:clamp(60px,22cqw,110px);
  height:clamp(18px,5cqw,28px);
  border-radius:20px;
  background:rgba(255,255,255,0.18);
  animation:kta-pulse 1.4s ease-in-out infinite;
}
.kta-skeleton-body{
  position:absolute;
  bottom:0;left:0;right:0;
  padding:clamp(10px,3.5cqw,24px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(8px,2cqw,16px) clamp(10px,3cqw,24px);
}
.kta-skeleton-field{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.kta-skeleton-label{
  height:clamp(6px,1.5cqw,9px);
  width:40%;
  border-radius:4px;
  background:rgba(255,255,255,0.2);
  animation:kta-pulse 1.4s ease-in-out infinite;
}
.kta-skeleton-value{
  height:clamp(10px,2.5cqw,16px);
  width:80%;
  border-radius:5px;
  background:rgba(255,255,255,0.28);
  animation:kta-pulse 1.4s ease-in-out infinite;
}
.kta-skeleton-field:nth-child(1) .kta-skeleton-label{ animation-delay:.0s; }
.kta-skeleton-field:nth-child(1) .kta-skeleton-value{ animation-delay:.05s; }
.kta-skeleton-field:nth-child(2) .kta-skeleton-label{ animation-delay:.1s; }
.kta-skeleton-field:nth-child(2) .kta-skeleton-value{ animation-delay:.15s; }
.kta-skeleton-field:nth-child(3) .kta-skeleton-label{ animation-delay:.2s; }
.kta-skeleton-field:nth-child(3) .kta-skeleton-value{ animation-delay:.25s; }
.kta-skeleton-field:nth-child(4) .kta-skeleton-label{ animation-delay:.3s; }
.kta-skeleton-field:nth-child(4) .kta-skeleton-value{ animation-delay:.35s; }
.kta-skeleton-shimmer{
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,0.07) 50%,transparent 70%);
  animation:kta-shimmer 2s linear infinite;
}

/* ---- Info bar korwil (light) ---- */
.kta-info-bar{
  width:100%;
  background:var(--bg-soft);
  border:0.5px solid var(--border);
  border-radius:14px;
  padding:18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.kta-info-bar-text{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex:1;
  min-width:220px;
}
.kta-info-bar-icon{
  flex-shrink:0;
  width:22px;height:22px;
  color:var(--blue-primary);
  margin-top:2px;
}
.kta-info-bar-text p{
  font-size:13px;
  line-height:160%;
  color:var(--desc);
}
.kta-info-bar-text strong{ color:var(--title); }
.kta-info-bar-btn{
  flex-shrink:0;
  background:var(--blue-primary);
  color:var(--white);
  border-color:var(--blue-primary);
}
.kta-info-bar-btn:hover{ background:var(--blue-deep); }

@media (max-width:600px){
  .kta-info-bar{ flex-direction:column; align-items:stretch; }
  .kta-info-bar-btn{ justify-content:center; }
}

/* =========================================================
   HALAMAN STRUKTUR ORGANISASI
   ========================================================= */

/* ---- Section header ---- */
.org-section{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-bottom:56px;
}
.org-section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-left:14px;
  border-left:4px solid var(--blue-primary);
}
.org-section-title{
  font-size:18px;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--title);
}

/* ---- Slider wrap ---- */
.org-slider-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:0;
}
.org-slider{
  display:flex;
  gap:16px;
  overflow:hidden;
  scroll-behavior:smooth;
  flex:1;
  min-width:0;
}

/* ---- Slider nav buttons ---- */
.org-slider-btn{
  flex-shrink:0;
  width:40px; height:40px;
  border-radius:50%;
  border:1.5px solid var(--border);
  background:var(--white);
  color:var(--title);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  box-shadow:0 2px 8px rgba(18,25,38,0.08);
  z-index:2;
}
.org-slider-btn:hover{
  background:var(--blue-primary);
  border-color:var(--blue-primary);
  color:var(--white);
  box-shadow:0 4px 16px rgba(34,78,173,0.22);
}
.org-slider-btn:disabled{
  opacity:0.35;
  pointer-events:none;
}
.org-slider-prev{ margin-right:12px; }
.org-slider-next{ margin-left:12px; }

/* ---- Dot indicators ---- */
.org-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:4px;
}
.org-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--border);
  border:none;
  padding:0;
  cursor:pointer;
  transition:background .2s ease, width .25s ease;
}
.org-dot.is-active{
  background:var(--blue-primary);
  width:24px;
  border-radius:4px;
}

/* ---- Org grid ---- */
.org-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}

/* ---- Org card ---- */
.org-card{
  background:var(--white);
  border:0.5px solid var(--border);
  border-radius:16px;
  padding:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  transition:box-shadow .2s ease, transform .2s ease;
}
.org-card:hover{
  box-shadow:0 8px 24px rgba(34,78,173,0.12);
  transform:translateY(-3px);
}

/* ---- Card photo ---- */
.org-card-photo{
  width:100%;
  aspect-ratio:1/1;
  border-radius:10px;
  overflow:hidden;
  background:var(--bg-soft);
  border:0.5px solid var(--border);
}
.org-card-photo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:top center;
}
.org-card-photo-placeholder{
  width:100%; height:100%;
  background:
    radial-gradient(circle at 50% 35%, rgba(34,78,173,0.12), transparent 60%),
    linear-gradient(160deg, #e8edf5, #d0d9ea);
}

/* ---- Role badge ---- */
.org-role-badge{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--blue-primary);
  background:rgba(34,78,173,0.08);
  border:1px solid rgba(34,78,173,0.16);
  border-radius:20px;
  padding:6px 12px;
}
.org-role-badge--pembina{
  color:#6B4BBF;
  background:rgba(107,75,191,0.08);
  border-color:rgba(107,75,191,0.18);
}
.org-role-badge--korwil{
  color:#0F7A55;
  background:rgba(15,122,85,0.08);
  border-color:rgba(15,122,85,0.18);
}

/* ---- Card name ---- */
.org-name{
  font-size:20px;
  font-weight:700;
  color:var(--title);
  line-height:1.4;
  margin:0;
}

/* ---- Social icon ---- */
.org-social{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  border-radius:8px;
  border:1px solid var(--border);
  color:var(--desc);
  transition:border-color .2s ease, color .2s ease, background .2s ease;
  margin-top:auto;
}
.org-social:hover{
  border-color:var(--blue-primary);
  color:var(--blue-primary);
  background:rgba(34,78,173,0.06);
}

/* ---- CTA Banner ---- */
.org-cta-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:var(--gradient-card);
  border-radius:20px;
  padding:32px 40px;
  margin-bottom:0;
  color:var(--white);
  flex-wrap:wrap;
}
.org-cta-left{
  display:flex;
  align-items:center;
  gap:20px;
  flex:1;
  min-width:0;
}
.org-cta-title{
  font-size:16px;
  font-weight:700;
  line-height:1.5;
  margin-bottom:4px;
}
.org-cta-desc{
  font-size:13px;
  opacity:0.8;
  line-height:1.5;
}
.org-cta-btn{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--white);
  color:var(--blue-primary);
  border:none;
  border-radius:10px;
  padding:12px 24px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:opacity .2s ease, transform .2s ease;
  white-space:nowrap;
}
.org-cta-btn img{ filter:none; }
.org-cta-btn:hover{ opacity:0.9; transform:translateY(-1px); }

/* ---- Responsive ---- */
@media (max-width:768px){
  .org-grid{ grid-template-columns:repeat(2, 1fr); gap:16px; }
  .org-cta-banner{ padding:24px 20px; flex-direction:column; align-items:flex-start; }
  .org-cta-btn{ align-self:stretch; justify-content:center; }
}
@media (max-width:480px){
  .org-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   VIDEO SECTION — index.html
   ========================================================= */
.video-section{
  margin-top:20px;
  margin-bottom:20px;
}
.video-section-card{
}
.section-header-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}
.section-title{
  font-family:'Chelsea Basis', sans-serif;
  font-size:28px;
  font-weight:700;
  color:var(--title);
  margin-top:6px;
  line-height:1.2;
}
.video-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.video-card{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.video-thumb-link{
  display:block;
  text-decoration:none;
}
.video-embed{
  position:relative;
  width:100%;
  padding-bottom:56.25%; /* 16:9 */
  border-radius:14px;
  overflow:hidden;
  background:#0c1d44;
}
.video-embed img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.video-thumb-link:hover .video-embed img{ transform:scale(1.04); }
.video-play-btn{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
  transition:opacity .2s;
}
.video-play-btn svg{
  width:56px;
  height:40px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  transition:transform .2s ease;
}
.video-thumb-link:hover .video-play-btn svg{ transform:scale(1.1); }
.video-title{
  font-size:14px;
  font-weight:600;
  color:var(--title);
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@media (max-width:1024px){
  .video-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:480px){
  .video-grid{ grid-template-columns:1fr; }
  .section-title{ font-size:22px; }
}

/* =========================================================
   GALERI DETAIL PAGE — galeri-detail.html
   ========================================================= */
.galeri-detail-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:28px;
}
.galeri-detail-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--blue-primary);
  font-family:'Chelsea Basis', sans-serif;
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  transition:opacity .2s;
}
.galeri-detail-back:hover{ opacity:0.75; }
.galeri-detail-meta{
  display:flex;
  align-items:center;
  gap:10px;
}
.galeri-detail-count{
  color:var(--desc);
  font-size:13px;
  font-weight:500;
}

/* Photo masonry-style grid */
.galeri-photo-grid{
  columns:3;
  column-gap:14px;
}
.galeri-photo-item{
  display:block;
  break-inside:avoid;
  margin-bottom:14px;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
}
.galeri-photo-item img{
  width:100%;
  height:auto;
  display:block;
  transition:transform .35s ease;
}
.galeri-photo-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0);
  transition:background .25s ease;
  border-radius:12px;
}
.galeri-photo-item:hover img{ transform:scale(1.04); }
.galeri-photo-item:hover::after{ background:rgba(0,0,0,0.18); }

/* Lightbox */
.galeri-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,0.92);
  display:flex;
  align-items:center;
  justify-content:center;
}
.galeri-lightbox-img-wrap{
  max-width:88vw;
  max-height:88vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.galeri-lightbox-img-wrap img{
  max-width:100%;
  max-height:88vh;
  border-radius:10px;
  object-fit:contain;
  display:block;
}
.galeri-lightbox-close{
  position:fixed;
  top:20px; right:20px;
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  border:none;
  color:#fff;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
  z-index:1;
}
.galeri-lightbox-close:hover{ background:rgba(255,255,255,0.28); }
.galeri-lightbox-nav{
  position:fixed;
  top:50%; transform:translateY(-50%);
  width:48px; height:48px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  border:none;
  color:#fff;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
  z-index:1;
}
.galeri-lightbox-nav:hover{ background:rgba(255,255,255,0.28); }
.galeri-lightbox-prev{ left:20px; }
.galeri-lightbox-next{ right:20px; }
.galeri-lightbox-counter{
  position:fixed;
  bottom:24px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,0.7);
  font-size:13px;
  font-weight:500;
  letter-spacing:0.04em;
}

@media (max-width:768px){
  .galeri-photo-grid{ columns:2; }
  .galeri-lightbox-prev{ left:8px; }
  .galeri-lightbox-next{ right:8px; }
}
@media (max-width:480px){
  .galeri-photo-grid{ columns:1; }
}

@media (max-width:768px){
  .hero{ min-height:100svh; }
}