/* ==========================================================================
   04 OVERLAY — scrim, sheet, modal, dialog sistem, menu konteks,
   Control Center, Notification Center.
   ========================================================================== */

.ios-scrim {
    position: fixed; inset: 0;
    z-index: var(--z-scrim);
    background: var(--glass-scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base) var(--ease-out);
}
.ios-scrim.is-open { opacity: 1; pointer-events: auto; }

/* ---------- Sheet / Modal (memakai <dialog> asli: Escape menutup) ---------- */
dialog.ios-sheet {
    position: fixed;
    margin: auto;
    padding: 0;
    border: .5px solid var(--glass-line);
    border-radius: var(--r-2xl);
    width: min(560px, calc(100vw - 24px));
    max-height: min(86dvh, 820px);
    color: var(--ios-ink);
    background: var(--glass-overlay-bg);
    -webkit-backdrop-filter: var(--glass-overlay-blur);
    backdrop-filter: var(--glass-overlay-blur);
    box-shadow: var(--glass-hi), var(--sh-4);
    overflow: hidden;
    display: none;
    flex-direction: column;
}
dialog.ios-sheet[open] { display: flex; animation: ios-modal-masuk var(--t-slow) var(--ease-spring); }
dialog.ios-sheet.is-closing { animation: ios-modal-keluar var(--t-base) var(--ease-io) forwards; }
dialog.ios-sheet::backdrop { background: var(--glass-scrim); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ios-sheet-head {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
    padding: 14px 16px 10px;
    border-bottom: .5px solid var(--ios-sep);
}
.ios-sheet-head h2 { grid-column: 2; margin: 0; font-size: var(--fs-headline); font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-sheet-head > :first-child:not(h2) { justify-self: start; }
.ios-sheet-head > :last-child:not(h2) { justify-self: end; grid-column: 3; }
.ios-sheet-body { padding: 18px 18px 20px; overflow-y: auto; flex: 1; min-height: 0; }
.ios-sheet-foot { display: flex; gap: 10px; padding: 12px 16px calc(12px + var(--safe-b)); border-top: .5px solid var(--ios-sep); }
.ios-sheet-foot .ios-btn { flex: 1; }
.ios-grabber { display: none; width: 38px; height: 5px; border-radius: 3px; background: var(--ios-sep-strong); margin: 8px auto 0; }

/* ---------- Dialog sistem (alert iOS) ---------- */
dialog.ios-alertbox {
    padding: 0; border: 0;
    width: min(290px, calc(100vw - 48px));
    border-radius: 22px;
    color: var(--ios-ink);
    background: var(--glass-overlay-bg);
    -webkit-backdrop-filter: var(--glass-overlay-blur);
    backdrop-filter: var(--glass-overlay-blur);
    box-shadow: var(--sh-4);
    text-align: center;
    overflow: hidden;
}
dialog.ios-alertbox[open] { animation: ios-alert-masuk 320ms var(--ease-spring); }
dialog.ios-alertbox::backdrop { background: var(--glass-scrim); }
.ios-alertbox-body { padding: 20px 18px 16px; }
.ios-alertbox-body h2 { margin: 0 0 4px; font-size: var(--fs-headline); font-weight: 600; }
.ios-alertbox-body p { margin: 0; font-size: var(--fs-foot); color: var(--ios-ink-2); }
.ios-alertbox-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: .5px solid var(--ios-sep); }
.ios-alertbox-actions button {
    min-height: 46px; border: 0; background: transparent;
    font: 400 var(--fs-body) var(--font); color: var(--ios-emerald-2);
}
.ios-alertbox-actions button + button { border-left: .5px solid var(--ios-sep); }
.ios-alertbox-actions button.is-default { font-weight: 600; }
.ios-alertbox-actions button.is-destructive { color: var(--ios-red); font-weight: 600; }
.ios-alertbox-actions button:hover { background: color-mix(in srgb, var(--ios-ink) 5%, transparent); }

/* ---------- Menu konteks ---------- */
.ios-menu { position: relative; display: inline-block; }
.ios-menu > summary { list-style: none; }
.ios-menu > summary::-webkit-details-marker { display: none; }
.ios-menu-pop {
    position: absolute;
    z-index: var(--z-sheet);
    right: 0; top: calc(100% + 6px);
    min-width: 230px;
    padding: 6px 0;
    border-radius: 16px;
    background: var(--glass-overlay-bg);
    -webkit-backdrop-filter: var(--glass-overlay-blur);
    backdrop-filter: var(--glass-overlay-blur);
    border: .5px solid var(--glass-line);
    box-shadow: var(--sh-4);
    transform-origin: top right;
    animation: ios-menu-masuk 220ms var(--ease-spring);
}
.ios-menu-item {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    width: 100%;
    min-height: 44px; padding: 0 16px;
    border: 0; background: transparent;
    color: var(--ios-ink) !important;
    font: 400 var(--fs-body) var(--font);
    text-decoration: none !important;
    text-align: left;
}
.ios-menu-item + .ios-menu-item { border-top: .5px solid var(--ios-sep); }
.ios-menu-item:hover { background: color-mix(in srgb, var(--ios-ink) 6%, transparent); }
.ios-menu-item.is-destructive { color: var(--ios-red) !important; }
.ios-menu-item .ios-ic { width: 19px; height: 19px; }

/* ==========================================================================
   CONTROL CENTER dan NOTIFICATION CENTER
   Panel penuh layar dari atas. Hanya kontrol yang benar-benar tersambung
   ke fitur aplikasi (R-26): mode tampilan, efek, kepadatan, koneksi nyata,
   layar penuh, kunci (keluar), tautan ke pengaturan yang ada.
   ========================================================================== */
.ios-panel {
    position: fixed;
    z-index: var(--z-panel);
    inset: 0;
    padding: calc(var(--safe-t) + 70px) 20px calc(var(--safe-b) + 24px);
    overflow-y: auto;
    background: var(--glass-scrim);
    -webkit-backdrop-filter: saturate(160%) blur(34px);
    backdrop-filter: saturate(160%) blur(34px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
}
.ios-panel.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.ios-panel-inner {
    width: min(400px, 100%);
    margin: 0 0 0 auto;
    transform: translateY(-18px) scale(.97);
    transform-origin: top right;
    transition: transform var(--t-slow) var(--ease-spring);
}
.ios-panel.is-open .ios-panel-inner { transform: none; }
.ios-panel--nc .ios-panel-inner { width: min(460px, 100%); margin: 0 auto; transform-origin: top center; }
.ios-panel-close { position: absolute; top: calc(var(--safe-t) + 16px); right: 18px; }

/* Grid Control Center: modul 2x2 + tombol bulat + penggeser */
.ios-cc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ios-cc-mod {
    border-radius: 26px;
    padding: 12px;
    background: var(--glass-float-bg);
    -webkit-backdrop-filter: var(--glass-float-blur);
    backdrop-filter: var(--glass-float-blur);
    border: .5px solid var(--glass-line);
    box-shadow: var(--glass-hi);
    min-width: 0;
    color: var(--ios-ink);
}
.ios-cc-mod--2x2 { grid-column: span 2; grid-row: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center; }
.ios-cc-mod--wide { grid-column: span 4; }
.ios-cc-mod--2x1 { grid-column: span 2; }
.ios-cc-round {
    width: 100%; aspect-ratio: 1;
    border: 0; border-radius: 50%;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--ios-ink) 10%, transparent);
    color: var(--ios-ink);
    transition: background-color var(--t-base), color var(--t-base), transform var(--t-fast);
    position: relative;
}
.ios-cc-round .ios-ic { width: 24px; height: 24px; }
.ios-cc-round:active { transform: scale(.92); }
.ios-cc-round[aria-pressed="true"] { background: var(--ios-emerald); color: var(--ios-on-accent); }
.ios-cc-round.is-warn[aria-pressed="true"] { background: var(--ios-orange); color: #fff; }
.ios-cc-cap { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; text-align: center; color: var(--ios-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-cc-tile {
    display: flex; align-items: center; gap: 10px;
    min-height: 64px; width: 100%;
    padding: 10px 12px;
    border: 0; border-radius: 22px;
    background: var(--glass-float-bg);
    -webkit-backdrop-filter: var(--glass-float-blur);
    backdrop-filter: var(--glass-float-blur);
    border: .5px solid var(--glass-line);
    color: var(--ios-ink) !important;
    font: inherit; text-align: left;
    text-decoration: none !important;
    transition: transform var(--t-fast);
}
.ios-cc-tile:active { transform: scale(.96); }
.ios-cc-tile .ios-tile { --size: 34px; border-radius: 50%; }
.ios-cc-tile strong { display: block; font-size: 13px; font-weight: 600; }
.ios-cc-tile > div span { display: block; font-size: 11.5px; color: var(--ios-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-cc-tile > div { min-width: 0; }
.ios-cc-label { font-size: 12px; font-weight: 600; color: var(--ios-ink-2); margin: 0 0 8px 4px; }

/* Penggeser vertikal ala Control Center (dipakai untuk ukuran teks) */
.ios-cc-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 48px; margin: 0;
    border-radius: 18px;
    background: color-mix(in srgb, var(--ios-ink) 12%, transparent);
    overflow: hidden;
}
.ios-cc-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 48px; background: #fff; box-shadow: -400px 0 0 400px #fff; }
.ios-cc-slider::-moz-range-thumb { width: 2px; height: 48px; border: 0; background: #fff; box-shadow: -400px 0 0 400px #fff; }
html[data-mode="dark"] .ios-cc-slider::-webkit-slider-thumb { background: #e9ece9; box-shadow: -400px 0 0 400px #e9ece9; }

/* Notification Center */
.ios-nc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 4px 14px; }
.ios-nc-head h2 { margin: 0; font-size: var(--fs-title-1); font-weight: 700; letter-spacing: -.025em; }
.ios-nc-date { font-size: var(--fs-foot); font-weight: 600; color: var(--ios-ink-2); margin: 18px 6px 8px; }
.ios-notif {
    position: relative;
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 14px;
    border-radius: 22px;
    background: var(--glass-float-bg);
    -webkit-backdrop-filter: var(--glass-float-blur);
    backdrop-filter: var(--glass-float-blur);
    border: .5px solid var(--glass-line);
    box-shadow: var(--glass-hi), var(--sh-1);
    color: var(--ios-ink) !important;
    text-decoration: none !important;
    touch-action: pan-y;
    transition: transform var(--t-base) var(--ease-out), opacity var(--t-base);
}
.ios-notif + .ios-notif { margin-top: 8px; }
.ios-notif .ios-tile { --size: 38px; border-radius: 10px; }
.ios-notif-body { flex: 1; min-width: 0; }
.ios-notif-top { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-foot); }
.ios-notif-top strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ios-notif-top time { color: var(--ios-ink-3); flex: none; font-size: var(--fs-cap); }
.ios-notif p { margin: 2px 0 0; font-size: var(--fs-foot); color: var(--ios-ink-2); }
.ios-notif.is-read { opacity: .72; }
.ios-notif.is-unread::after {
    content: ""; position: absolute; top: 14px; left: 6px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--ios-blue);
}
.ios-notif-x {
    width: 28px; height: 28px; flex: none; margin: -4px -6px 0 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--ios-ink-3);
    display: grid; place-items: center;
}
.ios-notif-x:hover { background: var(--ios-gray-bg); color: var(--ios-ink); }
/* Kelompok bertumpuk: kepala kelompok (kategori + jumlah + tombol buka),
   lalu kartu teratas dengan "kartu bayangan" di bawahnya. */
.ios-notif-stack { position: relative; margin-bottom: 14px; }
.ios-notif-stack-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 6px 6px; font-size: var(--fs-foot); font-weight: 600; color: var(--ios-ink); }
.ios-notif-stack-head .ios-btn { min-height: 28px; padding: 0 10px; font-size: var(--fs-cap); }
.ios-notif-stack-list { position: relative; }
.ios-notif-stack:not(.is-open) .ios-notif-stack-list > .ios-notif:nth-child(n+2) { display: none; }
.ios-notif-stack.has-many:not(.is-open) .ios-notif-stack-list::after {
    content: "";
    position: absolute; left: 14px; right: 14px; bottom: -7px;
    height: 14px; border-radius: 0 0 18px 18px;
    background: var(--glass-float-bg);
    border: .5px solid var(--glass-line);
    border-top: 0;
    z-index: -1;
}
.ios-nc-date { color: var(--ios-ink); text-shadow: 0 1px 8px color-mix(in srgb, var(--ios-bg) 70%, transparent); }

/* Menu konteks yang sedang terbuka dilepas ke <body> (lihat shell.js):
   diletakkan dengan koordinat layar, di atas bilah tab. */
.ios-menu-pop.ios-menu-pop--lepas {
    position: fixed;
    right: auto;
    z-index: var(--z-sheet);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}