/*  ------------------------------------------  GLOBAL  ------------------------------------------ */
/*  ------------------------------------------  BROWSER  ------------------------------------------ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Playfair Display", serif;
}

body {
  background:#f5f5f5;
  color:#333;
  padding-top:70px;
}

/*  ------------------------------------------  NAVBAR  ------------------------------------------ */

.navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:70px;
  background:#2d6a4f;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
  z-index:1000;

  display:flex;
  justify-content:center;
  align-items:center;
}

.navbar .container{
  width:100%;
  max-width:1200px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{
    font-size:24px;
    font-weight:600;
    color:white;
    letter-spacing:1px;
    text-decoration:none;
}

.logo:hover{
    color:#d8892b;
}

.menu-toggle{
    display:none;
    font-size:30px;
    color:white;
    cursor:pointer;
    user-select:none;
}

.nav-links{
  display:flex;
  align-items:center;
  list-style:none;
  gap:30px;
}

.nav-links a{
  display: inline-block;
  text-decoration:none;
  color:white;
  font-size:16px;
  font-weight:500;
  transition:0.3s;
}

.nav-links a:hover{
  color:#a7f3d0;
}

.dropdown{
  position:relative;
}

.dropdown::after{
  content:"";
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  height:15px;
}

.dropdown-content{
  position:absolute;
  top:100%; 
  left:0;

  min-width:170px;
  background:white;
  border-radius:8px;
  box-shadow:0 10px 20px rgba(0,0,0,0.15);

  padding:8px 0;

  opacity:0;
  transform:translateY(10px);
  transition:0.25s;

  pointer-events:none;
  z-index:9999;
}

.dropdown-content a{
  display:block;
  padding:10px 15px;
  color:#333 !important;
}

.dropdown-content a:hover{
  background:#f1f1f1;
}

.dropdown:hover .dropdown-content{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.admin-menu{
  padding:6px 14px;
  border:1px solid white;
  border-radius:6px;
  transition:0.3s;
}

.admin-menu:hover{
  background:white;
  color:#2d6a4f !important;
}

/*  ------------------------------------------  TAMPILAN FRONTEND  ------------------------------------------ */
.hero {
  position: relative;
  height: calc(100vh - 80px);
  background:
    linear-gradient(rgba(13, 27, 42, 0.6),
    rgba(13, 27, 42, 0.6)),
    url("../upload/M1.jpg") center no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.hero-text {
  margin-top: -250px;
}

.hero-text h1 {
  font-size: 42px;
  line-height: 1.2;
}

.hero-text span {
  color: #ee9f27;
}

.hero-text p {
  margin-top: 10px;
  font-size: 18px;
  color: #e0e0e0;
}

.jadwal-section {
  position: absolute;
  top: 84%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 10;
}

.jadwal-box {
  width: 80%;
  background: white;
  padding: 35px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  text-align: center;
}

.jadwal-box h1 {
  color: #d8892b;
  margin-bottom: 20px;
  font-size: 32px;
}

.jadwal-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.jadwal-item {
  flex: 1;
  margin: 10px;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #9dffa5;
  transition: 0.3s;
  cursor: pointer;
}

.jadwal-item p {
  font-size: 22px;
  color: #555;
  margin-bottom: 8px;
}

.jadwal-item h2 {
  font-size: 18px;
  color: #d8892b;
}

.jadwal-item:hover {
  background: linear-gradient(135deg, #d8892b, #f3b25a);
  transform: translateY(-5px);
}

.jadwal-item:hover p,
.jadwal-item:hover h2 {
  color: white;
}

/*  ------------------------------------------  GLOBAL CONTENT  ------------------------------------------ */

.section{
  padding:60px 10% 100px;
  background:#f5f5f5;
}

.title{
  font-size:28px;
  text-align:center;
  color:#1b4332;
  margin-bottom:40px;
  font-weight:600;
  display:block;
}

/*  ------------------------------------------  HALAMAN SEJARAH  ------------------------------------------ */

.sejarah {
  background: #f4f6f7;
}

.container-sejarah {
  max-width: 1200px;
  margin: auto;
}

.sejarah-content {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}

.sejarah-gambar img {
  width: 100%;
  max-width: 500px;
  height: 60vh;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  transition: 0.4s;
}

.sejarah-gambar img:hover {
  transform: scale(1.03);
}

.sejarah-teks {
  flex: 1;
}

.sejarah-teks p {
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 18px;
  color: #444;
  text-align: justify;
}

/*  ------------------------------------------  HALAMAN VISI & MISI  ------------------------------------------ */

.hero-visi{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  min-height:100vh;
  flex-direction:column;
}

.container-visi{
  max-width:900px;
  margin:auto;
}

.card{
  background-color:#e6f2ea;
  padding:30px;
  margin-bottom:30px;
  border-left:8px solid #006400;
  border-radius:10px;
  box-shadow:0 6px 15px rgba(0,0,0,0.1);
  text-align:left;
}

/*  ------------------------------------------  HALAMAN PENGURUS  ------------------------------------------ */

.pengurus-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:35px;
}

.pengurus-section{
  text-align:center;
}

.subjudul{
  text-align:center;
  margin-top:-25px;
  margin-bottom:40px;
  color:#555;
  font-size:16px;
}

.pengurus-card{
  background:white;
  border-radius:18px;
  padding:20px;
  text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  transition:0.3s;
}

.pengurus-card:hover{
  transform:translateY(-5px);
}

.pengurus-card img{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:50%;
  margin-bottom:15px;
  border:4px solid #2d6a4f;
}

.pengurus-card h3{
  font-size:18px;
  margin-bottom:5px;
}

.pengurus-card p{
  font-size:14px;
  color:#777;
}

/*  ------------------------------------------  HALAMAN KONTAK  ------------------------------------------ */

.kontak-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
}

.kontak-card{
  background:#ffffff;
  padding:50px;
  border-radius:20px;
  width:100%;
  max-width:700px;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
}

.kontak-card h2{
  text-align:center;
  margin-bottom:35px;
  color:#d8892b; /* ORANGE */
  font-size:32px;
  font-weight:600;
}

.item{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
  font-size:18px;
}

.item i{
  font-size:20px;
  color:#d8892b; /* ORANGE */
  width:30px;
}

.item span,
.item a{
  color:#1b4332;
  text-decoration:none;
  font-size:17px;
}

.item a:hover{
  color:#d8892b;
}

/*  ------------------------------------------  HALAMAN PROGRAM  ------------------------------------------ */

.grid-auto{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:30px;
  margin-top:50px;
}

.program-card{
  background:white;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  transition:0.3s;
}

.program-card:hover{
  transform:translateY(-5px);
}

.program-card img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}

.program-card h3{
  padding:20px 20px 10px;
  color:#1b4332;
  font-size:20px;
}

.program-card p{
  padding:0 20px 20px;
  color:#555;
  line-height:1.7;
  font-size:15px;
}

/*  ------------------------------------------  HALAMAN GALERI  ------------------------------------------ */

.galeri-container{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:30px;
  margin-top:50px;
}

.galeri-item{
  background:white;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:0.3s;
}

.galeri-item:hover{
  transform:translateY(-5px);
}

.galeri-item img{
  width:100%;
  height:250px;
  object-fit:cover;
  display:block;
}

.galeri-info{
  padding:20px;
}

.galeri-info h3{
  color:#1b4332;
  margin-bottom:10px;
  font-size:22px;
}

/* DESKRIPSI */
.galeri-info p{
  color:#555;
  line-height:1.7;
  font-size:15px;
}

/*  ------------------------------------------  HALAMAN DONASI  ------------------------------------------ */

.donasi-wrapper{
  display:flex;
  gap:40px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-top:50px;
}

.donasi-kiri,
.donasi-kanan{
  flex:1;
  min-width:320px;
  background:white;
  padding:35px;
  border-radius:20px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.donasi-kiri h2,
.donasi-kanan h2{
  color:#1b4332;
  margin-bottom:20px;
  font-size:30px;
}

.bank-box{
  background:#f8f8f8;
  padding:20px;
  border-radius:12px;
  margin-bottom:20px;
}

.bank-box p{
  margin-bottom:10px;
  color:#444;
  font-size:16px;
}

.bank-box i,
.info-text i{
  font-size:20px;
  color:#d8892b;
  width:30px;
}

.info-text{
  margin-top:20px;
  color:#666;
  line-height:1.7;
}

.donasi-form{
  margin-top:25px;
}

.donasi-form input,
.donasi-form select,
.donasi-form textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid #ddd;
  border-radius:10px;
  margin-bottom:18px;
  font-size:15px;
  outline:none;
  transition:0.3s;
}

.donasi-form input:focus,
.donasi-form select:focus,
.donasi-form textarea:focus{
  border-color:#2d6a4f;
  box-shadow:0 0 0 3px rgba(45,106,79,0.15);
}

.donasi-form textarea{
  min-height:120px;
  resize:none;
}

.donasi-form button{
  width:100%;
  padding:15px;
  border:none;
  border-radius:10px;
  background:#2d6a4f;
  color:white;
  font-size:16px;
  cursor:pointer;
  transition:0.3s;
}

.donasi-form button:hover{
  background:#1b4332;
}

.alert-success{
  background:#d4edda;
  color:#155724;
  padding:15px;
  border-radius:10px;
  margin-bottom:20px;
}

.input-rupiah{
  position:relative;
}

.prefix{
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  color:#666;
}

.input-rupiah input{
  padding-left:45px !important;
}

/*  ------------------------------------------  HALAMAN LAPORAN DONASI  ------------------------------------------ */
.btn{
  display:inline-block;
  padding:10px 20px;
  background:#2d6a4f;
  color:white;
  border-radius:6px;
  text-decoration:none;
  transition:0.3s;
}

.btn:hover{
  background:#d8892b;
}

.laporan-title{
  margin-bottom:50px;
}

.laporan-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;
  flex-wrap:wrap;
  margin-bottom:40px;
}

