/* HOME SECTIONNNNNNNNN */
          /* Background*/
          body {
            background-color: #2f2d2f; 
          }
          .home-section {
            background-color: #2f2d2f;
          }

          /* My Font*/
          /* PF Marlet Regular*/
          @font-face {
            font-family: 'PFMarlet';
            src: url('font/PFMarlet/PFMarletDisplay-Regular.otf') format('opentype');
            font-weight: 400;
            font-style: normal;
          }
          /* PF Marlet Thin*/
          @font-face {
            font-family: 'PFMarlet';
            src: url('font/PFMarlet/PFMarletDisplay-Thin.otf') format('opentype');
            font-weight: 300;
            font-style: normal;
          }
          /* PF Marlet Italic*/
          @font-face {
            font-family: 'PFMarlet';
            src: url('font/PFMarlet/PFMarletDisplay-Italic.otf') format('opentype');
            font-weight: 200;
            font-style: normal;
          }
          /* PF Marlet Light Italic*/
          @font-face {
            font-family: 'PFMarlet';
            src: url('font/PFMarlet/PFMarletDisplay-LightItalic.otf') format('opentype');
            font-weight: 100;
            font-style: normal;
          }

          /* SF Pro Thin*/
          @font-face {
            font-family: 'SFPro';
            src: url('font/SFPro/SFPro-Thin.otf') format('opentype');
            font-weight: 200;
            font-style: normal;
          }
          /* SF Pro Italic*/
          @font-face {
            font-family: 'SFPro';
            src: url('font/SFPro/SFPro-RegularItalic.otf') format('opentype');
            font-weight: 400;
            font-style: italic;
          }

          /* SF Pro Light Italic*/
          @font-face {
            font-family: 'SFPro';
            src: url('font/SFPro/SFPro-LightItalic.otf') format('opentype');
            font-weight: 100;
            font-style: italic;
          }

          /* SF Pro Regular*/
          @font-face {
            font-family: 'SFPro';
            src: url('font/SFPro/SFPro-Regular.otf') format('opentype');
            font-weight: 400;
            font-style: normal;
          }
          /* SF Pro Medium*/
          @font-face {
            font-family: 'SFPro';
            src: url('font/SFPro/SFPro-Medium.otf') format('opentype');
            font-weight: 500;
            font-style: normal;
          }

                /* All Navbar*/
                .navbar {
                  background: rgba(0, 0, 0, 0.25); /* transparan 25%, bisa ubah ke 0.2 atau 0.3 */
                  width: 100%;
                  z-index: 1000;                   /* supaya tidak ketiban carousel */
                  padding: 0.5rem 1rem;
                  align-items: center;
                }
                .navbar .nav-link {
                  color: #fffbf7 !important;
                  transition: color 0.3s ease;
                }
                .navbar-brand,
                .navbar-nav .nav-link {
                  color: #fffbf7 !important; /* warna text */
                  font-family: 'SFPro', sans-serif;
                  font-weight: 400;
                  letter-spacing: 1px;
                  font-size: 0.9rem;
                }
                .navbar-brand {
                  display: flex;
                  align-items: center;
                  gap: 15px; /* jarak antara logo dan teks */
                }
                .navbar .nav-link:hover,
                .navbar .nav-link.active:hover {
                  color: #dcf244 !important;
                }
                /* Logo*/
                .navbar .navbar-brand {
                  color: #fffbf7;
                  font-family: 'PFMarlet',sans-serif;
                  font-weight: 400;
                  letter-spacing: 1px;
                  font-size: 1.5rem;
                }
                .navbar {
                  color: #dcf244 !important;
                }
                .navbar-brand:hover {
                  color: #fffbf7 !important;
                }
                /* Toggler*/
                .navbar-toggler-icon {
                  filter: brightness(0) invert(1);
                }
                .navbar-toggler {
                  border: none; /* hapus border di tombol */
                  box-shadow: none; /* hapus efek bayangan (kadang muncul default) */
                }
                /* Navbar HAW*/
                .navbar-nav {
                  margin: 0 auto;
                  gap: 2rem;
                }
                /* Zoom Navbar*/
                .navbar .nav-link,
                .navbar .btn-contact,
                .navbar .navbar-brand {
                  transition: all 0.4s ease;
                  transform-origin: center;
                }
                /* Hover zoom */
                .navbar .nav-link:hover,
                .navbar .btn-contact:hover,
                .navbar .navbar-brand:hover {
                  transform: scale(1.05);
                }
                /* Carousel round */
                .carousel-indicators [data-bs-target] {
                  border-radius: 3px;       
                  background-color: #fffbf7;  
                  transition: all 0.3s ease;
                  opacity: 0.6;
                }
                .carousel-indicators .active {
                  background-color: #fffbf7;  
                  width: 10px;
                  opacity: 1;
                }
                /* Button Contact */
                .btn-contact {
                  border-radius: 50px;
                  border: 1px solid #d6f46a;
                  color: #d6f46a;
                  padding: 5px 15px;
                  background: transparent;
                  transition: all 0.3s ease;  
                  font-family: 'SFPro', sans-serif;
                  font-weight: 400;
                  letter-spacing: 1px;
                  font-size: 0.9rem;
                  align-self: center;
                }
                .btn-contact:hover {
                  background-color: #d6f46a;
                  border: 1px solid #fffbf7;
                  color: #2f2d2f;
                }
                          /* Responsive: HP */
                          @media (max-width: 991.98px) {
                            .navbar {
                              background: rgba(47, 45, 47, 0.9); /* 0.6 artinya 60% opacity */
                              backdrop-filter: blur(20px);
                            }
                            .navbar-collapse {
                              border-radius: 10px;
                              padding: 1rem;
                              text-align: center;
                            }
                            .navbar-nav {
                              margin: 1rem 0;
                              gap: 1rem;
                            }
                            .navbar, .navbar-collapse {
                              transition: background-filter 0.3s ease;
                            }
                            .btn-contact {
                              display: inline-block;
                              margin: 1rem auto;
                              width: auto;
                            }
                          }

