/* =========================================================
   CMS SEKOLAHKU — ISLAMIC SCHOOL THEME V1.0
   Theme layer only. Does not replace core application logic.
   ========================================================= */
:root {
  --islamic-green: #0b6b4b;
  --islamic-green-dark: #064a36;
  --islamic-green-deep: #032d22;
  --islamic-green-soft: #e9f7f0;
  --islamic-gold: #c9a227;
  --islamic-gold-soft: #f7efcf;
  --islamic-cream: #fbfaf4;
  --islamic-ink: #17342b;
  --islamic-pattern: rgba(201,162,39,.09);
}

html { background: var(--islamic-cream); }
body {
  background:
    radial-gradient(circle at 15% 10%, rgba(201,162,39,.05), transparent 28%),
    radial-gradient(circle at 85% 24%, rgba(11,107,75,.045), transparent 24%),
    var(--bg);
}

/* Islamic gold-green palette */
.text-gradient {
  background: linear-gradient(135deg, var(--islamic-gold), #ead58a 48%, #fff1b2 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.header-top {
  background: linear-gradient(90deg, var(--islamic-green-deep), var(--islamic-green-dark));
  border-bottom: 1px solid rgba(201,162,39,.35);
}
.header-top-left i,
.header-top-right a:hover { color: #e8cf79; }

.header {
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(11,107,75,.12);
}
.logo { color: var(--islamic-green-dark); }
.logo i { color: var(--islamic-gold); }
.nav a::after {
  background: linear-gradient(90deg, var(--islamic-green), var(--islamic-gold));
}
.nav a:hover,
.nav a.active { color: var(--islamic-green); }
.nav-spmb {
  background: linear-gradient(135deg, var(--islamic-green), var(--islamic-green-dark)) !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(11,107,75,.18);
}

/* Header ayah ribbon */
.header::after {
  content:'۞  وَقُلْ رَبِّ زِدْنِي عِلْمًا  ۞';
  display:block;
  width:100%;
  padding:4px 12px 5px;
  text-align:center;
  font-family:'Amiri', serif;
  font-size:.82rem;
  letter-spacing:.03em;
  color:#806713;
  background:linear-gradient(90deg, #faf4dc, #fffdf6, #faf4dc);
  border-top:1px solid rgba(201,162,39,.18);
  border-bottom:1px solid rgba(201,162,39,.22);
}

/* Hero */
.hero {
  isolation:isolate;
  background:
    radial-gradient(circle at 90% 10%, rgba(201,162,39,.18), transparent 24%),
    radial-gradient(circle at 12% 82%, rgba(255,255,255,.06), transparent 30%),
    linear-gradient(135deg, var(--islamic-green-deep) 0%, var(--islamic-green-dark) 52%, #0a8059 100%);
}
.hero::before {
  content:'';
  position:absolute; inset:0;
  opacity:.72;
  background-image:
    linear-gradient(30deg, transparent 46%, var(--islamic-pattern) 48%, var(--islamic-pattern) 52%, transparent 54%),
    linear-gradient(150deg, transparent 46%, var(--islamic-pattern) 48%, var(--islamic-pattern) 52%, transparent 54%),
    linear-gradient(90deg, transparent 48%, rgba(201,162,39,.055) 49%, rgba(201,162,39,.055) 51%, transparent 52%);
  background-size:44px 44px;
  pointer-events:none;
  z-index:-1;
}
.hero-content h1 { letter-spacing:-.02em; }
.hero-badge {
  background:rgba(247,239,207,.11) !important;
  border:1px solid rgba(247,239,207,.28);
  color:#f8eab7 !important;
  backdrop-filter:blur(10px);
}
.hero-card-principal {
  border:1px solid rgba(201,162,39,.35);
  box-shadow:0 25px 65px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Section accents */
.section-title .st-badge {
  color:var(--islamic-green) !important;
  background:var(--islamic-gold-soft) !important;
}
.section-title h2 { color:var(--islamic-green-dark); }
.section.bg-alt {
  background:linear-gradient(135deg, #fdfcf7 0%, #eff8f3 100%);
}

/* Cards */
.programs-card,
.teacher-card,
.news-card,
.event-card,
.counter-card,
.testimonial-card,
.contact-info,
.contact-form,
.gallery-item,
.faq-item {
  border-color:rgba(11,107,75,.10) !important;
}
.programs-card:hover,
.teacher-card:hover,
.news-card:hover,
.event-card:hover { border-color:rgba(201,162,39,.35) !important; }
.pc-icon,
.counter-icon {
  background:linear-gradient(135deg, var(--islamic-green-soft), #f9f2d7) !important;
  color:var(--islamic-green) !important;
  border:1px solid rgba(201,162,39,.20);
}

/* Buttons */
.btn-primary {
  background:linear-gradient(135deg, var(--islamic-green), var(--islamic-green-dark));
  box-shadow:0 5px 18px rgba(11,107,75,.22);
}
.btn-primary:hover { box-shadow:0 10px 30px rgba(11,107,75,.30); }
.btn-outline-dark:hover { border-color:var(--islamic-gold); color:#7b6311; }

/* Decorative Islamic separators */
.section-title::after {
  content:'✦  ◇  ✦';
  display:block;
  margin-top:16px;
  color:var(--islamic-gold);
  font-family:Georgia, serif;
  font-size:.78rem;
  letter-spacing:.35em;
}

/* Footer */
.footer {
  background:
    radial-gradient(circle at 20% 15%, rgba(201,162,39,.08), transparent 24%),
    linear-gradient(135deg, var(--islamic-green-deep), #041f18);
}
.footer::before {
  content:'';
  position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg, transparent, var(--islamic-gold), transparent);
}
.footer .logo { color:#fff; }
.footer .logo i { color:#e6ca68; }
.footer h4 { color:#f3df95; }
.footer a:hover { color:#e6ca68 !important; }
.footer-bottom { border-top-color:rgba(201,162,39,.16) !important; }

/* Arabic utility */
.islamic-arabic {
  font-family:'Amiri', serif;
  font-weight:700;
  direction:rtl;
  color:#9a7a12;
}

/* Mobile */
@media (max-width: 767px) {
  .header::after { font-size:.74rem; }
  .section-title::after { margin-top:12px; }
}