* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  overscroll-behavior-x: none;
}

body {
  position: fixed;
  inset: 0;
  background-color: #1e1e1e;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Helvetica, Arial, sans-serif;
}

/** bingai hp */
.hp {
  --status-warna: white;
  position: relative;
  width: min(390px, calc(100vw - 16px));
  height: min(844px, calc(100dvh - 16px));
  border: 8px solid black;
  border-radius: 36px;
  overflow: hidden;
  background-color: black;
}
.hp[data-tema="terang"] { --status-warna: black; }

.hp::after {
  content: ""; 
  position: absolute; 
  top: 10px; 
  left: 50%;
  width: 112px; 
  height: 32px; 
  margin-left: -56px;
  background: #000; 
  border-radius: 20px; 
  z-index: 21; 
  pointer-events: none;
  box-shadow: inset 38px 0 0 -29px #0d0d1a;
}

/** status bar */
.status-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 44px;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  color: var(--status-warna);
  font-size: 14px;
  font-weight: bold;
  pointer-events: none;
}

.status-bar svg { 
  width: 17px;
  height: 17px; 
}

.jaringan { 
  display: flex; 
  gap: 6px; 
  align-items: center; 
}

/** layar */
.layar-area { position: absolute; inset: 0; }

.layar {
  position: absolute;
  inset: 0;
  padding-top: 44px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateX(16px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.layar.aktif { 
  opacity: 1; 
  visibility: visible; 
  transform: none; 
}


.layar.pergi-atas {
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition:
    transform .4s cubic-bezier(.3, .7, .3, 1),
    opacity .25s ease .15s,
    visibility 0s linear .4s;
}


.hp[data-gerak="naik"] .layar.aktif {
  transition: none;
}


.layar.tanpa-gerak {
  transition: none !important;
}

/** swipe line */
.garis-bawah {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30px;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 8px;
  touch-action: none;
}
.garis-bawah::after {
  content: "";
  width: 130px;
  height: 5px;
  border-radius: 3px;
  background-color: var(--status-warna);
}
.garis-atas { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  height: 40px; 
  z-index: 35; 
  touch-action: none; 
}

/** icon */
.ik { 
  display: inline-flex; 
  width: 24px; 
  height: 24px; 
  font-style: normal; 
}

.ik svg { 
  width: 100%; 
  height: 100%; 
}

.ik.kecil { 
  width: 16px; 
  height: 16px; 
}

/** animasi typing */
@keyframes lompat {
  0%, 60%, 100% { transform: translateY(0);    opacity: .4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}