/* Figtree (SIL Open Font License 1.1, lihat fonts/OFL.txt) */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #0b0b0c;
  --text: #f5f3fa;
  --muted: rgba(245, 243, 250, .66);
  --line: rgba(255, 255, 255, .1);
  --glass: rgba(255, 255, 255, .05);
  --glass-2: rgba(255, 255, 255, .09);
  /* kaca jendela Intip (.st-win), sedikit lebih tembus supaya cahaya di belakangnya kelihatan */
  --win-bg: rgba(16, 16, 18, .72);
  --win-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 70px -22px rgba(0, 0, 0, .6);
  --pink: #ffbfd4;
  --lav: #b49cff;
  --grad: linear-gradient(135deg, #ffbfd4, #b49cff);
  --ink: #0b0b0c;
  --wall:
    radial-gradient(55% 55% at 18% 28%, #f7b2c9 0%, transparent 62%),
    radial-gradient(50% 60% at 82% 18%, #a7c1ff 0%, transparent 62%),
    radial-gradient(60% 60% at 72% 82%, #c6a6ff 0%, transparent 62%),
    radial-gradient(45% 50% at 22% 88%, #ffd8b4 0%, transparent 62%),
    linear-gradient(160deg, #efe9fb, #dcd6f3);
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.5 var(--font);
  overflow-x: hidden;
}
/* cahaya pastel di belakang halaman */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(45% 40% at 10% 0%, rgba(255, 191, 212, .2), transparent 70%),
    radial-gradient(40% 40% at 95% 10%, rgba(180, 156, 255, .22), transparent 70%),
    radial-gradient(50% 45% at 85% 100%, rgba(180, 156, 255, .12), transparent 70%),
    radial-gradient(40% 35% at 5% 95%, rgba(255, 191, 212, .08), transparent 70%);
}
img, svg { display: block; }
a { color: inherit; }
a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 10px; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.1; }
p { margin: 0; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
@media (min-width: 700px) { .wrap { width: min(1120px, 100% - 64px); } }

/* ---------- header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.brand img { border-radius: 9px; }
.top-right { display: flex; align-items: center; gap: 10px; }
/* pilihan bahasa: yang aktif putih, seperti pilihan di jendela Intip */
.lang {
  display: inline-flex; padding: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.lang a {
  display: grid; place-items: center; min-width: 40px; height: 34px; padding: 0 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-decoration: none; color: var(--muted);
}
.lang a:hover { color: var(--text); }
.lang a[aria-current] { background: rgba(255, 255, 255, .95); color: #141414; }
.lang a:focus-visible { border-radius: 999px; }
.beta-pill {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  color: var(--pink); background: rgba(255, 191, 212, .1); border: 1px solid rgba(255, 191, 212, .28);
}

/* ---------- hero ---------- */
.hero { display: grid; gap: 52px; align-items: center; padding: 28px 0 88px; }
.hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-logo { width: 92px; height: 92px; filter: drop-shadow(0 20px 40px rgba(180, 156, 255, .38)); }
.hero h1 { margin-top: 22px; font-size: clamp(64px, 12vw, 104px); font-weight: 800; letter-spacing: -.045em; line-height: .92; }
.hero h1 span {
  display: block; margin-top: 14px;
  font-size: clamp(22px, 4.6vw, 30px); font-weight: 700; letter-spacing: -.015em; line-height: 1.15;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { margin-top: 12px; font-size: clamp(18px, 2.2vw, 21px); color: var(--muted); }
.cta { margin-top: 34px; display: flex; flex-direction: column; align-items: center; }

/* tombol utama = tombol putih di jendela Intip (.st-btn.primary), dengan cahaya pink-ungu */
.btn-dl {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 0 26px 0 22px; border-radius: 999px;
  background: rgba(255, 255, 255, .95); color: #141414;
  font-weight: 800; font-size: 19px; letter-spacing: -.01em; text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 18px 50px -14px rgba(180, 156, 255, .75), 0 10px 30px -18px rgba(255, 191, 212, .8);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-dl span { white-space: nowrap; }
.btn-dl svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 400px) {
  .btn-dl { gap: 10px; padding: 0 18px 0 16px; font-size: 17px; }
}
.btn-dl .arrow { width: 20px; height: 20px; opacity: .7; }
.btn-dl:hover { transform: translateY(-2px); box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 24px 60px -14px rgba(180, 156, 255, .9), 0 12px 34px -18px rgba(255, 191, 212, .9); }
.btn-dl:active { transform: scale(.97); }
.btn-dl:focus-visible { border-radius: 999px; }

.meta { margin-top: 14px; color: var(--muted); font-size: 15px; word-spacing: .12em; }
.meta .nw { white-space: nowrap; }
.beta-note { margin-top: 10px; color: var(--muted); font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.beta-note b {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 6px; color: var(--pink); background: rgba(255, 191, 212, .12);
}

.app-langs { margin-top: 6px; }
.app-langs svg { width: 17px; height: 17px; color: var(--lav); }
.btn-wa {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 26px; min-height: 48px; padding: 0 20px 0 16px; border-radius: 999px;
  color: var(--text); text-decoration: none; font-weight: 700;
  background: rgba(37, 211, 102, .1); border: 1px solid rgba(37, 211, 102, .38);
  transition: background .2s ease;
}
.btn-wa:hover { background: rgba(37, 211, 102, .18); }
.btn-wa svg { width: 22px; height: 22px; color: #25d366; }
.btn-wa[hidden] { display: none; }

@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; padding: 44px 0 120px; }
  .hero-copy, .cta { text-align: left; align-items: flex-start; }
}

/* ---------- gambar: layar, notch, dock ---------- */
/* Semua ukuran di dalam gambar pakai --u (persen lebar gambar), jadi ikut membesar/mengecil. */
@property --w { syntax: '<number>'; inherits: false; initial-value: 21; }
@property --h { syntax: '<number>'; inherits: false; initial-value: 5.6; }
@property --r { syntax: '<number>'; inherits: false; initial-value: 2.8; }

.screen { margin: 0; position: relative; container-type: inline-size; }
.screen::before {
  content: ""; position: absolute; inset: 10% 6% -4%; z-index: -1;
  background: var(--grad); filter: blur(70px); opacity: .25; border-radius: 40px;
}
.u-hero { --u: 1cqw; }
.u-pic { --u: 1.75cqw; }
.display {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--wall);
  border: calc(var(--u) * 1.2) solid #050506; border-top-width: calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 2.8);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 90px -40px rgba(0, 0, 0, .9);
}

.notch {
  --w: 21; --h: 5.6; --r: 2.8;
  position: absolute; left: 50%; top: 0; translate: -50% 0;
  width: calc(var(--u) * var(--w)); height: calc(var(--u) * var(--h));
  border-radius: 0 0 calc(var(--u) * var(--r)) calc(var(--u) * var(--r));
  background: #0b0b0c; color: #fff;
  font-size: calc(var(--u) * 1.8); line-height: 1.25;
  box-shadow: 0 calc(var(--u) * 1.4) calc(var(--u) * 3) calc(var(--u) * -1.4) rgba(30, 10, 50, .45);
}
/* "bahu" notch: lengkung cekung di kiri-kanan. Digambar sebagai background (bukan mask) dan
   menumpuk 1px ke badan notch, supaya tidak ada garis tipis di sambungannya. */
.notch::before, .notch::after {
  content: ""; position: absolute; top: 0;
  width: calc(var(--u) * 2.8 + 1px); height: calc(var(--u) * 2.8);
}
.notch::before {
  right: calc(100% - 1px);
  background: radial-gradient(circle at 0 100%, transparent calc(var(--u) * 2.8 - .5px), #0b0b0c calc(var(--u) * 2.8));
}
.notch::after {
  left: calc(100% - 1px);
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--u) * 2.8 - .5px), #0b0b0c calc(var(--u) * 2.8));
}
.nclip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.n-layer { position: absolute; top: 0; left: 50%; translate: -50% 0; opacity: 0; }

/* diam: dua mata */
.n-idle, .s-idle { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 3.4); }
.n-idle { width: calc(var(--u) * 21); height: calc(var(--u) * 5.6); opacity: 1; }
.eye { width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.75); border-radius: 50%; background: #fff; animation: blink 4.6s infinite; }
.n-idle, .s-idle { animation: look 9s ease-in-out infinite; }
.s-idle { --w: 21; --h: 5.6; animation: none; }
.s-idle .eye { animation: blink 4.6s infinite, peek 6s ease-in-out infinite; }

/* notif */
.n-notif, .s-notif {
  display: flex; flex-direction: column; justify-content: flex-end; gap: calc(var(--u) * .8);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 1.5) calc(var(--u) * 1.5);
}
.n-notif { width: calc(var(--u) * 50); height: calc(var(--u) * 18); }
.s-notif { --w: 50; --h: 18; --r: 4.2; }
.nf {
  display: flex; align-items: center; gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1) calc(var(--u) * 1.3); border-radius: calc(var(--u) * 2.2);
  background: rgba(255, 255, 255, .08);
}
.app {
  flex: none; display: grid; place-items: center;
  width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-radius: 50%;
}
.app svg { width: 58%; height: 58%; color: #fff; }
.app.wa { background: #25d366; }
.app.dc { background: #5865f2; }
.nf-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nf-t b { font-weight: 700; font-size: calc(var(--u) * 1.85); }
.nf-t span { color: rgba(255, 255, 255, .62); font-size: calc(var(--u) * 1.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf time { align-self: flex-start; color: rgba(255, 255, 255, .45); font-size: calc(var(--u) * 1.45); }

/* musik */
.n-music, .s-music {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 1fr auto;
  column-gap: calc(var(--u) * 1.5); row-gap: calc(var(--u) * 1);
  align-items: center; padding: calc(var(--u) * 1.6) calc(var(--u) * 2) calc(var(--u) * 1.8);
}
.n-music { width: calc(var(--u) * 44); height: calc(var(--u) * 13); }
.s-music { --w: 44; --h: 13; --r: 4.2; }
.art {
  grid-row: 1 / 3; width: calc(var(--u) * 8.4); height: calc(var(--u) * 8.4); border-radius: calc(var(--u) * 1.6);
  background: radial-gradient(60% 60% at 30% 25%, rgba(255, 255, 255, .55), transparent 60%), linear-gradient(150deg, #ff8fc1, #8a5cff);
}
.mu-t { display: flex; flex-direction: column; min-width: 0; }
.mu-t b { font-weight: 700; font-size: calc(var(--u) * 2); }
.mu-t span { color: rgba(255, 255, 255, .6); font-size: calc(var(--u) * 1.6); }
.mu-c { display: flex; align-items: center; gap: calc(var(--u) * 1.2); }
.mu-c svg { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); }
.mu-c .pp { width: calc(var(--u) * 3); height: calc(var(--u) * 3); }
.mu-c .flip { transform: scaleX(-1); }
.prog {
  grid-column: 2 / 4; height: calc(var(--u) * .55); border-radius: 99px;
  background: linear-gradient(90deg, #fff 0 38%, rgba(255, 255, 255, .22) 38%);
}

/* sholat */
.s-sholat {
  --w: 50; --h: 17; --r: 4.2;
  display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 2.2) calc(var(--u) * 1.6);
}
.sh-top { display: flex; align-items: center; gap: calc(var(--u) * 1); }
.sh-top svg { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); color: var(--pink); }
.sh-top span { color: rgba(255, 255, 255, .7); font-size: calc(var(--u) * 1.9); }
.sh-top b { font-size: calc(var(--u) * 3.6); font-weight: 800; letter-spacing: -.02em; }
.sh-top em {
  margin-left: auto; font-style: normal; font-weight: 700; font-size: calc(var(--u) * 1.6);
  padding: calc(var(--u) * .5) calc(var(--u) * 1.1); border-radius: 99px; color: var(--ink); background: var(--grad);
}
.sh-row { display: flex; justify-content: space-between; }
.sh-row i {
  font-style: normal; font-size: calc(var(--u) * 1.5); color: rgba(255, 255, 255, .5);
  padding: calc(var(--u) * .45) calc(var(--u) * .9); border-radius: 99px;
}
.sh-row i.on { color: #fff; font-weight: 700; background: rgba(255, 255, 255, .14); }

/* dock (tema kaca) */
.dock {
  position: absolute; left: 50%; bottom: calc(var(--u) * 1.6); translate: -50% 0;
  display: flex; align-items: center; gap: calc(var(--u) * .9);
  padding: calc(var(--u) * .9) calc(var(--u) * 1.1) calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 2.6);
  background: rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(255, 255, 255, .35), 0 calc(var(--u) * 2) calc(var(--u) * 4) calc(var(--u) * -1.6) rgba(40, 20, 60, .45);
}
.ico {
  position: relative; flex: none; display: grid; place-items: center;
  width: calc(var(--u) * 4.8); height: calc(var(--u) * 4.8); border-radius: calc(var(--u) * 1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 calc(var(--u) * .5) calc(var(--u) * 1.2) calc(var(--u) * -.4) rgba(0, 0, 0, .45);
}
.ico.run::before {
  content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * -.95); translate: -50% 0;
  width: calc(var(--u) * .5); height: calc(var(--u) * .5); border-radius: 50%; background: rgba(30, 20, 50, .55);
}
.ico svg { width: 56%; height: 56%; color: #fff; }
.ico.start { background: rgba(60, 50, 80, .5); grid-template-columns: repeat(2, calc(var(--u) * 1.1)); gap: calc(var(--u) * .35); place-content: center; }
.ico.start i { width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); border-radius: calc(var(--u) * .3); background: #fff; }
.ico.files { background: linear-gradient(160deg, #ffd86b, #f2a630); }
.ico.files::after { content: ""; width: 52%; height: 38%; border: calc(var(--u) * .34) solid #fff; border-radius: calc(var(--u) * .4); border-top-left-radius: 0; }
.ico.web { background: linear-gradient(160deg, #5c97ff, #2f5de0); }
.ico.web::after {
  content: ""; width: 52%; height: 52%; border-radius: 50%; border: calc(var(--u) * .34) solid #fff;
  background: linear-gradient(#fff, #fff) center / 100% calc(var(--u) * .3) no-repeat;
}
.ico.wa { background: linear-gradient(160deg, #4ee083, #1fb455); }
.ico.music { background: linear-gradient(160deg, #ff8fc1, #8a5cff); }
.ico.music::after { content: "\266B"; color: #fff; font-size: calc(var(--u) * 2.6); line-height: 1; font-family: 'Segoe UI Symbol', 'Apple Symbols', sans-serif; }
.ico.notes { background: linear-gradient(160deg, #fff3b0, #ffd84d); }
.ico.notes::after {
  content: ""; width: 48%; height: calc(var(--u) * .34); border-radius: 9px; background: #8a6a00;
  box-shadow: 0 calc(var(--u) * -.95) 0 #8a6a00, 0 calc(var(--u) * .95) 0 #8a6a00;
}
.ico.cal { background: #fff; overflow: hidden; grid-template-rows: auto 1fr; place-items: stretch; }
.ico.cal b { background: #f0473e; color: #fff; font-size: calc(var(--u) * 1); font-weight: 800; text-align: center; line-height: 1.5; }
.ico.cal i { font-style: normal; color: #1b1530; font-weight: 800; font-size: calc(var(--u) * 2.2); display: grid; place-items: center; line-height: 1; }
.ico.gear { background: linear-gradient(160deg, #a4aab0, #5f6368); }
.ico.gear::after { content: ""; width: 46%; height: 46%; border-radius: 50%; border: calc(var(--u) * .45) dotted #fff; outline: calc(var(--u) * .3) solid #fff; outline-offset: calc(var(--u) * -.95); }
.sep { width: 1px; height: calc(var(--u) * 3.4); background: rgba(40, 30, 60, .22); }
.clock { display: flex; flex-direction: column; align-items: flex-end; color: #1b1530; padding: 0 calc(var(--u) * .4); line-height: 1.2; }
.clock b { font-size: calc(var(--u) * 1.5); font-weight: 800; }
.clock i { font-style: normal; font-size: calc(var(--u) * 1.05); opacity: .7; }

/* animasi notch di gambar utama: diam -> notif -> musik -> diam */
.notch.live { animation: notch-cycle 14s cubic-bezier(.34, 1.25, .5, 1) infinite; }
.live .n-idle { animation: l-idle 14s infinite, look 9s ease-in-out infinite; }
.live .n-notif { animation: l-notif 14s infinite; }
.live .n-music { animation: l-music 14s infinite; }
@keyframes notch-cycle {
  0%, 20% { --w: 21; --h: 5.6; --r: 2.8; }
  26%, 52% { --w: 50; --h: 18; --r: 4.2; }
  58%, 84% { --w: 44; --h: 13; --r: 4.2; }
  90%, 100% { --w: 21; --h: 5.6; --r: 2.8; }
}
@keyframes l-idle { 0%, 19% { opacity: 1; } 22%, 88% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes l-notif { 0%, 25% { opacity: 0; scale: .96; } 30%, 50% { opacity: 1; scale: 1; } 54%, 100% { opacity: 0; scale: 1; } }
@keyframes l-music { 0%, 57% { opacity: 0; scale: .96; } 62%, 82% { opacity: 1; scale: 1; } 86%, 100% { opacity: 0; scale: 1; } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
@keyframes look { 0%, 35%, 100% { transform: translateX(0); } 45%, 58% { transform: translateX(calc(var(--u) * -.7)); } 68%, 82% { transform: translateX(calc(var(--u) * .7)); } }
@keyframes peek { 0%, 30%, 100% { translate: 0 0; } 45%, 60% { translate: calc(var(--u) * -.5) 0; } 75%, 88% { translate: calc(var(--u) * .5) 0; } }

@media (prefers-reduced-motion: reduce) {
  .notch.live { animation: none; --w: 50; --h: 18; --r: 4.2; }
  .live .n-idle, .live .n-music { animation: none; opacity: 0; }
  .live .n-notif { animation: none; opacity: 1; }
  .eye, .s-idle .eye, .ss-run { animation: none !important; }
  .btn-dl { transition: none; }
}

/* ---------- section umum ---------- */
.features, .steps { padding: 24px 0 72px; }
.features h2, .steps h2 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 800; letter-spacing: -.03em; margin-bottom: 28px; }

.pic {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size;
  border-radius: 22px; background: var(--wall);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 50px -30px rgba(0, 0, 0, .9);
}
.feat-grid, .step-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px 20px; }
@media (min-width: 560px) { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .feat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.feat h3, .step h3 { margin-top: 16px; font-size: 21px; font-weight: 800; }
.feat p, .step p { margin-top: 4px; color: var(--muted); font-size: 15.5px; }
.step p b { color: var(--text); font-weight: 700; }

/* pilihan notch/dock: layar mini yang sama dengan Pengaturan → Fitur di aplikasi */
.modes {
  margin-top: 44px; padding: 22px 24px; border-radius: 26px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px;
  background: var(--win-bg); box-shadow: var(--win-shadow);
  -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
}
.modes h3 { font-size: 21px; font-weight: 800; flex: 1 1 180px; }
.modes ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; flex: 3 1 420px; }
.modes li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px 10px; border-radius: 16px; background: rgba(255, 255, 255, .05); font-size: 14px; text-align: center; }
.modes b { font-weight: 700; }
.mini { width: 100%; max-width: 110px; color: #fff; --cut: #1b1b1f; }
.mini .p-screen { fill: rgba(127, 127, 127, .1); stroke: rgba(127, 127, 127, .32); stroke-width: 1.5; }
.mini .p-on { fill: currentColor; }
.mini .p-dim { fill: currentColor; opacity: .25; }
.mini .p-dash { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-dasharray: 2.4 2; opacity: .7; }
.mini .p-cut { fill: var(--cut); }
@media (max-width: 480px) { .modes { padding: 18px 16px; } .modes ul { flex-basis: 100%; gap: 8px; } .modes li { font-size: 13px; } }

/* dock di gambar fitur */
.dock-pic { --u: 2.6cqw; }
.dock-pic .dock { bottom: 14cqw; gap: calc(var(--u) * 1); }
.dock-pic .ico.big { scale: 1.32; transform-origin: 50% 100%; margin-inline: calc(var(--u) * .8); }
.dock-tip {
  position: absolute; left: 50%; bottom: 42cqw; translate: -50% 0;
  padding: 1.4cqw 3.4cqw; border-radius: 99px; font-size: 4.4cqw; font-weight: 700;
  color: #fff; background: rgba(20, 16, 28, .82);
}

/* langkah pasang */
@media (min-width: 760px) { .step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step-pic { aspect-ratio: 16 / 10; display: grid; place-items: center; }
.num {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; vertical-align: 2px;
  border-radius: 50%; background: var(--grad); color: var(--ink); font-size: 15px; font-weight: 800;
}
.dl-card {
  display: flex; align-items: center; gap: 12px; width: 84%; padding: 14px 16px;
  border-radius: 16px; background: rgba(18, 16, 24, .9); color: #fff;
  box-shadow: 0 20px 40px -20px rgba(30, 10, 50, .7);
}
.dl-card img { flex: none; width: 40px; height: 40px; border-radius: 10px; }
.dl-card > span { min-width: 0; display: flex; flex-direction: column; }
.dl-card b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-card i { font-style: normal; font-size: 13px; color: rgba(255, 255, 255, .62); }
.ss {
  width: 84%; padding: 16px 16px 14px; border-radius: 6px; color: #fff;
  background: #1f5fb5; box-shadow: 0 20px 40px -20px rgba(10, 30, 70, .8);
  display: flex; flex-direction: column; gap: 8px;
}
.ss b { font-size: 15px; font-weight: 700; line-height: 1.2; margin-bottom: 2px; }
.ss .sk { display: block; height: 6px; width: 90%; border-radius: 9px; background: rgba(255, 255, 255, .35); }
.ss .sk.short { width: 60%; }
.ss-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.ss-btns span { font-size: 12px; padding: 5px 9px; border: 1px solid rgba(255, 255, 255, .7); white-space: nowrap; }
.ss-run { border-radius: 3px; animation: ring 2.4s ease-in-out infinite; }
@keyframes ring { 0%, 100% { box-shadow: 0 0 0 2px var(--pink); } 50% { box-shadow: 0 0 0 5px rgba(255, 191, 212, .45); } }
.done-pic { --u: 2.3cqw; aspect-ratio: 16 / 10; }
.bug { margin-top: 34px; color: var(--muted); }
.bug a { color: var(--pink); text-underline-offset: 3px; }

/* ---------- tips: biar makin bersih ---------- */
.tips { padding: 8px 0 64px; }
.tips h2 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 800; letter-spacing: -.03em; margin-bottom: 28px; }

/* sebelum / sesudah */
.ba { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; margin-bottom: 40px; }
.ba-pane { margin: 0; }
.ba figcaption { margin-top: 10px; text-align: center; font-size: 15px; font-weight: 700; color: var(--muted); }
.ba .after figcaption { color: var(--text); }
.ba-arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--glass-2); margin-bottom: 30px; }
.ba-arrow svg { width: 22px; height: 22px; color: var(--lav); }
.scr {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size;
  border: 5px solid #050506; border-top-width: 9px; border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.scr.before { background: radial-gradient(60% 80% at 70% 35%, #38bdf8 0%, transparent 65%), linear-gradient(160deg, #1e3a8a, #1d4ed8 55%, #0c4a6e); }
.scr.clean { --u: 1.5cqw; background: var(--wall); }
@media (max-width: 560px) { .ba { gap: 8px; } .ba-arrow { width: 30px; height: 30px; } .scr { border-width: 3px; border-top-width: 6px; border-radius: 10px; } }

/* ikon desktop (gambar) */
.desk-icons { position: absolute; left: 3.5cqw; top: 3.5cqw; display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 2.4cqw 3.4cqw; }
.desk-icons i { position: relative; display: block; width: 5.6cqw; height: 4.6cqw; border-radius: 1cqw; background: var(--c, #fbbf24); }
.desk-icons i::after { content: ""; position: absolute; left: .4cqw; right: .4cqw; top: 5.4cqw; height: .8cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .7); }
.desk-icons i:nth-child(3n + 2) { --c: #60a5fa; }
.desk-icons i:nth-child(4n + 3) { --c: #f87171; }
.desk-icons i:nth-child(5n + 4) { --c: #4ade80; }
.desk-icons i:nth-child(7n) { --c: #e5e7eb; }
.desk-icons.faded { opacity: .35; }
.win-taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 7.5cqw; display: flex; align-items: center; justify-content: center; gap: 1.6cqw; background: rgba(14, 16, 26, .9); }
.win-taskbar i { width: 3.8cqw; height: 3.8cqw; border-radius: .9cqw; background: rgba(255, 255, 255, .72); }
.win-taskbar i.st { background: #60a5fa; }
.win-taskbar b { position: absolute; right: 2.6cqw; top: 2cqw; width: 6.5cqw; height: 1.2cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .6); box-shadow: 0 2cqw 0 -.15cqw rgba(255, 255, 255, .35); }

.tip-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px 20px; }
@media (min-width: 760px) { .tip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tip h3 { margin-top: 16px; font-size: 21px; font-weight: 800; }
.tip p { margin-top: 6px; color: var(--muted); font-size: 15.5px; }
.tip p b { color: var(--text); font-weight: 700; }
.tip .tip-note { font-size: 14px; color: rgba(245, 243, 250, .55); }
.tip-link { color: var(--pink); font-weight: 700; text-underline-offset: 3px; }

/* tip 1: menu klik kanan Windows */
.ctx {
  position: absolute; left: 22cqw; top: 22cqw; width: 30cqw; padding: 1.2cqw; border-radius: 2.4cqw;
  display: flex; flex-direction: column; gap: .6cqw; color: #fff; font-size: 3.1cqw; line-height: 1.2;
  background: rgba(36, 36, 42, .96); box-shadow: 0 0 0 .3cqw rgba(255, 255, 255, .08), 0 3cqw 6cqw -2cqw rgba(0, 0, 0, .6);
}
.ctx.sub { left: 47cqw; top: 15cqw; width: auto; max-width: 50cqw; }
.ctx-item { display: flex; align-items: center; gap: 1.6cqw; padding: 1.4cqw 1.8cqw; border-radius: 1.4cqw; white-space: nowrap; }
.ctx-item em { margin-left: auto; font-style: normal; opacity: .7; }
.ctx-item.on { background: rgba(255, 255, 255, .12); }
.ctx-item.check { box-shadow: 0 0 0 .5cqw var(--pink); background: rgba(255, 191, 212, .14); }
.ctx-sk { display: block; height: 1.4cqw; margin: 1.6cqw 1.8cqw; width: 60%; border-radius: 1cqw; background: rgba(255, 255, 255, .22); }
.ctx-sk.short { width: 40%; }
.tick { position: relative; flex: none; width: 2.6cqw; height: 2.6cqw; }
.tick::after {
  content: ""; position: absolute; left: .8cqw; top: 0; width: .9cqw; height: 1.8cqw;
  border: solid currentColor; border-width: 0 .45cqw .45cqw 0; transform: rotate(45deg);
}
.tip-pic .cursor { position: absolute; left: 70cqw; top: 31cqw; width: 6cqw; height: 6cqw; filter: drop-shadow(0 .6cqw .8cqw rgba(0, 0, 0, .4)); }

/* tip 2: jendela Pengaturan Intip + dock */
.set-pic { --u: 1.7cqw; }
.set-win {
  position: absolute; left: 8cqw; right: 8cqw; top: 6cqw; padding: 2.6cqw 3cqw 3cqw; border-radius: 3.6cqw;
  display: flex; flex-direction: column; gap: 2.6cqw; color: #fff;
  background: rgba(16, 16, 18, .94); box-shadow: inset 0 .2cqw 0 rgba(255, 255, 255, .1), inset 0 0 0 .2cqw rgba(255, 255, 255, .06), 0 4cqw 8cqw -3cqw rgba(0, 0, 0, .6);
}
.set-top { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.set-top b { font-size: 3.8cqw; font-weight: 800; }
.set-tabs { display: flex; gap: .6cqw; padding: .6cqw; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.set-tabs i { font-style: normal; font-size: 2.6cqw; font-weight: 700; padding: .8cqw 1.8cqw; border-radius: 99px; color: rgba(255, 255, 255, .6); }
.set-tabs i.on { background: rgba(255, 255, 255, .95); color: #141414; }
.set-row { display: flex; align-items: center; gap: 2cqw; padding: 2cqw; border-radius: 2.4cqw; background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 .5cqw var(--pink); }
.tb-ico { flex: none; width: 7cqw; height: 4.4cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .1); position: relative; }
.tb-ico::after { content: ""; position: absolute; left: .8cqw; right: .8cqw; bottom: .8cqw; height: .9cqw; border-radius: 1cqw; background: currentColor; }
.set-label { flex: 1; font-size: 3.2cqw; font-weight: 700; }
.sw { flex: none; position: relative; width: 8cqw; height: 4.6cqw; border-radius: 99px; background: rgba(255, 255, 255, .95); }
.sw i { position: absolute; top: .6cqw; right: .6cqw; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: #141414; }

/* tip 3: tumpukan wallpaper */
.walls-pic { display: block; background: rgba(255, 255, 255, .04); }
.walls-pic img {
  position: absolute; left: 50%; top: 50%; width: 62cqw; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3cqw;
  box-shadow: 0 0 0 .3cqw rgba(255, 255, 255, .25), 0 3cqw 6cqw -2cqw rgba(0, 0, 0, .7); transition: transform .35s cubic-bezier(.34, 1.4, .5, 1);
}
.walls-pic img:nth-child(1) { transform: translate(-72%, -56%) rotate(-9deg); }
.walls-pic img:nth-child(2) { transform: translate(-28%, -44%) rotate(8deg); }
.walls-pic img:nth-child(3) { transform: translate(-50%, -50%); }
.walls-pic:hover img:nth-child(1) { transform: translate(-80%, -58%) rotate(-12deg); }
.walls-pic:hover img:nth-child(2) { transform: translate(-20%, -42%) rotate(11deg); }
.walls-pic:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .walls-pic img { transition: none; } }

/* wallpaper gratis: thumbnail kecil, PNG 4K baru diambil waktu diklik */
.walls { padding: 8px 0 40px; }
.walls h2 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 800; letter-spacing: -.03em; margin-bottom: 28px; }
.wall-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .wall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; } }
.wall { display: block; text-decoration: none; border-radius: 18px; }
.wall-pic {
  --u: 1.2cqw;
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size;
  border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 44px -28px rgba(0, 0, 0, .9);
  transition: transform .3s cubic-bezier(.34, 1.4, .5, 1);
}
.wall-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wall:hover .wall-pic { transform: translateY(-3px); }
.wall:active .wall-pic { transform: scale(.98); }
.wall-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.wall-meta b { font-size: 17px; font-weight: 800; }
.wall-meta span { color: var(--muted); font-size: 13.5px; }
.wall-meta svg { width: 18px; height: 18px; margin-left: auto; color: var(--muted); transition: color .2s ease; }
.wall:hover .wall-meta svg { color: var(--text); }
.wall-grid li:nth-child(2) .eye { animation-delay: .7s; }
.wall-grid li:nth-child(3) .eye { animation-delay: 1.9s; }
.wall-grid li:nth-child(4) .eye { animation-delay: 2.6s; }
.wall-grid li:nth-child(5) .eye { animation-delay: 3.4s; }
.wall-grid li:nth-child(6) .eye { animation-delay: 1.2s; }
@media (max-width: 480px) { .wall-meta { flex-wrap: wrap; gap: 2px 8px; } .wall-meta span { order: 3; flex-basis: 100%; } }

/* ajakan terakhir */
.again {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 72px 0 96px; position: relative;
}
.again::before {
  content: ""; position: absolute; left: 50%; top: 40%; width: min(560px, 90%); height: 220px; translate: -50% -50%; z-index: -1;
  background: var(--grad); filter: blur(90px); opacity: .18; border-radius: 50%;
}
.crew { display: flex; align-items: flex-end; justify-content: center; }
.crew img { width: 84px; height: 84px; margin: 0 -6px; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5)); }
.crew img:nth-child(1) { rotate: -10deg; translate: 0 6px; }
.crew img:nth-child(2) { rotate: -4deg; }
.crew img:nth-child(4) { rotate: 4deg; }
.crew img:nth-child(5) { rotate: 10deg; translate: 0 6px; }
.crew .crew-logo { width: 96px; height: 96px; margin: 0 10px 8px; filter: drop-shadow(0 20px 40px rgba(180, 156, 255, .45)); }
@media (max-width: 480px) {
  .crew img { width: 58px; height: 58px; margin: 0 -5px; }
  .crew .crew-logo { width: 68px; height: 68px; margin: 0 6px 6px; }
}
.again h2 { margin: 22px 0 26px; font-size: clamp(32px, 5vw, 48px); font-weight: 800; letter-spacing: -.03em; }

/* ---------- penutup: pembuat & traktir ---------- */
.foot { padding-bottom: 36px; }
.foot-cards { display: grid; gap: 16px; }
@media (min-width: 760px) { .foot-cards { grid-template-columns: 1fr 1fr; } }
.card {
  padding: 28px; border-radius: 26px;
  background: var(--win-bg); box-shadow: var(--win-shadow);
  -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
}
.mail { margin-top: 14px; color: var(--muted); font-size: 15px; user-select: all; overflow-wrap: anywhere; }
.kicker { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 15px; }
.kicker svg { width: 16px; height: 16px; color: var(--pink); }
.card h2 { margin-top: 6px; font-size: clamp(26px, 3.4vw, 32px); font-weight: 800; letter-spacing: -.025em; }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 18px 0 14px;
  border-radius: 999px; text-decoration: none; font-weight: 700;
  background: var(--glass-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: background .2s ease, transform .3s cubic-bezier(.34, 1.4, .5, 1);
}
.chip:hover { background: rgba(255, 255, 255, .15); }
.chip:active { transform: scale(.95); }
.chip:focus-visible { border-radius: 999px; }
.chip svg { width: 20px; height: 20px; }
.chip.trakteer svg { color: #ff6b78; }
.chip.kofi svg { color: #52c6f2; }
.legal {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
}
.report-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--text); font-weight: 600; text-decoration: none; }
.report-link svg { width: 18px; height: 18px; color: var(--lav); }
.report-link:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- halaman pesan (404 / error) ---------- */
.msg-page { display: grid; place-items: center; padding: 24px 16px; }
.msg { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; max-width: 420px; }
.msg img { margin-bottom: 8px; }
.msg h1 { font-size: 30px; font-weight: 800; }
.msg p { color: var(--muted); overflow-wrap: anywhere; }
.btn-ghost {
  margin-top: 14px; display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px;
  border-radius: 999px; text-decoration: none; font-weight: 700;
  background: var(--glass-2); border: 1px solid var(--line);
}