:root {
      --yellow: #f5a623;
      --yellow-dk: #e09415;
      --yellow-lt: #fef6e4;
      --yellow-mid: #fde9b0;
      --navy: #1a1a2e;
      --navy-lt: #2d2d4e;
      --gray-700: #374151;
      --gray-500: #6b7280;
      --gray-300: #d1d5db;
      --gray-100: #f3f4f6;
      --gray-50: #f9fafb;
      --white: #ffffff;
      --shadow: 0 4px 16px rgba(0,0,0,.08);
      --shadow-lg: 0 12px 40px rgba(0,0,0,.12);
      --radius: 8px;
      --radius-lg: 14px;
      --radius-xl: 20px;
    }
/* SECTION HEADING */
    .sec-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--yellow-dk); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
    .sec-tag::before { content: ''; display: block; width: 20px; height: 3px; background: var(--yellow); border-radius: 2px; }
    .sec-title { font-size: clamp(22px, 3vw, 34px); font-weight: 800; color: var(--navy); letter-spacing: -.025em; line-height: 1.2; }

        /* PILLARS */
    .pillars { padding: 80px 0; background: var(--gray-50); }
    .pillars-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
    .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .pillar-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-xl); overflow: hidden; transition: all .3s; }
    .pillar-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: rgba(245,166,35,.4); }
    .pillar-img { aspect-ratio: 16/9; overflow: hidden; background: var(--gray-100); }
    .pillar-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
    .pillar-card:hover .pillar-img img { transform: scale(1.06); }
    .pillar-body { padding: 24px; }
    .pillar-icon-wrap { width: 40px; height: 40px; background: var(--yellow-lt); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--yellow-dk); font-size: 17px; margin-bottom: 14px; transition: background .25s, color .25s; }
    .pillar-card:hover .pillar-icon-wrap { background: var(--yellow); color: var(--navy); }
    .pillar-title { font-size: 16px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
    .pillar-desc { font-size: 13.5px; color: var(--gray-500); line-height: 1.65; }

  
  /* NEWS */
    .news-section { padding: 80px 0; background: var(--white); }
    .news-layout { display: grid; grid-template-columns: 1fr 380px; gap: 48px; margin-top: 40px; }
    .news-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 2px solid var(--yellow); }
    .news-col-head h3 { font-size: 18px; font-weight: 800; color: var(--navy); }
    .news-col-head a { font-size: 12.5px; font-weight: 600; color: var(--yellow-dk); display: flex; align-items: center; gap: 5px; }
    .news-card { display: grid; grid-template-columns: 180px 1fr; gap: 0; border: 1px solid var(--gray-100); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; transition: box-shadow .2s, border-color .2s; }
    .news-card:hover { box-shadow: var(--shadow); border-color: rgba(245,166,35,.4); }
    .news-card-img { overflow: hidden; background: var(--gray-100); }
    .news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
    .news-card:hover .news-card-img img { transform: scale(1.04); }
    .news-card-body { padding: 18px; display: flex; flex-direction: column; justify-content: center; }
    .news-meta { font-size: 11.5px; color: var(--gray-500); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
    .news-meta i { color: var(--yellow-dk); }
    .news-title { font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.45; transition: color .2s; }
    .news-card:hover .news-title { color: var(--yellow-dk); }

    /* ANNOUNCEMENTS */
    .ann-list { display: flex; flex-direction: column; }
    .ann-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--gray-100); transition: all .2s; }
    .ann-item:first-child { padding-top: 0; }
    .ann-item:hover .ann-title { color: var(--yellow-dk); }
    .ann-date { flex-shrink: 0; width: 50px; text-align: center; background: var(--yellow-lt); border: 1px solid var(--yellow-mid); border-radius: var(--radius); padding: 7px 4px; }
    .ann-date .d { font-size: 22px; font-weight: 800; color: var(--yellow-dk); line-height: 1; }
    .ann-date .m { font-size: 9.5px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em; margin-top: 1px; }
    .ann-title { font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.5; transition: color .2s; }
    .ann-badge { display: inline-block; background: var(--yellow-lt); color: var(--yellow-dk); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 100px; margin-top: 5px; }

