/* =====================================================
   Daftar isi:
   1. lock + passcode   2. home   3. app shell iOS
   4. notes  5. photos  6. instagram  7. calendar  8. maps
   9. gmail  10. safari  11. phone  12. messages  13. call
   14. iOS polish  15. iOS 18 (Instagram/Photos/Notes)
   ===================================================== */

:root {
  --wp: linear-gradient(165deg,#1b2440,#6a4c7d 45%,#e8998d 80%,#f6c9a0);
  --bl: #007aff;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  height: 100vh;
  background: #0d0e13;
  overflow: hidden;
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  user-select: none;
}

#phone {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 393px;
  height: 852px;
  border-radius: 56px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 9px #1b1b1e,0 0 0 11px #4a4a50,0 40px 90px #000c;
  transform: translate(-50%,-50%) scale(var(--s,1));
}

#phone.full {
  border-radius: 0;
  box-shadow: none;
}

#phone.full #isl {
  display: none;
}

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

.wp {
  background: var(--wp);
}

#sb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 54px;
  z-index: 80;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 34px 0 48px;
  color: #fff;
  font-size: 17px;
  pointer-events: none;
}

#sb .r {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 15px;
}

.sig {
  display: flex;
  gap: 1.5px;
  align-items: flex-end;
  height: 11px;
}

.sig i {
  width: 3.5px;
  background: currentColor;
  border-radius: 1px;
}

.sig i:nth-child(1) {
  height: 4px;
}

.sig i:nth-child(2) {
  height: 6px;
}

.sig i:nth-child(3) {
  height: 8px;
}

.sig i:nth-child(4) {
  height: 11px;
}

.bat {
  position: relative;
  width: 28px;
  height: 13px;
  border-radius: 4.5px;
  overflow: hidden;
  margin-left: 2px;
}

.bat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: .3;
}

.bat i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 85%;
  background: currentColor;
  border: 0;
}

.bat b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  mix-blend-mode: difference;
  color: #fff;
}

#isl {
  position: absolute;
  top: 11px;
  left: 50%;
  width: 124px;
  height: 36px;
  margin-left: -62px;
  border-radius: 20px;
  background: #000;
  z-index: 85;
}

#bar {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 140px;
  height: 5px;
  margin-left: -70px;
  border-radius: 3px;
  background: #fff;
  z-index: 90;
  cursor: pointer;
}

#bar::after {
  content: "";
  position: absolute;
  inset: -22px -90px;
}

#phone[data-ui=dark] #sb {
  color: #000;
}

#phone[data-ui=dark] #bar {
  background: #000;
}

/* lock + passcode */
#lock {
  z-index: 50;
  color: #fff;
  text-align: center;
  transition: transform .5s,opacity .4s;
}

#lock.gone {
  transform: translateY(-25%);
  opacity: 0;
  pointer-events: none;
}

#ld {
  margin-top: 78px;
  font-size: 20px;
  font-weight: 500;
  opacity: .9;
}

#lt {
  font-size: 96px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -2px;
}

#notif,.nf {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 135px;
  display: flex;
  gap: 11px;
  align-items: center;
  text-align: left;
  padding: 13px;
  border-radius: 22px;
  background: rgba(255,255,255,.3);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0;
  transform: translateY(40px);
  transition: .5s;
  cursor: pointer;
}

#notif.in,.nf.in {
  opacity: 1;
  transform: none;
}

#notif u,.nf u {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: block;
}

#notif p,.nf p {
  flex: 1;
  font-size: 15px;
  line-height: 1.3;
}

#notif p b,.nf p b {
  display: block;
}

#notif small,.nf small {
  align-self: flex-start;
  font-size: 13px;
  opacity: .8;
}

#lhint {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  font-size: 14px;
  opacity: .85;
  cursor: pointer;
}

.qb {
  position: absolute;
  bottom: 62px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  display: grid;
  place-items: center;
  font-size: 22px;
}

#pass {
  z-index: 60;
  color: #fff;
  text-align: center;
  background: linear-gradient(#0006,#0006),var(--wp);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

#pass.show {
  opacity: 1;
  pointer-events: auto;
}

#pass h3 {
  margin-top: 110px;
  font-size: 20px;
  font-weight: 500;
}

#pdots {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin: 26px 0 44px;
}

#pdots i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #fff;
}

#pdots i.f {
  background: #fff;
}

#pdots.shake {
  animation: sh .45s;
}

@keyframes sh {
  20%,60% {
    transform: translateX(-12px);
  }
  40%,80% {
    transform: translateX(12px);
  }
}

#pad {
  display: grid;
  grid-template-columns: repeat(3,78px);
  gap: 16px 22px;
  justify-content: center;
}

#pad b {
  height: 78px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(14px);
  display: grid;
  place-items: center;
  font-size: 34px;
  font-weight: 400;
  cursor: pointer;
}

#pad b:active {
  background: rgba(255,255,255,.5);
}

#pad b.e {
  background: none;
  pointer-events: none;
}

#pbot {
  display: flex;
  justify-content: space-between;
  padding: 26px 52px;
  font-size: 17px;
}

#pbot span {
  cursor: pointer;
}

/* home */
#home {
  z-index: 1;
  padding: 66px 20px 0;
}

.wg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 24px;
}

.w1,.w2 {
  height: 169px;
  border-radius: 22px;
  overflow: hidden;
  color: #fff;
}

.w1 {
  padding: 14px;
  background: linear-gradient(#4a8fe0,#6fa9ea);
}

.w1 h4 {
  font-size: 15px;
  font-weight: 600;
}

.w1 .t {
  font-size: 50px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -1px;
}

.w2 {
  background: #fff;
  color: #000;
  padding: 10px 12px;
}

.mc {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  font-size: 10.5px;
  text-align: center;
  row-gap: 3px;
  margin-top: 5px;
  line-height: 16px;
}

.mc b {
  color: #8e8e93;
  font-weight: 600;
  font-size: 9px;
}

.mc>*:nth-child(7n+1) {
  color: #ff6b6b;
}

.mc .td {
  background: #ff3b30;
  color: #fff;
  border-radius: 50%;
  font-weight: 600;
  width: 17px;
  margin: auto;
}

.g {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  row-gap: 22px;
  justify-items: center;
}

.ic {
  width: 64px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  text-shadow: 0 1px 3px #0005;
}

.ic u {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 6px;
  border-radius: 14.5px;
  text-decoration: none;
  position: relative;
}

.ic u:active {
  filter: brightness(.75);
}

.ic u svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
}

.bd {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  background: #ff3b30;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: grid;
  place-items: center;
}

