/* ═══════════════════════════════════════════════════════════
   LIGEMA MAJU 57 — Public UI Polish Layer
   Warm, colorful, anti-template. Tambahan di style.css asli.
   ═══════════════════════════════════════════════════════════ */

/* ── HERO: lebih hidup ─────────────────────────────────── */
.hero {
  background:
    radial-gradient(800px 500px at 80% 20%,rgba(234,179,8,.12),transparent 55%),
    radial-gradient(600px 400px at 15% 70%,rgba(34,197,94,.10),transparent 50%),
    linear-gradient(160deg,#0a2a17 0%,#0c3a21 40%,#14532d 72%,#1c6b3c 100%);
}
.hero h1 {
  background:linear-gradient(180deg,#fff 0%,#fde047 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-badge {
  border:1px solid rgba(234,179,8,.35);
  box-shadow:0 2px 12px rgba(234,179,8,.15);
}

/* ── STATS: kotak dinamis ─────────────────────────────── */
.stats-section {
  background:linear-gradient(180deg,#fff 0%,#f8faf8 100%);
  border-bottom:2px solid rgba(234,179,8,.15);
}
.stat-card {
  padding:32px 16px;position:relative;overflow:hidden;
  border-radius:16px;margin:4px;
  background:rgba(255,255,255,.85);
  border:1.5px solid rgba(228,231,235,.6);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease,border-color .3s,background .3s;
}
.stat-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(234,179,8,.4),transparent);
  opacity:0;transition:opacity .4s ease;
}
.stat-card::after {
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transition:width .5s ease;opacity:.7;
}
.stat-card:hover { transform:translateY(-6px) scale(1.03); background:#fff; border-color:rgba(234,179,8,.35);
  box-shadow:0 14px 36px rgba(20,83,45,.1),0 0 0 1px rgba(234,179,8,.08);
}
.stat-card:hover::before { opacity:1; }
.stat-card:hover::after { width:60%; }
@keyframes stat-glow { 0%,100%{box-shadow:0 4px 16px rgba(20,83,45,.06)} 50%{box-shadow:0 6px 24px rgba(20,83,45,.12)} }
.stat-card { animation:stat-glow 4s ease-in-out infinite; }
.stat-card:nth-child(1) { animation-delay:0s; }
.stat-card:nth-child(2) { animation-delay:.6s; }
.stat-card:nth-child(3) { animation-delay:1.2s; }
.stat-card:nth-child(4) { animation-delay:1.8s; }
.stat-card:nth-child(5) { animation-delay:2.4s; }
.stat-num {
  background:linear-gradient(135deg,var(--green),#16a34a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* kas stat-num pakai default */
.stat-icon {
  font-size:26px; margin-bottom:8px; display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:16px;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.stat-card:hover .stat-icon { transform:translateY(-3px) scale(1.06); }
.stat-card:nth-child(1) .stat-icon { background:rgba(37,99,235,.10); box-shadow:0 4px 14px rgba(37,99,235,.15); }
.stat-card:nth-child(2) .stat-icon { background:rgba(217,119,6,.10); box-shadow:0 4px 14px rgba(217,119,6,.15); }
.stat-card:nth-child(3) .stat-icon { background:rgba(124,58,237,.10); box-shadow:0 4px 14px rgba(124,58,237,.15); }
.stat-card:nth-child(4) .stat-icon { background:rgba(8,145,178,.10); box-shadow:0 4px 14px rgba(8,145,178,.15); }
.stat-card:nth-child(5) .stat-icon { background:rgba(219,39,119,.10); box-shadow:0 4px 14px rgba(219,39,119,.15); }
.stat-card:nth-child(6) .stat-icon { background:rgba(22,163,74,.10); box-shadow:0 4px 14px rgba(22,163,74,.15); }
.stat-card:nth-child(1) .stat-num { background:linear-gradient(135deg,#2563eb,#3b82f6);-webkit-background-clip:text;background-clip:text;color:transparent; }
.stat-card:nth-child(2) .stat-num { background:linear-gradient(135deg,#d97706,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent; }
.stat-card:nth-child(3) .stat-num { background:linear-gradient(135deg,#7c3aed,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent; }
.stat-card:nth-child(4) .stat-num { background:linear-gradient(135deg,#0891b2,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent; }
.stat-card:nth-child(5) .stat-num { background:linear-gradient(135deg,#db2777,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent; }

/* ── SECTION HEADER: decorative line ────────────────────── */
.section-header h2 {
  position:relative;display:inline-block;
}
.section-header h2::after {
  content:'';display:block;width:40px;height:3px;margin-top:8px;
  background:linear-gradient(90deg,var(--gold),var(--green));
  border-radius:2px;
}
.section-header.center h2::after { margin-left:auto;margin-right:auto; }
.section-sub {
  color:var(--muted);font-size:14px;line-height:1.7;
}

/* ── CARDS: warm hover + gold accent ────────────────────── */
.card {
  border:1px solid rgba(228,231,235,.8);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease,border-color .3s ease;
}
.card:hover {
  border-color:rgba(234,179,8,.4);
  box-shadow:0 12px 36px rgba(20,83,45,.12),0 0 0 1px rgba(234,179,8,.1);
}
.card-body h3 {
  font-size:17px;font-weight:700;color:var(--ink);margin-bottom:8px;
}
.card-meta span {
  display:inline-flex;align-items:center;gap:4px;
}
.card-badge.running {
  background:linear-gradient(135deg,#dc2626,#ef4444);
  box-shadow:0 2px 8px rgba(220,38,38,.3);
  animation:pulse-badge 2s ease-in-out infinite;
}
@keyframes pulse-badge{0%,100%{opacity:1}50%{opacity:.85}}
.card-badge.upcoming {
  background:linear-gradient(135deg,#d97706,#f59e0b);
  box-shadow:0 2px 8px rgba(217,119,6,.3);
}

/* ── UMKM: card warmer ─────────────────────────────────── */
.umkm-card {
  border:1px solid rgba(228,231,235,.8);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease,border-color .3s ease;
}
.umkm-card:hover {
  border-color:rgba(234,179,8,.4);
  box-shadow:0 12px 36px rgba(20,83,45,.12);
}
.umkm-kategori {
  background:linear-gradient(135deg,#dcfce7,#d1fae5);
  color:#15803d;
}

/* ── ABOUT: warmer bg + logo glow ───────────────────────── */
.about-section {
  background:linear-gradient(180deg,#f8faf8 0%,#f0fdf4 50%,#f8faf8 100%);
}
.about-accent {
  border-radius:28px;
  background:linear-gradient(135deg,rgba(234,179,8,.06),rgba(34,197,94,.06));
  border:1px solid rgba(234,179,8,.15);
}
.about-logo {
  filter:drop-shadow(0 8px 20px rgba(20,83,45,.2));
}

/* ── CTA SECTION: deeper + gold accent ──────────────────── */
.cta-section {
  background:
    radial-gradient(600px 400px at 80% 30%,rgba(234,179,8,.15),transparent 50%),
    linear-gradient(160deg,#0a2a17,#14532d 50%,#1c6b3c);
}
.cta-text h2 { font-weight: 800; letter-spacing: .01em; }
.cta-text .btn {
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 700;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.cta-text .btn-primary {
  background: linear-gradient(135deg,var(--gold-light),var(--gold));
  color: var(--green);
  box-shadow: 0 6px 18px rgba(234,179,8,.35);
}
.cta-text .btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 28px rgba(234,179,8,.45);
}
.cta-text .btn-outline.light:hover {
  background: rgba(255,255,255,.12);
  transform: translateY(-3px);
}

/* ── FOOTER: warmer ─────────────────────────────────────── */
.site-footer {
  background:linear-gradient(180deg,#0f2a1c,#0a2416);
  border-top:2px solid rgba(234,179,8,.12);
}
.site-footer a:hover { color:var(--gold); }
.footer-social a {
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),color .2s;
}
.footer-social a:hover { transform:translateY(-3px); }

/* footer contact: icons + rapi */
.footer-ico-svg {
  width: 20px; height: auto; max-height: 20px; flex-shrink: 0;
  display: block;
}
.footer-contact {
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.contact-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;
  transition:background .25s, border-color .25s, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.contact-btn:hover {
  transform:translateY(-3px);
  background:rgba(255,255,255,.14);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

.footer-right { display:flex; flex-direction:column; gap:14px; }
.footer-center {
  display:flex; flex-direction:column; align-items:center; gap:16px;
  text-align:center;
}
.footer-center .footer-brand {
  flex-direction:column; align-items:center; text-align:center; gap:6px;
}
.footer-brand-logo img{width:44px;height:44px;object-fit:contain;border-radius:6px}
.footer-center .footer-brand strong { font-size:17px; color:#fff; }
.footer-center .footer-brand p { font-size:12px; color:rgba(255,255,255,.6); }
.footer-icons-row {
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center;
}
.footer-icons-row .social-btn {
  background:rgba(255,255,255,.08);
  color:inherit;
}
.footer-icons-row .social-btn:hover {
  background:rgba(255,255,255,.14);
  color:inherit;
}
.footer-social { display:flex; gap:10px; margin-top:0; }
.footer-social .social-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;
  transition:background .25s, border-color .25s, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.footer-social .social-btn:hover {
  transform:translateY(-3px);
  background:rgba(255,255,255,.14);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.social-ico {
  width:20px; height:20px; display:block;
  transition:transform .25s;
}
.footer-social .social-btn:hover .social-ico {
  transform:scale(1.15);
}
.footer-bottom { color:rgba(255,255,255,.45); }
.footer-visitors { color:rgba(255,255,255,.5); }
.footer-visitors .fv-today { color:rgba(255,255,255,.9); }

/* ── FLASH: warmer ──────────────────────────────────────── */
.flash-success {
  background:linear-gradient(135deg,#dcfce7,#d1fae5);
  border:1px solid #86efac;color:#166534;
}
.flash-error {
  background:linear-gradient(135deg,#fef2f2,#fee2e2);
  border:1px solid #fca5a5;color:#dc2626;
}

/* ── SCROLL PROGRESS: gold bar ──────────────────────────── */
.scroll-progress {
  background:linear-gradient(90deg,var(--green),var(--gold));
}

/* ── SECTION DIVIDER: subtle gold line between sections ─── */
.section + .section,
.section-alt + .section,
.section + .section-alt {
  position:relative;
}
.section + .section::before,
.section-alt + .section::before {
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:60px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* ── RESPONSIVE: polish mobile ──────────────────────────── */
@media(max-width:640px){
  .hero{min-height:55vh;padding:60px 16px 48px}
  .hero h1{font-size:clamp(24px,7vw,36px)}
  .hero-badge{font-size:11px;padding:5px 14px}
  .section{padding:48px 0}
  .section-header h2{font-size:22px}
  .stat-card{padding:24px 12px}
  .stat-num{font-size:28px}
  .card{border-radius:14px}
  .card-body{padding:14px 16px}
  .cta-section{padding:48px 16px}
  .cta-text .hero-btns{flex-direction:column;align-items:center}
  .cta-text .btn{width:100%;max-width:300px;text-align:center}
  .footer-inner, .footer-inner.footer-single{grid-template-columns:1fr;gap:16px;padding:0 12px}
  .footer-brand{flex-direction:column;align-items:center;text-align:center;gap:6px}
  .footer-brand-logo img{width:38px;height:38px}
  .footer-brand strong{font-size:13px}
  .footer-brand p{font-size:10px}
  .footer-links{font-size:11px;gap:2px 10px}
  .footer-right{gap:10px}
  .footer-contact p{font-size:11px;gap:6px}
  .contact-btn{width:34px;height:34px}
  .footer-ico-svg{width:16px;max-height:16px}
  .footer-social{gap:8px}
  .footer-social .social-btn{width:34px;height:34px}
  .footer-social .social-ico{width:16px;height:16px}
  .footer-bottom p{font-size:11px}
  .footer-visitors{font-size:10px}
}

/* ── NAV ICON: emoji di menu ────────────────────────────── */
.nav-ico { display:inline-flex; align-items:center; gap:6px; }
.nav-emoji {
  display:inline-grid; place-items:center;
  width:22px; height:22px; font-size:13px; flex-shrink:0;
}
@media (max-width: 768px) {
  .nav-ico { display:flex; align-items:center; gap:10px; }
  .nav-emoji {
    width:28px; height:28px; font-size:15px;
    background:var(--green-pale); border-radius:8px;
  }
  .nav-ico.active .nav-emoji { background:rgba(255,255,255,.18); }
}

/* ── OVERFLOW FIX: prevent anim-x from causing horizontal scroll ── */
main { overflow-x: hidden; }

/* ── NAV ICON: responsive ────────────────────────────────── */
/* HP/tablet (<768px): burger menu */
/* 768-1199px: inline tapi compact */
/* 1200px+: normal */
@media (max-width: 767px) {
  .nav-emoji { display:inline-grid; width:28px; height:28px; font-size:15px; background:var(--green-pale); border-radius:8px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .nav-emoji { display:none; }
  .nav-links a { padding:6px 8px; font-size:12px; }
  .nav-ico { gap:0; }
}
@media (min-width: 1200px) {
  .nav-emoji { display:none; }
  .nav-links a { padding:8px 11px; font-size:13px; }
  .nav-ico { gap:0; }
}

/* ── NAV DROPDOWN: Admin + Login UMKM ──────────────────── */
.nav-dd { position: relative; }
.nav-dd .dd-caret { font-size:9px; opacity:.7; margin-left:2px; }
.dd-menu {
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(6px);
  background:#fff; border:1px solid rgba(234,179,8,.2); border-radius:12px;
  min-width:170px; padding:6px; box-shadow:0 14px 38px rgba(20,83,45,.16);
  opacity:0; visibility:hidden; transition:opacity .22s ease, transform .22s ease, visibility .22s;
  z-index:120;
}
.nav-dd:hover .dd-menu, .nav-dd:focus-within .dd-menu {
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.dd-item {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:9px; font-size:13.5px; font-weight:600;
  color:var(--ink); text-decoration:none; transition:background .2s, color .2s;
  white-space:nowrap;
}
.dd-item:hover { background:var(--green-pale); color:var(--green); }

/* Mobile: dropdown jadi static (menu burger) */
@media (max-width: 768px) {
  .nav-dd { width:100%; }
  .nav-dd > .nav-admin-link { width:100%; }
  .dd-menu {
    position:static; transform:none; opacity:1; visibility:visible;
    box-shadow:none; border:none; padding:0 0 0 16px; min-width:0;
    display:flex; flex-direction:column; gap:2px;
  }
  .dd-caret { display:none; }
}

/* ── RESPONSIVE: fix section-sub overflow di HP kecil ──── */
@media (max-width: 480px) {
  .section { overflow-x: hidden; }
  .section-sub { max-width: 100%; word-wrap: break-word; }
}

/* ── ANIMASI KECIL: geser lebih kecil biar gak overflow ── */
@media (max-width: 1024px) {
  .anim-left { transform: translateX(-8px); }
  .anim-right { transform: translateX(8px); }
}

/* ── NAV GAP: lebih rapat untuk layar sempit ────────────── */
@media (max-width: 1199px) {
  .nav-links { gap:2px; }
}

/* ── STAT LINK: kartu stat sebagai link ─────────────────── */
.stat-link { text-decoration:none; color:inherit; display:block; cursor:pointer; }
.stat-link:hover { text-decoration:none; }

/* ── UMKM DASHBOARD: center submit button ────────────────── */
.umkm-dash-card .btn {
  display:flex; justify-content:center; align-items:center; gap:6px; width:100%;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE & RAPI — SEMUA DEVICE
   Layer tambahan biar konsisten di HP kecil, HP, tablet, desktop.
   ═══════════════════════════════════════════════════════════ */

/* ── BODY OVERFLOW SAFETY NET ── */
html, body { overflow-x:hidden; max-width:100%; }

/* ── CARDS & GRID: wrap aman di layar sempit ── */
.card, .umkm-card, .stat-card { min-width:0; }
.stats-grid, .umkm-grid, .galeri-grid, .pengurus-grid,
.kegiatan-grid, .acara-grid { min-width:0; }

/* ── IMG responsif ── */
img { max-width:100%; height:auto; }
.card-img, .umkm-img, .galeri-item img { object-fit:cover; }

/* ── TABLE: scroll aman di HP ── */
.table-wrap, table { width:100%; }
@media (max-width: 640px) {
  .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table-wrap table { min-width:560px; }
}

/* ── HP KECIL (< 380px): anti-overflow ── */
@media (max-width: 380px) {
  .hero h1 { font-size: 24px !important; }
  .hero p { font-size: 13px; }
  .hero-badge { font-size: 10px; padding: 4px 10px; }
  .btn { font-size: 13px; padding: 9px 16px !important; white-space: nowrap; }
  .section { padding: 40px 0; }
  .section-header h2 { font-size: 20px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .stat-card { padding: 16px 8px; }
  .stat-num { font-size: 22px; }
  .stat-label { font-size: 10px; }
  .stat-icon { width: 40px; height: 40px; font-size: 20px; border-radius: 12px; }
  .card-body { padding: 12px; }
  .card-body h3 { font-size: 15px; }
  .footer-inner, .footer-inner.footer-single { grid-template-columns: 1fr; gap: 16px; padding: 0 10px; }
  .footer-center { gap: 12px; }
  .footer-links { font-size: 10px; }
  .footer-right { align-items:flex-start; }
  .footer-contact { gap: 8px; }
  .contact-btn, .footer-social .social-btn { width: 32px; height: 32px; }
  .footer-ico-svg { width: 14px; max-height: 14px; }
  .footer-social .social-ico { width: 14px; height: 14px; }
}

/* ── TABLET (641-1024px): grid 2 kolom aman ── */
@media (min-width: 641px) and (max-width: 1024px) {
  .gallery-grid, .galeri-grid { grid-template-columns: repeat(3, 1fr); }
  .pengurus-grid { grid-template-columns: repeat(3, 1fr); }
  .kegiatan-grid, .acara-grid { grid-template-columns: repeat(2, 1fr); }
  .umkm-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner, .footer-inner.footer-single { grid-template-columns: 1fr; gap: 20px; padding: 0 20px; }
  .hero { min-height: 60vh; }
  .hero h1 { font-size: clamp(30px, 5vw, 44px); }
}

/* ── TABLET KECIL (641-768px): footer tetap rapi ── */
@media (min-width: 641px) and (max-width: 768px) {
  .footer-inner, .footer-inner.footer-single { grid-template-columns: 1fr; gap: 12px; padding: 0 14px; }
  .footer-brand-logo img{width:40px;height:40px}
  .footer-brand strong { font-size: 12px; }
  .footer-brand p { font-size: 9px; }
  .footer-links { font-size: 11px; }
  .contact-btn, .footer-social .social-btn { width: 34px; height: 34px; }
  .footer-contact { gap: 8px; }
}

/* ── DESKTOP BESAR (>1400px): max-width aman ── */
@media (min-width: 1400px) {
  .container, .footer-inner { max-width: 1280px; }
}

/* ── SECTION SPACING konsisten ── */
.section, .section-alt { padding: 72px 0; }
@media (max-width: 768px) { .section, .section-alt { padding: 52px 0; } }
@media (max-width: 480px) { .section, .section-alt { padding: 44px 0; } }

/* ── BUTTON: tap target nyaman di HP ── */
@media (max-width: 640px) {
  .btn { min-height: 44px; display:inline-flex; align-items:center; justify-content:center; }
  .nav-links a, .footer-links a { min-height: 36px; display:inline-flex; align-items:center; }
  .stat-link { min-height: 44px; }
  input, select, textarea { font-size: 16px !important; } /* anti-zoom iOS */
}