:root{
    --brand:#0b6b4a;        /* hijau utama – sesuaikan dengan logo */
    --brand-dark:#064a33;
    --gold:#d4a017;         /* aksen emas */
    --soft:#f4faf6;
    --ink:#1f2d27;
  }
  html{scroll-behavior:smooth}
  body{font-family:'Poppins',system-ui,sans-serif;color:var(--ink);padding-top:76px}
  section{scroll-margin-top:76px}
  .text-brand{color:var(--brand)!important}
  .text-gold{color:var(--gold)!important}
  .btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}
  .btn-brand:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
  .btn-gold{background:var(--gold);border-color:var(--gold);color:#1b1b1b;font-weight:600}
  .btn-gold:hover{background:#b98a10;border-color:#b98a10;color:#1b1b1b}
  .btn-outline-light:hover{color:var(--brand)}

  /* Topbar & navbar */
  .topbar{background:var(--brand-dark);color:#dfeee6;font-size:.82rem}
  .topbar a{color:#dfeee6;text-decoration:none}
  .navbar{transition:box-shadow .3s}
  .navbar.scrolled{box-shadow:0 4px 18px rgba(0,0,0,.1)}
  .navbar-brand img{height:44px;width:auto}
  .nav-link{font-weight:500;color:var(--ink)}
  .nav-link:hover,.nav-link.active{color:var(--brand)}

  /* Hero */
  .hero{
    position:relative;color:#fff;overflow:hidden;
    background:
      linear-gradient(135deg,rgba(6,74,51,.96),rgba(11,107,74,.88)),
      url('https://images.unsplash.com/photo-1519817650390-64a93db51149?auto=format&fit=crop&w=1600&q=60') center/cover;
    padding:5rem 0 6rem;
  }
  .hero::after{ /* pola dekoratif */
    content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;
    background-image:radial-gradient(#fff 1.5px,transparent 1.5px);background-size:26px 26px;
  }
  .hero .container{position:relative;z-index:1}
  .badge-year{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);font-weight:500;letter-spacing:.5px}
  .hero h1{font-weight:700;line-height:1.2}
  .arab{font-family:'Amiri',serif;font-size:1.6rem;color:var(--gold)}
  .hero-card{background:#fff;color:var(--ink);border-radius:1rem;box-shadow:0 20px 40px rgba(0,0,0,.25)}
  .countdown .box{background:var(--soft);border-radius:.75rem;padding:.6rem .2rem;text-align:center}
  .countdown .num{font-size:1.6rem;font-weight:700;color:var(--brand);line-height:1}
  .countdown small{font-size:.7rem;color:#6b7d74}

  /* Stats strip */
  .stats{margin-top:-3rem;position:relative;z-index:2}
  .stat{background:#fff;border-radius:1rem;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:1.25rem;text-align:center;height:100%}
  .stat i{font-size:1.8rem;color:var(--gold)}
  .stat h5{font-weight:700;margin:.4rem 0 0;color:var(--brand)}
  .stat p{margin:0;font-size:.85rem;color:#6b7d74}

  /* Section heading */
  .eyebrow{color:var(--gold);font-weight:600;letter-spacing:2px;font-size:.8rem;text-transform:uppercase}
  .sec-title{font-weight:700;color:var(--brand-dark)}
  .bg-soft{background:var(--soft)}

  /* Syarat — kartu MTs & MA berdampingan (tanpa tab), pola Arrisalah */
  .psb-req-card{
    background:#fff;border:1px solid #d8e5dd;border-radius:1.25rem;
    padding:1.75rem;height:100%;
    box-shadow:0 6px 20px rgba(0,0,0,.05);
    transition:border-color .25s,box-shadow .25s,transform .25s;
  }
  .psb-req-card:hover{border-color:#b8d4c4;box-shadow:0 12px 30px rgba(0,0,0,.08)}
  .psb-req-card .req-icon-wrap{
    width:48px;height:48px;min-width:48px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;
  }
  .psb-req-card .req-icon-mts{background:#e8f6ef;color:var(--brand);border:1px solid #c5e6d4}
  .psb-req-card .req-icon-ma{background:#fff6dc;color:#8a6500;border:1px solid #f0e0a8}
  .psb-req-card .req-title{font-weight:700;font-size:1.15rem;color:var(--ink)}
  .req-group-title{
    font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
    color:#6b7d74;margin-bottom:.85rem;display:flex;align-items:center;gap:.35rem;
  }
  .psb-req-list{list-style:none;padding:0;margin:0}
  .psb-req-list li{
    display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
    padding:.75rem 0;border-bottom:1px dashed #d8e5dd;
  }
  .psb-req-list li:last-child{border-bottom:0;padding-bottom:0}
  .req-item-content{display:flex;align-items:flex-start;gap:.85rem;flex:1;min-width:0}
  .psb-req-list .req-check{
    width:28px;height:28px;min-width:28px;border-radius:8px;
    display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;margin-top:1px;flex-shrink:0;
  }
  .psb-req-list .req-check-mts{background:#e8f6ef;color:var(--brand);border:1px solid #c5e6d4}
  .psb-req-list .req-check-ma{background:#fff6dc;color:#8a6500;border:1px solid #f0e0a8}
  .req-item-text{line-height:1.5;font-weight:500;color:#3d4f45;font-size:.9rem;flex:1}
  .req-status-badge{
    font-size:.68rem;font-weight:700;padding:.25rem .6rem;border-radius:6px;
    letter-spacing:.3px;white-space:nowrap;text-transform:uppercase;margin-top:2px;flex-shrink:0;
  }
  .badge-wajib{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca}
  .badge-opsional{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}
  @media (max-width:767.98px){
    .psb-req-card{padding:1.25rem 1.15rem;border-radius:16px}
    .psb-req-card .req-icon-wrap{width:42px;height:42px;min-width:42px;font-size:1.2rem}
    .psb-req-card .req-title{font-size:1.05rem}
    .req-item-text{font-size:.85rem}
    .req-status-badge{font-size:.65rem;padding:.2rem .5rem}
  }

  /* Timeline */
  .timeline{position:relative;max-width:820px;margin:auto}
  .timeline::before{content:"";position:absolute;left:28px;top:0;bottom:0;width:3px;background:linear-gradient(var(--brand),var(--gold))}
  .tl-item{position:relative;padding-left:84px;margin-bottom:1.75rem}
  .tl-num{position:absolute;left:0;top:0;width:58px;height:58px;border-radius:50%;background:var(--brand);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.3rem;border:5px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.15)}
  .tl-card{background:#fff;border-radius:1rem;padding:1.25rem 1.5rem;box-shadow:0 6px 20px rgba(0,0,0,.06)}
  .tl-date{display:inline-block;background:#fff6dc;color:#8a6500;font-size:.82rem;font-weight:600;padding:.2rem .75rem;border-radius:50rem}

  /* CTA */
  .cta{background:linear-gradient(135deg,var(--brand-dark),var(--brand));color:#fff;border-radius:1.5rem;padding:3rem 1.5rem}

  /* Lokasi */
  .info-row{display:flex;gap:1rem;margin-bottom:1.1rem}
  .info-row .ic{flex:0 0 46px;height:46px;border-radius:50%;background:var(--soft);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
  .map-wrap{border-radius:1rem;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.1);min-height:320px;height:100%}
  .map-wrap iframe{width:100%;height:100%;min-height:320px;border:0}

  /* FAQ */
  .accordion-button:not(.collapsed){background:var(--soft);color:var(--brand-dark)}
  .accordion-button:focus{box-shadow:none}

  /* Footer */
  footer{background:#04301f;color:#bfd3c8;font-size:.9rem}
  footer a{color:#bfd3c8;text-decoration:none}
  footer a:hover{color:var(--gold)}
  footer h6{color:#fff;font-weight:600}

  /* Floating */
  .wa-float{position:fixed;right:18px;bottom:18px;z-index:1030;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:1.8rem;box-shadow:0 6px 18px rgba(0,0,0,.3)}
  .wa-float:hover{color:#fff;transform:scale(1.07)}
  #toTop{position:fixed;right:24px;bottom:88px;z-index:1030;display:none;width:44px;height:44px;border-radius:50%}