*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at center,#1d1d28,#08090e 70%);font:15px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#fff}.outside{min-height:100dvh;display:flex;flex-direction:column;align-items:center;gap:15px;padding:23px 12px}.heading{text-align:center}.heading small{letter-spacing:3px;font-size:10px;color:#bfa5ad}.heading h1{font-size:20px;letter-spacing:3px;margin:8px 0 3px}.heading p{font-size:12px;color:#8f929c;margin:0 0 12px}.subtle{background:#1d1e27;border:1px solid #34313c;color:#eee;padding:8px 13px;border-radius:16px;margin:0 2px;cursor:pointer}.device{width:393px;height:852px;max-width:calc(100vw - 18px);max-height:calc(100dvh - 190px);min-height:580px;position:relative;overflow:hidden;border:6px solid #26262c;border-radius:47px;background:#07080c;box-shadow:0 0 0 2px #4b4b53,0 28px 90px #000c}.island{position:absolute;width:116px;height:30px;border-radius:20px;background:#000;top:9px;left:50%;transform:translateX(-50%);z-index:100}.status{position:absolute;top:17px;left:32px;right:24px;display:flex;justify-content:space-between;font-weight:700;font-size:13px;z-index:90;pointer-events:none}.screen{position:absolute;inset:0;padding-top:52px}.hidden{display:none!important}.lock,.home{background:radial-gradient(ellipse at 50% 83%,#531922a6,transparent 52%),linear-gradient(155deg,#05070c,#16101b 60%,#040508)}.lock{text-align:center}.lockdate{margin-top:69px;letter-spacing:1.3px;color:#c9c6c9;font-size:10px}.locktime{font-size:94px;font-weight:200;letter-spacing:-5px}.lockhint{font-size:12px;letter-spacing:4px;color:#746c79;margin-top:5px}.locknotify{position:absolute;top:50%;left:17px;right:17px;text-align:left;background:#54505b8a;backdrop-filter:blur(25px);border:1px solid #fff2;border-radius:17px;padding:13px 16px;font-size:11px;letter-spacing:1px}.locknotify span{float:right;color:#bbb}.locknotify p{letter-spacing:0;font-size:15px;margin:8px 0 0}.unlock{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);background:none;border:0;color:white;font-size:14px;cursor:pointer;white-space:nowrap}.home{padding:90px 23px 0}.homeTop small{font-size:10px;color:#aaa;letter-spacing:1px}.homeTop h2{font-size:28px;font-weight:500;margin:13px 0 5px}.homeTop p{color:#b7aeb8;margin:0 0 50px;font-size:13px}.icons{display:grid;grid-template-columns:repeat(4,1fr);gap:25px 8px}.icons button{background:none;border:0;color:white;font-size:11px;position:relative;cursor:pointer;display:flex;align-items:center;flex-direction:column;gap:7px}.appicon{height:59px;width:59px;border-radius:15px;display:grid;place-items:center;font-size:29px;box-shadow:0 4px 16px #0004}.green{background:#2ab15e}.color{background:conic-gradient(#fdd868,#ed5b5b,#be6bc4,#5ab3d9,#92c963,#fdd868)}.yellow{background:linear-gradient(#f6c952 25%,#e8e8e8 25%);color:#2b2b2b}.pale{background:#efefef;color:#b51b30}.gray{background:#555967}#unread{position:absolute;right:4px;top:-7px;background:#cd2848;border-radius:12px;padding:3px 7px;font-size:10px}.dock{display:flex;justify-content:space-around;align-items:center;position:absolute;bottom:32px;left:16px;right:16px;height:78px;background:#ffffff1c;border:1px solid #ffffff18;border-radius:28px;backdrop-filter:blur(12px)}.dock button{background:#239a52;border:0;border-radius:15px;color:white;width:55px;height:55px;font-size:27px;cursor:pointer}.dock button:nth-child(3){background:#7e4d7c}.homebar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:127px;height:5px;border-radius:5px;background:#fff;z-index:95;cursor:pointer}.toast{position:absolute;top:60px;left:15px;right:15px;background:#3a303dee;z-index:20;border-radius:14px;padding:15px;cursor:pointer;font-size:14px}.app{background:#101115}.app header{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #292a32}.app header button{border:0;background:none;color:#86aafc;font-size:15px;cursor:pointer}.app header span{color:#aaa}.appBody{height:calc(100% - 75px);overflow:auto;padding:18px}.sectionTitle{font-size:28px;margin:8px 0 20px}.listItem{border-bottom:1px solid #292b32;padding:16px 8px;display:flex;gap:14px;align-items:center;cursor:pointer}.avatar{width:44px;height:44px;border-radius:50%;background:#49434d;display:grid;place-items:center;flex-shrink:0;font-size:18px}.listItem strong{display:block;margin-bottom:3px}.listItem small,.muted{color:#a2a0a9}.thread{display:flex;flex-direction:column;gap:11px;padding:7px 0 70px}.bubble{max-width:84%;padding:11px 14px;border-radius:18px;line-height:1.45;word-break:break-word}.bubble.theirs{background:#303039;align-self:flex-start}.bubble.mine{background:#225bb6;align-self:flex-end}.timestamp{text-align:center;color:#96949f;font-size:11px;margin:10px}.photoCard{border:1px solid #514250;padding:19px 14px;margin:15px 0;border-radius:15px;background:linear-gradient(140deg,#1d202c,#08090c);cursor:pointer}.photoCard .mockPhoto{height:155px;background:linear-gradient(160deg,#080a0c 18%,#41444a 50%,#161419 80%);border-radius:8px;display:flex;align-items:flex-end;justify-content:center;padding:15px;color:#afabb1;letter-spacing:3px;font-size:12px}.photoCard p{color:#bbb;font-size:12px}.call{background:radial-gradient(ellipse at top,#4a344a,#10131f 65%);text-align:center}.callAvatar{margin:95px auto 12px;background:#746271;width:90px;height:90px;border-radius:50%;display:grid;place-items:center;font-size:38px}.call h2{font-size:31px;font-weight:500;margin:0}.call p{color:#d1c7d4}.callActions{position:absolute;bottom:100px;left:30px;right:30px;display:flex;justify-content:space-around}.callActions button{border:0;border-radius:50%;width:72px;height:72px;color:#fff;font-size:28px;cursor:pointer}.callActions button small{display:block;font-size:11px;margin-top:20px}.red{background:#d6344a}.callActions .gray{background:#5d6475}.callConversation{position:absolute;left:22px;right:22px;top:330px;bottom:225px;overflow:auto;text-align:left;line-height:1.5;color:#f2eaf0;background:#fff1;border-radius:15px;padding:15px}.overlay{background:#08080beF;z-index:80;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;text-align:center;padding:35px}.overlay #horrorText{font-size:20px;line-height:1.7;white-space:pre-line}.overlay button{background:#5a1828;color:white;border:1px solid #a94b60;border-radius:20px;padding:12px 26px;cursor:pointer}.under{font-size:11px;color:#85838e;text-align:center;max-width:420px;margin:0}@media(max-width:600px){.outside{padding:0;gap:0}.heading{display:none}.device{width:100vw;max-width:none;height:100dvh;max-height:none;min-height:0;border:0;border-radius:0;box-shadow:none}.under{display:none}.homebar{bottom:11px}}@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}.shake{animation:shake .4s}