.dock {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 26px;
  height: 90px;
  border-radius: 34px;
  background: rgba(255,255,255,.25);
  backdrop-filter: blur(22px);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.dock .ic span {
  display: none;
}

.dock .ic u {
  margin: 0;
}

.dots {
  position: absolute;
  bottom: 126px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 9px;
  letter-spacing: 6px;
}

/* app shell iOS */
.app {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #fff;
  color: #000;
  opacity: 0;
  transform: scale(.92);
  pointer-events: none;
  transition: .25s;
}

.app.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.v {
  position: absolute;
  inset: 0;
  display: none;
  overflow: auto;
  padding: 54px 0 96px;
  background: #fff;
}

.v.on {
  display: block;
}

.v.fx.on {
  display: flex;
  flex-direction: column;
}

.nv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  font-size: 17px;
}

.bk {
  color: var(--bl);
  cursor: pointer;
  font-size: 17px;
}

.y {
  color: #e5a000;
}

.rd {
  color: #ff3b30;
}

.ttl {
  font-size: 34px;
  font-weight: 700;
  padding: 4px 20px 8px;
}

.srch {
  margin: 0 16px 12px;
  height: 36px;
  border-radius: 10px;
  background: #7676801f;
  color: #8e8e93;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 17px;
  gap: 6px;
}

.sec {
  padding: 14px 20px 6px;
  font-size: 20px;
  font-weight: 700;
}

.grp {
  margin: 0 16px 20px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.gy {
  background: #f2f2f7;
}

.li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  font-size: 17px;
  border-bottom: .5px solid #c6c6c8;
  cursor: pointer;
}

.li:last-child {
  border: 0;
}

.li s {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-size: 17px;
  color: #fff;
}

.li em {
  margin-left: auto;
  font-style: normal;
  color: #8e8e93;
  font-size: 16px;
  white-space: nowrap;
}

.tb {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84px;
  background: #f9f9f9f2;
  border-top: .5px solid #c6c6c8;
  display: none;
  justify-content: space-around;
  align-items: flex-start;
  padding-top: 9px;
  font-size: 10px;
  color: #8e8e93;
  z-index: 5;
  text-align: center;
}

.tb i {
  display: block;
  font-size: 23px;
  font-style: normal;
  line-height: 1.2;
}

.tb .a {
  color: var(--bl);
}

.tb b {
  font-weight: 400;
  font-size: 17px;
}

.av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(#a5acb8,#7d8492);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 44px;
  text-align: center;
  background-size: cover;
  flex: none;
}

/* notes */
.nr {
  padding: 10px 16px;
  border-bottom: .5px solid #c6c6c8;
  cursor: pointer;
}

.nr:last-child {
  border: 0;
}

.nr b {
  display: block;
  font-size: 17px;
}

.nr p {
  font-size: 15px;
  color: #8e8e93;
  margin: 2px 0;
}

.nr p span {
  color: #000;
  margin-right: 8px;
}

.nr small {
  font-size: 13px;
  color: #8e8e93;
}

.nb {
  padding: 6px 20px;
}

.nb small {
  display: block;
  text-align: center;
  color: #8e8e93;
  font-size: 13px;
  margin-bottom: 14px;
}

.nb h1 {
  font-size: 28px;
  margin-bottom: 6px;
}

.nb p {
  font-size: 17px;
  line-height: 1.4;
  white-space: pre-line;
}

/* photos */
.pg {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2px;
}

.ti {
  aspect-ratio: 1;
  cursor: pointer;
  background-size: cover;
}

.seg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 34px;
  display: flex;
  background: #f2f2f7f0;
  border-radius: 22px;
  padding: 3px;
  font-size: 14px;
  box-shadow: 0 2px 12px #0002;
  z-index: 6;
}

.seg span {
  padding: 8px 13px;
  border-radius: 19px;
}

.seg .a {
  background: #fff;
  font-weight: 600;
  box-shadow: 0 1px 3px #0002;
}

#pimg {
  flex: 1;
  margin: 0;
  background-size: cover;
  background-position: center;
}

/* instagram */
.sto {
  display: flex;
  gap: 12px;
  padding: 6px 14px 10px;
  overflow: hidden;
  font-size: 12px;
  text-align: center;
}

.sto div {
  width: 70px;
}