/* ABOUT SECTIONNNNNNNNN */
          /* Background */
          .about-section {
            background-color: #2f2d2f; 
            padding: 5rem 0.5rem 1rem 0.5rem;
          }
          /* Tagline*/
          .about-tagline {
            font-family: 'SFPro', sans-serif;
            font-weight: 400;
            color: #fffbf7;
            letter-spacing: 1px;
            line-height: 1.1;
            font-size: clamp(5rem, 10vw, 8.3rem); /* otomatis responsive */
            word-break: break-word;
          }
          .about-tagline .italic {
            font-family: 'SFPro', sans-serif;
            font-weight: 100;
            font-style: italic;
          }
          .italicU {
            font-family: 'SFPro', sans-serif;
            font-weight: 100;
            font-style: italic;
          }
          .about-alsya {
            font-family: 'SFPro', sans-serif;
            font-weight: 400; 
            color: #fffbf7;
          }
          .garis{
            color: #2f2d2f;
          }
          .text-putih{
            color: #fffbf7;
          }
          /* Tagline Hover*/
          .about-tagline:hover {
            color: #dcf244; 
            font-style: italic;
            font-weight: 100;
            transition: all 0.2s ease;
            transform-origin: center;
          }
          .about-tagline .italic:hover {
            color: #dcf244; 
          }
          .about-alsya:hover {
            color: #fffbf7;
            font-style: italic;
            font-weight: 100;
            transition: all 0.2s ease;
            transform-origin: center;
          }
                                /* Accordion */
                                .accordion-header {
                                  font-family: 'SFPro', sans-serif;
                                }
                                .accordion-button {
                                  background-color: #dcf244 !important;  
                                  color: #2f2d2f !important;              
                                }
                                /* Hover */
                                .accordion-button:not(.collapsed) {
                                  background-color: #fffbf7 !important;  
                                  box-shadow: none; 
                                }
                                /* Isi accordion */
                                .accordion-body {
                                  font-family: 'SFPro', sans-serif; 
                                  background-color: #2f2d2f; 
                                  color: #fffbf7;
                                  letter-spacing: 0.05em;
                                }
                                /* Hilangkan border putih di sekeliling */
                                .accordion-item {
                                    border: 1px solid #fffbf7;
                                    border-radius: 30px;
                                    overflow: hidden;    
                                }
                                                          /* Layering Photo*/
                                                            .photo-layer {
                                                              position: relative;
                                                              display: flex;
                                                              justify-content: center;
                                                              align-items: center;
                                                              overflow: hidden;
                                                              width: 100%;
                                                              aspect-ratio: 1 / 1; /* biar responsif dan nggak ketarik */
                                                            }
                                                            /* Semua layer gambar */
                                                            .photo-layer img {
                                                              position: absolute; top: 0; left: 0;
                                                              width: 100%;
                                                              height: 100%;
                                                              object-fit: contain; /* biar proporsinya nggak rusak */
                                                              transition: transform 0.8s ease;
                                                            }
                                                            /* Layer sesuai urutan HTML */
                                                            .bg:first-of-type { 
                                                              z-index: 1; 
                                                              animation: bgMove 4s ease-in-out infinite alternate; /* horizontal kiri-kanan */
                                                            }
                                                            .bg:nth-of-type(2) { 
                                                              z-index: 2; 
                                                              /* diam, tetap di belakang layer pertama */
                                                            }
                                                            .mid { 
                                                              z-index: 2; 
                                                              transform-origin: center;
                                                              animation: midMove 3s ease-in-out infinite alternate; /* vertikal + scale cepat */
                                                            }
                                                            .fg { 
                                                              z-index: 4; 
                                                              transform-origin: center;
                                                              animation: fgZoom 5s ease-in-out infinite alternate; /* vertikal + scale cepat */
                                                            }
                                                            /* Animasi*/
                                                            @keyframes bgMove {
                                                              0%   { transform: translateX(0); }
                                                              50%  { transform: translateX(20px); }
                                                              100% { transform: translateX(0); }
                                                            }
                                                            @keyframes midMove {
                                                              0%, 100% { transform: scale(1.05) translateY(0); }
                                                              40%      { transform: scale(1.1) translateY(8px); }
                                                              70%      { transform: scale(1.08) translateY(4px); }
                                                            }
                                                            @keyframes fgZoom {
                                                              0%, 100% { transform: scale(1.1) translateY(0); }
                                                              50%      { transform: scale(1.13) translateY(-10px); }
                                                            }
                                               
