/* ==============================
   RESET DASAR (RESPONSIVE)
============================== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, Arial, sans-serif;
  background-color: #010101;
  color: #e8e3d5;

  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 100dvh; /* FIX mobile Safari */
  overflow-x: hidden;
}
/* ==============================
   LOGIN CONTAINER
============================== */
#login-container {
  width: 100%;
  max-width: 380px;
  padding: 36px 32px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.02)
  );
  backdrop-filter: blur(14px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  text-align: center;
}
#login-container h3 .logo-1 {
  position: absolute;
  margin-top: 0%;
  margin-left: 3px;
}
/* ==============================
   TITLE
============================== */
#login-container h2 {
  margin: 0 0 24px;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #f9fafb;
}

/* ==============================
   INPUT
============================== */
#login-container input {
  width: 100%;
  padding: 14px 16px;
  font-size: 0.95rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(2, 6, 23, 0.7);
  color: #f3f4f6;
  outline: none;
  margin-bottom: 18px;
  transition: all 0.25s ease;
}

#login-container input::placeholder {
  color: #9ca3af;
}

#login-container input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}

/* ==============================
   BUTTON
============================== */
/* ==============================
   BUTTON – CLOUDY GRAY
============================== */
#login-container button {
  width: 100%;
  padding: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  color: #111827;
  background: linear-gradient(
    135deg,
    #e5e7eb,
    #cbd5e1
  );
  box-shadow:
    0 8px 22px rgba(203, 213, 225, 0.35);
  transition: all 0.25s ease;
}

#login-container button:hover {
  transform: translateY(-2px);
  background: linear-gradient(
    135deg,
    #f1f5f9,
    #d1d5db
  );
  box-shadow:
    0 12px 32px rgba(203, 213, 225, 0.5);
}

#login-container button:active {
  transform: translateY(0);
  background: linear-gradient(
    135deg,
    #d1d5db,
    #9ca3af
  );
  box-shadow:
    0 6px 16px rgba(203, 213, 225, 0.35);
}

/* ==============================
   RESPONSIVE
============================== */
@media (max-width: 420px) {
  #login-container {
    padding: 28px 22px;
  }

  #login-container h2 {
    font-size: 1.3rem;
  }
}

/* ==============================
   APP LAYER
============================== */
.app {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 16px;
}

/* ==============================
   MAIN CARD (FIXED 480px)
============================== */
.card {
  width: 480px;
  max-width: calc(100vw - 32px);
  padding: 26px;
  margin: auto;

  border-radius: 18px;
  position: relative;

  background: linear-gradient(
    180deg,
    rgba(5, 5, 16, 0.88),
    rgba(4, 8, 12, 0.88)
  );
  backdrop-filter: blur(14px);

  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(169, 221, 211, 0.06);

  transition:
    background 0.8s ease,
    box-shadow 0.8s ease;
}

/* ==============================
   HEADER
============================== */
.card h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.5px;
}
.card {
  transition:
    background 0.9s ease,
    box-shadow 0.9s ease,
    border-color 0.6s ease;
}
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(169, 221, 211, 0.06);
}

/* ==============================
   JUDUL
============================== */
.logo {
  position: relative;
  top: 6px;
}

.card h1 {
  margin: 0;
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 600;
  text-align: center;
  color: #e8e3d5;
  letter-spacing: 0.6px;
  margin-top: -2%;
  margin-bottom: -2%;
}
.card h1 .logo-2 {
  position: absolute;
  margin-left: 3px;
}
/* ==============================
   LOKASI & UPDATE
============================== */
.location {
  text-align: center;
  font-size: clamp(12px, 3vw, 13px);
  color: rgba(232, 227, 213, 0.65);
  margin-top: 4px;
  cursor: pointer;
  transition: color 0.3s ease, letter-spacing 0.3s ease;
}

.location:hover {
  color: #a9ddd3;
  letter-spacing: 0.8px;
}

.updated {
  text-align: center;
  font-size: 11px;
  color: rgba(232, 227, 213, 0.45);
  margin-bottom: 22px;
}

/* ==============================
   SECTION
============================== */
.section {
  margin-bottom: 14px;
}

/* LABEL */
.label {
  font-size: clamp(9px, 2.5vw, 10px);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(169, 221, 211, 0.7);
  margin-bottom: 4px;
}

/* VALUE */
.value {
  font-size: clamp(14px, 3.5vw, 15px);
  line-height: 1.45;
  color: #e8e3d5;
}

/* ==============================
   EVENT & ACTION
============================== */
.event,
.action {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 10px 12px;
}

/* .event {
  border-left: 2px solid rgba(169, 221, 211, 0.6);
} */

/* ==============================
   RISK COLORS
============================== */
/* ==============================
   FUTURISTIC RISK ORBS
============================== */

/* Wrapper aman jika dipakai di value / event */
.risk-high,
.risk-medium,
.risk-low {
  position: relative;
  padding-left: 18px;
}

/* ORB DASAR */
.risk-high::before,
.risk-medium::before,
.risk-low::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  width: 10px;
  height: 10px;
  border-radius: 50%;
  filter: blur(0.5px);
}

/* HIGH RISK – RED */
.risk-high {
  color: #ff6b6b;
  font-weight: 600;
}

