/* Googlefont Poppins CDN Link */

:root {
  --primary-color: #c71585; /* Medium Violet Red (Darker Pink) */
  --accent-color: #ff69b4; /* Hot Pink (Vibrant Pink) */
  --border-radius: 12px;
  --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
}
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  outline: none;
  border: none;
  text-decoration: none;
}
body {
  min-height: 100vh;
}

html {
  scroll-behavior: smooth;
}

body::-webkit-scrollbar {
  width: 10px; /* Lebar scrollbar */
}
body::-webkit-scrollbar-track {
  background: rgba(
    255,
    240,
    245,
    0.7
  ); /* Pink sangat pudar untuk track scrollbar */
  border-radius: 10px; /* Buat track scrollbar menjadi bulat */
}
body::-webkit-scrollbar-thumb {
  background-color: rgba(
    255,
    209,
    220,
    0.9
  ); /* Pink pudar untuk bagian scrollbar */
  border-radius: 10px;
  border: 2px solid rgba(255, 240, 245, 0.7); /* Border pink sangat pudar untuk memberi efek ruang */
}

body::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 180, 200, 1); /* Pink lebih gelap saat dihover */
}

/* Preloader background */
#preloader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Loader animasi */
.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #fcbbe3;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

/* Animasi spin */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* realtime clock */
.realtime-clock {
  color: #333;
  font-weight: bold;
  font-size: 13px;
  padding: 6px 12px;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%) scale(0.9); /* Added scale transformation */
  white-space: nowrap;
}

/* Responsive: sembunyikan realtime clock di layar kecil */
@media (max-width: 768px) {
  .realtime-clock {
    display: none;
  }
}

@media (max-width: 480px) {
  .realtime-clock {
    display: none;
  }
}

/* toggle user */
.user-toggle-container {
  position: fixed;
  top: 70px; /* Diperkecil lagi dari 60px ke 70px */
  right: 0;
  z-index: 9999;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.user-toggle-btn {
  background-color: rgba(255, 209, 220, 0.7); /* Pink muda */
  color: #4a4a4a; /* Ganti warna teks agar lebih kontras dengan pink */
  padding: 5px 4px; /* Diperkecil lagi */
  border-top-left-radius: 5px; /* Diperkecil */
  border-bottom-left-radius: 5px; /* Diperkecil */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 0 6px rgba(255, 150, 180, 0.5),
    0 0 10px rgba(255, 150, 180, 0.4); /* Diperkecil */
  font-size: 10px; /* Diperkecil */
}

.user-toggle-btn:hover {
  background-color: rgba(255, 180, 200, 0.8); /* Pink lebih gelap saat hover */
  transform: scale(1.03); /* Sedikit diperkecil */
  box-shadow: 0 0 10px rgba(255, 150, 180, 0.8),
    0 0 20px rgba(255, 150, 180, 0.6); /* Diperkecil */
  animation: pulse-pink 1s infinite alternate;
}

.user-login-panel {
  margin-right: 4px; /* Diperkecil */
  visibility: hidden;
  opacity: 0;
  transform: translateX(6px); /* Diperkecil */
  transition: all 0.3s ease;
}

.user-login-panel.visible {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

.user-icon-container {
  width: 30px; /* Diperkecil dari 35px */
  height: 30px; /* Diperkecil dari 35px */
  background-color: rgba(255, 180, 200, 0.8); /* Pink lebih gelap */
  border: 1px solid rgba(255, 150, 180, 0.9); /* Border diperkecil */
  border-radius: 5px; /* Diperkecil */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 0 6px rgba(255, 150, 180, 0.5),
    0 0 10px rgba(255, 150, 180, 0.4); /* Diperkecil */
  animation: pulse-pink 1s infinite alternate;
}

.user-icon-container:hover {
  background-color: rgba(
    255,
    150,
    180,
    0.9
  ); /* Pink lebih gelap lagi saat hover */
  transform: scale(1.03); /* Sedikit diperkecil */
  box-shadow: 0 0 10px rgba(255, 150, 180, 0.8),
    0 0 20px rgba(255, 150, 180, 0.6); /* Diperkecil */
}

.user-icon-container i {
  font-size: 16px; /* Diperkecil dari 18px */
  color: #fff0f5; /* Warna icon agar kontras dengan pink */
}

@keyframes pulse-pink {
  0% {
    transform: scale(1);
    box-shadow: 0 0 6px rgba(255, 150, 180, 0.5),
      0 0 10px rgba(255, 150, 180, 0.4);
  }
  100% {
    transform: scale(1.03);
    box-shadow: 0 0 10px rgba(255, 150, 180, 0.8),
      0 0 20px rgba(255, 150, 180, 0.6);
  }
}

a {
  text-decoration: none;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  .user-toggle-container {
    top: 90px; /* Disesuaikan untuk layar kecil dari 80px ke 90px */
  }

  .user-toggle-btn {
    padding: 4px 3px; /* Diperkecil */
    font-size: 10px; /* Diperkecil */
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    box-shadow: 0 0 5px rgba(255, 150, 180, 0.5),
      0 0 8px rgba(255, 150, 180, 0.4);
  }

  .user-toggle-btn:hover {
    transform: scale(1.01);
    box-shadow: 0 0 8px rgba(255, 150, 180, 0.8),
      0 0 15px rgba(255, 150, 180, 0.6);
  }

  .user-icon-container {
    width: 25px; /* Diperkecil */
    height: 25px; /* Diperkecil */
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(255, 150, 180, 0.5),
      0 0 8px rgba(255, 150, 180, 0.4);
  }

  .user-icon-container:hover {
    transform: scale(1.01);
    box-shadow: 0 0 8px rgba(255, 150, 180, 0.8),
      0 0 15px rgba(255, 150, 180, 0.6);
  }

  .user-icon-container i {
    font-size: 12px; /* Diperkecil */
  }

  @keyframes pulse-pink {
    0% {
      transform: scale(1);
      box-shadow: 0 0 5px rgba(255, 150, 180, 0.5),
        0 0 8px rgba(255, 150, 180, 0.4);
    }
    100% {
      transform: scale(1.01);
      box-shadow: 0 0 8px rgba(255, 150, 180, 0.8),
        0 0 15px rgba(255, 150, 180, 0.6);
    }
  }
}

@media (max-width: 480px) {
  .user-toggle-container {
    top: 95px; /* Disesuaikan lagi untuk layar sangat kecil dari 85px ke 95px */
  }

  .user-toggle-btn {
    padding: 1px 1px; /* Diperkecil lagi */
    font-size: 8px; /* Diperkecil lagi */
  }

  .user-icon-container {
    width: 20px; /* Diperkecil lagi */
    height: 20px; /* Diperkecil lagi */
  }

  .user-icon-container i {
    font-size: 9px; /* Diperkecil lagi */
  }
}

/* === NAVBAR UTAMA === */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 49.5px;
  background-color: rgba(255, 209, 220, 0.9);
  box-shadow: 0 1.8px 5.4px rgba(0, 0, 0, 0.25);
  z-index: 99;
}

/* LOGO IMAGE */
.navbar img {
  height: 36px;
  width: 180px;
  transition: transform 0.1s ease;
}

.navbar img:hover {
  transform: scale(1.02);
}

/* WRAPPER NAV */
nav .navbar {
  height: 100%;
  max-width: 1080px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;
  padding: 0 27px;
}

/* LOGO TEXT (jika ada, saat ini menggunakan gambar) */
.navbar .logo a {
  font-size: 23.4px;
  color: #000000;
  text-decoration: none;
  font-weight: 600;
  text-shadow: 0 0 1.8px #000000;
}

/* LINK UTAMA */
nav .navbar .nav-links {
  line-height: 49.5px;
  height: 100%;
}

nav .navbar .links {
  display: flex;
}

nav .navbar .links li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0 9px;
}