.sto i {
  display: block;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(45deg,#feda75,#d62976,#4f5bd5);
  margin-bottom: 4px;
}

.sto i u {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #fff;
  background-size: cover;
  background-color: #ccd;
}

.ph {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
}

.ph .av {
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
}

.ph em {
  margin-left: auto;
  font-style: normal;
  font-weight: 400;
}

.pim {
  height: 393px;
  background-size: cover;
  background-position: center;
}

.pa {
  padding: 10px 14px 4px;
  font-size: 25px;
  display: flex;
  gap: 14px;
}

.pa span:last-child {
  margin-left: auto;
}

.pt {
  padding: 2px 14px;
  font-size: 14px;
  line-height: 1.4;
}

.pt small {
  color: #8e8e93;
  display: block;
  margin-top: 3px;
  font-size: 12px;
}

.ig {
  font-family: "Snell Roundhand","Brush Script MT",cursive;
  font-size: 30px;
}

.pf {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 6px 18px 10px;
  font-size: 14px;
  text-align: center;
}

.pf .av {
  width: 84px;
  height: 84px;
  line-height: 84px;
  font-size: 34px;
}

.pf b {
  display: block;
  font-size: 17px;
}

.eb {
  margin: 0 16px 12px;
  height: 32px;
  border-radius: 8px;
  background: #efefef;
  font-weight: 600;
  font-size: 14px;
  display: grid;
  place-items: center;
}

/* calendar */
.cal {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  text-align: center;
  padding: 0 10px;
  row-gap: 2px;
}

.cal b {
  font-size: 12px;
  color: #8e8e93;
  padding: 6px 0;
}

.cal div {
  height: 42px;
  font-size: 19px;
  border-top: .5px solid #e5e5ea;
  padding-top: 4px;
  position: relative;
}

.cal div span {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
}

.cal .td span {
  background: #ff3b30;
  color: #fff;
  font-weight: 600;
}

.cal div u {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 5px;
  height: 5px;
  margin-left: -2px;
  border-radius: 50%;
  background: #8e8e93;
}

.ev {
  display: flex;
  gap: 10px;
  padding: 10px 20px;
  font-size: 15px;
  line-height: 1.35;
}

.ev i {
  width: 4px;
  border-radius: 2px;
  background: #ff3b30;
}

.ev small {
  color: #8e8e93;
  display: block;
}

/* maps */
.map {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,#fff 0 7px,transparent 7px 90px),repeating-linear-gradient(90deg,#fff 0 7px,transparent 7px 110px),#ece8dc;
  overflow: hidden;
}

.map::before {
  content: "";
  position: absolute;
  left: -20%;
  top: 36%;
  width: 150%;
  height: 60px;
  background: #a8d3f0;
  transform: rotate(-14deg);
}

.map::after {
  content: "";
  position: absolute;
  left: 58%;
  top: 8%;
  width: 140px;
  height: 130px;
  background: #bfe3b0;
  border-radius: 18px;
}

.pin {
  position: absolute;
  left: 50%;
  top: 34%;
  font-size: 40px;
  transform: translate(-50%,-100%);
}

.fb {
  position: absolute;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fffe;
  display: grid;
  place-items: center;
  color: var(--bl);
  box-shadow: 0 2px 8px #0003;
  z-index: 3;
}

.sh {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 330px;
  background: #f2f2f7;
  border-radius: 14px 14px 0 0;
  padding: 8px 16px;
  z-index: 4;
  box-shadow: 0 -2px 14px #0003;
}

.sh::before {
  content: "";
  display: block;
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: #c6c6c8;
  margin: 0 auto 10px;
}

.fav {
  display: flex;
  gap: 26px;
  margin: 4px 0 14px;
  font-size: 12px;
  text-align: center;
}

.fav s {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  text-decoration: none;
  font-size: 22px;
  margin-bottom: 4px;
}

/* gmail */
.gs {
  margin: 6px 12px 8px;
  height: 48px;
  border-radius: 24px;
  background: #e9eef6;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  color: #444;
  font-size: 16px;
}

.gs .av {
  margin-left: auto;
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
}

.gm {
  display: flex;
  gap: 14px;
  padding: 10px 16px;
  cursor: pointer;
}

.gm div {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
}

.gm b {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
}

.gm b small {
  font-weight: 400;
  color: #5f6368;
}

.gm p {
  color: #5f6368;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fab {
  position: absolute;
  right: 16px;
  bottom: 100px;
  padding: 15px 20px;
  border-radius: 16px;
  background: #c2e7ff;
  font-size: 15px;
  font-weight: 600;
  z-index: 4;
  box-shadow: 0 3px 10px #0003;
}

/* safari */
.fg {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px 6px;
  padding: 8px 20px;
  text-align: center;
  font-size: 11px;
  color: #555;
}

.fg u {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 5px;
  border-radius: 14px;
  background: #fff;
  font-size: 28px;
  text-decoration: none;
}

.ab {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 78px;
  height: 44px;
  border-radius: 14px;
  background: #e9e9ee;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: #555;
}

/* phone keypad */
.kp {
  display: grid;
  grid-template-columns: repeat(3,78px);
  gap: 14px 24px;
  justify-content: center;
  margin-top: 10px;
}

.kp b {
  height: 78px;
  border-radius: 50%;
  background: #e5e5ea;
  display: grid;
  place-items: center;
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
}

.kp b small {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  color: #333;
  margin-top: -2px;
}

/* messages */
.mh {
  position: relative;
  padding: 52px 0 8px;
  text-align: center;
  background: #f7f7f7f2;
  border-bottom: .5px solid #c6c6c8;
  font-size: 12px;
}

.mh .bk {
  position: absolute;
  left: 14px;
  top: 62px;
  font-size: 36px;
  line-height: 1;
}

.mh .av {
  margin: 0 auto 3px;
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.mh .vd {
  position: absolute;
  right: 16px;
  top: 66px;
  color: var(--bl);
  font-size: 22px;
}

.thr {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.thr small {
  text-align: center;
  color: #8e8e93;
  font-size: 12px;
  margin: 6px 0;
}

.thr small.dl {
  text-align: right;
  margin: 0 4px;
}

.b {
  max-width: 76%;
  padding: 8px 13px;
  border-radius: 19px;
  font-size: 17px;
  line-height: 1.28;
  animation: pop .2s;
}

@keyframes pop {
  from {
    transform: scale(.85);
    opacity: 0;
  }
}

.b.me {
  align-self: flex-end;
  background: #0b84fe;
  color: #fff;
}

.b.them {
  align-self: flex-start;
  background: #e9e9eb;
}

.tp {
  display: flex;
  gap: 4px;
  padding: 13px 14px;
}

.tp i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9a9aa0;
  animation: bl 1s infinite;
}

.tp i:nth-child(2) {
  animation-delay: .2s;
}

.tp i:nth-child(3) {
  animation-delay: .4s;
}

@keyframes bl {
  50% {
    opacity: .3;
  }
}

.ib {
  display: flex;
  gap: 9px;
  align-items: flex-end;
  padding: 8px 10px 8px;
}

.ib>i {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e9e9eb;
  color: #777;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 22px;
}

.fld {
  flex: 1;
  min-height: 34px;
  border: 1px solid #c8c8cc;
  border-radius: 18px;
  padding: 5px 6px 5px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
}

#inp {
  flex: 1;
  word-break: break-word;
}

#inp:empty::before {
  content: "iMessage";
  color: #aaa;
}

#mic {
  color: #8e8e93;
}

#snd {
  display: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bl);
  color: #fff;
  text-align: center;
  line-height: 25px;
  font-size: 17px;
}

.fld.has #snd {
  display: block;
}

.fld.has #mic {
  display: none;
}

#phone.kbu #inp::after {
  content: "";
  border-left: 2px solid var(--bl);
  margin-left: 1px;
  animation: bl 1s infinite;
}

#kb {
  height: 0;
  overflow: hidden;
  background: #d1d4d9;
  transition: height .35s;
}

#kb.up {
  height: 336px;
}

.pr {
  display: flex;
  height: 42px;
  font-size: 16px;
  align-items: center;
  text-align: center;
  border-bottom: .5px solid #b9bcc2;
}

.pr span {
  flex: 1;
  border-right: .5px solid #b9bcc2;
  line-height: 26px;
}

.pr span:last-child {
  border: 0;
}

.kr {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 11px 0 0;
}

.k {
  flex: 0 0 34px;
  height: 43px;
  background: #fff;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-size: 22px;
  box-shadow: 0 1px 0 #898a8d;
}

.k.p {
  background: #bfc3ca;
  transform: translateY(1px);
}

.k.w {
  flex-basis: 44px;
  background: #adb3bc;
  font-size: 17px;
}

.k.sp {
  flex-basis: 196px;
  font-size: 15px;
}

.k.rt {
  flex-basis: 84px;
  font-size: 16px;
  background: #adb3bc;
}

.k.m {
  flex-basis: 58px;
  background: #adb3bc;
  font-size: 16px;
}