.filter-box{
  background:white;
  padding:25px;
  border-radius:18px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.filter-box form{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.filter-box select{
  padding:12px 15px;
  border:1px solid #ddd;
  border-radius:10px;
  min-width:180px;
}

.filter-box button{
  background:#2d6a4f;
  color:white;
  border:none;
  padding:12px 20px;
  border-radius:10px;
  cursor:pointer;
}

.btn-reset{
  background:#d8892b;
  color:white;
  text-decoration:none;
  padding:12px 20px;
  border-radius:10px;
}

.summary-box{
  background:white;
  padding:25px 35px;
  border-radius:18px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  text-align:center;
}

.summary-box h3{
  color:#1b4332;
  margin-bottom:10px;
}

.summary-box .jumlah{
  font-size:28px;
  font-weight:bold;
  color:#2d6a4f;
}

.table-box{
  overflow-x:auto;
  background:white;
  border-radius:18px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.table-box table{
  width:100%;
  border-collapse:collapse;
  min-width:900px;
}

.table-box th{
  background:#2d6a4f;
  color:white;
  padding:16px;
  text-align:center;
}

.table-box td{
  padding:15px;
  border-bottom:1px solid #eee;
  text-align:center;
}

.kiri{
  text-align:left !important;
}

.table-box tr:hover{
  background:#f8f8f8;
}

.status-menunggu,
.status-diterima,
.status-ditolak{
  padding:8px 14px;
  border-radius:30px;
  font-size:13px;
  font-weight:600;
  display:inline-block;
}

.status-menunggu{
  background:#fff3cd;
  color:#856404;
}

.status-diterima{
  background:#d4edda;
  color:#155724;
}

.status-ditolak{
  background:#f8d7da;
  color:#721c24;
}

/*  ------------------------------------------  FOOTER  ------------------------------------------ */

.footer-info{
    background:#1b4332;
    color:white;
    padding:100px 10%;
    margin-top:0;
}

.footer-grid{
    display:grid;
    grid-template-columns:4fr 1fr 1fr 1fr;
    gap:60px;
}

.footer-col h2,
.footer-col h3{
    margin-bottom:25px;
}

.footer-col p{
    color:#ddd;
    line-height:1.9;
    margin-bottom:15px;
}

.footer-col a{
    display:block;
    color:#ddd;
    text-decoration:none;
    margin-bottom:18px;
}

.footer-col a:hover{
    color:#d8892b;
}

.sosial{
    display:flex;
    gap:18px;
    margin-top:30px;
}

/*  ------------------------------------------  PENGATURAN UNTUK TAMPILAN LAYAR  ------------------------------------------ */

@media (max-width:768px){

  /*  -------------  SECTION -------------  */
  .section{
    padding:40px 5% 70px;
  }

  /*  ------------- HERO  ------------- */

  .hero{
      min-height:100vh;
      height:auto;
      padding:20px;
  }

  .hero-text{
      margin-top:-180px;
      position:relative;
      z-index:20;
  }

  .hero-text h1{
      font-size:26px;
      line-height:1.3;
  }

  .hero-text p{
      margin-top:15px;
      margin-bottom:70px;
      font-size:14px;
  }

/* JADWAL MOBILE */
  .hero{
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      padding:40px 20px;
      min-height:auto;
  }

  .hero-text{
      margin-top:0;
      text-align:center;
      margin-bottom:25px;
  }

  .jadwal-section{
      position:static;
      transform:none;
      width:100%;
      display:flex;
      justify-content:center;
      margin-top:0;
  }

  .jadwal-box{
      width:100%;
      max-width:320px;
      padding:20px;
  }

  .jadwal-list{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:10px;
  }

  .jadwal-item{
      margin:0;
      padding:15px 10px;
  }

  .jadwal-item:last-child{
      grid-column:1 / span 2;
      width:48%;
      margin:auto;
  }


  /* ------------- NAVBAR MOBILE ------------- */

  .menu-toggle{
    display:block;
  }

  .navbar .container{
    padding:0 15px;
  }

.logo{
    font-size:13px;
    max-width:none;
    white-space:nowrap;
    line-height:1;
}

  .nav-links{
    position:absolute;
    top:70px;
    left:0;

    width:100%;
    background:#2d6a4f;

    flex-direction:column;
    align-items:flex-start;

    gap:0;

    max-height:0;
    overflow:hidden;

    transition:0.3s ease;
  }

  .nav-links.active{
    max-height:800px;
  }

  .nav-links li{
    width:100%;
  }

  .nav-links a{
    display:block;
    width:100%;
    padding:15px 20px;
    border-top:1px solid rgba(255,255,255,.1);
  }

  .dropdown-content{
    position:static;
    opacity:1;
    transform:none;
    pointer-events:auto;

    display:none;

    background:#24543f;
    box-shadow:none;
    border-radius:0;
  }

  .dropdown:hover .dropdown-content{
    display:block;
  }

  .dropdown-content a{
    color:white !important;
    padding-left:40px;
  }

.admin-area{
    width:100%;
}

.admin-menu{
    display:block;
    width:100%;
    padding:15px 20px !important;

    border:none;
    border-radius:0;

    text-align:left;
    background:transparent;
    color:white;
}

.admin-menu:hover{
    color:#a7f3d0 !important;
    background:transparent;
}
    /*  -------------  TITLE -------------  */
    .title{
      font-size:24px;
    }

    /*  ------------- SEJARAH ------------- */

  .sejarah-content{
      gap:20px;
  }

  .sejarah-gambar img{
      max-width:100%;
      height:250px;
      object-fit:cover;
  }

  .sejarah-teks p{
      font-size:15px;
      line-height:1.8;
  }


  /*  ------------- VISI MISI ------------- */

  .container-visi{
      width:100%;
  }

  .card{
      padding:20px;
  }

  .card h2{
      font-size:18px;
  }

  .card p,
  .card li{
      font-size:15px;
      line-height:1.7;
  }

  /* PENGURUS MOBILE */

  .pengurus-card{
      padding:20px;
  }

  .pengurus-card img{
      width:120px;
      height:120px;
  }

  .pengurus-card h3{
      font-size:17px;
  }

  .pengurus-card p{
      font-size:14px;
  }

    /*  ------------- PROGRAM MOBILE  ------------- */

  .program-card img{
      height:180px;
  }

  .program-card h3{
      font-size:20px;
  }

  .program-card p{
      font-size:14px;
      line-height:1.6;
  }

    /*  ------------- GALERI MOBILE ------------- */

  .galeri-item img{
      height:200px;
  }

  .galeri-info h3{
      font-size:20px;
  }

  .galeri-info p{
      font-size:14px;
      line-height:1.6;
  }

  /*  -------------  DONASI -------------  */
  .donasi-wrapper{
    flex-direction:column;
  }

  .donasi-kiri,
  .donasi-kanan{
    min-width:100%;
    padding:25px;
  }

   .table-box{
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
  }

  .table-box::before{
      content:"Geser tabel ke kiri/kanan →";
      display:block;
      padding:10px;
      font-size:13px;
      color:#666;
  }

  .laporan-top{
      flex-direction:column;
  }

   .laporan-title{
        margin-bottom:25px;
  }

  .filter-box{
      width:100%;
      padding:20px;
  }

  .filter-box form{
      flex-direction:column;
  }

  .filter-box select,
  .filter-box button,
  .btn-reset{
      width:100%;
      text-align:center;
  }

  .summary{
      width:100%;
  }

  .summary-box{
      width:100%;
      padding:20px;
  }

  /*  -------------  GALERI -------------  */
  .galeri-container{
    grid-template-columns:1fr;
  }

  /*  -------------  PROGRAM -------------  */
  .grid-auto{
    grid-template-columns:1fr;
  }

  /*  -------------  PENGURUS -------------  */
  .pengurus-grid{
    grid-template-columns:1fr;
  }

  /*  -------------  KONTAK -------------  */
  .kontak-card{
    padding:30px;
  }

  .item{
    font-size:16px;
  }

  .item span,
  .item a{
    font-size:15px;
  }

   /*  ------------- FOOTER MOBILE ------------- */

  /* FOOTER MOBILE */
.footer-info{
    padding:50px 20px;
}

.footer-grid{
    grid-template-columns:1fr;
    gap:35px;
}

.footer-col:first-child{
    width:100%;
}

.footer-col h2{
    font-size:22px;
    line-height:1.4;
    white-space:normal;
}

.footer-col h3{
    font-size:22px;
    margin-bottom:15px;
}

.footer-col p{
    font-size:16px;
    line-height:1.8;
}

.sosial{
    margin-top:20px;
}

}