/* ==========================================================================
   LOCK SCREEN — halaman masuk.
   Fokus tunggal per layar: jam besar (terkunci) lalu tombol Buka Kunci
   (lembar masuk). Teks di atas wallpaper memakai bayangan halus supaya
   tetap terbaca di wallpaper terang maupun gelap.
   ========================================================================== */

.ios-lock-page { overflow: hidden; height: 100dvh; }

.ios-lock {
    position: relative;
    z-index: 2;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    justify-items: center;
    padding: calc(var(--safe-t) + 14px) 20px calc(var(--safe-b) + 22px);
    color: var(--ios-ink);
    transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out), filter var(--t-slow);
}
.ios-lock-island {
    width: 126px; height: 36px;
    border-radius: 20px;
    background: #000;
    color: #fff;
    display: flex; align-items: center; justify-content: flex-end;
    padding: 0 12px;
    box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .5);
}
.ios-lock-time { text-align: center; margin-top: clamp(28px, 7vh, 72px); text-shadow: 0 1px 18px color-mix(in srgb, var(--ios-bg) 55%, transparent); }
.ios-lock-date { margin: 0 0 4px; font-size: clamp(17px, 2.4vw, 22px); font-weight: 600; letter-spacing: -.01em; color: var(--ios-ink-2); }
.ios-lock-time h1 { margin: 0; font-weight: 600; }
.ios-lock-time .ios-display {
    font-size: clamp(88px, 21vw, 168px);
    letter-spacing: -.055em;
    color: color-mix(in srgb, var(--ios-ink) 90%, var(--ios-emerald));
    font-weight: 600;
}

.ios-lock-notifs { align-self: end; width: min(420px, 100%); display: grid; gap: 8px; margin-bottom: 26px; }
.ios-lock-notif {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 14px;
    border-radius: 22px;
    animation: ios-turun var(--t-slow) var(--ease-spring) both;
}
.ios-lock-notif + .ios-lock-notif { animation-delay: 80ms; }
.ios-lock-notif .ios-tile, .ios-lock-notif .ios-appicon { --size: 38px; border-radius: 10px; }
.ios-lock-notif > div { min-width: 0; flex: 1; }
.ios-lock-notif p { margin: 2px 0 0; font-size: var(--fs-foot); color: var(--ios-ink-2); }
.ios-lock-notif.is-error { border-color: color-mix(in srgb, var(--ios-red) 40%, transparent); }
.ios-lock-notif .ios-notif-top { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-foot); }
.ios-lock-notif .ios-notif-top time { color: var(--ios-ink-3); font-size: var(--fs-cap); }

.ios-lock-foot { width: min(520px, 100%); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ios-lock-shortcut {
    width: 52px; height: 52px; flex: none;
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--ios-ink) !important;
    border: .5px solid var(--glass-line);
    transition: transform var(--t-fast) var(--ease-spring);
}
.ios-lock-shortcut:active { transform: scale(1.15); }
.ios-lock-swipe {
    flex: 1;
    display: grid; justify-items: center; gap: 10px;
    min-height: 52px;
    border: 0; background: transparent;
    color: var(--ios-ink-2);
    font: 500 var(--fs-foot)/1.2 var(--font);
    border-radius: 18px;
}
.ios-lock-swipe:hover .ios-lock-bar { width: 150px; }
.ios-lock-bar { width: 134px; height: 5px; border-radius: 3px; background: var(--ios-ink); opacity: .85; transition: width var(--t-base) var(--ease-spring); }

/* ---------- Lembar masuk ---------- */
.ios-unlock {
    position: fixed;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    padding: 20px;
    background: var(--glass-scrim);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
}
.ios-unlock-card {
    width: min(400px, 100%);
    border-radius: var(--r-2xl);
    padding: 28px 22px 18px;
    text-align: center;
    transform: translateY(40px) scale(.96);
    transition: transform var(--t-slow) var(--ease-spring);
}
.ios-unlock-icon { --size: 72px; margin: -2px auto 14px; box-shadow: 0 14px 30px -12px rgba(8, 80, 50, .6); }
.ios-unlock-group { text-align: left; }
.ios-unlock-row {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    min-height: 52px;
    padding: 0 8px 0 14px;
    color: var(--ios-ink-3);
}
.ios-unlock-row + .ios-unlock-row::before { content: ""; position: absolute; top: 0; left: 42px; right: 0; height: .5px; background: var(--ios-sep); }
.ios-unlock-input {
    flex: 1; min-width: 0;
    border: 0; background: transparent;
    min-height: 50px;
    color: var(--ios-ink);
    font: 400 17px var(--font);
    outline: none !important;   /* fokus ditandai garis bawah baris (lihat :focus-within) */
}
.ios-unlock-input::placeholder { color: var(--ios-ink-3); }
.ios-unlock-row:focus-within { color: var(--ios-emerald); }
.ios-unlock-row:focus-within::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--ios-emerald); }
.ios-unlock-input[aria-invalid="true"] { color: var(--ios-red-ink); }

/* Status membuka: layar kunci naik dan memudar, lembar masuk muncul. */
.is-unlocking .ios-lock { transform: translateY(-14%); opacity: 0; filter: blur(10px); pointer-events: none; }
.is-unlocking .ios-unlock { opacity: 1; visibility: visible; transition-delay: 0s; }
.is-unlocking .ios-unlock-card { transform: none; }
/* Masuk: kartu mengecil, seperti aplikasi dibuka dari ikon. */
.is-entering .ios-unlock-card { transform: scale(.94); opacity: .7; transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow); }

@media (max-width: 767px) {
    .ios-lock-notifs { margin-bottom: 18px; }
    .ios-unlock { align-items: end; padding: 0; }
    .ios-unlock-card { width: 100%; border-radius: 32px 32px 0 0; padding-bottom: calc(18px + var(--safe-b)); }
}
@media (max-height: 560px) {
    .ios-lock-time { margin-top: 8px; }
    .ios-lock-time .ios-display { font-size: 72px; }
}