:root{
      --pdi-red:#da1622;
      --pdi-dark:#0b0b0b;
      --pdi-muted:#f7f7f7;
    }
    body{ background:#fafafa; }
    /* ===== PRELOADER ===== */
    #preloader{
      position:fixed; inset:0;
      background:radial-gradient(ellipse at top, #2b0000 0%, #140000 60%, #0b0000 100%);
      display:flex; align-items:center; justify-content:center;
      z-index:9999; transition:opacity .4s ease, visibility .4s ease;
    }
    #preloader .inner{ text-align:center; color:#fff; }
    .pre-logo{ width:200px;  border-radius:50%;
      display:inline-grid; place-items:center;
      margin-bottom:14px;
    }
    .pre-logo svg{ width:42px; height:42px; }
    .pre-text{ font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
    .spinner{ width:46px; height:46px; border:4px solid rgba(255,255,255,.25);
      border-top-color:#fff; border-radius:50%; margin:10px auto 0; animation: spin 1s linear infinite;
    }
    @keyframes spin{ to{ transform:rotate(360deg); } }
    body.preloading{ overflow:hidden; }
    #preloader.hidden{ opacity:0; visibility:hidden; }


    /* ===== NAVBAR PDIP STYLE ===== */
    .navbar-pdi{ background:transparent; position:fixed; top:0; left:0; right:0; z-index:1030; transition:background .3s ease, box-shadow .3s ease; padding-top:20px}
    .navbar-pdi.scrolled{ background:var(--pdi-red,#b50000); box-shadow:0 2px 6px rgba(0,0,0,.25); }
    .navbar-pdi .navbar-brand strong, .navbar-pdi .navbar-brand small{ color:#fff; }
    .navbar-pdi .nav-link{ color:#fff; text-transform:uppercase; font-weight:600; position:relative; margin:0 .25rem; }
    .navbar-pdi .nav-link:hover{ color:#fff; opacity:.9; }
    .navbar-pdi .nav-link::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
    .navbar-pdi .nav-link:hover::after{ transform:scaleX(1); }
    .navbar-pdi .nav-link.active{ color:#fff; }
    .navbar-pdi .nav-link.active::after{ transform:scaleX(1); }
    .navbar-pdi .navbar-toggler{ border-color: rgba(255,255,255,.25); }
    .navbar-pdi .navbar-toggler-icon{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

    .btn-pdi{ background:var(--pdi-red); color:#fff; border:none; }
    .btn-pdi:hover{ background:#b90f19; color:#fff; }
    .text-pdi{ color:var(--pdi-red)!important; }
    .bg-pdi{ background:var(--pdi-red)!important; }
    .navbar-brand{padding-top:0px;padding-bottom:0px}

    /* ===== HERO SLIDESHOW FULL (KEEP RATIO) ===== */
    .hero{ position:relative; color:#fff; min-height:100vh; display:flex; align-items:center; overflow:hidden; }
    .hero-bg{ position:absolute; inset:0; z-index:0; }
    .hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0; transform:scale(1); transition: opacity .9s linear; }
    .hero-slide.active{ opacity:1; animation: kenburns 12s ease-in-out forwards; }
    .hero .overlay{ position:absolute; inset:0; background: linear-gradient(120deg, rgba(0,0,0,.55), rgba(0,0,0,.35)); z-index:1; }
    .hero .overlay-bottom{ position:absolute; left:0; right:0; bottom:0; height:40%; background:linear-gradient(to bottom, transparent, #fafafa); z-index:2; }
    .hero .container{ position:relative; z-index:3; }
    @keyframes kenburns {
    0% { transform: scale(1); }
    100% { transform: scale(1.12); }
    }
    .hero .lead{ max-width: 56ch; }

    /* ===== TICKER ===== */
    .ticker{ background:var(--pdi-dark); color:#fff; overflow:hidden; white-space:nowrap; padding-bottom: 20px}
    .ticker small{ opacity:.8; }
    .ticker-track { display:inline-block; padding-left:100%; animation: ticker 20s linear infinite; }
    @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

    /* ===== TICKER ===== */
    .ticker{ background:var(--pdi-dark); color:#fff; overflow:hidden; white-space:nowrap; }
    .ticker small{ opacity:.8; }
    .ticker-track { display:inline-block; padding-left:100%; animation: ticker 20s linear infinite; }
    @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

    .card-berita img{ object-fit:cover; height:190px; }
    .gallery img{ object-fit:cover; height:180px; border-radius:.75rem; }
    .shadow-soft{ box-shadow:0 10px 30px rgba(0,0,0,.08); }
    .section-title{ position:relative; padding-bottom:.5rem; margin-bottom:1rem; }
    .section-title::after{ content:""; position:absolute; left:0; bottom:0; width:72px; height:3px; background:var(--pdi-red); border-radius:3px; }
    .whatsapp-float{ position:fixed; right:18px; bottom:18px; z-index:1040; }
    .back-to-top{ position:fixed; right:24px; bottom:86px; display:none; z-index:1040; }
    .footer{ background:#0b0b0b; color:#ddd; }
    .footer a{ color:#fff; text-decoration:none; }
    .badge-kategori{ background:#eef2ff; color:#222; border:1px solid #e5e7eb; }
    .list-agenda .badge{ min-width:84px; }

    @media (max-width: 576px){
      .card-berita img{ height:160px; }
      .gallery img{ height:120px; }
      .ketua{width: 100%}
    }
      /* ===== PENGURUS (carousel scroll) ===== */
    #pengurus{ position: relative; }
    .pengurus-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:.75rem; }
    .pengurus-rail{ position:relative; }
    .pengurus-track{ display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; }
    .pengurus-track::-webkit-scrollbar{ height:8px; }
    .pengurus-track::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:999px; }
    .pengurus-card{ flex:0 0 220px; scroll-snap-align:start; background:#fff; border-radius:1rem; box-shadow:0 10px 30px rgba(0,0,0,.08); border:1px solid #eee; }
    .pengurus-card .top{ padding:1.25rem 1.25rem .75rem; text-align:center; }
    .pengurus-card .photo{ width:110px; height:110px; object-fit:cover; border-radius:999px; border:4px solid #fff; box-shadow:0 0 0 4px var(--pdi-red), 0 10px 20px rgba(0,0,0,.08); }
    .pengurus-card .nm{ font-weight:700; margin-top:.75rem; }
    .pengurus-card .jb{ display:inline-block; font-size:.85rem; padding:.25rem .6rem; border-radius:999px; background:#0b0b0b; color:#fff; }
    .pengurus-card .meta{ padding: .75rem 1.25rem 1.25rem; border-top:1px dashed #eee; }
    .edge-fade{ position:absolute; inset:0; pointer-events:none; }
    .edge-fade::before, .edge-fade::after{ content:""; position:absolute; top:0; bottom:12px; width:60px; }
    .edge-fade::before{ left:-1px; background:linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
    .edge-fade::after{ right:-1px; background:linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
    .pengurus-nav{ display:flex; gap:.5rem; }
    .pengurus-btn{ width:40px; height:40px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.06); }
    .pengurus-btn:hover{ background:#f8f8f8; }
    .pengurus-card img {
      width: 120px;       /* atau 100% biar responsif */
      height: 120px;      /* bikin ukuran konsisten */
      object-fit: cover;  /* crop biar gak gepeng */
      border-radius: 50%; /* bikin bulat */
      border: 3px solid #fff; /* opsional: border putih */
      box-shadow: 0 2px 6px rgba(0,0,0,.2); /* opsional: efek */
    }
    /* Skeleton shimmer */
    .skel {
      position: relative;
      overflow: hidden;
      background: #eee;
      border-radius: .375rem;
    }
    .skel.shine::after{
      content:"";
      position:absolute; inset:0;
      transform: translateX(-100%);
      background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
      animation: shine 1.2s infinite;
    }
    @keyframes shine {
      100% { transform: translateX(100%); }
    }

    /* Skeleton layout helpers */
    .skel-img   { height: 180px; }
    .skel-line  { height: 12px; margin-top:8px; }
    .skel-line.lg { height: 16px; }
    .skel-pill  { height: 22px; width: 90px; border-radius: 999px; }
    .skel-date  { height: 22px; width: 120px; border-radius: 999px; }
    /* Efek hover untuk kartu berita */
    .card-berita, 
    #berita .card {
      transition: transform .25s ease, box-shadow .25s ease;
      overflow: hidden;
    }
    .card-berita:hover, 
    #berita .card:hover {
      transform: translateY(-6px);
      box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,0.15);
    }

    /* Gambar zoom saat hover */
    .card-berita img, 
    #berita .card img {
      transition: transform .4s ease;
    }
    .card-berita:hover img, 
    #berita .card:hover img {
      transform: scale(1.08);
    }

    /* Tambahin overlay gradient halus */
    .card-berita .card-img-top, 
    #berita .card .card-img-top {
      position: relative;
    }
    .card-berita .card-img-top::after, 
    #berita .card .card-img-top::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,.3), rgba(0,0,0,0));
      opacity: 0;
      transition: opacity .3s ease;
    }
    .card-berita:hover .card-img-top::after, 
    #berita .card:hover .card-img-top::after {
      opacity: 1;
    }
:root{
  --pdip:#c40010;
  --shadow-sm: 0 6px 18px rgba(0,0,0,.08);
  --shadow-lg: 0 14px 34px rgba(0,0,0,.16);
}

/* Base look */
.card-news{
  border-radius:.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  will-change: transform, box-shadow;
  border:1px solid rgba(0,0,0,.04);
}

/* Image zoom */
.card-news .ratio img{
  transition: transform .35s ease, filter .35s ease;
  will-change: transform;
}

/* Title link */
.card-news .card-body h2 a{
  transition: color .2s ease, text-underline-offset .2s ease;
  text-underline-offset: 3px;
}

/* Hover effects */
.card-news:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(196,0,16,.18);
}
.card-news:hover .ratio img{
  transform: scale(1.04);
  filter: saturate(1.05);
}
.card-news:hover .card-body h2 a{
  color: var(--pdip);
  text-decoration: underline;
}

/* Active/pressed */
.card-news:active{
  transform: translateY(-1px) scale(.998);
}

/* Keyboard focus on image link */
.card-news a:focus-visible{
  outline: 3px solid rgba(196,0,16,.35);
  outline-offset: 3px;
  border-radius:.5rem;
}

/* Optional subtle overlay gloss on hover */
.card-news .ratio{
  position:relative;
  overflow:hidden;
  border-top-left-radius:.75rem;
  border-top-right-radius:.75rem;
}
.card-news .ratio::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.22), transparent 60%);
  opacity:0; transition: opacity .25s ease;
}
.card-news:hover .ratio::after{ opacity:.9 }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .card-news, .card-news .ratio img{ transition:none !important; }
}