/* ===============================
   INFO PAGE – GLOBAL
================================ */
.info-page{
  background:#ffffff;
  color:#1f2933;
  overflow-x:hidden;
}

/* Default section spacing */
.info-page section{
  padding:90px 0;
}

.info-container{
  width:90%;
  max-width:1200px;
  margin:auto;
}

/* ✅ FIX (Mobile): elak content terpotong bawah header/nav fixed
   - Tukar nilai ikut tinggi header mobile awak kalau perlu
   - Scoped pada .info-page sahaja (tak ganggu page lain)
*/
@media (max-width: 768px){
  :root{ --mobile-header-h: 76px; }
}

/* ===============================
   HERO / PAGE TITLE
================================ */
.info-hero{
  position:relative;
  height:420px;
  color:#fff;
  background-image:url('../images/beras2-scaled.jpeg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center 78%;
  display:flex;
  align-items:center;
}

.info-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.25);
}

.info-hero-inner{
  position:relative;
  z-index:2;
  width:90%;
  max-width:1200px;
  margin:auto;
}

.info-hero h1{
  font-size:52px;
  font-weight:800;
  margin-bottom:20px;
}

.info-breadcrumb{
  font-size:15px;
  color:#facc15;
}

.info-breadcrumb a{
  color:#a855f7;
  text-decoration:none;
}

.info-breadcrumb span{
  color:#facc15;
}

@media (max-width: 768px){
  .info-page section{ padding:70px 0; }
  .info-hero{ height:280px; }
  .info-hero h1{ font-size:34px; margin-bottom:12px; }
  .info-breadcrumb{ font-size:13px; }
}

/* ===============================
   WHAT IS INFAQ
================================ */
.info-what{
  padding-top:120px;
}

.info-what-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

/* container gambar */
.info-what-img{
  margin-top:-40px;
}

/* gambar */
.info-what-img img{
  width:100%;
  border-radius:18px;
  object-fit:cover;
}

/* content */
.info-what-content span{
  color:#059669;
  font-weight:600;
  text-transform:uppercase;
  font-size:14px;
}

.info-what-content h2{
  font-size:40px;
  margin:15px 0 20px;
  font-weight:800;
}

.info-what-content p{
  color:#6b7280;
  line-height:1.7;
  margin-bottom:30px;margin-top:20px;
}

.info-quote-row{
  display:flex;
  gap:40px;
  margin-bottom:30px;
}

.info-quote{
  display:flex;
  gap:12px;
  align-items:center;
  color:#374151;
  font-weight:600;
}

.info-quote i{
  color:#f59e0b;
  font-size:22px;
}

.info-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 30px;
  background:#f59e0b;
  color:#fff;
  font-weight:700;
  border-radius:10px;
  text-decoration:none;
}

@media (max-width: 768px){
  .info-what{ padding-top:70px; }
  .info-quote-row{ flex-direction:column; gap:14px; }
  .info-what-content h2{ font-size:30px; }
}

/* ===============================
   BENEFITS / UKHUWAH (PREMIUM)
================================ */
.benefit-section{
  padding:140px 20px 220px;
  text-align:center;
  background:#f9fafb;
  position:relative;
  overflow:hidden;
}

.benefit-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(#e5e7eb 1px, transparent 1px),
    linear-gradient(135deg, rgba(5,150,105,.05), rgba(5,150,105,0));
  background-size:14px 14px, cover;
  opacity:.5;
  z-index:0;
}

.benefit-section > *{
  position:relative;
  z-index:1;
}

.benefit-tag{
  color:#059669;
  font-weight:600;
  font-size:14px;
  letter-spacing:.5px;
  margin-bottom:18px;
}

.benefit-title{
  font-size:44px;
  font-weight:800;
  color:#1f2933;
  margin-bottom:24px;
}

.benefit-line{
  width:42px;
  height:3px;
  background:#f59e0b;
  margin:0 auto 40px;
}

