/* Layar kunci & beranda: HP di dalam HP, semua widget adalah benda yang ditempel di wallpaper. */

.lapis-beranda {
  position: absolute;
  inset: 0;
  overflow: hidden;
  --teks-beranda: var(--tinta);
  --bayang-teks: none;
}
.lapis-beranda.wp-foto {
  --teks-beranda: #fff;
  --bayang-teks: 0 1px 2px rgb(10 8 14 / 0.6), 0 0 12px rgb(10 8 14 / 0.35);
  --cincin: #fff;
}

/* kertas pink kapas: wallpaper bawaan & layar kunci */
.kertas-dasar,
.wallpaper {
  background-color: var(--pink-kapas);
  background-image:
    var(--serat-halus),
    radial-gradient(120% 70% at 15% 0%, rgb(255 255 255 / 0.55), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgb(232 120 168 / 0.25), transparent 70%);
  background-size: 180px 180px, auto, auto;
}
.wallpaper {
  position: absolute;
  inset: 0;
  transition: opacity 0.4s;
}
.wallpaper.foto {
  background-image:
    linear-gradient(180deg, rgb(10 8 14 / 0.5), rgb(10 8 14 / 0.08) 30%, rgb(10 8 14 / 0.05) 60%, rgb(10 8 14 / 0.55)),
    var(--wp);
  background-size: cover;
  background-position: center;
}

