/* Font Lastica */
      @font-face {
        font-family: "Lastica";
        src: url("../fonts/lastica.ttf") format("opentype");
      }

      /* Custom Colors */
      .text-nastia-pink {
        color: #d63384 !important;
      }

      .text-nastia-cyan {
        color: #00cfcf !important;
      }

      /* Background Images */
      .bg-home {
        background: url("../img/IMG_9832.jpg") center/cover no-repeat;
      }
      @media (max-width: 767.98px) {
        .bg-home {
          position: relative;
          background: url("../img/choky0537.jpg") center/cover no-repeat;
        }
        .bg-home::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(55, 159, 175, 0.5);
          z-index: 0;
        }
        .bg-home > * {
          position: relative;
          z-index: 1;
        }
      }

      /* Home Section - Vertical Center */
      #home {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .bg-about {
        background: url("../img/choky0329.jpg") center/cover no-repeat;
      }
      @media (max-width: 767.98px) {
        .bg-about {
          background: url("../img/choky0354.jpg") center/cover no-repeat;
          position: relative;
        }
        .bg-about::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.6);
          z-index: 0;
        }
        .bg-about > * {
          position: relative;
          z-index: 1;
        }
      }

      .bg-concept {
        background-color: #6d1a1a;
      }

      .bg-music-video {
        background: linear-gradient(135deg, #4a1111 0%, #200505 100%);
      }

      .bg-gallery {
        background: url("../img/nastiakolase.jpg") center/cover no-repeat;
      }

      .bg-contact {
        background-color: #6d1a1a;
      }


      /* Concept & Contact Logo Title */
      .concept-logo-title,
      .contact-logo-title {
        letter-spacing: -1px;
        font-size: 2.5rem;
      }

      /* Concept Images */
      .concept-img {
        height: 400px;
        object-fit: cover;
      }

      /* Contact Heading */
      .contact-heading {
        letter-spacing: 2px;
      }

      /* Social Buttons */
      .social-btn {
        width: 45px;
        height: 45px;
        border-color: #d63384;
        color: #d63384;
      }

      /* Image Grayscale */
      .img-grayscale {
        filter: grayscale(100%);
      }

      /* Video Container */
      .video-container {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      /* Music Video Title */
      .music-video-title {
        letter-spacing: -2px;
        font-size: clamp(3rem, 8vw, 5rem);
        opacity: 0.9;
        font-family: "Syncopate", sans-serif;
      }

      /* Gallery Title */
      .gallery-title {
        letter-spacing: -5px;
        font-size: calc(6rem + 5vw);
        line-height: 1;
      }

      body,
      html {
        margin: 0;
        padding: 0;
        background-color: #000;
        scroll-behavior: smooth;
        overflow-x: hidden;
        width: 100%;
      }


      .bio-text {
        font-family: "Courier New", Courier, monospace; /* Font mesin tik sesuai gambar 2 */
        font-size: 1.05rem;
        text-align: justify;
      }

      /* Initial State untuk Fade In */
      .fade-in {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1),
          transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
        will-change: opacity, transform;
      }

      /* State saat terlihat */
      .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* Efek muncul berurutan (Stagger) */
      .stagger-item {
        transition-delay: calc(var(--order) * 150ms);
      }

      /* Scale effect yang lebih halus */
      .scale-on-scroll {
        transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
        will-change: transform;
      }

      /* Hover effect tambahan untuk Card Concept agar lebih interaktif */
      .scale-on-scroll:hover {
        transform: scale(1.03) !important;
      }

      /* Nastia Logo - Custom Style */
      .nastia-logo {
        letter-spacing: -5px;
        font-size: calc(5rem + 5vw);
        line-height: 0.8;
        backface-visibility: hidden;
        -webkit-font-smoothing: antialiased;
      }

      /* Font Lastica untuk heading */
      .font-lastica {
        font-family: "Lastica", "Arial", sans-serif;
        font-weight: bold;
      }


      /* Optimasi performa */
      section {
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000px;
      }

      /* Mobile Responsive */
      @media (max-width: 768px) {
        /* Sections - use Bootstrap utility classes where possible */
        #about,
        #music-video,
        #band-gallery,
        #contact {
          min-height: auto !important;
        }

        #home {
          min-height: 100vh !important;
          display: flex !important;
          align-items: center !important;
        }

        /* Logo adjustments */
        .logo-hero {
          height: clamp(200px, 50vh, 400px) !important;
          margin-left: 0 !important;
          margin-right: 0 !important;
        }

        .logo-standard {
          height: 150px !important;
        }

        /* Concept images */
        .concept-img {
          height: 250px !important;
          object-position: center 50%;
        }

        /* Contact section adjustments */
        #contact .col-lg-5 {
          order: 2;
        }

        #contact .col-lg-7 {
          order: 1;
        }

        .social-btn {
          width: 40px !important;
          height: 40px !important;
        }

        /* Typography adjustments */
        .bio-text {
          font-size: 0.95rem !important;
        }

        .font-lastica {
          font-size: 1.2rem !important;
        }

        #about h2 {
          font-size: 2rem !important;
        }

        #concept h2.display-4 {
          font-size: 2rem !important;
        }

        #contact .font-lastica {
          font-size: 1.1rem !important;
        }

        #home .d-lg-none .font-lastica {
          font-size: 0.9rem !important;
          letter-spacing: 5px !important;
        }

        /* Music video adjustments */
        #music-video .d-flex.justify-content-between {
          flex-direction: column;
          gap: 10px;
        }
      }

      @media (max-width: 576px) {
        /* Logo adjustments for small screens */
        .logo-hero {
          height: clamp(150px, 40vh, 300px) !important;
          max-width: 85vw;
        }

        .logo-standard {
          height: 120px !important;
        }

        #contact .logo-standard {
          height: 100px !important;
        }

        /* Concept images */
        .concept-img {
          height: 200px !important;
        }
        .concept-img-custom {
          object-position: center 35%;
        }

        /* Typography adjustments */
        .bio-text {
          font-size: 0.9rem !important;
        }

        .font-lastica {
          font-size: 1rem !important;
        }

        #about h2 {
          font-size: 1.75rem !important;
        }

        #home .d-lg-none .font-lastica {
          font-size: 0.75rem !important;
          letter-spacing: 3px !important;
        }

        /* Social buttons */
        .social-btn {
          width: 38px !important;
          height: 38px !important;
        }

        #contact .d-flex.gap-3 {
          gap: 0.75rem !important;
        }
      }

      /* Hover Effects */
      .social-btn:hover {
        background-color: #d63384 !important;
        border-color: #d63384 !important;
        color: white !important;
        transform: scale(1.1);
        transition: all 0.3s ease;
      }

      .text-nastia-cyan:hover {
        color: #00e5e5 !important;
      }