/* CONTAINER MEJA */
.desk-container {
  position: relative;
  width: 100%;
  height: 520px;
  background: #111827; /* Warna latar meja yang menyatu dengan tema dark */
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  touch-action: none; /* Mencegah layar ter-scroll saat geser foto di HP */
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5);
}

/* FOTO POLAROID */
.polaroid-card {
  position: absolute;
  width: 190px;
  padding: 10px 10px 18px 10px;
  background: #fcfbf9; /* Warna putih gading khas polaroid kertas */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  cursor: grab;
  user-select: none;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

/* EFEK SAAT DITEKAN/DIGESER */
.polaroid-card:active {
  cursor: grabbing;
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.6);
  transform: scale(1.05) rotate(0deg) !important;
}

.polaroid-card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 2px;
  pointer-events: none; /* Mencegah browser menarik gambar secara native */
}

.polaroid-card .polaroid-caption {
  margin-top: 10px;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-size: 0.8rem;
  color: #2b2b2b;
  font-weight: 500;
}

/* RESPONSIVE UNTUK HP */
@media (max-width: 576px) {
  .desk-container {
    height: 440px;
  }
  .polaroid-card {
    width: 140px;
    padding: 8px 8px 14px 8px;
  }
  .polaroid-card img {
    height: 120px;
  }
  .polaroid-card .polaroid-caption {
    font-size: 0.7rem;
  }
}

