* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;

  background: white;
}

.clock {
  position: relative;
  width: 38em;
  height: 38em;
  overflow: hidden;
  border-radius: 19em;
  border: 10px solid #181819;
  background-image: url(https://www.yokatta.web.id/2025/04/assets/img/kirei.webp);
  background-repeat: no-repeat;
  background-position: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 15px -2px #444444;
}

.clock:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.clock:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: #181819;
  border-radius: 50%;
}

.num {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  padding: 18px;
  color: #ffffff;
}

.num:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0.3em;
  height: 0.3em;
  background-color: #e91425;
  border-radius: 50%;
  margin-top: 0.1em;
}

.num1 {
  transform: rotate(30deg);
}
.num1 div {
  transform: rotate(-30deg);
}

.num2 {
  transform: rotate(60deg);
}
.num2 div {
  transform: rotate(-60deg);
}

.num3 {
  transform: rotate(90deg);
}
.num3 div {
  transform: rotate(-90deg);
}

.num4 {
  transform: rotate(120deg);
}
.num4 div {
  transform: rotate(-120deg);
}

.num5 {
  transform: rotate(150deg);
}
.num5 div {
  transform: rotate(-150deg);
}

.num6 {
  transform: rotate(180deg);
}
.num6 div {
  transform: rotate(-180deg);
}

.num7 {
  transform: rotate(210deg);
}
.num7 div {
  transform: rotate(-210deg);
}

.num8 {
  transform: rotate(240deg);
}
.num8 div {
  transform: rotate(-240deg);
}

.num9 {
  transform: rotate(270deg);
}
.num9 div {
  transform: rotate(-270deg);
}

.num10 {
  transform: rotate(300deg);
}
.num10 div {
  transform: rotate(-300deg);
}

.num11 {
  transform: rotate(330deg);
}
.num11 div {
  transform: rotate(-330deg);
}

.hand {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hand div {
  width: 0.5em;
  height: 12em;
  border-right: 3px solid #333;
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: skewY(45deg);
  background-color: white;
  border-left: 1px solid #222;
  border-top: 1px solid #222;
}

.hand div::before {
  content: "";
  position: absolute;
  width: 17px;
  height: 6px;
  top: 11.56em;
  left: -5px;
  background: #333;
  transform: skewY(-45deg);
}

.hand div::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 40px;
  top: 100%;
  background: #d11221;
  transform: skewY(-45deg);
  border: 1px solid #111;
}

.sec {
  width: 1px;
  height: 40%;
}

.min {
  height: 38%;
  width: 4px;
  border-radius: 2px;
}

.hour {
  height: 28%;
  width: 8px;
  border-radius: 4px;
}