/* Tile Mega Menu — Navy Blue & Field Green Edition */

/* Design Tokens - Updated to Navy Blue & Field Green Palette */
:root {
  --mm2-bg: #FAFBFD; /* Warna dasar off-white kebiruan yang sangat bersih */
  --mm2-surface: #FFFFFF;
  --mm2-surface-elevated: rgba(250, 251, 253, 0.98);
  --mm2-muted: #F1F5F9; /* Abu-abu kebiruan lembut (slate-100) */
  --mm2-border: #D0D9E5; /* Border abu-abu kebiruan lembut */
  --mm2-border-strong: #1B365D; /* Biru Navy */
  --mm2-accent: #2E7D32; /* Hijau Lapangan */
  --mm2-accent-hover: #1B5E20; /* Hijau Lapangan Gelap */
  --mm2-accent-10: rgba(46, 125, 50, 0.10); /* Hijau Lapangan 10% */
  --mm2-accent-20: rgba(46, 125, 50, 0.20); /* Hijau Lapangan 20% */
  --mm2-fg: #0F172A; /* Slate-900 (Teks utama) */
  --mm2-fg-muted: #475569; /* Slate-600 */
  --mm2-fg-light: #64748B; /* Slate-500 */
  
  /* Shadows adjusted for Navy/Slate tones */
  --mm2-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --mm2-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
  --mm2-shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.14);
  --mm2-shadow-xl: 0 32px 80px rgba(15, 23, 42, 0.18);
  --mm2-shadow-hover: 0 16px 40px rgba(46, 125, 50, 0.15); /* Efek bayangan hijau lembut */
  
  --mm2-radius-xl: 20px;
  --mm2-radius-lg: 16px;
  --mm2-radius-md: 12px;
  --mm2-radius-sm: 10px;
  
  --mm2-z: 60;
  --mm2-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Trigger Button */
.mm2-trigger {
  border: 1.5px solid var(--mm2-border);
  background: var(--mm2-surface);
  color: var(--mm2-fg);
  font-weight: 600;
}
.mm2-trigger:hover { 
  border-color: var(--mm2-accent); 
  background: var(--mm2-muted);
}

/* Panel - Glassmorphism Gold */
.mm2-panel {
  background: var(--mm2-surface-elevated);
  border: 1.5px solid var(--mm2-border-strong);
}

/* Cards & Icons */
.mm2-card {
  border: 1.5px solid var(--mm2-border);
  color: var(--mm2-fg);
}
.mm2-card:hover { 
  border-color: var(--mm2-accent);
  background: linear-gradient(135deg, #FFFFFF, #F1F5F9);
  box-shadow: var(--mm2-shadow-hover);
}

.mm2-card .mm2-ico {
  background: linear-gradient(135deg, #FAFBFD, #D0D9E5); /* Gradasi background icon yang serasi */
  border: 1.5px solid var(--mm2-border-strong);
  color: var(--mm2-accent-hover);
}
.mm2-card:hover .mm2-ico {
  box-shadow: 0 4px 16px rgba(46, 125, 50, 0.2); /* Efek glow bayangan hijau saat hover */
}

/* Sub-navigation Active State */
.mm2-subitem::before { background: var(--mm2-accent); }

.mm2-subitem.active {
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.08), rgba(46, 125, 50, 0.04)); /* Gradasi hijau transparan */
  border-color: var(--mm2-accent-20);
  color: var(--mm2-accent-hover);
}

/* Links & Thumbnails */
.mm2-link {
  border: 1.5px solid var(--mm2-border);
}
.mm2-link:hover { 
  border-color: var(--mm2-accent);
}

.mm2-thumb {
  border: 1.5px solid var(--mm2-border);
}
.mm2-link:hover .mm2-thumb {
  border-color: var(--mm2-accent);
  box-shadow: 0 4px 10px rgba(46, 125, 50, 0.15); /* Efek glow bayangan hijau */
}

/* "See all" highlight */
.mm2-seeall {
  border: 2px dashed var(--mm2-accent);
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.08), rgba(46, 125, 50, 0.02));
}
.mm2-seeall:hover {
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.14), rgba(46, 125, 50, 0.06));
}

/* Mobile Adjustments */
@media (max-width: 960px) {
  .mm2-mobile-close {
    border: 1px solid rgba(208, 217, 229, 0.6);
    background: rgba(248, 250, 252, 0.95);
  }
  .mm2-mobile-close:hover {
    background: rgba(254, 242, 242, 0.95);
    border-color: rgba(220, 38, 38, 0.8);
    color: #B91C1C;
  }
  .mm2-subitem.active {
    background: linear-gradient(135deg, var(--mm2-accent), var(--mm2-accent-hover)); /* Gradasi solid hijau lapangan aktif */
    color: white;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3); /* Bayangan hijau solid */
  }
}