/* 1. Variabel Warna untuk Konsistensi */
:root {
    --clr-bg: #FFF183;            /* kuning pastel cerah */ 
    --clr-inner-light: rgba(255,255,255,0.6);  /* highlight inset :contentReference[oaicite:2]{index=2} */
    --clr-inner-dark: rgba(0,0,0,0.2);         /* emboss inset :contentReference[oaicite:3]{index=3} */
    --clr-outer: rgba(0,0,0,0.1);               /* subtle outer shadow :contentReference[oaicite:4]{index=4} */
    --radius: 40px;                            /* sudut membulat besar :contentReference[oaicite:5]{index=5} */
    --transition: all 0.3s ease-in-out;        /* transisi halus :contentReference[oaicite:6]{index=6} */
  }
  
  /* 2. Dasar Claymorphic untuk Link Menu */
  .modern-menu .menu-list a {
    background: var(--clr-bg);
    border-radius: var(--radius);
    box-shadow:
      6px 6px 16px var(--clr-outer),              /* outer shadow */ 
      inset 6px 6px 12px var(--clr-inner-light),   /* inner highlight */ 
      inset -6px -6px 12px var(--clr-inner-dark);  /* inner emboss */ 
    color: #333;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    text-decoration: none;
    font-size: 14px;
    transition: var(--transition);
  }
  
  /* 3. Efek Hover: Mengambang & Bayangan Dinamis */
  .modern-menu .menu-list a:hover,
  .modern-menu .menu-list a:focus {
    transform: translateY(-4px);                  /* efek mengambang :contentReference[oaicite:7]{index=7} */
    box-shadow:
      8px 8px 20px rgba(0,0,0,0.15),               /* outer shadow lebih tebal */ 
      inset 4px 4px 10px rgba(255,255,255,0.7),    /* inner highlight lebih lembut */ 
      inset -4px -4px 10px rgba(0,0,0,0.15);       /* inner emboss lebih halus */ 
    color: #0e9ec1;                                /* ubah warna teks pada hover :contentReference[oaicite:8]{index=8} */
  }
  
  /* 4. Highlight untuk Item Aktif */
  .modern-menu .menu-list a.active {
    background: #006b5f;
    color: #fff;
    box-shadow: none;                              /* versi flat untuk aktif */ 
  }
  
  /* 5. Claymorphic Button Download */
  .modern-menu .download-btn {
    background: var(--clr-bg);
    border-radius: var(--radius);
    box-shadow:
      6px 6px 16px var(--clr-outer),
      inset 6px 6px 12px var(--clr-inner-light),
      inset -6px -6px 12px var(--clr-inner-dark);
    color: #333;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    transition: var(--transition);
  }
  
  .modern-menu .download-btn:hover,
  .modern-menu .download-btn:focus {
    transform: translateY(-3px);
    box-shadow:
      8px 8px 20px rgba(0,0,0,0.15),
      inset 4px 4px 10px rgba(255,255,255,0.7),
      inset -4px -4px 10px rgba(0,0,0,0.15);
    color: #0e9ec1;
  }