:root{

      --blue:#087fd6;

      --blue-dark:#003b78;

      --blue-deep:#002d66;

      --sky:#eaf8ff;

      --red:#ed1c2e;

      --text:#073d76;

      --muted:#5e7893;

      --radius:14px;

    }

    *{box-sizing:border-box}

    html{scroll-behavior:smooth}

    body{

      margin:0;

      font-family:'Poppins',Arial,sans-serif;

      color:var(--text);

      background:#fff;

      overflow-x:hidden;

    }

    a{text-decoration:none}

    .section-pad{padding:68px 0}

    .container-wide{max-width:1180px}



    /* NAVBAR */

    .main-nav{

      background:#fff;

      box-shadow:0 2px 15px rgba(0,44,100,.08);

      position:sticky;top:0;z-index:1000;

    }

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

    .nav-link{

      color:#073d76!important;

      font-size:.78rem;

      font-weight:700;

      padding:.95rem .8rem!important;

      position:relative;

    }

    .nav-link.active::after{

      content:"";position:absolute;left:50%;bottom:2px;

      width:34px;height:4px;border-radius:8px;background:var(--blue);

      transform:translateX(-50%);

    }

    .btn-join{

      background:var(--red);color:#fff;border:0;border-radius:30px;

      padding:11px 22px;font-size:.78rem;font-weight:800;

    }

    .btn-join:hover{background:#c90f21;color:#fff}



    /* PAGE HEADER */

    .page-header{

            background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), url('img/page/banner-p-kakwan.png') no-repeat center center;

            background-size: cover

      color:#fff;

      padding:72px 0 62px;

      position:relative;

      overflow:hidden;

    }

    .page-header::after{

      content:"";position:absolute;right:-60px;bottom:-55px;

      width:200px;height:90px;border-top:18px solid var(--red);

      transform:rotate(-22deg);

    }

    .page-header h1{

      font-size:2.4rem;font-weight:800;line-height:1.1;margin:0;

    }

    .page-header p{

      font-size:.85rem;opacity:.92;max-width:520px;margin:12px 0 0;

    }

    .breadcrumb-vet{

      font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;

      color:rgba(255,255,255,.8);margin-bottom:10px;

    }

    .breadcrumb-vet a{color:rgba(255,255,255,.8)}

    .breadcrumb-vet a:hover{color:#fff}



    /* TITLES */

    .section-heading{

      font-size:1.75rem;font-weight:800;color:var(--blue-dark);

      margin:0 0 8px;line-height:1.1;

    }

    .section-heading::before{

      content:"";display:inline-block;width:9px;height:29px;

      margin-right:11px;vertical-align:-5px;

      background:linear-gradient(var(--blue),var(--red));

      transform:skew(-12deg);border-radius:2px;

    }

    .section-sub{font-size:.85rem;color:#3c6790}



    /* FILTER BUTTONS */

    .filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}

    .filter-btn{

      border:1.5px solid #cfe5f7;background:#fff;color:#07508d;

      font-size:.7rem;font-weight:700;padding:8px 18px;border-radius:30px;

      transition:all .2s ease;

    }

    .filter-btn:hover{border-color:var(--blue);color:var(--blue)}

    .filter-btn.active{background:var(--blue);border-color:var(--blue);color:#fff}



    /* ACTIVITY CARD */

    .activity-card{

      border:0;border-radius:12px;overflow:hidden;background:#fff;

      box-shadow:0 6px 20px rgba(0,60,120,.1);

      height:100%;display:flex;flex-direction:column;

      transition:transform .25s ease, box-shadow .25s ease;

    }

    .activity-card:hover{

      transform:translateY(-5px);

      box-shadow:0 14px 32px rgba(0,60,120,.18);

    }

    .activity-thumb{

      position:relative;height:185px;overflow:hidden;

      background:linear-gradient(135deg,#9bdcff,#d9efff);

    }

    .activity-thumb img{

      width:100%;height:100%;object-fit:cover;display:block;

      transition:transform .4s ease;

    }

    .activity-card:hover .activity-thumb img{transform:scale(1.06)}

    .activity-thumb .thumb-fallback{

      position:absolute;inset:0;

      background:

        linear-gradient(145deg,transparent 0 42%,rgba(237,28,46,.5) 43% 50%,transparent 51%),

        linear-gradient(180deg,transparent 0 48%,rgba(0,74,139,.25) 49%),

        linear-gradient(135deg,#9bdcff,#d9efff);

    }

    .badge-kategori{

      position:absolute;left:12px;top:12px;z-index:2;

      background:var(--red);color:#fff;font-size:.6rem;font-weight:800;

      padding:5px 11px;border-radius:20px;letter-spacing:.4px;

      text-transform:uppercase;

    }

    .activity-date{

      position:absolute;left:12px;bottom:12px;z-index:2;

      background:rgba(0,45,100,.88);color:#fff;border-radius:6px;

      padding:6px 10px;font-size:.62rem;font-weight:700;

      display:flex;align-items:center;gap:6px;

    }

    .activity-body{

      padding:16px 16px 18px;display:flex;flex-direction:column;flex:1;

    }

    .activity-body h5{

      font-size:.88rem;font-weight:800;line-height:1.4;

      color:#07508d;margin:0 0 8px;

    }

    .activity-body p{

      font-size:.72rem;line-height:1.6;color:var(--muted);

      margin:0 0 14px;flex:1;

    }

    .activity-meta{

      display:flex;align-items:center;justify-content:space-between;

      border-top:1px solid #eaf2f9;padding-top:12px;

    }

    .activity-meta .lokasi{

      font-size:.66rem;font-weight:700;color:#3c6790;

      display:flex;align-items:center;gap:5px;

    }

    .activity-meta .lokasi i{color:var(--red)}

    .btn-baca{

      font-size:.66rem;font-weight:800;color:var(--blue);

      display:inline-flex;align-items:center;gap:5px;

    }

    .btn-baca:hover{color:var(--red)}



    /* VIDEO FEATURE */

    .video-feature{

      border-radius:15px;overflow:hidden;

      box-shadow:0 12px 30px rgba(0,62,115,.16);

      background:#002d66;

    }

    .video-feature video{width:100%;display:block;background:#000}

    .video-feature-info{

      background:linear-gradient(135deg,var(--blue-deep),var(--blue));

      color:#fff;padding:20px 22px;

    }

    .video-feature-info h5{

      font-size:1rem;font-weight:800;margin:0 0 6px;

    }

    .video-feature-info p{

      font-size:.72rem;opacity:.9;margin:0;

    }



    /* STATS STRIP */

    .stats-strip{

      background:linear-gradient(180deg,#edfaff,#dff4ff);

      padding:52px 0;

    }

    .stat-box{

      background:#fff;border-radius:12px;padding:22px 18px;text-align:center;

      box-shadow:0 6px 18px rgba(0,67,124,.09);height:100%;

    }

    .stat-box .angka{

      font-size:1.9rem;font-weight:800;color:var(--blue);

      line-height:1;margin-bottom:6px;

    }

    .stat-box .label{

      font-size:.7rem;font-weight:700;color:#3c6790;line-height:1.4;

    }



    /* CTA */

    .join-section{

      position:relative;overflow:hidden;

      background:

        linear-gradient(90deg,rgba(0,126,211,.10),rgba(8,151,225,.88)),

        url('../img/page/sertai.png') center/cover no-repeat;

      color:#fff;

    }

    .join-section::after{

      content:"";position:absolute;right:-80px;bottom:-65px;width:240px;height:110px;

      border-top:18px solid var(--red);transform:rotate(-22deg);

    }

    .join-content{position:relative;z-index:2}

    .join-title{font-size:2rem;font-weight:800}

    .join-copy{font-size:.8rem;line-height:1.65;max-width:340px}

    .btn-submit{

      background:var(--red);border:0;border-radius:25px;color:#fff;

      font-weight:800;font-size:.72rem;padding:11px 24px;

    }

    .btn-submit:hover{background:#c90f21;color:#fff}



    /* FOOTER */

    footer{background:var(--blue-deep);color:#fff}

    .footer-logo{height:50px}

    footer h6{font-size:.75rem;font-weight:800}

    footer a,footer p{color:#d7e9fa;font-size:.66rem;line-height:1.9}

    .social a{

      display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;

      color:#fff;background:rgba(255,255,255,.12);margin-right:4px;font-size:.8rem;

    }

    .footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:15px;margin-top:20px}



    /* MOBILE */

    @media(max-width:991.98px){

      .navbar-collapse{padding:12px 0}

      .nav-link{padding:.55rem .2rem!important}

      .nav-link.active::after{display:none}

      .page-header{min-height:200px;background:

        linear-gradient(90deg,rgba(255,255,255,.72),rgba(255,255,255,.72)),

        url('img/page/banner-s-kakwan.png') center/cover no-repeat,#cceeff}	  

      .page-header{padding:56px 0 48px}

      .page-header h1{font-size:1.9rem}

    }

    @media(max-width:767.98px){

      .section-pad{padding:48px 0}

      .navbar-brand img{height:40px;max-width:245px}

      .section-heading{font-size:1.35rem}

      .page-header h1{font-size:1.6rem}

      .activity-thumb{height:170px}

      .join-title{font-size:1.7rem}

      .stat-box .angka{font-size:1.6rem}

    }

	

	/* =========================================

	   ACTIVITY PAGINATION

	========================================= */



	.activity-pagination-wrap {

	  display: flex;

	  flex-direction: column;

	  align-items: center;

	  gap: 12px;

	}



	.activity-info {

	  font-size: .68rem;

	  color: var(--muted);

	  font-weight: 600;

	}



	#activityPagination {

	  gap: 5px;

	}



	#activityPagination .page-item .page-link {

	  border: 1px solid #d6e8f6;

	  color: var(--blue);

	  background: #fff;

	  border-radius: 8px !important;

	  min-width: 38px;

	  height: 38px;

	  padding: 8px 12px;

	  font-size: .7rem;

	  font-weight: 700;

	  text-align: center;

	  box-shadow: none;

	  transition: all .2s ease;

	}



	#activityPagination .page-item .page-link:hover {

	  background: #edf8ff;

	  border-color: var(--blue);

	  color: var(--blue-dark);

	}



	#activityPagination .page-item.active .page-link {

	  background: var(--blue);

	  border-color: var(--blue);

	  color: #fff;

	}



	#activityPagination .page-item.disabled .page-link {

	  background: #f5f8fa;

	  border-color: #e5edf3;

	  color: #9aabba;

	  cursor: not-allowed;

	}



	@media(max-width:767.98px) {

	  #activityPagination {

		gap: 3px;

	  }



	  #activityPagination .page-item .page-link {

		min-width: 34px;

		height: 34px;

		padding: 7px 9px;

		font-size: .65rem;

	  }



	  .activity-info {

		font-size: .62rem;

	  }

	}	

		

    .video-modal {

      display: none;

      position: fixed;

      inset: 0;

      z-index: 9999;

      align-items: center;

      justify-content: center;

    }

    .video-modal.active {

      display: flex;

    }

    .video-modal-overlay {

      position: absolute;

      inset: 0;

      background: rgba(0, 0, 0, 0.85);

      backdrop-filter: blur(4px);

    }

    .video-modal-content {

      position: relative;

      width: 90%;

      max-width: 900px;

      background: #000;

      border-radius: 12px;

      overflow: hidden;

      box-shadow: 0 20px 60px rgba(0,0,0,.5);

      animation: zoomIn .3s ease;

    }

    @keyframes zoomIn {

      from { transform: scale(.85); opacity: 0; }

      to   { transform: scale(1);   opacity: 1; }

    }

    .video-modal-close {

      position: absolute;

      top: -45px;

      right: 0;

      background: transparent;

      border: none;

      color: #fff;

      font-size: 36px;

      line-height: 1;

      cursor: pointer;

      z-index: 2;

    }

    

    /* Thumbnail boleh diklik */

    .activity-thumb img {

      cursor: zoom-in;

      transition: transform .4s ease, filter .4s ease;

    }

    .activity-thumb img:hover {

      transform: scale(1.05);

      filter: brightness(1.05);

    }

    

    /* Modal */

    .img-modal {

      display: none;

      position: fixed;

      inset: 0;

      z-index: 9999;

      align-items: center;

      justify-content: center;

    }

    .img-modal.active {

      display: flex;

    }

    .img-modal-overlay {

      position: absolute;

      inset: 0;

      background: rgba(0, 0, 0, 0.9);

      backdrop-filter: blur(4px);

    }

    .img-modal-content {

      position: relative;

      max-width: 90vw;

      max-height: 88vh;

      text-align: center;

      animation: zoomIn .3s ease;

    }

    .img-modal-content img {

      max-width: 100%;

      max-height: 85vh;

      border-radius: 10px;

      box-shadow: 0 25px 70px rgba(0,0,0,.6);

      display: block;

    }

    .img-modal-close {

      position: absolute;

      top: -50px;

      right: 0;

      background: transparent;

      border: none;

      color: #fff;

      font-size: 40px;

      line-height: 1;

      cursor: pointer;

      transition: transform .2s;

    }

    .img-modal-close:hover {

      transform: scale(1.15) rotate(90deg);

    }

    .img-modal-caption {

      color: #fff;

      margin-top: 12px;

      font-size: .95rem;

      opacity: .85;

    }

    @keyframes zoomIn {

      from { transform: scale(.85); opacity: 0; }

      to   { transform: scale(1);   opacity: 1; }

    }