/* LINK NORMAL */
nav .navbar .links li a {
  height: 100%;
  text-decoration: none;
  white-space: nowrap;
  color: #000000;
  font-size: 11.7px;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* HOVER: NEON PINK GLOW */
nav .navbar .links li a:hover {
  color: #cc0066;
  text-shadow: 0 0 2.7px #ff66b2, 0 0 5.4px #ff66b2;
  transform: translateY(-0.9px);
  animation: neonPulsePink 1.5s infinite alternate;
}

/* Rotasi panah saat hover di desktop (original behavior) */
.links li:hover .htmlcss-arrow,
.links li:hover .htmlcss-arrow6,
.links li:hover .js-arrow,
.links li:hover .js-arrow1,
.links li:hover .js-arrow2 {
  transform: rotate(180deg);
}

/* Arrow rotation for sub-menus in mobile (new rule for JS control) */
.navbar .links li .arrow.rotate {
  transform: rotate(180deg);
}

nav .navbar .links li .arrow {
  height: 100%;
  width: 16.2px;
  line-height: 49.5px;
  text-align: center;
  display: inline-block;
  color: #000000;
  transition: all 0.3s ease;
}

/* === SUBMENU === */
nav .navbar .links li .sub-menu {
  position: absolute;
  top: 49.5px;
  left: 0;
  line-height: 27px;
  width: 162px;
  background-color: rgba(255, 209, 220, 0.95);
  box-shadow: 0 0 5.4px rgba(255, 150, 180, 0.3);
  border-radius: 0 0 1.8px 1.8px;
  display: none;
  z-index: 2;
  animation: fadeSlideDown 0.4s ease forwards;
}

/* Menampilkan sub-menu saat hover di desktop */
nav .navbar .links li:hover .js-sub-menu,
nav .navbar .links li:hover .js-sub-menu1,
nav .navbar .links li:hover .js-sub-menu2 {
  display: block;
}

.navbar .links li .sub-menu li {
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 180, 200, 0.2);
}

