/* ============================================================
   Token mengikuti Apple HIG (iOS 26):
   - skala teks Dynamic Type "Large (default)" + tracking SF Pro
   - system colors UIKit; warna semantik (label/background/separator) + mode gelap
   - Liquid Glass hanya untuk navigasi/kontrol; konten pakai material standar
   Font: SF Pro di perangkat Apple (-apple-system), Inter sebagai pengganti di Windows/Android.
   ============================================================ */
:root{
  --red:#ff3b30; --orange:#ff9500; --yellow:#ffcc00; --green:#34c759; --mint:#00c7be; --teal:#30b0c7;
  --cyan:#32ade6; --blue:#007aff; --indigo:#5856d6; --purple:#af52de; --pink:#ff2d55; --gray:#8e8e93;
  --gray2:#aeaeb2; --gray3:#c7c7cc; --gray4:#d1d1d6; --gray5:#e5e5ea; --gray6:#f2f2f7;
  --wa:#25d366; --xblue:#1d9bf0; --igred:#ff3040;
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Inter','Segoe UI',sans-serif;
  --st:62px; --sb:34px;
}
/* warna semantik — terang */
.screen{
  --bg:#fff; --bg2:#f2f2f7; --card:#fff; --label:#000; --label2:rgba(60,60,67,.6); --label3:rgba(60,60,67,.3);
  --sep:rgba(60,60,67,.29); --fill:rgba(120,120,128,.12); --bar:rgba(249,249,249,.94); --hl:rgba(0,0,0,.06);
  --glass:rgba(255,255,255,.58); --glass-edge:rgba(255,255,255,.75);
  --wabg:#efeae2; --wa-mine:#d9fdd3; --wa-them:#fff; --wa-head:rgba(247,247,247,.94); --wa-meta:#667781;
  --x-text:#0f1419; --x-sub:#536471; --x-sep:#eff3f4;
  --kb-bg:rgba(214,216,222,.92); --kb-key:#fff; --kb-key2:#adb2bc; --kb-text:#000;
}
/* warna semantik — gelap */
.screen.darkmode{
  --bg:#000; --bg2:#000; --card:#1c1c1e; --label:#fff; --label2:rgba(235,235,245,.6); --label3:rgba(235,235,245,.3);
  --sep:rgba(84,84,88,.65); --fill:rgba(118,118,128,.24); --bar:rgba(22,22,22,.94); --hl:rgba(255,255,255,.08);
  --glass:rgba(44,44,48,.6); --glass-edge:rgba(255,255,255,.14);
  --gray5:#2c2c2e; --gray6:#1c1c1e; --gray4:#3a3a3c; --gray3:#48484a;
  --wabg:#0b141a; --wa-mine:#005c4b; --wa-them:#202c33; --wa-head:rgba(22,22,22,.94); --wa-meta:#8696a0;
  --x-text:#e7e9ea; --x-sub:#71767b; --x-sep:#2f3336;
  --kb-bg:rgba(43,43,45,.92); --kb-key:#6b6b6e; --kb-key2:#464648; --kb-text:#fff;
  --blue:#0a84ff; --red:#ff453a; --green:#30d158; --orange:#ff9f0a; --pink:#ff375f; --indigo:#5e5ce6; --purple:#bf5af2;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#0b0b0d;font-family:var(--font);color:#000;overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer;padding:0;letter-spacing:inherit}
img,video{display:block;-webkit-user-drag:none;user-select:none}
a{color:var(--blue);text-decoration:none}
.f7-icons{font-size:22px;line-height:1;vertical-align:middle;font-style:normal;display:inline-block}
button:active,.row:active{opacity:.55}
button.row:active,a.row:active,.chatrow:active{opacity:1;background:var(--hl)}

/* ---------- skala teks HIG (size/leading, tracking SF Pro dalam pt) ---------- */
.t-large{font-size:34px;line-height:41px;font-weight:700;letter-spacing:.4px}
.t-title1{font-size:28px;line-height:34px;font-weight:700;letter-spacing:.38px}
.t-title2{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.26px}
.t-title3{font-size:20px;line-height:25px;font-weight:600;letter-spacing:-.45px}
.t-head{font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.43px}
.t-body{font-size:17px;line-height:22px;letter-spacing:-.43px}
.t-call{font-size:16px;line-height:21px;letter-spacing:-.31px}
.t-sub{font-size:15px;line-height:20px;letter-spacing:-.23px}
.t-foot{font-size:13px;line-height:18px;letter-spacing:-.08px}
.t-cap1{font-size:12px;line-height:16px}
.t-cap2{font-size:11px;line-height:13px;letter-spacing:.06px}
.sec{color:var(--label2)}

/* ---------- frame: iPhone 17 Pro / 18 Pro ----------
   Apple: layar 6,3" 2622×1206 px @460 ppi (@3x) → 402×874 pt; bodi 150,0×71,9 mm.
   1 pt = 1 px CSS. Layar 66,6 mm lebar → 6,04 pt/mm → bezel (71,9−66,6)/2 ≈ 2,65 mm ≈ 16 pt.
   Safe area atas 62 / bawah 34 pt. Radius layar ~62 pt, Dynamic Island ~126×37 pt (belum terverifikasi resmi). */
.stage{height:100%;display:grid;place-items:center;background:radial-gradient(ellipse at top,#2a2a33,#0b0b0d 70%)}
.phone{position:relative;width:434px;height:906px;border-radius:78px;padding:16px;background:#050506;flex:none;
  box-shadow:0 0 0 1.5px #2b2b2f,0 0 0 4px #6e6e73,0 0 0 5px #3a3a3e,0 40px 90px rgba(0,0,0,.6);transform:scale(var(--k,1))}
.phone::before,.phone::after{content:'';position:absolute;width:4px;border-radius:2px;background:#58585d}
.phone::before{left:-8px;top:170px;height:34px;box-shadow:0 78px 0 #58585d,0 150px 0 #58585d}
.phone::after{right:-8px;top:228px;height:96px;box-shadow:0 318px 0 -12px #58585d}
.screen{position:relative;width:402px;height:874px;border-radius:62px;overflow:hidden;background:#000;user-select:none;color:var(--label)}
#wall{position:absolute;inset:0;transition:filter .3s}
@media (max-width:500px){
  .stage{display:block}
  .phone{width:100vw;height:100dvh;border-radius:0;padding:0;box-shadow:none;transform:none}
  .phone::before,.phone::after{display:none}
  .screen{width:100%;height:100%;border-radius:0}
  .island{display:none}
  .sizebar{display:none}
}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:126px;height:37px;border-radius:19px;background:#000;z-index:96}
.status{position:absolute;top:11px;left:0;right:0;height:37px;display:grid;grid-template-columns:138px 1fr 138px;align-items:center;justify-items:center;font-weight:600;font-size:17px;letter-spacing:-.43px;z-index:95;pointer-events:none;color:#fff;transition:color .25s}
.status #sTime{grid-column:1}
.status .sIcons{grid-column:3}
.status.dark{color:#000}
.sIcons{display:flex;gap:6px;align-items:center}
.sIcons svg{fill:currentColor}
.batt{width:25px;height:12px;border:1.5px solid currentColor;border-radius:4px;padding:1.5px;opacity:.9}
.batt i{display:block;height:100%;width:72%;background:currentColor;border-radius:1.5px}
.homebar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:#fff;z-index:97;cursor:grab}
.homebar.dark{background:#000}
.homebar::before{content:'';position:absolute;inset:-14px -30px}
#view{position:absolute;inset:0;transition:filter .2s}
#dim{position:absolute;inset:0;background:#000;pointer-events:none;z-index:99;opacity:0}
.page{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;background:var(--bg);will-change:transform}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}
.scroll::-webkit-scrollbar,.hs::-webkit-scrollbar{display:none}
.hs{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.pad-tab{padding-bottom:110px}
.sizebar{position:fixed;left:14px;bottom:14px;display:flex;gap:4px;padding:4px;border-radius:14px;background:rgba(255,255,255,.08);backdrop-filter:blur(10px);color:#fff;font:600 12px var(--font);z-index:100}
.sizebar button{padding:7px 11px;border-radius:10px;color:rgba(255,255,255,.7)}
.sizebar button.on{background:rgba(255,255,255,.18);color:#fff}
.calib{position:fixed;inset:0;background:rgba(0,0,0,.85);display:grid;place-items:center;z-index:200;color:#fff;font-family:var(--font);text-align:center}
.calib .card{height:calc(53.98 * var(--pxmm) * 1px);width:calc(85.6 * var(--pxmm) * 1px);border:2px dashed #ffd60a;border-radius:calc(3.2 * var(--pxmm) * 1px);margin:22px auto;display:grid;place-items:center;color:#ffd60a;font-size:13px}
.calib input{width:320px}
.calib button{margin-top:14px;background:#fff;color:#000;border-radius:20px;padding:9px 22px;font-weight:600}

/* ---------- Liquid Glass ---------- */
.glass{background:var(--glass);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);box-shadow:0 8px 28px rgba(0,0,0,.12),inset 0 0 0 .5px var(--glass-edge),inset 0 1px 1px var(--glass-edge)}
.glass.dark{background:rgba(40,40,44,.55);box-shadow:0 8px 28px rgba(0,0,0,.35),inset 0 0 0 .5px rgba(255,255,255,.15);color:#fff}
.gbtn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--label);flex:none}
.gbtn .f7-icons{font-size:20px}
.gpill{height:44px;border-radius:22px;padding:0 16px;display:flex;align-items:center;gap:6px;font-size:17px;letter-spacing:-.43px;color:var(--label)}
.ltab{position:absolute;left:16px;right:16px;bottom:22px;display:flex;gap:10px;z-index:20;align-items:center}
.ltab .bar{flex:1;height:62px;border-radius:31px;display:flex;align-items:center;padding:0 4px}
.ltab .bar button{flex:1;height:54px;border-radius:27px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;font-weight:600;letter-spacing:.1px;color:var(--label);position:relative}
.ltab .bar button .f7-icons{font-size:23px}
.ltab .bar button.on{background:var(--hl);color:var(--tint,var(--blue))}
.ltab .solo{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--label)}
.tbadge{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center}
.nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 16px 6px;flex:none;position:relative;min-height:54px;z-index:5}
.nav .ttl{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.nav .r{display:flex;gap:8px;align-items:center}
.big{padding:2px 16px 8px;margin:0}

/* ---------- daftar (inset grouped) ---------- */
.group{background:var(--card);border-radius:26px;margin:0 16px 20px;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:11px 16px;min-height:52px;position:relative;width:100%;text-align:left;font-size:17px;letter-spacing:-.43px;color:var(--label)}
.row+.row::before{content:'';position:absolute;top:0;left:var(--inset,16px);right:0;border-top:.5px solid var(--sep)}
.row .grow{flex:1;min-width:0}
.row .grow > *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chev{color:var(--gray3)}
.chev::after{content:'chevron_right';font-family:'Framework7 Icons';font-size:15px;font-weight:600}
.sicon{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:none}
.sicon .f7-icons{font-size:18px}
.gh{font-size:13px;line-height:18px;color:var(--label2);text-transform:uppercase;padding:0 32px 7px;letter-spacing:-.08px}
.seg{display:flex;background:var(--fill);border-radius:20px;padding:3px}
.seg button{flex:1;padding:7px 14px;border-radius:17px;font-size:13px;font-weight:600;color:var(--label)}
.seg button.on{background:var(--card);box-shadow:0 3px 8px rgba(0,0,0,.12)}
.empty{padding:40px;text-align:center;color:var(--label2);font-size:15px}
.searchf{display:flex;align-items:center;gap:6px;margin:0 16px 10px;background:var(--fill);border-radius:12px;padding:0 10px;height:38px;color:var(--label2);font-size:17px;letter-spacing:-.43px}
.searchf .f7-icons{font-size:17px}
.searchf input{flex:1;border:0;background:none;font:inherit;outline:none;color:var(--label);min-width:0}
.tgl{width:63px;height:28px;border-radius:14px;background:var(--gray5);position:relative;flex:none;transition:background .2s}
.tgl::after{content:'';position:absolute;top:2px;left:2px;width:37px;height:24px;border-radius:12px;background:#fff;transition:transform .25s cubic-bezier(.3,1.4,.5,1);box-shadow:0 3px 8px rgba(0,0,0,.15)}
.tgl.on{background:var(--green)}
.tgl.on::after{transform:translateX(22px)}

/* ---------- ikon app (gaya iOS 26: lapisan kaca + pantulan tepi) ---------- */
.ico{width:64px;height:64px;border-radius:15px;display:grid;place-items:center;overflow:hidden;position:relative;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.ico svg{width:100%;height:100%}
.ico::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.08) 34%,rgba(255,255,255,0) 50%,rgba(0,0,0,.06) 100%);
  box-shadow:inset 0 1px 1.5px rgba(255,255,255,.6),inset 0 0 0 .75px rgba(255,255,255,.35),inset 0 -1px 2px rgba(0,0,0,.12)}

/* ---------- lock ---------- */
.wall-lock{background:radial-gradient(120% 70% at 20% 10%,#ff9a8b 0%,transparent 55%),radial-gradient(110% 80% at 90% 35%,#7b5cff 0%,transparent 60%),radial-gradient(130% 90% at 30% 100%,#ff5e9c 0%,transparent 60%),linear-gradient(170deg,#2a1b5c,#120c2b)}
.lock{color:#fff;align-items:center;background:none}
.lock::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 30%,rgba(255,255,255,.12),transparent);pointer-events:none}
.lock .ldate{margin-top:76px;font-size:20px;font-weight:600;letter-spacing:-.45px;opacity:.92;z-index:1;text-shadow:0 1px 8px rgba(0,0,0,.2)}
.lock .ltime{font-size:112px;font-weight:700;letter-spacing:-3px;line-height:1;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.72));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 14px rgba(0,0,0,.18))}
.lock .notifs{position:absolute;left:10px;right:10px;bottom:118px;display:flex;flex-direction:column;gap:8px;z-index:2}
.notif{display:flex;gap:10px;align-items:center;padding:13px 14px;border-radius:24px;color:#000;cursor:pointer;text-align:left;width:100%;animation:notifIn .6s var(--spring) backwards}
.notif.glass{background:rgba(250,250,250,.72);color:#000}
.screen.darkmode .notif.glass{background:rgba(40,40,44,.7);color:#fff}
.notif:nth-child(2){animation-delay:.08s}.notif:nth-child(3){animation-delay:.16s}
@keyframes notifIn{from{transform:translateY(20px);opacity:0}}
.notif .ni{width:38px;height:38px;flex:none;position:relative}
.notif .ni img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.notif .ni .mini{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:5px;overflow:hidden;box-shadow:0 0 0 1.5px #fff}
.notif .ni .mini::after{display:none}
.notif .nb{flex:1;min-width:0;font-size:15px;line-height:20px;letter-spacing:-.23px}
.notif .nb b{display:flex;justify-content:space-between;font-weight:600}
.notif .nb b small{font-weight:400;opacity:.55;font-size:13px}
.notif .nb span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lock .lbtns{position:absolute;bottom:44px;left:46px;right:46px;display:flex;justify-content:space-between;z-index:2}
.lock .lbtns button{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff}
.lock .lbtns button.on{background:#fff;color:#000}
.lock .lbtns svg{width:22px;height:22px;fill:currentColor}
.lock .swipe{position:absolute;bottom:26px;font-size:13px;opacity:.7;z-index:2;animation:pulse 2.4s infinite}
@keyframes pulse{50%{opacity:.3}}
.faceid{position:absolute;top:13px;left:50%;transform:translateX(-50%);z-index:97;width:126px;height:37px;border-radius:19px;background:#000;display:grid;place-items:center;transition:all .35s cubic-bezier(.3,1.3,.5,1)}
.faceid.big{width:150px;height:150px;top:20px;border-radius:44px}
.faceid svg{width:56px;height:56px;opacity:0;transition:opacity .2s .15s}
.faceid.big svg{opacity:1}

/* ---------- pin ---------- */
.pin{color:#fff;align-items:center;background:none}
.pin::before{content:'';position:absolute;inset:0;backdrop-filter:blur(30px);background:rgba(0,0,0,.4)}
.pin>*{position:relative}
.pin h3{margin:108px 0 18px;font-weight:500;font-size:20px;letter-spacing:-.45px}
.pin .dots{display:flex;gap:22px;margin-bottom:12px}
.pin .dots i{width:13px;height:13px;border-radius:50%;border:1.5px solid #fff}
.pin .dots i.f{background:#fff}
.pin .dots.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-12px)}40%,80%{transform:translateX(12px)}}
.hint{min-height:36px;font-size:13px;opacity:.85;text-align:center;padding:0 40px}
.keys{display:grid;grid-template-columns:repeat(3,80px);gap:16px 26px;margin-top:6px}
.keys button{width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:36px;font-weight:400;line-height:1;color:#fff;transition:background .25s}
.keys button small{font-size:10px;font-weight:700;letter-spacing:2px;margin-top:2px}
.keys button:active{background:rgba(255,255,255,.55);opacity:1;transition:none}
.keys .z{grid-column:2}
.pin .pbtm{position:absolute;bottom:42px;left:48px;right:48px;display:flex;justify-content:space-between;font-size:17px}

/* ---------- home ---------- */
.wall-home{background:#222 url(media/k_x_08.jpg) center 40%/cover}
.home{background:none;padding:72px 22px 0}
.home::before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.05) 40%,rgba(0,0,0,.25));pointer-events:none}
.home>*{position:relative}
.widgets{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:20px}
.widget{height:160px;border-radius:24px;padding:15px;cursor:pointer;text-align:left;box-shadow:0 6px 20px rgba(0,0,0,.15)}
.wcal{background:var(--card);color:var(--label)}
.wcal .d{color:var(--red);font-weight:700;font-size:13px;text-transform:uppercase}
.wcal .n{font-size:40px;font-weight:400;line-height:1.05}
.wcal .ev{margin-top:7px;font-size:12px;line-height:15px;border-left:3px solid var(--purple);padding-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wwx{color:#fff;background:linear-gradient(180deg,#2f6fbd,#5aa2e8)}
.wwx.night{background:linear-gradient(180deg,#0f1a3a,#2b3f75)}
.wwx .c{font-size:15px;font-weight:600;display:flex;align-items:center;gap:3px}
.wwx .c .f7-icons{font-size:11px}
.wwx .t{font-size:44px;font-weight:300;line-height:1.1}
.wwx .s{font-size:12px;font-weight:600;margin-top:12px;line-height:15px}
.wwx .s .f7-icons{font-size:16px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);row-gap:20px;justify-items:center}
.app{display:flex;flex-direction:column;align-items:center;gap:5px;color:#fff;font-size:12px;font-weight:500;position:relative;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.badge{position:absolute;top:-6px;right:-6px;min-width:23px;height:23px;padding:0 6px;border-radius:12px;background:#ff3b30;color:#fff;font-size:14px;font-weight:600;display:grid;place-items:center;text-shadow:none;z-index:2}
.search-pill{margin:24px auto 0;width:max-content;padding:7px 14px;border-radius:16px;color:#fff;font-size:13px;font-weight:600;display:flex;gap:4px;align-items:center;background:rgba(255,255,255,.22);backdrop-filter:blur(10px)}
.search-pill .f7-icons{font-size:13px}
.dock{position:absolute;left:12px;right:12px;bottom:12px;height:94px;border-radius:38px;display:flex;justify-content:space-around;align-items:center;padding:0 8px;background:rgba(255,255,255,.22)!important}
.dock .app span{display:none}

/* ---------- transisi ---------- */
@keyframes pushIn{from{transform:translateX(100%);box-shadow:-20px 0 40px rgba(0,0,0,.15)}}
@keyframes popIn{from{transform:translateX(-30%);filter:brightness(.9)}}
@keyframes homeIn{from{transform:scale(1.12);opacity:.4}}
@keyframes fadeIn{from{opacity:0}}

/* ---------- Notification Center & Control Center ---------- */
.ncc{position:absolute;inset:0;z-index:90;display:none}
.ncc.show{display:block}
.nc{position:absolute;inset:0;backdrop-filter:blur(36px) saturate(150%);-webkit-backdrop-filter:blur(36px) saturate(150%);background:rgba(10,10,20,.35);color:#fff;display:flex;flex-direction:column;align-items:center;padding-top:70px}
.nc .ldate{font-size:20px;font-weight:600}
.nc .ltime{font-size:84px;font-weight:700;letter-spacing:-2px;line-height:1}
.nc .list{width:100%;padding:24px 10px 0;display:flex;flex-direction:column;gap:8px;overflow:auto;flex:1}
.nc .lbl{font-size:20px;font-weight:700;padding:6px 8px;align-self:flex-start}
.nc .none{text-align:center;opacity:.6;font-size:15px;padding:16px}
.cc{position:absolute;inset:0;backdrop-filter:blur(30px) saturate(140%);-webkit-backdrop-filter:blur(30px) saturate(140%);background:rgba(0,0,0,.4);color:#fff;padding:74px 28px 0}
.ccg{display:grid;grid-template-columns:repeat(4,72px);grid-auto-rows:72px;gap:16px;justify-content:center}
.ccm{border-radius:22px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2);display:grid;place-items:center;position:relative;overflow:hidden}
.ccm.w2{grid-column:span 2}.ccm.h2{grid-row:span 2}
.ccm.circle{border-radius:50%}
.ccb{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;color:#fff;transition:background .2s}
.ccb .f7-icons{font-size:24px}
.ccb.on{background:#fff;color:var(--c,#007aff)}
.ccm .ttl2{font-size:12px;font-weight:600;line-height:15px;padding:0 12px;width:100%}
.ccm .np2{width:100%;height:100%;padding:12px;display:flex;flex-direction:column;justify-content:space-between;text-align:left}
.ccm .np2 .ctl{display:flex;justify-content:space-around;font-size:24px}
.slider{width:100%;height:100%;position:relative;cursor:ns-resize}
.slider i{position:absolute;left:0;right:0;bottom:0;background:#fff;transition:height .05s}
.slider .f7-icons{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);color:#777;z-index:1;font-size:24px}
.ccfocus{display:flex;align-items:center;gap:10px;width:100%;height:100%;padding:0 14px;font-size:14px;font-weight:600;text-align:left}
.ccfocus .ccb{width:40px;height:40px}
.ccfocus .ccb .f7-icons{font-size:18px}

/* ---------- WhatsApp ---------- */
.page.wa{background:var(--bg);padding-top:var(--st)}
.chips{display:flex;gap:8px;padding:2px 16px 8px;flex:none}
.chips button{padding:6px 14px;border-radius:16px;background:var(--fill);font-size:14px;font-weight:500;color:var(--label)}
.chips button.on{background:rgba(37,211,102,.18);color:#0b8c4a}
.screen.darkmode .chips button.on{color:#25d366}
.chatrow{display:flex;gap:12px;padding:8px 16px;width:100%;text-align:left;align-items:center;color:var(--label)}
.av{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;background:linear-gradient(180deg,#c7ccd1,#a7aeb5);color:#fff;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.av .f7-icons{font-size:30px;margin-top:8px}
.chatrow .cb{flex:1;min-width:0;border-bottom:.5px solid var(--sep);padding-bottom:10px}
.chatrow .ct{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:600;font-size:17px;letter-spacing:-.43px}
.chatrow .ct small{font-weight:400;color:var(--label2);font-size:14px;flex:none}
.chatrow .ct small.unread{color:var(--wa);font-weight:600}
.chatrow .cp{display:flex;justify-content:space-between;align-items:center;color:var(--label2);font-size:15px;letter-spacing:-.23px;margin-top:2px}
.chatrow .cp span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatrow .cp .ub{font-style:normal;background:var(--wa);color:#fff;border-radius:10px;min-width:20px;height:20px;font-size:12px;font-weight:600;display:grid;place-items:center;padding:0 6px;margin-left:6px;flex:none}
.arch{display:flex;gap:18px;align-items:center;padding:8px 30px 10px;color:var(--label2);font-size:16px;font-weight:600;border-bottom:.5px solid var(--sep);margin:0 0 0 0}
.wa-tabs{flex:none;display:flex;justify-content:space-around;border-top:.5px solid var(--sep);background:var(--bar);backdrop-filter:blur(20px);padding:6px 0 30px}
.wa-tabs button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:500;color:var(--label);position:relative}
.wa-tabs button.on{font-weight:700}
.wa-tabs .f7-icons{font-size:25px}
.wa-tabs svg{width:25px;height:25px}
.thread{background:var(--wabg)}
.thread .head{display:flex;align-items:center;gap:8px;padding:2px 10px 8px;background:var(--wa-head);backdrop-filter:blur(20px);border-bottom:.5px solid var(--sep);flex:none}
.thread .head .back{color:var(--blue);display:flex;align-items:center;font-size:17px}
.thread .head .back .f7-icons{font-size:26px}
.thread .head .av{width:36px;height:36px}
.thread .head .av .f7-icons{font-size:22px;margin-top:6px}
.thread .head .hn{flex:1;font-weight:600;font-size:17px;line-height:1.15;letter-spacing:-.43px}
.thread .head .hn small{display:block;font-weight:400;font-size:12px;color:var(--label2);letter-spacing:0}
.thread .head .hi{color:var(--blue);display:flex;gap:22px;padding-right:6px}
.msgs{padding:8px 14px 10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' fill='none' stroke='%23000' stroke-opacity='.07' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 26c-3-4-10-2-9 3 1 4 9 9 9 9s8-5 9-9c1-5-6-7-9-3z'/%3E%3Cpath d='M86 14l3 6 6 1-5 4 1 6-5-3-5 3 1-6-5-4 6-1z'/%3E%3Cpath d='M112 82V66l14-3v16'/%3E%3Ccircle cx='109' cy='82' r='3'/%3E%3Ccircle cx='123' cy='79' r='3'/%3E%3Cpath d='M18 88h22a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H27l-6 5v-5h-3a4 4 0 0 1-4-4V92a4 4 0 0 1 4-4z'/%3E%3Ccircle cx='66' cy='58' r='8'/%3E%3Cpath d='M62 124l12-9M67 129l12-9'/%3E%3Cpath d='M50 24c3 0 3 4 6 4s3-4 6-4'/%3E%3Cpath d='M118 120l6 6m0-6-6 6'/%3E%3Cpath d='M96 44h12v9H96zM99 44v-3h6v3'/%3E%3C/svg%3E");background-size:140px 140px}
.screen.darkmode .msgs{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 26c-3-4-10-2-9 3 1 4 9 9 9 9s8-5 9-9c1-5-6-7-9-3z'/%3E%3Cpath d='M86 14l3 6 6 1-5 4 1 6-5-3-5 3 1-6-5-4 6-1z'/%3E%3Cpath d='M112 82V66l14-3v16'/%3E%3Ccircle cx='109' cy='82' r='3'/%3E%3Ccircle cx='123' cy='79' r='3'/%3E%3Cpath d='M18 88h22a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H27l-6 5v-5h-3a4 4 0 0 1-4-4V92a4 4 0 0 1 4-4z'/%3E%3Ccircle cx='66' cy='58' r='8'/%3E%3Cpath d='M62 124l12-9M67 129l12-9'/%3E%3Cpath d='M50 24c3 0 3 4 6 4s3-4 6-4'/%3E%3Cpath d='M118 120l6 6m0-6-6 6'/%3E%3Cpath d='M96 44h12v9H96zM99 44v-3h6v3'/%3E%3C/svg%3E")}
.dchip{margin:10px auto 6px;width:max-content;font-size:12px;font-weight:500;background:var(--wa-them);border-radius:8px;padding:4px 10px;color:var(--wa-meta);box-shadow:0 1px .5px rgba(0,0,0,.08)}
.unreadbar{margin:8px -14px;padding:6px;text-align:center;font-size:13px;font-weight:600;color:var(--wa-meta);background:rgba(255,255,255,.55)}
.screen.darkmode .unreadbar{background:rgba(32,44,51,.7)}
.b{max-width:78%;padding:6px 8px 6px 9px;border-radius:8px;margin:1px 0;font-size:16px;line-height:21px;letter-spacing:-.31px;position:relative;box-shadow:0 1px .5px rgba(0,0,0,.13);word-wrap:break-word;width:max-content;color:var(--label)}
.b.tail{margin-top:6px}
.b.them{background:var(--wa-them)}
.b.mine{background:var(--wa-mine);margin-left:auto}
.b.them.tail{border-top-left-radius:0}
.b.mine.tail{border-top-right-radius:0}
.b.them.tail::before,.b.mine.tail::before{content:'';position:absolute;top:0;width:8px;height:13px;background:inherit}
.b.them.tail::before{left:-7px;clip-path:polygon(100% 0,0 0,100% 100%)}
.b.mine.tail::before{right:-7px;clip-path:polygon(0 0,100% 0,0 100%)}
.b .tm{display:inline-flex;align-items:center;gap:2px;vertical-align:bottom;font-size:11px;color:var(--wa-meta);margin:0 0 -3px 8px;white-space:nowrap;letter-spacing:0}
.tm-ck{display:inline-flex;color:#53bdeb}
.tm-ck .f7-icons{font-size:14px}
.b .gn{display:block;font-size:13px;font-weight:600;color:#c2185b}
.b.media{padding:3px}
.b.media img{width:220px;max-height:300px;object-fit:cover;border-radius:6px;cursor:pointer}
.b.media .tm{position:absolute;right:8px;bottom:6px;color:#fff;margin:0;text-shadow:0 1px 2px #000}
.b.media .tm-ck{color:#fff}
.b.media .play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.b.media .play i{width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center;color:#fff;font-size:22px}
.callb{margin:6px auto;width:max-content;background:var(--wa-them);border-radius:8px;padding:6px 12px;font-size:13px;color:var(--wa-meta);box-shadow:0 1px .5px rgba(0,0,0,.1);display:flex;gap:6px;align-items:center}
.callb .f7-icons{font-size:15px;color:var(--wa)}
.typing{background:var(--wa-them);border-radius:8px;padding:10px 12px;width:max-content;display:flex;gap:4px;margin:6px 0 2px}
.typing i{width:7px;height:7px;border-radius:50%;background:#9aa;animation:tp 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{30%{transform:translateY(-4px);opacity:.5}}
.compose{flex:none;display:flex;align-items:center;gap:12px;padding:6px 10px 30px;background:var(--wa-head);border-top:.5px solid var(--sep)}
.compose:has(+ .kbd.show){padding-bottom:8px}
.compose>.f7-icons{color:var(--blue);font-size:26px}
.compose .field{flex:1;min-height:34px;border-radius:18px;background:var(--bg);border:.5px solid var(--sep);padding:6px 36px 6px 12px;font-size:16px;line-height:21px;color:var(--label);cursor:text;position:relative}
.compose .field.ph{color:var(--gray2)}
.compose .field .stk{position:absolute;right:8px;top:6px;font-size:20px;color:var(--blue)}
.compose .field .caret{display:inline-block;width:2px;height:19px;background:var(--blue);vertical-align:text-bottom;animation:blink 1s steps(1) infinite;margin-left:1px}
@keyframes blink{50%{opacity:0}}
.compose .ib{color:var(--blue);font-size:24px}
.compose .send{width:34px;height:34px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center}
.compose .send .f7-icons{font-size:17px;margin-left:-2px}

/* ---------- keyboard iOS 26 ---------- */
.kbd{flex:none;background:var(--kb-bg);backdrop-filter:blur(30px);padding:8px 3px 0;display:none;border-radius:26px 26px 0 0;position:relative;color:var(--kb-text)}
.kbd.show{display:block}
@keyframes kbIn{from{transform:translateY(100%)}}
.kbd .kr{display:flex;justify-content:center;gap:6px;margin-bottom:12px}
.kbd button{height:44px;min-width:33px;flex:0 1 33px;border-radius:9px;background:var(--kb-key);box-shadow:0 1px 0 rgba(0,0,0,.3);font-size:23px;display:grid;place-items:center;color:var(--kb-text)}
.kbd button:active{opacity:1}
.kbd button.w{flex:0 1 46px;background:var(--kb-key2);font-size:16px}
.kbd button.w .f7-icons{font-size:20px}
.kbd button.sp{flex:1 1 auto;font-size:16px}
.kbd button.ret{flex:0 1 92px;background:var(--blue);color:#fff;font-size:16px}
.kbd .kfoot{display:flex;justify-content:space-between;padding:4px 24px 30px;color:var(--label2)}
.kbd .kfoot .f7-icons{font-size:26px}
.kpop{position:absolute;width:52px;height:96px;border-radius:12px;background:var(--kb-key);box-shadow:0 2px 8px rgba(0,0,0,.25);display:flex;justify-content:center;padding-top:8px;font-size:34px;pointer-events:none;z-index:5;color:var(--kb-text)}

/* ---------- banner ---------- */
#banner{position:absolute;top:calc(var(--st) - 6px);left:8px;right:8px;z-index:94;transform:translateY(calc(-100% - var(--st))) scale(.9);opacity:.4;transition:transform .55s var(--spring),opacity .3s;cursor:pointer}
#banner.show{transform:none;opacity:1}

/* ---------- overlay: call / viewer / sheet ---------- */
#overlay{position:absolute;inset:0;z-index:80;display:none}
#overlay.show{display:block}
.call{position:absolute;inset:0;background:linear-gradient(180deg,#46404f,#141218);color:#fff;display:flex;flex-direction:column;align-items:center;padding-top:110px;animation:fadeIn .35s}
.call .cav{width:96px;height:96px;border-radius:50%;overflow:hidden;margin-bottom:14px}
.call .cav img{width:100%;height:100%;object-fit:cover}
.call h2{margin:0;font-size:28px;font-weight:600;letter-spacing:.38px}
.call .cs{opacity:.7;margin-top:4px;font-size:17px;letter-spacing:-.43px}
.call .lines{flex:1;width:100%;padding:22px 22px 0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;-webkit-mask:linear-gradient(transparent,#000 18%);mask:linear-gradient(transparent,#000 18%)}
.call .line{font-size:16px;line-height:21px;animation:notifIn .5s}
.call .line b{display:block;font-size:12px;opacity:.6;font-weight:600;margin-bottom:1px}
.call .line.c{text-align:right}
.call .ctrls{display:grid;grid-template-columns:repeat(3,72px);gap:18px 28px;padding:12px 0 20px}
.call .ctrls button{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px}
.call .ctrls button i{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:28px}
.call .ctrls button.on i{background:#fff;color:#000}
.call .cbtns{display:flex;gap:90px;padding:10px 0 60px}
.call .cbtns button{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;color:#fff}
.call .cbtns .f7-icons{font-size:30px}
.call .dec{background:#ff3b30}.call .acc{background:#34c759;animation:ring 1.2s infinite}
@keyframes ring{50%{transform:rotate(-12deg) scale(1.06)}}
.viewer{position:absolute;inset:0;background:var(--bg);display:flex;flex-direction:column;color:var(--label);animation:fadeIn .2s}
.viewer.black{background:#000;color:#fff}
.viewer .vt{padding:var(--st) 12px 8px;display:flex;justify-content:space-between;align-items:center;font-size:13px;gap:8px;transition:opacity .2s}
.viewer .vt b{display:block;font-size:17px;letter-spacing:-.43px}
.viewer .vm{flex:1;display:flex;min-height:0;overflow:hidden;position:relative}
.viewer .strip{display:flex;height:100%;transition:transform .35s cubic-bezier(.2,.9,.25,1)}
.viewer .strip>div{flex:0 0 100%;display:grid;place-items:center;min-width:0}
.viewer .strip img,.viewer .strip video{max-width:100%;max-height:100%;object-fit:contain}
.viewer .thumbs{display:flex;gap:2px;justify-content:center;padding:8px 0 4px;transition:opacity .2s;overflow:hidden}
.viewer .thumbs img,.viewer .thumbs video{width:24px;height:38px;object-fit:cover;opacity:.6;border-radius:2px}
.viewer .thumbs img.on,.viewer .thumbs video.on{width:44px;opacity:1}
.viewer .vb{padding:6px 16px 34px;display:flex;justify-content:space-between;align-items:center;transition:opacity .2s}
.viewer.chrome-off .vt,.viewer.chrome-off .vb,.viewer.chrome-off .thumbs{opacity:0}
.viewer .gbtn,.viewer .gpill{color:var(--label)}
.viewer.black .gbtn,.viewer.black .gpill{color:#fff}
.sheet{position:absolute;left:8px;right:8px;bottom:8px;background:var(--card);color:var(--label);border-radius:38px;padding:10px 0 30px;box-shadow:0 -10px 40px rgba(0,0,0,.2);max-height:70%;display:flex;flex-direction:column}
.sheet::before{content:'';display:block;width:36px;height:5px;border-radius:3px;background:var(--gray3);margin:0 auto 10px;flex:none}
.sheet h4{text-align:center;margin:0 0 6px;font-size:17px;letter-spacing:-.43px}
.dim{position:absolute;inset:0;background:rgba(0,0,0,.3)}
@keyframes up{from{transform:translateY(100%)}}
.heartpop{position:absolute;left:50%;top:50%;font-size:96px;color:#fff;transform:translate(-50%,-50%) rotate(var(--rot,0deg));animation:hp .9s forwards;pointer-events:none;z-index:5;filter:drop-shadow(0 4px 16px rgba(0,0,0,.3))}
.vs.tt .heartpop{color:#fe2c55}
@keyframes hp{0%{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(0);opacity:0}18%{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1.2);opacity:1}32%{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(.92)}46%{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1)}75%{opacity:1}100%{transform:translate(-50%,-150%) rotate(var(--rot,0deg)) scale(.7);opacity:0}}

/* ---------- Foto (iOS 26) ---------- */
.photos{background:var(--bg);padding-top:0}
.ph-top{position:absolute;top:0;left:0;right:0;z-index:6;padding:var(--st) 16px 30px;display:flex;justify-content:space-between;align-items:flex-start;background:linear-gradient(var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 60%,transparent);pointer-events:none}
.ph-top>*{pointer-events:auto}
.ph-top .sub2{font-size:15px;color:var(--label2);font-weight:500}
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.ph-grid.d5{grid-template-columns:repeat(5,1fr)}
.ph-grid button{aspect-ratio:1;position:relative;overflow:hidden;background:var(--gray5)}
.ph-grid img{width:100%;height:100%;object-fit:cover}
.ph-grid .vd{position:absolute;right:5px;bottom:4px;color:#fff;font-size:12px;text-shadow:0 1px 2px #000}
.ph-card{position:relative;margin:0 14px 14px;border-radius:24px;overflow:hidden;aspect-ratio:1.15;display:block;width:calc(100% - 28px)}
.ph-card img{width:100%;height:100%;object-fit:cover}
.ph-card b{position:absolute;left:16px;bottom:14px;color:#fff;font-size:28px;font-weight:700;letter-spacing:.38px;text-shadow:0 2px 10px rgba(0,0,0,.4);text-align:left}
.ph-card b small{display:block;font-size:15px;font-weight:600;opacity:.9}
.ph-zoom{position:absolute;left:0;right:0;bottom:104px;display:flex;justify-content:center;z-index:20}
.ph-zoom .seg{box-shadow:0 8px 24px rgba(0,0,0,.15)}
.ph-sec{display:flex;justify-content:space-between;align-items:center;padding:18px 16px 10px}
.ph-sec .f7-icons{font-size:16px;color:var(--label2)}
.ph-hrow{display:flex;gap:12px;padding:0 16px;overflow-x:auto}
.album{text-align:left;font-size:15px;letter-spacing:-.23px;flex:0 0 160px;color:var(--label)}
.album .cov{width:160px;height:160px;border-radius:14px;overflow:hidden;background:var(--gray5);margin-bottom:6px;display:grid;place-items:center}
.album .cov img{width:100%;height:100%;object-fit:cover}
.album small{display:block;color:var(--label2)}
.person{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 96px;font-size:14px;color:var(--label)}
.person img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.util .sicon{background:none;color:var(--blue)}

/* ---------- Instagram ---------- */
.page.ig{background:var(--bg);padding-top:var(--st)}
.ighead{display:flex;justify-content:space-between;align-items:center;padding:2px 14px 8px;flex:none}
.ighead .logo{font-family:'Grand Hotel','Brush Script MT',cursive;font-size:32px;line-height:1;display:flex;align-items:center;gap:4px}
.ighead .logo .f7-icons{font-size:14px;font-family:'Framework7 Icons'}
.ighead .ic{display:flex;gap:20px}
.ighead .ic .f7-icons{font-size:26px}
.vbadge{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-left:3px}
.stories{display:flex;gap:12px;padding:4px 12px 12px;border-bottom:.5px solid var(--sep);flex:none}
.story{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;flex:none;width:72px;color:var(--label)}
.story .ring{width:70px;height:70px;border-radius:50%;padding:2.5px;background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf)}
.story .ring.cf{background:#1fb53a}
.story .ring.seen{background:var(--gray4)}
.story .ring img,.story .ring div{width:100%;height:100%;border-radius:50%;border:2.5px solid var(--bg);object-fit:cover;background:var(--gray5)}
.story span{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post .ph{display:flex;align-items:center;gap:10px;padding:10px 12px;font-weight:600;font-size:14px}
.post .ph img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.post .ph .f7-icons{margin-left:auto;font-size:20px}
.post .media{position:relative}
.post .pm{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--gray5)}
.post .pa{display:flex;gap:16px;padding:10px 12px 4px;align-items:center}
.post .pa .f7-icons{font-size:26px}
.post .pa .sv{margin-left:auto}
.post .pa .liked{color:var(--igred)}
.post .pt{padding:0 12px 14px;font-size:14px;line-height:18px}
.post .pt small{color:var(--label2)}
.sugg{border-top:.5px solid var(--sep);border-bottom:.5px solid var(--sep);padding:12px 0 14px;margin-bottom:6px}
.sugg .h{display:flex;justify-content:space-between;padding:0 14px 10px;font-size:15px;font-weight:600}
.sugg .h a{font-size:14px}
.sugg .row2{display:flex;gap:8px;padding:0 14px}
.scard{flex:0 0 160px;border:.5px solid var(--sep);border-radius:6px;padding:16px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;position:relative}
.scard img,.scard .ph0{width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--gray5);margin-bottom:6px}
.scard small{color:var(--label2);text-align:center;font-size:12px;line-height:15px;height:30px}
.scard button.f{background:#0095f6;color:#fff;border-radius:8px;width:100%;padding:7px;font-weight:600;margin-top:6px}
.scard .x{position:absolute;top:6px;right:6px;color:var(--label2);font-size:16px}
.prof{padding:4px 16px 12px}
.prof .top{display:flex;align-items:center;gap:24px}
.prof .top img{width:86px;height:86px;border-radius:50%;object-fit:cover}
.prof .st{display:flex;flex:1;justify-content:space-around;text-align:center;font-size:13px}
.prof .st b{display:block;font-size:17px}
.prof .bio{font-size:14px;line-height:18px;margin-top:10px;white-space:pre-line}
.prof .pb{display:flex;gap:6px;margin-top:12px}
.prof .pb button{flex:1;background:var(--fill);border-radius:8px;padding:7px;font-weight:600;font-size:14px;display:flex;gap:4px;align-items:center;justify-content:center;color:var(--label)}
.prof .pb .f7-icons{font-size:15px;color:#1fb53a}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px}
.ig-grid button{aspect-ratio:3/4;overflow:hidden;position:relative}
.ig-grid img{width:100%;height:100%;object-fit:cover}
.ig-tabs{flex:none;display:flex;justify-content:space-around;align-items:center;border-top:.5px solid var(--sep);background:var(--bg);padding:10px 0 32px;color:var(--label)}
.ig-tabs button .f7-icons{font-size:27px}
.ig-tabs svg{width:27px;height:27px;display:block}
.ig-tabs img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.ig-tabs .on img{box-shadow:0 0 0 2px var(--label)}
.cm{display:flex;gap:10px;padding:10px 16px;font-size:14px;line-height:18px}
.cm img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.cm small{display:block;color:var(--label2);font-size:12px;margin-top:2px}
.storyv{position:absolute;inset:0;background:#000;color:#fff;animation:fadeIn .25s}
.storyv img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.storyv .bars{position:absolute;top:calc(var(--st) - 4px);left:8px;right:8px;display:flex;gap:4px;z-index:2}
.storyv .bars i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.storyv .bars i b{display:block;height:100%;width:0;background:#fff}
.storyv .bars i.done b{width:100%}
.storyv .bars i.run b{animation:sbar 5s linear forwards}
.storyv.paused .bars i.run b{animation-play-state:paused}
@keyframes sbar{to{width:100%}}
.storyv .who{position:absolute;top:calc(var(--st) + 8px);left:12px;right:12px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;z-index:3;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.storyv .who img{width:32px;height:32px;border-radius:50%}
.storyv .who .cfb{background:#1fb53a;border-radius:10px;padding:2px 8px;font-size:11px;display:flex;align-items:center;gap:3px;text-shadow:none}
.storyv .who .cfb .f7-icons{font-size:10px}
.storyv .who .x{margin-left:auto}
.storyv .cap{position:absolute;left:0;right:0;top:46%;text-align:center;font-weight:700;font-size:22px;z-index:2;pointer-events:none}
.storyv .cap span{background:rgba(0,0,0,.55);padding:4px 10px;border-radius:6px}
.storyv .tl,.storyv .tr{position:absolute;top:0;bottom:90px;z-index:1}
.storyv .tl{left:0;width:35%}.storyv .tr{right:0;width:65%}
.storyv .reply{position:absolute;left:12px;right:12px;bottom:36px;z-index:2;display:flex;gap:14px;align-items:center}
.storyv .reply div{flex:1;border:1px solid rgba(255,255,255,.7);border-radius:22px;padding:11px 16px;font-size:14px}

/* ---------- feed video vertikal (TikTok / Reels) ---------- */
.vfeed{flex:1;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;background:#000}
.vfeed::-webkit-scrollbar{display:none}
.vs{height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:hidden}
.vs video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vs .shade{position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none}
.vs .rail{position:absolute;right:8px;bottom:120px;display:flex;flex-direction:column;align-items:center;gap:16px;color:#fff;font-size:12px;font-weight:600;z-index:2}
.vs .rail button{display:flex;flex-direction:column;align-items:center;gap:3px;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.vs .rail .f7-icons{font-size:34px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.vs .rail .liked .f7-icons{color:#fe2c55}
.vs .rail .avw{position:relative;margin-bottom:8px}
.vs .rail .avw img{width:46px;height:46px;border-radius:50%;border:1.5px solid #fff;object-fit:cover}
.vs .rail .avw>i{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:#fe2c55;display:grid;place-items:center;font-size:12px}
.vs .disc{width:44px;height:44px;border-radius:50%;background:radial-gradient(#444 30%,#111 31%);display:grid;place-items:center;animation:spin 4s linear infinite;overflow:hidden}
.vs .disc img{width:24px;height:24px;border-radius:50%}
@keyframes spin{to{transform:rotate(360deg)}}
.vs .meta{position:absolute;left:12px;right:80px;bottom:110px;color:#fff;z-index:2;font-size:15px;line-height:20px;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.vs .meta b{font-size:16px}
.vs .meta .snd{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:14px}
.vs .meta .snd .f7-icons{font-size:14px}
.vs .paused{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:rgba(255,255,255,.8)}
.vs .paused .f7-icons{font-size:72px}
.vs .prog{position:absolute;left:0;right:0;bottom:84px;height:2px;background:rgba(255,255,255,.2);z-index:2}
.vs .prog i{display:block;height:100%;width:0;background:rgba(255,255,255,.85)}
.mutebtn{position:absolute;top:calc(var(--st) + 48px);left:14px;z-index:3;color:#fff;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;background:rgba(0,0,0,.35);border-radius:16px;padding:6px 10px}
.mutebtn .f7-icons{font-size:16px}

/* ---------- TikTok ---------- */
.tt{background:#000;color:#fff}
.tt .top{position:absolute;top:var(--st);left:0;right:0;z-index:4;display:flex;justify-content:center;align-items:center;gap:20px;font-size:17px;font-weight:600;color:rgba(255,255,255,.65);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.tt .top button.on{color:#fff;position:relative}
.tt .top button.on::after{content:'';position:absolute;left:30%;right:30%;bottom:-7px;height:2.5px;border-radius:2px;background:#fff}
.tt .top .live{position:absolute;left:16px;font-size:13px}
.tt .top .srch{position:absolute;right:16px}
.tt .top .f7-icons{font-size:24px}
.tt-tabs{flex:none;display:flex;justify-content:space-around;align-items:center;background:#000;padding:8px 0 30px;border-top:.5px solid #222}
.tt-tabs button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;font-weight:600;color:rgba(255,255,255,.6);position:relative}
.tt-tabs button.on{color:#fff}
.tt-tabs .f7-icons{font-size:25px}
.tt-tabs .plus{width:46px;height:30px;border-radius:9px;background:#fff;color:#000;display:grid;place-items:center;box-shadow:-3px 0 0 #25f4ee,3px 0 0 #fe2c55}
.tt-tabs .plus .f7-icons{font-size:18px;font-weight:700}
.tt-tabs .bdg{position:absolute;top:-4px;right:-8px;background:#fe2c55;color:#fff;border-radius:9px;min-width:18px;height:18px;font-size:11px;display:grid;place-items:center;padding:0 5px}
.tt.light{background:var(--bg);color:var(--label);padding-top:var(--st)}
.tt.light .tt-tabs{background:var(--bg);border-top-color:var(--sep)}
.tt.light .tt-tabs button{color:var(--label2)}
.tt.light .tt-tabs button.on{color:var(--label)}
.tt.light .tt-tabs .plus{background:var(--label);color:var(--bg)}
.ttprof{text-align:center;padding:6px 16px 10px}
.ttprof img{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 8px}
.ttprof .h{font-weight:700;font-size:17px}
.ttprof .st{display:flex;justify-content:center;gap:26px;margin:14px 0 12px;font-size:13px;color:var(--label2)}
.ttprof .st b{display:block;color:var(--label);font-size:17px}
.ttprof .bt{display:flex;gap:6px;justify-content:center}
.ttprof .bt button{background:var(--fill);border-radius:6px;padding:9px 18px;font-weight:600;font-size:15px}
.ttprof .bio{font-size:14px;white-space:pre-line;margin-top:10px}
.tt-ptabs{display:flex;border-bottom:.5px solid var(--sep);flex:none}
.tt-ptabs button{flex:1;padding:10px 0;color:var(--gray2);position:relative}
.tt-ptabs button.on{color:var(--label)}
.tt-ptabs button.on::after{content:'';position:absolute;left:35%;right:35%;bottom:0;height:2px;background:var(--label)}
.tt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px}
.tt-grid button{aspect-ratio:3/4;position:relative;overflow:hidden;background:#222}
.tt-grid img{width:100%;height:100%;object-fit:cover}
.tt-grid span{position:absolute;left:6px;bottom:5px;color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;gap:2px;text-shadow:0 1px 2px #000}
.tt-grid span .f7-icons{font-size:13px}

/* ---------- X ---------- */
.page.x{background:var(--bg);padding-top:var(--st);color:var(--x-text)}
.xhead{flex:none;display:flex;align-items:center;justify-content:center;position:relative;height:44px}
.xhead .me{position:absolute;left:14px;width:32px;height:32px;border-radius:50%;object-fit:cover}
.xhead svg{width:26px;height:26px}
.xtabs{flex:none;display:flex;border-bottom:.5px solid var(--x-sep)}
.xtabs button{flex:1;padding:14px 0;font-size:15px;font-weight:500;color:var(--x-sub);position:relative}
.xtabs button.on{color:var(--x-text);font-weight:700}
.xtabs button.on::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:56px;height:4px;border-radius:2px;background:var(--xblue)}
.tw{display:flex;gap:10px;padding:12px 14px;border-bottom:.5px solid var(--x-sep);font-size:15px;line-height:20px;color:var(--x-text)}
.tw .tav{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:linear-gradient(135deg,#ffb3c6,#c084fc)}
.tw .tb{flex:1;min-width:0}
.tw .tn{display:flex;gap:4px;align-items:center;white-space:nowrap;overflow:hidden}
.tw .tn b{overflow:hidden;text-overflow:ellipsis}
.tw .tn span{color:var(--x-sub);overflow:hidden;text-overflow:ellipsis}
.tw .tn .f7-icons{font-size:16px;color:var(--x-sub);margin-left:auto}
.tw .vf{color:var(--xblue);font-size:16px}
.tw .tm{margin-top:10px;border-radius:16px;overflow:hidden;border:.5px solid var(--x-sep)}
.tw .tm img{width:100%;max-height:300px;object-fit:cover}
.tw .ta{display:flex;justify-content:space-between;margin-top:10px;color:var(--x-sub);font-size:13px;padding-right:12px}
.tw .ta button{display:flex;align-items:center;gap:4px}
.tw .ta .f7-icons{font-size:17px}
.tw .ta .liked{color:#f91880}
.xfab{position:absolute;right:16px;bottom:104px;width:56px;height:56px;border-radius:50%;background:var(--xblue);color:#fff;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.2);z-index:3}
.xfab .f7-icons{font-size:24px}
.x-tabs{flex:none;display:flex;justify-content:space-around;border-top:.5px solid var(--x-sep);background:var(--bg);padding:12px 0 30px}
.x-tabs button{position:relative;color:var(--x-text)}
.x-tabs .f7-icons{font-size:27px}
.x-tabs .dot{position:absolute;top:-3px;right:-8px;background:var(--xblue);color:#fff;border-radius:9px;min-width:18px;height:18px;font-size:11px;display:grid;place-items:center;padding:0 4px;border:1.5px solid var(--bg)}
.xprof .banner{height:120px;background:#cfd9de center/cover}
.xprof .pav{width:80px;height:80px;border-radius:50%;border:4px solid var(--bg);margin:-40px 0 0 14px;object-fit:cover}
.xprof .edit{position:absolute;right:14px;margin-top:-34px;border:1px solid var(--x-sep);border-radius:18px;padding:6px 16px;font-weight:700;font-size:15px}
.xprof .info{padding:6px 14px 10px;font-size:15px;line-height:20px}
.xprof .info .n{font-size:20px;font-weight:800;line-height:24px}
.xprof .info .h,.xprof .info .j{color:var(--x-sub)}
.xprof .info .j{display:flex;align-items:center;gap:4px;margin-top:8px}
.xprof .info .j .f7-icons{font-size:16px}
.xprof .info .ff{margin-top:8px;color:var(--x-sub)}
.xprof .info .ff b{color:var(--x-text)}
.xtr{padding:12px 14px;border-bottom:.5px solid var(--x-sep);font-size:13px;color:var(--x-sub);display:flex;justify-content:space-between}
.xtr b{display:block;font-size:15px;color:var(--x-text);margin:2px 0}
.xn{display:flex;gap:12px;padding:12px 14px;border-bottom:.5px solid var(--x-sep);font-size:15px;line-height:20px}
.xn > .f7-icons{font-size:26px;width:32px;text-align:right}
.xn img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.xn .sub{color:var(--x-sub);margin-top:4px}

/* ---------- Safari ---------- */
.safari{background:var(--bg2);padding-top:var(--st)}
.sf-fav{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:0 16px 20px}
.sf-fav a{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--label);text-align:center;line-height:13px}
.sf-fav a i{width:62px;height:62px;border-radius:14px;background:var(--card);display:grid;place-items:center;font-style:normal;font-size:26px;font-weight:700;color:var(--gray);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.sf-bar{position:absolute;left:12px;right:12px;bottom:26px;z-index:10;display:flex;gap:8px;align-items:center}
.sf-bar .gbtn{width:48px;height:48px}
.sf-bar .url{flex:1;height:48px;border-radius:24px;display:flex;align-items:center;padding:0 16px;gap:6px}
.sf-bar input{flex:1;border:0;background:none;font:inherit;font-size:17px;letter-spacing:-.43px;outline:none;min-width:0;color:var(--label)}
.sf-bar .url .f7-icons{font-size:17px;color:var(--label2)}

/* ---------- Catatan ---------- */
.notes{background:var(--bg2);padding-top:var(--st)}
.notes .gbtn,.notes .gpill{color:#e6a700}
.note-ed{flex:1;background:var(--bg);padding:0 20px 40px;display:flex;flex-direction:column}
.note-ed small{color:var(--label2);text-align:center;font-size:13px;padding:6px 0 12px}
.note-ed textarea{flex:1;border:0;outline:none;resize:none;font:inherit;font-size:17px;line-height:22px;letter-spacing:-.43px;background:none;color:var(--label)}
.note-ed textarea::first-line{font-weight:700;font-size:28px}

/* ---------- Kalender ---------- */
.cal-h{display:flex;justify-content:space-between;align-items:center;padding:0 16px 8px}
.cal-h .gbtn{color:var(--red)}
.cal-wd,.cal-g{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;padding:0 8px}
.cal-wd{font-size:13px;color:var(--label2);padding-bottom:6px;font-weight:500}
.cal-g button{height:48px;font-size:20px;letter-spacing:-.45px;position:relative;display:grid;place-items:center;color:var(--label)}
.cal-g button span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center}
.cal-g button.today span{color:var(--red);font-weight:600}
.cal-g button.sel span{background:var(--red);color:#fff;font-weight:600}
.cal-g button.dot::after{content:'';position:absolute;bottom:2px;width:5px;height:5px;border-radius:50%;background:var(--gray2)}
.cal-ev{border-top:.5px solid var(--sep);margin-top:8px;padding:12px 16px 110px}
.cal-ev .e{display:flex;gap:10px;padding:10px 12px;margin-top:8px;border-radius:10px;background:rgba(175,82,222,.14);font-size:15px;letter-spacing:-.23px}
.cal-ev .e::before{content:'';width:4px;border-radius:2px;background:var(--purple)}

/* ---------- Peta ---------- */
.maps{background:#e8e4da}
#map{position:absolute;inset:0;z-index:1;background:#e8e4da}
.screen.darkmode #map{background:#1b1b1d}
.map-sheet{position:absolute;left:8px;right:8px;bottom:8px;z-index:5;border-radius:38px;padding:8px 0 30px;max-height:46%;display:flex;flex-direction:column;color:var(--label)}
.map-sheet::before{content:'';width:36px;height:5px;border-radius:3px;background:var(--gray3);margin:0 auto 10px;flex:none}
.map-sheet .row{font-size:15px;min-height:50px}
.pinb{width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;flex:none}
.pinb .f7-icons{font-size:16px}
.apin{width:34px;height:44px;position:relative;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3))}
.apin div{width:34px;height:34px;border-radius:50%;background:#ff3b30;border:2.5px solid #fff;display:grid;place-items:center;color:#fff}
.apin div .f7-icons{font-size:16px}
.apin::after{content:'';position:absolute;left:50%;bottom:2px;width:6px;height:6px;border-radius:50%;background:#ff3b30;transform:translateX(-50%);box-shadow:0 0 0 1.5px #fff}
.apin.cafe div{background:#ff9500}.apin.cafe::after{background:#ff9500}
.apin.park div{background:#34c759}.apin.park::after{background:#34c759}
.place .pt1{font-size:24px;font-weight:700;letter-spacing:.3px;padding:0 20px}
.place .pt2{color:var(--label2);font-size:15px;padding:2px 20px 12px}
.place .acts{display:flex;gap:8px;padding:0 16px 12px}
.place .acts a,.place .acts button{flex:1;border-radius:14px;background:var(--fill);padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;font-weight:600;color:var(--blue)}
.place .acts .pri{background:var(--blue);color:#fff}
.leaflet-control-attribution{font-size:9px!important}

/* ---------- Cuaca (latar animasi) ---------- */
.wx{color:#fff;padding-top:var(--st);background:linear-gradient(180deg,#2d6ab8,#5f97d8 55%,#8db7e6)}
.wx.night{background:linear-gradient(180deg,#0b1430,#1d2b55 55%,#33467a)}
.wx.cloudy{background:linear-gradient(180deg,#56687d,#7f93a8 55%,#a2b2c2)}
.wx.cloudy.night{background:linear-gradient(180deg,#1a2230,#2c3746 60%,#3c4757)}
.wx.rain{background:linear-gradient(180deg,#36475c,#56687e 55%,#73859a)}
.wx.rain.night{background:linear-gradient(180deg,#111926,#222d3c 60%,#323f50)}
.wxfx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wxfx .stars{position:absolute;inset:0;background:radial-gradient(1px 1px at 20% 15%,#fff,transparent),radial-gradient(1px 1px at 70% 8%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 30%,#fff,transparent),radial-gradient(1px 1px at 85% 25%,#fff,transparent),radial-gradient(1px 1px at 10% 40%,#fff,transparent),radial-gradient(1px 1px at 55% 18%,#fff,transparent),radial-gradient(1.5px 1.5px at 30% 6%,#fff,transparent);opacity:.8;animation:twinkle 4s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.4}}
.wxfx .sun{position:absolute;top:-80px;left:-60px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(255,236,170,.7),rgba(255,214,10,0) 65%);animation:glow 6s ease-in-out infinite alternate}
@keyframes glow{to{transform:scale(1.12)}}
.wxfx .cloud{position:absolute;width:260px;height:90px;border-radius:50px;background:rgba(255,255,255,.18);filter:blur(8px);animation:drift 40s linear infinite}
.wxfx .cloud::before,.wxfx .cloud::after{content:'';position:absolute;border-radius:50%;background:inherit}
.wxfx .cloud::before{width:120px;height:120px;left:40px;top:-50px}.wxfx .cloud::after{width:90px;height:90px;left:130px;top:-30px}
.wxfx .cloud.c2{top:240px;animation-duration:58s;animation-delay:-20s;opacity:.7;transform:scale(.8)}
@keyframes drift{from{left:-300px}to{left:420px}}
.wxfx .rainl{position:absolute;inset:-100px 0 0;background:repeating-linear-gradient(105deg,transparent 0 14px,rgba(255,255,255,.22) 14px 15px,transparent 15px 34px);background-size:100% 120px;animation:rain .45s linear infinite;-webkit-mask:linear-gradient(transparent,#000 20%);mask:linear-gradient(transparent,#000 20%)}
@keyframes rain{to{background-position:-30px 120px}}
.wx .cur{text-align:center;padding:26px 0 18px;position:relative}
.wx .cur h2{margin:0;font-size:34px;font-weight:400;letter-spacing:.4px}
.wx .cur .t{font-size:102px;font-weight:200;line-height:1;margin-left:24px}
.wx .cur div{font-size:20px;font-weight:500;letter-spacing:-.45px}
.wx .card{margin:0 16px 10px;border-radius:24px;background:rgba(255,255,255,.14);backdrop-filter:blur(12px);padding:12px 16px;position:relative}
.wx .card h5{margin:0 0 8px;font-size:13px;text-transform:uppercase;opacity:.65;font-weight:600;border-bottom:.5px solid rgba(255,255,255,.3);padding-bottom:8px;display:flex;align-items:center;gap:6px}
.wx .card h5 .f7-icons{font-size:13px}
.wx .hours{display:flex;gap:22px;font-size:15px;font-weight:600;text-align:center;padding-bottom:4px}
.wx .hours div{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none}
.wx .hours small{font-size:11px;color:#9fd1ff;margin-top:-8px}
.wx .day{display:grid;grid-template-columns:78px 30px 34px 1fr 34px;align-items:center;gap:6px;padding:9px 0;font-size:17px;font-weight:600;border-top:.5px solid rgba(255,255,255,.2)}
.wx .day:first-of-type{border-top:0}
.wx .day .lo{opacity:.6;text-align:right}
.wx .day .bar{height:5px;border-radius:3px;background:rgba(0,0,0,.18);position:relative}
.wx .day .bar i{position:absolute;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#9fdc7a,#f8c55a,#f39a3c)}
.wx .sq{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 16px 10px}
.wx .sq .card{margin:0;aspect-ratio:1;display:flex;flex-direction:column}
.wx .sq .card h5{border:0;padding:0}
.wx .sq .v{font-size:34px;font-weight:500;line-height:1.1}
.wx .sq .d{margin-top:auto;font-size:13px;line-height:17px;opacity:.9}
.wx .sq .uvbar{height:5px;border-radius:3px;background:linear-gradient(90deg,#3cd070,#ffd60a,#ff9500,#ff3b30,#af52de);margin:8px 0;position:relative}
.wx .sq .uvbar i{position:absolute;top:-2px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.25);transform:translateX(-50%)}
.wi{font-size:24px}
.wi.sun{color:#ffd60a}.wi.cloud{color:#fff}.wi.rain{color:#cfe8ff}.wi.moon{color:#fff}

/* ---------- Jam ---------- */
.clock{background:#000;color:#fff;padding-top:var(--st)}
.clock .gbtn,.clock .gpill{color:var(--orange)}
.clock .row{color:#fff}
.clock .row+.row::before{border-color:#38383a}
.clock .alarm .t{font-size:56px;font-weight:300;line-height:1}
.clock .alarm.off{color:var(--gray)}
.clock .tgl{background:#39393d}
.clock .tgl.on{background:#30d158}
.sw{font-size:84px;font-weight:200;text-align:center;padding:70px 0 40px;font-variant-numeric:tabular-nums}
.swb{display:flex;justify-content:space-between;padding:0 24px}
.swb button{width:84px;height:84px;border-radius:50%;font-size:17px;box-shadow:0 0 0 2px #000,0 0 0 4px currentColor}
.swb .l{background:#333;color:#fff}.swb .s{background:#0a3b1a;color:#30d158}.swb .s.stop{background:#3d0f0c;color:#ff453a}
.laps .row{font-variant-numeric:tabular-nums}
.clock .ltab .bar button{color:#fff}
.clock .ltab .bar button.on{background:rgba(255,255,255,.12);color:#ff9f0a}

/* ---------- Telepon / Musik / Pengaturan ---------- */
.miss{color:var(--red)}
.np{position:absolute;left:16px;right:16px;bottom:96px;z-index:19;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:24px;color:var(--label)}
.st-bar{height:8px;border-radius:4px;background:var(--gray5);overflow:hidden;margin-top:6px}
.st-bar i{display:block;height:100%;background:var(--blue)}
.wallprev{display:flex;gap:14px;justify-content:center;padding:16px}
.wallprev div{width:120px;height:250px;border-radius:18px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.2);position:relative;color:#fff;font-weight:700;font-size:30px;text-align:center;padding-top:30px}
.endcard{position:absolute;inset:0;background:rgba(0,0,0,.82);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;gap:14px;animation:fadeIn .5s}
.endcard h3{margin:0;font-size:28px;letter-spacing:.38px}
.endcard p{margin:0;opacity:.8;line-height:22px}
.endcard button{margin-top:10px;background:#fff;color:#000;border-radius:22px;padding:12px 24px;font-weight:600}

/* ============================================================
   PAKET A–C
   ============================================================ */
:root{--spring:cubic-bezier(.2,1.2,.4,1)}
#wall{transform:scale(1.06);transition:transform .25s ease-out,filter .3s}
.launchico{position:absolute;inset:0;z-index:60;pointer-events:none}
.launchico svg{width:100%;height:100%;display:block}

/* Liquid Glass: refraksi + kilau mengikuti jari + tekan memantul */
/* peta refraksi per-ukuran dipasang app.js (applyGlass) sebagai inline backdrop-filter */
.gbtn,.gpill,.ltab .bar,.ltab .solo,.notif,.sf-bar .url,.lock .lbtns button,.ccb,.spot .url{position:relative}
.glass:not(.map-sheet)::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(70% 90% at var(--hx,22%) var(--hy,0%),rgba(255,255,255,.55),rgba(255,255,255,0) 62%);mix-blend-mode:overlay;opacity:.75;z-index:0;transition:opacity .35s,background-size .5s}
/* sentuhan menyala dari dalam: cahaya mulai di titik jari lalu menyebar */
.glass.lit::before{opacity:1;background:radial-gradient(120% 140% at var(--hx) var(--hy),rgba(255,255,255,.75),rgba(255,255,255,.12) 55%,rgba(255,255,255,0) 80%);animation:litglow .45s ease-out}
@keyframes litglow{from{background-size:30% 30%;background-position:var(--hx) var(--hy);background-repeat:no-repeat}}
.dock.glass::before{opacity:.35}
button.glass,.ltab .bar,.ltab .solo{transition:transform .5s var(--spring-bouncy),filter .3s}
button.glass:active,.ltab .bar:active,.ltab .solo:active{opacity:1;transform:scale(1.06);filter:brightness(1.08) saturate(1.15)}
.ltab .bar{transition:width .55s var(--spring),transform .5s var(--spring-bouncy),filter .3s}
.ltab .bar button{transition:flex-grow .5s var(--spring),opacity .2s,padding .3s;min-width:0;overflow:hidden;white-space:nowrap}
.ltab.mini .bar button:not(.on){flex-grow:0;flex-basis:0;opacity:0;padding:0}
.ltab.mini .bar button.on{background:none}

/* menu kaca & menu konteks */
.gmenu-wrap{position:absolute;inset:0;z-index:88}
.gmenu{position:absolute;min-width:250px;border-radius:26px;overflow:hidden;padding:6px 0;background:color-mix(in srgb,var(--card) 74%,transparent)!important}
.ctx{position:absolute;inset:0;z-index:88;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);background:rgba(0,0,0,.14);animation:fadeIn .2s}
.ctx .lift{position:absolute;transition:transform .5s var(--spring);pointer-events:none;z-index:2}
.ctx .lift.app span{display:none}
.ctx .menu{position:absolute;min-width:250px;border-radius:22px;overflow:hidden;padding:6px 0;background:color-mix(in srgb,var(--card) 76%,transparent)!important;color:var(--label);animation:menuIn .45s var(--spring);z-index:3}
@keyframes menuIn{from{transform:scale(.4);opacity:0}}
.mi{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:11px 18px;width:100%;font-size:17px;letter-spacing:-.43px;color:var(--label);text-align:left;position:relative;z-index:1}
.mi+.mi{border-top:.5px solid var(--sep)}
.mi .f7-icons{font-size:19px}
.mi.red{color:var(--red)}
.reacts{position:absolute;display:flex;gap:2px;padding:6px 8px;border-radius:30px;background:var(--card);box-shadow:0 8px 30px rgba(0,0,0,.25);animation:menuIn .45s var(--spring);z-index:3}
.reacts button{font-size:28px;width:42px;height:42px;transition:transform .3s var(--spring)}
.reacts button:hover{transform:scale(1.35) translateY(-5px)}
.b.hasr{margin-bottom:16px}
.b .react{position:absolute;bottom:-15px;right:6px;background:var(--wa-them);border-radius:12px;padding:0 5px;font-size:14px;line-height:22px;box-shadow:0 1px 3px rgba(0,0,0,.25);border:1.5px solid var(--wabg)}
.toast{position:absolute;top:70px;left:50%;transform:translateX(-50%);z-index:99;padding:10px 18px;border-radius:22px;font-size:15px;font-weight:600;color:var(--label);white-space:nowrap;animation:fadeIn .3s}

/* mode goyang (edit Layar Utama) */
.home.jiggle .grid .app .ico,.home.jiggle .dock .app .ico{animation:jig .26s ease-in-out infinite alternate}
.home.jiggle .app:nth-child(2n) .ico{animation-delay:-.13s;animation-direction:alternate-reverse}
@keyframes jig{from{transform:rotate(-2.2deg)}to{transform:rotate(2.2deg)}}
.home.jiggle .grid .app::before,.home.jiggle .dock .app::before{content:"\2212";position:absolute;top:-7px;left:-7px;width:22px;height:22px;border-radius:50%;background:rgba(110,110,115,.92);color:#fff;font-size:17px;font-weight:700;line-height:21px;text-align:center;z-index:3;text-shadow:none}
.home.jiggle .badge{display:none}
.jdone{position:absolute!important;top:58px;right:16px;z-index:5}

/* Dynamic Island hidup */
.island{display:flex;align-items:center;justify-content:space-between;padding:0 9px;color:#fff;transition:width .6s var(--spring)}
.island.live{width:190px;cursor:pointer}
.island .il,.island .ir{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:600;animation:fadeIn .3s .2s backwards}
.island .callg{width:22px;height:22px;border-radius:50%;background:#30d158;display:grid;place-items:center}
.island .callg .f7-icons{font-size:12px}
.island .timer{color:#30d158;font-variant-numeric:tabular-nums}
.island .art{width:22px;height:22px;border-radius:6px;object-fit:cover}
.wave{display:flex;gap:2px;align-items:center;height:16px}
.wave i{display:block;width:3px;height:6px;border-radius:2px;background:#ff375f;animation:wv .8s ease-in-out infinite alternate}
.wave i:nth-child(2){animation-delay:-.2s}.wave i:nth-child(3){animation-delay:-.45s}.wave i:nth-child(4){animation-delay:-.6s}
@keyframes wv{to{height:16px}}
#callov{position:absolute;inset:0;z-index:82;display:none}
#callov.show{display:block}
#callov.min{display:none}

/* QuickType */
.kbd .qt{display:flex;height:40px;align-items:center;margin:-4px 4px 8px}
.kbd .qt button{flex:1 1 0;min-width:0;background:none;box-shadow:none;height:36px;font-size:16px;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px;display:block;line-height:36px}
.kbd .qt button+button{border-left:.5px solid var(--sep);border-radius:0}

/* Lock: notifikasi bertumpuk */
.lock .notifs.stack{display:block}
.lock .notifs.stack .notif{position:relative;z-index:3}
.lock .notifs.stack .notif:nth-child(2),.lock .notifs.stack .notif:nth-child(3){position:absolute;left:0;right:0;bottom:0;pointer-events:none}
.lock .notifs.stack .notif:nth-child(2){transform:translateY(9px) scale(.94);z-index:2;opacity:.8}
.lock .notifs.stack .notif:nth-child(3){transform:translateY(18px) scale(.88);z-index:1;opacity:.55}
.lock .notifs.stack .notif:nth-child(n+4){display:none}
.lock .notifs.stack .notif:nth-child(n+2) .ni,.lock .notifs.stack .notif:nth-child(n+2) .nb{visibility:hidden}

/* Home: 3 halaman (utama, widget, App Library) */
.home{padding:0!important}
.hstrip{position:absolute!important;top:0;left:0;height:100%;display:flex;width:300%;will-change:transform}
.hpage{width:33.3333%;height:100%;padding:72px 24px 0;flex:none;position:relative}
.hfoot{position:absolute!important;left:0;right:0;bottom:118px;display:flex;flex-direction:column;align-items:center;gap:8px}
.hfoot .search-pill{margin:0}
.hfoot .dots{display:flex;gap:8px}
.hfoot .dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .3s}
.hfoot .dots i.on{background:#fff}
.wbig{width:100%;height:170px;border-radius:24px;overflow:hidden;position:relative;display:block;margin-bottom:20px;box-shadow:0 6px 20px rgba(0,0,0,.15)}
.wbig img{width:100%;height:100%;object-fit:cover}
.wbig b{position:absolute;left:14px;bottom:12px;color:#fff;font-size:20px;font-weight:700;text-align:left;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.wbig b small{display:block;font-size:13px;font-weight:600;opacity:.9}
.wsm{height:160px;border-radius:24px;padding:14px;text-align:left;display:flex;flex-direction:column;box-shadow:0 6px 20px rgba(0,0,0,.15);overflow:hidden;position:relative}
.wnote{background:var(--card);color:var(--label)}
.wnote .h{color:#e6a700;font-weight:700;font-size:13px;display:flex;gap:4px;align-items:center}
.wnote .h .f7-icons{font-size:14px}
.wnote b{margin-top:6px;font-size:15px}
.wnote span{font-size:13px;color:var(--label2);line-height:17px;margin-top:2px;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.wmus{background:linear-gradient(160deg,#5a2a3e,#1c1c1e);color:#fff}
.wmus .cv{width:64px;height:64px;border-radius:10px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.wmus .cv img{width:100%;height:32px;object-fit:cover}
.wmus b{margin-top:auto;font-size:13px;line-height:16px}
.wmus small{opacity:.7;font-size:12px}
.wmus .pl{position:absolute;right:14px;top:14px;width:30px;height:30px;border-radius:50%;background:#ff375f;display:grid;place-items:center}
.wmus .pl .f7-icons{font-size:14px}
.home .searchf.lib{background:rgba(255,255,255,.25);color:#fff;margin:0 0 18px;cursor:pointer}
.alib{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.afold{display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font-size:12px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.afold .box{width:100%;aspect-ratio:1;border-radius:28px;padding:13px;display:grid;grid-template-columns:1fr 1fr;gap:11px;background:rgba(255,255,255,.2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.afold .box .app{width:100%}
.afold .box .app .ico{width:100%;height:auto;aspect-ratio:1;border-radius:14px}
.afold .box .app span,.afold .badge{display:none}

/* App Switcher */
.page.switcher{background:transparent}
.page.switcher::before{content:"";position:absolute;inset:0;backdrop-filter:blur(24px) brightness(.7);-webkit-backdrop-filter:blur(24px) brightness(.7)}
.swrow{position:relative;display:flex;align-items:center;height:100%;padding:0 84px;gap:16px;scroll-snap-type:x mandatory}
.swcard{flex:0 0 234px;scroll-snap-align:center;position:relative;cursor:pointer}
.swlabel{display:flex;align-items:center;gap:8px;color:#fff;font-size:15px;font-weight:600;margin:0 0 10px 6px}
.swlabel .ico{width:30px;height:30px;border-radius:7px;box-shadow:none}
.swshot{width:234px;height:509px;border-radius:38px;overflow:hidden;position:relative;box-shadow:0 12px 34px rgba(0,0,0,.45);background:var(--bg)}
.swinner{position:absolute;top:0;left:0;width:402px;height:874px;transform:scale(.582);transform-origin:0 0;pointer-events:none}
.swempty{color:#fff;width:100%;text-align:center;opacity:.75}

/* Spotlight */
.spot{position:absolute;inset:0;padding:calc(var(--st) + 4px) 12px 0;display:flex;flex-direction:column;backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);background:rgba(0,0,0,.3);animation:fadeIn .25s}
.spot .sbar{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.spot .sbar .url{flex:1;height:48px;border-radius:24px;display:flex;align-items:center;gap:8px;padding:0 16px;color:var(--label2)}
.spot .sbar input{flex:1;border:0;background:none;font:inherit;font-size:17px;letter-spacing:-.43px;outline:none;color:var(--label);min-width:0;position:relative;z-index:1}
.spot .sres{flex:1;overflow:auto;padding-bottom:30px;scrollbar-width:none}
.spot .sh{font-size:20px;font-weight:700;color:#fff;padding:14px 8px 8px;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.spot .sgrp{background:color-mix(in srgb,var(--card) 82%,transparent);border-radius:22px;overflow:hidden}
.spot .sgrp .row{font-size:16px;color:var(--label)}
.spot .apps{display:grid;grid-template-columns:repeat(4,1fr);padding:14px 4px;justify-items:center}
.spot .apps .app{color:var(--label);text-shadow:none}

/* ---------- perbaikan audit visual ---------- */
.ltab.txt .bar button{font-size:15px;font-weight:600;letter-spacing:-.23px}
.wa-lt{--tint:var(--label)}
.wa-lt .bar button svg{width:23px;height:23px}
.wa-lt .bar button.on .f7-icons,.wa-lt .bar button.on svg{color:var(--label)}
.ighead .ic .f7-icons{font-size:26px}
.ighead .logo{position:absolute;left:50%;transform:translateX(-50%)}
.ighead{position:relative}
.favrow{display:flex;gap:18px;padding:4px 16px 16px;border-bottom:.5px solid var(--sep);margin-bottom:4px}
.favrow button{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;color:var(--label)}
.home.lib .hfoot{opacity:0;pointer-events:none}
.hfoot{transition:opacity .3s}
.hpage.libp{overflow-y:auto;padding-bottom:140px;scrollbar-width:none}
.hpage.libp::-webkit-scrollbar{display:none}

/* ============================================================
   Reels & TikTok — dirombak sesuai riset UI 2025–2026
   ============================================================ */
.ig.reels{background:#000;color:#fff;padding-top:0}
.ig.reels .ig-tabs{background:#000;border-color:#262626;color:#fff}
.ig.reels .ig-tabs .on img{box-shadow:0 0 0 2px #fff}
.ig.reels .ig-tabs svg [stroke="var(--bg)"]{stroke:#000}
.ig.reels .ig-tabs svg [fill="var(--bg)"]{fill:#000}
.reelstop{position:absolute;top:var(--st);left:0;right:0;z-index:4;display:flex;align-items:center;gap:16px;padding:6px 16px;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.reelstop b{font-size:22px;font-weight:700;letter-spacing:-.3px;display:flex;align-items:center;gap:2px}
.reelstop b .f7-icons{font-size:15px;font-weight:700}
.reelstop span{font-size:17px;font-weight:600;color:rgba(255,255,255,.6)}
.reelstop button{margin-left:auto;color:#fff}
.reelstop .f7-icons{font-size:26px}
.vs .shade{height:38%;background:linear-gradient(transparent,rgba(0,0,0,.5))}
.vs.ig::before{content:"";position:absolute;inset:0 0 auto;height:130px;background:linear-gradient(rgba(0,0,0,.35),transparent);z-index:1;pointer-events:none}
.vs .rail{bottom:14px;right:6px;gap:18px;font-size:12.5px;font-weight:600}
.vs.ig .rail{gap:20px;right:8px}
.vs.ig .rail button{gap:4px}
.vs.ig .rail svg{width:28px;height:28px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.vs.ig .rail .liked svg{color:#ff3040}
.vs.ig .rail .f7-icons{font-size:24px}
.vs .rail .pop svg,.vs .rail .pop .f7-icons{animation:likepop .45s var(--spring-bouncy)}
@keyframes likepop{0%{transform:scale(1)}35%{transform:scale(1.3)}100%{transform:scale(1)}}
.vs .rail .aud{width:28px;height:28px;border-radius:7px;border:2px solid #fff;object-fit:cover;margin-top:2px}
.vs .meta{left:14px;right:64px;bottom:16px;font-size:14px;line-height:18px}
.vs .meta .who{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.vs .meta .who img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.vs .meta .who b{font-size:14px}
.vs .meta .who .vb,.vs .meta .who svg{margin-left:-4px}
.vs .meta .fol{border:1px solid rgba(255,255,255,.75);border-radius:8px;padding:3px 10px;font-size:13px;font-weight:600;color:#fff;margin-left:2px}
.vs .meta .cap{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.vs .meta .cap.open{-webkit-line-clamp:6}
.vs .meta .snd{gap:5px;margin-top:8px;font-size:13px;max-width:70%}
.vs .meta .snd .f7-icons{font-size:12px;flex:none}
.mq{overflow:hidden;white-space:nowrap;flex:1;min-width:0;-webkit-mask:linear-gradient(90deg,#000 85%,transparent)}
.mq>span{display:inline-block;animation:mq 9s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.vs .prog{bottom:0;height:2px;background:rgba(255,255,255,.18);z-index:3}
.vflash{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px;border-radius:50%;background:rgba(0,0,0,.5);display:grid;place-items:center;color:#fff;z-index:4;pointer-events:none;animation:vflash .9s forwards}
.vflash .f7-icons{font-size:28px}
@keyframes vflash{0%{transform:scale(.6);opacity:0}15%{transform:scale(1);opacity:1}70%{opacity:1}100%{opacity:0}}
.vs .paused{animation:fadeIn .15s}
.vs .paused .f7-icons{font-size:64px;color:rgba(255,255,255,.55)}
/* TikTok */
.tt .top{gap:18px;font-size:16px;padding-top:6px}
.tt .top .live{left:16px;font-size:12px;font-weight:800;letter-spacing:.3px;border:1.5px solid rgba(255,255,255,.85);color:#fff;border-radius:5px;padding:1px 4px}
.vs.tt .rail{gap:16px}
.vs.tt .rail .f7-icons{font-size:33px}
.vs.tt .rail .liked .f7-icons{color:#fe2c55}
.vs.tt .meta{right:80px}
.vs.tt .meta b{font-size:16px;display:block;margin-bottom:4px}
.vs.tt .meta .cap{-webkit-line-clamp:2}
.vs .discw{position:relative}
.vs .disc{overflow:hidden;width:46px;height:46px;background:radial-gradient(#3a3a3a 30%,#111 31%,#222 60%,#111 61%)}
.vs .disc img{width:26px;height:26px;object-fit:cover}
.vs .discw>i{position:absolute;left:0;bottom:14px;font-size:13px;color:#fff;opacity:0;animation:note 3s linear infinite}
.vs .discw>i:last-child{animation-delay:1.5s}
.vs.tt .rail .discw>i .f7-icons{font-size:12px}
@keyframes note{0%{transform:translate(0,0) rotate(0);opacity:0}15%{opacity:1}100%{transform:translate(-24px,-46px) rotate(-30deg) scale(1.3);opacity:0}}
.vs .disc{animation:spin 5s linear infinite}
.vs .discw>i{animation-name:note}
/* iOS 26 scroll edge effect: konten memudar lembut di bawah bar, bukan terpotong tajam */
.page[data-dark] .scroll:not(.msgs){-webkit-mask-image:linear-gradient(transparent,#000 16px);mask-image:linear-gradient(transparent,#000 16px)}

/* ---------- Instagram 2025: feed, profil, DM ---------- */
.ig .ring{display:inline-block;flex:none;border-radius:50%;padding:2px;background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf)}
.ig .ring.seen{background:none;padding:0}
.ig .ring img{display:block;border-radius:50%;border:2px solid var(--bg);object-fit:cover}
.post .ph{padding:8px 12px;gap:9px}
.post .ph .ring img{width:30px;height:30px}
.post .ph .pu{display:flex;align-items:center}
.post .car{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.post .car::-webkit-scrollbar{display:none}
.post .car .pm{flex:0 0 100%;scroll-snap-align:start}
.post .cnt{position:absolute;top:12px;right:12px;background:rgba(18,18,18,.7);color:#fff;font-size:12px;font-weight:600;border-radius:12px;padding:3px 8px}
.post .dots{display:flex;justify-content:center;gap:4px;margin:8px 0 -4px;pointer-events:none}
.post .dots i{width:6px;height:6px;border-radius:50%;background:var(--gray4);transition:background .2s}
.post .dots i.on{background:#0095f6}
.post .pa{gap:14px;padding:10px 12px 6px}
.post .pa button{display:flex;align-items:center;gap:5px;font-size:13.5px;font-weight:600;color:var(--label)}
.post .pa svg{width:24px;height:24px}
.post .pa .liked{color:var(--label)}
.post .pa .liked svg{color:#ff3040}
.post .pa .f7-icons{font-size:24px}
.post .pa .pop svg{animation:likepop .45s var(--spring-bouncy)}
.post .pt .cap{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}
.post .pt .cap.open{-webkit-line-clamp:20}
.post .pt small{display:block;margin:2px 0;font-size:14px}
.post .pt small.when{font-size:12px;margin-top:6px}
.prof .top{gap:20px;align-items:center}
.prof .top .ring img{width:84px;height:84px;border-width:3px}
.prof .rt{flex:1;min-width:0}
.prof .pn{font-size:15px;display:block;margin-bottom:6px}
.prof .st{justify-content:space-between;text-align:left;font-size:13px}
.prof .st b{font-size:16px}
.prof .bio{margin-top:12px}
.prof .mut{display:flex;align-items:center;gap:6px;font-size:13px;margin-top:10px;color:var(--label)}
.prof .pb button.sq{flex:0 0 34px}
.prof .pb .sq .f7-icons{color:var(--label)}
.prof .pb .fol .f7-icons{color:var(--label);font-size:12px}
.prof .hl{display:flex;gap:16px;margin-top:16px;overflow-x:auto}
.prof .hl button{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--label);flex:none}
.prof .hl span{width:64px;height:64px;border-radius:50%;border:1px solid var(--sep);padding:3px;display:grid;place-items:center}
.prof .hl img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.prof .hl .new .f7-icons{font-size:26px}
.ptabs{display:flex;border-bottom:.5px solid var(--sep);margin-top:4px}
.ptabs button{flex:1;display:grid;place-items:center;padding:10px 0;color:var(--label2);position:relative}
.ptabs button.on{color:var(--label)}
.ptabs button.on::after{content:"";position:absolute;left:25%;right:25%;bottom:0;height:1px;background:var(--label)}
.ptabs svg{width:24px;height:24px}
.ig-grid .gv{position:absolute;top:6px;right:6px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.ig-grid .gv svg{width:18px;height:18px}
.ig-grid .gv svg [stroke="var(--bg)"]{stroke:#000}.ig-grid .gv svg [fill="var(--bg)"]{fill:#000}
.ig-tabs button{position:relative}
.ig-tabs .bd{position:absolute;top:-4px;right:-8px;background:#ff3040;color:#fff;font-size:11px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;border:2px solid var(--bg)}
.igcomp{flex:none;display:flex;align-items:center;gap:14px;margin:6px 12px 34px;padding:5px 14px 5px 5px;border-radius:24px;background:var(--fill)}
.igcomp .cam{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#a033ff,#3d8bff);color:#fff;display:grid;place-items:center}
.igcomp .cam .f7-icons{font-size:18px}
.igcomp .in{flex:1;color:var(--label2);font-size:15px}
.igcomp>.f7-icons{font-size:22px;color:var(--label)}
.prof .hl span{flex:none;box-sizing:border-box}
/* X 2025–26 */
.tw .ta{padding-right:0}
.tw .ta .r{display:flex;gap:14px}
.x-tabs{padding:10px 0 30px}
.x-tabs svg{display:block}
.xfab{bottom:96px;transition:transform .45s var(--spring-bouncy)}
.xfab:active{transform:scale(.9)}
.tw .ta .pop .f7-icons{animation:likepop .45s var(--spring-bouncy)}

/* ---------- WhatsApp Liquid Glass penuh (iOS 26.35.72): header & kolom tulis melayang di atas wallpaper ---------- */
.wa-hr{display:flex;align-items:center;gap:4px;padding:4px;border-radius:22px;height:44px}
.wa-hr button{width:36px;height:36px;display:grid;place-items:center;color:var(--label);position:relative;z-index:1}
.wa-hr .wplus{border-radius:50%;background:var(--wa);color:#fff}
.page.thread{padding-top:0}
.thread .head{position:relative;z-index:4;margin-bottom:calc(-1 * (var(--st) + 54px));height:calc(var(--st) + 54px);padding:var(--st) 12px 6px;background:linear-gradient(var(--wabg) 50%,color-mix(in srgb,var(--wabg) 0%,transparent));backdrop-filter:none;border:0;gap:8px}
.thread .head .back{height:44px;min-width:44px;border-radius:22px;padding:0 10px 0 6px;color:var(--label);gap:0;font-size:16px;font-weight:600}
.thread .head .back span{background:var(--fill);border-radius:10px;padding:0 6px;font-size:13px;line-height:20px;margin-left:2px}
.thread .head .back .f7-icons{font-size:24px}
.thread .head .hn{display:flex;align-items:center;gap:8px;height:44px;border-radius:22px;padding:0 14px 0 6px;flex:1;min-width:0;font-size:15px}
.thread .head .hn>div{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.thread .head .hn .av{width:32px;height:32px}
.thread .head .hi{height:44px;border-radius:22px;padding:0 14px;gap:20px;color:var(--label);align-items:center}
.thread .head .hi .f7-icons{font-size:22px}
.thread .head>*>*{position:relative;z-index:1}
.thread .msgs{padding-top:calc(var(--st) + 62px);padding-bottom:70px}
.thread .compose{position:relative;z-index:4;margin-top:-62px;background:linear-gradient(color-mix(in srgb,var(--wabg) 0%,transparent),var(--wabg) 70%);border:0;padding:8px 10px 30px;gap:8px}
.thread .compose .ib{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--label);flex:none}
.thread .compose .ib .f7-icons{font-size:22px;position:relative;z-index:1}
.thread .compose .field{min-height:40px;border-radius:20px;border:0;padding:9px 38px 9px 14px;background:var(--glass)}
.thread .compose .field .stk{top:9px;color:var(--label)}
.thread .compose .send{width:40px;height:40px}
#cright{gap:8px!important}
.wa .b{border-radius:14px}
.tw .tn .f7-icons.vf{color:var(--xblue);margin-left:auto;margin:0 2px 0 -2px}

/* ikon app: squircle iOS (superelips n=5, sudut melengkung kontinu) — masker berlaku di semua ukuran */
:root{--sq:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 50L99.96 66.8L99.83 72.14L99.61 76.01L99.31 79.12L98.92 81.75L98.44 84.05L97.87 86.08L97.2 87.89L96.44 89.52L95.58 91L94.61 92.33L93.53 93.53L92.33 94.61L91 95.58L89.52 96.44L87.89 97.2L86.08 97.87L84.05 98.44L81.75 98.92L79.12 99.31L76.01 99.61L72.14 99.83L66.8 99.96L50 100L33.2 99.96L27.86 99.83L23.99 99.61L20.88 99.31L18.25 98.92L15.95 98.44L13.92 97.87L12.11 97.2L10.48 96.44L9 95.58L7.67 94.61L6.47 93.53L5.39 92.33L4.42 91L3.56 89.52L2.8 87.89L2.13 86.08L1.56 84.05L1.08 81.75L0.69 79.12L0.39 76.01L0.17 72.14L0.04 66.8L0 50L0.04 33.2L0.17 27.86L0.39 23.99L0.69 20.88L1.08 18.25L1.56 15.95L2.13 13.92L2.8 12.11L3.56 10.48L4.42 9L5.39 7.67L6.47 6.47L7.67 5.39L9 4.42L10.48 3.56L12.11 2.8L13.92 2.13L15.95 1.56L18.25 1.08L20.88 0.69L23.99 0.39L27.86 0.17L33.2 0.04L50 0L66.8 0.04L72.14 0.17L76.01 0.39L79.12 0.69L81.75 1.08L84.05 1.56L86.08 2.13L87.89 2.8L89.52 3.56L91 4.42L92.33 5.39L93.53 6.47L94.61 7.67L95.58 9L96.44 10.48L97.2 12.11L97.87 13.92L98.44 15.95L98.92 18.25L99.31 20.88L99.61 23.99L99.83 27.86L99.96 33.2Z'/%3E%3C/svg%3E");
  --sq-rim:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 50L99.96 66.8L99.83 72.14L99.61 76.01L99.31 79.12L98.92 81.75L98.44 84.05L97.87 86.08L97.2 87.89L96.44 89.52L95.58 91L94.61 92.33L93.53 93.53L92.33 94.61L91 95.58L89.52 96.44L87.89 97.2L86.08 97.87L84.05 98.44L81.75 98.92L79.12 99.31L76.01 99.61L72.14 99.83L66.8 99.96L50 100L33.2 99.96L27.86 99.83L23.99 99.61L20.88 99.31L18.25 98.92L15.95 98.44L13.92 97.87L12.11 97.2L10.48 96.44L9 95.58L7.67 94.61L6.47 93.53L5.39 92.33L4.42 91L3.56 89.52L2.8 87.89L2.13 86.08L1.56 84.05L1.08 81.75L0.69 79.12L0.39 76.01L0.17 72.14L0.04 66.8L0 50L0.04 33.2L0.17 27.86L0.39 23.99L0.69 20.88L1.08 18.25L1.56 15.95L2.13 13.92L2.8 12.11L3.56 10.48L4.42 9L5.39 7.67L6.47 6.47L7.67 5.39L9 4.42L10.48 3.56L12.11 2.8L13.92 2.13L15.95 1.56L18.25 1.08L20.88 0.69L23.99 0.39L27.86 0.17L33.2 0.04L50 0L66.8 0.04L72.14 0.17L76.01 0.39L79.12 0.69L81.75 1.08L84.05 1.56L86.08 2.13L87.89 2.8L89.52 3.56L91 4.42L92.33 5.39L93.53 6.47L94.61 7.67L95.58 9L96.44 10.48L97.2 12.11L97.87 13.92L98.44 15.95L98.92 18.25L99.31 20.88L99.61 23.99L99.83 27.86L99.96 33.2Z' fill='none' stroke='white' stroke-opacity='.45' stroke-width='2.2'/%3E%3C/svg%3E")}
.ico,.afold .box .app .ico,.swlabel .ico{border-radius:0!important;box-shadow:none!important;-webkit-mask:var(--sq) center/100% 100% no-repeat;mask:var(--sq) center/100% 100% no-repeat}
.ico::after{border-radius:0;box-shadow:none;background:var(--sq-rim) center/100% 100% no-repeat,linear-gradient(160deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.08) 34%,rgba(255,255,255,0) 50%,rgba(0,0,0,.06) 100%)}
/* ikon asli PNG: mengisi penuh; kilau tambahan dimatikan karena gambar aslinya sudah punya tepi kaca */
.ico img,.launchico img,.notif .ni .mini img{width:100%;height:100%;display:block;object-fit:cover;-webkit-user-drag:none}
.ico:has(img)::after{display:none}
.ico{background:#fff}

/* iOS tidak pernah menampilkan scrollbar permanen */
.screen *{scrollbar-width:none}
.screen *::-webkit-scrollbar{display:none}

/* ---------- Safari: halaman di dalam app, semua tab, bar mengecil ---------- */
.sf-fav button{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--label);text-align:center;line-height:13px}
.sf-fav button i{width:62px;height:62px;border-radius:14px;background:var(--card);display:grid;place-items:center;font-style:normal;font-size:26px;font-weight:700;color:var(--gray);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.safari .group button.row{width:100%;text-align:left}
.safari.web{background:#fff}
.sf-frame{flex:1;width:100%;border:0;background:#fff;margin-bottom:0}
.sf-err{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 36px 120px;text-align:center;color:var(--label);background:var(--bg2)}
.sf-err>.f7-icons{font-size:44px;color:var(--label2)}
.sf-err b{font-size:20px}
.sf-err span{font-size:15px;color:var(--label2);line-height:20px}
.sf-err button{color:var(--blue);font-size:17px;margin-top:6px}
.sf-bar{transition:transform .5s var(--spring),left .5s var(--spring),right .5s var(--spring)}
.sf-bar .gbtn{transition:opacity .25s,transform .5s var(--spring)}
.sf-bar .url{transition:height .5s var(--spring)}
.sf-bar .url .aa{font-size:15px;font-weight:600;color:var(--label)}
.sf-bar .url button{color:var(--label);display:grid;place-items:center}
.sf-bar .url button .f7-icons{color:var(--label);font-size:17px}
.sf-bar .url>*{position:relative;z-index:1}
.sf-bar input{text-align:left}
.safari.web .sf-bar input{text-align:center}
.sf-bar.mini{left:110px;right:110px;transform:translateY(10px)}
.sf-bar.mini .gbtn{opacity:0;transform:scale(.4);pointer-events:none;width:0;margin:0 -4px}
.sf-bar.mini .url{height:30px;padding:0 12px}
.sf-bar.mini .url .f7-icons,.sf-bar.mini .url button{display:none}
.sf-bar.mini input{font-size:13px;text-align:center}
.safari.over{background:var(--bg2)}
.sf-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;padding:14px 16px 120px}
.sf-card{border-radius:20px;overflow:hidden;background:var(--card);box-shadow:0 6px 20px rgba(0,0,0,.12);animation:fadeIn .3s;cursor:pointer}
.sf-card.on{box-shadow:0 0 0 3px var(--blue),0 6px 20px rgba(0,0,0,.12)}
.sf-ct{display:flex;align-items:center;gap:6px;padding:8px 8px 8px 10px;font-size:12px;font-weight:600;color:var(--label)}
.sf-ct i{width:18px;height:18px;border-radius:5px;background:var(--fill);font-style:normal;font-size:11px;display:grid;place-items:center;flex:none}
.sf-ct span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sf-ct button{width:22px;height:22px;border-radius:50%;background:var(--fill);display:grid;place-items:center;color:var(--label2)}
.sf-ct button .f7-icons{font-size:11px;font-weight:700}
.sf-shot{aspect-ratio:3/4;background:var(--bg2);display:grid;place-items:center;color:var(--label2);font-size:15px}
.sf-mini{display:grid;grid-template-columns:repeat(2,28px);gap:10px}
.sf-mini i{width:28px;height:28px;border-radius:7px;background:var(--fill)}
.sf-obar{position:absolute;left:16px;right:16px;bottom:30px;display:flex;align-items:center;justify-content:space-between;z-index:5}
.sf-obar b{font-size:15px;color:var(--label)}

/* ---------- X: detail post & Grok ---------- */
.x .tw{cursor:pointer}
.xpd{padding:12px 16px 0;border-bottom:.5px solid var(--x-sep)}
.xpa{display:flex;align-items:center;gap:10px}
.xpa .tav{width:40px;height:40px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#ffb3c6,#c084fc)}
.xpa>div{flex:1;min-width:0;line-height:19px}
.xpa b{font-size:15px}
.xpa span{display:block;color:var(--x-sub);font-size:15px}
.xpa .vf{color:var(--xblue);font-size:16px;margin-left:2px}
.xpa .fol{background:var(--label);color:var(--bg);border-radius:16px;padding:6px 14px;font-weight:700;font-size:14px}
.xpa .fol:empty{display:none}
.xpa>.f7-icons{color:var(--x-sub);font-size:18px}
.xpt{font-size:17px;line-height:23px;margin:12px 0;color:var(--x-text);white-space:pre-line}
.xpd .tm{border-radius:16px;overflow:hidden;border:.5px solid var(--x-sep)}
.xpd .tm img{width:100%;display:block}
.xpm{color:var(--x-sub);font-size:15px;padding:14px 0;border-bottom:.5px solid var(--x-sep)}
.xpm b{color:var(--x-text)}
.xpact{padding:10px 4px 12px!important;margin:0!important;font-size:14px!important}
.xpact .f7-icons{font-size:20px!important}
.xreply{flex:none;display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:.5px solid var(--x-sep);background:var(--bg);color:var(--x-sub);font-size:15px}
.xreply img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.x-tabs button.on{color:var(--x-text)}
.grok{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0 20px 40px;text-align:center}
.gk-logo svg{width:52px;height:52px}
.gk-sug{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:6px}
.gk-sug button{border:.5px solid var(--x-sep);border-radius:16px;padding:12px 14px;text-align:left;font-size:15px;color:var(--x-text)}
.gk-in{flex:none;display:flex;align-items:center;justify-content:space-between;margin:8px 14px 10px;padding:12px 16px;border-radius:24px;background:var(--fill);color:var(--x-sub);font-size:16px}
.gk-in .f7-icons{color:var(--x-text);font-size:20px}
.xpact{display:flex;justify-content:space-between;color:var(--x-sub)}.xpact button{display:flex;align-items:center;gap:5px}.xpact .liked{color:#f91880}

/* ---------- IG: inbox DM & story banyak akun ---------- */
.story .ring .la,.storyv .who .la{display:grid;place-items:center;font-weight:700;color:#fff;background:linear-gradient(135deg,#c7c7cc,#8e8e93)}
.story .ring .la{width:100%;height:100%;border-radius:50%;border:2.5px solid var(--bg);font-size:24px}
.storyv .who .la{width:32px;height:32px;border-radius:50%;font-size:15px;flex:none}
button.story{background:none}
.ig-notes{display:flex;gap:18px;padding:16px 16px 6px;overflow-x:auto}
.ig-notes>div{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:30px;flex:none;width:84px}
.ig-notes img{width:74px;height:74px;border-radius:50%;object-fit:cover}
.ig-notes small{font-size:12px;color:var(--label2);max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-notes .nb{position:absolute;top:0;left:50%;transform:translateX(-50%);background:var(--card);color:var(--label);font-size:12px;line-height:15px;padding:7px 10px;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.12);white-space:nowrap;z-index:1}
.ig-notes>div:first-child .nb{color:var(--label2)}
.ig-ih{display:flex;justify-content:space-between;padding:10px 16px 6px;font-size:16px}
.ig-ih span{color:var(--label2);font-size:15px}
.ig-dm{width:100%;text-align:left;gap:12px;padding:8px 16px}
.ig-dm>img,.ig-dm>.av{width:56px!important;height:56px!important;border-radius:50%;object-fit:cover;flex:none}
.ig-dm .grow>div{font-size:15px}
.ig-dm small{display:block;font-size:14px;color:var(--label2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-dm.un .grow>div,.ig-dm.un small{font-weight:700;color:var(--label)}
.ig-dm .dot{width:9px;height:9px;border-radius:50%;background:#0095f6;flex:none}
.ig-dm>.f7-icons{font-size:24px}

/* ---------- WhatsApp: Pembaruan, Panggilan, Komunitas, Pengaturan ---------- */
.wa-sh{display:flex;justify-content:space-between;align-items:baseline;padding:14px 16px 8px}
.wa-sh b{font-size:20px;font-weight:700;letter-spacing:-.4px}
.wa-sh span{color:var(--wa);font-size:15px}
.wa-st{display:flex;gap:10px;padding:0 16px 8px;overflow-x:auto}
.wa-st button{position:relative;flex:none;width:96px;height:150px;border-radius:14px;overflow:hidden;background:var(--fill)}
.wa-st button>img{width:100%;height:100%;object-fit:cover;display:block}
.wa-st button::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,.6))}
.wa-st small{position:absolute;left:8px;right:8px;bottom:8px;z-index:1;color:#fff;font-size:12px;font-weight:600;text-align:left;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-st .sav{position:absolute;top:8px;left:8px;z-index:1;width:34px;height:34px;border-radius:50%;padding:2px;background:var(--wa);display:grid;place-items:center}
.wa-st .sav.seen{background:#aeaeb2}
.wa-st .sav img,.wa-st .sav .av{width:30px!important;height:30px!important;border-radius:50%;object-fit:cover;border:2px solid var(--bg)}
.wa-st .add{position:absolute;top:8px;left:8px;z-index:1;width:30px;height:30px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;border:2px solid var(--bg)}
.wa-st .add .f7-icons{font-size:16px;font-weight:700}
.wa-fol{background:color-mix(in srgb,var(--wa) 16%,transparent);color:var(--wa);font-weight:600;font-size:14px;border-radius:16px;padding:6px 14px}
.wa-empty{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:60px 32px}
.wa-empty b{font-size:20px;color:var(--label)}
.wa-empty span{color:var(--label2);font-size:15px;line-height:20px}
.wa-empty button{margin-top:10px;background:var(--wa);color:#fff;font-weight:600;border-radius:22px;padding:12px 22px}
.wa .row .sicon .f7-icons{color:#fff}

/* gelembung pilihan tab bar */
.ltab .bar button{position:relative;z-index:1}
.ltab .bar button.on{background:none}
.selb{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:27px;background:var(--hl);z-index:0;pointer-events:none;transition:left .5s var(--spring-bouncy),width .5s var(--spring-bouncy),transform .35s var(--spring-bouncy),background .25s,box-shadow .25s}
.selb.drag{z-index:2;transition:width .5s var(--spring-bouncy),transform .35s var(--spring-bouncy),background .25s;transform:scale(1.22,1.3);background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 .75px rgba(255,255,255,.7),inset 0 1px 2px rgba(255,255,255,.6),0 6px 18px rgba(0,0,0,.18)}
.ltab.mini .selb{opacity:0}

/* ---------- jam layar kunci Liquid Glass (iOS 26) ----------
   angka menerangi wallpaper di belakangnya + rim terang + kilau specular kiri atas */
.lock .ltime{position:relative;font-family:ui-rounded,"SF Pro Rounded",-apple-system,"SF Pro Display",Inter,sans-serif;font-size:118px;font-weight:700;letter-spacing:-2px;transform:scaleY(1.12);transform-origin:top;margin-top:4px;
  background:none;color:rgba(255,255,255,.4);mix-blend-mode:plus-lighter;filter:none;text-shadow:0 1.5px 0 rgba(255,255,255,.22),0 -1px 0 rgba(255,255,255,.12)}
.lock .ltime::after{content:attr(data-t);position:absolute;inset:0;color:transparent;-webkit-text-stroke:0;background:linear-gradient(150deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.25) 28%,rgba(255,255,255,0) 45%,rgba(255,255,255,0) 70%,rgba(255,255,255,.35) 100%);-webkit-background-clip:text;background-clip:text;mix-blend-mode:normal}

/* ---------- Musik: mini player ikut turun ke samping tab bar yang mengecil ---------- */
.np{transition:left .5s var(--spring),right .5s var(--spring),bottom .5s var(--spring),height .5s var(--spring),transform .3s;touch-action:pan-y}
.np>img{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none;position:relative;z-index:1}
.np .npt{flex:1;min-width:0;position:relative;z-index:1}
.np .npt b,.np .npt div{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np button{position:relative;z-index:1;color:var(--label);display:grid;place-items:center;width:32px}
.np button .f7-icons{font-size:22px}
.page:has(.ltab.mini) .np{left:90px;right:90px;bottom:22px;height:62px;border-radius:31px}
.page:has(.ltab.mini) .np .t-foot{display:none}
.row.rt{gap:12px;padding:10px 4px}.row.rt .go{background:#34c759;color:#fff;font-weight:600;border-radius:16px;padding:7px 16px;font-size:15px}.row.rt:not(.on) .go{background:var(--fill);color:var(--blue)}.place .acts button{display:flex;flex-direction:column;align-items:center;gap:2px}

/* Safari: kotak alamat boleh menyusut (lebar bawaan input sempat mendorong tombol ⋯ keluar layar) */
.sf-bar .url{min-width:0}
.sf-bar input{width:0;min-width:0}
/* area status bar mengikuti tema, bukan putih polos */
.safari.web{background:var(--bg)}
.sf-frame{background:var(--bg)}

/* notifikasi layar kunci masuk berurutan */
.lock .notifs .notif:nth-child(2){animation-delay:.06s}.lock .notifs .notif:nth-child(3){animation-delay:.12s}
.viewer{transform-origin:0 0;overflow:hidden}

/* judul kecil di bar atas saat judul besar sudah tergulir */
.nav .navt{position:absolute;left:50%;top:50%;transform:translate(-50%,-30%);font-size:17px;font-weight:600;letter-spacing:-.43px;opacity:0;transition:opacity .2s,transform .3s var(--spring);pointer-events:none;white-space:nowrap;color:var(--label)}
.page.scrolled .nav .navt{opacity:1;transform:translate(-50%,-50%)}
/* scroll edge effect iOS 26/27: latar memudar + buram di bawah bar atas (juga menutup area status bar) */
.page > .nav::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--st));bottom:-22px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .25s;background:linear-gradient(var(--bg) 62%,color-mix(in srgb,var(--bg) 0%,transparent));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.page.scrolled > .nav::before{opacity:1}
.page > .scroll > h1.big{padding-top:0}
/* Face ID di Dynamic Island */
.island.fid{display:grid;place-items:center;justify-content:center;align-content:center;padding:0}
.island .fidg{display:grid;place-items:center}
.island .fidg svg{width:52px;height:52px}
/* kontrol video penampil foto */
.vct{display:flex;align-items:center;gap:2px;height:44px;padding:0 6px;border-radius:22px}
.vct button{width:40px;height:40px;display:grid;place-items:center;color:var(--label);position:relative;z-index:1}
.vct .f7-icons{font-size:20px}
.viewer .strip>div{position:relative}
.vprog{position:absolute;left:16px;right:16px;bottom:10px;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden;pointer-events:none}
.vprog b{display:block;height:100%;width:0;background:#fff}
.page:not(.scrolled) > .scroll:has(> h1.big){-webkit-mask-image:none;mask-image:none}
.viewer .thumbs{touch-action:none;cursor:grab}.viewer .thumbs img{cursor:pointer;transition:width .25s var(--spring),opacity .2s}

/* ---------- Safari Mode Pembaca ---------- */
.sf-reader{background:var(--bg);padding:6px 22px 140px;font-family:-apple-system,"SF Pro Text",Inter,sans-serif;color:var(--label)}
.sf-reader article{max-width:560px;margin:0 auto}
.sf-reader small{display:block;font-family:-apple-system,Inter,sans-serif;font-size:13px;color:var(--label2);margin:10px 0 6px}
.sf-reader h1{font-size:30px;line-height:35px;font-weight:700;margin:0 0 16px;letter-spacing:-.3px}
.sf-reader h2,.sf-reader h3,.sf-reader h4{font-size:21px;line-height:27px;margin:22px 0 8px}
.sf-reader p,.sf-reader li{font-size:18px;line-height:28px;margin:0 0 14px;overflow-wrap:anywhere}
.sf-reader ul{padding-left:22px;margin:0 0 14px}
.sf-reader a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.sf-reader img{display:block;max-width:100%;height:auto;border-radius:12px;margin:10px 0}
.sf-skel{display:flex;flex-direction:column;gap:12px;padding-top:16px}
.sf-skel i{display:block;height:16px;width:100%;border-radius:8px;background:linear-gradient(90deg,var(--fill) 25%,color-mix(in srgb,var(--fill) 40%,transparent) 50%,var(--fill) 75%);background-size:200% 100%;animation:skel 1.2s linear infinite}
@keyframes skel{to{background-position:-200% 0}}
.sf-bar .url.loading::after{content:"";position:absolute;left:18px;right:18px;bottom:2px;height:2.5px;border-radius:2px;background:linear-gradient(90deg,transparent,#0a84ff 40%,#0a84ff 60%,transparent);background-size:50% 100%;background-repeat:no-repeat;animation:sfload 1.1s ease-in-out infinite;z-index:2}
@keyframes sfload{from{background-position:-100% 0}to{background-position:200% 0}}

/* ============================================================
   APPLE MUSIC (iOS 26/27)
   ============================================================ */
#spotwrap{position:fixed;left:-10000px;top:0;width:300px;height:80px;overflow:hidden;opacity:0;pointer-events:none}
.music{--pink:#fa2d48}
.mme{width:34px;height:34px;border-radius:50%;object-fit:cover}
.msh{padding:18px 16px 8px}
.msh b{font-size:21px;font-weight:700;letter-spacing:-.4px;display:flex;align-items:center;gap:4px}
.msh b .f7-icons{font-size:16px;color:var(--label2)}
.mrow{display:flex;gap:12px;padding:0 16px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:16px}
.mrow>button{flex:none;scroll-snap-align:start;text-align:left}
.mmos{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;flex:none;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.mmos img{width:100%;height:100%;object-fit:cover;aspect-ratio:1}
.msq{width:150px;display:flex;flex-direction:column;gap:2px;color:var(--label)}
.msq .mmos,.msq .mart,.msq .mmix{width:150px!important;height:150px!important;border-radius:10px;margin-bottom:6px}
.msq .mart{object-fit:cover;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.msq span{font-size:14px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msq small{font-size:13px;color:var(--label2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mmix{display:flex;flex-direction:column;justify-content:flex-end;padding:12px;color:#fff;background:linear-gradient(160deg,hsl(var(--h) 80% 62%),hsl(calc(var(--h) + 40) 70% 36%))}
.mmix b{font-size:20px;line-height:22px}.mmix small{font-size:15px;opacity:.85}
.mpick{width:240px;height:330px;border-radius:14px;overflow:hidden;position:relative;color:#fff;display:flex;flex-direction:column;gap:10px;padding:12px;background:#2a2a2e}
.mpick::before{content:"";position:absolute;inset:-30px;background:var(--bg,none) center/cover;filter:blur(30px) saturate(1.6) brightness(.7);z-index:0}
.mpick>*{position:relative;z-index:1}
.mpick small{font-size:12px;font-weight:600;opacity:.8}
.mpick>img,.mpick .mmos{width:214px!important;height:214px!important;border-radius:10px;object-fit:cover}
.mpick span{font-size:17px;font-weight:700;line-height:21px}
.mpick em{font-style:normal;font-size:13px;opacity:.75;line-height:17px}
.mhero{width:330px;display:flex;flex-direction:column;gap:2px;color:var(--label)}
.mhero small{font-size:11px;font-weight:600;color:var(--label2);letter-spacing:.3px}
.mhero b{font-size:20px;font-weight:600}.mhero em{font-style:normal;color:var(--label2);font-size:17px;margin-bottom:8px}
.mhero img{width:330px;height:220px;object-fit:cover;border-radius:12px}
.mradio{width:300px;height:190px;border-radius:14px;padding:16px;display:flex;flex-direction:column;color:#fff;position:relative;background:radial-gradient(120% 120% at 100% 0,color-mix(in srgb,var(--c) 40%,#fff),var(--c) 50%,color-mix(in srgb,var(--c) 60%,#000))}
.mradio small{font-size:11px;font-weight:700;opacity:.85}.mradio b{font-size:28px;font-weight:800;margin-top:auto;letter-spacing:-.5px}.mradio em{font-style:normal;font-size:14px;opacity:.85}
.mradio span{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center}
.mlib{padding:4px 16px 0}
.mlib .row{width:100%;text-align:left;font-size:20px;color:var(--pink);gap:10px;--inset:40px}
.mlib .row .grow{color:var(--label);font-size:20px;letter-spacing:-.4px}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;padding:0 16px 20px}
.mgrid .msq{width:auto}
.mgrid .msq .mmos,.mgrid .msq .mart{width:100%!important;height:auto!important;aspect-ratio:1}
.mph{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 20px 14px;gap:2px}
.mph>b{font-size:21px;margin-top:14px;letter-spacing:-.3px}
.mph .by{color:var(--pink);font-size:20px}
.mph small{color:var(--label2);font-size:12px;margin-top:2px}
.mpb{display:flex;gap:12px;margin:14px 0 4px;width:100%}
.mpb button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--fill);color:var(--pink);font-weight:600;font-size:17px;border-radius:12px;padding:13px 0}
.mph p{color:var(--label2);font-size:14px;margin:8px 0 0}
.msong{width:100%;text-align:left;padding:7px 16px;gap:12px;--inset:72px}
.msong img{width:46px;height:46px;border-radius:6px;object-fit:cover}
.msong .grow div{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msong small{color:var(--label2);font-size:13px}
.msong.on .grow div{color:var(--pink)}
.eq{display:flex;gap:2px;align-items:flex-end;height:14px;margin-right:6px}
.eq i{width:3px;background:var(--pink);border-radius:1px;animation:eq .9s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{from{height:3px}to{height:14px}}
.mft{color:var(--label2);font-size:14px;padding:14px 16px 30px}
.np{cursor:pointer;overflow:hidden}
.np .npbar{position:absolute;left:58px;right:84px;bottom:6px;height:2px;border-radius:1px;background:color-mix(in srgb,var(--label) 15%,transparent);z-index:1}
.np .npbar b{display:block;height:100%;width:0;background:var(--label);border-radius:1px}
.page:has(.ltab.mini) .np .npbar{display:none}
/* layar Sedang Diputar */
.nowp{position:absolute;inset:0;overflow:hidden;color:#fff;display:flex;flex-direction:column;align-items:center;padding:calc(var(--st) + 10px) 28px 40px;border-radius:62px 62px 0 0;touch-action:none}
.nowp .nbg{position:absolute;inset:-40%;width:180%;height:180%;object-fit:cover;filter:blur(60px) saturate(1.8) brightness(.75);z-index:-2;animation:nbg 30s linear infinite alternate}
@keyframes nbg{to{transform:rotate(25deg) scale(1.1)}}
.nowp .nshade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.35));z-index:-1}
.nowp .grab{width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.45);margin-bottom:26px;cursor:pointer}
.nowp .nart{width:330px;height:330px;border-radius:12px;object-fit:cover;box-shadow:0 22px 50px rgba(0,0,0,.35);transition:transform .6s var(--spring-bouncy),box-shadow .6s}
.nowp.paused .nart{transform:scale(.8);box-shadow:0 10px 26px rgba(0,0,0,.25)}
.nti{display:flex;align-items:center;gap:10px;width:100%;margin-top:34px}
.nti>div{flex:1;min-width:0}
.nti b{display:block;font-size:21px;line-height:25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nti span{display:block;font-size:20px;line-height:25px;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nti .nb{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;color:#fff}
.nti .nb .f7-icons{font-size:16px}
.nsl{width:100%;padding:18px 0 6px;cursor:pointer}
.nsl i{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.22);overflow:hidden;transition:height .2s}
.nsl:active i{height:12px}
.nsl b{display:block;height:100%;width:0;background:rgba(255,255,255,.85)}
.ntm{display:flex;justify-content:space-between;width:100%;font-size:12px;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.ntm em{font-style:normal;font-size:11px;font-weight:600;border-radius:4px;padding:1px 6px;background:rgba(255,255,255,.14);color:rgba(255,255,255,.7)}
.nctl{display:flex;justify-content:space-around;align-items:center;width:100%;margin-top:22px}
.nctl button{color:#fff;display:grid;place-items:center;transition:transform .35s var(--spring-bouncy)}
.nctl button:active{transform:scale(.85)}
.nctl .f7-icons{font-size:38px}
.nctl .big .f7-icons{font-size:54px}
.nvol{display:flex;align-items:center;gap:12px;width:100%;margin-top:30px;color:rgba(255,255,255,.6)}
.nvol .f7-icons{font-size:15px}
.nvol .slider-h{flex:1;height:7px;border-radius:4px;background:rgba(255,255,255,.22);overflow:hidden}
.nvol .slider-h b{display:block;height:100%;background:rgba(255,255,255,.85)}
.nbot{display:flex;justify-content:space-around;width:100%;margin-top:auto;color:rgba(255,255,255,.75)}
.nbot button{color:inherit;display:grid;place-items:center}
.nbot .f7-icons{font-size:24px}

/* ---------- Foto iOS 27 ---------- */
.ph-grid .vd{right:5px;bottom:4px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.ph-grid .fv{position:absolute;left:5px;bottom:4px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.ph-grid .fv .f7-icons{font-size:13px}
#vwh{line-height:18px}
#vwh b{display:block;font-size:15px}
#vwh{font-size:13px;color:var(--label2)}
.viewer .vb{gap:10px}
.vcap{display:flex;align-items:center;gap:6px;height:48px;padding:0 10px;border-radius:24px}
.vcap button{width:44px;height:44px;display:grid;place-items:center;color:var(--label);position:relative;z-index:1}
.vcap .f7-icons{font-size:22px}
#vfav .f7-icons{transition:color .2s}
.vctlrow{display:flex;justify-content:center;padding:4px 0 2px}
.vctlrow:empty{display:none}

/* ikon gaya X */
.x .xi{display:block;flex:none}
.x-tabs .xi{width:26px;height:26px}
.tw .ta button,.xpact button{gap:4px}
.tw .ta .liked,.xpact .liked{color:#f91880}
.tw .ta .pop .xi,.xpact .pop .xi{animation:likepop .45s var(--spring-bouncy)}

/* iOS 27: kaca "Berwarna" lebih pekat (lebih mudah dibaca), "Jernih" bawaan */
.screen.lg-tint{--glass:rgba(250,250,252,.84)}
.screen.lg-tint.darkmode{--glass:rgba(36,36,40,.86)}
/* iOS 27: tepi kaca sedikit lebih gelap, kilau lebih terang */
.glass{box-shadow:0 8px 28px rgba(0,0,0,.12),inset 0 0 0 .5px var(--glass-edge),inset 0 1px 1.5px rgba(255,255,255,.85),inset 0 -1px 1px rgba(0,0,0,.08)}
.lgsel .seg2{display:flex;background:var(--fill);border-radius:9px;padding:2px}
.lgsel .seg2 button{padding:5px 10px;border-radius:7px;font-size:13px;font-weight:500;color:var(--label)}
.lgsel .seg2 button.on{background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.15);font-weight:600}

/* tab bar mengecil: tombol cari tetap di kanan, mini player di tengah */
.ltab.mini .solo{margin-left:auto}

/* profil X: banner sampai belakang status bar, tombol kembali kaca di atas banner */
.page.x:has(.xprof){padding-top:0}
.xprof .banner{height:calc(var(--st) + 92px)}
.xprof .xback{position:absolute;top:calc(var(--st) - 2px);left:12px;z-index:2}
.xprof .xback .gbtn{width:36px;height:36px}

/* ikon gaya TikTok */
.tti{display:block;width:26px;height:26px}
.tt-tabs .tti{width:26px;height:26px;margin-bottom:1px}
.vs.tt .rail .tti{width:36px;height:36px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.vs.tt .rail .liked .tti{color:#fe2c55}
.vs.tt .rail button{gap:2px}
.tt-tabs .plus{width:44px;height:29px;border-radius:8px}
.tt-tabs .plus .f7-icons{font-size:17px;font-weight:800}
.tt-tabs{--ttbg:#000}.tt.light .tt-tabs{--ttbg:var(--bg)}

/* IG halaman Postingan */
.igpt{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.igpt small{font-size:12px;color:var(--label2);font-weight:600}
.igpt b{font-size:16px}
/* TikTok feed dari profil */
.tt .top .pfback{position:absolute;left:10px;color:#fff}
.tt .top .pfback .f7-icons{font-size:28px}
/* penampil media X & WhatsApp */
.mview{background:#000!important;color:#fff;display:flex;flex-direction:column}
.mview .mtop{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--st) - 4px) 12px 8px;z-index:2;transition:opacity .2s}
.mview .vm{flex:1;display:grid;place-items:center;overflow:hidden;min-height:0}
.mview .vm img,.mview .vm video{max-width:100%;max-height:100%;object-fit:contain;display:block}
.mview .mbot{padding:8px 16px 34px;transition:opacity .2s}
.mview.chrome-off .mtop,.mview.chrome-off .mbot{opacity:0;pointer-events:none}
.mview .xmact{display:flex;justify-content:space-between;color:#e7e9ea;font-size:13px}
.mview .xmact button{display:flex;align-items:center;gap:4px;color:inherit}
.mview .xmact .liked{color:#f91880}
.mview.wa .mtop{background:rgba(20,20,22,.85);backdrop-filter:blur(20px)}
.mview .wab{width:40px;height:40px;display:grid;place-items:center;color:#fff}
.mview .wab .f7-icons{font-size:24px}
.mview .wat{display:flex;flex-direction:column;align-items:center;line-height:1.2}
.mview .wat small{color:rgba(255,255,255,.6);font-size:12px}
.mview .wabar{display:flex;justify-content:space-around;color:#fff}
.mview .wabar .f7-icons{font-size:24px}
.mview.wa .mbot{background:rgba(20,20,22,.85);backdrop-filter:blur(20px)}
.screen,#view,.page{overflow:clip}

/* ---------- interaksi sosial ---------- */
.post .pa button.on svg{color:#22c55e}
.vs.ig .rail .on svg{color:#22c55e}
.vs.tt .rail .saved .tti{color:#face15}
.post .ph .pmore{margin-left:auto;color:var(--label);display:grid;place-items:center}
.post .ph .pmore .f7-icons{font-size:20px;margin:0}
.vs .meta .fol.on{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.85)}
.scard button.f.on,.sgf.on{background:var(--fill)!important;color:var(--label)!important}
.sgf{background:#0095f6;color:#fff;border-radius:8px;padding:6px 14px;font-weight:600;font-size:14px}
.prof .pb .fol .f7-icons{margin-left:2px}
.asg .as{width:100%;gap:14px;padding:13px 18px;font-size:17px;color:var(--label);--inset:52px}
.asg .as .f7-icons{font-size:22px;width:24px;text-align:center}
.asg .as.red{color:#ff3b30}
.shg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 8px;padding:14px 12px}
.shg button{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--label)}
.shg img,.shg .av{width:62px!important;height:62px!important;border-radius:50%;object-fit:cover}
.shg button.sent span{color:var(--label2)}
.sha{display:flex;gap:14px;padding:12px 14px 6px;overflow-x:auto;border-top:.5px solid var(--sep)}
.sha button{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--label);width:64px;flex:none;text-align:center}
.sha span{width:52px;height:52px;border-radius:50%;background:var(--fill);display:grid;place-items:center}
.sha .f7-icons{font-size:22px}
.epf{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0 14px}
.epf img{width:84px;height:84px;border-radius:50%;object-fit:cover}
.epf button{color:#0095f6;font-weight:600;font-size:14px}
.epr{display:grid!important;grid-template-columns:110px 1fr;font-size:15px}
.epr span{color:var(--label2)}
.epr b{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epd{display:block;margin:14px auto 0;background:#0095f6;color:#fff;font-weight:600;border-radius:10px;padding:10px 40px}
.qrc{margin:6px auto 14px;width:240px;border-radius:24px;padding:22px;display:flex;flex-direction:column;align-items:center;gap:12px;background:linear-gradient(135deg,#f9ce34,#ee2a7b 50%,#6228d7)}
.qrc.tt{background:linear-gradient(135deg,#25f4ee,#000 45%,#fe2c55)}
.qrc .qr{display:grid;grid-template-columns:repeat(21,1fr);width:180px;height:180px;background:#fff;padding:8px;border-radius:12px;gap:0}
.qrc .qr i{background:#fff}.qrc .qr i.on{background:#111}
.qrc b{color:#fff;font-size:17px}
.ttx-top{display:flex;align-items:center;gap:8px;padding:calc(var(--st) + 4px) 12px 8px}
.ttx-top .searchf{flex:1;margin:0}
.ttx-top>button .f7-icons{font-size:26px;color:var(--label)}
.ttx-chips{display:flex;gap:8px;padding:0 12px 10px;overflow-x:auto;flex:none}
.ttx-chips button{flex:none;padding:6px 14px;border-radius:6px;background:var(--fill);font-size:14px;font-weight:600;color:var(--label)}
.ttx-chips button.on{background:var(--label);color:var(--bg)}
.ttx-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 6px 90px}
.ttx-grid button{display:flex;flex-direction:column;text-align:left;gap:4px;color:var(--label)}
.ttx-grid>button>img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px}
.ttx-grid b{font-size:13px;font-weight:500;line-height:17px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ttx-grid small{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--label2)}
.ttx-grid small img{width:18px;height:18px;border-radius:50%;object-fit:cover}
.ttx-grid small em{margin-left:auto;font-style:normal;display:flex;align-items:center;gap:2px}
.ttx-grid small .tti{width:13px;height:13px}

/* kolom ketik DM IG & balasan X */
.igcomp .field{flex:1;min-height:34px;padding:7px 4px;font-size:15px;color:var(--label);cursor:text;background:none;border:0}
.igcomp .field.ph{color:var(--label2)}
.igcomp .field .caret{display:inline-block;width:2px;height:18px;background:#0095f6;vertical-align:text-bottom;animation:blink 1s steps(1) infinite;margin-left:1px}
.igcomp .igr{display:flex;align-items:center;gap:14px}
.igcomp .igr .f7-icons{font-size:22px;color:var(--label)}
.igsend{color:#0095f6;font-weight:600;font-size:16px}
.page.ig:has(#kbd.show) .igcomp{margin-bottom:6px}
.xreply{gap:10px}
.xreply .field{flex:1;font-size:15px;color:var(--x-text);cursor:text;min-height:22px}
.xreply .field.ph{color:var(--x-sub)}
.xreply .field .caret{display:inline-block;width:2px;height:18px;background:var(--xblue);vertical-align:text-bottom;animation:blink 1s steps(1) infinite}
.xsend{background:var(--xblue);color:#fff;font-weight:700;font-size:14px;border-radius:16px;padding:6px 14px}
.xsend.dis{opacity:.5}
.tw.mine{background:color-mix(in srgb,var(--xblue) 6%,transparent)}
.gk-chat{width:100%;display:flex;flex-direction:column;gap:10px;text-align:left}
.gk-q{align-self:flex-end;max-width:80%;background:var(--fill);border-radius:18px;padding:10px 14px;font-size:15px}
.gk-a{font-size:15px;line-height:21px;color:var(--x-text)}

/* ---------- halaman Pengaturan ---------- */
.setback{display:flex;align-items:center;color:var(--blue);font-size:17px;gap:0}
.setback .f7-icons{font-size:26px}
.gf{font-size:13px;color:var(--label2);padding:6px 32px 16px;line-height:17px}
.acct{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0 18px}
.acct b{font-size:22px;margin-top:8px}.acct span{color:var(--label2);font-size:14px}
.stor{padding:14px 16px}.stor small{display:block;color:var(--label2);font-size:13px;margin-top:8px}
.sbar{display:flex;height:22px;border-radius:5px;overflow:hidden;background:var(--fill)}
.ck{width:22px;color:transparent;display:grid;place-items:center}.ck.on{color:var(--blue)}
.ck .f7-icons{font-size:17px;font-weight:700}
.f7-icons.blu{color:var(--blue);font-size:22px}
.row>.f7-icons.sec{font-size:16px;margin-left:6px}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--fill);border-top-color:var(--label2);animation:spin .8s linear infinite}
.nrow .ni{width:30px;height:30px;border-radius:7px;overflow:hidden;flex:none;-webkit-mask:var(--sq) center/100% 100%;mask:var(--sq) center/100% 100%}
.nrow .ni svg,.nrow .ni img{width:100%;height:100%;display:block}
.nrow small{display:block;font-size:13px;color:var(--label2)}
.slider-row{display:flex;align-items:center;gap:12px}
.slider-row .hsl{flex:1;height:6px;border-radius:3px;background:var(--fill);overflow:hidden}
.slider-row .hsl i{display:block;height:100%;background:var(--blue)}
.apr{display:flex;justify-content:space-around;padding:16px 10px 10px}
.apr button{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:15px;color:var(--label)}
.apm{width:76px;height:150px;border-radius:14px;background:#f2f2f7;border:2px solid var(--sep);display:flex;flex-direction:column;gap:8px;padding:24px 10px}
.apm i{height:8px;border-radius:4px;background:#d1d1d6}.apm.dk{background:#1c1c1e}.apm.dk i{background:#3a3a3c}
.ck2{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--gray3);display:grid;place-items:center;color:transparent}
.ck2.on{background:var(--blue);border-color:var(--blue);color:#fff}.ck2 .f7-icons{font-size:14px;font-weight:700}
.bchart{display:flex;align-items:flex-end;gap:3px;height:90px;margin:10px 0 6px}
.bchart i{flex:1;background:#34c759;border-radius:2px 2px 0 0}
.lockpg{display:flex;flex-direction:column;align-items:center;gap:10px;padding:60px 30px;text-align:center}
.lockpg>.f7-icons{font-size:48px;color:var(--label2)}.lockpg b{font-size:20px}.lockpg span{color:var(--label2)}
.lockpg button{color:var(--blue);margin-top:8px}

/* ---------- Jam: edit, roda pemilih, timer ---------- */
.delm{width:24px;height:24px;border-radius:50%;background:#ff3b30;color:#fff;display:grid;place-items:center;flex:none;margin-right:12px}
.delm .f7-icons{font-size:14px;font-weight:800}
.row.alarm>button.grow{background:none;color:inherit}
.wheels{position:relative;display:flex;justify-content:center;gap:4px;height:180px;margin:6px 0 14px}
.wheels::before{content:"";position:absolute;left:16px;right:16px;top:72px;height:36px;border-radius:9px;background:var(--fill);z-index:0}
.wheel{position:relative;width:76px;height:180px;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;z-index:1;-webkit-mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent)}
.wheel .wpad{height:72px}
.wheel i{display:block;height:36px;line-height:36px;text-align:center;font-style:normal;font-size:22px;color:var(--label2);scroll-snap-align:center;font-variant-numeric:tabular-nums;transition:color .15s}
.wheel i.on{color:var(--label)}
.wheel .wu{position:sticky;left:0;top:79px;display:block;margin-top:-180px;margin-left:56px;font-size:15px;font-weight:600;color:var(--label);pointer-events:none}
.tw3 .wheel{width:96px}
.alin{border:0;background:none;text-align:right;font:inherit;color:var(--label2);outline:none;width:180px}
.alsave{display:block;margin:14px auto 0;background:#ff9500;color:#000;font-weight:600;border-radius:12px;padding:12px 50px}
.aldel{display:block;margin:12px auto 0;color:#ff3b30;font-size:17px}
.tmr{position:relative;width:300px;height:300px;margin:30px auto 10px;display:grid;place-items:center}
.tmr svg{position:absolute;inset:0;transform:rotate(-90deg)}
.tmr circle{fill:none;stroke-width:3.5}
.tmr .bg{stroke:var(--fill)}.tmr .fg{stroke:#ff9500;stroke-dasharray:289;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.tmr b{font-size:64px;font-weight:300;font-variant-numeric:tabular-nums}
.tmr small{position:absolute;bottom:80px;color:var(--label2);font-size:16px;display:flex;align-items:center;gap:4px}

/* ---------- Kalender ---------- */
.cyr{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 10px;padding:6px 14px}
.cyr button{text-align:left;color:var(--label)}
.cyr b{display:block;font-size:17px;margin-bottom:4px}.cyr b.cur{color:var(--red)}
.cyr div{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.cyr i{font-style:normal;font-size:8px;text-align:center;line-height:13px;height:13px}
.cyr i.td{background:var(--red);color:#fff;border-radius:50%}
.calls .row{gap:10px}.cdot{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}
.cal-ev button.e{display:block;width:100%;text-align:left}
.cev{display:flex;flex-direction:column;gap:4px;padding:4px 20px 16px}
.cev i{width:10px;height:36px;border-radius:5px;background:var(--red);margin-bottom:6px}
.cev b{font-size:22px}.cev span{color:var(--label2)}
.cin{width:100%;border:0;background:none;font:inherit;font-size:17px;color:var(--label);outline:none;padding:2px 0}
/* ---------- Cuaca: daftar kota ---------- */
.wxl{background:#000;color:#fff}
.wxc{display:flex;justify-content:space-between;width:calc(100% - 32px);margin:0 16px 10px;padding:12px 16px;border-radius:22px;text-align:left;color:#fff;min-height:116px;background:linear-gradient(180deg,#3d7fd6,#5fa3e8)}
.wxc.cloud{background:linear-gradient(180deg,#5d7891,#8aa1b6)}.wxc.rain{background:linear-gradient(180deg,#404d5c,#5f6f80)}.wxc.moon{background:linear-gradient(180deg,#0b1a3a,#24365e)}
.wxc>div{display:flex;flex-direction:column}
.wxc b{font-size:22px;font-weight:700}.wxc small{font-size:13px;opacity:.9}.wxc em{font-style:normal;font-size:14px;margin-top:auto}
.wxc .r{align-items:flex-end}.wxc .r b{font-size:48px;font-weight:300;line-height:1}

/* ---------- Kamera ---------- */
.page.cam{background:#000;color:#fff;padding-top:var(--st)}
.camtop{display:flex;justify-content:space-between;align-items:center;padding:4px 16px 8px}
.camtop .cmid{color:#fff;opacity:.8}
.vf{position:relative;margin:0;aspect-ratio:3/4;background:#111;overflow:hidden}
.vf video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.vfph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#666;background:radial-gradient(#222,#0a0a0a)}
.vfph .f7-icons{font-size:46px}
.vf.por{box-shadow:inset 0 0 0 3px #ffcc00}
.zoomp{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:6px;background:rgba(0,0,0,.35);border-radius:20px;padding:4px}
.zoomp button{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font-size:12px;font-weight:600}
.zoomp button.on{color:#ffcc00;width:40px;height:40px;margin:-3px 0;font-size:13px}
.cflash{position:absolute;inset:0;background:#000;animation:cfl .3s ease-out forwards}
@keyframes cfl{from{opacity:1}to{opacity:0}}
.cmodes{display:flex;gap:22px;justify-content:center;padding:16px 0 10px;font-size:13px;font-weight:600;letter-spacing:.5px}
.cmodes button{color:#fff;opacity:.85;flex:none}.cmodes button.on{color:#ffcc00;opacity:1}
.cbot{display:flex;align-items:center;justify-content:space-between;padding:6px 32px 0}
.cthumb{width:46px;height:46px;border-radius:8px;overflow:hidden}.cthumb img{width:100%;height:100%;object-fit:cover}
.shutter{width:76px;height:76px;border-radius:50%;border:5px solid #fff;display:grid;place-items:center;padding:3px}
.shutter i{width:100%;height:100%;border-radius:50%;background:#fff;transition:transform .15s}
.shutter.rec i{background:#ff3b30}.shutter:active i{transform:scale(.88)}
.cflip{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;display:grid;place-items:center}
/* ---------- Pesan ---------- */
.imrow{width:100%;text-align:left;gap:10px;padding:10px 16px 10px 8px;--inset:70px}
.imrow .udot{width:10px;height:10px;border-radius:50%;background:var(--blue);flex:none}
.imrow:has(.udot)+.imrow,.imrow{position:relative}
.imrow:not(:has(.udot)){padding-left:26px}
.imrt{display:flex;justify-content:space-between;align-items:baseline}
.imrt small{color:var(--label2);font-size:14px;display:flex;align-items:center;gap:2px}.imrt small .f7-icons{font-size:12px}
.imrow .grow>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--label2);font-size:15px;line-height:19px}
.imt{background:var(--bg);padding-top:0}
.imh{display:flex;align-items:flex-start;justify-content:space-between;padding:calc(var(--st) - 6px) 12px 6px;flex:none}
.imwho{display:flex;flex-direction:column;align-items:center;gap:4px}
.imwho b{font-size:12px;font-weight:500;display:flex;align-items:center;gap:2px;background:var(--fill);border-radius:12px;padding:3px 9px}
.imwho b .f7-icons{font-size:10px}
.imt .msgs{background:var(--bg)!important;background-image:none!important;padding:6px 14px 10px}
.imsvc{text-align:center;font-size:11px;color:var(--label2);margin:6px 0 10px;line-height:15px}
.imb{max-width:72%;width:max-content;padding:7px 12px;border-radius:18px;font-size:16px;line-height:21px;margin:2px 0}
.imb.me{margin-left:auto;background:#0b84fe;color:#fff}.imb.me.sms{background:#34c759}
.imb.th{background:var(--fill);color:var(--label)}
.imb.tail.me{border-bottom-right-radius:5px}.imb.tail.th{border-bottom-left-radius:5px}
.imread{text-align:right;font-size:11px;color:var(--label2);margin-top:2px}
.imc{flex:none;display:flex;align-items:center;gap:8px;padding:6px 10px 30px}
.imc .gbtn{width:36px;height:36px}
.imc .field{flex:1;min-height:36px;border:1px solid var(--sep);border-radius:18px;padding:7px 14px;font-size:16px;color:var(--label);cursor:text;position:relative}
.imc .field.ph{color:var(--label2)}
.imc .field .caret{display:inline-block;width:2px;height:19px;background:var(--blue);vertical-align:text-bottom;animation:blink 1s steps(1) infinite}
.imc #cright{position:absolute;right:16px;bottom:36px}
.imc{position:relative}
.imsend{width:28px;height:28px;border-radius:50%;background:#0b84fe;color:#fff;display:grid;place-items:center}
.imsend .f7-icons{font-size:16px;font-weight:700}
.page:has(#kbd.show) .imc{padding-bottom:6px}
.page:has(#kbd.show) .imc #cright{bottom:12px}
.imno{flex:none;text-align:center;color:var(--label2);font-size:13px;padding:12px 0 36px}
/* ---------- FaceTime ---------- */
.ftb{display:flex;gap:10px;padding:4px 16px 8px}
.ftb button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:12px;padding:12px 0;font-weight:600;background:var(--fill);color:var(--label)}
.ftb button.g{background:#34c759;color:#fff}

/* ---------- layar kunci: efek kedalaman iOS 26/27 ----------
   media/wall_depth.png = masker orang di wallpaper (dihitung sekali dengan MediaPipe selfie segmenter).
   Lapisan potongan foto berada DI ATAS jam, jadi kepala menutupi bagian bawah angka jam yang memanjang. */
.wall-lock{background:#222 url(media/k_x_08.jpg) center 40%/cover}
#wall.wall-lock{transform:none!important}
.lock .ldepth{position:absolute;inset:0;z-index:2;pointer-events:none;background:url(media/k_x_08.jpg) center 40%/cover;-webkit-mask:url(media/wall_depth.png) center 40%/cover no-repeat;mask:url(media/wall_depth.png) center 40%/cover no-repeat}
.lock .notifs,.lock .lbtns,.lock .swipe{z-index:3}
.lock .ldate{z-index:3}
.lock .ltime{transform:scaleY(1.62);transform-origin:top;font-size:124px;letter-spacing:-3px;margin-top:2px}
.lock::before{z-index:0}

/* ---------- Siri iOS 27 ---------- */
#siri{position:absolute;inset:0;z-index:97;display:flex;align-items:flex-end;padding:0 12px 40px;background:linear-gradient(transparent 40%,rgba(0,0,0,.35))}
#siri .sglow{position:absolute;inset:0;border-radius:62px;pointer-events:none;padding:7px;background:conic-gradient(from var(--sa,0deg),#ff7ae0,#7a5cff,#4fd2ff,#5effb1,#ffd25e,#ff7a7a,#ff7ae0);-webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);filter:blur(6px) saturate(1.3);animation:sglow 3s linear infinite}
@property --sa{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes sglow{to{--sa:360deg}}
#siri .spanel{position:relative;width:100%;border-radius:30px;padding:16px;display:flex;flex-direction:column;gap:12px;color:var(--label)}
#siri .sans{font-size:20px;font-weight:600;line-height:26px;position:relative;z-index:1}
#siri .ssug{display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:1}
#siri .ssug button{background:var(--fill);border-radius:16px;padding:8px 12px;font-size:14px;color:var(--label)}
#siri .sin{display:flex;align-items:center;gap:8px;background:var(--fill);border-radius:20px;padding:8px 12px;position:relative;z-index:1}
#siri .sin input{flex:1;border:0;background:none;font:inherit;font-size:16px;color:var(--label);outline:none}
#siri .sin .f7-icons{color:#7a5cff}

/* ---------- notifikasi dikelompokkan ---------- */
.ngrp{position:relative;padding-bottom:14px;cursor:pointer}
.ngrp>.notif{position:relative;z-index:3}
.ngrp>i{position:absolute;left:10px;right:10px;bottom:7px;height:30px;border-radius:20px;background:rgba(245,245,245,.5);backdrop-filter:blur(20px);z-index:2}
.ngrp>i.nl2{left:20px;right:20px;bottom:0;z-index:1;background:rgba(245,245,245,.32)}
.nghd{display:flex;align-items:center;gap:8px;padding:6px 4px 2px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.nghd b{flex:1;font-size:20px;font-weight:700}
.nghd button{background:rgba(255,255,255,.28);backdrop-filter:blur(20px);color:#fff;font-size:13px;font-weight:600;border-radius:16px;padding:6px 12px;text-shadow:none}
.nghd .x{width:30px;height:30px;padding:0;border-radius:50%;display:grid;place-items:center}
.nghd .x .f7-icons{font-size:13px;font-weight:700}
.lock .notifs{display:flex;flex-direction:column;gap:8px;max-height:330px;overflow-y:auto}
.nc .list .notif{margin-bottom:8px}
/* ---------- gaya ikon berwarna (tinted) ---------- */
.screen.icon-tint .home .ico img,.screen.icon-tint .home .ico svg{filter:grayscale(1) sepia(1) saturate(4) hue-rotate(var(--itint)) brightness(.95)}

/* ---------- widget Home ---------- */
.wwrap{position:relative}
.wwrap>.widget,.wwrap>.wsm{width:100%;height:100%}
.wwrap.l>.wbig{width:100%}
.home.jiggle .wwrap{animation:jig .26s ease-in-out infinite alternate}
.wdel{position:absolute;top:-8px;left:-8px;width:26px;height:26px;border-radius:50%;background:rgba(80,80,84,.9);backdrop-filter:blur(10px);color:#fff;display:grid;place-items:center;z-index:5;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.wdel .f7-icons{font-size:14px;font-weight:800}
.jedit{position:absolute;top:calc(var(--st) - 4px);left:16px;z-index:30}
.wbat{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;background:rgba(30,30,32,.75);color:#fff}
.wbat .bring{--p:50;width:52px;height:52px;border-radius:50%;background:conic-gradient(#34c759 calc(var(--p)*1%),rgba(255,255,255,.18) 0);display:grid;place-items:center}
.wbat .bring span{width:44px;height:44px;border-radius:50%;background:#1c1c1e;display:grid;place-items:center}
.wbat .bring.sm{position:absolute;right:14px;top:14px;width:36px;height:36px}.wbat .bring.sm span{width:30px;height:30px}
.wbat .bring .f7-icons{font-size:18px}.wbat .bring.sm .f7-icons{font-size:14px}
.wbat b{font-size:26px;margin-top:auto}.wbat small{font-size:12px;opacity:.7}
.wbat{position:relative}
.wclk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#f2f2f7;color:#000}
.wclk .ico{width:110px;height:110px;-webkit-mask:none;mask:none;border-radius:50%;background:none}
.wclk small{font-size:12px;color:#8e8e93}
.wgal{display:flex;flex-direction:column;gap:18px;padding:10px 16px 20px}
.wgi{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.wgi .wprev{pointer-events:none;width:170px;height:170px}
.wgi .wprev.l{width:340px;height:170px}
.wgi .wprev>*{width:100%!important;height:100%!important}
.wgi b{font-size:17px;margin-top:8px}.wgi small{color:var(--label2);font-size:13px}
.wgi button{margin-top:8px;background:var(--blue);color:#fff;font-weight:600;border-radius:20px;padding:9px 16px;display:flex;gap:6px;align-items:center}
.icst{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 12px}
.icst button{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;color:var(--label);border-radius:14px;padding:8px 0}
.icst button.on{background:var(--fill);font-weight:600}
.isp{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:6px;border-radius:12px;background:#d1d1d6}
.isp.dark,.isp.tint{background:#1c1c1e}
.isp i{width:26px;height:26px;overflow:hidden;-webkit-mask:var(--sq) center/100% 100%;mask:var(--sq) center/100% 100%}
.isp i svg,.isp i img{width:100%;height:100%;display:block}
.isp.tint i{filter:grayscale(1) sepia(1) saturate(4) hue-rotate(var(--itint))}
.ihue{padding:6px 20px 16px}.ihue input{width:100%;accent-color:hsl(calc(var(--itint) + 40),80%,55%)}
/* ---------- layar kunci: gaya jam ---------- */
.lock .ltime.f-classic{font-family:-apple-system,"SF Pro Display",Inter,sans-serif;font-weight:600}
.lock .ltime.f-slim{font-family:-apple-system,"SF Pro Display",Inter,sans-serif;font-weight:200;letter-spacing:-1px}
.lock .ltime.st-glass{color:color-mix(in srgb,var(--lc) 45%,transparent)}
.lock .ltime.st-solid{color:var(--lc);mix-blend-mode:normal;text-shadow:0 2px 14px rgba(0,0,0,.18)}
.lock .ltime.st-solid::after{display:none}
.lwid{display:flex;justify-content:center;gap:12px;margin-bottom:6px}
.lw{color:#fff;background:rgba(255,255,255,.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:grid;place-items:center;text-shadow:none}
.lw.circ{position:relative;width:58px;height:58px;border-radius:50%;grid-template-rows:auto auto;align-content:center;gap:0}
.lw.circ .f7-icons{font-size:15px}.lw.circ b{font-size:15px;font-weight:600;line-height:17px}
.lw.circ svg{position:absolute;inset:3px;transform:rotate(-90deg)}
.lw.circ circle{fill:none;stroke-width:3}.lw.circ .t{stroke:rgba(255,255,255,.25)}.lw.circ .f{stroke:#fff;stroke-linecap:round}
.lw.rect{display:flex;align-items:center;gap:8px;height:58px;border-radius:18px;padding:0 14px;text-align:left;width:150px}
.lw.rect b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px}.lw.rect small{font-size:12px;opacity:.8}
/* ---------- editor layar kunci ---------- */
.lked{position:absolute;inset:0;background:#000;color:#fff;display:flex;flex-direction:column;z-index:2}
.lktop{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--st) - 6px) 16px 8px;font-size:15px}
.lktop button{color:#fff;font-size:16px}.lktop .d{font-weight:700;background:#fff;color:#000;border-radius:16px;padding:5px 14px}
.lkcard{flex:none;height:360px;display:flex;justify-content:center;overflow:hidden}
.lkscale{position:relative;width:402px;height:874px;transform:scale(.41);transform-origin:top center;border-radius:62px;overflow:hidden;flex:none}
.lkscale .lkwall{position:absolute;inset:0}
.lkscale .page{pointer-events:none}
.lkpanel{margin:10px 12px 30px;border-radius:28px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;color:var(--label);overflow-y:auto;flex:1}
.lkr{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;position:relative;z-index:1}
.lkr.col{flex-direction:column;align-items:flex-start}
.lkcol{display:flex;gap:10px}
.lkcol button{width:28px;height:28px;border-radius:50%;border:2px solid rgba(0,0,0,.15)}
.lkcol button.on{box-shadow:0 0 0 3px var(--blue)}
.lkchips{display:flex;gap:8px;flex-wrap:wrap}
.lkchips button{background:var(--fill);border-radius:14px;padding:6px 12px;font-size:14px;color:var(--label)}
.lkchips button.on{background:var(--blue);color:#fff}
.lkwalls{display:flex;gap:8px;overflow-x:auto;width:100%}
.lkwalls button{flex:none;width:48px;height:86px;border-radius:10px;border:2px solid transparent}
.lkwalls button.on{border-color:var(--blue)}
.tgl.dis{opacity:.4}
.lkr .seg2 button{color:var(--label)}
/* ---------- tombol samping fisik ---------- */
.sidebtn{position:absolute;right:-5px;top:230px;width:6px;height:96px;border-radius:0 4px 4px 0;background:linear-gradient(90deg,#2b2b2e,#4a4a4e);cursor:pointer;z-index:1}
.sidebtn:active{transform:translateX(-1px)}
.phone{position:relative}

/* ---------- Liquid Glass WebGL (library) ---------- */
.lgroot{position:absolute;left:0;right:0;bottom:0;overflow:hidden;z-index:4;pointer-events:none}
.lgroot>*{pointer-events:auto}
.lgroot .lgbg{position:absolute;left:0;width:402px;height:874px;object-fit:cover;object-position:center 40%;pointer-events:none}
.lgroot.lock{z-index:3}
.lgroot .dock{position:absolute;left:12px;right:12px;bottom:12px}
.lgroot .search-pill{position:absolute;left:50%;transform:translateX(-50%);bottom:118px;margin:0}
.lgroot .lbl,.lgroot .lbr{position:absolute;bottom:44px;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff}
.lgroot .lbl{left:46px}.lgroot .lbr{right:46px}
.lgroot .lbl svg{width:22px;height:22px;fill:currentColor}
.lgroot .lbl.on{color:#000}
/* cadangan sebelum/ tanpa WebGL: kaca CSS biasa */
.lgroot:not(.lg-ready) .lgx{background:rgba(255,255,255,.22);backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.5)}
.lgroot:not(.lg-ready) .lbl.on{background:#fff}
.lgroot.lg-ready .lgx{background:transparent!important;backdrop-filter:none!important;box-shadow:none}
.lgroot.lg-ready .lbl.on::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff;z-index:-1}
.home.lib .lgroot{opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s} /* jangan display:none: kanvas WebGL jadi 0×0 dan tidak tergambar lagi */
.screen:has(#lgroot.lg-ready) #wall{transform:none!important}
.lgroot .lgx{z-index:1} /* kanvas library ber-z-index -1: harus di dalam stacking context kaca, bukan di belakang <img> wallpaper */
.lgroot .lgbg{opacity:0} /* tetap dibaca library (drawImage), tapi yang terlihat wallpaper asli → tanpa garis sambungan */
.sf-bar .url .aa{background:none;padding:0 2px;font-family:inherit}.sf-bar .url .aa.on{color:#0a84ff}
/* ---------- notifikasi layar kunci iOS 26: kaca bening, thumbnail kanan, header grup ---------- */
.lock .notif.glass{background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.65),inset 0 1px 1px rgba(255,255,255,.7),0 6px 22px rgba(0,0,0,.08);border-radius:22px;padding:12px 13px;color:#000}
.notif .ni .ico{border-radius:10px!important}
.notif .nb span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:rgba(0,0,0,.82)}
.notif .nb b small{color:rgba(0,0,0,.5);opacity:1}
.notif .nthumb{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;align-self:flex-end;margin-bottom:1px}
.notif:has(.nthumb) .nb b{padding-right:0}
.ngrp>i{background:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.55);border-radius:20px}
.ngrp>i.nl2{background:rgba(255,255,255,.22)}
.nghd,.nchd{display:flex;align-items:center;gap:8px;padding:8px 2px 2px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.3)}
.nchd b{flex:1;font-size:22px;font-weight:600;letter-spacing:.2px}
.nghd b{font-size:20px;font-weight:600}
.nghd button,.nchd .x{background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.6);color:#fff;font-size:13px;font-weight:600;border-radius:16px;padding:6px 11px;display:flex;align-items:center;gap:4px;text-shadow:none}
.nghd button .f7-icons{font-size:12px;font-weight:800}
.nghd .x,.nchd .x{width:30px;height:30px;padding:0;border-radius:50%;justify-content:center}
.nchd .x .f7-icons{font-size:13px;font-weight:700}
/* Pusat Notifikasi terbuka: widget disembunyikan, daftar mengisi ruang di bawah jam */
.lock.ncopen .lwid{display:none}
.lock.ncopen .notifs{max-height:450px}

/* ---------- detail profil seperti akun asli ---------- */
.prof .bio .cat{display:block;color:var(--label2,rgba(60,60,67,.6))}
.prof .bio .lnk,.prof .bio .thr{display:flex;align-items:center;gap:4px;font-weight:600;color:#4150f7}
.prof .bio .thr{color:var(--label)}
.prof .bio .lnk .f7-icons{font-size:14px}.prof .bio .thr svg{width:14px;height:14px}
.xprof .j{display:flex;flex-wrap:wrap;gap:4px 12px}
.xprof .j span{display:inline-flex;align-items:center;gap:4px}
.xprof .j .xl{color:var(--xblue)}
.ttprof .lnk{display:flex;align-items:center;justify-content:center;gap:4px;font-weight:600;font-size:14px;margin-top:6px}

/* ---------- Control Center iOS 26 ---------- */
.cc{padding:12px 28px 0;overflow-y:auto}
.cctop{display:flex;justify-content:space-between;padding:30px 2px 6px}
.cctop button{color:#fff;font-size:20px}.cctop .f7-icons{font-size:20px}
.ccst{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;padding:2px 4px 14px}
.ccst span{display:flex;align-items:center;gap:6px}.ccst .f7-icons{font-size:15px}
.ccst .batt{width:25px;height:12px;border:1.3px solid rgba(255,255,255,.6);border-radius:4px;padding:1px;display:inline-block}
.ccst .batt i{display:block;height:100%;background:#fff;border-radius:2px}
.ccpager{position:absolute;right:6px;top:250px;display:flex;flex-direction:column;gap:14px;align-items:center;opacity:.75}
.ccpager i{font-style:normal}.ccpager .f7-icons{font-size:14px}
.ccpager .dot{width:7px;height:7px;border-radius:50%;background:#fff}
.ccm{background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.28),inset 0 1px 1px rgba(255,255,255,.25)}
.ccm.circle{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.ccm.circle .ccb{width:72px;height:72px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.28),inset 0 1px 1px rgba(255,255,255,.25)}
.ccm.circle .ccb.on{background:#fff}
.ccm.conn{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;padding:12px;gap:8px;place-items:center;border-radius:30px}
.conn .ccb{width:60px;height:60px}
.conn .ccb:not(.on){background:rgba(255,255,255,.18)}
.conn .ccb.on{background:var(--c);color:#fff}
.conn .minis{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:60px;height:60px}
.conn .ccb.mini{width:28px;height:28px}.conn .ccb.mini .f7-icons{font-size:14px}
.ccm .np2{border-radius:30px}
.np2 .nptop{display:flex;justify-content:space-between;align-items:flex-start}
.np2 .nptop img,.np2 .noart{width:48px;height:48px;border-radius:10px;object-fit:cover;background:rgba(255,255,255,.2);display:grid;place-items:center}
.np2 .airp{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center}.np2 .airp .f7-icons{font-size:16px}
.ccm.sl{border-radius:30px}
.ccm.sl .slider i{background:rgba(255,255,255,.95)}
.ccm.pill{border-radius:40px;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:0 18px;font-size:15px;cursor:pointer;place-items:unset}
.ccm.pill b{flex:1;font-weight:600;line-height:18px}
.ccm.pill .f7-icons{font-size:20px}.ccm.pill b+.f7-icons{font-size:13px;opacity:.8}
.ccm.pill.on{background:#fff;color:#5856d6}
.ccm.pill.wide{padding:0 10px}
.ccm.pill .pi{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none}
.ccm.pill .pi .f7-icons{font-size:24px}
.cctop{padding-top:46px}
.ccm.pill{place-items:normal;align-items:center}
/* ---------- gestur sentuh di HP asli ----------
   tanpa ini browser mengambil alih geseran (scroll/pull-to-refresh/back) dan mengirim pointercancel,
   jadi geser halaman Home, geser-kembali, geser foto, dan buka Pusat Notifikasi/Control Center gagal. */
html,body{overscroll-behavior:none}
.screen{touch-action:pan-y}
.page.lock,.page.home,.page.pin,.homebar,#ncc,.viewer .vm,.status,.island{touch-action:none}
.hs{touch-action:pan-x}
@media (pointer:coarse){.sizebar{display:none}}
@media (pointer:coarse){.homebar::before{inset:-14px -100px -8px}} /* area geser-ke-Home lebih lebar untuk jari */
/* titik halaman di atas kanvas kaca WebGL, tepat di atas tombol Cari; tampil hanya saat menggeser halaman */
.home .hfoot{bottom:156px;z-index:5;pointer-events:none}
.home .hfoot .dots{opacity:0;transition:opacity .35s}
.home.paging .hfoot .dots{opacity:1}
.home.lib .hfoot{opacity:1}
/* ---------- widget Apple Music iOS 26 ---------- */
.wmus2{background:linear-gradient(170deg,#ff4f6d,#fa2d55 60%,#e81f49);color:#fff;text-align:left;cursor:pointer;position:relative;overflow:hidden}
.wmus2 .pp{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:5px 11px;border-radius:14px;background:rgba(255,255,255,.25);font-size:12px;font-weight:600;color:#fff;align-self:flex-start}
.wmus2 .pp .f7-icons{font-size:11px}
.wsm.wmus2{display:flex;flex-direction:column;padding:12px}
.wsm.wmus2 .mt{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:auto}
.wsm.wmus2 .mt img{width:52px;height:52px;border-radius:8px;object-fit:cover}
.wsm.wmus2 .mt .f7-icons{font-size:18px}
.wsm.wmus2 b{font-size:13px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsm.wmus2 small{font-size:12px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wbig.wmus2.med{display:flex;gap:14px;padding:14px;align-items:stretch}
.wbig.wmus2.med .art{width:124px;height:124px;border-radius:12px;object-fit:cover;flex:none;position:static}
.wbig.wmus2.med .tx{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1}
.wbig.wmus2.med small{font-size:11px;font-weight:600;opacity:.8;letter-spacing:.3px}
.wbig.wmus2.med b{font-size:17px;line-height:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wbig.wmus2.med span{font-size:14px;opacity:.85}
.wbig.wmus2.med>.f7-icons{position:absolute;right:14px;top:14px;font-size:20px}
.wbig.wmus2.top{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.wbig.wmus2.top .hd{display:flex;justify-content:space-between;align-items:center}
.wbig.wmus2.top .hd b{font-size:15px}
.wbig.wmus2.top .rw{display:flex;align-items:center;gap:10px}
.wbig.wmus2.top .rw img{width:44px;height:44px;border-radius:6px;object-fit:cover;position:static}
.wbig.wmus2.top .rw div{flex:1;min-width:0}
.wbig.wmus2.top .rw small{display:block;font-size:10px;font-weight:600;opacity:.8}
.wbig.wmus2.top .rw b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wbig.wmus2.top .pc{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;color:#fff}
.wbig.wmus2.top .pc .f7-icons{font-size:12px}

/* lencana verified X asli: tanpa latar, sejajar teks */
.xvb{display:inline-block;vertical-align:-3px;margin-left:2px;flex:none;background:none!important}
.sv svg{width:24px;height:24px}
.wbig.wmus2 b{position:static;text-shadow:none;left:auto;bottom:auto}
.mview.wa{padding-top:0;background:#000} /* .wa (halaman WhatsApp) juga menempel di viewer media WA: jangan dobel jarak status bar */
.viewer .thumbs video{cursor:pointer;transition:width .25s var(--spring),opacity .2s;pointer-events:auto;background:#222}
img.imgerr{visibility:hidden} /* gagal dimuat 2x: jangan tampilkan ikon gambar rusak */