.benefit-arabic{
  font-size:28px;
  line-height:2;
  max-width:880px;
  margin:0 auto 24px;
  color:#111827;
}

.benefit-translation{
  max-width:760px;
  margin:0 auto 14px;
  font-size:15px;
  line-height:1.8;
  color:#6b7280;
}

.benefit-source{
  font-size:14px;
  color:#9ca3af;
  font-style:italic;
  margin-bottom:20px;
}

@media (max-width: 768px){
  .benefit-section{ padding:100px 20px 180px; }
  .benefit-title{ font-size:32px; }
  .benefit-arabic{ font-size:24px; }
  .stats-wrap{ margin-top:-80px; }
}

/* ===============================
   STATS SECTION
================================ */
.stats-wrap{
  margin-top:-140px;
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  padding:0 20px;
}

.stats-card{
  width:100%;
  max-width:1100px;
  background:#ffffff;
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.06);
  display:grid;
  grid-template-columns:repeat(3, 1fr) 1.2fr;
  overflow:hidden;
}

/* EACH STAT */
.stat-item{
  padding:50px 30px;
  text-align:center;
}

.stat-item h3{
  font-size:48px;
  font-weight:800;
  color:#059669;
  margin-bottom:14px;
}

/* GARIS OREN */
.stat-line{
  display:block;
  width:34px;
  height:3px;
  background:#f59e0b;
  margin:0 auto 16px;
}

.stat-item p{
  color:#374151;
  font-weight:500;
}

/* CTA PANEL */
.stat-cta{
  background:#059669;
  padding:50px 40px;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.cta-line{
  width:36px;
  height:3px;
  background:#f59e0b;
  margin-bottom:22px;
}

.stat-cta h4{
  font-size:24px;
  font-weight:700;
  margin-bottom:18px;
  line-height:1.4;
}

.stat-cta a{
  color:#fff;
  font-weight:600;
  text-decoration:none;
}

@media (max-width: 900px){
  .stats-card{ grid-template-columns:1fr; }
  .stat-item{ padding:36px 20px; }
  .stat-cta{ text-align:center; }
  .cta-line{ margin:0 auto 18px; }
}

/* ===============================
   ORGANIZATION
================================ */
.info-org{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.info-org h2{
  font-size:42px;
  font-weight:800;
}

.info-org p{
  color:#6b7280;
  margin:20px 0;
}

.info-org img{
  width:100%;
  border-radius:50%;
}

@media (max-width: 768px){
  .info-org h2{ font-size:32px; }
  .info-org{ gap:28px; }
  .info-org img{ border-radius:22px; }
}

/* ===============================
   ISLAMIC LAW
================================ */
.info-law{
  text-align:center;
}

.info-law h2{
  font-size:42px;
  margin-bottom:60px;
}

.info-law-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:60px;
}

.info-law-item h3{
  font-size:22px;
  margin-bottom:15px;
}

.info-law-item p{
  color:#6b7280;
}

/* ===============================
   CHARITY SECTION (IMAGE + TEXT)
================================ */
.info-charity{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center;
  padding:120px 0;
}

/* IMAGE STACK */
.charity-images{
  position:relative;
  width:100%;
  max-width:460px;
  margin:auto;
}

.charity-images img{
  width:100%;
  height:520px;
  object-fit:cover;
  border-radius:24px;
  box-shadow:0 25px 60px rgba(0,0,0,.15);
}

/* BACK IMAGE */
.charity-images .img-back{
  position:absolute;
  top:-40px;
  left:-40px;
  width:85%;
  height:420px;
  z-index:0;
  opacity:.9;
}

/* MAIN IMAGE */
.charity-images .img-main{
  position:relative;
  z-index:2;
}

/* CONTENT */
.charity-content{
  max-width:520px;
}

/* TAG */
.charity-tag{
  display:inline-block;
  color:#059669;
  font-weight:600;
  margin-bottom:16px;
}

/* TITLE */
.charity-content h2{
  font-size:44px;
  font-weight:800;
  line-height:1.2;
  margin-bottom:20px;
  color:#1f2933;
}

/* LINE */
.charity-line{
  display:block;
  width:48px;
  height:3px;
  background:#f59e0b;
  margin-bottom:30px;
}

/* ARABIC */
.charity-content .arabic{
  font-size:28px;
  direction:rtl;
  line-height:1.9;
  margin-bottom:24px;
  font-family:"Amiri","Scheherazade",serif;
  color:#111827;
}

/* TRANSLATION */
.charity-content .translation{
  font-size:16px;
  line-height:1.7;
  color:#6b7280;
  margin-bottom:10px;
}

/* SOURCE */
.charity-content .source{
  font-size:15px;
  color:#9ca3af;
  font-style:italic;
}

@media (max-width: 992px){
  .info-charity{
    grid-template-columns:1fr;
    gap:60px;
    padding:80px 0;
  }

  .charity-images img{ height:380px; }

  .charity-images .img-back{
    top:-20px;
    left:-20px;
    height:300px;
  }

  .charity-content h2{ font-size:34px; }
  .charity-content .arabic{ font-size:24px; }
}

/* ===============================
   VIDEO
================================ */
.info-video{
  position:relative;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden; /* penting untuk blur */
}

/* BACKGROUND IMAGE (BLUR) */
.info-video::before{
  content:"";
  position:absolute;
  inset:-20px;
  background-image:url('../images/drAsmadi.jpg');
  background-size:cover;
  background-position:center;
  filter:blur(8px);
  transform:scale(1.1);
  z-index:0;
}

/* OVERLAY */
.info-video::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.55),
    rgba(0,0,0,.35)
  );
}

