body { margin:0; height:100vh; display:grid; place-items:center; background:#e6e3ee;
       font-family:-apple-system, system-ui, sans-serif; color:white; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* ===== bingkai HP ===== */
.phone { position:relative; width:390px; height:730px; border-radius:48px; overflow:hidden;
         box-shadow:0 0 0 9px #14131a;
         background:url("spiderman.jpg") center / cover no-repeat; }
/* kalau mau balik ke gradien, ganti baris background di atas dengan:
   background:linear-gradient(180deg,#1b1f4a 0%,#47295f 44%,#c4566b 78%,#f0955f 100%); */

.layer { position:absolute; inset:0; }

.island { position:absolute; top:11px; left:50%; transform:translateX(-50%);
          width:120px; height:34px; background:#000; border-radius:20px; z-index:10; }
.status { position:absolute; top:16px; left:30px; right:30px; z-index:10;
          display:flex; justify-content:space-between; font-size:15px; font-weight:600;
          pointer-events:none; }
.kanan { display:flex; align-items:center; gap:6px; }
.ikon  { height:24px; width:auto; }
.pojok { display:flex; align-items:center; gap:6px; }
.jam-kecil { display:none; }
.phone.keypad .op { display:none; }
.phone.keypad .jam-kecil { display:inline; }

/* ===== 1. LAYAR KUNCI (paling atas) ===== */
#lock { z-index:3; text-align:center; transition:transform .5s cubic-bezier(.3,.8,.25,1);
        touch-action:none; user-select:none; }
#lock.seret { transition:none; }          /* saat ditarik, ikut jari tanpa jeda */
#lock.gone  { transform:translateY(-100%); }

.tgl { font-size:20px; margin-top:90px; }
.jam { font-size:120px; font-weight:750; letter-spacing:-5px; margin:2px 0 0; line-height:1;
       font-variant-numeric:tabular-nums;
       /* efek kaca */
       background:linear-gradient(180deg,
         rgba(255,255,255,.80) 0%,
         rgba(255,255,255,.30) 55%,
         rgba(255,255,255,.55) 100%);
       -webkit-background-clip:text;
       background-clip:text;
       color:transparent;
       -webkit-text-fill-color:transparent;
       -webkit-text-stroke:1px rgba(255,255,255,.5);
       filter:drop-shadow(0 4px 14px rgba(20,10,50,.28)); }

.notifs { position:absolute; left:14px; right:14px; bottom:110px; display:flex;
          flex-direction:column; gap:8px; text-align:left; }
.notif { display:grid; grid-template-columns:34px 1fr auto; gap:2px 11px; padding:11px 14px;
         border-radius:20px; background:rgba(24,20,38,.45); backdrop-filter:blur(20px); }
.icon { grid-row:span 2; width:34px; height:34px; border-radius:9px;
        background:rgba(255,255,255,.22); display:grid; place-items:center; }
.icon img { width:100%; height:100%; object-fit:cover; border-radius:9px; }
.judul { font-weight:600; font-size:15px; }
.waktu { font-size:12px; opacity:.65; }
.isi { grid-column:2/4; font-size:14px; line-height:1.3; }

/* widget musik */
.musik { padding:12px 14px; border-radius:20px; background:rgba(24,20,38,.45);
         backdrop-filter:blur(20px); }
.musik-atas { display:flex; align-items:center; gap:12px; }
.cover { width:48px; height:48px; border-radius:8px; object-fit:cover; }
.info { min-width:0; }
.lagu { font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.artis { font-size:14px; opacity:.7; }
.progres { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:11px; opacity:.85; }
.garis { flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.3); }
.garis-isi { width:12%; height:100%; border-radius:2px; background:rgba(255,255,255,.9); }
.kontrol { display:flex; justify-content:space-between; align-items:center; margin-top:8px; padding:0 6px; }
.kontrol svg { width:24px; height:24px; }
.kontrol #tombol-putar svg { width:34px; height:34px; }

.buka { position:absolute; bottom:28px; left:0; right:0; font-size:14px; opacity:.85; }
.bar { position:absolute; bottom:9px; left:50%; transform:translateX(-50%);
       width:136px; height:5px; border-radius:3px; background:white; }

       /* tombol kaca: senter dan kamera */
.kaca { width:50px; height:50px; border-radius:50%; color:white;
        display:grid; place-items:center;
        background:linear-gradient(180deg,
          rgba(255,255,255,.30) 0%,
          rgba(255,255,255,.08) 55%,
          rgba(255,255,255,.18) 100%);
        -webkit-backdrop-filter:blur(18px) saturate(1.4);
        backdrop-filter:blur(18px) saturate(1.4);
        border:1px solid rgba(255,255,255,.4);
        box-shadow:inset 0 1px 1px rgba(255,255,255,.55),
                   inset 0 -1px 2px rgba(255,255,255,.15),
                   0 6px 18px rgba(20,10,50,.28);
        transition:background .2s, color .2s; }
.kaca svg { width:22px; height:22px; filter:drop-shadow(0 1px 3px rgba(20,10,50,.35)); }
.kaca:active { transform:scale(.94); }
.kaca.aktif { background:rgba(255,255,255,.85); color:#1c1b22; }
.kaca.aktif svg { filter:none; }
.sudut-kiri  { position:absolute; bottom:38px; left:44px; }
.sudut-kanan { position:absolute; bottom:38px; right:44px; }

/* ===== 2. KEYPAD (di bawah layar kunci, awalnya tak terlihat) ===== */
#pass { z-index:2; background:rgba(14,10,28,.55); backdrop-filter:blur(30px);
        display:flex; flex-direction:column; align-items:center;
        opacity:0; pointer-events:none; transition:opacity .4s; }
#pass.tampil { opacity:1; pointer-events:auto; }
#pass h2 { font-size:19px; font-weight:500; margin:90px 0 22px; }
.dots { display:flex; gap:18px; }
.dots i { width:13px; height:13px; border-radius:50%; border:1.5px solid white; }
.dots i.isi-dot { background:white; }
.dots.getar { animation:getar .45s; }
@keyframes getar { 20%{transform:translateX(-14px)} 40%{transform:translateX(12px)}
                   60%{transform:translateX(-8px)} 80%{transform:translateX(5px)} }
.petunjuk { min-height:40px; margin:16px 30px 0; font-size:14px; text-align:center; opacity:.8; }
.pad { display:grid; grid-template-columns:repeat(3,76px); gap:14px 22px; margin-top:auto; margin-bottom:50px; }
.k { width:76px; height:76px; border-radius:50%; background:rgba(255,255,255,.16); font-size:32px; }
.k:active { background:rgba(255,255,255,.42); }
.k.teks { background:none; font-size:17px; }

/* ===== NOTIFIKASI X YANG TERBANG MASUK ===== */
.notif-pop { position:absolute; left:12px; right:12px; top:54px; z-index:15;
             display:grid; grid-template-columns:36px 1fr; column-gap:10px; row-gap:2px;
             padding:14px 16px 16px; border-radius:28px;
             background:#272727; color:#fff; cursor:pointer;
             box-shadow:0 12px 30px rgba(0,0,0,.45);
             transform:translateY(-170%) scale(.96); opacity:0; pointer-events:none;
             transition:transform .65s cubic-bezier(.2,1.25,.3,1), opacity .35s; }
.notif-pop.tampil { transform:none; opacity:1; pointer-events:auto; }
.np-ikon { grid-row:span 2; width:36px; height:36px; border-radius:10px; object-fit:cover; }
.np-judul { font-weight:700; font-size:15px; align-self:end; }
.np-waktu { font-size:12.5px; color:#a8a8a8; align-self:start; }
.np-pengirim { grid-column:1 / -1; margin-top:10px; font-weight:700; font-size:15px; }
.np-pesan { grid-column:1 / -1; margin-top:8px; font-size:15px; }