/* INFINITE MARQUEE SECTIONNNNNNNNN */
          .scroll-wrapper {
          position: relative;
          width: 100%;
          overflow: hidden;
          background-color: #fffbf7;
          display: flex;
          align-items: center;
          padding: 1rem 0;
          }
          .infinitU {
            font-family: 'SFPro', sans-serif;
            font-weight: 400;
            font-style: italic;
          }
          .scroll-text {
          display: inline-flex;
          animation: scroll-left 10s linear infinite;
          font-family: 'SFPro', sans-serif;
          font-weight: 400;
          letter-spacing: 0.05em;
          color: #2f2d2f;
          }
          .scroll-content {
          flex-shrink: 0;
          margin-right: 0.5rem; /* jarak antar teks */
          }
                              /*animasyong*/
                              @keyframes scroll-left {
                                0% {
                                  transform: translateX(0);
                                }
                                100% {
                                  transform: translateX(-50%);
                                }
                              }

/* INFINITE MARQUEE 2 SECTIONNNNNNNNN */
          .scroll-wrapper2 {
          position: relative;
          width: 100%;
          overflow: hidden;
          background-color: #dcf244;
          display: flex;
          align-items: center;
          padding: 1rem 0;
          }
          .scroll-text2 {
          display: inline-flex;
          animation: scroll-right 10s linear infinite;
          font-family: 'SFPro', sans-serif;
          font-weight: 400;
          letter-spacing: 0.05em;
          color: #2f2d2f;
          }
                            /*animasyong kanan*/
                            @keyframes scroll-right {
                              0% {
                                transform: translateX(-50%);
                              }
                              100% {
                                transform: translateX(0);
                              }
                            }

