/* ===================================
   PONDOK PESANTREN — Green & White
   Redesign: Gradient sections, no emoji
   =================================== */
:root {
  --green-dark:   #1a5c2e;
  --green-main:   #217a3e;
  --green-medium: #2d9e52;
  --green-light:  #e6f4eb;
  --green-pale:   #f2f9f4;
  --white:        #ffffff;
  --gray-100:     #f7f8f9;
  --gray-200:     #e4e6ea;
  --gray-500:     #6b7280;
  --gray-800:     #1f2937;
  --shadow-sm:    0 1px 4px rgba(0,0,0,.08), 0 2px 12px rgba(26,92,46,.06);
  --shadow-md:    0 4px 24px rgba(26,92,46,.14);
  --shadow-lg:    0 8px 40px rgba(26,92,46,.18);
  --radius:       14px;
  --radius-sm:    8px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Segoe UI',system-ui,-apple-system,sans-serif; color:var(--gray-800); background:var(--white); line-height:1.65; }
a { color:var(--green-main); text-decoration:none; transition:color .2s; }
a:hover { color:var(--green-dark); }
img { max-width:100%; display:block; }

/* ── NAVBAR ── */
.navbar {
  background:var(--white);
  border-bottom:1px solid rgba(26,92,46,.08);
  box-shadow:0 2px 16px rgba(26,92,46,.08);
  position:sticky; top:0; z-index:999;
}
.navbar-inner {
  max-width:1200px; margin:auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between; height:68px;
}
.navbar-brand {
  display:flex; align-items:center; gap:14px;
  font-size:1.15rem; font-weight:800; color:var(--green-dark);
}
.navbar-brand img { width:42px; height:42px; border-radius:50%; object-fit:cover; border:2px solid var(--green-light); }
.navbar-menu { display:flex; gap:4px; list-style:none; }
.navbar-menu a {
  padding:8px 18px; border-radius:7px;
  font-weight:500; font-size:.92rem; color:var(--gray-800);
  transition:.18s;
}
.navbar-menu a:hover { background:var(--green-light); color:var(--green-dark); }
.navbar-menu a.active {
  background:var(--green-main); color:var(--white);
}

/* ── HERO ── */
.hero {
  background:linear-gradient(145deg, var(--green-dark) 0%, #1e7a3a 45%, var(--green-medium) 100%);
  color:var(--white); padding:110px 24px 120px; text-align:center;
  position:relative; overflow:hidden;
}
.hero::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255,255,255,.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(255,255,255,.04) 0%, transparent 50%);
}
.hero::after {
  content:'';
  position:absolute; bottom:-1px; left:0; right:0; height:70px;
  background:var(--white);
  clip-path:ellipse(55% 100% at 50% 100%);
}
.hero-content { position:relative; z-index:1; max-width:720px; margin:auto; }
.hero h1 { font-size:clamp(2rem,5vw,3.2rem); font-weight:800; margin-bottom:16px; letter-spacing:-.01em; }
.hero p { font-size:1.1rem; opacity:.88; margin-bottom:36px; max-width:580px; margin-left:auto; margin-right:auto; }

/* ── BUTTONS ── */
.btn {
  display:inline-block; padding:12px 30px; border-radius:8px;
  font-weight:700; cursor:pointer; border:2px solid transparent;
  transition:.2s; font-size:.95rem; letter-spacing:.01em;
}
.btn-white { background:var(--white); color:var(--green-dark); border-color:var(--white); }
.btn-white:hover { background:var(--green-light); transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.15); }
.btn-green { background:var(--green-main); color:var(--white); border-color:var(--green-main); }
.btn-green:hover { background:var(--green-dark); border-color:var(--green-dark); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-outline { background:transparent; border-color:var(--green-main); color:var(--green-main); }
.btn-outline:hover { background:var(--green-light); }

/* ── SECTIONS ── */
.section { padding:80px 24px; position:relative; }
.section-alt {
  background:linear-gradient(180deg, var(--green-pale) 0%, #eaf6ee 100%);
}
.section-wave {
  position:relative;
  background:linear-gradient(160deg, var(--green-dark) 0%, var(--green-main) 100%);
  color:var(--white); padding:80px 24px;
}
.section-wave::before {
  content:''; position:absolute; top:-1px; left:0; right:0; height:60px;
  background:var(--white); clip-path:ellipse(55% 100% at 50% 0%);
}
.section-wave::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0; height:60px;
  background:var(--white); clip-path:ellipse(55% 100% at 50% 100%);
}

/* Section gradient borders */
.section-border-top { border-top:3px solid; border-image:linear-gradient(90deg,transparent,var(--green-main),transparent) 1; }
.section-border-bottom { border-bottom:3px solid; border-image:linear-gradient(90deg,transparent,var(--green-main),transparent) 1; }

.container { max-width:1200px; margin:auto; }
.section-title { text-align:center; margin-bottom:52px; }
.section-title h2 { font-size:2rem; color:var(--green-dark); font-weight:800; letter-spacing:-.01em; }
.section-title p { color:var(--gray-500); margin-top:10px; font-size:1rem; }
.divider {
  width:56px; height:4px; margin:14px auto 0;
  background:linear-gradient(90deg, var(--green-main), var(--green-medium));
  border-radius:2px;
}

/* ── CARDS ── */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; }
.card {
  background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:.22s; border:1px solid rgba(26,92,46,.06);
}
.card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); border-color:rgba(26,92,46,.14); }
.card-img { width:100%; height:200px; object-fit:cover; }
.card-body { padding:22px; }
.card-body h3 { font-size:1.05rem; color:var(--green-dark); margin-bottom:8px; font-weight:700; }
.card-body p { color:var(--gray-500); font-size:.88rem; line-height:1.55; }