.beranda {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: calc(var(--aman-atas) + 14px) 16px calc(var(--aman-bawah) + 14px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.beranda::-webkit-scrollbar {
  display: none;
}

.bar-atas {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  color: var(--teks-beranda);
  text-shadow: var(--bayang-teks);
}
.beranda-tanggal {
  font: 700 21px/1.1 var(--font-tangan);
}
.beranda-pasangan {
  font: 650 13.5px/1.2 var(--font-ui);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- widget lagu: J-card kaset ---------- */
/* J-card: punggung kaset (judul tegak) + lipatan, sampul instax kecil, badan bertulisan tangan */
.jcard {
  position: relative;
  display: grid;
  grid-template-columns: 30px 92px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  min-height: 136px;
  padding-right: 12px;
  background: var(--kertas);
  border-radius: 2px;
  color: var(--tinta);
  box-shadow: var(--bayang-kertas);
  rotate: -1deg;
  margin-top: 6px;
}
.jcard > .pita {
  top: -10px;
  left: -14px;
  width: 70px;
  rotate: -30deg;
  z-index: 3;
}
.jcard-punggung {
  align-self: stretch;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--mawar);
  border-radius: 2px 0 0 2px;
  box-shadow: inset -7px 0 7px -6px rgb(59 34 54 / 0.38);
}
.jcard-punggung > span {
  writing-mode: vertical-rl;
  rotate: 180deg;
  font: 700 16px/1 var(--font-tangan);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.jcard-sampul {
  width: 92px;
  height: 92px;
  padding: 4px;
  background: #fff;
  box-shadow: 0 1px 3px rgb(59 34 54 / 0.3);
  rotate: -3deg;
  display: grid;
  place-items: center;
}
.jcard-sampul img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jcard-sampul .kaset {
  width: 80px;
}
.jcard-isi {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 12px 0 10px;
}
.jcard-judul {
  font: 700 23px/1.02 var(--font-tangan);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.jcard-artis {
  font: 13.5px/1.3 var(--font-ui);
  color: var(--tinta-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jcard-artis .tanda-orang {
  font-weight: 650;
  color: var(--tinta);
}
/* progres = pita kaset cokelat yang tergulung di antara dua roda */
.jcard-progres {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
.gulungan {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--tinta) 0 1.7px, transparent 2.1px),
    conic-gradient(#fff 0 24deg, var(--tinta) 24deg 120deg, #fff 120deg 144deg, var(--tinta) 144deg 240deg, #fff 240deg 264deg, var(--tinta) 264deg);
}
.main .gulungan {
  animation: putar 1.8s linear infinite;
}
.pita-kaset {
  flex: 1;
  height: 5px;
  background: #eedfd6;
  overflow: hidden;
}
.pita-kaset > span {
  display: block;
  height: 100%;
  background: #7a4a3a;
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  transition: transform 0.3s linear;
}
.jcard-kontrol {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}
.jcard-kontrol .tombol-bulat {
  width: 38px;
  height: 38px;
  background: #fff;
  color: var(--tinta);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgb(59 34 54 / 0.1), 0 5px 9px -3px rgb(59 34 54 / 0.45);
}
.jcard-kontrol .tombol-ikon .ikon {
  width: 20px;
  height: 20px;
}
.jcard-kontrol .tombol-putar {
  width: 46px;
  height: 46px;
  background: var(--tinta);
  color: #fff;
  box-shadow: 0 0 0 3px #fff, 0 5px 10px -4px rgb(59 34 54 / 0.5);
}
.jcard-galat {
  font-size: 12.5px;
  color: var(--alarm-tua);
}
.jcard-kosong .jcard-judul {
  font-size: 22px;
}
.jcard-kosong .tombol {
  justify-self: start;
  min-height: 40px;
  padding: 0 14px;
  font-size: 14.5px;
  margin-top: 6px;
}
.main .roda {
  animation: putar 2.6s linear infinite;
}

/* ---------- kalender sobek & memo ---------- */
.baris-widget {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.kalender,
.memo {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 158px;
  border: 0;
  padding: 0;
  text-align: left;
  color: var(--tinta);
  text-decoration: none;
}
.kalender {
  background: var(--kertas);
  border-radius: 3px;
  box-shadow: var(--bayang-kertas);
  rotate: 1.6deg;
  overflow: hidden;
}
.kalender-atas {
  padding: 9px 12px 7px;
  background: var(--tinta);
  color: #fff;
  font: 14px/1 var(--font-stiker);
  letter-spacing: 0.03em;
}
/* sisa lembar-lembar kemarin yang sudah disobek */
.kalender-sisa {
  display: block;
  height: 9px;
  background: #f3e3ea;
  -webkit-mask: var(--sobek-bawah) top / 100% 100% no-repeat;
  mask: var(--sobek-bawah) top / 100% 100% no-repeat;
}
.kalender-angka {
  padding: 4px 12px 0;
  font: clamp(40px, 12.5vw, 52px) / 0.95 var(--font-stiker);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.kalender-bawah {
  padding: 2px 12px 0;
  font: 700 19px/1.1 var(--font-tangan);
}
.kalender-catatan {
  margin-top: auto;
  padding: 8px 12px 10px;
  font: 12.5px/1.3 var(--font-ui);
  color: var(--tinta-2);
}
.kalender-kosong .kalender-bawah {
  font-size: 22px;
  padding-top: 12px;
}

.memo {
  background: var(--mentega);
  background-image: linear-gradient(135deg, transparent 72%, rgb(150 110 0 / 0.14));
  padding: 20px 13px 11px;
  rotate: -2deg;
  box-shadow: 0 1px 1px rgb(59 34 54 / 0.14), 0 12px 16px -10px rgb(59 34 54 / 0.45);
}
.memo > .pita {
  top: -10px;
  left: 50%;
  translate: -50% 0;
  rotate: 4deg;
  width: 64px;
}
.memo-judul {
  font: 700 13px/1.2 var(--font-ui);
  color: #7a5a1e;
}
.memo-isi {
  margin-top: 5px;
  font: 700 21px/1.08 var(--font-tangan);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.memo-kaki {
  margin-top: auto;
  padding-top: 6px;
  font: 12.5px/1.2 var(--font-ui);
  color: #7a5a1e;
}

/* ---------- grid stiker app ---------- */
.grid-ikon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 4px;
  padding-top: 6px;
}
.ikon-app {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--teks-beranda);
  text-decoration: none;
}
.ikon-app .stiker {
  width: 64px;
  height: 64px;
  rotate: var(--miring, 0deg);
  transition: transform 0.35s var(--ease-keluar), filter 0.35s var(--ease-keluar), rotate 0.35s var(--ease-keluar);
}
.ikon-app:active .stiker,
.ikon-app.diangkat .stiker {
  transform: translateY(-4px) scale(1.08);
  rotate: 0deg;
  filter: var(--bayang-angkat);
}
/* label = potongan kertas putih, terbaca di wallpaper apa pun */
.ikon-label,
.dok-label {
  max-width: 100%;
  padding: 2px 7px 3px;
  border-radius: 3px;
  background: var(--kertas);
  color: var(--tinta);
  font: 650 12px/1.2 var(--font-ui);
  box-shadow: 0 1px 2px rgb(59 34 54 / 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ikon-app .titik-label {
  position: absolute;
  top: -2px;
  right: calc(50% - 40px);
}

.dok {
  margin-top: auto;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding-top: 10px;
  color: var(--teks-beranda);
}
.tombol-tambah {
  width: 66px;
  height: 66px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tinta);
  color: #fff;
  box-shadow: 0 0 0 4px #fff, 0 12px 20px -8px rgb(59 34 54 / 0.55);
  rotate: -6deg;
  transition: transform 0.3s var(--ease-keluar);
}
.tombol-tambah .ikon {
  width: 30px;
  height: 30px;
  stroke-width: 2.6;
}
.tombol-tambah:active {
  transform: scale(0.94) rotate(6deg);
}

.lembar-tambah .daftar-menu .baris-menu {
  min-height: 60px;
}
.album-cepat {
  display: grid;
  gap: 8px;
}
.album-cepat-baris {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 6px 8px;
  border: 0;
  border-radius: 12px;
  background: #fbf0f4;
  text-align: left;
  font: 600 16px/1.2 var(--font-ui);
  color: var(--tinta);
}
.album-cepat-baris img,
.album-cepat-baris .kotak-kosong {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--abu-kertas);
  flex: none;
  display: grid;
  place-items: center;
}
.album-cepat-baris small {
  display: block;
  font: 13px/1.3 var(--font-ui);
  color: var(--tinta-3);
}

/* ---------- layar kunci ---------- */
.kunci {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--aman-atas) + 30px) 24px calc(var(--aman-bawah) + 26px);
  text-align: center;
  color: var(--tinta);
  overflow-y: auto;
}
.kunci-tanggal {
  font: 700 23px/1.1 var(--font-tangan);
}
.kunci-jam {
  margin-top: 2px;
  font: clamp(78px, 25vw, 112px) / 0.9 var(--font-stiker);
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  filter: drop-shadow(0 6px 12px rgb(217 71 138 / 0.25));
}
.kunci-judul {
  margin-top: 18px;
  font-size: 22px;
}
.kunci-sapa {
  margin-top: auto;
  font: 700 22px/1.2 var(--font-tangan);
  min-height: 1.2em;
}
.kunci-orang {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 14px;
}
.orang-stiker {
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 4px;
  color: var(--tinta);
  transition: opacity 0.3s, transform 0.4s var(--ease-keluar);
}
.orang-bulat {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: var(--pita);
  color: #fff;
  font: 44px/1 var(--font-stiker);
  box-shadow: 0 0 0 5px #fff, 0 12px 20px -8px rgb(59 34 54 / 0.55);
  rotate: var(--miring, 0deg);
}
.orang-bulat.pita {
  position: relative;
  pointer-events: auto;
}
.orang-bulat.pita::before {
  -webkit-mask: none;
  mask: none;
  border-radius: 50%;
}
.orang-bulat span {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 6px rgb(59 34 54 / 0.35);
}
.orang-bulat img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.orang-bulat.ada-foto::before {
  display: none;
}
/* foto profil tetap membawa warna pita pemiliknya: cincin putih + cincin warna pita */
.orang-bulat.ada-foto {
  box-shadow: 0 0 0 4px #fff, 0 0 0 9px var(--pita), 0 14px 22px -8px rgb(59 34 54 / 0.5);
}
.orang-nama {
  font: 700 22px/1 var(--font-tangan);
}
.kunci-orang.memilih .orang-stiker:not(.dipilih) {
  opacity: 0.45;
  transform: scale(0.9);
}
.orang-stiker.dipilih {
  transform: translateY(-4px) scale(1.06);
}
.orang-stiker.goyang {
  animation: goyang 0.4s;
}
@keyframes goyang {
  20%,
  60% {
    translate: -7px 0;
  }
  40%,
  80% {
    translate: 7px 0;
  }
}
.kunci-form {
  width: min(100%, 320px);
  display: grid;
  gap: 12px;
  margin-top: 22px;
}
.kunci-form .masukan {
  text-align: center;
  font-size: 19px;
  border-color: transparent;
  box-shadow: var(--bayang-kertas);
}
.kunci-form .tombol {
  width: 100%;
}
.kunci-form .pesan-galat {
  color: var(--alarm-tua);
}
.kunci-catatan {
  margin-top: 18px;
  font-size: 13px;
  color: rgb(59 34 54 / 0.7);
}