/* Latar utama: foto penuh layar yang dipilih menurut jam + cuaca Jakarta, di-blur kuat.
   Foto dicari di /assets/latar/{waktu}-{cuaca}.jpg; kalau belum ada, dipakai placeholder di bawah. */
.latar{position:fixed;inset:-80px;z-index:0;pointer-events:none;overflow:hidden}
.latar .lp{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(40px) saturate(1.25);transform:scale(1.08)}
/* Selubung tipis supaya kartu kaca tetap terbaca */
.latar::after{content:"";position:absolute;inset:0;background:rgba(240,242,246,.30)}
:root[data-theme="dark"] .latar::after{background:rgba(6,8,12,.42)}

/* ---------- Placeholder suasana (sengaja kasar: setelah di-blur yang terasa hanya warna dan cahayanya) ---------- */
.lt-pagi-cerah{background:
  radial-gradient(16% 22% at 72% 28%,#fff6dc,transparent 70%),
  linear-gradient(0deg,#6f7377 0 22%,transparent 22%),
  linear-gradient(90deg,transparent 8%,#8d949b 8% 18%,transparent 18% 60%,#9aa2a9 60% 72%,transparent 72%),
  linear-gradient(180deg,#f3d8c2,#cfe0ee 55%,#a9bccb)}
.lt-pagi-hujan{background:
  radial-gradient(10% 8% at 30% 70%,rgba(255,214,150,.6),transparent 70%),
  linear-gradient(0deg,#4f565c 0 22%,transparent 22%),
  linear-gradient(90deg,transparent 10%,#7d868e 10% 22%,transparent 22% 64%,#858e96 64% 76%,transparent 76%),
  linear-gradient(180deg,#c9d1d8,#a7b2bc 60%,#77838d)}
.lt-siang-cerah{background:
  radial-gradient(20% 26% at 60% 12%,#ffffff,transparent 70%),
  linear-gradient(0deg,#b8a68f 0 24%,transparent 24%),
  linear-gradient(90deg,transparent 4%,#d7cfc4 4% 20%,transparent 20% 56%,#cfc5b8 56% 74%,transparent 74%),
  linear-gradient(180deg,#bfe0fb,#e9f2f9 55%,#f3ece2)}
.lt-siang-hujan{background:
  linear-gradient(0deg,#555c62 0 24%,transparent 24%),
  linear-gradient(90deg,transparent 6%,#7c858c 6% 20%,transparent 20% 58%,#737c84 58% 74%,transparent 74%),
  linear-gradient(180deg,#b3bcc4,#8f9aa3 60%,#66717a)}
.lt-sore-cerah{background:
  radial-gradient(22% 26% at 24% 58%,#ffd38a,transparent 70%),
  linear-gradient(0deg,#4a3132 0 24%,transparent 24%),
  linear-gradient(90deg,transparent 40%,#6a4448 40% 52%,transparent 52% 78%,#5b3a40 78% 92%,transparent 92%),
  linear-gradient(180deg,#f6b07a,#df7f6c 50%,#7c4a5c)}
.lt-sore-hujan{background:
  radial-gradient(10% 8% at 64% 72%,rgba(255,170,120,.55),transparent 70%),
  linear-gradient(0deg,#3d3840 0 24%,transparent 24%),
  linear-gradient(90deg,transparent 30%,#5a525e 30% 44%,transparent 44% 70%,#514955 70% 86%,transparent 86%),
  linear-gradient(180deg,#958c9a,#6f6676 55%,#4a4350)}
.lt-malam-cerah{background:
  radial-gradient(7% 9% at 22% 62%,rgba(255,170,90,.9),transparent 70%),
  radial-gradient(6% 8% at 58% 56%,rgba(98,211,217,.7),transparent 70%),
  radial-gradient(6% 8% at 80% 64%,rgba(255,125,156,.7),transparent 70%),
  linear-gradient(0deg,#0b0d12 0 22%,transparent 22%),
  linear-gradient(90deg,transparent 12%,#141a26 12% 26%,transparent 26% 52%,#171d2a 52% 70%,transparent 70%),
  linear-gradient(180deg,#0e1424,#1b2136 60%,#0c0f18)}
.lt-malam-hujan{background:
  radial-gradient(6% 18% at 24% 82%,rgba(255,170,90,.55),transparent 70%),
  radial-gradient(5% 16% at 60% 84%,rgba(98,211,217,.45),transparent 70%),
  radial-gradient(5% 16% at 82% 80%,rgba(255,125,156,.45),transparent 70%),
  radial-gradient(7% 9% at 24% 52%,rgba(255,170,90,.7),transparent 70%),
  radial-gradient(6% 8% at 60% 48%,rgba(98,211,217,.55),transparent 70%),
  linear-gradient(180deg,#0a0d16,#121826 55%,#0b0e16)}

/* ---------- Panel demo (?demo) ---------- */
.ld{position:fixed;right:16px;bottom:16px;z-index:40;width:300px;padding:16px;border-radius:16px;font:500 13px/1.4 var(--sans);color:var(--ink);
  background:var(--mac-glass,rgba(255,255,255,.6));-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  box-shadow:var(--mac-shadow,0 20px 50px -20px rgba(0,0,0,.3))}
.ld h3{margin:0 0 10px;font-size:13px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.ld h3 button{all:unset;cursor:pointer;color:var(--muted);font-weight:600;font-size:12px}
.ld .row{display:flex;align-items:center;gap:10px;margin:8px 0}
.ld .t{font-size:22px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-width:66px}
.ld .slot{color:var(--muted);font-weight:600}
.ld input[type=range]{width:100%;accent-color:var(--accent)}
.ld .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:3px;border-radius:10px;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.ld .seg button{appearance:none;border:0;background:none;padding:7px 0;border-radius:8px;cursor:pointer;font:600 12.5px var(--sans);color:var(--muted)}
.ld .seg button[aria-pressed="true"]{background:var(--surface,#fff);color:var(--ink);box-shadow:0 2px 6px -2px rgba(0,0,0,.2)}
.ld .now{all:unset;cursor:pointer;font-weight:600;color:var(--accent);font-size:12.5px}
.ld .src{font-size:11.5px;color:var(--muted);margin-top:10px;word-break:break-all}
.ld.min{width:auto;padding:10px 14px}.ld.min .body{display:none}
@media (max-width:700px){.ld{left:12px;right:12px;width:auto;bottom:12px}}