.template-foto {
    position:absolute;
      bottom:10px;
      left:10px;
      background: rgba(0,0,0,0.5);
      color:white;
      padding:4px 10px;
      border-radius:6px;
      font-size:13px;
      pointer-events:none;
      z-index:6;
   }

   .template-bunga {
    position:absolute;
      bottom:10px;
      left:10px;
      background: rgba(0,0,0,0.5);
      color:white;
      padding:4px 10px;
      border-radius:6px;
      font-size:13px;
      pointer-events:none;
      z-index:6;
   }

   .template-video {
       position: absolute;
       bottom: 10px;
       left: 10px;
       background: rgba(0, 0, 0, 0.5);
       color: white;
       padding: 4px 10px;
       border-radius: 6px;
       font-size: 13px;
       pointer-events: none;
       z-index: 6;
   }

   .social-link {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 10px;
       margin-top: 10px;
       font-size: 13px;
   }

   .social-link .name {
       color: rgba(255,255,255,0.35);
       letter-spacing: 2px;
       font-size: 10px;
       text-transform: uppercase;
       font-family: 'Poppins', sans-serif;
   }

   .social-link .divider {
       margin: 0 8px;
       color: rgba(253,230,138,0.2);
       font-size: 10px;
   }

   .social-link a {
       color: rgba(255,255,255,0.4);
       font-size: 15px;
       transition: all 0.3s ease;
   }

   /* hover halus (elegan, bukan mencolok) */
   .social-link a:hover {
       color: rgba(253,230,138,0.8);
       transform: translateY(-2px);
   }

   .header {
       height: 100vh;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
   }

   /* isi atas */
   .sidebar-top {
       flex: 1;
   }

   /* bottom tetap di bawah */
   .sidebar-bottom {
       text-align: center;
       padding: 15px 10px;
       font-size: 11px;
       color: rgba(255, 255, 255, 0.25);
       letter-spacing: 2px;
       margin-bottom: 8px;
   }

   /* biar rapi */
   .sidebar-bottom strong {
       color: rgba(253,230,138,0.4);
       font-weight: 400;
   }

   .border-top-soft {
       border-top: 1px solid rgba(255, 255, 255, 0.06);
       padding-top: 15px;
       margin-top: 20px;
   }

   .music-toggle {
       position: fixed;
       bottom: 70px;
       right: 15px;

       width: 45px;
       height: 45px;
       /* biar perfect circle */

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

       background: rgba(0, 0, 0, 0.85);
       /* dark */
       backdrop-filter: blur(12px);

       border-radius: 50%;
       color: #eee;
       cursor: pointer;

       transition: 0.3s;
       z-index: 999;
   }

   .music-toggle:hover {
       transform: scale(1.05);
   }


   /* PANEL */
   .music-panel {
       position: fixed;
       bottom: 80px;
       right: 20px;
       width: 240px;

       background: rgba(10, 10, 10, 0.95);
       backdrop-filter: blur(16px);

       border-radius: 14px;
       display: none;
       overflow: hidden;

       z-index: 999;
   }

   /* HEADER */
   .music-header {
       display: flex;
       justify-content: space-between;
       padding: 10px 14px;
       font-size: 11px;
       color: #777;
   }

   /* CURRENT */
   .music-current {
       padding: 10px 14px;
   }

   #songTitle {
       font-size: 13px;
       color: #fff;
       margin-bottom: 6px;
   }

   .controls i {
       font-size: 20px;
       cursor: pointer;
       color: #ccc;
   }

   .controls i:hover {
       color: #fff;
   }

   /* PROGRESS */
   .progress {
       height: 2px;
       background: rgba(255, 255, 255, 0.1);
   }

   .progress-bar {
       height: 2px;
       width: 0%;
       background: rgba(253,230,138,0.7);
   }

   /* PLAYLIST */
   .music-panel ul {
       list-style: none;
       margin: 0;
       padding: 6px 0;
       max-height: 160px;
       overflow-y: auto;
   }

   .music-panel li {
       padding: 8px 14px;
       font-size: 12px;
       color: #aaa;
       cursor: pointer;
       transition: all 0.2s;
   }

   .music-panel li:hover {
       color: #fff;
       background: rgba(255,255,255,0.03);
   }

   .music-panel li.active {
       color: rgba(253,230,138,0.9);
   }

   .now-playing {
       position: fixed;
       bottom: 80px;
       right: 50px;
       max-width: 100px;

       font-size: 11px;
       color: #888;

       opacity: 0;
       transform: translateY(10px);
       transition: all 0.4s ease;

       z-index: 998;
   }

   .now-playing.active {
       opacity: 1;
       transform: translateY(0);
   }

   .now-playing .label {
       display: block;
       letter-spacing: 1px;
       font-size: 10px;
       color: #666;
       margin-bottom: 2px;
   }

   /* track */
   .now-playing .track {
       overflow: hidden;
       white-space: nowrap;
       width: 100%;
   }

   /* TEXT */
   .now-playing .track span {
       display: inline-block;
       white-space: nowrap;
       animation: marquee 10s linear infinite;
       color: #ccc;
   }

   @media (max-width: 768px) {
       .now-playing {
           right: 45px;
       }

       .now-playing .track span {
           animation: marquee 10s linear infinite;
           display: inline-block;
           white-space: nowrap;
           animation: marquee 10s linear infinite;
           color: #ccc;
       }
   }

   @keyframes marquee {
       0% {
           transform: translateX(100%);
       }

       100% {
           transform: translateX(-100%);
       }
   }

   .counter {
       font-weight: 300;
       letter-spacing: 1px;
       color: #c2cad1;
       margin-top: 10px;
       font-size: 12px;
   }

   .tagline {
       font-size: 13px;
       color: #aaa;
       letter-spacing: 1px;
   }

   .tagline a,
   .tagline {
       text-decoration: none;
       color: inherit;
   }

   .cursor {
       display: inline-block;
       margin-left: 2px;
       animation: blink 0.8s infinite;
       color: rgba(253,230,138,0.6) !important;
       text-decoration: none !important;
       border: none !important;
       outline: none !important;
       background: transparent;
       user-select: none;
       font-weight: 300;
   }

   #typing-text {
       text-decoration: none;
       border-bottom: none;
       outline: none;
   }

   @keyframes blink {

       0%,
       100% {
           opacity: 1;
       }

       50% {
           opacity: 0;
       }
   }

   .hero {
       position: relative;
       height: 100vh;
       overflow: hidden;
   }

   /* VIDEO BACKGROUND */
   .hero-bg {
       position: absolute;
       top: 0;
       left: 0;

       width: 100%;
       height: 100%;

       object-fit: cover;

       z-index: 0;
       filter: brightness(0.6) contrast(1.1) saturate(0.9);
   }

   /* DARK OVERLAY (biar video lebih cinematic) */
   .hero::before {
       content: "";
       position: absolute;
       inset: 0;
       background: rgba(0, 0, 0, 0.35);
       z-index: 1;
   }

   /* TEXT DI ATAS VIDEO */
   .hero-content {
       position: relative;
       z-index: 2;
   }


   .img-wrap {
       width: 100%;
       height: 260px;
       /* atur tinggi seragam */
       overflow: hidden;
       border-radius: 10px;
       position: relative;
   }

   .img-wrap img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       /* ini kunci utama */
       object-position: center;
       display: block;
   }

   .section-title small.drive-link {
       display: flex;
       margin-top: 12px;
       gap: 6px;
       font-weight: 400;
       font-size: 12px;
       color: rgb(0, 0, 0);
       letter-spacing: 0.5px;
   }

   .section-title small.drive-link a {
       display: inline-flex;
       align-items: center;
       gap: 5px;

       color: rgba(0, 0, 0, 0.7);
       text-decoration: none;
       transition: 0.3s ease;
   }

   .section-title small.drive-link i {
       font-size: 14px;
       line-height: 1;
   }

   .portfolio-filters {
       display: flex;
       justify-content: center;
       gap: 25px;
       padding: 0;
       margin-bottom: 20px;
       list-style: none;
       position: relative;
   }

   /* item default */
   .portfolio-filters li {
       font-size: 13px;
       letter-spacing: 1px;
       color: rgba(0, 0, 0, 0.5);
       cursor: pointer;
       position: relative;
       padding: 6px 0;
       transition: 0.3s ease;
   }

   /* hover */
   .portfolio-filters li:hover {
       color: rgba(255, 255, 255, 0.9);
   }

   /* ACTIVE TEXT */
   .portfolio-filters .filter-active {
       color: #fff;
   }

   /* GARIS UNDERLINE ANIMATED */
   .portfolio-filters li::after {
       content: "";
       position: absolute;
       left: 0;
       bottom: -4px;
       width: 0%;
       height: 1px;
       background: rgba(253,230,138,0.5);
       transition: 0.3s ease;
   }

   /* hover line */
   .portfolio-filters li:hover::after {
       width: 100%;
   }

   /* active line full */
   .portfolio-filters .filter-active::after {
       width: 100%;
       background: rgba(253,230,138,0.7);
   }

   .glightbox-clean .gslide-description {
       background: #fff !important;
       color: #000 !important;
   }

   .glightbox-clean .gdesc-inner {
       color: #000 !important;
   }

   /* BACKGROUND FULL PUTIH */
   .glightbox-clean .gslide {
       background: #fff !important;
   }

   /* OVERLAY BACKDROP */
   .glightbox-clean .gbackdrop {
       background: rgba(255, 255, 255, 0.95) !important;
   }

   .glightbox-clean .gdesc-inner {
       color: #111 !important;
   }

   .glightbox-clean .gslide-title,
   .glightbox-clean .gslide-desc {
       color: #111 !important;
   }

   .glightbox-container .gprev,
   .glightbox-container .gnext {
       display: flex !important;
       opacity: 1 !important;
       visibility: visible !important;
       pointer-events: auto !important;
       z-index: 999999 !important;

       width: 45px;
       height: 45px;
   }

   .glightbox-clean .gbackdrop {
       background: rgba(0, 0, 0, 0.85) !important;
   }