.risk-high::before {
  background: radial-gradient(circle, #ff6b6b, #ff2e2e);
  box-shadow:
    0 0 6px rgba(255, 80, 80, 0.9),
    0 0 14px rgba(255, 80, 80, 0.6);
}

/* MEDIUM RISK – YELLOW GREEN (MODERATE ZONE) */
.risk-medium {
  color: #c6f25e; /* kuning kehijauan */
  font-weight: 600;
}

.risk-medium::before {
  background: radial-gradient(circle, #c6f25e, #9fdc2e);
  box-shadow:
    0 0 6px rgba(198, 242, 94, 0.9),
    0 0 14px rgba(159, 220, 46, 0.6);
}

/* LOW RISK – GREEN */
.risk-low {
  color: #5ef2a1;
  font-weight: 600;
}

.risk-low::before {
  background: radial-gradient(circle, #5ef2a1, #1fd98a);
  box-shadow:
    0 0 6px rgba(94, 242, 161, 0.9),
    0 0 14px rgba(94, 242, 161, 0.6);
}
@keyframes riskPulse {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.8; }
  50% { transform: translateY(-50%) scale(1.3); opacity: 1; }
}

.risk-high::before,
.risk-medium::before,
.risk-low::before {
  animation: riskPulse 2.4s ease-in-out infinite;
}
/* ==============================
   CARD BACKGROUND REACTIVE TO RISK
============================== */

/* HIGH RISK – RED ALERT */
.card:has(.risk-high) {
  background:
    radial-gradient(
      120% 80% at top,
      rgba(255, 80, 80, 0.18),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(14, 6, 8, 0.92),
      rgba(4, 8, 12, 0.88)
    );

  box-shadow:
    0 0 0 1px rgba(155, 90, 90, 0.35),
    0 0 35px rgba(155, 60, 60, 0.35),
    0 45px 90px rgba(0,0,0,0.85);
}

/* MEDIUM RISK – MODERATE (YELLOW GREEN) */
.card:has(.risk-medium) {
  background:
    radial-gradient(
      120% 80% at top,
      rgba(198, 242, 94, 0.18),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(10, 14, 6, 0.92),
      rgba(4, 8, 12, 0.88)
    );

  box-shadow:
    0 0 0 1px rgba(198, 242, 94, 0.32),
    0 0 35px rgba(98, 42, 94, 0.26),
    0 45px 90px rgba(0,0,0,0.85);
}

/* LOW RISK – GREEN SAFE ZONE */
.card:has(.risk-low) {
  background:
    radial-gradient(
      120% 80% at top,
      rgba(94, 242, 161, 0.18),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(6, 14, 10, 0.92),
      rgba(4, 8, 12, 0.88)
    );

  box-shadow:
    0 0 0 1px rgba(94, 242, 161, 0.35),
    0 0 35px rgba(94, 242, 161, 0.25),
    0 45px 90px rgba(0,0,0,0.85);
}
/* ==============================
   ORACLE INTERPRETATION
============================== */
#interpretation {
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
  color: rgba(232, 227, 213, 0.85);
}

/* ==============================
   RAIN BACKGROUND
============================== */
.rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0.6;
}

.drop {
  position: absolute;
  bottom: 100%;
  width: 1.5px;
  height: 70px;
  background: linear-gradient(
    to bottom,
    rgba(169, 221, 211, 0),
    rgba(169, 221, 211, 0.5)
  );
  animation: fall linear infinite;
}

@keyframes fall {
  to { transform: translateY(120vh); }
}

/* ==============================
   SLIME / GRADIENT BACKGROUND
============================== */
.slime-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -3;
  background: #010101;
}

.blob {
  position: absolute;
  width: 350px;
  height: 350px;
  background: #a9ddd3;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
  animation: moveBlob 18s infinite ease-in-out;
}

.blob2 {
  background: #e8e3d5;
  opacity: 0.35;
  animation-duration: 22s;
}

.blob3 {
  background: #a9ddd3;
  opacity: 0.3;
  animation-duration: 26s;
}

@keyframes moveBlob {
  0% { transform: translate(-20%, -20%) scale(1); }
  25% { transform: translate(60vw, 5vh) scale(1.3); }
  50% { transform: translate(25vw, 60vh) scale(0.9); }
  75% { transform: translate(-10vw, 30vh) scale(1.4); }
  100% { transform: translate(-20%, -20%) scale(1); }
}

/* ==============================
   FUTURISTIC LINES
============================== */
.background {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -2;
  pointer-events: none;
}

.line {
  position: absolute;
  width: 2px;
  height: 120px;
  background: linear-gradient(#a9ddd3, transparent);
  opacity: 0.45;
  animation: fall 6s linear infinite;
}

/* ==============================
   SEARCH & LOCATION
============================== */
.location-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.location-container p {
  display: flex;
  margin-top: 2.2%;
}
#search-location {
  width: 120px;
  padding: 2px 3px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid #a9ddd3;
  background-color: #0f0f12;
  color: #e8e3d5;
}

#search-btn {
  padding: 2px 3px;
  font-size: 12px;
  border-radius: 4px;
  border: none;
  background-color: #a9ddd3;
  color: #010101;
  cursor: pointer;
}

/* ==============================
   LIGHTNING
============================== */
.lightning {
  position: fixed;
  inset: 0;
  opacity: 0.6;
  pointer-events: none;
  z-index: -2;
}

/* ==============================
   MOBILE OPTIMIZATION
============================== */
@media (max-width: 768px) {
  .blob {
    width: 220px;
    height: 220px;
    filter: blur(70px);
  }

  .line {
    display: none;
  }

  .rain {
    opacity: 0.4;
  }
}
.card h1 img {
  position: absolute;
  margin-top: 1%;
  margin-left: 3px;
}
/* ==============================
   TABLET
============================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .card {
    max-width: 420px;
  }
}

/* ==============================
   DESKTOP
============================== */
@media (min-width: 1200px) {
  .card {
    max-width: 420px;
  }

  .blob {
    width: 420px;
    height: 420px;
  }
}