.kg {
  display: flex;
  justify-content: space-between;
  padding: 6px 20px;
  font-size: 22px;
  color: #444;
}

/* call */
#call {
  z-index: 70;
  color: #fff;
  text-align: center;
  background: linear-gradient(#323853,#12141d);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

#call.on {
  opacity: 1;
  pointer-events: auto;
}

#call .av {
  width: 72px;
  height: 72px;
  line-height: 72px;
  font-size: 32px;
  margin: 70px auto 8px;
}

#call h2 {
  font-size: 28px;
  font-weight: 500;
}

#cs {
  margin-top: 2px;
  font-size: 16px;
  opacity: .75;
}

#ct {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 222px;
  bottom: 268px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  font-size: 15px;
}

#call.inc #ct {
  display: none;
}

.cm {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 16px;
  line-height: 1.3;
  animation: pop .2s;
}

.cm small {
  display: block;
  font-size: 11px;
  opacity: .7;
  margin-bottom: 1px;
}

.cm.them {
  align-self: flex-start;
  background: rgba(255,255,255,.2);
}

.cm.me {
  align-self: flex-end;
  background: rgba(10,132,254,.75);
}

#cin,#cact {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 70px;
}

#cin {
  display: none;
  justify-content: space-around;
  padding: 0 50px;
  bottom: 110px;
}

#call.inc #cin {
  display: flex;
}

#cin div {
  display: grid;
  gap: 10px;
  font-size: 14px;
}

#cact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

#call.inc #cact {
  display: none;
}

.cb {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 30px;
  cursor: pointer;
  margin: auto;
}

.cb.r {
  background: #ff3b30;
}

.cb.g {
  background: #34c759;
}

#cact .cb.r {
  transform: rotate(135deg);
}

.cg {
  display: grid;
  grid-template-columns: repeat(3,62px);
  gap: 14px 26px;
  font-size: 22px;
}

.cg i {
  height: 62px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  display: grid;
  place-items: center;
  font-style: normal;
}

/* ===== iOS POLISH: menimpa gaya di atas ===== */
body {
  height: 100vh;
  height: 100dvh;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter",system-ui,sans-serif;
}

#phone {
  letter-spacing: -.025em;
  --ease: cubic-bezier(.32,.72,0,1);
}

.io {
  display: inline-flex;
  width: 1em;
  height: 1em;
  vertical-align: -.15em;
  flex: none;
}

.io svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.bk,.nv b,.nv span {
  display: inline-flex;
  align-items: center;
}

.bk .io {
  font-size: 26px;
  margin-left: -6px;
  margin-right: 2px;
}

.nv>b .io,.nv>span .io {
  font-size: 24px;
}

.nv span[style*="22px"] {
  gap: 18px;
}

.srch .io {
  font-size: 16px;
  color: #8e8e93;
}

.srch {
  cursor: text;
}

/* press + hover states */
.ic u {
  transition: transform .2s var(--ease),filter .2s;
  border-radius: 22.4%;
}

.ic:active u {
  transform: scale(.9);
  filter: brightness(.75);
}

.li,.nr,.gm {
  transition: background .3s;
}

.li:active,.nr:active,.gm:active {
  background: #d1d1d6;
  transition: none;
}

.bk,.tb>*,.fb,.fab,.cb,.qb,#pbot span,.pa span {
  cursor: pointer;
  transition: opacity .2s,transform .2s;
}

.bk:active,.tb>*:active,.fb:active,.pa span:active {
  opacity: .35;
}

@media(hover:hover) {
  .ic:hover u {
    filter: brightness(1.1);
  }
  .li:hover,.nr:hover,.gm:hover {
    background: #0000000a;
  }
  .tb>*:hover,.bk:hover {
    opacity: .7;
  }
  .fab:hover {
    box-shadow: 0 2px 6px #0004,0 6px 14px 4px #00000018;
  }
}

/* app open/close: zoom from icon */
.app {
  transform: scale(.14);
  border-radius: 50px;
  overflow: hidden;
  transition: transform .45s var(--ease),opacity .22s,border-radius .45s var(--ease);
}

.app.open {
  transform: none;
  border-radius: 0;
}

#home {
  transition: transform .45s var(--ease),filter .45s;
}

#phone.inapp #home {
  transform: scale(.92);
  filter: blur(6px);
}

@media(prefers-reduced-motion:reduce) {
  .app,#home {
    transition-duration: .01s;
  }
}

/* home */
.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  bottom: 118px;
}

.dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff6;
}

.dots i.on {
  background: #fff;
}

/* lock */
#ld {
  margin-top: 84px;
  font-size: 21px;
  font-weight: 600;
  opacity: .85;
}

#lt {
  font-family: ui-rounded,"SF Pro Rounded",-apple-system,sans-serif;
  font-size: 100px;
  font-weight: 700;
  letter-spacing: -1px;
  color: #ffffffd9;
}

.qb {
  width: 52px;
  height: 52px;
  background: #0005;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: 23px;
}

.qb:active {
  transform: scale(.9);
}

#pad b {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  line-height: 1;
  transition: background .4s;
}

#pad b small {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  margin: 3px -2px 0 0;
  height: 12px;
}

#pad b:active {
  transition: none;
  background: #ffffff80;
}

/* lists */
.ttl {
  letter-spacing: .37px;
}

.li {
  position: relative;
  border: 0;
  min-height: 44px;
}

.li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 0;
  bottom: 0;
  border-bottom: .5px solid #c6c6c8;
}

.li:has(s):not(:last-child)::after {
  left: 58px;
}

.li s .io {
  font-size: 18px;
}

.li em {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.li em .io {
  font-size: 14px;
  color: #c4c4c7;
}

.nr small {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* tab bars */
.tb {
  background: #f9f9f9d9;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  font-weight: 500;
}

.tb>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 56px;
}

.tb i {
  font-size: 25px;
  line-height: 1;
  margin: 0;
}

.tb i .io {
  vertical-align: top;
}

.tb>b,.tb>span {
  display: inline-flex;
}

.tb b .io {
  font-size: 24px;
}

.tb>span {
  font-size: 26px;
}

.tb>span .io {
  font-size: 26px;
}

#app-insta .tb {
  color: #000;
}

/* messages list */
#ml .gm {
  position: relative;
  padding: 10px 16px 10px 28px;
  align-items: center;
  min-height: 72px;
}

#ml .gm::after {
  content: "";
  position: absolute;
  left: 76px;
  right: 0;
  bottom: 0;
  border-bottom: .5px solid #c6c6c8;
}

#ml .ud {
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bl);
}

#ml .gm b {
  font-size: 17px;
}

#ml .gm small {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
}

#ml small .io {
  font-size: 12px;
  color: #c4c4c7;
}