/* ═══════════ SLIDER SECTION ═══════════ */
        .slider-section {
          padding: 90px 0 80px;
          background: #f4f5f9;
          position: relative;
          overflow: hidden;
        }
        .slider-section::after {
          content: "";
          position: absolute;
          bottom: -100px;
          left: -100px;
          width: 400px;
          height: 400px;
          border-radius: 50%;
          background: radial-gradient(
            circle,
            rgba(245, 165, 0, 0.06) 0%,
            transparent 70%
          );
          pointer-events: none;
        }

        /* Header */
        .slider-header {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          margin-bottom: 40px;
          flex-wrap: wrap;
          gap: 12px;
        }
        .slider-header-left .sec-tag {
          margin-bottom: 10px;
        }
        .slider-header-left h2 {
          font-size: clamp(1.4rem, 3vw, 2rem);
          font-weight: 800;
          color: #1a1a2e;
          margin: 0;
        }
        .slider-header-left h2 span {
          color: #f5a500;
        }
        .slider-header-right a {
          font-size: 13px;
          font-weight: 600;
          color: #f5a500;
          text-decoration: none;
          display: flex;
          align-items: center;
          gap: 6px;
        }
        .slider-header-right a:hover {
          color: #c98a00;
        }

        /* ── SLIDER WRAP ── */
        .imgslider-wrap {
          position: relative;
          border-radius: 20px;
          overflow: hidden;
          box-shadow: 0 20px 60px rgba(26, 26, 46, 0.18);
          background: #1a1a2e;
          user-select: none;
        }

        /* Track */
        .imgslider-track {
          display: flex;
          transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
          will-change: transform;
        }

        /* Slide */
        .imgslider-slide {
          flex: 0 0 100%;
          position: relative;
          height: 520px;
          overflow: hidden;
        }
        .imgslider-slide img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          object-position: center top;
          display: block;
          transition: transform 8s ease;
        }
        .imgslider-slide.active img {
          transform: scale(1.05);
        }

        /* Overlay gradient */
        .imgslider-overlay {
          position: absolute;
          inset: 0;
          background: linear-gradient(
            to top,
            rgba(26, 26, 46, 0.92) 0%,
            rgba(26, 26, 46, 0.45) 40%,
            rgba(26, 26, 46, 0.1) 70%,
            transparent 100%
          );
          z-index: 1;
        }

        /* Caption */
        .imgslider-caption {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: 2;
          padding: 40px 48px 44px;
        }
        .imgslider-badge {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font-size: 11px;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 0.8px;
          padding: 5px 14px;
          border-radius: 20px;
          margin-bottom: 14px;
        }
        .badge-emas {
          background: #f5a500;
          color: #1a1a2e;
        }
        .badge-perak {
          background: #c0c0c0;
          color: #1a1a2e;
        }
        .badge-finalis {
          background: #1565c0;
          color: #fff;
        }
        .badge-harapan {
          background: #6a1b9a;
          color: #fff;
        }
        .badge-juara {
          background: #2e7d32;
          color: #fff;
        }
        .badge-prestasi {
          background: rgba(245, 165, 0, 0.2);
          color: #f5a500;
          border: 1px solid rgba(245, 165, 0, 0.35);
        }

        .imgslider-title {
          font-size: clamp(1.2rem, 2.8vw, 1.8rem);
          font-weight: 800;
          color: #fff;
          line-height: 1.3;
          margin-bottom: 10px;
        }
        .imgslider-meta {
          display: flex;
          flex-wrap: wrap;
          gap: 16px;
          margin-bottom: 0;
        }
        .imgslider-meta-item {
          display: flex;
          align-items: center;
          gap: 7px;
          font-size: 13.5px;
          color: #ccd;
        }
        .imgslider-meta-item i {
          color: #f5a500;
          font-size: 12px;
        }

        /* ── PREV / NEXT ── */
        .imgslider-prev,
        .imgslider-next {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          z-index: 3;
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.12);
          border: 1.5px solid rgba(255, 255, 255, 0.2);
          color: #fff;
          font-size: 16px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s;
          backdrop-filter: blur(6px);
        }
        .imgslider-prev {
          left: 20px;
        }
        .imgslider-next {
          right: 20px;
        }
        .imgslider-prev:hover,
        .imgslider-next:hover {
          background: #f5a500;
          border-color: #f5a500;
          color: #1a1a2e;
        }

        /* ── DOTS ── */
        .imgslider-dots {
          position: absolute;
          bottom: 20px;
          right: 48px;
          z-index: 3;
          display: flex;
          gap: 8px;
          align-items: center;
        }
        .imgslider-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.35);
          border: none;
          cursor: pointer;
          transition: all 0.25s;
          padding: 0;
        }
        .imgslider-dot.active {
          background: #f5a500;
          width: 22px;
          border-radius: 4px;
        }

        /* ── COUNTER ── */
        .imgslider-counter {
          position: absolute;
          top: 20px;
          right: 20px;
          z-index: 3;
          background: rgba(26, 26, 46, 0.6);
          backdrop-filter: blur(6px);
          border: 1px solid rgba(255, 255, 255, 0.12);
          color: #fff;
          font-size: 13px;
          font-weight: 700;
          padding: 6px 14px;
          border-radius: 20px;
        }
        .imgslider-counter .current {
          color: #f5a500;
        }

        /* ── THUMBNAILS ── */
        .imgslider-thumbs {
          display: flex;
          gap: 10px;
          margin-top: 16px;
        }
        .imgslider-thumb {
          flex: 1;
          height: 72px;
          border-radius: 10px;
          overflow: hidden;
          cursor: pointer;
          border: 2.5px solid transparent;
          transition: all 0.2s;
          opacity: 0.55;
        }
        .imgslider-thumb.active {
          border-color: #f5a500;
          opacity: 1;
        }
        .imgslider-thumb:hover {
          opacity: 0.85;
        }
        .imgslider-thumb img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          object-position: top;
          display: block;
          pointer-events: none;
        }

        /* ── PROGRESS BAR ── */
        .imgslider-progress {
          position: absolute;
          bottom: 0;
          left: 0;
          height: 3px;
          background: #f5a500;
          z-index: 4;
          width: 0%;
          transition: width linear;
        }

        /* Responsive */
        @media (max-width: 768px) {
          .imgslider-slide {
            height: 380px;
          }
          .imgslider-caption {
            padding: 24px 24px 28px;
          }
          .imgslider-dots {
            bottom: 14px;
            right: 24px;
          }
          .imgslider-counter {
            top: 14px;
            right: 14px;
          }
          .imgslider-thumbs {
            display: none;
          }
        }
        @media (max-width: 480px) {
          .imgslider-slide {
            height: 300px;
          }
          .imgslider-prev,
          .imgslider-next {
            width: 38px;
            height: 38px;
            font-size: 13px;
          }
        }