/* =========================================================
   Gravy's iPhone — style.css
   Ukuran dasar: iPhone 15 Pro Max (430 x 932 pt), dark mode
   ========================================================= */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --blue:#0a84ff;--green:#30d158;--red:#ff453a;--orange:#ff9f0a;--yellow:#ffd60a;
  --bg:#000;--card:#1c1c1e;--card2:#2c2c2e;--sep:rgba(255,255,255,.14);--dim:#8e8e93;
}
html,body{height:100%;background:#050507;overflow:hidden;font-family:var(--font);color:#fff;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit;user-select:text;-webkit-user-select:text}
svg.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
::-webkit-scrollbar{display:none}

#stage{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 30%,#14151b 0%,#050507 70%)}
#phone{position:absolute;left:50%;top:50%;width:430px;height:932px;transform:translate(-50%,-50%) scale(var(--s,1));
  border-radius:68px;background:#000;
  box-shadow:0 0 0 3px #4a4a50,0 0 0 11px #17171a,0 0 0 13px #34343a,0 40px 90px rgba(0,0,0,.75),inset 0 0 0 2px #000}
#phone.fullscreen{border-radius:0;box-shadow:none}
#phone.fullscreen [id^=btn-]{display:none}
#phone [id^=btn-]{position:absolute;width:5px;background:linear-gradient(90deg,#2a2a2e,#4b4b52);border-radius:2px;z-index:0}
#btn-action{left:-15px;top:150px;height:34px}
#btn-volup{left:-15px;top:215px;height:62px}
#btn-voldown{left:-15px;top:293px;height:62px}
#btn-side{right:-15px;top:250px;height:102px;cursor:pointer;z-index:0}
#screen{position:absolute;inset:0;border-radius:56px;overflow:hidden;background:#000;isolation:isolate}
#phone.fullscreen #screen{border-radius:0}
.layer{position:absolute;inset:0}

/* ---------- status bar / island / home bar ---------- */
#statusbar{position:absolute;top:0;left:0;right:0;height:54px;z-index:100;pointer-events:none;display:flex;justify-content:space-between;align-items:center;padding:6px 38px 0 46px}
#statusbar .sb-left{width:110px;text-align:center;font-weight:600;font-size:17px;letter-spacing:.2px}
#statusbar .sb-right{display:flex;gap:6px;align-items:center;justify-content:flex-end;width:110px}
#island{position:absolute;top:11px;left:50%;width:124px;height:36px;margin-left:-62px;border-radius:20px;background:#000;z-index:101;pointer-events:none}
#island i{position:absolute;right:14px;top:11px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2a3350,#07080d 60%)}
#homebar{position:absolute;left:0;right:0;bottom:0;height:34px;z-index:100;display:grid;place-items:end center;padding-bottom:8px;cursor:pointer;touch-action:none}
#homebar b{display:block;width:142px;height:5px;border-radius:3px;background:#fff;opacity:.9}
#phone[data-state=lock] #homebar,#phone[data-state=passcode] #homebar{pointer-events:none}
#phone[data-state=home] #homebar{pointer-events:none}

/* ---------- LOCK ---------- */
#lock{z-index:50;touch-action:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s}
#lock.dragging{transition:none}
#lock.gone{transform:translateY(-100%);opacity:0;pointer-events:none}
.lock-bg{position:absolute;inset:0;background:#02040b url(assets/wallpaper-lock.jpg) center/cover no-repeat}
.lock-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 60%,rgba(0,0,0,.5))}
.lock-content{position:absolute;inset:0;padding-top:72px;display:flex;flex-direction:column;align-items:center}
.lock-date{font-size:21px;font-weight:600;opacity:.88;letter-spacing:.2px;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.lock-time{font-size:108px;font-weight:600;line-height:1;letter-spacing:-2px;margin-top:2px;font-variant-numeric:tabular-nums;text-shadow:0 2px 14px rgba(0,0,0,.35);color:rgba(255,255,255,.95)}
.lock-notifs{width:100%;padding:0 12px;margin-top:auto;margin-bottom:128px;display:flex;flex-direction:column;gap:8px}
.notif{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:22px;background:rgba(40,42,52,.55);backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);cursor:pointer;animation:notifIn .6s cubic-bezier(.2,.9,.3,1.2) backwards}
.notif:nth-child(2){animation-delay:.12s}.notif:nth-child(3){animation-delay:.24s}
@keyframes notifIn{from{opacity:0;transform:translateY(30px) scale(.96)}}
.notif .appicon{width:38px;height:38px;border-radius:9px;flex:none}
.notif .nt{flex:1;min-width:0}
.notif .nt-top{display:flex;justify-content:space-between;gap:8px}
.notif b{font-size:15.5px;font-weight:600}
.notif small{font-size:13px;color:rgba(255,255,255,.6);white-space:nowrap}
.notif p{font-size:15px;line-height:1.25;color:rgba(255,255,255,.92);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lock-bottom{position:absolute;left:0;right:0;bottom:0;height:130px;display:flex;align-items:flex-start;justify-content:space-between;padding:34px 46px 0}
.lock-btn{width:52px;height:52px;border-radius:50%;background:rgba(40,42,52,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:grid;place-items:center;cursor:default}
.lock-btn svg{width:22px;height:22px}
.swipe-hint{position:absolute;left:0;right:0;bottom:19px;text-align:center;font-size:15px;color:rgba(255,255,255,.85);letter-spacing:.3px;animation:hint 2.4s ease-in-out infinite;cursor:pointer}
@keyframes hint{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.lock-bottom::after{content:"";position:absolute;left:50%;bottom:8px;width:142px;height:5px;margin-left:-71px;border-radius:3px;background:#fff;opacity:.9}

/* ---------- PASSCODE ---------- */
#passcode{z-index:60;background:rgba(8,10,20,.45);backdrop-filter:blur(34px) brightness(.75);-webkit-backdrop-filter:blur(34px) brightness(.75);opacity:0;pointer-events:none;transition:opacity .3s}
#passcode.show{opacity:1;pointer-events:auto}
.pc-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding-top:118px}
.pc-title{font-size:20px;font-weight:500;margin-bottom:26px}
.pc-dots{display:flex;gap:22px;margin-bottom:46px}
.pc-dots i{width:14px;height:14px;border-radius:50%;border:1.5px solid #fff;transition:background .12s}
.pc-dots i.on{background:#fff}
.pc-dots.shake{animation:shake .5s}
@keyframes shake{20%,60%{transform:translateX(-14px)}40%,80%{transform:translateX(14px)}}
.pc-pad{display:grid;grid-template-columns:repeat(3,78px);gap:16px 26px}
.pc-key{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.17);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background .15s;line-height:1}
.pc-key:active,.pc-key.tap{background:rgba(255,255,255,.55);transition:none}
.pc-key b{font-size:34px;font-weight:400}
.pc-key small{font-size:10px;letter-spacing:2.4px;font-weight:600;margin-top:3px;height:10px}
.pc-key.blank{background:none;pointer-events:none}
.pc-foot{position:absolute;left:0;right:0;bottom:66px;display:flex;justify-content:space-between;padding:0 62px;font-size:17px}
.pc-foot span{cursor:pointer}

/* ---------- HOME ---------- */
#home{z-index:1;background:#000;display:flex;flex-direction:column;padding:64px 22px 0}
.home-grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:12px;row-gap:14px;align-content:start}
.widget{grid-column:span 2;grid-row:span 2;height:158px;border-radius:24px;overflow:hidden;position:relative;cursor:pointer;transition:transform .15s}
.widget:active{transform:scale(.97)}
.w-label{grid-column:span 2;text-align:center;font-size:12px;color:#c7c7cc;margin-top:-8px;margin-bottom:4px}
.w-notes{background:#1c1c1e}
.w-notes .wn-h{display:flex;align-items:center;gap:6px;padding:12px 14px 6px;color:var(--yellow);font-weight:600;font-size:14px}
.w-notes .wn-h svg{width:15px;height:15px}
.w-notes h4{font-size:15px;padding:0 14px;font-weight:600}
.w-notes p{font-size:13px;line-height:1.3;color:#aaa;padding:3px 14px 0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;white-space:pre-line}
.w-weather{background:linear-gradient(170deg,#1a3a6e,#0c1d3f);padding:14px 16px;display:flex;flex-direction:column}
.w-weather .ww-city{font-size:15px;font-weight:600;display:flex;align-items:center;gap:4px}
.w-weather .ww-t{font-size:50px;font-weight:300;line-height:1.05;margin-top:2px}
.w-weather .ww-ic{margin-top:auto;font-size:19px}
.w-weather .ww-d{font-size:13px;color:rgba(255,255,255,.85);margin-top:1px}
.ic{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font-size:12px;letter-spacing:.1px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.ic .appicon{transition:transform .12s,filter .12s}
.ic:active .appicon{transform:scale(.92);filter:brightness(.7)}
.appicon{width:62px;height:62px;border-radius:15px;display:block;position:relative;overflow:hidden;flex:none}
.appicon svg{width:100%;height:100%;display:block}
.appicon.cal{background:#fff;color:#000;text-align:center;font-family:var(--font)}
.appicon.cal b{display:block;color:#ff3b30;font-size:11px;font-weight:600;margin-top:7px;letter-spacing:.3px;text-transform:uppercase}
.appicon.cal span{display:block;font-size:34px;font-weight:300;line-height:1;margin-top:0}
.home-bottom{margin-top:auto;padding-bottom:20px}
.home-search{width:92px;margin:0 auto 14px;padding:7px 0;border-radius:18px;background:rgba(255,255,255,.14);font-size:13px;text-align:center;color:#ddd}
.dock{margin:0 -8px;padding:14px 20px 14px;border-radius:36px;background:rgba(255,255,255,.17);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);display:grid;grid-template-columns:repeat(4,1fr);justify-items:center}
.dock .ic{font-size:0}
.page-dots{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
.page-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}
.page-dots i:first-child{background:#fff}
#home.hidden-under .home-grid,#home.hidden-under .home-bottom{filter:brightness(.6) blur(2px)}

/* ---------- APP SHELL ---------- */
#apps{z-index:10;pointer-events:none}
.app{position:absolute;inset:0;background:var(--bg);display:none;flex-direction:column;padding-top:54px;opacity:0;transform:scale(.12);border-radius:40px;overflow:hidden;
  transition:transform .42s cubic-bezier(.22,.85,.25,1),opacity .22s,border-radius .42s;pointer-events:auto}
.app.show{display:flex}
.app.open{opacity:1;transform:none;border-radius:0}
.app-body{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:44px}
.sheet{position:absolute;inset:0;background:var(--bg);z-index:5;padding-top:54px;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.3,.8,.3,1);box-shadow:-10px 0 30px rgba(0,0,0,.5)}
.sheet.in{transform:none}
.nav{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 14px;flex:none}
.nav .back{display:flex;align-items:center;gap:2px;color:var(--blue);font-size:17px;cursor:pointer}
.nav .back svg{width:26px;height:26px;stroke-width:2.4}
.bigtitle{font-size:34px;font-weight:700;padding:2px 18px 8px;letter-spacing:.3px}
.searchbar{margin:0 16px 8px;height:36px;border-radius:10px;background:#1c1c1e;display:flex;align-items:center;gap:6px;padding:0 10px;color:#8e8e93;font-size:17px}
.searchbar svg{width:17px;height:17px}
.tabbar{display:flex;flex:none;height:84px;padding:8px 6px 0;background:rgba(18,18,20,.94);border-top:1px solid var(--sep);backdrop-filter:blur(20px)}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:#8e8e93;font-weight:500}
.tabbar button.on{color:var(--tc,var(--blue))}
.tabbar svg{width:26px;height:26px}
.pill{display:inline-flex;padding:2px 8px;border-radius:12px}
.blue{color:var(--blue)}

/* ---------- INSTAGRAM ---------- */
#app-instagram{--bg:#000}
.ig-top{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;height:44px;flex:none}
.ig-user{display:flex;align-items:center;gap:6px;font-size:21px;font-weight:700}
.ig-user svg{width:16px;height:16px;stroke-width:3}
.ig-icons{display:flex;gap:22px}
.ig-prof{display:flex;align-items:center;gap:26px;padding:10px 16px 6px}
.ig-av{width:88px;height:88px;border-radius:50%;padding:3px;background:conic-gradient(#f9ce34,#ee2a7b,#6228d7,#f9ce34);flex:none}
.ig-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid #000;display:block;background:#222}
.ig-stats{flex:1;display:flex;justify-content:space-around;text-align:center}
.ig-stats b{display:block;font-size:18px;font-weight:700}
.ig-stats span{font-size:14px}
.ig-bio{padding:4px 16px 12px;font-size:14.5px;line-height:1.35}
.ig-bio b{font-weight:600;display:block}
.ig-bio .cat{color:#a8a8a8}
.ig-btns{display:flex;gap:7px;padding:0 16px 14px}
.ig-btns button{flex:1;height:32px;border-radius:9px;background:#262626;font-weight:600;font-size:14px}
.ig-btns button.sm{flex:none;width:34px;display:grid;place-items:center}
.ig-tabs{display:flex;border-top:1px solid #262626}
.ig-tabs div{flex:1;height:44px;display:grid;place-items:center;color:#777;border-bottom:1.5px solid transparent}
.ig-tabs div.on{color:#fff;border-color:#fff}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.ig-grid div{aspect-ratio:4/5;background:#1a1a1a;cursor:pointer;overflow:hidden}
.ig-grid img{width:100%;height:100%;object-fit:cover;display:block}
.ig-nav{display:flex;justify-content:space-around;align-items:center;height:84px;padding:0 6px 22px;border-top:1px solid #1c1c1c;background:#000;flex:none}
.ig-nav .mini{width:27px;height:27px;border-radius:50%;object-fit:cover;border:1.5px solid #fff}
.ig-post-h{display:flex;align-items:center;gap:10px;padding:8px 12px;font-weight:600;font-size:14px}
.ig-post-h img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.ig-post-h .more{margin-left:auto}
.ig-post-img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:#1a1a1a}
.ig-act{display:flex;gap:16px;padding:10px 12px 4px}
.ig-act .sv{margin-left:auto}
.ig-cap{padding:2px 12px;font-size:14px;line-height:1.35}
.ig-cap b{font-weight:600}
.ig-cap .mention,.ig-cap .m{color:#e0f1ff}
.ig-meta{padding:2px 12px;font-size:13px;color:#a8a8a8}
.ig-meta.d{font-size:11.5px;text-transform:uppercase;margin-top:4px}

/* ---------- PHOTOS ---------- */
#app-photos{--bg:#000}
.ph-seg{display:flex;margin:0 16px 10px;background:#1c1c1e;border-radius:9px;padding:2px;font-size:13px;font-weight:500}
.ph-seg div{flex:1;text-align:center;padding:5px 0;border-radius:7px;color:#ddd}
.ph-seg div.on{background:#636366;color:#fff}
.ph-month{padding:18px 16px 8px;font-size:21px;font-weight:700}
.ph-month small{display:block;font-size:13px;font-weight:400;color:#8e8e93;margin-top:1px}
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.ph-grid.one{grid-template-columns:1fr;padding:0 14px}
.ph-grid.one img{border-radius:12px;aspect-ratio:4/3}
.ph-grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block;cursor:pointer;background:#1a1a1a}
.ph-count{text-align:center;color:#8e8e93;font-size:15px;padding:26px 0 30px}
.ph-view{background:#000}
.ph-view .stage{flex:1;display:grid;place-items:center;overflow:hidden}
.ph-view .stage img{max-width:100%;max-height:100%;object-fit:contain}
.ph-view .ttl{text-align:center;line-height:1.2}
.ph-view .ttl b{display:block;font-size:15px}.ph-view .ttl span{font-size:11.5px;color:#a0a0a5}
.ph-tools{display:flex;justify-content:space-around;height:84px;padding:12px 30px 0;color:#fff}

/* ---------- MAIL ---------- */
#app-mail{--bg:#000}
.ml-row{display:flex;gap:8px;padding:11px 14px 11px 8px;position:relative}
.ml-row::after{content:"";position:absolute;left:30px;right:0;bottom:0;border-bottom:1px solid var(--sep)}
.ml-dot{width:10px;flex:none;padding-top:7px}
.ml-dot i{display:block;width:10px;height:10px;border-radius:50%;background:var(--blue)}
.ml-main{flex:1;min-width:0}
.ml-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ml-top b{font-size:16.5px;font-weight:600}
.ml-top span{font-size:14px;color:#8e8e93;display:flex;gap:4px;align-items:center}
.ml-sub{font-size:15px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-pre{font-size:14.5px;color:#8e8e93;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:1px}
.ml-foot{display:flex;justify-content:space-between;align-items:center;height:84px;padding:6px 20px 0;background:rgba(18,18,20,.94);border-top:1px solid var(--sep);flex:none;font-size:11px;align-items:flex-start;padding-top:12px}
.ml-foot div{text-align:center;line-height:1.3}

/* ---------- CALENDAR ---------- */
#app-calendar{--bg:#000}
.cal-head{display:flex;align-items:center;justify-content:space-between;padding:4px 14px 6px;flex:none}
.cal-head .mn{font-size:30px;font-weight:700;color:#fff;display:flex;align-items:baseline;gap:8px}
.cal-head .mn span{color:#ff453a;font-size:30px}
.cal-nav{display:flex;gap:16px;color:#ff453a}
.cal-dow,.cal-days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;padding:0 8px}
.cal-dow{font-size:12px;color:#8e8e93;font-weight:600;padding-bottom:6px;border-bottom:1px solid var(--sep);margin:0 8px;padding:0 0 6px}
.cal-dow div:nth-child(6),.cal-dow div:nth-child(7){color:#636366}
.cal-days div{height:52px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:6px;font-size:20px;cursor:pointer;position:relative}
.cal-days div em{font-style:normal;width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.cal-days div.out{color:#48484a}
.cal-days div.today em{background:#ff453a;color:#fff;font-weight:600}
.cal-days div.sel:not(.today) em{background:#3a3a3c}
.cal-days div.today.sel em{box-shadow:0 0 0 2px #000,0 0 0 4px #ff453a}
.cal-days div i{position:absolute;bottom:3px;width:5px;height:5px;border-radius:50%;background:#8e8e93}
.cal-ev{flex:1;overflow-y:auto;border-top:1px solid var(--sep);padding:12px 18px 44px;background:#0a0a0a}
.cal-ev h5{font-size:13px;color:#8e8e93;font-weight:600;text-transform:uppercase;margin-bottom:10px;letter-spacing:.4px}
.ev{display:flex;gap:10px;padding:10px 12px;border-radius:10px;background:#1c1c1e;margin-bottom:8px;align-items:stretch}
.ev i{width:4px;border-radius:2px;background:#ff375f;flex:none}
.ev b{display:block;font-size:16px;font-weight:600}.ev span{font-size:13px;color:#8e8e93}
.ev-none{color:#636366;font-size:16px;text-align:center;padding-top:20px}

/* ---------- CLOCK ---------- */
#app-clock{--bg:#000;--tc:#ff9f0a}
.ck-title{font-size:34px;font-weight:700;padding:2px 18px 10px}
.wc{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--sep)}
.wc small{display:block;color:#8e8e93;font-size:14px}
.wc b{font-size:23px;font-weight:400}
.wc .t{font-size:52px;font-weight:200;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.al{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--sep)}
.al .t{font-size:52px;font-weight:200;line-height:1}
.al.off .t,.al.off small{color:#636366}
.al small{display:block;font-size:14px;margin-top:2px}
.sw{width:51px;height:31px;border-radius:16px;background:#39393d;position:relative;transition:.2s;flex:none;cursor:pointer}
.sw::after{content:"";position:absolute;left:2px;top:2px;width:27px;height:27px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.sw.on{background:var(--green)}.sw.on::after{transform:translateX(20px)}
.ck-plus{color:#ff9f0a;font-size:32px;line-height:1;cursor:pointer}
.sw-time{text-align:center;font-size:82px;font-weight:200;font-variant-numeric:tabular-nums;padding:42px 0 26px;letter-spacing:-1px}
.sw-btns{display:flex;justify-content:space-between;padding:0 26px 18px}
.rbtn{width:84px;height:84px;border-radius:50%;font-size:17px;display:grid;place-items:center;border:2px solid #000;outline:2px solid transparent;background:#333336}
.rbtn.g{background:#0c3a19;color:#30d158}.rbtn.r{background:#3d1412;color:#ff453a}.rbtn.o{background:#3a2600;color:#ff9f0a}
.rbtn.dim{color:#666}
.laps{padding:0 18px}
.laps div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--sep);font-size:17px;font-variant-numeric:tabular-nums}
.tm-sel{display:flex;justify-content:center;gap:6px;padding:34px 0 28px}
.tm-sel label{display:flex;flex-direction:column;align-items:center;font-size:13px;color:#aaa;gap:6px}
.tm-sel select{background:#1c1c1e;border:0;border-radius:12px;font-size:36px;font-weight:300;padding:10px 6px;text-align:center;text-align-last:center;-webkit-appearance:none;appearance:none;width:96px;color:#fff}
.tm-big{text-align:center;font-size:82px;font-weight:200;padding:50px 0 34px;font-variant-numeric:tabular-nums}
.banner{position:absolute;left:12px;right:12px;top:60px;z-index:20;padding:14px 16px;border-radius:20px;background:rgba(50,50,56,.92);backdrop-filter:blur(20px);font-size:15px;animation:notifIn .4s}

/* ---------- NOTES ---------- */
#app-notes{--bg:#000;--tc:#ffd60a}
.nt-sec{padding:14px 20px 6px;font-size:14px;font-weight:600;color:#8e8e93;text-transform:none}
.nt-list{margin:0 16px;background:#1c1c1e;border-radius:12px;overflow:hidden}
.nt-item{padding:11px 16px 11px;position:relative;cursor:pointer}
.nt-item+.nt-item::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:1px solid var(--sep)}
.nt-item b{font-size:16.5px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-item p{font-size:14px;color:#8e8e93;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-item p span{color:#fff;margin-right:8px}
.nt-item p em{font-style:normal}
.nt-folder{display:flex;align-items:center;gap:4px;font-size:12px;color:#8e8e93;margin-top:3px}
.nt-folder svg{width:14px;height:14px}
.nt-foot{display:flex;justify-content:space-between;align-items:flex-start;height:84px;padding:12px 22px 0;background:rgba(18,18,20,.94);border-top:1px solid var(--sep);flex:none;font-size:11px;color:#fff}
.nt-foot span{position:absolute;left:0;right:0;text-align:center;font-size:11px;top:12px;pointer-events:none}
.nt-doc{flex:1;overflow-y:auto;padding:4px 20px 60px}
.nt-doc .dt{text-align:center;font-size:12px;color:#8e8e93;margin:8px 0 14px}
.nt-doc h1{font-size:28px;font-weight:700;margin-bottom:8px;outline:0}
.nt-doc .bd{font-size:17px;line-height:1.45;white-space:pre-wrap;outline:0;word-break:break-word}
.nt-doc .bd.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13.5px;line-height:1.5;background:#161618;border-radius:10px;padding:14px;color:#d6e2ff;tab-size:2}
.nt-tools{display:flex;justify-content:space-around;align-items:center;height:84px;padding:10px 30px 0;color:#ffd60a;align-items:flex-start;flex:none}

/* ---------- WEATHER ---------- */
#app-weather{--bg:#0b1a36;background:linear-gradient(180deg,#27518f 0%,#14305f 38%,#0a1a38 100%)}
#app-weather .app-body{padding-bottom:50px}
.wx-top{text-align:center;padding:14px 0 6px}
.wx-top h2{font-size:34px;font-weight:400}
.wx-top .big{font-size:96px;font-weight:200;line-height:1;margin:2px 0 0 14px}
.wx-top .cond{font-size:21px;font-weight:500}
.wx-top .hl{font-size:20px;font-weight:500;margin-top:2px}
.wx-card{margin:12px 16px;border-radius:20px;background:rgba(255,255,255,.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:12px 14px;border:1px solid rgba(255,255,255,.07)}
.wx-card .hd{font-size:12.5px;color:rgba(255,255,255,.65);text-transform:uppercase;font-weight:600;letter-spacing:.3px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.18);margin-bottom:10px;display:flex;gap:6px;align-items:center}
.wx-hours{display:flex;gap:22px;overflow-x:auto;padding:2px 2px 4px}
.wx-hours div{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:15px;font-weight:500;flex:none;min-width:38px}
.wx-hours div span{font-size:13px;color:rgba(255,255,255,.8)}
.wx-hours div em{font-style:normal;font-size:24px}
.wx-day{display:grid;grid-template-columns:64px 34px 40px 1fr 40px;align-items:center;gap:8px;padding:9px 0;border-top:1px solid rgba(255,255,255,.14);font-size:19px}
.wx-day:first-of-type{border-top:0}
.wx-day .lo{color:rgba(255,255,255,.6);text-align:right}
.wx-day .hi{text-align:right}
.wx-day .bar{height:5px;border-radius:3px;background:rgba(0,0,0,.28);position:relative}
.wx-day .bar i{position:absolute;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#6ad1ff,#ffd04d)}
.wx-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 16px}
.wx-grid .wx-card{margin:0;min-height:130px}
.wx-grid .v{font-size:34px;font-weight:500;margin-top:2px}
.wx-grid .s{font-size:13.5px;color:rgba(255,255,255,.8);margin-top:8px;line-height:1.25}
.wx-load{text-align:center;padding:30px;color:rgba(255,255,255,.7)}

/* ---------- PHONE / CALL ---------- */
#app-call{--bg:#000;--tc:#0a84ff}
.cl-nav{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:44px;flex:none}
.cl-seg{display:flex;background:#1c1c1e;border-radius:9px;padding:2px;font-size:13px;font-weight:600;width:170px}
.cl-seg div{flex:1;text-align:center;padding:5px 0;border-radius:7px}
.cl-seg div.on{background:#636366}
.cl-row{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 36px;position:relative}
.cl-row::after{content:"";position:absolute;left:36px;right:0;bottom:0;border-bottom:1px solid var(--sep)}
.cl-row .ar{position:absolute;left:12px;top:50%;margin-top:-8px;width:16px;height:16px;color:#8e8e93}
.cl-row .nm{flex:1;min-width:0}
.cl-row .nm b{font-size:17px;font-weight:600;display:block}
.cl-row .nm span{font-size:14px;color:#8e8e93}
.cl-row.miss .nm b{color:#ff453a}
.cl-row .tm{font-size:15px;color:#8e8e93}
.cl-row .inf{color:#0a84ff;width:22px;height:22px}
.cl-sec{padding:8px 16px;font-size:13px;color:#8e8e93;background:#0d0d0e;font-weight:600}
.cl-ct{display:flex;gap:12px;align-items:center;padding:11px 20px;position:relative;font-size:17px;font-weight:600}
.cl-ct::after{content:"";position:absolute;left:20px;right:0;bottom:0;border-bottom:1px solid var(--sep)}
.kp-num{text-align:center;font-size:36px;height:56px;margin-top:30px;letter-spacing:1px;font-weight:300;padding:0 40px;overflow:hidden;white-space:nowrap}
.kp-pad{display:grid;grid-template-columns:repeat(3,80px);gap:16px 24px;justify-content:center;margin-top:20px}
.kp-key{width:80px;height:80px;border-radius:50%;background:#262628;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;transition:background .1s}
.kp-key:active{background:#6a6a6e}
.kp-key b{font-size:34px;font-weight:400}.kp-key small{font-size:10px;letter-spacing:2px;font-weight:600;height:11px;margin-top:2px;color:#d0d0d0}
.kp-call{width:80px;height:80px;border-radius:50%;background:#30d158;display:grid;place-items:center;grid-column:2}
.kp-call svg{width:34px;height:34px;fill:#fff;stroke:none}
.kp-del{display:grid;place-items:center;color:#8e8e93}
.calling{position:absolute;inset:0;z-index:30;background:linear-gradient(#2b2d42,#0d0e16);display:flex;flex-direction:column;align-items:center;padding-top:150px;animation:fade .3s}
@keyframes fade{from{opacity:0}}
.calling h2{font-size:34px;font-weight:400;margin-top:14px}
.calling p{color:#bbb;margin-top:4px;font-size:18px}
.calling .end{position:absolute;bottom:110px;width:74px;height:74px;border-radius:50%;background:#ff453a;display:grid;place-items:center}
.calling .end svg{width:34px;height:34px;fill:#fff;transform:rotate(135deg)}
.vm-empty{text-align:center;color:#8e8e93;margin-top:200px;font-size:20px}

/* ---------- TELEGRAM ---------- */
#app-telegram{--bg:#000;--tc:#3e88f7;--tg:#3e88f7}
.tg-nav{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:44px;flex:none;color:var(--tg);font-size:17px}
.tg-nav b{color:#fff;font-weight:600;font-size:17px;position:absolute;left:0;right:0;text-align:center;pointer-events:none}
.tg-search{margin:2px 14px 8px;height:36px;border-radius:10px;background:#1c1c1d;color:#8e8e93;display:flex;align-items:center;justify-content:center;gap:6px;font-size:16px}
.tg-search svg{width:16px;height:16px}
.tg-row{display:flex;gap:11px;padding:8px 14px;position:relative;cursor:pointer}
.tg-row:active{background:#1c1c1d}
.tg-row.pin{background:#0e0e10}
.tg-row .tx{flex:1;min-width:0;border-bottom:1px solid #1d1d1f;padding-bottom:9px;margin-bottom:-9px}
.tg-row:last-child .tx{border:0}
.tg-top{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:2px}
.tg-top b{font-size:16.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.tg-top b svg{width:13px;height:13px;color:#8e8e93}
.tg-time{font-size:14px;color:#8e8e93;display:flex;align-items:center;gap:3px;flex:none}
.tg-time .ck{color:#3e88f7;width:17px;height:17px}
.tg-bot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:1px}
.tg-pre{font-size:15.5px;color:#8e8e93;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tg-pre i{font-style:normal;color:#fff}
.tg-bdg{min-width:22px;height:22px;border-radius:11px;background:#3e88f7;font-size:13.5px;font-weight:600;display:grid;place-items:center;padding:0 6px;flex:none}
.tg-bdg.mute{background:#5b5b60}
.tg-pinic{color:#8e8e93;flex:none}
.av{border-radius:50%;display:grid;place-items:center;font-weight:600;color:#fff;flex:none;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.tg-tabs{--tc:#3e88f7}
.tg-chat{--bg:#0e1621;background:#0e1621}
.tg-chat .tg-head{display:flex;align-items:center;gap:10px;padding:0 12px 0 6px;height:50px;background:#17212b;border-bottom:1px solid #0a1018;flex:none}
.tg-chat .tg-head .back{color:#6ab3f3;display:flex;align-items:center;cursor:pointer}
.tg-chat .tg-head .back svg{width:30px;height:30px}
.tg-chat .tg-head .hn{flex:1;min-width:0;line-height:1.2}
.tg-chat .tg-head .hn b{display:block;font-size:16.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-chat .tg-head .hn span{font-size:13px;color:#7f91a4}
.tg-msgs{flex:1;overflow-y:auto;padding:8px 10px 10px;display:flex;flex-direction:column;background:
  radial-gradient(circle at 20% 15%,rgba(60,90,130,.14),transparent 45%),radial-gradient(circle at 85% 80%,rgba(40,70,110,.16),transparent 45%),#0e1621}
.tg-day{align-self:center;margin:10px 0 8px;padding:3px 11px;border-radius:14px;background:rgba(22,32,44,.75);font-size:13px;font-weight:500;color:#cfd8e3}
.bub{max-width:80%;padding:6px 9px 5px 10px;border-radius:17px;font-size:16.5px;line-height:1.28;margin-top:2px;position:relative;word-break:break-word;white-space:pre-wrap}
.bub.in{align-self:flex-start;background:#182533;border-bottom-left-radius:5px}
.bub.out{align-self:flex-end;background:#2b5278;border-bottom-right-radius:5px}
.bub.in.first{margin-top:7px}.bub.out.first{margin-top:7px}
.bub .sn{display:block;font-size:14.5px;font-weight:600;margin-bottom:1px}
.bub .mt{float:right;margin:7px 0 -3px 12px;font-size:11.5px;color:#7d92a6;display:flex;gap:2px;align-items:center;line-height:1}
.bub.out .mt{color:#8cc4f1}
.bub .mt svg{width:15px;height:15px}
.tg-input{display:flex;align-items:center;gap:8px;padding:8px 10px 38px;background:#17212b;flex:none;color:#7f91a4}
.tg-input input{flex:1;height:36px;border-radius:18px;background:#0e1621;border:1px solid #223040;padding:0 14px;outline:0;font-size:16.5px}
.tg-input svg{width:26px;height:26px}
.tg-input .snd{color:#5eb5f7;display:none}
.tg-input.typing .snd{display:block}.tg-input.typing .mic{display:none}

/* ---------- MUSIC (Spotify) ---------- */
#app-music{--bg:#121212;--tc:#1ed760}
.sp-head{padding:6px 18px 10px;display:flex;align-items:center;justify-content:space-between}
.sp-head h2{font-size:28px;font-weight:800}
.sp-chips{display:flex;gap:8px;padding:0 18px 14px}
.sp-chips span{padding:6px 14px;border-radius:16px;background:#2a2a2a;font-size:13.5px}
.sp-chips span.on{background:#1ed760;color:#000;font-weight:600}
.sp-hero{display:flex;align-items:center;gap:12px;padding:8px 18px 18px}
.sp-cover{background:linear-gradient(135deg,#2b2b2b,#1b1b1b);border-radius:5px;display:grid;place-items:center;color:#555;flex:none}
.sp-cover svg{width:46%;height:46%}
.sp-track{display:flex;align-items:center;gap:12px;padding:8px 18px;cursor:pointer}
.sp-track:active{background:#1f1f1f}
.sp-track .nm{flex:1;min-width:0}
.sp-track b{display:block;font-size:16.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-track span{font-size:13.5px;color:#a7a7a7}
.sp-track.on b{color:#1ed760}
.eq{display:none;gap:2px;align-items:flex-end;height:14px}
.sp-track.on.playing .eq{display:flex}
.eq i{width:3px;background:#1ed760;animation:eq 0.9s infinite ease-in-out}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:3px}50%{height:14px}}
.sp-mini{position:absolute;left:8px;right:8px;bottom:92px;height:56px;border-radius:9px;background:#3a2a4a;background:linear-gradient(90deg,#2d3a34,#26332d);display:none;align-items:center;gap:10px;padding:0 12px 0 8px;z-index:4;box-shadow:0 4px 18px rgba(0,0,0,.5)}
.sp-mini.show{display:flex}
.sp-mini .nm{flex:1;min-width:0}.sp-mini b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sp-mini span{font-size:12px;color:#b9c2bd}
.sp-mini .pr{position:absolute;left:8px;right:8px;bottom:0;height:2px;background:rgba(255,255,255,.2)}
.sp-mini .pr i{display:block;height:100%;background:#fff;width:0}
.sp-np{--bg:#2d3a34;background:linear-gradient(#35463e,#121212 85%)}
.sp-np .cv{width:calc(100% - 56px);margin:18px 28px 0;aspect-ratio:1;border-radius:8px}
.sp-np .ti{padding:26px 28px 0}
.sp-np .ti b{font-size:24px;font-weight:700;display:block}
.sp-np .ti span{color:#b3b3b3;font-size:16px}
.sp-bar{margin:22px 28px 0}
.sp-bar input{width:100%;accent-color:#fff;height:4px}
.sp-bar div{display:flex;justify-content:space-between;font-size:12px;color:#b3b3b3;margin-top:4px}
.sp-ctl{display:flex;align-items:center;justify-content:space-between;padding:12px 44px 0}
.sp-ctl .pp{width:68px;height:68px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center}
.sp-ctl .pp svg{width:30px;height:30px;fill:#000;stroke:none}
.sp-ctl svg{width:30px;height:30px;fill:#fff;stroke:none}
.sp-embed{margin:16px 20px 0}
.sp-embed iframe{width:100%;border:0;border-radius:12px;height:152px;background:#1a1a1a}
.sp-note{font-size:12px;color:#b3b3b3;margin:8px 28px 0;text-align:center}

/* ---------- Logo-only apps ---------- */
.wiggle{animation:wig .35s}
@keyframes wig{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}

/* ikon kalender kecil (notifikasi) */
.notif .appicon.cal b{font-size:7px;margin-top:4px}
.notif .appicon.cal span{font-size:21px;margin-top:1px}

/* =========================================================
   v2 — Story, kontak, banner, telepon masuk/aktif
   ========================================================= */
.st-bar{display:flex;gap:14px;padding:6px 14px 10px;overflow-x:auto}
.st-it{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none;width:66px;cursor:pointer}
.st-it span{font-size:12px;color:#c9c9ce;max-width:66px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-ring{position:relative;padding:3px;border-radius:50%;background:conic-gradient(from 200deg,#34c759,#1c9fff,#3e88f7,#34c759)}
.st-ring .av{border:3px solid #000}
.st-ring.seen{background:#4a4a4f}
.st-plus{position:absolute;right:-2px;bottom:-1px;width:21px;height:21px;border-radius:50%;background:#3e88f7;border:2px solid #000;font-style:normal;font-weight:700;font-size:15px;line-height:17px;text-align:center}
.story-view{position:absolute;inset:0;z-index:30;background:#000;opacity:0;transform:scale(.96);transition:opacity .22s,transform .22s;touch-action:none}
.story-view.in{opacity:1;transform:none}
.sv-img{position:absolute;inset:0;display:grid;place-items:center}
.sv-img img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.sv-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 22%,transparent 72%,rgba(0,0,0,.65))}
.sv-top{position:absolute;left:0;right:0;top:58px;padding:0 10px}
.sv-bars{display:flex;gap:4px}
.sv-bars .bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.sv-bars .bar i{display:block;height:100%;background:#fff;width:0}
.sv-head{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:15px}
.sv-head b{font-weight:600}.sv-head small{color:rgba(255,255,255,.75);font-size:13px}
.sv-x{margin-left:auto;cursor:pointer;padding:4px}
.sv-bottom{position:absolute;left:0;right:0;bottom:0;padding:10px 12px 40px;display:flex;align-items:center;gap:10px}
.sv-in{flex:1;height:44px;border-radius:22px;border:1.5px solid rgba(255,255,255,.7);background:rgba(0,0,0,.3);padding:0 18px;font-size:16px;outline:0;color:#fff}
.sv-in::placeholder{color:rgba(255,255,255,.75)}
.sv-bottom button{width:44px;height:44px;display:grid;place-items:center;flex:none}
.sv-bottom svg{width:28px;height:28px}
.sv-like.liked svg{fill:#ff3b5c;stroke:#ff3b5c;animation:pop .35s}
@keyframes pop{40%{transform:scale(1.35)}}
.sv-toast{position:absolute;left:50%;bottom:104px;transform:translateX(-50%) translateY(10px);padding:8px 16px;border-radius:18px;background:rgba(30,30,34,.9);font-size:14px;opacity:0;transition:.25s;pointer-events:none;white-space:nowrap}
.sv-toast.on{opacity:1;transform:translateX(-50%)}
.ct-list{padding-bottom:50px}
.ct-row{display:flex;align-items:center;gap:12px;padding:6px 16px;font-size:17px;position:relative;cursor:pointer}
.ct-row:active{background:#1c1c1d}
.ct-row span{flex:1;padding:9px 0;border-bottom:1px solid #1d1d1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-chat .sub.typing{color:#5eb5f7}
.tg-chat .sub.typing::after{content:"...";display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4) infinite;overflow:hidden;vertical-align:bottom}
@keyframes dots{0%{width:0}100%{width:1.2em}}
.bub.ty{display:flex;gap:4px;padding:11px 14px;align-self:flex-end}
.bub.ty i{width:7px;height:7px;border-radius:50%;background:#8cc4f1;animation:ty 1s infinite}
.bub.ty i:nth-child(2){animation-delay:.15s}.bub.ty i:nth-child(3){animation-delay:.3s}
@keyframes ty{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
#banner-layer{position:absolute;left:0;right:0;top:0;z-index:160;pointer-events:none}
.banner-ios{pointer-events:auto;touch-action:none;cursor:pointer;margin:60px 10px 0;display:flex;gap:11px;padding:12px 14px;border-radius:24px;background:rgba(48,50,60,.82);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);box-shadow:0 10px 30px rgba(0,0,0,.5);transform:translateY(-140px) scale(.9);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1.1),opacity .3s;cursor:pointer}
.banner-ios.in{transform:none;opacity:1}
.banner-ios .appicon{width:38px;height:38px;border-radius:9px}
.banner-ios .nt{flex:1;min-width:0}.banner-ios .nt-top{display:flex;justify-content:space-between}
.banner-ios b{font-size:15.5px;font-weight:600}.banner-ios small{font-size:13px;color:rgba(255,255,255,.6)}
.banner-ios p{font-size:15px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#call-layer{position:absolute;inset:0;z-index:95;display:none;color:#fff}
#call-layer.show{display:block;animation:fade .3s}
.cl-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 20%,#3b4568,#1a1d2e 55%,#0b0c14)}
.ic-info,.ac-top{position:absolute;left:0;right:0;top:130px;text-align:center}
.ic-name,.ac-name{font-size:40px;font-weight:400}.ic-sub{font-size:20px;color:rgba(255,255,255,.7);margin-top:4px}
.ac-top{top:100px}.ac-time{font-size:19px;color:rgba(255,255,255,.7);margin-top:6px;font-variant-numeric:tabular-nums}
.ic-bottom{position:absolute;left:0;right:0;bottom:70px;padding:0 46px}
.ic-extra{display:flex;justify-content:space-between;margin-bottom:70px;font-size:13px}
.ic-extra div{display:flex;flex-direction:column;align-items:center;gap:6px}.ic-extra svg{width:26px;height:26px}
.ic-btns{display:flex;justify-content:space-between}
.ic-btns>div{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:15px}
.cbtn{width:78px;height:78px;border-radius:50%;display:grid;place-items:center}
.cbtn svg{width:36px;height:36px;fill:#fff}
.cbtn.red{background:#ff3b30}.cbtn.red svg{transform:rotate(135deg)}.cbtn.green{background:#30d158;animation:ringpulse 1.2s infinite}
@keyframes ringpulse{0%{box-shadow:0 0 0 0 rgba(48,209,88,.55)}100%{box-shadow:0 0 0 22px rgba(48,209,88,0)}}
.ac-cap{position:absolute;left:18px;right:18px;top:210px;height:230px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.cap{max-width:82%;padding:10px 14px;border-radius:18px;background:rgba(255,255,255,.14);backdrop-filter:blur(14px);font-size:18px;line-height:1.3;animation:capin .35s;transition:opacity .4s}
.cap b{display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,.65);margin-bottom:2px}
.cap.r{align-self:flex-end;background:rgba(10,132,255,.45)}.cap.old{opacity:.45}
@keyframes capin{from{opacity:0;transform:translateY(14px)}}
.ac-grid{position:absolute;left:34px;right:34px;bottom:210px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px 0;justify-items:center}
.ac-grid div{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:13px}
.ac-grid b{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center}
.ac-grid svg{width:28px;height:28px}
.ac-end{position:absolute;left:0;right:0;bottom:80px;display:grid;place-items:center}

/* =========================================================
   v3 — foto avatar (notifikasi, call, bubble grup)
   ========================================================= */
.av{position:relative;overflow:hidden}
.av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nav-av{position:relative;width:38px;height:38px;flex:none}
.nav-av .av{width:38px!important;height:38px!important}
.nbadge{position:absolute;right:-5px;bottom:-5px;width:19px;height:19px}
.nbadge .appicon{width:19px;height:19px;border-radius:6px;border:1.5px solid #2a2c36}
.notif .nav-av .appicon,.banner-ios .nav-av .appicon{width:19px;height:19px;border-radius:6px}
.brow{display:flex;align-items:flex-end;gap:6px;margin-top:2px}
.brow.first{margin-top:7px}
.brow .bub{margin-top:0;max-width:74%}
.brow .bub.first{margin-top:0}
.bav{width:34px;height:34px;flex:none}
.ic-av{display:flex;justify-content:center;margin-bottom:14px}
.ic-info{top:100px}
.ac-top{top:80px}
.ac-cap{top:290px;height:170px;overflow:hidden}
.ac-grid{bottom:200px}

/* =========================================================
   UPDATE CERITA INTERAKTIF — modal, chip, kartu waktu, ending,
   Add Story, editor, Maps, Settings, composer Instagram
   ========================================================= */
.gp-modal{position:absolute;inset:0;z-index:150;display:grid;place-items:center;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .2s;padding:0 34px}
.gp-modal[hidden],.gp-card[hidden],.gp-end[hidden],.gp-chip[hidden]{display:none}
.gp-modal.on{opacity:1}
.gp-box{width:100%;max-width:320px;background:#1d1f26;border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:24px 20px 16px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6);transform:scale(.94);transition:transform .22s}
.gp-modal.on .gp-box{transform:none}
.gp-box p{font-size:17px;line-height:1.38;font-weight:600;margin-bottom:20px}
.gp-btns{display:flex;gap:10px}
.gp-btns button{flex:1;height:44px;border-radius:13px;background:#2c2f3a;font-size:16.5px;font-weight:600}
.gp-btns button.pri{background:#0a84ff}
.gp-btns button.dan{background:#ff453a}
.gp-chip{position:absolute;right:12px;bottom:110px;z-index:90;display:flex;align-items:center;gap:6px;max-width:240px;padding:8px 12px;border-radius:20px;background:rgba(32,34,44,.94);border:1px solid rgba(255,255,255,.16);font-size:12.5px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.5);cursor:pointer;animation:gpPulse 2s infinite}
.gp-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes gpPulse{50%{box-shadow:0 0 0 6px rgba(10,132,255,.22),0 6px 20px rgba(0,0,0,.5)}}
.gp-card{position:absolute;inset:0;z-index:140;display:grid;place-items:center;background:#000;font-size:24px;font-weight:600;letter-spacing:.4px;text-align:center;padding:0 30px;opacity:0;transition:opacity .4s;pointer-events:none}
.gp-card.on{opacity:1}
.gp-end{position:absolute;inset:0;z-index:300;background:#000;display:grid;place-items:center;padding:40px 30px;overflow-y:auto;opacity:0;transition:opacity .8s}
.gp-end.on{opacity:1}
.gp-end-in{text-align:center}
.gp-end-in small{display:block;letter-spacing:5px;color:#8e8e93;font-size:12px;margin-bottom:18px}
.gp-end-in h1{font-size:30px;line-height:1.1;font-weight:700;margin-bottom:22px}
.gp-end-in p{font-size:15.5px;line-height:1.5;color:#c7c7cc;margin-bottom:12px}
.gp-end-in p.gp-end-credit{font-size:12px;color:#8e8e93;margin-top:20px}
.gp-end-in button{margin-top:26px;height:48px;padding:0 30px;border-radius:24px;background:#fff;color:#000;font-weight:700;font-size:16.5px}

/* chat */
.bub .sr{display:block;font-size:12px;color:#7fb7e6;margin-bottom:2px;opacity:.9}
.bub.in.ty{align-self:flex-start}.bub.in.ty i{background:#8aa6c1}
.tg-input input:disabled{opacity:.6}

/* Add story */
.st-ring.add{background:#3a3d45}
.sg-note{padding:6px 18px 12px;color:#8e8e93;font-size:14px}
.sg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 14px 20px}
.sg-it{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#15171c;cursor:pointer;border:2px solid transparent}
.sg-it img{width:100%;height:100%;object-fit:cover;display:block}
.sg-it.lock img{filter:grayscale(1) brightness(.35) blur(2px)}
.sg-it.sent img{filter:brightness(.5)}
.sg-it.pick{border-color:#0a84ff}
.sg-it i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:14px;font-weight:700}
.sg-it i svg{width:34px;height:34px;opacity:.9}
.gp-editor{position:absolute;inset:0;z-index:40;background:#000;transform:translateY(100%);transition:transform .28s}
.gp-editor.in{transform:none}
.gp-editor>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ge-top{position:absolute;top:58px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center}
.ge-x{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center;cursor:pointer}
.ge-tools{display:flex;gap:10px}
.ge-tools .dis{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center;font-weight:700;opacity:.35}
.ge-bottom{position:absolute;left:0;right:0;bottom:0;padding:16px 16px 44px;background:linear-gradient(transparent,rgba(0,0,0,.75));text-align:center}
.ge-hint{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:10px}
.ge-send{width:100%;height:50px;border-radius:25px;background:#3e88f7;font-size:17px;font-weight:700}
.ge-send:disabled{opacity:.7}

/* Maps */
#app-maps{background:#161b24}

/* Settings */
.st-prof{display:flex;gap:14px;align-items:center;margin:4px 14px 18px;padding:14px;border-radius:14px;background:var(--card)}
.st-prof b{display:block;font-size:19px}.st-prof span{font-size:12.5px;color:var(--dim)}
.st-grp{margin:0 14px 18px;border-radius:14px;background:var(--card);overflow:hidden}
.st-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--sep);cursor:pointer}
.st-row:last-child{border:0}
.st-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center}.st-ic svg{width:18px;height:18px}
.st-row b{flex:1;font-weight:500;font-size:16.5px}.st-row em{font-style:normal;color:var(--dim);font-size:14px}
.st-row.danger b{color:#ff453a}
.st-cap{margin:0 28px 6px;font-size:12.5px;color:var(--dim)}
.st-note{margin:-8px 28px 20px;font-size:12.5px;color:var(--dim);line-height:1.4}

/* Instagram composer */
.ig-up{height:3px;background:#222;flex:none;position:relative;overflow:hidden}.ig-up i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#833ab4,#e1306c,#fdc830);transition:width 2.2s linear}.ig-up span{position:absolute;opacity:0}
.cp-prev{margin:0 14px;aspect-ratio:4/5;border-radius:12px;background:#15171c;overflow:hidden;display:grid;place-items:center;color:#6d7280}
.cp-prev img{width:100%;height:100%;object-fit:cover}
.cp-cap{margin:14px 18px 8px;min-height:44px;font-size:16px;line-height:1.4;word-break:break-word}
.cp-cur{display:inline-block;width:2px;height:1.1em;background:#0a84ff;vertical-align:text-bottom;margin-left:1px;animation:cpb 1s steps(2) infinite}
@keyframes cpb{50%{opacity:0}}

/* ---- ergonomi sentuh (Android) ---- */
html,body{overscroll-behavior:none}
button,.tg-row,.ct-row,.ic,.widget,.st-it,.sg-it,.cl-row,.cl-ct,.gp-chip,.banner-ios,.gp-btns button,.tabbar button{touch-action:manipulation}
.app-body,.tg-msgs,.ct-list{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.tg-msgs{touch-action:pan-y;scroll-behavior:auto}
.gp-modal{touch-action:none}
.gp-end{overscroll-behavior:contain}

/* ================= v-smooth: animasi halus, kontras jelas, sentuh responsif ================= */
html,body,.phone{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal}

/* 1) Akselerasi hardware (transform3d + will-change pada elemen yang bergerak) */
.sheet{transform:translate3d(100%,0,0);will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;contain:layout paint}
.sheet.in{transform:translate3d(0,0,0)}
.banner-ios{transform:translate3d(0,-140px,0) scale(.9);will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.banner-ios.in{transform:translate3d(0,0,0) scale(1);opacity:1}
.notif{will-change:transform,opacity;transform:translate3d(0,0,0);backface-visibility:hidden}
/* gelembung: will-change hanya selama animasi masuk (dilepas lewat JS) agar ratusan gelembung lama tidak membebani GPU HP */
.bub{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.bub.pop{will-change:transform,opacity;animation:bubIn .28s cubic-bezier(.2,.9,.3,1.15) both;transform-origin:0 100%}
.bub.out.pop{transform-origin:100% 100%}
@keyframes bubIn{0%{opacity:0;transform:translate3d(0,10px,0) scale(.92)}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}
/* scroll halus hanya setelah riwayat selesai dirender (class .live dari JS) → riwayat tidak "berputar" saat dibuka */
.tg-msgs.live{scroll-behavior:smooth}

/* 2) Kejernihan & kontras: glassmorphism */
.banner-ios,.notif{background:rgba(30,32,42,.78);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.banner-ios b,.notif b{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.35)}
.banner-ios p,.notif p{color:rgba(255,255,255,.95)}
.banner-ios small,.notif small{color:rgba(255,255,255,.72)}
.gp-box{background:rgba(28,30,40,.94);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-color:rgba(255,255,255,.14)}
.gp-box p{color:#fff}
/* gelembung Telegram: kontras lebih tinggi (teks putih di atas biru lebih pekat) */
.bub{text-rendering:optimizeLegibility}
.bub.in{background:#1f3347;color:#f4f8fc;box-shadow:0 1px 1px rgba(0,0,0,.25)}
.bub.out{background:#2f6aa3;color:#fff;box-shadow:0 1px 1px rgba(0,0,0,.25)}
.bub .mt{color:#9db2c6}.bub.out .mt{color:#b9defa}

/* 3) Sentuh & overscroll */
html,body,.phone,.screen,.app-body,.tg-msgs,.ct-list,.tg-list{overscroll-behavior:none}
button,a,input,[role=button],.tg-row,.ct-row,.ic,.widget,.st-it,.sg-it,.cl-row,.cl-ct,.gp-chip,.gp-btns button,.tabbar button,.back,.notif,.banner-ios{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.banner-ios{touch-action:none}   /* swipe-up dismiss ditangani lewat pointer events */
.tg-msgs{touch-action:pan-y}
@media (prefers-reduced-motion:reduce){.bub.pop,.notif{animation:none}.sheet,.banner-ios{transition-duration:.01s}.tg-msgs.live{scroll-behavior:auto}}

/* ---- finale: Evander diblokir + layar hitam + TO BE CONTINUED ---- */
.tg-input.blocked{opacity:.55;pointer-events:none}
.tg-sys{align-self:center;margin:14px 18px 6px;padding:6px 14px;border-radius:14px;background:rgba(22,32,44,.85);color:#9db2c6;font-size:13.5px;text-align:center;line-height:1.35}
.gp-fade{position:absolute;inset:0;z-index:290;background:#000;display:grid;place-items:center;padding:40px 30px;opacity:0;transition:opacity 2.6s ease;pointer-events:auto;will-change:opacity}
.gp-fade[hidden]{display:none}
.gp-fade.on{opacity:1}
.gp-fade-in{text-align:center;max-width:330px}
.gp-fade-q{font-size:17.5px;line-height:1.65;color:#e5e5ea;font-weight:500;opacity:0;transition:opacity 2s ease}
.gp-fade-tbc{display:block;margin-top:34px;font-size:12px;letter-spacing:6px;color:#8e8e93;font-weight:600;opacity:0;transition:opacity 1.6s ease}
.gp-fade.q-on .gp-fade-q{opacity:1}
.gp-fade.tbc-on .gp-fade-tbc{opacity:1}