.navbar .links li .sub-menu a {
  color: #333333;
  font-size: 11.7px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.navbar .links li .sub-menu a:hover {
  color: #cc0066;
  text-shadow: 0 0 2.7px #ff66b2, 0 0 5.4px #ff66b2;
  animation: neonPulsePink 1.5s infinite alternate;
}

/* === SUB-SUBMENU === */
.navbar .links li .sub-menu .more-arrow,
.navbar .links li .sub-menu .more-arrow6,
.navbar .links li .sub-menu .more-arrow7 {
  line-height: 27px;
}

.navbar .links li .sub-menu .more-sub-menu,
.navbar .links li .sub-menu .more-sub-menu6,
.navbar .links li .sub-menu .more-sub-menu7 {
  position: absolute;
  top: 0;
  left: 100%;
  width: 99px;
  background-color: rgba(255, 180, 200, 0.95);
  border-radius: 0 1.8px 1.8px 1.8px;
  z-index: 1;
  display: none;
  animation: fadeSlideRight 0.3s ease forwards;
}

.links li .sub-menu .more:hover .more-sub-menu,
.links li .sub-menu .more:hover .more-sub-menu6,
.links li .sub-menu .more:hover .more-sub-menu7 {
  display: block;
}

/* === ANIMASI KEYFRAMES === */
@keyframes fadeSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-5.4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideRight {
  0% {
    opacity: 0;
    transform: translateX(-5.4px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes neonPulsePink {
  0% {
    text-shadow: 0 0 2.7px #ff66b2, 0 0 5.4px #ff66b2;
    filter: drop-shadow(0 0 2.7px #ff66b2) drop-shadow(0 0 5.4px #ff66b2);
  }
  100% {
    text-shadow: 0 0 5.4px #ff66b2, 0 0 10.8px #ff66b2;
    filter: drop-shadow(0 0 5.4px #ff66b2) drop-shadow(0 0 10.8px #ff66b2);
  }
}

/* === SEARCHBOX === */
.navbar .search-box {
  position: relative;
  height: 27px;
  width: 27px;
  right: 60px; /* Posisi default untuk desktop */
}

.navbar .search-box i {
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 27px;
  text-align: center;
  font-size: 16.2px;
  color: #000000;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Efek hover untuk ikon pencarian */
.navbar .search-box i:hover {
  color: #ff66b2;
  animation: neonPulsePink 1.5s infinite alternate;
}

/* Kotak input pencarian - DI SINI PERUBAHAN UTAMANYA */
.navbar .search-box .input-box {
  position: absolute;
  right: calc(100% - 30px); /* Disesuaikan agar lebih jauh ke kiri */
  top: 60px; /* Disesuaikan agar lebih jauh dari navbar dan tidak bentrok dengan clock */
  height: 45px; /* Diperkecil dari 50px */
  width: 240px; /* Diperkecil dari 260px */
  background: rgba(255, 209, 220, 0.7);
  border-radius: 4px; /* Diperkecil */
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
}

.navbar.showInput .search-box .input-box {
  top: 50px; /* Disesuaikan */
  opacity: 1;
  pointer-events: auto;
  background-color: rgba(255, 180, 200, 0.8);
}

.search-box .input-box::before {
  content: "";
  position: absolute;
  height: 12px; /* Diperkecil */
  width: 12px; /* Diperkecil */
  background-color: rgba(255, 180, 200, 0.8);
  right: 6px; /* Disesuaikan */
  top: -4px; /* Disesuaikan */
  transform: rotate(45deg);
}

.search-box .input-box input {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 2px; /* Diperkecil */
  transform: translate(-50%, -50%);
  height: 25px; /* Diperkecil dari 30px */
  width: 210px; /* Diperkecil dari 230px */
  outline: none;
  padding: 0 10px; /* Diperkecil */
  font-size: 14px; /* Diperkecil */
  border: none;
  background-color: #ffffff;
  color: #333;
}

/* --- Media Queries --- */

@media (max-width: 1920px) {
  nav .navbar .search-box {
    right: 60px;
  }
}

@media (max-width: 1080px) {
  nav .navbar .search-box {
    right: 50px;
  }
}

@media (max-width: 768px) {
  nav .navbar .search-box {
    right: 30px;
  }
  .navbar .nav-links {
    display: none;
  }
  .navbar .bx-menu {
    display: block;
  }
}

@media (max-width: 480px) {
  .navbar img {
    height: 30px;
    width: 150px;
  }
  nav .navbar .search-box {
    right: 20px;
  }
}

.navbar .nav-links .sidebar-logo {
  display: none;
}

.navbar .bx-menu {
  display: none;
}

@media (max-width: 800px) {
  .navbar .bx-menu {
    display: block;
  }
}
.navbar .nav-links .sidebar-logo {
  display: none;
}

.navbar .bx-menu {
  display: none;
}

@media (max-width: 800px) {
  .navbar .bx-menu {
    display: block;
  }

  nav .navbar .nav-links {
    position: fixed;
    top: 0;
    left: -100%;
    display: block;
    max-width: 220px; /* Diperkecil dari 250px */
    width: 100%;
    background-color: rgba(255, 209, 220, 0.9);
    line-height: 30px; /* Diperkecil dari 35px */
    padding: 6px; /* Diperkecil */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* Diperkecil */
    transition: all 0.5s ease;
    z-index: 1000;
  }

  .navbar .nav-links .sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sidebar-logo .logo-name {
    font-size: 20px; /* Diperkecil dari 22px */
    color: #000000;
  }

  .sidebar-logo i,
  .navbar .bx-menu {
    font-size: 20px; /* Diperkecil dari 22px */
    color: #000000;
  }

  nav .navbar .links {
    display: block;
    margin-top: 12px; /* Diperkecil dari 15px */
  }

  nav .navbar .links li .arrow {
    line-height: 30px; /* Diperkecil dari 35px */
  }

  nav .navbar .links li {
    display: block;
  }

  nav .navbar .links li .sub-menu {
    position: relative;
    top: 0;
    box-shadow: none;
    display: none;
    width: auto;
    background-color: rgba(255, 209, 220, 0.95);
    border-radius: 0;
    animation: none;
  }

  .navbar .links li .sub-menu li {
    border-bottom: none;
    padding: 0 8px; /* Diperkecil */
  }

  .navbar .links li .sub-menu .more-sub-menu,
  .navbar .links li .sub-menu .more-sub-menu6,
  .navbar .links li .sub-menu .more-sub-menu7 {
    display: none;
    position: relative;
    left: 0;
    width: auto;
    background-color: rgba(255, 180, 200, 0.95);
    border-radius: 0;
    animation: none;
  }

  .navbar .links li .sub-menu .more-sub-menu li,
  .navbar .links li .sub-menu .more-sub-menu6 li,
  .navbar .links li .sub-menu .more-sub-menu7 li {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .links li:hover .htmlcss-arrow,
  .links li:hover .htmlcss-arrow6,
  .links li:hover .js-arrow,
  .links li:hover .js-arrow1,
  .links li:hover .js-arrow2 {
    transform: rotate(0deg);
  }

  nav .navbar .links li:hover .js-sub-menu,
  nav .navbar .links li:hover .js-sub-menu1,
  nav .navbar .links li:hover .js-sub-menu2,
  .links li .sub-menu .more:hover .more-sub-menu,
  .links li .sub-menu .more:hover .more-sub-menu6,
  .links li .sub-menu .more:hover .more-sub-menu7 {
    display: none;
  }
}

@media (max-width: 370px) {
  nav .navbar .nav-links {
    max-width: 100%;
  }
}

@media (max-width: 920px) {
  nav .navbar {
    max-width: 100%;
    padding: 0 15px; /* Diperkecil dari 20px */
  }

  nav .navbar .logo a {
    font-size: 24px; /* Diperkecil dari 25px */
  }

  nav .navbar .links li {
    padding: 0 6px; /* Diperkecil dari 8px */
    white-space: nowrap;
  }

  nav .navbar .links li a {
    font-size: 12px; /* Diperkecil dari 13px */
  }
}

.navbar .nav-links .sidebar-logo {
  display: none;
}

.navbar .bx-menu {
  display: none;
}

@media (max-width: 800px) {
  .navbar .bx-menu {
    display: block;
  }

  nav .navbar .nav-links {
    position: fixed;
    top: 0;
    left: -100%;
    display: block;
    max-width: 220px; /* Diperkecil dari 250px */
    width: 100%;
    background-color: rgba(255, 209, 220, 0.9);
    line-height: 30px; /* Diperkecil dari 35px */
    padding: 6px; /* Diperkecil */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* Diperkecil */
    transition: all 0.5s ease;
    z-index: 1000;
  }

  .navbar .nav-links .sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sidebar-logo .logo-name {
    font-size: 20px; /* Diperkecil dari 22px */
    color: #000000;
  }

  .sidebar-logo i,
  .navbar .bx-menu {
    font-size: 20px; /* Diperkecil dari 22px */
    color: #000000;
  }

  nav .navbar .links {
    display: block;
    margin-top: 12px; /* Diperkecil dari 15px */
  }

  nav .navbar .links li .arrow {
    line-height: 30px; /* Diperkecil dari 35px */
  }

  nav .navbar .links li {
    display: block;
  }

  nav .navbar .links li .sub-menu {
    position: relative;
    top: 0;
    box-shadow: none;
    display: none;
    width: auto;
    background-color: rgba(255, 209, 220, 0.95);
    border-radius: 0;
    animation: none;
  }

  .navbar .links li .sub-menu li {
    border-bottom: none;
    padding: 0 8px; /* Diperkecil */
  }

  .navbar .links li .sub-menu .more-sub-menu,
  .navbar .links li .sub-menu .more-sub-menu6,
  .navbar .links li .sub-menu .more-sub-menu7 {
    display: none;
    position: relative;
    left: 0;
    width: auto;
    background-color: rgba(255, 180, 200, 0.95);
    border-radius: 0;
    animation: none;
  }

  .navbar .links li .sub-menu .more-sub-menu li,
  .navbar .links li .sub-menu .more-sub-menu6 li,
  .navbar .links li .sub-menu .more-sub-menu7 li {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .links li:hover .htmlcss-arrow,
  .links li:hover .htmlcss-arrow6,
  .links li:hover .js-arrow,
  .links li:hover .js-arrow1,
  .links li:hover .js-arrow2 {
    transform: rotate(0deg);
  }

  nav .navbar .links li:hover .js-sub-menu,
  nav .navbar .links li:hover .js-sub-menu1,
  nav .navbar .links li:hover .js-sub-menu2,
  .links li .sub-menu .more:hover .more-sub-menu,
  .links li .sub-menu .more:hover .more-sub-menu6,
  .links li .sub-menu .more:hover .more-sub-menu7 {
    display: none;
  }
}

@media (max-width: 370px) {
  nav .navbar .nav-links {
    max-width: 100%;
  }
}

@media (max-width: 920px) {
  nav .navbar {
    max-width: 100%;
    padding: 0 15px; /* Diperkecil dari 20px */
  }

  nav .navbar .logo a {
    font-size: 24px; /* Diperkecil dari 25px */
  }

  nav .navbar .links li {
    padding: 0 6px; /* Diperkecil dari 8px */
    white-space: nowrap;
  }

  nav .navbar .links li a {
    font-size: 12px; /* Diperkecil dari 13px */
  }
}

/* navbar ends */

body {
  background: #eee;
}
/* containerr start */
/* containerr start */
.containerr {
  display: flex;
  gap: 15px;
  align-items: stretch;
  padding: 50px 14.5%;
}

.containerr .main-video {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.containerr .main-video .video {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.containerr .main-video video {
  width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.containerr .main-video .title {
  color: #333;
  font-size: 23px;
  padding-top: 15px;
  padding-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.containerr .main-video .views,
.containerr .main-video .upload-date {
  font-size: 14px;
  color: #777;
}

.containerr .video-list {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  background: #fff;
  border-radius: 10px;
  flex: 0 0 40%;
  max-height: 500px; /* ATUR TINGGI MAKSIMUM DI SINI */
  overflow-y: auto;
}

.containerr .video-list::-webkit-scrollbar {
  width: 7px;
}
.containerr .video-list::-webkit-scrollbar-track {
  background: #ccc;
  border-radius: 50px;
}
.containerr .video-list::-webkit-scrollbar-thumb {
  background: #ff66b2;
  border-radius: 50px;
}

.containerr .video-list .vid video {
  width: 100px;
  border-radius: 5px;
}

.containerr .video-list .vid {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #f7f7f7;
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  flex-shrink: 0;
}

.containerr .video-list .vid:hover {
  background: #eee;
}
.containerr .video-list .vid.active {
  background-color: rgba(255, 209, 220, 0.9);
}
.containerr .video-list .vid.active .title,
.containerr .video-list .vid.active .views,
.containerr .video-list .vid.active .upload-date-list {
  color: #fff;
}
.containerr .video-list .vid .title {
  color: #333;
  font-size: 17px;
}

/* Styling for Font Awesome icon */
.views {
  display: flex;
  align-items: center;
}

.views .fa-eye {
  font-size: 16px;
  margin-right: 5px;
  color: #555;
}

.containerr .video-list .views {
  font-size: 12px;
  color: #777;
}

/* Styling for the upload date in the list */
.video-list .views {
  gap: 5px;
}

.video-list .upload-date-list {
  font-size: 12px;
  color: #777;
}

/* Separator dot */
.video-list .dot-separator {
  color: #777;
  font-size: 12px;
}

@media (max-width: 991px) {
  .containerr {
    flex-direction: column;
    padding: 20px;
  }
}
@media (max-width: 768px) {
  .containerr {
    grid-template-columns: 1fr;
  }
}

/* containerr ends */

/* FOOTER SECTION */
footer {
  background-color: rgba(255, 209, 220, 0.9);
  width: 100%;
  left: 0;
  padding: 20px 0;
  position: relative;
}

footer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 100px;
  width: 100%;
  background: #ffffff;
}

footer .content .logo-details img {
  max-width: 500px; /* Sesuaikan ukuran gambar maksimal */
  height: 60px; /* Menjaga rasio gambar */
  margin-right: 10px; /* Beri jarak dari teks atau elemen lainnya */
  vertical-align: middle; /* Pusatkan gambar secara vertikal jika ada teks sebaris */
}

footer .content {
  max-width: 1450px;
  margin: auto;
  padding: 30px 40px 40px 40px;
}
footer .content .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 50px;
}
.content .top .logo-details {
  color: #000000;
  font-size: 30px;
}
.content .top .media-icons {
  display: flex;
}
.content .top .media-icons a {
  height: 40px;
  width: 40px;
  margin: 0 8px;
  border-radius: 50%;
  display: flex;
  align-items: center; /* Vertically centers the content */
  justify-content: center; /* Horizontally centers the content */

  color: #000000;
  font-size: 17px;
  text-decoration: none;
  transition: all 0.4s ease;
}
.top .media-icons a:nth-child(1) {
  background: #ff66b2;
}
.top .media-icons a:nth-child(1):hover {
  color: #ff66b2;
  background: #fff;
}
.top .media-icons a:nth-child(2) {
  background: #ff66b2;
}
.top .media-icons a:nth-child(2):hover {
  color: #ff66b2;
  background: #fff;
}
.top .media-icons a:nth-child(3) {
  background: #e1306c;
}
.top .media-icons a:nth-child(3):hover {
  color: #e1306c;
  background: #fff;
}
.top .media-icons a:nth-child(4) {
  background: #0077b5;
}
.top .media-icons a:nth-child(4):hover {
  color: #0077b5;
  background: #fff;
}
.top .media-icons a:nth-child(5) {
  background: #ff0000;
}
.top .media-icons a:nth-child(5):hover {
  color: #ff0000;
  background: #fff;
}
footer .content .link-boxes {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
footer .content .link-boxes .box {
  width: calc(100% / 5 - 10px);
}
.content .link-boxes .box .link_name {
  color: #000000;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 10px;
  text-decoration: underline;
  text-decoration-color: #000000;
  text-underline-offset: 7px;
}

.content .link-boxes .box li {
  margin: 6px 0;
  list-style: none;
}
.content .link-boxes .box li a {
  color: #050505;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  opacity: 0.8;
  transition: all 0.4s ease;
}
/* Efek hover pink baru untuk tautan di footer */
.content .link-boxes .box li a:hover {
  color: #cc0066; /* Warna teks pink lebih tua saat hover */
  text-shadow: 0 0 5px #ff66b2, 0 0 10px #ff66b2; /* Efek neon pink */
  transform: translateY(-1px);
  animation: neonPulsePink 1.5s infinite alternate; /* Pastikan nama animasi sesuai dengan keyframes pink */
  opacity: 1; /* Pastikan visibilitas penuh saat hover */
  text-decoration: none; /* Hapus underline untuk tampilan neon yang lebih bersih */
}

/* Definisi keyframes untuk animasi neonPulsePink */
@keyframes neonPulsePink {
  from {
    text-shadow: 0 0 5px #ff66b2, 0 0 10px #ff66b2;
  }
  to {
    text-shadow: 0 0 10px #ff66b2, 0 0 20px #ff66b2;
  }
}

.content .link-boxes .input-box {
  margin-right: 55px;
}
.link-boxes .input-box input {
  height: 40px;
  width: calc(100% + 55px);
  outline: none;
  border: 1px solid #000000;
  background: #ffffff;
  border-radius: 4px;
  padding: 0 15px;
  font-size: 15px;
  color: #000000;
  margin-top: 5px;
}
.link-boxes .input-box input::placeholder {
  color: #000000;
  font-size: 16px;
}
.link-boxes .input-box input[type="button"] {
  background: #fff;
  color: #0e0e0e;
  border: none;
  font-size: 18px;
  font-weight: 500;
  margin: 4px 0;
  opacity: 0.8;
  cursor: pointer;
  transition: all 0.4s ease;
}
.input-box input[type="button"]:hover {
  opacity: 1;
}
footer .bottom-details {
  width: 100%;
  background: #ffffff;
}
footer .bottom-details .bottom_text {
  max-width: 1250px;
  margin: auto;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
}
.bottom-details .bottom_text span,
.bottom-details .bottom_text a {
  font-size: 14px;
  font-weight: 300;
  color: #000000;
  opacity: 0.8;
  text-decoration: none;
}
.bottom-details .bottom_text a:hover {
  opacity: 1;
  text-decoration: underline;
}
.bottom-details .bottom_text a {
  margin-right: 10px;
}

@media (max-width: 900px) {
  footer .content .link-boxes {
    flex-wrap: wrap;
  }
  footer .content .link-boxes .input-box {
    width: 40%;
    margin-top: 10px;
  }
}
@media (max-width: 700px) {
  footer {
    position: relative;
  }
  .content .top .logo-details {
    font-size: 26px;
  }
  .content .top .media-icons a {
    height: 35px;
    width: 35px;
    font-size: 14px;
    line-height: 35px;
  }
  footer .content .link-boxes .box {
    width: calc(100% / 3 - 10px);
  }
  footer .content .link-boxes .input-box {
    width: 60%;
  }
  .bottom-details .bottom_text span,
  .bottom-details .bottom_text a {
    font-size: 12px;
  }
}
@media (max-width: 520px) {
  footer::before {
    top: 145px;
  }
  footer .content .top {
    flex-direction: column;
  }
  .content .top .media-icons {
    margin-top: 16px;
  }
  footer .content .link-boxes .box {
    width: calc(100% / 2 - 10px);
  }
  footer .content .link-boxes .input-box {
    width: 100%;
  }
}
@media (max-width: 700px) {
  footer .content .logo-details img {
    max-width: 80px; /* Sesuaikan ukuran untuk layar kecil */
  }
}

@media (max-width: 520px) {
  footer .content .logo-details img {
    max-width: 60px; /* Sesuaikan ukuran lebih kecil jika layar sangat kecil */
  }
}
/* FOOTER SECTION ENDSSSS */

/* Widget Container */
.visitor-dashboard {
  position: fixed;
  bottom: 140px; /* Diperkecil dari 160px */
  left: 8px; /* Diperkecil dari 10px */
  display: flex;
  flex-direction: column;
  gap: 4px; /* Diperkecil dari 6px */
  background-color: rgba(255, 209, 220, 0.7);
  padding: 8px; /* Diperkecil dari 10px */
  border-radius: 10px; /* Diperkecil dari 12px */
  backdrop-filter: blur(5px); /* Diperkecil dari 6px */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Diperkecil dari 0 3px 8px */
  z-index: 9998;
  max-width: 120px; /* Diperkecil dari 150px */
  color: #000000;
  animation: fadeIn 0.5s ease;
  top: auto;
}

.visitor-heading {
  font-size: 12px; /* Diperkecil dari 14px */
  font-weight: bold;
  color: #000000;
  text-align: center;
  margin-bottom: 4px; /* Diperkecil dari 5px */
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 2px; /* Diperkecil dari 3px */
}

.visitor-card {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px; /* Diperkecil dari 10px */
  padding: 5px; /* Diperkecil dari 6px */
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease;
  color: #000000;
  min-width: 100px; /* Diperkecil dari 120px */
}

.visitor-card:hover {
  transform: translateY(-1px); /* Diperkecil dari -1.5px */
}

.visitor-icon {
  font-size: 14px; /* Diperkecil dari 16px */
  margin-bottom: 2px; /* Diperkecil dari 3px */
}

.visitor-title {
  font-size: 10px; /* Diperkecil dari 11px */
  font-weight: 600;
  margin-bottom: 0.5px; /* Diperkecil dari 1px */
  text-align: center;
}

.visitor-value {
  font-size: 12px; /* Diperkecil dari 14px */
  font-weight: bold;
  text-align: center;
}

.weekly .visitor-value {
  color: #007e33;
}
.monthly .visitor-value {
  color: #01579b;
}
.yearly .visitor-value {
  color: #e65100;
}
.total .visitor-value {
  color: #6a1b9a;
}

#showVisitorBtn {
  position: fixed;
  left: 10px; /* Diperkecil dari 15px */
  bottom: 10px; /* Diperkecil dari 15px */
  padding: 5px 10px; /* Diperkecil dari 6px 12px */
  font-size: 10px; /* Diperkecil dari 12px */
  background: #a8cff8;
  color: #000000;
  border: none;
  border-radius: 10px; /* Diperkecil dari 12px */
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Diperkecil dari 0 3px 8px */
  opacity: 0.8;
  display: none;
  transition: opacity 0.3s ease;
}

#showVisitorBtn:hover {
  opacity: 1;
}

.visitor-close-btn {
  position: absolute;
  top: 4px; /* Diperkecil dari 5px */
  right: 5px; /* Diperkecil dari 6px */
  background: transparent;
  border: none;
  color: #000000;
  font-size: 12px; /* Diperkecil dari 14px */
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 16px; /* Diperkecil dari 18px */
  height: 16px; /* Diperkecil dari 18px */
  text-align: center;
  user-select: none;
}

.fade-out {
  animation: fadeOut 0.5s forwards;
}

.fade-in {
  animation: fadeIn 0.5s forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(6px);
  } /* Diperkecil dari 8px */
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  } /* Diperkecil dari 8px */
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== RESPONSIVE UNTUK HP BIASA ===== */
@media (max-width: 480px) {
  .visitor-dashboard {
    bottom: 130px; /* Diperkecil dari 150px */
    left: 5px; /* Diperkecil dari 6px */
    padding: 4px; /* Diperkecil dari 5px */
    gap: 2px; /* Diperkecil dari 3px */
    max-width: 80px; /* Diperkecil dari 100px */
  }

  .visitor-heading {
    font-size: 9px; /* Diperkecil dari 10px */
  }

  .visitor-card {
    min-width: 60px; /* Diperkecil dari 80px */
    padding: 2px; /* Diperkecil dari 3px */
  }

  .visitor-icon {
    font-size: 9px; /* Diperkecil dari 10px */
  }

  .visitor-title {
    font-size: 7px; /* Diperkecil dari 8px */
  }

  .visitor-value {
    font-size: 9px; /* Diperkecil dari 10px */
  }

  #showVisitorBtn {
    font-size: 9px; /* Diperkecil dari 10px */
    padding: 4px 6px; /* Diperkecil dari 5px 7px */
    bottom: 8px; /* Diperkecil dari 12px */
  }
}

/* ===== TAMBAHAN UNTUK HP SUPER KECIL < 360px ===== */
@media (max-width: 360px) {
  .visitor-dashboard {
    max-width: 70px; /* Diperkecil dari 90px */
    gap: 1px; /* Diperkecil dari 2px */
    padding: 2px; /* Diperkecil dari 3px */
  }

  .visitor-heading {
    font-size: 8px; /* Diperkecil dari 9px */
  }

  .visitor-card {
    min-width: 50px; /* Diperkecil dari 70px */
    padding: 1px; /* Diperkecil dari 2px */
  }

  .visitor-icon {
    font-size: 8px; /* Diperkecil dari 9px */
  }

  .visitor-title {
    font-size: 6px; /* Diperkecil dari 7px */
  }

  .visitor-value {
    font-size: 8px; /* Diperkecil dari 9px */
  }

  #showVisitorBtn {
    font-size: 8px; /* Diperkecil dari 9px */
    padding: 2px 4px; /* Diperkecil dari 3px 5px */
    bottom: 6px; /* Diperkecil dari 10px */
  }
}

/* Scroll to Top Button Styles */
/* Scroll to Top Button */
/* Tombol utama */
#scrollToTopBtn {
  position: fixed;
  bottom: 80px; /* Diperkecil dari 90px */
  right: 30px; /* Diperkecil dari 40px */
  z-index: 100;
  display: none; /* Keep this as `none` for JavaScript control */

  background-color: rgba(255, 209, 220, 0.7); /* Pink muda */
  color: #4a4a4a; /* Ganti warna teks/ikon agar lebih kontras dengan pink */
  border: none;
  outline: none;
  width: 50px; /* Diperkecil dari 60px */
  height: 50px; /* Diperkecil dari 60px */
  border-radius: 50%;
  font-size: 25px; /* Diperkecil dari 30px */
  cursor: pointer;
  /* Sesuaikan box-shadow dengan nuansa pink */
  box-shadow: 0 3px 10px rgba(255, 150, 180, 0.5); /* Diperkecil */
  transition: all 0.3s ease;

  display: flex; /* Override display: none for showing the button */
  justify-content: center;
  align-items: center;
  line-height: 1;
  padding: 0;
}

#scrollToTopBtn:hover {
  background-color: rgba(255, 180, 200, 0.8); /* Pink lebih gelap saat hover */
  transform: scale(1.05); /* Diperkecil dari 1.1 */
  /* Sesuaikan box-shadow saat hover */
  box-shadow: 0 0 20px rgba(255, 150, 180, 0.8),
    0 0 40px rgba(255, 150, 180, 0.6); /* Diperkecil */
  animation: pulse-pink 1s infinite alternate; /* Ganti nama animasi */
}

@keyframes pulse-pink {
  /* Ganti nama keyframes */
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 150, 180, 0.5),
      0 0 20px rgba(255, 150, 180, 0.4); /* Diperkecil */
  }
  100% {
    transform: scale(1.05); /* Diperkecil dari 1.1 */
    box-shadow: 0 0 20px rgba(255, 150, 180, 0.8),
      0 0 40px rgba(255, 150, 180, 0.6); /* Diperkecil */
  }
}
/* ========== RESPONSIVE ========== */

/* Tablet */
@media (max-width: 992px) {
  #scrollToTopBtn {
    right: 25px; /* Diperkecil dari 30px */
    bottom: 110px; /* Diperkecil dari 120px */
    width: 45px; /* Diperkecil dari 55px */
    height: 45px; /* Diperkecil dari 55px */
    font-size: 22px; /* Diperkecil dari 26px */
  }
}

/* HP besar */
@media (max-width: 768px) {
  #scrollToTopBtn {
    right: 18px; /* Diperkecil dari 20px */
    bottom: 150px; /* Diperkecil dari 160px */
    width: 40px; /* Diperkecil dari 50px */
    height: 40px; /* Diperkecil dari 50px */
    font-size: 20px; /* Diperkecil dari 24px */
  }
}

/* HP kecil */
@media (max-width: 480px) {
  #scrollToTopBtn {
    right: 12px; /* Diperkecil dari 15px */
    bottom: 180px; /* Diperkecil dari 190px */
    width: 35px; /* Diperkecil dari 45px */
    height: 35px; /* Diperkecil dari 45px */
    font-size: 18px; /* Diperkecil dari 22px */
  }
}

