/* ===== GLOBAL ===== */
body {
  font-family: "Segoe UI", Arial, sans-serif;
  margin: 0;
  padding: 30px 15px;
  text-align: center;
  color: #fff;
  background: radial-gradient(circle at top, #1a1a2e, #0f0f1c);
  animation: bgGlow 8s ease-in-out infinite alternate;
}

@keyframes bgGlow {
  0%   { background: radial-gradient(circle at top, #1a1a2e, #0f0f1c); }
  50%  { background: radial-gradient(circle at bottom, #2b2b44, #0f0f1c); }
  100% { background: radial-gradient(circle at top, #1a1a2e, #0f0f1c); }
}

/* ===== CONTAINERS ===== */
.converter, .calculator {
  width: 100%;
  max-width: 300px;
  margin: 25px auto;
  padding: 25px;
  border-radius: 16px;
  background: rgba(20, 20, 30, 0.85);
  border: 1px solid rgba(0,255,255,0.5);
  box-shadow: 0 0 25px rgba(0, 200, 255, 0.7);
  animation: breathingBox 4s ease-in-out infinite;
}

@keyframes breathingBox {
  0%   { box-shadow: 0 0 14px rgba(0, 200, 255, 0.4); }
  50%  { box-shadow: 0 0 28px rgba(0, 200, 255, 1); }
  100% { box-shadow: 0 0 14px rgba(0, 200, 255, 0.4); }
}

h2 {
  margin-bottom: 15px;
  font-size: 1.6rem;
  color: #00eaff;
  text-shadow: 0 0 15px rgba(0,234,255,0.9);
}

/* ===== INPUT GROUP ===== */
.input-group {
  margin-bottom: 15px;
}
.input-group input,
.input-group select {
  width: 92%;
  margin: 0 auto;
  display: block;
  padding: 12px;
  font-size: 1rem;
  text-align: center;
  border: 1px solid #00bfff;
  border-radius: 10px;
  background: rgba(20, 20, 30, 0.95); /* sentiasa dark */
  color: #fff;                        /* text putih */
  outline: none;
  box-shadow: 0 0 12px rgba(0,191,255,0.7);
  transition: 0.25s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.input-group input:focus,
.input-group select:focus {
  box-shadow: 0 0 20px rgba(0,255,200,1);
  border-color: #00ffcc;
}

/* Dropdown options */
.input-group select option {
  background: #1a1a2e; /* dark background */
  color: #fff;         /* text putih */
}

/* ===== CALCULATOR DISPLAY ===== */
#calcDisplay {
  width: 92%;
  margin: 0 auto 14px auto;
  padding: 14px;
  font-size: 1.6rem;
  text-align: right;
  border: 1px solid #00bfff;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  box-shadow: 0 0 15px rgba(0,191,255,0.7);
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%   { box-shadow: 0 0 12px rgba(0,191,255,0.5); }
  50%  { box-shadow: 0 0 25px rgba(0,255,180,0.9); }
  100% { box-shadow: 0 0 12px rgba(0,191,255,0.5); }
}

/* ===== CALCULATOR BUTTONS ===== */
.calc-buttons button {
  width: 22%;
  margin: 5px 1%;
  padding: 12px;
  font-size: 1.1rem;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #007BFF, #00d4ff);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(0,191,255,0.7);
  transition: transform 0.2s, box-shadow 0.3s;
}
.calc-buttons button:hover {
  transform: scale(1.08);
  box-shadow: 0 0 24px rgba(0,255,200,1);
}
.calc-buttons button:active {
  transform: scale(0.95);
}

/* Butang Clear merah glowing */
.calc-buttons button[style*="dc3545"] {
  background: linear-gradient(135deg, #ff0033, #ff4d4d) !important;
  box-shadow: 0 0 18px rgba(255,0,0,0.9);
}

/* ===== RATE INFO ===== */
.rate-info {
  margin-top: 15px;
  font-size: 1rem;
  color: #eee;
  text-shadow: 0 0 10px rgba(0,255,255,0.8);
}

/* ===== FOOTER ===== */
footer {
  margin-top: 30px;
  font-size: 0.9rem;
  color: #bbb;
  text-shadow: 0 0 12px rgba(0,200,255,0.6);
}
footer a {
  color: #00eaff;
  text-decoration: none;
  text-shadow: 0 0 12px rgba(0,255,255,1);
}
footer a:hover {
  color: #00ffcc;
}