/*
 * Peringatan dini (BMKG): spanduk status, cuaca kini, prakiraan harian & per 3 jam, gempa.
 * Merah hanya bila peringatan BMKG mengenai Jambidan; kuning = waspada di DIY; hijau = aman.
 */
.pd-label { margin: 0; font-size: .8125rem; color: var(--tinta-2); }

.pd-spanduk { display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: center; padding: 1.25rem 1.35rem; border: 1px solid; border-radius: var(--radius-kartu); background: var(--permukaan); }
.pd-spanduk--aman { border-color: rgba(var(--rambu-rgb), .55); background: var(--rambu-muda); }
.pd-spanduk--waspada { border-color: var(--waspada); background: #2a2208; }
.pd-spanduk--awas { border-color: var(--awas); background: #2a1217; box-shadow: 0 0 0 3px rgba(229, 23, 58, .25); }
.pd-spanduk-status { display: flex; gap: 1rem; align-items: flex-start; }
.pd-spanduk-status > i { font-size: 2rem; line-height: 1; }
.pd-spanduk--aman .pd-spanduk-status > i { color: var(--rambu); }
.pd-spanduk--waspada .pd-spanduk-status > i { color: var(--waspada); }
.pd-spanduk--awas .pd-spanduk-status > i { color: var(--awas-teks); }
.pd-spanduk h2 { font-size: 1.35rem; margin: .1rem 0 .25rem; letter-spacing: -.02em; }
.pd-spanduk-status p:last-child { margin: 0; }
.pd-kini { display: flex; gap: .85rem; align-items: center; padding-left: 2rem; border-left: 1px solid var(--garis-kuat); }
.pd-kini > i { font-size: 2.6rem; line-height: 1; color: var(--waspada); }
.pd-kini p { margin: 0; }
.pd-kini-suhu { font-family: var(--huruf-judul); font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.pd-kini-suhu span { font-family: var(--huruf-teks); font-size: 1rem; font-weight: 700; }
.pd-kini-ket { font-size: .875rem; color: var(--tinta-2); }
.pd-spanduk-aksi { grid-column: 1 / -1; justify-self: start; }

.pd-harian { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.pd-hari { padding: 1.1rem 1.25rem; }
.pd-hari > i { display: block; font-size: 2.2rem; margin: .4rem 0 .2rem; color: var(--waspada); }
.pd-hari--hujan > i, .pd-jam--hujan > i { color: var(--sungai); }
.pd-hari-cuaca { margin: 0; font-weight: 700; }
.pd-hari-suhu { margin: .1rem 0 .35rem; font-family: var(--huruf-judul); font-size: 1.5rem; font-weight: 800; }

.pd-jalur { display: flex; gap: .6rem; overflow-x: auto; padding: 1rem 0 .6rem; scroll-snap-type: x proximity; }
.pd-jam { flex: 0 0 112px; scroll-snap-align: start; text-align: center; padding: .8rem .5rem; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--permukaan); }
.pd-jam > i { font-size: 1.6rem; color: var(--waspada); }
.pd-jam-suhu { margin: 0; font-weight: 800; font-size: 1.2rem; }
.pd-jam--hujan { border-color: rgba(91, 156, 240, .55); }

.pd-wilayah { margin: .35rem 0 0; font-size: .875rem; color: var(--tinta-2); }
.pd-tautan { display: inline-flex; gap: .35rem; align-items: center; margin-top: .4rem; font-weight: 700; font-size: .9375rem; }
.pd-mag { font-family: var(--huruf-judul); font-size: 2.6rem; font-weight: 800; line-height: 1; margin: 0 0 .5rem; color: var(--siaga); }
.pd-mag-kecil { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--permukaan-2); box-shadow: inset 0 0 0 1px var(--garis-kuat); }
.pd-mag-kecil--dekat { background: #47250a; color: #ffc999; box-shadow: none; }
.pd-basi { display: flex; gap: .5rem; align-items: center; color: var(--waspada); font-size: .9375rem; }

.pd-beranda { padding-block: clamp(1.5rem, 4vw, 2.5rem) 0; }

@media (max-width: 767.98px) {
    .pd-spanduk { grid-template-columns: 1fr; }
    .pd-kini { padding-left: 0; padding-top: 1rem; border-left: 0; border-top: 1px solid var(--garis-kuat); }
}

/* Menu utama: dengan tambahan "Peringatan", label jangan patah dua baris di layar lebar. */
@media (min-width: 992px) {
    .kepala-situs .nav-link, .kepala-situs .btn { white-space: nowrap; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .kepala-situs .nav-link { padding-inline: .3rem; font-size: .875rem; }
}

/* Ponsel: kartu harian dibuat mendatar (ikon di kiri) agar tiga hari muat tanpa banyak gulir. */
@media (max-width: 575.98px) {
    .pd-harian { gap: .6rem; }
    .pd-hari { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; padding: .85rem 1rem; }
    .pd-hari > * { grid-column: 2; }
    .pd-hari > i { grid-column: 1; grid-row: 1 / span 4; margin: 0; font-size: 2.4rem; }
    .pd-hari-suhu { font-size: 1.25rem; margin: 0; }
}

/* Perkiraan risiko 7 hari, kualitas udara, gunung api */
.pd-risiko-hari { align-items: flex-start; }
.pd-risiko-tgl { width: 64px; flex: none; line-height: 1.2; }
.pd-risiko-tgl b { display: block; }
.pd-risiko-tgl span { font-size: .8125rem; color: var(--tinta-2); }
.pd-risiko-ikon { font-size: 1.6rem; color: var(--waspada); flex: none; }
.pd-mag small { font-size: 1rem; color: var(--tinta-2); }
.pd-mag--aman { color: var(--rambu); }
.pd-mag--rendah { color: var(--waspada); }
.pd-mag--sedang { color: var(--siaga); }
.pd-mag--tinggi { color: var(--awas-teks); }
.pd-level { font-size: 1rem; padding: .3rem .8rem; }
.pd-gunung { display: flex; flex-wrap: wrap; gap: .5rem; }
.pd-gunung a { text-decoration: none; }

/* ---------- Menu utama: dropdown, tanda peringatan, tombol petugas ---------- */
.kepala-situs .nav-link[data-aktif] { color: var(--di-rambu); background: var(--rambu); }
.kepala-situs .dropdown-toggle::after { vertical-align: .15em; margin-left: .35em; }
.kepala-situs .dropdown-menu { background: var(--permukaan); border: 1px solid var(--garis-kuat); border-radius: var(--radius); padding: .4rem; min-width: 15rem; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.kepala-situs .dropdown-item { display: flex; align-items: center; gap: .65rem; border-radius: 8px; padding: .55rem .75rem; font-weight: 700; color: var(--tinta-2); white-space: nowrap; }
.kepala-situs .dropdown-item > i { color: var(--rambu); font-size: 1.05rem; width: 1.2rem; text-align: center; }
.kepala-situs .dropdown-item:hover, .kepala-situs .dropdown-item:focus-visible { background: rgba(255, 255, 255, .07); color: var(--tinta); }
.kepala-situs .dropdown-item[aria-current="page"] { background: var(--rambu-muda); color: var(--rambu-tua); }
.kepala-situs .dropdown-item .menu-tanda { margin-left: auto; }
@media (max-width: 991.98px) {
    .kepala-situs .dropdown-menu { box-shadow: none; border: 0; background: transparent; padding: 0 0 .4rem 1.4rem; }
}

/* Titik tanda: merah berdenyut = peringatan berlaku di Jambidan, kuning = waspada. */
.menu-tanda { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-left: .35rem; vertical-align: .1em; position: relative; }
.menu-tanda--waspada { background: var(--waspada); }
.menu-tanda--awas { background: var(--awas-teks); }
.menu-tanda--awas::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: tanda-denyut 1.4s ease-out infinite; }
@keyframes tanda-denyut { to { transform: scale(2.6); opacity: 0; } }

/* Sub-navigasi halaman Peringatan */
.pd-tab { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: 1.5rem; scrollbar-width: thin; }
.pd-tab a { flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--garis-kuat); color: var(--tinta-2); font-weight: 700; font-size: .9375rem; text-decoration: none; white-space: nowrap; }
.pd-tab a:hover { color: var(--tinta); border-color: var(--tinta-2); }
.pd-tab a[aria-current="page"] { background: var(--rambu); border-color: var(--rambu); color: var(--di-rambu); }
.pd-tab .menu-tanda { margin-left: .1rem; }

/* Tombol petugas: ikon saja, cincin gradasi berputar pelan + ikon "bernapas". */
.tombol-petugas { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--tinta); text-decoration: none; isolation: isolate; transition: transform .25s var(--lentur); }
.tombol-petugas > i { font-size: 1.2rem; line-height: 1; animation: petugas-napas 3.2s ease-in-out infinite; }
.tombol-petugas::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--permukaan); z-index: -1; }
.tombol-petugas-cincin { position: absolute; inset: 0; border-radius: 50%; z-index: -2; background: conic-gradient(from 0deg, var(--rambu), #5b9cf0, var(--waspada), var(--rambu)); animation: petugas-putar 6s linear infinite; opacity: .85; }
.tombol-petugas:hover, .tombol-petugas:focus-visible { transform: translateY(-2px) scale(1.06); color: var(--rambu-tua); }
.tombol-petugas:hover .tombol-petugas-cincin { animation-duration: 1.6s; opacity: 1; box-shadow: 0 0 18px rgba(var(--rambu-rgb), .55); }
.tombol-petugas:hover > i { animation: petugas-goyang .5s ease-in-out; }
@keyframes petugas-putar { to { transform: rotate(1turn); } }
@keyframes petugas-napas { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes petugas-goyang { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 65% { transform: rotate(10deg); } }
@media (max-width: 991.98px) {
    .tombol-petugas { width: auto; height: 44px; padding: 0 1.1rem 0 .95rem; border-radius: 999px; gap: .55rem; grid-auto-flow: column; }
    .tombol-petugas::before, .tombol-petugas-cincin { border-radius: 999px; }
    .tombol-petugas-cincin { animation: none; background: linear-gradient(90deg, var(--rambu), #5b9cf0, var(--waspada)); }
    .tombol-petugas-teks { font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) {
    .tombol-petugas > i, .tombol-petugas-cincin, .menu-tanda--awas::after { animation: none !important; }
}
html.akses-tenang .tombol-petugas > i, html.akses-tenang .tombol-petugas-cincin, html.akses-tenang .menu-tanda--awas::after { animation: none !important; }

/* ---------- Nama situs kapital semua ---------- */
.merek-nama, .kaki-isi > div:first-child h2, .kaki-raksasa { text-transform: uppercase; }
.merek-nama { letter-spacing: .01em; }

/* ---------- Tombol "Lapor" mengambang (kanan bawah) ---------- */
.tombol-lapor {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 1025; isolation: isolate;
    display: inline-flex; align-items: center; gap: .5rem; height: 56px; padding: 0 1.35rem 0 1.1rem; border-radius: 999px;
    background: var(--waspada); color: #1a1400; font-family: var(--huruf-judul); font-weight: 800; font-size: 1.1rem; text-decoration: none;
    box-shadow: 0 10px 28px rgba(245, 183, 0, .35), 0 2px 6px rgba(0, 0, 0, .4);
    transition: transform .25s var(--lentur), box-shadow .25s;
}
.tombol-lapor > i { font-size: 1.3rem; transform-origin: 30% 60%; animation: lapor-goyang 4s ease-in-out infinite; }
.tombol-lapor-denyut { position: absolute; inset: 0; border-radius: inherit; background: var(--waspada); z-index: -1; animation: lapor-denyut 2.2s ease-out infinite; }
.tombol-lapor:hover, .tombol-lapor:focus-visible { color: #1a1400; transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 34px rgba(245, 183, 0, .5), 0 2px 6px rgba(0, 0, 0, .4); }
.tombol-lapor--peta { bottom: 2.25rem; }
@keyframes lapor-denyut { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.35, 1.6); opacity: 0; } }
@keyframes lapor-goyang { 0%, 82%, 100% { transform: rotate(0); } 86% { transform: rotate(-16deg); } 90% { transform: rotate(12deg); } 94% { transform: rotate(-8deg); } }
/* Tombol ke atas naik di atas tombol lapor agar tidak bertumpuk. */
body:has(.tombol-lapor) .ke-atas { bottom: 5.25rem; right: 1.5rem; }
@media (max-width: 575.98px) {
    .tombol-lapor { right: .75rem; bottom: .75rem; height: 52px; padding: 0 1.1rem 0 .95rem; font-size: 1rem; }
    body:has(.tombol-lapor) .ke-atas { bottom: 4.6rem; right: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .tombol-lapor > i, .tombol-lapor-denyut { animation: none !important; } }
html.akses-tenang .tombol-lapor > i, html.akses-tenang .tombol-lapor-denyut { animation: none !important; }