/* Default: dark theme */
:root {
    --bg: #0f172a;
    --card: #111827;
    --muted: #9ca3af;
    --text: #e5e7eb;
    --accent: #38bdf8;
    --accent-strong: #0ea5e9;
    --input-bg: #0b1220;
    --input-text: var(--text);
}
  
  /* 🌤 Clear sky / ☀️ */
body.clear {
    --bg: #87ceeb;
    --card: rgba(255, 255, 255, 0.75);
    --text: #1f2937;    /* dark text */
    --muted: #374151;
    --input-bg: rgba(255, 255, 255, 0.9);
    --input-text: #1e293b; /* teks lebih gelap */
}
  
  /* 🌨 Snow */
body.snow {
    --bg: #f0f4f8;
    --card: rgba(255, 255, 255, 0.8);
    --text: #1e293b;    /* darker text */
    --muted: #475569;
    --input-bg: rgba(255, 255, 255, 0.9);
    --input-text: #1e293b; /* teks lebih gelap */
}
  
  /* 🌧 Rain */
body.rain {
    --bg: #1e3a8a;
    --card: rgba(17, 24, 39, 0.65);
    --text: #f1f5f9;    /* light text */
    --muted: #cbd5e1;
}
  
  /* ⚡ Thunderstorm */
body.thunder {
    --bg: #1f2937;
    --card: rgba(31, 41, 55, 0.85);
    --text: #f9fafb;    /* white text */
    --muted: #d1d5db;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--text);
    background: radial-gradient(1200px 500px at 20% -50%, #172554 0%, rgba(23, 37, 84, 0) 60%),
                radial-gradient(1000px 400px at 120% -30%, #083344 0%, rgba(8, 51, 68, 0) 60%),
                var(--bg);
}

.card {
    background: var(--card);
    border: 1px solid #1f2937;
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); /* Safari */
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  }

.app {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 1rem;
    padding: 2rem 1rem 3rem;
    max-width: 720px;
    margin: 0 auto;
}

.title {
    margin: 0 0 .5rem 0;
    font-weight: 700;
    letter-spacing: .5px;
}

.controls {
    display: flex;
    gap: .75rem;
    align-items: center;
}

.search { flex: 1; display: flex; gap: .5rem; }
.search__input {
    flex: 1;
    padding: .75rem .9rem;
    border-radius: .6rem;
    border: 1px solid #1f2937;
    background: var(--input-bg);
    color: var(--input-text);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.btn {
    padding: .7rem .95rem;
    border-radius: .6rem;
    border: 1px solid #1f2937;
    background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    cursor: pointer;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
    background: transparent;
    border-color: #334155;
    color: var(--accent);
}
.btn--ghost:hover { background: #0b1220; }

.status {
    background: #0b1220;
    border: 1px solid #1f2937;
    border-radius: .6rem;
    padding: .75rem .9rem;
    color: var(--muted);
}

.current {
    background: linear-gradient(180deg, rgba(56, 189, 248, .15), rgba(2, 132, 199, .05));
    border: 1px solid #1f2937;
    border-radius: 1rem;
    padding: 1rem;
}

.current__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: var(--muted);
}
.current__content {
    margin-top: .5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.current__temp { font-size: 3.5rem; font-weight: 700; letter-spacing: 1px; }
.current__unit { font-size: 1.5rem; color: var(--muted); margin-left: .25rem; }
.current__meta { display: grid; gap: .25rem; }
.current__summary { font-size: 1.1rem; }
.current__details { color: var(--muted); }

.footer { color: var(--muted); font-size: .9rem; margin-top: .5rem; }
.footer a { color: var(--accent); text-decoration: none; }
.footer a:hover { color: var(--accent-strong); text-decoration: underline; }


.flash { 
  position: fixed; 
  top:0; left:0; right:0; bottom:0; 
  background:white; 
  opacity:0.8; 
  animation: flash 0.3s ease; 
}
@keyframes flash { 
  from { opacity:0.8; } to { opacity:0; }
}

@media (max-width: 520px) {
    .current__content { flex-direction: column; align-items: flex-start; }
    .controls { flex-direction: column; align-items: stretch; }
    .btn--ghost { width: 100%; }
}