/* HP sangat kecil (misal iPhone SE) */
@media (max-width: 360px) {
  #scrollToTopBtn {
    bottom: 200px; /* Diperkecil dari 210px */
    right: 8px; /* Diperkecil dari 10px */
    width: 30px; /* Diperkecil dari 40px */
    height: 30px; /* Diperkecil dari 40px */
    font-size: 16px; /* Diperkecil dari 20px */
  }
}

/* Scroll to Top Button Styles */
/* Scroll to Top Button */
/* Tombol utama */
#scrollToTopBtn {
  position: fixed;
  bottom: 80px; /* Diperkecil dari 90px */
  right: 30px; /* Diperkecil dari 40px */
  z-index: 100;
  display: none; /* Keep this as `none` for JavaScript control */

  background-color: rgba(255, 209, 220, 0.7); /* Pink muda */
  color: #4a4a4a; /* Ganti warna teks/ikon agar lebih kontras dengan pink */
  border: none;
  outline: none;
  width: 50px; /* Diperkecil dari 60px */
  height: 50px; /* Diperkecil dari 60px */
  border-radius: 50%;
  font-size: 25px; /* Diperkecil dari 30px */
  cursor: pointer;
  /* Sesuaikan box-shadow dengan nuansa pink */
  box-shadow: 0 3px 10px rgba(255, 150, 180, 0.5); /* Diperkecil */
  transition: all 0.3s ease;

  display: flex; /* Override display: none for showing the button */
  justify-content: center;
  align-items: center;
  line-height: 1;
  padding: 0;
}