/* ── STATS ── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:20px; text-align:center; }
.stat-box {
  padding:36px 16px; background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  border-bottom:4px solid;
  border-image:linear-gradient(90deg, var(--green-main), var(--green-medium)) 1;
  transition:.2s;
}
.stat-box:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.stat-box .num { font-size:2.6rem; font-weight:900; color:var(--green-main); line-height:1; }
.stat-box .lbl { color:var(--gray-500); font-size:.88rem; margin-top:8px; font-weight:500; }

/* ── FORM (public) ── */
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-weight:600; margin-bottom:6px; font-size:.9rem; color:var(--gray-800); }
.form-control {
  width:100%; padding:11px 14px; border:1.5px solid var(--gray-200);
  border-radius:var(--radius-sm); font-size:.94rem; background:var(--white);
  transition:.18s; font-family:inherit;
}
.form-control:focus { outline:none; border-color:var(--green-main); box-shadow:0 0 0 3px rgba(33,122,62,.1); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.required::after { content:' *'; color:#dc2626; }

/* ── ALERT ── */
.alert { padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:16px; font-size:.9rem; }
.alert-success { background:#dcfce7; color:#14532d; border-left:4px solid #16a34a; }
.alert-error   { background:#fef2f2; color:#991b1b; border-left:4px solid #dc2626; }
.alert-info    { background:#eff6ff; color:#1e40af; border-left:4px solid #3b82f6; }
.alert-warning { background:#fffbeb; color:#92400e; border-left:4px solid #f59e0b; }

/* ── BADGE ── */
.badge { display:inline-block; padding:3px 12px; border-radius:20px; font-size:.75rem; font-weight:700; }
.badge-pending  { background:#fef3c7; color:#92400e; }
.badge-diterima { background:#dcfce7; color:#14532d; }
.badge-ditolak  { background:#fef2f2; color:#991b1b; }
.badge-buka     { background:#dcfce7; color:#14532d; }
.badge-tutup    { background:#f3f4f6; color:#6b7280; }

/* ── FOOTER ── */
.footer {
  background:linear-gradient(160deg, var(--green-dark) 0%, #143d22 100%);
  color:rgba(255,255,255,.82); padding:56px 24px 28px;
  position:relative;
}
.footer::before {
  content:''; position:absolute; top:-1px; left:0; right:0; height:50px;
  background:var(--white); clip-path:ellipse(55% 100% at 50% 0%);
}
.footer-inner { position:relative; }
.footer-grid {
  max-width:1200px; margin:auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:32px; margin-bottom:36px;
}
.footer h4 { color:var(--white); font-size:.95rem; margin-bottom:14px; font-weight:700; }
.footer p, .footer a { font-size:.88rem; color:rgba(255,255,255,.72); line-height:2; }
.footer a:hover { color:var(--white); }
.footer-bottom {
  max-width:1200px; margin:0 auto;
  padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  text-align:center; font-size:.82rem; color:rgba(255,255,255,.45);
}

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .navbar-inner { padding:0 16px; }
  .navbar-menu { display:none; }
  .hero { padding:80px 16px 90px; }
  .section { padding:56px 16px; }
  .form-row { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
}