#ml .gm p {
  font-size: 15px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* chat */
.mh {
  padding: 50px 0 8px;
  background: #f7f7f7d9;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  font-size: 11px;
  color: #000;
  z-index: 2;
}

.mh .bk {
  left: 8px;
  top: 60px;
  color: var(--bl);
  display: inline-flex;
}

.mh .bk .io {
  font-size: 30px;
}

.mh .av {
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin: 0 auto 4px;
}

#mname {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

#mname .io {
  font-size: 9px;
  color: #8e8e93;
}

.mh .vd {
  right: 16px;
  top: 64px;
  font-size: 26px;
  display: inline-flex;
}

.thr {
  padding: 12px 14px 6px;
  gap: 2px;
  background: #fff;
}

.thr>small:first-child {
  font-size: 11px;
  line-height: 1.35;
  margin: 4px 0 8px;
}

.thr small.dl {
  font-size: 11px;
  font-weight: 500;
}

.b {
  position: relative;
  isolation: isolate;
  max-width: 75%;
  padding: 7px 12px 8px;
  border-radius: 18px;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.b.me+.b.them,.b.them+.b.me,.dl+.b {
  margin-top: 7px;
}

.b.tail::before,.b.tail::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 18px;
  z-index: -1;
}

.b.me.tail::before {
  right: -7px;
  width: 20px;
  background: #0b84fe;
  border-bottom-left-radius: 16px 14px;
}

.b.me.tail::after {
  right: -26px;
  width: 26px;
  background: #fff;
  border-bottom-left-radius: 10px;
}

.b.them.tail::before {
  left: -7px;
  width: 20px;
  background: #e9e9eb;
  border-bottom-right-radius: 16px 14px;
}

.b.them.tail::after {
  left: -26px;
  width: 26px;
  background: #fff;
  border-bottom-right-radius: 10px;
}

.ib {
  padding: 8px 10px 10px;
  gap: 8px;
  background: #fff;
}

.ib>i {
  width: 34px;
  height: 34px;
  background: #e9e9eb;
  color: #6c6c70;
  font-size: 20px;
  cursor: pointer;
}

.fld {
  min-height: 36px;
  border-radius: 19px;
  padding: 4px 5px 4px 14px;
}

#mic {
  font-size: 20px;
  display: inline-flex;
}

#snd {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
  place-items: center;
}

.fld.has #snd {
  display: grid;
}

/* keyboard */
#kb {
  background: #d2d5db;
}

.pr {
  height: 40px;
  border-bottom: 0;
}

.kr {
  gap: 6px;
  padding: 0 3px;
}

#keys .kr:nth-child(2) {
  padding: 0 21px;
}

.kr>span {
  display: none;
}

.k {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 43px;
  cursor: pointer;
  box-shadow: 0 1px 0 #8a8c91;
}

.k.w {
  flex: 1.45;
  background: #adb3bc;
  font-size: 20px;
}

.k.w .io {
  font-size: 21px;
}

.k.m {
  flex: 1.35;
}

.k.sp {
  flex: 5;
}

.k.rt {
  flex: 2;
}

.k.p {
  background: #fff;
  transform: none;
}

.k.p[data-k]:not(.sp)::after {
  content: attr(data-k);
  position: absolute;
  bottom: calc(100% - 4px);
  left: -6px;
  right: -6px;
  height: 54px;
  background: #fff;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 34px;
  box-shadow: 0 2px 6px #0004;
  z-index: 5;
}

.kg .io {
  font-size: 24px;
}

.kg {
  align-items: center;
}

/* gmail (material) */
.gm>.av {
  flex: none;
}

.gm>div:not(.av) {
  flex: 1;
  min-width: 0;
}

.gm {
  align-items: flex-start;
}

.gm .av {
  margin-top: 2px;
}

.gs {
  height: 50px;
  gap: 12px;
}

.gs .io {
  font-size: 22px;
}

.fab {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #001d35;
  font-weight: 500;
  padding: 16px 20px;
  box-shadow: 0 1px 3px #0003,0 4px 8px 3px #00000014;
}

.fab:active {
  transform: scale(.96);
}

.fab .io {
  font-size: 22px;
}

#app-gmail .tb {
  background: #f0f4f9;
  border-top: 0;
  color: #444746;
  height: 82px;
}

#app-gmail .tb .a {
  color: #041e49;
}

#app-gmail .tb .a i {
  background: #d3e3fd;
  border-radius: 16px;
  padding: 4px 20px;
  box-sizing: content-box;
}

/* instagram */
.pa {
  font-size: 26px;
  gap: 16px;
  color: #000;
}

.pa span {
  display: inline-flex;
}

.pa .lk {
  color: #ff3040;
}

.pa .lk svg {
  animation: pop .25s;
}

/* maps / safari / call */
.pin {
  font-size: 44px;
  color: #ff3b30;
  display: flex;
  filter: drop-shadow(0 2px 3px #0005);
}

.fb {
  font-size: 22px;
  border-radius: 10px;
}

.fb:active {
  background: #e5e5ea;
}

.fav s {
  color: var(--bl);
  font-size: 24px;
}

.fg u {
  border-radius: 22.4%;
  font-size: 30px;
  box-shadow: 0 1px 2px #0001;
}

.ab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ab .io {
  font-size: 15px;
}

.cb {
  font-size: 32px;
}

.cb:active {
  opacity: .7;
}

.cg div {
  display: grid;
  justify-items: center;
  gap: 7px;
  font-size: 13px;
}

.cg i {
  font-size: 28px;
}

/* font */
.ttl {
  letter-spacing: .012em;
}

.tb,.tb *,small,.seg,.fav,.sto,.mc,.cal b,#pad b small,.k,.ph {
  letter-spacing: .01em;
}

.k {
  letter-spacing: 0;
}

#lt {
  letter-spacing: -.02em;
}

/* ekor bubble */
.b.tail::before,.b.tail::after {
  height: 14px;
}

.b.me.tail::before {
  right: -5px;
  width: 15px;
  border-bottom-left-radius: 12px 10px;
}

.b.me.tail::after {
  right: -20px;
  width: 20px;
  border-bottom-left-radius: 8px;
}

.b.them.tail::before {
  left: -5px;
  width: 15px;
  border-bottom-right-radius: 12px 10px;
}

.b.them.tail::after {
  left: -20px;
  width: 20px;
  border-bottom-right-radius: 8px;
}

/* tombol senter/kamera lockscreen naik */
.qb {
  bottom: 86px;
}

#notif,.nf {
  bottom: 156px;
}