#scrollToTopBtn:hover {
  background-color: rgba(255, 180, 200, 0.8); /* Pink lebih gelap saat hover */
  transform: scale(1.05); /* Diperkecil dari 1.1 */
  /* Sesuaikan box-shadow saat hover */
  box-shadow: 0 0 20px rgba(255, 150, 180, 0.8),
    0 0 40px rgba(255, 150, 180, 0.6); /* Diperkecil */
  animation: pulse-pink 1s infinite alternate; /* Ganti nama animasi */
}

@keyframes pulse-pink {
  /* Ganti nama keyframes */
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 150, 180, 0.5),
      0 0 20px rgba(255, 150, 180, 0.4); /* Diperkecil */
  }
  100% {
    transform: scale(1.05); /* Diperkecil dari 1.1 */
    box-shadow: 0 0 20px rgba(255, 150, 180, 0.8),
      0 0 40px rgba(255, 150, 180, 0.6); /* Diperkecil */
  }
}
/* ========== RESPONSIVE ========== */

/* Tablet */
@media (max-width: 992px) {
  #scrollToTopBtn {
    right: 25px; /* Diperkecil dari 30px */
    bottom: 110px; /* Diperkecil dari 120px */
    width: 45px; /* Diperkecil dari 55px */
    height: 45px; /* Diperkecil dari 55px */
    font-size: 22px; /* Diperkecil dari 26px */
  }
}

