/* Body pusatkan frame fixed */
    body {
      margin: 0;
      background: #222;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      height: 100vh;
      overflow: hiden; /* agar tidak scroll di body */
      font-family: Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
.container {
  flex: 1;
  overflow-x: auto;
  padding: 20px;
  background-color: #fdf6e3;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  padding-top: 70px;
  padding-bottom: 100px;
}

    
    /* Wrapper dengan lebar mobile tetap */
.mobile-wrapper {
  width: 100%;
  height: 100%;
  background: #f4f4f4;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  
}


    /* Header dan Footer absolute dalam wrapper */
    .header, .footer {
      background-color: #333;
      color: white;
      width: 100%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      padding: 0 20px;
      box-sizing: border-box;
      
    }

    .header {
      height: 60px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      justify-content: space-between;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
      z-index: 27;
    }

    footer {
      height: 50px;
      position: fixed;
      display: flex;
      bottom: 0;
      left: 0;
      right: 0;
      justify-content: space-around;
      align-items: flex-start;
      box-shadow: 0 -2px 5px rgba(0,0,0,0.3);
      z-index: 20;
     
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .header-right {
      display: flex;
      gap: 15px;
      align-items: center;
    }
        
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0; top: 10px;
      width: 100%; height: 100%;
      background-color: rgba(0,0,0,0.4);
      border-radius: 8px;
      animation: popup .3s linear alternate;
      
    }
    
 
    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      padding: 20px;
      border-radius: 8px;
      width: 80%;
      max-width: 400px;
      text-align: center;
      transition: transform 0.3s ease, opacity 0.3s ease;
      animation: popup-in .5s linear alternate;
      
    }
    
    @keyframes popup-in {
      0% { width: 80%; max-width: 0px; opacity: 0; scale(0); }
      100% { width: 80%; max-width: 400px; opacity: 1; scale(1); }
    }
    
    @keyframes popup {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    

    close {
      color: #aaa;
      float: right;
      font-size: 24px;
      cursor: pointer;
    }
    

    input[type="password"] {
      background-color: #ddd;
      color: #fff;
      border: 1px solid #aaa;
      border-radius: 4px;
      height: 30px;
      width: 97.5%;
      transition: background-color 0.3s;
    }    

box {
  border-radius: 100rem;
  font-family: 'Avenir Next';
  font-size: 1rem;
  font-weight: bold;
  padding: .1rem;
  color: $color-black;
  box-shadow: 0 0 2px 0 rgba(157, 96, 212, 0.5);
  border: solid 2px transparent;
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(20deg, #78e4ff, #ff48fa);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 2px 1000px 1px #fff inset;
  justify-content: center;
  align-items: center;
  display: flex;
  width: auto;
  height: 20px;
}

.spinner {
  border-radius: 50%;
  box-shadow: 0 0 2px 0 rgba(157, 96, 212, 0.5);
  border: solid 2px transparent;
  border-top: 2px solid red;
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(20deg, #78e4ff, #ff48fa);
  background-origin: border-box;
  background-clip: content-box, border-top-box, border-box;
  box-shadow: 2px 1000px 1px #000 inset;
  width: 34px;
  height: 34px;
  animation: spin 1s linear infinite;
  z-index: 25;
}


    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .wifi-icon {
    position: relative;
    border: 1px solid #03f3f3;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: wifi 1s linear infinite;
  }
  
  @keyframes wifi {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(-360deg); }
    }

    svg {
      filll: white;
      width: 24px;
      height: 24px;
      cursor: pointer;
      flex-shrink: 0;
      
    }
    
    onclick, svg:hover {
      fill: #af88fc;
    }
    
    onclick, circle:hover {
      fill: #af88fc;
    }

    /* Konten scrollable */
    .content {
      margin-top: 60px; /* tinggi header */
      margin-bottom: 50px; /* tinggi footer */
      padding: 15px 20px;
      overflow-y: auto;
      flex-grow: 1;
      background: white;
    }

input[type="submit"] {
      margin-top: 15px;
      padding: 10px;
      background-color: #1C5Fe0;
      color: white;
      border: none;
      cursor: pointer;
      width: 200px;
      justify-content: center;
      align-items: center;
    }
    input[type="submit"]:hover {
      background-color: #45a049;
    }

input[type="text"] {
  height: 30px;
}

.on {
  width: 40px;
  height: 40px;
  padding: 1px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background-color: #1C5Fe0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.off {
  width: auto;
  height: auto;
  padding: 2px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background-color: transparent;
  justify-content: center;
  align-items: center;
  display: flex;
}

a, .copy {
  width: auto;
  height: auto;
  padding: 2px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  background-color: transparent;
  text-decoration: none; 
  color: black; text-shadow: 1px 1px 1.5px rgba(225, 225, 225, 0.8);
  font-weight: bold;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 35;
}

input[type="number"] {
  height: 30px;
}


.button-center {
   text-align: center;

}
       
.inline-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 10px;
  
}
#info1, #info2, .info {
  background-color: #f4433620;
  border: 0.5px solid red;
  border-radius: 4px;
  font-weight: bold;
  padding: 8px;
}

logo {
  z-index: 30;
  animation: log 15s linear infinite;
  transform: translate(-375%, 5%);
}

@keyframes log {
   0% { opacity: 0; }
  30% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
img {
  width: 34px;
  height: 34px;
}

.running-text-wrapper {
  position: relative;
  width: 100%;
  height: 23px;
  overflow: hidden;
  background-color: transparent;
  color: black;
  font-weight: bold;
  font-size: 20px;
  border-radius: 100rem;
}

.running-text {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  padding-left: 100%;
  animation: marquee 8s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
  0% { opacity: 0; }
  30% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

select {
  height: 30px;
}

button {
  border-radius: 100rem;
  text-decoration: none;
  font-weight: bold;
}

button:hover {
  background-color: #ddd;
}

#scroll, .scroll {
  height: 60vh;
  overflow-x: auto;
  
}

    .jam {
      font-weight: bold;
      font-size: 110px;
    }

    .detik {
      font-size: 20px;
      margin-left: 0px;
    }
    
    .tanggal {
      font-weight: bold;
      font-size: 34px;
    }