/* WORKS SECTIONNNNNNNNN */
          /* Background */
          .works-section {
            background-color: #2f2d2f; 
            padding: 5rem 0.5rem 1rem 0.5rem;
            margin-bottom: 3rem;
          }
          /* Tagline*/
          .works-tagline {
            font-family: 'SFPro', sans-serif;
            font-weight: 400;
            color: #fffbf7;
            letter-spacing: 1px;
            line-height: 1.1;
            font-size: clamp(5rem, 10vw, 8.3rem); /* otomatis responsive */
            word-break: break-word;
          }
          .works-tagline .italic {
            font-family: 'SFPro', sans-serif;
            font-weight: 100;
            font-style: italic;
          }
          /* Tagline Hover*/
          .works-tagline:hover {
            color: #ac80ea; 
            font-style: italic;
            font-weight: 100;
            transition: all 0.2s ease;
            transform-origin: center;
          }
          .works-tagline .italic:hover {
            color: #ac80ea; 
          }
          .works-selection {
            font-family: 'SFPro', sans-serif;
            font-weight: 400; 
            color: #fffbf7;
          }
          .works-selection:hover {
            color: #fffbf7;
            font-style: italic;
            font-weight: 100;
            transition: all 0.2s ease;
            transform-origin: center;
          }
                      /* --- Card general style --- */
                      .card-body {
                        font-family: 'SFPro', sans-serif;
                        color: #fffbf7;
                        font-weight: 100;
                        letter-spacing: 0.05em;
                      }
                      .bolD {
                        font-family: 'SFPro', sans-serif; 
                        color: #fffbf7;
                        font-weight: 400;
                        letter-spacing: 0.05em;
                      }
                                      /* --- Card general style --- */
                                      .card-works .card{
                                        border-bottom-right-radius: 60px;
                                        border-color: #fffbf7; /* ganti dengan warna yang kamu mau */
                                      }
                                      .works .card-hover {
                                        position: relative;
                                        overflow: hidden;
                                        cursor: pointer;
                                        transition: transform 0.3s ease, box-shadow 0.3s ease;
                                      }
                                      .works .card-hover:hover {
                                        transform: translateY(-5px);
                                        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
                                      }
                                      .works .card-hover img {
                                        transition: all 0.5s ease;
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                      }
                                      .works .card-hover:hover img {
                                        opacity: 0.3;
                                        transform: scale(1.05);
                                      }
                                      /* --- Overlay text on hover --- */
                                      .works .card-overlay {
                                        position: absolute;
                                        inset: 0;
                                        display: flex;
                                        align-items: flex-end;  /* vertikal ke bawah */
                                        justify-content: flex-start; /* horizontal ke kiri */
                                        opacity: 0;
                                        transition: opacity 0.5s ease;
                                        color: #fffbf7;
                                        padding: 1rem;
                                        text-align: left;
                                      }
                                      .works .card-hover:hover .card-overlay {
                                        opacity: 1;
                                      }
                                      /* --- Maintain 1:1 ratio --- */
                                      .works .ratio-1x1 {
                                        position: relative;
                                        width: 100%;
                                        aspect-ratio: 1 / 1;
                                      }
                                      /* --- Card body text alignment --- */
                                      .works .card-body {
                                        text-align: left;
                                      }
                                                                     /* button kecil */
                                                                    .btn-works {
                                                                      border-radius: 50px;
                                                                      background-color: #dcf244;
                                                                      padding-right: 0.5rem;
                                                                      padding-left: 0.5rem;
                                                                      font-family: 'SFPro', sans-serif; 
                                                                      font-size: x-small;
                                                                      transition: none;
                                                                    }
                                                                    .btn-works2 {
                                                                      border-radius: 50px;
                                                                      margin-left: 0.2rem;
                                                                      background-color: #ac80ea;
                                                                      padding-right: 0.5rem;
                                                                      padding-left: 0.5rem;
                                                                      font-family: 'SFPro', sans-serif; 
                                                                      font-size: x-small;
                                                                      transition: none;
                                                                    }
                                                                                    /*Gamau hoverrrr*/
                                                                                    .btn-works:hover,
                                                                                    .btn-works:focus,
                                                                                    .btn-works:active {
                                                                                      background-color: #dcf244; 
                                                                                      color: #2f2d2f;              
                                                                                      box-shadow: none;         
                                                                                    }
                                                                                    .btn-works2:hover,
                                                                                    .btn-works2:focus,
                                                                                    .btn-works2:active {
                                                                                      background-color: #ac80ea;
                                                                                      color: #2f2d2f;
                                                                                      box-shadow: none;
                                                                                    }
                                                                                    .no-click {
                                                                                      pointer-events: none;  /* tidak bisa diklik */
                                                                                      opacity: 1 !important; /* tetap full color */
                                                                                      cursor: default;       /* optional */
                                                                                    }

                                      /* --- Zigzag layout for desktop (3 kolom) --- */
                                      @media (min-width: 992px) {
                                        .works .col-lg-4:nth-child(3n+1) {
                                          margin-top: 0;
                                        }
                                        .works .col-lg-4:nth-child(3n+2) {
                                          margin-top: 40px;
                                        }
                                        .works .col-lg-4:nth-child(3n+3) {
                                          margin-top: 80px;
                                        }
                                      }
                                      /* Spacing tambahan untuk card di mobile */
                                      @media (max-width: 768px) {
                                        .card-works {
                                          width: 80%; 
                                          margin-left: auto;
                                          margin-right: auto; /* supaya center */
                                        }
                                      }
                                      
 /* CONTACT SECTIONNNNNNNNN */                                                                       
          .contact-section {
            background-color: #2f2d2f;
            padding-top: 50px;
            padding-right: 6rem;
            padding-left: 6rem;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            text-align: center;
          }
          /* FLEX CONTAINER */
          .social-wrap {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
          }
          /* BUTTON/SHAPE STYLING */
          .shape {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3rem; /* ukuran dasar icon */
            color: #2f2d2f;
            text-decoration: none;
            cursor: pointer;
            border-radius: 20px;
            transition: transform 0.2s, z-index 0.2s;
            transform: rotate(var(--r, 0deg));
            margin-top: calc(-20px * var(--rand, 0.5));
            animation: floaty 3s ease-in-out infinite;
          }
          /* ICON INSIDE SHAPE */
          .shape i {
            font-size: 2em; /* mengikuti ukuran shape */
            flex-shrink: 1;   /* biar gak keluar bentuk */
          }
          /* FLOATY ANIMATION */
          @keyframes floaty {
            0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
            50% { transform: translateY(-10px) rotate(calc(var(--r, 0deg) + 5deg)); }
          }
          /* HOVER BOUNCE ROTATE */
          .shape:hover {
            animation: bounce-rotate 0.4s ease forwards;
            z-index: 5;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
          }
          @keyframes bounce-rotate {
            0%   { transform: scale(1) rotate(var(--r, 0deg)); }
            25%  { transform: scale(1.2) rotate(calc(var(--r, 0deg) + 10deg)); }
            50%  { transform: scale(1.2) rotate(calc(var(--r, 0deg) - 10deg)); }
            75%  { transform: scale(1.2) rotate(calc(var(--r, 0deg) + 5deg)); }
            100% { transform: scale(1) rotate(var(--r, 0deg)); }
          }
          /* SHAPES */
          .shape-flower {
            clip-path: polygon(
              50% 0%,65% 15%,80% 0%,100% 20%,85% 35%,100% 50%,85% 65%,100% 80%,
              80% 100%,65% 85%,50% 100%,35% 85%,20% 100%,0% 80%,15% 65%,0% 50%,
              15% 35%,0% 20%,20% 0%,35% 15%
            );
            background: #dcf244;
            width: 360px;
            height: 360px;
          }
          .shape-oval { 
            border-radius: 110px; 
            background: #fffbf7;
            width: 360px;
            height: 360px;
          }
          .shape-triangle {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            background: #ac80ea;
            width: 360px;
            height: 360px;
            padding-bottom: 40px;
          }
          .shape-kite { 
            clip-path: polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%); 
            background: #ac80ea;
            width: 360px;
            height: 360px;
          }
          .shape-star { 
            clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); 
            background: #dcf244;
            width: 510px;
            height: 510px;
          }
          /* RANDOM ROTATION */
          .shape:nth-child(1) { --r:-15deg; --rand:0.3; }
          .shape:nth-child(2) { --r:10deg; --rand:0.6; }
          .shape:nth-child(3) { --r:-8deg; --rand:0.4; }
          .shape:nth-child(4) { --r:12deg; --rand:0.5; }
          .shape:nth-child(5) { --r:-20deg; --rand:0.7; }

                                        /* RESPONSIVE */
                                        @media (max-width: 992px) {
                                          .shape {
                                            width: 250px;
                                            height: 250px;
                                            font-size: 2.5rem;
                                            margin-top: calc(-10px * var(--rand, 0.5));
                                          }
                                        }
                                        @media (max-width: 768px) {
                                          .shape {
                                            width: 200px;
                                            height: 200px;
                                            font-size: 2.5rem;
                                          }
                                          .shape i {
                                            font-size: 1.2em;
                                          }

                                          .shape-triangle {
                                            padding-bottom: 20px;
                                          }
                                          .shape-star {
                                            width: 250px;
                                            height: 250px;
                                            font-size: 2.5rem;
                                          }
                                          .social-wrap {
                                            gap: 5px;
                                          }
                                                /* urutan */
                                                .shape-flower { order: 2; }
                                                .shape-oval { order: 3; }
                                                .shape-triangle { order: 1; }
                                                .shape-star { order: 4; }
                                                .shape-kite { order: 5; }
                                              }
                                                                                    @media (max-width: 480px) {
                                                                                      .shape {
                                                                                        width: 160px;
                                                                                        height: 160px;
                                                                                        font-size: 2rem;
                                                                                      }
                                                                                      .shape-star {
                                                                                        width: 210px;
                                                                                        height: 210px;
                                                                                        font-size: 2rem;
                                                                                      }
                                                                                      .shape i {
                                                                                        font-size: 1em;
                                                                                      }
                                                                                            /* urutan*/
                                                                                              .shape-flower { order: 2; }
                                                                                              .shape-oval { order: 3; }
                                                                                              .shape-triangle { order: 1; }
                                                                                              .shape-star { order: 4; }
                                                                                              .shape-kite { order: 5; }
                                                                                            }


/* FOOTAGE SECTIONNNNNNNNN */
          /* Background */
          .footer-section {
            background-color: #dcf244;
            width: 100%;
          }
          /* warna ikon */
          .icon-sosmed a {
            color: #2f2d2f;
          }
          .icon-sosmed2 a:hover {
            color: #fffbf7;
          }
          /* warna teks bawah */
          .tahun-jkt {
            color: #2f2d2f;
            font-family: 'SFPro', sans-serif;
          }