/* HP besar */
@media (max-width: 768px) {
  #scrollToTopBtn {
    right: 18px; /* Diperkecil dari 20px */
    bottom: 150px; /* Diperkecil dari 160px */
    width: 40px; /* Diperkecil dari 50px */
    height: 40px; /* Diperkecil dari 50px */
    font-size: 20px; /* Diperkecil dari 24px */
  }
}

/* HP kecil */
@media (max-width: 480px) {
  #scrollToTopBtn {
    right: 12px; /* Diperkecil dari 15px */
    bottom: 180px; /* Diperkecil dari 190px */
    width: 35px; /* Diperkecil dari 45px */
    height: 35px; /* Diperkecil dari 45px */
    font-size: 18px; /* Diperkecil dari 22px */
  }
}

/* HP sangat kecil (misal iPhone SE) */
@media (max-width: 360px) {
  #scrollToTopBtn {
    bottom: 200px; /* Diperkecil dari 210px */
    right: 8px; /* Diperkecil dari 10px */
    width: 30px; /* Diperkecil dari 40px */
    height: 30px; /* Diperkecil dari 40px */
    font-size: 16px; /* Diperkecil dari 20px */
  }
}

/* Header Judul*/
header {
  margin-top: 50px;
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--accent-color)
  ); /* Updated gradient colors */
  color: white;
  padding: 10px 15px; /* Reduced from 40px 20px */
  text-align: center;
  box-shadow: var(--shadow-light);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  position: relative;
  overflow: hidden;
}

