: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}

    /* HERO */
    .hero{
      min-height:600px;
      position:relative;
      display:flex;align-items:center;
      overflow:hidden;
            background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), url('../img/page/banner-kakwan.png') no-repeat center center;
            background-size: cover
    }
    .hero::before{
      content:"";position:absolute;inset:auto auto 0 0;
      border-style:solid;border-width:0 70px 70px 0;border-color:transparent var(--red) transparent transparent;
      opacity:.95;
    }
    .hero::after{
      content:"";position:absolute;right:-20px;bottom:-20px;
      width:100px;height:100px;border-radius:50%;
      border:16px solid rgba(237,28,46,.9);
      transform:rotate(-25deg);
    }
    .hero-content{position:relative;z-index:2;padding:45px 0}
    .brand-lockup{display:flex;align-items:center;gap:13px;margin-bottom:14px}
    .brand-symbol{
      width:68px;height:54px;border-radius:0 0 4px 0;
      background:linear-gradient(90deg,var(--red) 0 17%,#08a4e8 17% 83%,var(--red) 83%);
      display:grid;place-items:center;color:#fff;font-size:2rem;font-weight:800;
    }
    .brand-symbol::after{content:"◯";font-size:2.4rem;color:#fff}
    .brand-title{
      font-size:clamp(2rem,4.3vw,3.65rem);
      line-height:.95;font-weight:800;color:var(--blue-deep);
      letter-spacing:-1.5px;
    }
    .hero-tag{
      font-size:1.25rem;font-weight:800;font-style:italic;color:var(--blue);
      border-bottom:2px solid var(--red);display:inline-block;padding-bottom:4px;
    }
    .hero-copy{max-width:430px;font-size:.95rem;line-height:1.65;color:#154b80}
    .btn-primary-custom{
      background:var(--blue);border:0;color:#fff;border-radius:30px;
      padding:12px 20px;font-size:.8rem;font-weight:800;
    }
    .btn-primary-custom:hover{background:var(--blue-dark);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}

    /* INTRO */
    .intro-img{
      min-height:285px;border-radius:15px;overflow:hidden;position:relative;
      background:
        #000000;
      box-shadow:0 10px 28px rgba(0,62,115,.13);
    }
    .video-overlay{
      position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.65));
      display:flex;align-items:center;justify-content:center;
    }
    .play{
      width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
      background:rgba(0,111,205,.9);color:#fff;font-size:1.65rem;
      box-shadow:0 5px 20px rgba(0,0,0,.2);
    }
    .video-caption{position:absolute;left:18px;bottom:15px;color:#fff}
    .video-caption strong{display:block;font-size:.9rem}
    .video-caption small{font-size:.7rem;opacity:.85}

    /* LEADERS */
    .leaders{background:linear-gradient(180deg,#edfaff,#dff4ff)}

    .leader-photo{
      height:160px;position:relative;
      background:
        radial-gradient(circle at 50% 30%,#f5d3bb 0 12%,transparent 12.5%),
        linear-gradient(135deg,#75d5ff,#057ed5);
    }
    .leader-photo::after{
      content:"";position:absolute;left:0;right:0;bottom:0;height:48%;
      background:linear-gradient(145deg,transparent 0 38%,rgba(237,28,46,.8) 39% 51%,transparent 52% 100%),
                 linear-gradient(180deg,transparent 0 30%,#087fcf 31%);
      opacity:.9;
    }

    
/* Pastikan column jadi flex supaya card boleh stretch */
.col {
  display: flex;
}

.leader-card {
  height: 100%;
  width: 100%;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 7px 18px rgba(0,67,124,.10);
  display: flex;          /* tambah */
  flex-direction: column; /* tambah */
}

/* Bahagian info ambil baki ruang supaya semua card sama tinggi */
.leader-info {
  background: var(--blue);
  color: #fff;
  padding: 12px 13px;
  flex: 1;                /* tambah - ini kunci utama */
  display: flex;          /* tambah */
  flex-direction: column; /* tambah */
}

/* Optional: teks panjang tak push layout */
.leader-role {
  font-size: .7rem;
  font-weight: 700;
  opacity: .95;
  word-break: break-word; /* tambah - elak overflow */
}

.leader-name {
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 2px 0;
  word-break: break-word; /* tambah */
}

.leader-desc {
  font-size: .6rem;
  opacity: .9;
}    

    /* VISI MISI */
    .vision-wrap{overflow:hidden}
    .vision{
      background:linear-gradient(135deg,#ed1c2e,#ef1428);
      color:#fff;position:relative;padding:42px 40px;min-height:285px;
      border-radius:0 25px 25px 0;
    }
    .vision::after{
      content:"";position:absolute;right:-38px;top:0;width:90px;height:100%;
      background:#fff;transform:skew(-7deg);
    }
    .vision h3,.mission h3{font-weight:800;font-size:1.55rem}
    .vision p{font-size:.78rem;line-height:1.6}
    .vision .quote{font-weight:700;font-style:italic}
    .mission{padding:42px 20px 42px 50px}
    .mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 35px}
    .mission-item{display:flex;gap:13px;align-items:flex-start}
    .num{
      min-width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;
      display:grid;place-items:center;font-weight:800;font-size:.9rem;
    }
    .mission-item p{font-size:.73rem;line-height:1.55;margin:0}

    /* GALLERY */
    .gallery-card{
      border:0;border-radius:12px;overflow:hidden;box-shadow:0 5px 18px rgba(0,60,120,.1);
      height:100%;background:#fff;
    }
    .gallery-img{
      height:125px;background:
        linear-gradient(135deg,rgba(0,126,211,.2),rgba(237,28,46,.2)),
        linear-gradient(135deg,#9bdcff,#d9efff);
      position:relative;
    }
    .gallery-img::before{
      content:"";position:absolute;inset:0;
      /*--background:linear-gradient(145deg,transparent 0 42%,rgba(237,28,46,.55) 43% 50%,transparent 51%),
                 linear-gradient(180deg,transparent 0 48%,rgba(0,74,139,.28) 49%);--*/
    }
    .gallery-date{position:absolute;left:8px;bottom:8px;background:var(--blue);color:#fff;border-radius:5px;padding:5px 8px;font-size:.6rem;font-weight:700}
    .gallery-body{padding:10px 11px 13px}
    .gallery-body h6{font-size:.68rem;line-height:1.45;font-weight:800;margin:0;color:#07508d}

    /* JOIN */
    .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}
    .form-control,.form-select{
      border:0;border-radius:7px;font-size:.72rem;padding:.75rem .85rem;
      box-shadow:0 2px 5px rgba(0,0,0,.08);
    }
    .btn-submit{
      background:var(--red);border:0;border-radius:25px;color:#fff;
      font-weight:800;font-size:.72rem;padding:11px 24px;
    }

    /* 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}
      .hero{min-height:530px;background:
        linear-gradient(90deg,rgba(255,255,255,.72),rgba(255,255,255,.72)),
        url('img/page/bann6.jpg') center/cover no-repeat,#cceeff}
      .hero-content{padding:55px 0}
      .vision{border-radius:0}
      .vision::after{display:none}
      .mission{padding:42px 25px}
    }
    @media(max-width:767.98px){
      .section-pad{padding:48px 0}
      .navbar-brand img{height:40px;max-width:245px}
      .hero{min-height:600px}
      .brand-symbol{width:54px;height:45px}
      .brand-title{font-size:2rem}
      .hero-tag{font-size:1rem}
      .hero-copy{font-size:.82rem}
      .section-heading{font-size:1.35rem}
      .intro-img{min-height:230px;margin-top:25px}
      .leader-photo{height:145px}
      .mission-grid{grid-template-columns:1fr;gap:15px}
      .mission{padding:35px 20px}
      .vision{padding:35px 25px}
      .gallery-img{height:150px}
      .join-title{font-size:1.7rem}
    }

    #bacaLanjut.collapsing {
      transition: height .35s ease;
    }
    #bacaLanjut p {
      animation: fadeSlide .4s ease;
    }
    @keyframes fadeSlide {
      from { opacity: 0; transform: translateY(-8px); }
      to   { opacity: 1; transform: translateY(0); }
    }    
    
/* MODAL BIODATA */
.biodata-modal .modal-content {
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,45,100,.25);
}
.biodata-modal .modal-header {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #fff;
  border: 0;
  padding: 18px 24px;
}
.biodata-modal .modal-header .btn-close {
  filter: brightness(0) invert(1);
  opacity: .9;
}
.biodata-modal .modal-title {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .5px;
}
.biodata-modal .modal-body {
  padding: 24px;
}
.biodata-photo {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--sky);
  box-shadow: 0 6px 18px rgba(0,67,124,.18);
}
.biodata-name {
  font-weight: 800;
  color: var(--blue-dark);
  font-size: 1.15rem;
  margin: 10px 0 2px;
}
.biodata-role {
  display: inline-block;
  background: var(--sky);
  color: var(--blue-dark);
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.biodata-label {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--blue);
  margin-bottom: 3px;
}
.biodata-value {
  font-size: .82rem;
  color: #2b4d70;
  line-height: 1.6;
  margin-bottom: 14px;
}
.biodata-divider {
  height: 3px;
  width: 50px;
  background: linear-gradient(90deg, var(--blue), var(--red));
  border-radius: 3px;
  margin: 6px 0 16px;
}

/* Klik pada kad */
.leader-card.clickable {
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.leader-card.clickable:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(0,67,124,.22);
}
.leader-card.clickable:hover .leader-info {
  background: var(--blue-dark);
}
.leader-info {
  transition: background .25s ease;
}

  /* Kad hierarki atas - gaya horizontal seperti dalam gambar */
  .leader-card-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    min-height: 190px;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
  }
  .leader-card-top:hover {
    transform: translateY(-3px);
  }

  /* Nombor bulat di penjuru kiri atas */
  .leader-card-top .card-number {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: #1a3a6b;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: 2;
    border: 2px solid #1a3a6b;
  }

  /* Gambar di kiri */
  .leader-card-top .card-img {
    flex: 0 0 110px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    padding: 10px;
  }
  .leader-card-top .card-img img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    /*--border-radius: 50%;--*/
    border: 3px solid #fff;
  }

  /* Teks di kanan */
  .leader-card-top .card-body-text {
    flex: 1;
    padding: 12px 16px;
    text-align: left;
  }
  .leader-card-top .card-body-text .jabatan {
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 4px;
  }
  .leader-card-top .card-body-text .nama {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.95;
    line-height: 1.3;
  }

  /* Warna latar ikut jawatan */
  .leader-card-top.penasihat {
    background: linear-gradient(135deg, #c0392b, #8e1c12);
  }
  .leader-card-top.pengerusi {
    background: linear-gradient(135deg, #1a3a6b, #0d2347);
  }
  .leader-card-top.timbalan {
    background: linear-gradient(135deg, #2471c4, #154a85);
  }