/* input bar naik di atas home indicator. pas keyboard muncul, rapat ke keyboard */
.ib {
  padding-bottom: 34px;
  transition: padding .3s;
}

#phone.kbu .ib {
  padding-bottom: 8px;
}

.thr {
  overflow-x: hidden;
}

.thr::-webkit-scrollbar,.v::-webkit-scrollbar {
  display: none;
}

.thr,.v {
  scrollbar-width: none;
}

/* ---- call screen: layout flex + icon bulat ---- */
#call {
  display: flex;
  flex-direction: column;
}

#call .av {
  flex: none;
}

#ct {
  position: static;
  flex: 1;
  min-height: 0;
  margin: 14px 14px 0;
  overflow: hidden;
  justify-content: flex-start;
}

#cact {
  position: static;
  flex: none;
  margin-bottom: 64px;
  padding-top: 10px;
}

.cg {
  grid-template-columns: repeat(3,72px);
  gap: 16px 18px;
}

.cg i {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  flex: none;
}

.cm {
  max-height: 140px;
  transition: opacity .3s,transform .35s,max-height .35s,padding .35s,margin .35s;
}

.cm.out {
  opacity: 0;
  transform: translateY(-26px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: -3px 0;
  overflow: hidden;
}

/* ---- banner notifikasi ---- */
#banner {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 60px;
  z-index: 88;
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 26px;
  background: #f6f6f6e0;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  color: #000;
  box-shadow: 0 6px 24px #0003;
  transform: translateY(-140%);
  opacity: 0;
  transition: transform .5s var(--ease),opacity .3s;
  cursor: pointer;
  pointer-events: none;
}

#banner.in {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

#banner u {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: block;
}

#banner u svg {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

#banner p {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 1.25;
}

#banner p b,#banner p span {
  display: block;
}

#banner p span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333;
}

#banner small {
  align-self: flex-start;
  color: #6c6c70;
  font-size: 13px;
}

#lock,#bar {
  touch-action: none;
}

.cb .io {
  display: block;
}

.cb {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== lock ===== */
#lock {
  transition: transform .55s var(--ease);
}

#lock.drag {
  transition: none;
}

#lock.up,#lock.gone {
  transform: translateY(-100%);
  opacity: 1;
}

#lock.gone {
  pointer-events: none;
}

#pass {
  z-index: 45;
  opacity: 1;
  transition: transform .55s var(--ease);
}

#pass>* {
  opacity: var(--p,0);
  transition: opacity .3s;
}

#pass.show>* {
  opacity: 1;
}

#pass.out {
  transform: translateY(-100%);
  pointer-events: none;
}

#pass.out>* {
  opacity: 0;
}

#phone.locked #home {
  transform: scale(.92);
}

/* ===== Instagram (apdet) ===== */
.ih {
  padding: 0 16px;
}

.ih .io {
  font-size: 27px;
  color: #000;
}

.ih .ig {
  font-size: 29px;
}

.sto div:first-child i {
  background: none;
  position: relative;
}

.sto div:first-child i::after {
  content: "+";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0095f6;
  border: 2.5px solid #fff;
  color: #fff;
  font-size: 17px;
  line-height: 16px;
  text-align: center;
  font-weight: 600;
}

.pim {
  height: 491px;
}

.pa {
  padding: 12px 14px 6px;
  gap: 17px;
}

.itb {
  display: none;
  background: #fff;
  border-top: .5px solid #dbdbdb;
  height: 84px;
  padding-top: 10px;
  color: #000;
  justify-content: space-around;
  align-items: flex-start;
}

.itb>span {
  display: inline-flex;
}

.itb .io {
  font-size: 27px;
}

.pav {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background-size: cover;
  background-color: #9aa;
  border: 1.5px solid #000;
  display: block;
}

.eb2 {
  display: flex;
  gap: 6px;
  margin: 0 16px 12px;
}

.eb2 div {
  flex: 1;
  height: 32px;
  border-radius: 8px;
  background: #efefef;
  font-weight: 600;
  font-size: 14px;
  display: grid;
  place-items: center;
}

.eb2 div:last-child {
  flex: none;
  width: 40px;
}

.eb2 .io {
  font-size: 18px;
}

.hl {
  display: flex;
  gap: 14px;
  padding: 0 16px 12px;
  font-size: 12px;
  text-align: center;
}

.hl div {
  width: 64px;
}

.hl i {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid #dbdbdb;
  background-size: cover;
  margin-bottom: 4px;
}

.pts {
  display: flex;
  border-bottom: .5px solid #dbdbdb;
}

.pts span {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 24px;
  color: #8e8e93;
}

.pts .a {
  color: #000;
  border-bottom: 1.5px solid #000;
}

.ig3 {
  gap: 1px;
}

.ig3 .ti {
  aspect-ratio: 3/4;
}

/* ===== Photos (apdet) ===== */
.phh {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 8px;
  height: 50px;
}

.phh b {
  font-size: 30px;
  margin-right: auto;
}

.phh .sl {
  font-size: 15px;
  font-weight: 500;
  background: #7676801f;
  padding: 6px 14px;
  border-radius: 16px;
}

.phh .av {
  width: 34px;
  height: 34px;
  line-height: 34px;
}

#app-photos .pg {
  gap: 1.5px;
}

.pc h3 {
  font-size: 20px;
  font-weight: 700;
  padding: 24px 16px 8px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.pc h3 .io {
  font-size: 15px;
  color: #c4c4c7;
}

.hs {
  display: flex;
  gap: 10px;
  padding: 0 16px;
  overflow: hidden;
}

.hs div {
  flex: none;
  font-size: 13px;
  font-weight: 600;
}

.hs i {
  display: block;
  border-radius: 12px;
  background-size: cover;
  margin-bottom: 5px;
}

.hs small {
  display: block;
  color: #8e8e93;
  font-weight: 400;
  font-size: 12px;
}

.pc .grp {
  background: #f2f2f7;
  margin-top: 2px;
}

.pc .li {
  background: #f2f2f7;
}

.seg {
  left: 50%;
  transform: translateX(-50%);
  bottom: 34px;
}

.sbtn {
  position: absolute;
  right: 16px;
  bottom: 34px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f2f2f7f0;
  box-shadow: 0 2px 12px #0002;
  z-index: 6;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #000;
}

/* ===== Notes (apdet) ===== */
#n-list .sec {
  padding-top: 10px;
}

.nr {
  padding: 10px 16px 11px;
}

.nr b {
  font-size: 16px;
}

.nr p {
  font-size: 14px;
}

/* Emergency/Cancel */
#pbot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 56px;
  padding: 0 44px;
}

/* ukuran pas layar */
html,body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