header::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(45deg);
  pointer-events: none;
}

header h1 {
  margin: 0;
  font-size: 2.5em; /* Reduced from 3em */
  font-weight: 700;
  letter-spacing: 1.5px; /* Reduced from 2px */
  text-shadow: 1.5px 1.5px 3px rgba(0, 0, 0, 0.2); /* Reduced shadow */
}

header p {
  font-size: 1em; /* Reduced from 1.2em */
  margin-top: 8px; /* Reduced from 10px */
  font-weight: 300;
}

/* --- Media query for smaller screens --- */
@media (max-width: 600px) {
  header {
    margin-top: 40px; /* Moves the header up by reducing the top margin */
    padding: 30px 15px; /* Increases the header's height and width by adjusting padding */
  }

  header h1 {
    font-size: 2em; /* Adjusted for smaller screens */
  }

  header p {
    font-size: 1em; /* Adjusted for smaller screens */
  }
}
/* Media query for tablets and smaller devices */
@media (max-width: 768px) {
  header {
    padding: 30px 15px; /* Reduced padding for smaller screens */
  }

  header h1 {
    font-size: 2em; /* Reduced heading font size */
    letter-spacing: 1.5px;
  }

  header p {
    font-size: 1em; /* Reduced paragraph font size */
  }
}

/* Media query for mobile devices */
@media (max-width: 480px) {
  header {
    margin-top: 30px; /* Reduced top margin */
    padding: 20px 10px; /* Further reduced padding for mobile */
  }

  header h1 {
    font-size: 1.5em; /* Significant reduction for mobile screens */
    letter-spacing: 1px;
  }

  header p {
    font-size: 0.9em; /* Smallest font size for readability */
    margin-top: 5px;
  }
}

/* Styling untuk tombol WhatsApp mengambang */
.whatsapp-button {
  position: fixed;
  bottom: 150px; /* Posisi dari bawah */
  right: 30px; /* DIGANTI: Digeser sedikit ke kiri (menambah dari 20px) */
  background-color: #25d366; /* Warna hijau WhatsApp */
  color: white; /* Warna teks putih */
  border-radius: 9999px; /* Bentuk lingkaran penuh */
  width: 50px; /* Lebar tombol */
  height: 50px; /* Tinggi tombol */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem; /* Ukuran ikon */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); /* Bayangan tombol */
  cursor: pointer; /* Kursor pointer saat diarahkan */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transisi halus */
  z-index: 1000; /* Z-index tinggi agar di atas elemen lain */
}

.whatsapp-button:hover {
  transform: scale(1.05); /* Sedikit membesar saat dihover */
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3); /* Bayangan lebih gelap saat dihover */
}

/* Popup WhatsApp */
.whatsapp-popup {
  position: fixed;
  bottom: 150px; /* Sejajar dengan tombol WhatsApp */
  right: 84px; /* DIGANTI: Disesuaikan dengan posisi tombol baru (30px right + 50px lebar tombol + 4px jarak = 84px) */
  background-color: white; /* Latar belakang putih */
  border-radius: 0.8rem; /* Sudut membulat */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); /* Bayangan popup */
  width: 300px; /* Lebar popup */
  max-width: calc(
    100% - 70px
  ); /* Responsif untuk layar kecil, disesuaikan margin */
  opacity: 0; /* Awalnya tidak terlihat */
  transform: translateY(15px) scale(0.97); /* Transformasi awal untuk animasi */
  visibility: hidden; /* Awalnya tersembunyi */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; /* Transisi animasi */
  z-index: 1001; /* Z-index lebih tinggi dari elemen lain */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Memastikan konten tetap di dalam sudut membulat */
}

.whatsapp-popup.show {
  opacity: 1; /* Terlihat saat kelas 'show' ditambahkan */
  transform: translateY(0) scale(1); /* Kembali ke posisi normal */
  visibility: visible; /* Terlihat */
}

/* Header popup */
.popup-header {
  background-color: #075e54; /* Warna header WhatsApp */
  color: white; /* Warna teks putih */
  padding: 0.8rem 1rem; /* Padding header */
  border-top-left-radius: 0.8rem; /* Sudut kiri atas membulat */
  border-top-right-radius: 0.8rem; /* Sudut kanan atas membulat */
  display: flex;
  justify-content: space-between; /* Spasi antara elemen */
  align-items: center; /* Penyelarasan vertikal */
}

.popup-header h3 {
  margin: 0; /* Hapus margin default */
  font-size: 1rem; /* Ukuran font header */
}

