/* --- SUPER REALISTIC GLASS CARD --- */
.l-glass-card {
  color: #ffffff;
  
  /* Background dengan sedikit gradasi agar kaca terlihat memiliki dimensi */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  /* Hapus border biasa dari versi sebelumnya */
  border: none; 
  /* Kombinasi bayangan luar (drop) dan pantulan cahaya dalam (inset) */
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.15), /* Bayangan lembut di bawah card */
    inset 0 1px 1px rgba(255, 255, 255, 0.5), /* Cahaya memantul di bibir atas kaca */
    inset 0 -1px 1px rgba(255, 255, 255, 0.1); /* Sedikit pantulan di bibir bawah */
}

/* --- EFEK PANTULAN TEPI (EDGE REFLECTION) --- */
.l-glass-card::before {
  content: "";
  position: absolute;
  inset: 0; /* Menutupi seluruh card */
  padding: 1px; /* Ini akan menjadi ketebalan pantulan kaca */
  
  /* Gradasi cahaya di ujung kaca: Terang di kiri atas, pudar di tengah, terang di kanan bawah */
  background: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.7) 0%, 
    rgba(255, 255, 255, 0.1) 40%, 
    rgba(255, 255, 255, 0.1) 60%, 
    rgba(255, 255, 255, 0.4) 100%
  );
  
  /* Trik MASKING: Memotong bagian tengah agar hanya menyisakan pinggirannya saja (1px) */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  
  pointer-events: none; /* Agar tidak menghalangi klik pada tombol di dalamnya */
}

/* --- Teks --- */
.l-glass-title {
  margin-top: 0;
  font-weight: 600;
  font-size: 24px;
}

.l-glass-text {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 25px;
  color: rgba(255, 255, 255, 0.9);
}

/* --- SUPER REALISTIC GLASS BUTTON --- */
.l-glass-button {
  position: relative;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  border-radius: 14px;
  border: none;
  
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.1), 
    inset 0 1px 1px rgba(255, 255, 255, 0.6);
    
  transition: all 0.3s ease;
}

/* Pantulan Tepi untuk Button */
.l-glass-button::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.8) 0%, 
    rgba(255, 255, 255, 0.1) 50%, 
    rgba(255, 255, 255, 0.4) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Animasi saat ditekan */
.l-glass-button:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15));
  transform: translateY(-2px);
}

.l-glass-button:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.15);
}

.d-glass-card {
  color: #ffffff;
  
  background: linear-gradient(135deg, rgba(40, 40, 40, 0.6), rgba(10, 10, 10, 0.7));
  
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none; 

  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.6),
    inset 0 1px 1px rgba(255, 255, 255, 0.15), /* Pantulan halus di bibir atas */
    inset 0 -1px 1px rgba(0, 0, 0, 0.5); /* Bibir bawah sedikit lebih gelap */
}

.d-glass-card::before {
  content: "";
  position: absolute;
  inset: 0; 
  padding: 1px; 
  
  background: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.3) 0%,   
    rgba(255, 255, 255, 0.02) 40%, 
    rgba(255, 255, 255, 0.02) 60%, 
    rgba(255, 255, 255, 0.15) 100% 
  );
  
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none; 
}

/* --- Teks --- */
.d-glass-title {
  margin-top: 0;
  font-weight: 600;
  font-size: 24px;
}

.d-glass-text {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 25px;
  /* Warna teks sedikit abu-abu agar mata tidak cepat lelah (Apple's secondary text) */
  color: rgba(255, 255, 255, 0.75); 
}

/* --- SUPER REALISTIC GLASS BUTTON (DARK MODE) --- */
.d-glass-button {
  position: relative;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  border-radius: 14px;
  border: none;
  
  /* Tombol biasanya sedikit lebih terang dari card-nya agar menonjol (kontras) */
  background: linear-gradient(135deg, rgba(80, 80, 80, 0.4), rgba(40, 40, 40, 0.5));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3), 
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
    
  transition: all 0.3s ease;
}

/* Pantulan Tepi untuk Button (Dark Mode) */
.d-glass-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.4) 0%, 
    rgba(255, 255, 255, 0.05) 50%, 
    rgba(255, 255, 255, 0.15) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Animasi saat ditekan di Dark Mode */
.d-glass-button:hover {
  background: linear-gradient(135deg, rgba(100, 100, 100, 0.5), rgba(60, 60, 60, 0.6));
  transform: translateY(-2px);
}

.d-glass-button:active {
  transform: translateY(0);
  background: rgba(40, 40, 40, 0.5);
}