#phone.full {
  left: 0;
  top: 0;
  transform: scale(var(--s,1));
  transform-origin: 0 0;
}

/* thread chat */
.thr {
  display: none;
}

.thr.on {
  display: flex;
}

/* ===== DARK THEME ===== */
#home.wp,#lock.wp{background-color:#000;background-image:var(--wh);background-size:contain;background-repeat:no-repeat;background-position:center}
#lock.wp{background-image:var(--wl)}
#lock.gone{background-image:none;background-color:rgba(0,0,0,.35)}
#pass{background:#000;overflow:hidden}
#pass::before{content:"";position:absolute;inset:-40px;z-index:-1;background-image:var(--wl);background-size:contain;background-repeat:no-repeat;background-position:center;filter:blur(24px) brightness(.75)}
#home .ic{color:#111;text-shadow:none}
#app-messages,#app-messages .v,#app-messages .thr,#app-messages .ib{background:#000;color:#fff}
#app-messages .ttl,#app-messages .nv b,#app-messages #mname,#app-messages #ml .gm b,#app-messages .gm b{color:#fff}
#app-messages .srch{background:#7676803d;color:#98989d}
#app-messages .gm p,#app-messages .gm b small,#app-messages #ml .gm p,#app-messages #ml .gm small{color:#98989d}
#app-messages #ml .gm::after{border-bottom-color:#38383a}
#app-messages #ml small .io{color:#5a5a5e}
#app-messages .gm:active,#app-messages .gm:hover{background:#1c1c1e}
#app-messages .thr small{color:#8e8e93}
#app-messages .b.me,#app-messages .b.me.tail::before{background:#0a84ff;color:#fff}
#app-messages .b.them,#app-messages .b.them.tail::before{background:#262628;color:#fff}
#app-messages .b.me.tail::after,#app-messages .b.them.tail::after{background:#000}
#app-messages .ib>i{background:#1c1c1e;color:#98989d}
#app-messages #fld{background:#000;border-color:#3a3a3c;color:#fff}
#app-messages #inp{color:#fff}
#app-messages #inp:empty::before{color:#636366}
#app-messages #kb{background:#1c1c1e}
#app-messages .pr{border-color:#38383a;color:#fff}
#app-messages .pr span{border-color:#38383a;color:#fff}
#app-messages .k{background:#5c5c5f;color:#fff;box-shadow:0 1px 0 #000a}
#app-messages .k.w{background:#3c3c3f}
#app-messages .k.p{background:#8a8a8e}
#app-messages .k.p[data-k]:not(.sp)::after{background:#6c6c70;color:#fff}
#app-messages .kg{color:#fff}
.b.im,.b.loc{padding:3px}
.b.im::before,.b.im::after,.b.loc::before,.b.loc::after{display:none}
.b.im i{display:block;width:210px;height:260px;border-radius:15px;background-size:cover;background-position:center;background-color:#555}
.b.loc .mp{position:relative;width:210px;height:120px;border-radius:15px;background:linear-gradient(90deg,transparent 48%,#fffa 48% 52%,transparent 52%),linear-gradient(0deg,transparent 45%,#fffa 45% 50%,transparent 50%),#9bc59d}
.b.loc .mp::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-14px 0 0 -7px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#e5413a}
.b.loc span{display:block;padding:6px 8px 3px;font-size:15px}
.b .sn{display:block;font-size:12px;font-weight:600;opacity:.9;margin-bottom:2px}
.sys{text-align:center;font-size:12px;color:#8e8e93;margin:10px 0 4px}
#dlg{position:absolute;inset:0;z-index:95;background:#0008;display:none;align-items:center;justify-content:center}
#dlg.on{display:flex}
#dlg .bx{width:270px;background:#2c2c2e;color:#fff;border-radius:14px;text-align:center;overflow:hidden;font:15px -apple-system,Helvetica,Arial,sans-serif}
#dlg b{display:block;padding:18px 16px 4px;font-size:17px}
#dlg p{padding:0 16px 16px;font-size:13px;margin:0}
#dlg .bt{display:flex;border-top:.5px solid #545458}
#dlg .bt div{flex:1;padding:12px;color:#0a84ff;border-left:.5px solid #545458;cursor:pointer}
#dlg .bt div:first-child{border-left:0}
#dlg .bt div.dis{opacity:.4;cursor:default}
#vcs{position:absolute;inset:0;z-index:90;background:#000;display:none;color:#fff;text-align:center}
#vcs.on{display:block}
#vcs video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
#vcs.live video{display:block}
#vcs .vi{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding-top:150px;background:linear-gradient(#1c1c1e,#000)}
#vcs.live .vi{display:none}
#vcs .vi .av{width:110px;height:110px;border-radius:50%;background:#8d94a3 center/cover}
#vcs .vi h2{margin:18px 0 4px;font-size:30px;font-weight:500}
#vcs .vb{position:absolute;bottom:90px;left:0;right:0;display:flex;justify-content:space-around;font-size:13px}
#endsc{position:absolute;inset:0;z-index:120;background:#000;display:none;align-items:center;justify-content:center;text-align:center;padding:0 30px}
#endsc.on{display:flex}
#endsc p{color:#d40000;font:22px/1.7 Georgia,"Times New Roman",serif;letter-spacing:.5px;margin:0}

/* header chat */
#app-messages .mh{background:rgba(28,28,30,.88);color:#fff;font-size:13px}
#app-messages #mname{font-size:13px;font-weight:500;color:#fff}
#app-messages #mname .io{font-size:10px}

#home.wp{background-color:#f6f6f6}
#sb .net{font-size:12px;font-weight:600;letter-spacing:-.3px;margin:0 1px}

/* ===== NIGHT THEME apk lain ===== */
.app:not(#app-messages){filter:invert(1) hue-rotate(180deg)}
.app:not(#app-messages) img,.app:not(#app-messages) video,.app:not(#app-messages) [style*="url("],.app:not(#app-messages) [style*="gradient("]{filter:invert(1) hue-rotate(180deg)}


/* ===== Elemen tanpa halaman gabisa dipencet ===== */
#app-files .li:not([onclick]),#app-photos .pc .li,#app-maps .li,#app-set .li,#app-maps .fb,#app-maps .fav,#app-maps .srch,
#app-files .tb>div:not([onclick]),#app-gmail .tb>div:not([onclick]),#app-gmail .gs,#app-gmail .fab,#app-cal .tb>b,#app-phone .tb>div:not([onclick]),
#app-safari .tb>span,#app-safari .ab,#app-insta .itb>span:not([onclick]),#app-insta .ih .io,#app-insta .eb2>div,#app-insta .pts span,
#app-insta .pa span:not([onclick]),#app-photos .phh .sl,#app-photos .seg,.srch{pointer-events:none}
#fpc{padding:10px 0}#fpc video{width:100%;max-height:560px;background:#000;border-radius:10px}
.gx-aud{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:40px}
.gx-aud .gx-cov{width:230px;height:230px;border-radius:18px;background:linear-gradient(135deg,#7560a5,#581f48);display:grid;place-items:center;font-size:90px;color:#000}
.gx-aud b{font-size:20px}.gx-aud audio{width:88%}
#app-gmail,#app-gmail .v{background:#dddee1;color:#131518}
#app-gmail .gs{background:#cdced1;color:#3b3f44}
#app-gmail .gm b small,#app-gmail .gm p{color:#5b6167}
#app-gmail .gm b{color:#131518}#app-gmail .gm:active{background:#d0d1d3}
#app-gmail .fab{background:#84cefb;color:#00243c}
#app-gmail .tb{background:#d5d6d9;border-color:#bcc0c3;color:#5b6167}#app-gmail .tb .a{color:#00243c}
#app-gmail>div:first-child{color:#5b6167}
.gx-ga{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:20px;color:#000;overflow:hidden}.gx-ga svg{width:100%;height:100%}
.gx-gt{display:flex;align-items:center;gap:22px;padding:0 16px;height:46px;color:#3b3f44;font-size:24px}.gx-gt i{flex:1}.gx-gt svg{width:24px;height:24px}
.gx-gsub{padding:10px 16px 4px;font-size:21px;line-height:1.45;position:relative;padding-right:46px}
.gx-inb{font-size:12px;border:1px solid #999da2;border-radius:5px;padding:1px 6px;margin-left:8px;color:#3b3f44;vertical-align:middle}
.gx-gsub em{position:absolute;right:16px;top:20px;color:#3b3f44}.gx-gsub em svg{width:24px;height:24px}
.gx-gfr{display:flex;gap:12px;align-items:flex-start;padding:14px 16px}.gx-gfr>div:nth-child(2){flex:1;min-width:0;font-size:14px;line-height:1.5}.gx-gfr small{color:#5b6167;font-size:13px;margin-left:4px}
.gx-gact{display:flex;gap:16px;align-items:center;color:#3b3f44}.gx-gact svg{width:21px;height:21px}.gx-gact u{color:#295397;text-decoration:none;font-size:14px}
.gx-gbd{padding:6px 16px 120px;font-size:14px;line-height:1.5;color:#3b3f44}
.gx-mb1{background:#d0d1d3;padding:22px}.gx-mc{background:#dddee1;border-radius:12px;padding:34px 20px}.gx-mc h2{text-align:center;font-size:28px;line-height:1.2;color:#383838;margin-bottom:22px}.gx-mc p{margin:12px 0}.gx-mc a,.gx-dcb a{color:#295397;text-decoration:underline}
.gx-mdh{background:#000;color:#fff;font:700 34px/1 Georgia,serif;padding:34px 18px;letter-spacing:-1px}
.gx-mda{display:flex;gap:14px;align-items:center;padding:26px 18px}.gx-mda i{width:62px;height:62px;border-radius:50%;background-size:cover;background-position:center;background-color:#555;flex:none}
.gx-mdt{width:calc(100% - 36px);margin:0 18px;border-collapse:collapse;text-align:center}.gx-mdt td{border:1px solid #131518;padding:22px 4px;color:#5b6167;background:#dadcde}.gx-mdt b{display:block;font-size:28px;font-weight:400;color:#131518;margin-top:8px}
.gx-dc{background:#d8d9dd;border-radius:10px 10px 0 0}.gx-dch{display:flex;justify-content:center;align-items:center;gap:8px;padding:40px 0;color:#7e8bff;font-size:26px}.gx-dcb{padding:34px 22px 24px;background:#dddee1}.gx-dcb h3{font-size:24px;margin-bottom:18px;color:#383838}.gx-dcb p{margin:14px 0}
.gx-vbtn{width:150px;margin:26px auto 10px;text-align:center;background:#6670e2;color:#fff;padding:15px 0;border-radius:4px;font-size:16px}
.gx-att{display:inline-flex;align-items:center;gap:10px;margin-top:14px;border:1px solid #999da2;border-radius:12px;padding:10px 14px;color:#131518;font-size:13px}.gx-att b{background:#ff7769;color:#000;font-size:10px;padding:5px 6px;border-radius:4px}

.gm .gx-ga{flex:none;width:40px;height:40px}

#app-gmail .gm b small{white-space:nowrap}
.pts span{height:44px;padding:0;display:flex;align-items:center;justify-content:center}.pts span svg{width:24px;height:24px}

/* ===== VIDEO CALL ===== */
#vcs .vt,#vcs .vself,#vcs .vctl{display:none}
#vcs.live .vt,#vcs.live .vself,#vcs.live .vctl{display:flex}
#vcs.black video,#vcs.black .vt,#vcs.black .vself,#vcs.black .vctl{display:none}
#vcs .vt{position:absolute;top:62px;left:0;right:0;flex-direction:column;align-items:center;text-shadow:0 1px 6px #0009}
#vcs .vt b{font-size:17px;font-weight:600}#vcs .vt small{font-size:13px;opacity:.85}
#vcs .vself{position:absolute;right:16px;bottom:150px;width:104px;height:150px;border-radius:20px;background:#8d94a3 center/cover;box-shadow:0 6px 20px #0008,inset 0 0 0 1px #fff3}
#vcs .vctl{position:absolute;left:16px;right:16px;bottom:36px;height:74px;border-radius:37px;align-items:center;justify-content:space-around;padding:0 12px;background:rgba(60,60,67,.5);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 0 0 .5px #fff3}
#vcs .vctl b{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:26px;background:rgba(255,255,255,.18);pointer-events:none}
#vcs .vctl b.r{background:#ff3b30}#vcs .vctl b.r .io{transform:rotate(135deg)}

/* ===== galeri foto geser ===== */
#pimg{position:relative;overflow:hidden;background:#fff;touch-action:none;cursor:grab}
#ptrack{position:absolute;inset:0;will-change:transform}
.ps{position:absolute;top:0;bottom:0;width:100%;background-size:contain;background-position:center;background-repeat:no-repeat}
#ps0{left:-100%}#ps1{left:0}#ps2{left:100%}

/* kursor */
#phone.kbu #inp:empty{position:relative}
#phone.kbu #inp:empty::before{margin-left:3px}
#phone.kbu #inp:empty::after{content:"";position:absolute;left:0;top:50%;height:1.2em;transform:translateY(-50%);margin:0;border-left:2px solid var(--bl);animation:bl 1s infinite}