/* CONTENT */
.info-video h2{
  position:relative;
  z-index:2;
  color:#fff;
  font-size:42px;
  text-align:center;
}

@media (max-width: 768px){
  .info-video{ min-height:300px; }
  .info-video h2{ font-size:28px; padding:0 20px; }
}

/* ===============================
   TESTIMONIAL
================================ */
.info-testimonial{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.info-testimonial h2{ font-size:42px; }

.info-testimonial p{ color:#6b7280; }

.info-testimonial img{
  width:100%;
  border-radius:20px;
}

/* ===============================
   RESPONSIVE (GENERAL)
================================ */
@media (max-width: 992px){
  .info-what-grid,
  .info-org,
  .info-charity,
  .info-testimonial{
    grid-template-columns:1fr;
  }

  .info-law-grid{ grid-template-columns:1fr; }
  .info-stats{ grid-template-columns:1fr; }
}

/* ======================================================
   INFO - WHAT (2026 overlay) ✅ FINAL (fix besar + clipping)
====================================================== */
.info-what-img{
  position:relative;
  overflow:hidden;      /* elak tahun terkeluar */
  border-radius:18px;
}

/* ✅ penting: buang margin negatif bila mobile supaya tak naik langgar header */
@media (max-width: 768px){
  .info-what-img{ margin-top:0; }
}

/* YEAR overlay */
.info-what-year{
  position:absolute;
  left:16px;
  bottom:10px;

  font-weight:900;
  letter-spacing:-0.04em;
  line-height:1;        /* elak potong glyph */
  white-space:nowrap;

  /* auto scale ikut device */
  font-size:clamp(44px, 16vw, 180px);

  color:#0b7a5a;
  text-shadow:0 10px 30px rgba(0,0,0,.12);
  max-width:100%;
}

/* Mobile layout */
@media (max-width: 768px){
  .info-what-grid{
    gap:14px;
  }

  .info-what-img{
    min-height:220px;
  }

  .info-what-year{
    left:14px;
    bottom:8px;
    font-size:clamp(40px, 15vw, 110px);
  }
}

/* Extra small phone */
@media (max-width: 380px){
  .info-what-img{ min-height:200px; }
  .info-what-year{ font-size:clamp(38px, 14vw, 95px); }
}