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

body{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
background: linear-gradient(135deg, #ffe4f3, #fff7fb);
  font-family:Verdana,sans-serif;
}


.window{
  width: min(420px, 100%);
  height: min(620px, 100dvh);

  border:3px solid #9b7a7a;
  border-radius:16px;
  overflow:hidden;

  background-image:url("/image/meong.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  display:flex;
  flex-direction:column;
}

/* TOP BAR */

.topbar{
  display:flex;
  align-items:center;
  padding:8px;
  background:#e8c7c7;
  border-bottom:2px solid #7c6666;
}

.back{
  text-decoration:none;
  color:black;
  font-size:22px;
  margin-right:10px;
}

.browser{
  flex:1;
  background:white;
  border:1px solid #7c6666;
  border-radius:20px;
  padding:6px 12px;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.dots{
  display:flex;
  gap:4px;
  min-width:36px;
}

.url{
  font-size:14px;
  color:#555;
  text-align:center;
  flex:1;
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:block;
}

.red{
  background:#df9595;
}

.yellow{
  background:#f5c1b3;
}

.green{
  background:#df9595;
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
}

.red{
  background:#df9595;
}

.yellow{
  background:#f5c1b3;
}

.green{
  background:#df9595;
}

/* CLOCK */

/* CLOCK */

.clock-section{
  text-align:center;
  padding:35px 20px;

  flex:1; /* isi ruang kosong */
}

.clock-section h1{
  font-size:80px;
  line-height:1;
  font-weight:300;
  color:#3f3b3b;
}

.clock-section p{
  font-size:18px;
  color:#3f3b3b;
}

.menu-guide{
  margin:0 auto 18px;

  padding:10px 16px;

  font-size:13px;
  color:#5b4b4b;
  font-weight:bold;

  background:#fff8f0;
  border:2px solid #e8c7c7;
  border-radius:12px;

  width:max-content;
  max-width:320px;
}

/* MENU */

.menu{
  display:flex;
  justify-content:center;
  gap:20px;

  padding:0 15px 20px;

  margin-top:auto; /* dorong ke bawah */
}

.menu-item{
  text-decoration:none;
  color:#3f3b3b;
  text-align:center;
}

.menu-item img{
  width:65px;
  height:65px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #d9b8b8;
}

.menu-item span{
  display:block;
  margin-top:6px;
  font-size:20px;
}

/* CONTENT */

.content{
  padding:15px;
  flex:1;
  overflow-y:auto;
}

h2{
  text-align:center;
  margin-bottom:15px;
  color:#7c6666;
  font-size:24px;
}

@media (max-width: 420px){
  .window{ width:100%; height:min(620px, 100dvh); }
  .topbar{ padding:10px 12px; }
  .back{ font-size:18px; margin-right:8px; }

  .clock-section{ padding:24px 14px; }
  .clock-section h1{ font-size:46px; }
  .clock-section p{ font-size:14px; }

  .menu-guide{ max-width:320px; padding:10px 12px; }
  .menu{ gap:14px; padding:0 10px 14px; }
  .menu-item img{ width:52px; height:52px; }
  .menu-item span{ font-size:16px; }

  .content{ padding:12px; }
  h2{ font-size:20px; margin-bottom:12px; }

  .box, .pink-box{ max-width:100%; font-size:13px; }

  .footer{ padding:0 10px; height:44px; }
  .paw{ font-size:22px; }
  .paw-icon{ width:20px; height:20px; }
}


/* CHAT-LIKE CARD SIZING (biar gak kepanjangan lebarnya di profile) */
.box{
  padding:12px;
  border:2px solid #ddd;
  border-radius:10px;
  margin-bottom:10px;
  font-size:14px;
  max-width:220px;
}

.pink-box{
  padding:12px;
  background:#f3dada;
  border-radius:10px;
  margin-bottom:10px;
  font-size:14px;
  max-width:220px;
}


/* FOOTER */

.footer{
  margin-top:auto;

  height:50px;
  padding:0 20px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-top:2px solid #c9a5a5;
  background:#e8c7c7;

  flex-shrink:0;
}

.paw{
  font-size:28px;
  color:#f2a7c3;
}

.paw-icon{
  width:28px;
  height:28px;
  object-fit:contain;
}

.back img {
  width: 35px;
  height: 35px;
  object-fit: contain;
  cursor: pointer;
}