/* v2: faithful mobile-frame proportions, native-looking lock screen */
.outside{min-height:100dvh;height:100dvh;padding:0;gap:0;justify-content:center;overflow:hidden}
.heading{position:fixed;bottom:5px;left:50%;transform:translateX(-50%);z-index:110;white-space:nowrap;display:flex;gap:6px;align-items:center}
.heading small,.heading h1,.heading p{display:none}
.heading .subtle{font-size:11px;padding:5px 10px;background:#24242bdb}
.under{display:none}
.deviceWrap{position:relative;flex:none;width:393px;height:852px}
.device{position:absolute;top:0;left:0;width:393px;height:852px;max-width:none;max-height:none;min-height:0;border:8px solid #1b1b20;border-radius:58px;transform-origin:top left;box-shadow:0 0 0 2px #54545b,0 22px 65px #000b}
.screen{inset:0}
.lock{background:linear-gradient(180deg,#00000060 0%,transparent 37%,#0005 100%),url('wallpaper.jpg') center/cover,linear-gradient(170deg,#08090e 0%,#29232a 45%,#090a0e 100%)}
.lockdate{margin-top:46px;font-size:18px;font-weight:600;letter-spacing:0;text-transform:none;color:#f4f4f5;text-shadow:0 2px 12px #000b}
.locktime{font-size:105px;letter-spacing:-4px;line-height:1.12;font-weight:650;color:#fafafa;text-shadow:0 2px 18px #0008}
.lockhint{display:none}
.locknotify{top:auto;bottom:166px;left:14px;right:14px;background:#4242489c;border:1px solid #ffffff26;border-radius:19px;backdrop-filter:blur(25px)}
.unlock{bottom:34px;font-size:13px;font-weight:500;text-shadow:0 1px 5px #000;animation:hintBob 2.6s ease-in-out infinite}
@keyframes hintBob{50%{transform:translate(-50%,-6px)}}
.home{padding:102px 20px 0;background:linear-gradient(#04040766,#04040766),url('wallpaper.jpg') center/cover,radial-gradient(ellipse at 40% 55%,#4d293b,#06070a 75%)}
.homeTop{height:133px}.homeTop small,.homeTop p{display:none}
.icons{gap:26px 9px}.icons button{font-size:12px}.appicon{width:61px;height:61px;border-radius:14px}
.dock{height:90px;bottom:30px;background:#ffffff30;backdrop-filter:blur(23px);border:1px solid #ffffff25}
.status{top:16px;left:28px;right:24px;font-size:15px}.island{top:9px;width:123px;height:34px}.homebar{bottom:8px;width:140px}
.appBody{scrollbar-width:none}.appBody::-webkit-scrollbar{display:none}
@media(max-width:600px){.outside{padding:0;display:flex}.heading{bottom:10px}.deviceWrap{width:393px;height:852px}.device{width:393px;height:852px;border:8px solid #1b1b20;border-radius:58px;box-shadow:0 0 0 2px #54545b}}

/* V3 · iOS-inspired home layout, full-size app icons */
.home{padding:64px 18px 0!important;background:linear-gradient(#15121850,#15121855),url('wallpaper.jpg') center/cover,linear-gradient(155deg,#16121a,#25151e 60%,#101015)!important}
.widgets{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:23px;height:164px}
.weatherWidget,.calendarWidget{border-radius:22px;overflow:hidden;padding:14px;color:white;position:relative}
.weatherWidget{background:linear-gradient(145deg,#4b99eb,#77b1f1);display:flex;flex-direction:column}
.weatherWidget b{font-size:14px}.weatherWidget b span{font-size:12px}.degrees{font-size:49px;font-weight:300;letter-spacing:-3px;line-height:1.1}.weatherBottom{margin-top:auto;display:flex;flex-direction:column;gap:3px;font-size:18px}.weatherBottom strong{font-size:13px}
.calendarWidget{background:#f9f9fa;color:#151515;padding:13px 11px}.calendarWidget>b{font-size:12px;color:#ff3b30}.miniCalendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:10px;gap:7px 1px;text-align:center;font-size:9px}.miniCalendar span:nth-child(-n+7){color:#8a8a8f;font-weight:bold}.miniCalendar .today{background:#ff3b30;color:white;border-radius:50%}
.iosIcons{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:9px;row-gap:23px!important}.iosIcons button{font-size:11px!important;gap:5px!important;text-shadow:0 1px 2px #000a}.iosIcons .appicon,.iosDock .appicon{height:60px!important;width:60px!important;border-radius:14px!important;box-shadow:none!important;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.iosNotes{background:linear-gradient(#ffd135 0 27%,#fff 27% 100%);}.noteLines{width:37px;height:22px;background:repeating-linear-gradient(to bottom,#dedee0 0 2px,transparent 2px 8px);margin-top:19px}
.iosPhotos{background:#fff}.flower{font-size:54px;line-height:1;background:conic-gradient(#f5c837,#f58a2d,#e74667,#a64eca,#3b70da,#48c3dc,#52c569,#f5c837);color:transparent;background-clip:text}
.iosCalendar{background:#fff;display:flex!important;flex-direction:column;gap:0;color:#141414}.iosCalendar small{font-size:11px;color:#f03b30;margin-top:4px}.iosCalendar strong{font-size:36px;font-weight:300;line-height:1.15}
.iosInstagram{background:radial-gradient(circle at 25% 102%,#ffd362,#fb6839 38%,#cb32a6 66%,#544de9)}.instagramGlyph{color:white;border:3px solid white;border-radius:15px;width:39px;height:39px;display:grid;place-items:center;font-size:42px;font-family:Arial;line-height:.7}
.iosMaps{background:linear-gradient(135deg,#e0edca 45%,#f1d44c 45% 57%,#eff0de 57%);color:#2386ee}.mapRoad{border:5px solid white;border-radius:50%;width:33px;height:33px;display:grid;place-items:center;font-size:25px}
.iosFiles{background:#fff;font-size:42px;color:#0878e9}.iosGmail{background:white}.gmailGlyph{font-family:Arial,sans-serif;color:#e74439;font-weight:900;font-size:42px;text-shadow:-2px 0 #4285f4,2px 2px #35a853}
.iosPhone,.iosMessages{background:linear-gradient(165deg,#67ed7c,#09bb30);color:white;font-size:38px}.iosPhone{font-family:Arial,sans-serif}.iosSettings{background:linear-gradient(#d9dadd,#84878f);color:#34353a;font-size:47px}.iosSafari{background:radial-gradient(circle,#47b7fb,#0670eb);color:white;font-size:50px}
.pageDots{position:absolute;bottom:131px;left:0;right:0;display:flex;justify-content:center;gap:8px}.pageDots i{width:7px;height:7px;background:#ffffff5a;border-radius:50%}.pageDots i:first-child{background:white}
.iosDock{height:87px!important;bottom:28px!important;left:11px!important;right:11px!important;display:flex;justify-content:space-evenly!important;gap:2px;background:#ffffff3a!important;border-radius:30px!important}.iosDock button{position:relative;width:64px!important;height:64px!important;background:none!important;display:grid;place-items:center;padding:0}.iosDock .appicon{width:58px!important;height:58px!important}.iosDock #unread{right:0;top:-6px;z-index:2}

/* V4: foto Eiffel Tower khusus lock screen Fourth */
.lock{background:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.50) 100%),url("wallpaper.jpg") center center/cover no-repeat !important;}
.home{background:radial-gradient(ellipse at 45% 70%,#482132,#07080d 75%) !important;}

/* FIX GALERI FOTO IPHONE */

.photosHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #000;
  color: white;
}

.photosHeader h2 {
  font-size: 28px;
}

.photosGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  background: #000;
  padding-bottom: 85px;
}

.photosGrid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #1c1c1e;
  cursor: pointer;
}

.photosTabs {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 25px;
  background: rgba(35, 35, 35, 0.95);
  color: white;
  white-space: nowrap;
  z-index: 20;
}

.photosTabs .active {
  font-weight: bold;
}

/* INSTAGRAM FOURTH — OWNER VIEW */

.igPage {
  height: 100%;
  overflow-y: auto;
  background: #080b0f;
  color: #fff;
  font-family: Arial, sans-serif;
  scrollbar-width: none;
  padding-bottom: 65px;
}

.igPage::-webkit-scrollbar {
  display: none;
}

.igTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 17px;
  font-size: 25px;
}

.igTop strong {
  font-size: 21px;
}

.igVerified {
  color: #299bff;
}

.igProfile {
  display: flex;
  align-items: center;
  padding: 14px 15px;
  gap: 17px;
}

.igAvatar {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.igStats {
  display: flex;
  flex: 1;
  justify-content: space-between;
  text-align: center;
  gap: 7px;
}

.igStats div {
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.igStats b {
  font-size: 17px;
}

.igBio {
  padding: 0 17px;
  font-size: 14px;
  line-height: 1.5;
}

.igBio strong,
.igCategory {
  display: block;
}

.igCategory {
  color: #90939c;
}

.igBio a {
  color: #a2bcff;
  text-decoration: none;
}

.igDashboard {
  margin: 17px 14px 10px;
  padding: 14px;
  background: #292d33;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.igDashboard span {
  font-size: 12px;
  color: #a7aab2;
}

.igButtons {
  display: flex;
  gap: 7px;
  margin: 0 14px;
}

.igButtons button {
  flex: 1;
  padding: 10px 4px;
  border: none;
  border-radius: 8px;
  color: white;
  background: #292d33;
  font-weight: 600;
  cursor: pointer;
}

.igHighlights {
  display: flex;
  gap: 16px;
  padding: 22px 17px;
  text-align: center;
  font-size: 12px;
}

.igHighlightCircle {
  display: grid;
  place-items: center;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: 2px solid #555;
  margin-bottom: 6px;
  font-size: 24px;
}

.igTabs {
  display: flex;
  justify-content: space-around;
  padding: 12px 0;
  border-bottom: 1px solid #31343a;
  font-size: 24px;
}

.igFeed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

/* Satu gambar besar, dibagi menjadi 3 kolom x 2 baris */
.igPost {
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.igPost img {
  display: block;
  width: 300%;
  height: 200%;
  max-width: none;
  object-fit: fill;
  position: absolute;
}

.igPost:nth-child(3n+1) img {
  left: 0;
}

.igPost:nth-child(3n+2) img {
  left: -100%;
}

.igPost:nth-child(3n) img {
  left: -200%;
}

.igPost:nth-child(-n+3) img {
  top: 0;
}

.igPost:nth-child(n+4) img {
  top: -100%;
}

/* ===== FOURTH CALENDAR — DARK IOS ===== */

.fcCalendar,
.fcDetail {
  height: 100%;
  overflow-y: auto;
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont,
    "SF Pro Display", Arial, sans-serif;
  scrollbar-width: none;
}

.fcCalendar::-webkit-scrollbar,
.fcDetail::-webkit-scrollbar {
  display: none;
}

.fcCalendar button,
.fcDetail button {
  cursor: pointer;
  border: 0;
  color: #fff;
  font-family: inherit;
}

.fcCalendar {
  padding: 16px 0 100px;
}

.fcToolbar,
.fcDetailNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px 20px;
}

.fcPill {
  background: #1c1c1e;
  border: 1px solid #343438 !important;
  border-radius: 30px;
  padding: 10px 15px;
  font-size: 15px;
}

.fcTools {
  display: flex;
  gap: 3px;
  background: #1c1c1e;
  border-radius: 30px;
  padding: 4px;
}

.fcTools button {
  background: transparent;
  padding: 5px 12px;
  font-size: 25px;
}

.fcCalendar h1 {
  padding: 14px 20px 18px;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -1px;
}

.fcWeekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  padding: 0 5px 8px;
  color: #a2a2a8;
  font-size: 12px;
}

.fcMonthGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 0 4px;
}

.fcEmpty,
.fcDay {
  min-width: 0;
  height: 95px;
  border-top: 1px solid #303034;
}

.fcDay {
  padding: 9px 1px 0;
  text-align: center;
  font-size: 17px;
  cursor: pointer;
}

.fcDay > span {
  display: inline-flex;
  width: 29px;
  height: 29px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.fcToday {
  background: #ff453a;
  color: white;
  font-weight: 700;
}

.fcEventPill {
  margin-top: 8px;
  padding: 4px 2px;
  border-radius: 7px;
  background: #9c239c;
  color: #fff;
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fcBottom {
  position: absolute;
  bottom: 28px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.fcBottom > * {
  pointer-events: auto;
}

.fcBottom span {
  background: #1c1c1e;
  border-radius: 30px;
  padding: 12px 18px;
  font-size: 20px;
}

/* ===== EVENT DETAIL ===== */

.fcDetail {
  padding: 12px 16px 110px;
  position: relative;
}

.fcDetailNav {
  padding: 8px 0 30px;
}

.fcDetailTitle {
  padding: 0 14px 28px;
}

.fcDetailTitle h1 {
  font-size: 27px;
  margin-bottom: 16px;
  line-height: 1.2;
}

.fcDetailTitle p {
  font-size: 18px;
  margin-bottom: 5px;
}

.fcDetailTitle span,
.fcMuted {
  color: #919198;
}

.fcDetailCard {
  background: #1c1c1e;
  padding: 20px 16px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 16px;
  font-size: 16px;
}

.fcMuted {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fcColorDot {
  width: 11px;
  height: 11px;
  display: inline-block;
  border-radius: 50%;
  background: #d925d9;
}

.fcNotesCard {
  background: #1c1c1e;
  padding: 18px 16px;
  border-radius: 18px;
  font-size: 16px;
}

.fcNotesCard p {
  color: #a6a6ad;
  font-size: 16px;
  line-height: 1.6;
  margin-top: 15px;
}

.fcDelete {
  display: block;
  margin: 90px auto 0;
  padding: 14px 20px;
  border-radius: 30px;
  background: #1c1c1e;
  color: #ff453a !important;
  font-size: 16px;
}


#home {
  background-image:
    linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)),
    url("wallpaper.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ===== IPHONE SETTINGS DARK MODE ===== */

.iosSettingsPage {
  height: 100%;
  overflow-y: auto;
  background: #000;
  color: #fff;
  padding: 35px 15px 105px;
  font-family: -apple-system, BlinkMacSystemFont,
    "SF Pro Display", Arial, sans-serif;
  scrollbar-width: none;
}

.iosSettingsPage::-webkit-scrollbar {
  display: none;
}

.iosSettingsPage h1 {
  font-size: 34px;
  font-weight: 700;
  margin: 15px 2px 18px;
}

.iosSetGroup {
  background: #1c1c1e;
  border-radius: 19px;
  margin-bottom: 27px;
  overflow: hidden;
}

.iosSettingsPage button {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.iosAccountRow {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 13px;
  background: transparent;
  color: #fff;
  text-align: left;
}

.iosSetAvatar,
.iosAppleAvatar {
  background: linear-gradient(145deg, #666, #252529);
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-weight: 600;
}

.iosSetAvatar {
  width: 55px;
  height: 55px;
  font-size: 25px;
}

.iosAccountText {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
  flex: 1;
}

.iosAccountText strong {
  font-size: 17px;
  font-weight: 600;
}

.iosAccountText small {
  color: #96969d;
  font-size: 12px;
}

.iosSetChevron {
  color: #626268;
  font-size: 25px;
  margin-left: 4px;
}

.iosSetLine {
  height: 1px;
  background: #39393d;
  margin-left: 80px;
}

.iosSetRow {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: #fff;
  text-align: left;
  padding: 9px 12px;
  position: relative;
}

.iosSetRow:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 46px;
  right: 12px;
  height: 1px;
  background: #38383b;
}

.iosSetIcon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 17px;
  flex-shrink: 0;
}

.iosSetLabel {
  flex: 1;
  min-width: 0;
  font-size: 14px;
}

.iosSetValue {
  color: #929298;
  font-size: 12px;
  white-space: nowrap;
}

.iosRedBadge {
  background: #ff453a;
  border-radius: 50%;
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: #fff;
}

.iosSwitch {
  display: inline-block;
  width: 37px;
  height: 22px;
  background: #55555b;
  border-radius: 20px;
  position: relative;
  vertical-align: middle;
}

.iosSwitch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
}

/* APPLE ACCOUNT */

.iosApplePage {
  padding-top: 0;
}

.iosAppleNav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 65px;
}

.iosAppleNav button {
  color: white;
  background: #1c1c1e;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  font-size: 30px;
}

.iosAppleNav strong {
  font-size: 16px;
}

.iosAppleNav > span {
  width: 43px;
}

.iosAppleIdentity {
  text-align: center;
  padding: 16px 0 37px;
}

.iosAppleAvatar {
  width: 105px;
  height: 105px;
  font-size: 48px;
  margin: 0 auto 17px;
}

.iosAppleIdentity h1 {
  font-size: 24px;
  margin: 0 0 8px;
}

.iosAppleIdentity p {
  font-size: 14px;
  color: #96969d;
  overflow-wrap: anywhere;
}

/* ===== FOURTH IPHONE PASSCODE ===== */

#passcode.passcodeScreen {
  position: absolute;
  inset: 0;
  background: #080808;
  color: white;
  overflow: hidden;
  z-index: 15;
  font-family: -apple-system, BlinkMacSystemFont,
    "SF Pro Display", Arial, sans-serif;
}

#passcode.hidden {
  display: none !important;
}

.passcodeBlur {
  position: absolute;
  inset: -35px;
  background-image:
    linear-gradient(
      rgba(0,0,0,.38),
      rgba(0,0,0,.38)
    ),
    url("wallpaper.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(25px);
  transform: scale(1.08);
}

.passcodeContent {
  position: relative;
  z-index: 2;
  padding-top: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.passcodeContent h2 {
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 30px;
}

.passcodeDots {
  display: flex;
  gap: 23px;
  margin-bottom: 55px;
}

.passcodeDots span {
  width: 12px;
  height: 12px;
  border: 1.5px solid white;
  border-radius: 50%;
  background: transparent;
  box-sizing: border-box;
}

.passcodeDots span.filled {
  background: white;
}

.passcodeKeypad {
  display: grid;
  grid-template-columns: repeat(3, 76px);
  gap: 20px 20px;
}

.passcodeKeypad button {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.23);
  color: white;
  font-size: 35px;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.passcodeKeypad button small {
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 600;
}

.passcodeKeypad button:active {
  background: rgba(255,255,255,.48);
}

.passcodeBottom {
  position: absolute;
  z-index: 2;
  bottom: 65px;
  left: 35px;
  right: 35px;
  display: flex;
  justify-content: space-between;
}

.passcodeBottom button {
  background: transparent;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.passcodeDots.shake {
  animation: passcodeShake .35s ease;
}

@keyframes passcodeShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-12px); }
  40% { transform: translateX(12px); }
  60% { transform: translateX(-9px); }
  80% { transform: translateX(9px); }
}

/* ===== CUSTOM IPHONE ICONS ===== */

#home .customAppIcon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  background-image: none !important;
  box-sizing: border-box;
}

#home .customAppIcon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 13px !important;
}

/* Instagram */
#home .igIcon {
  background: transparent !important;
}

/* Settings */
#home .settingsIcon {
  background: #d6d6da !important;
}

/* Gmail */
#home .gmailIcon {
  background: #ffffff !important;
}

/* Safari */
#home .safariIcon {
  background: #ffffff !important;
}

/* Photos */
#home .photosIcon {
  background: #ffffff !important;
}

/* ===== FOURTH IMESSAGE DARK MODE ===== */

.fourthMessages {
  background: #000;
  min-height: 100%;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont,
    "SF Pro Display", Arial, sans-serif;
}

.fourthMessagesTop {
  display: flex;
  justify-content: space-between;
  padding: 15px 15px 5px;
  font-size: 15px;
}

.fourthMessages h1 {
  font-size: 31px;
  margin: 12px 15px;
  font-weight: 700;
}

.fourthSearch {
  background: #1c1c1e;
  color: #8e8e93;
  border-radius: 10px;
  margin: 0 14px 15px;
  padding: 9px 12px;
  font-size: 14px;
}

.fourthChatRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  cursor: pointer;
  background: #000;
}

.fourthChatRow:active {
  background: #242428;
}

.fourthChatAvatar {
  flex-shrink: 0;
  width: 49px;
  height: 49px;
  border-radius: 50%;
  background: #50525c;
  display: grid;
  place-items: center;
  font-size: 21px;
  color: #fff;
}

.fourthChatInfo {
  flex: 1;
  min-width: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #26262a;
}

.fourthChatName {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.fourthChatName strong {
  font-size: 15px;
  font-weight: 600;
}

.fourthChatName span {
  color: #8e8e93;
  font-size: 12px;
  white-space: nowrap;
}

.fourthChatInfo p {
  margin: 5px 0 0;
  color: #9c9ca3;
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ===================================
   FOURTH NOTES — IPHONE DARK MODE
=================================== */

#appBody:has(.fourthNotesPage) {
  padding: 0 !important;
  overflow: hidden;
  background: #0c0c11;
}

.fourthNotesPage {
  height: 100%;
  background: #0c0c11;
  color: white;
  position: relative;
  overflow-y: auto;
  padding: 12px 15px 85px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont,
    "SF Pro Display", Arial, sans-serif;
  scrollbar-width: none;
}

.fourthNotesPage::-webkit-scrollbar {
  display: none;
}

/* Top navigation */
.fourthNotesNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffad0a;
  font-size: 16px;
  margin-bottom: 20px;
}

.fourthNotesPage h1 {
  font-size: 34px;
  font-weight: 700;
  margin: 0 0 15px;
}

/* Search */
.fourthNotesSearch {
  border-radius: 10px;
  background: #1c1c22;
  color: #8e8e93;
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 24px;
}

/* Sections */
.fourthNotesPage h3 {
  font-size: 19px;
  margin: 0 0 9px 3px;
  font-weight: 650;
}

/* Notes list */
.fourthNotesGroup {
  background: #000;
  border-radius: 14px;
  overflow: hidden;
}

.fourthNoteItem {
  width: 100%;
  display: block;
  text-align: left;
  padding: 14px;
  border: none;
  background: transparent;
  color: white;
  cursor: pointer;
  font-family: inherit;
  position: relative;
}

.fourthNoteItem + .fourthNoteItem {
  border-top: 1px solid #29292d;
}

.fourthNoteItem strong {
  display: block;
  font-size: 15px;
  font-weight: 650;
  margin-bottom: 5px;
}

.fourthNotePreview {
  font-size: 12px;
  line-height: 1.35;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #89898e;
}

.fourthNotePreview span:first-child {
  color: #fff;
  flex-shrink: 0;
}

.fourthNotePreview span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fourthNoteItem small {
  color: #707078;
  display: block;
  font-size: 11px;
  margin-top: 5px;
}

/* Bottom toolbar */
.fourthNotesBottom {
  position: sticky;
  bottom: -85px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 30px -15px -85px;
  height: 55px;
  padding: 0 20px;
  background: rgba(8,8,10,.96);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  font-size: 12px;
}

.fourthNotesBottom span:last-child {
  color: #ffad0a;
  font-size: 22px;
}

/* Note detail */
.fourthNoteDetail {
  display: flex;
  flex-direction: column;
  padding: 0 15px;
  overflow: hidden;
}

.fourthNoteDetailNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  color: #ffad0a;
}

.fourthNoteDetailNav button {
  border: none;
  background: none;
  color: #ffad0a;
  font-size: 16px;
  cursor: pointer;
}

.fourthNoteDetailScroll {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 30px;
  scrollbar-width: none;
}

.fourthNoteDetailScroll::-webkit-scrollbar {
  display: none;
}

.fourthNoteDetail h2 {
  font-size: 23px;
  line-height: 1.25;
  margin: 18px 0 8px;
  color: #fff;
}

.fourthNoteDate {
  text-align: center;
  color: #77777d;
  font-size: 12px;
  margin-bottom: 25px;
}

/* Long journal */
.fourthNoteWriting {
  font-size: 15px;
  line-height: 1.65;
  white-space: normal;
  color: #f2f2f4;
  overflow-wrap: anywhere;
}

/* Checklist */
.fourthNoteChecklist p {
  font-weight: 650;
  font-size: 15px;
  margin-bottom: 20px;
}

.fourthChecklistRow {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
}

.fourthChecklistRow input {
  width: 19px;
  height: 19px;
  margin: 0;
  flex-shrink: 0;
  accent-color: #ffad0a;
  cursor: pointer;
}

.fourthChecklistRow input:checked + span {
  color: #85858a;
  text-decoration: line-through;
}

.fourthNoteDetail .fourthNotesBottom {
  position: relative;
  bottom: auto;
  margin: 0 -15px;
  flex-shrink: 0;
}

/* Sembunyikan header umum hanya saat Notes terbuka */

#app:has(.fourthNotesPage) > header {
  display: none !important;
}

#app:has(.fourthNotesPage) .appBody {
  height: 100% !important;
}

/* Tombol kembali dari Notes ke Home Screen */

#notesBackHome {
  background: transparent;
  border: none;
  padding: 0;
  color: #ffad0a;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

/* ===== FOURTH FILES APP ===== */

#app:has(.fourthFilesPage) > header,
#app:has(.fourthVideoPage) > header {
  display: none !important;
}

#app:has(.fourthFilesPage) .appBody,
#app:has(.fourthVideoPage) .appBody {
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden;
}

.fourthFilesPage {
  height: 100%;
  background: #0b0b10;
  color: white;
  padding: 16px 15px 85px;
  box-sizing: border-box;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

.filesTop {
  display: flex;
  justify-content: flex-end;
}

.filesTop button {
  color: #0a84ff;
  background: none;
  border: none;
  font-size: 19px;
}

.fourthFilesPage h1 {
  font-size: 34px;
  margin: 15px 0 10px;
}

.filesSearch {
  width: 100%;
  background: #1c1c22;
  border: none;
  border-radius: 10px;
  padding: 11px;
  color: white;
  font-size: 14px;
  outline: none;
}

.fourthFilesPage h3 {
  font-size: 18px;
  margin: 27px 3px 9px;
}

.filesGroup {
  background: #000;
  border-radius: 13px;
  overflow: hidden;
}

.filesRow {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 50px;
  width: 100%;
  padding: 10px 15px;
  background: transparent;
  color: white;
  border: none;
  font-size: 15px;
  text-align: left;
  box-sizing: border-box;
}

.filesRow + .filesRow {
  border-top: 1px solid #29292d;
}

.filesBlue {
  color: #0a84ff;
  font-size: 20px;
  width: 26px;
}

.filesFavorite {
  cursor: pointer;
}

.filesFavorite:active {
  background: #252529;
}

.filesVideoIcon {
  width: 29px;
  height: 29px;
  background: #202126;
  border-radius: 7px;
  display: grid;
  place-items: center;
}

.filesArrow {
  margin-left: auto;
  color: #77777d;
}

.filesBottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65px;
  background: #050506;
  border-top: 1px solid #28282e;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.filesBottom span {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #85858b;
  font-size: 23px;
}

.filesBottom small {
  font-size: 10px;
}

.filesBottom .filesActive {
  color: #0a84ff;
}

/* ===== VIDEO PLAYER ===== */

.fourthVideoPage {
  height: 100%;
  background: #000;
  color: white;
  display: flex;
  flex-direction: column;
}

.fourthVideoHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 15px;
  font-size: 14px;
}

.fourthVideoHeader button {
  background: none;
  border: none;
  color: #0a84ff;
  font-size: 15px;
  cursor: pointer;
}

.fourthVideoCenter {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 0;
}

.fourthVideoCenter video {
  width: 100%;
  max-height: 75%;
  background: #000;
  object-fit: contain;
}

.fourthVideoCenter p {
  font-size: 13px;
  color: #aaa;
}

.filesVideoError {
  color: #ff7777 !important;
  text-align: center;
  padding: 0 18px;
}

/* ===== IPHONE HOME INDICATOR ===== */

#homebar {
  position: absolute !important;
  bottom: 7px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 108px !important;
  height: 5px !important;

  background: white !important;
  border-radius: 100px !important;

  z-index: 9999 !important;
  cursor: pointer !important;

  touch-action: none;
}

/* Jaga supaya Home Indicator terlihat
   pada semua halaman aplikasi */

#device {
  position: relative;
  overflow: hidden;
}

/* ===== HOME INDICATOR CLICKABLE ===== */

#device {
  position: relative;
}

#homebar {
  position: absolute !important;
  bottom: 5px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 115px !important;
  height: 5px !important;
  border-radius: 100px !important;

  background: white !important;
  z-index: 999999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation;
}

/* Memperbesar area klik tanpa mengubah bentuk garis */
#homebar::before {
  content: "";
  position: absolute;
  left: -25px;
  right: -25px;
  top: -20px;
  bottom: -12px;
  background: transparent;
}

/* TOMBOL HOME ATAS BISA DIKLIK */

#app > header {
  position: relative;
  z-index: 100;
}

#back {
  position: relative;
  z-index: 101;
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* ===== iMessage Dark Mode ===== */
.imsgScreen{
  height:100%;
  display:flex;
  flex-direction:column;
  background:#000;
  color:#fff;
}

.imsgHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}

.imsgBack,
.imsgVideo{
  border:none;
  background:none;
  color:#4da3ff;
  font-size:14px;
  cursor:pointer;
}

.imsgContact{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}

.imsgAvatarWrap{
  width:42px;
  height:42px;
  border-radius:50%;
  overflow:hidden;
  background:#222;
}

.imsgAvatar{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.imsgName{
  font-size:13px;
  font-weight:600;
  color:#fff;
}

.imsgBody{
  flex:1;
  overflow-y:auto;
  padding:14px 12px 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  -ms-overflow-style:none;
  scrollbar-width:none;
}

.imsgBody::-webkit-scrollbar{
  display:none;
}

.imsgDate{
  align-self:center;
  color:#8e8e93;
  font-size:12px;
  margin:10px 0 4px;
}

.msgRow{
  display:flex;
  width:100%;
}

.msgRow.left{
  justify-content:flex-start;
}

.msgRow.right{
  justify-content:flex-end;
}

.msgBubble{
  max-width:74%;
  padding:10px 14px;
  border-radius:20px;
  font-size:14px;
  line-height:1.35;
  word-wrap:break-word;
}

.msgBubble.dark{
  background:#2c2c2e;
  color:#fff;
  border-bottom-left-radius:8px;
}

.msgBubble.blue{
  background:#0a84ff;
  color:#fff;
  border-bottom-right-radius:8px;
}

.imsgInputBar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px 14px;
  border-top:1px solid rgba(255,255,255,.08);
  background:#000;
  flex-shrink:0;
}

.imsgPlus,
.imsgMic{
  width:34px;
  height:34px;
  border:none;
  border-radius:50%;
  background:#1c1c1e;
  color:#fff;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.imsgInputFake{
  flex:1;
  min-height:36px;
  border-radius:18px;
  background:#1c1c1e;
  color:#8e8e93;
  display:flex;
  align-items:center;
  padding:0 14px;
  font-size:14px;
}

/* ====================================
   GEMINI CHAT — FULLSCREEN IPHONE
==================================== */

/* Hilangkan header Home - Messages yang dobel */
#app:has(.imsgScreen) > header {
  display: none !important;
}

/* Buat area aplikasi memenuhi layar */
#app:has(.imsgScreen) {
  padding: 0 !important;
  overflow: hidden !important;
}

/* Hilangkan jarak kosong aplikasi lama */
#app:has(.imsgScreen) .appBody {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Chat Gemini memenuhi area aplikasi */
#app:has(.imsgScreen) .imsgScreen {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #000 !important;
}

/* Header Bii's tetap di atas */
.imsgHeader {
  flex-shrink: 0;
}

/* Chat bisa scroll tanpa menutupi input */
.imsgBody {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Kolom iMessage tetap di bawah */
.imsgInputBar {
  flex-shrink: 0;
  padding-bottom: 22px;
}

/* Garis putih iPhone tetap paling depan */
#homebar {
  z-index: 999999 !important;
}
/* ===== PHONE CALL FULLSCREEN ===== */
.phoneCallScreen{
  min-height: 100%;
  background: linear-gradient(180deg, #343a57 0%, #1e2338 65%, #121522 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 22px 30px;
  box-sizing: border-box;
}

.phoneCallAvatar{
  width: 86px;
  height: 86px;
  border-radius: 50%;
  overflow: hidden;
  margin-top: 10px;
  margin-bottom: 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

.phoneCallAvatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.phoneCallName{
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 4px;
  text-align: center;
}

.phoneCallTimer{
  font-size: 16px;
  color: rgba(255,255,255,.88);
  margin-bottom: 54px;
}

.phoneCallGrid{
  margin-top: auto;
  width: 100%;
  max-width: 300px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 22px;
  justify-items: center;
}

.phoneCallAction{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 13px;
  text-align: center;
}

.phoneCallBtn{
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.phoneCallBtn.smallIcon{
  font-size: 24px;
}

.phoneEndWrap{
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

.phoneEndBtn{
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: none;
  background: #ff3b30;
  color: #fff;
  font-size: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
}

/* LOCKSCREEN — NOTIFIKASI AWAL CHAPTER 1 */

.storyLockNotifications {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 5;
}

.storyLockNotification {
  padding: 11px 13px;
  border-radius: 13px;
  background: rgba(48, 48, 53, 0.68);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .12);
}

.storyLockNotificationTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 650;
}

.storyLockNotificationTop span:last-child {
  color: rgba(255, 255, 255, .7);
  font-size: 9px;
}

.storyLockNotificationText {
  font-size: 11px;
  line-height: 1.4;
}

/* HEADER MAMA — BACK TETAP SATU BARIS */
.mamaHeader {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.mamaBack {
  width: 76px !important;
  min-width: 76px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  padding: 0 !important;
  text-align: left !important;
}

.mamaContact {
  flex: 1 !important;
  min-width: 0 !important;
  align-items: center !important;
}

.mamaCamera {
  width: 36px !important;
  min-width: 36px !important;
  flex-shrink: 0 !important;
}

/* MAMA — PESAN BELUM DIBACA */

.mamaUnread {
  position: relative;
}

.mamaUnread strong,
.mamaUnread .name,
.mamaUnread .chatName {
  font-weight: 800 !important;
  color: #fff !important;
}

.mamaUnread small,
.mamaUnread .preview,
.mamaUnread .chatPreview,
.mamaUnread .subtitle {
  font-weight: 700 !important;
  color: #e9e9ed !important;
}

/* Titik biru seperti iMessage */
.mamaUnread::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0a84ff;
}

/* MESSAGES — STATUS BELUM DIBACA */

.fourthChatName .chatContactName {
  font-weight: 500;
  color: #ffffff;
}

.fourthChatRow .fourthChatInfo p {
  font-weight: 400;
  color: #8e8e93;
}


/* MAMA UNREAD — FIX */

.fourthChatRow.mamaUnread .chatContactName {
  font-weight: 900 !important;
  color: #ffffff !important;
}

.fourthChatRow.mamaUnread .fourthChatInfo p {
  font-weight: 800 !important;
  color: #ffffff !important;
}

/* Setelah Mama dibalas */
.fourthChatRow:not(.mamaUnread) .chatContactName {
  font-weight: 500 !important;
}

.fourthChatRow:not(.mamaUnread) .fourthChatInfo p {
  font-weight: 400 !important;
  color: #8e8e93 !important;
}

/* FIXED: unread Mama sebelum balasan terkirim */
.fourthChatRow.mamaUnread .chatContactName {font-weight:900!important;color:#fff!important}
.fourthChatRow.mamaUnread .fourthChatInfo p {font-weight:800!important;color:#fff!important}
.fourthChatRow.mamaUnread::before {content:"";width:7px;height:7px;flex:0 0 7px;background:#0a84ff;border-radius:50%;margin-left:-8px}
.fourthChatRow:not(.mamaUnread) .chatContactName {font-weight:500!important}
.fourthChatRow:not(.mamaUnread) .fourthChatInfo p {font-weight:400!important;color:#8e8e93!important}

/* Foto profil pada daftar Messages */
.fourthChatAvatar {
  overflow: hidden;
  border-radius: 50%;
}

.fourthChatAvatar .fourthAvatarPhoto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* FOTO PROFIL GEMINI SAAT INCOMING CALL */

.ch1CallAvatar {
  width: 95px !important;
  height: 95px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #50566c;
}

.ch1CallAvatar .ch1CallProfilePhoto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* FOTO PROFIL HEADER ROOM CHAT MAMA & GEMINI */

.mamaAvatar,
.geminiAvatar {
  overflow: hidden;
  border-radius: 50%;
  padding: 0;
  flex-shrink: 0;
}

.mamaAvatar img,
.geminiAvatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* FOTO PROFIL DI PHONE RECENTS */

.phoneAvatar {
  overflow: hidden;
  border-radius: 50%;
}

.phoneAvatar .phoneProfileImg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* FOTO PROFIL DI LAYAR PANGGILAN */

.phoneCallAvatar {
  overflow: hidden;
  border-radius: 50%;
}

.phoneCallAvatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* =========================
   GMAIL SCREEN — DARK MODE
   SCROLLBAR HIDDEN
========================= */

.gmailScreen {
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #121212;
  color: #fff;

  /* Tetap bisa scroll, tanpa scrollbar putih */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;

  padding: 14px 12px 90px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* Sembunyikan scrollbar Chrome, Edge, Safari */
.gmailScreen::-webkit-scrollbar,
.gmailList::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Bagian atas Gmail */
.gmailTopBar {
  margin-bottom: 18px;
}

.gmailSearchBar {
  height: 56px;
  background: #2b2c30;
  border-radius: 28px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 12px;
}

.gmailMenu {
  font-size: 22px;
  color: #d9d9d9;
  line-height: 1;
}

.gmailSearchText {
  flex: 1;
  color: #cfcfcf;
  font-size: 16px;
}

.gmailProfile {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.gmailProfile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Judul All inboxes */
.gmailSectionTitle {
  color: #cfcfcf;
  font-size: 15px;
  margin: 10px 4px 14px;
}

/* Daftar email */
.gmailList {
  display: flex;
  flex-direction: column;
  gap: 10px;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gmailRow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #1a1a1a;
  border-radius: 18px;
  padding: 12px;
  box-sizing: border-box;

  /* Email hanya pajangan, tidak bisa dibuka */
  cursor: default;
}

.gmailAvatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.gmailContent {
  flex: 1;
  min-width: 0;
}

.gmailRowTop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 4px;
}

.gmailSender {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.gmailDate {
  font-size: 12px;
  color: #d0d0d0;
  white-space: nowrap;
  flex-shrink: 0;
}

.gmailSubject {
  font-size: 14px;
  color: #d6d6d6;
  line-height: 1.35;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gmailStar {
  color: #d8d8d8;
  font-size: 24px;
  line-height: 1;
  margin-left: 4px;
  flex-shrink: 0;
}

/* Tombol Compose */
.gmailComposeBtn {
  position: sticky;
  bottom: 16px;
  margin-left: auto;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 10px;

  background: #0b57d0;
  color: white;
  padding: 14px 18px;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.gmailComposeIcon {
  font-size: 17px;
}

/* Hilangkan scrollbar pada pembungkus aplikasi Gmail */
#app:has(.gmailScreen) .appBody,
#app:has(.gmailScreen) #appBody {
  overflow: hidden !important;
  min-height: 0;
  padding: 0 !important;
}

/* WEATHER WIDGET — NIGHT MODE 01.00 */
.weatherWidget,
.weather-widget,
.iosWeather {
  background: linear-gradient(
    160deg,
    #182746 0%,
    #101a34 55%,
    #080d20 100%
  ) !important;

  color: #ffffff !important;
}

/* Tulisan weather tetap putih */
.weatherWidget *,
.weather-widget *,
.iosWeather * {
  color: #ffffff;
}