/* Tombol tutup popup */
.close-button1 {
  background: none; /* Tanpa latar belakang */
  border: none; /* Tanpa border */
  color: white; /* Warna teks putih */
  font-size: 1.4rem; /* Ukuran ikon tutup */
  cursor: pointer; /* Kursor pointer */
  padding: 0.2rem; /* Padding tombol */
  border-radius: 0.4rem; /* Sudut membulat */
  transition: background-color 0.2s ease; /* Transisi warna latar belakang */
}

.close-button1:hover {
  background-color: rgba(
    255,
    255,
    255,
    0.2
  ); /* Latar belakang transparan saat dihover */
}

/* Isi popup */
.popup-body {
  padding: 1rem; /* Padding isi popup */
  display: flex;
  flex-direction: column; /* Tata letak kolom */
  gap: 0.8rem; /* Jarak antar elemen */
}

.popup-body p {
  font-size: 0.85rem; /* Ukuran font teks body */
  color: #555; /* Warna teks abu-abu */
  margin-bottom: 0.4rem; /* Spasi sebelum textarea */
}

.popup-body textarea {
  width: calc(100% - 16px); /* Lebar textarea, mengurangi padding */
  min-height: 80px; /* Tinggi minimum textarea */
  padding: 0.6rem 8px; /* Padding textarea */
  border: 1px solid #e2e8f0; /* Border textarea */
  border-radius: 0.4rem; /* Sudut membulat */
  resize: vertical; /* Hanya bisa diubah ukurannya secara vertikal */
  font-size: 0.9rem; /* Ukuran font */
  outline: none; /* Hapus outline saat fokus */
  transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Transisi halus */
}

.popup-body textarea:focus {
  border-color: #25d366; /* Warna border saat fokus */
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.2); /* Bayangan saat fokus */
}

.popup-body button {
  background-color: #25d366; /* Warna latar belakang tombol */
  color: white; /* Warna teks putih */
  padding: 0.65rem 1rem; /* Padding tombol */
  border-radius: 0.4rem; /* Sudut membulat */
  border: none; /* Tanpa border */
  cursor: pointer; /* Kursor pointer */
  font-size: 0.95rem; /* Ukuran font tombol */
  font-weight: 600; /* Ketebalan font */
  transition: background-color 0.2s ease, transform 0.2s ease; /* Transisi halus */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem; /* Jarak antar ikon dan teks */
}

.popup-body button:hover {
  background-color: #1da851; /* Warna latar belakang lebih gelap saat dihover */
  transform: translateY(-1px); /* Sedikit naik saat dihover */
}

/* Gaya kotak pesan (untuk notifikasi) */
.message-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Pusatkan di layar */
  background-color: #333; /* Latar belakang gelap */
  color: white; /* Warna teks putih */
  padding: 0.8rem 1.2rem; /* Padding */
  border-radius: 0.6rem; /* Sudut membulat */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); /* Bayangan */
  z-index: 1001; /* Z-index tertinggi */
  opacity: 0; /* Awalnya tidak terlihat */
  visibility: hidden; /* Awalnya tersembunyi */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Transisi halus */
  text-align: center; /* Teks di tengah */
  font-size: 0.85rem; /* Ukuran font */
  max-width: 70%; /* Batasi lebar pada layar kecil */
  box-sizing: border-box; /* Sertakan padding dalam perhitungan lebar */
}

.message-box.show {
  opacity: 1; /* Terlihat saat kelas 'show' ditambahkan */
  visibility: visible; /* Terlihat */
}

/* --- Media Queries untuk Responsivitas --- */

/* Untuk layar sangat kecil (misalnya, ponsel kecil) */
@media (max-width: 375px) {
  .whatsapp-button {
    bottom: 215px; /* Posisi lebih ke atas */
    right: 25px; /* DIGANTI: Digeser sedikit ke kiri */
    width: 45px;
    height: 45px;
    font-size: 1.8rem;
  }

  .whatsapp-popup {
    bottom: 215px; /* Sejajar dengan tombol WhatsApp */
    right: 74px; /* DIGANTI: Disesuaikan dengan posisi tombol baru (25px right + 45px lebar tombol + 4px jarak = 74px) */
    width: calc(100% - 70px); /* Disesuaikan dengan margin baru */
    border-radius: 0.6rem;
  }

  .popup-header {
    padding: 0.7rem 0.8rem;
  }

  .popup-header h3 {
    font-size: 0.9rem;
  }

  .close-button1 {
    font-size: 1.2rem;
  }

  .popup-body {
    padding: 0.8rem;
    gap: 0.6rem;
  }

  .popup-body p {
    font-size: 0.8rem;
  }

  .popup-body textarea {
    min-height: 70px;
    padding: 0.5rem 6px;
    font-size: 0.85rem;
  }

  .popup-body button {
    padding: 0.55rem 0.8rem;
    font-size: 0.85rem;
  }

  .message-box {
    padding: 0.7rem 1rem;
    font-size: 0.75rem;
  }
}

/* Untuk layar kecil (misalnya, ponsel) */
@media (min-width: 376px) and (max-width: 480px) {
  .whatsapp-button {
    bottom: 220px; /* Posisi lebih ke atas */
    right: 25px; /* DIGANTI: Digeser sedikit ke kiri */
    width: 50px;
    height: 50px;
    font-size: 2rem;
  }

  .whatsapp-popup {
    bottom: 220px; /* Sejajar dengan tombol WhatsApp */
    right: 79px; /* DIGANTI: Disesuaikan dengan posisi tombol baru (25px right + 50px lebar tombol + 4px jarak = 79px) */
    width: calc(100% - 70px); /* Disesuaikan dengan margin baru */
    border-radius: 0.8rem;
  }

  .popup-header {
    padding: 0.8rem 1rem;
  }

  .popup-header h3 {
    font-size: 1rem;
  }

  .close-button1 {
    font-size: 1.4rem;
  }

  .popup-body {
    padding: 1rem;
    gap: 0.8rem;
  }

  .popup-body p {
    font-size: 0.85rem;
  }

  .popup-body textarea {
    min-height: 80px;
    padding: 0.6rem 8px;
    font-size: 0.9rem;
  }

  .popup-body button {
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
  }

  .message-box {
    padding: 0.8rem 1.2rem;
    font-size: 0.85rem;
  }
}

/* Untuk layar sedang (misalnya, tablet) */
@media (min-width: 481px) and (max-width: 768px) {
  .whatsapp-button {
    bottom: 230px; /* Posisi lebih ke atas */
    right: 30px; /* DIGANTI: Digeser sedikit ke kiri */
    width: 55px;
    height: 55px;
    font-size: 2.2rem;
  }

  .whatsapp-popup {
    bottom: 230px; /* Sejajar dengan tombol WhatsApp */
    right: 89px; /* DIGANTI: Disesuaikan dengan posisi tombol baru (30px right + 55px lebar tombol + 4px jarak = 89px) */
    width: 300px; /* Pertahankan lebar konsisten untuk tablet */
    max-width: calc(100% - 70px); /* Disesuaikan dengan margin baru */
  }
}