/* --- NAVBAR BARU --- */
     .navbar {
         background: #ffffff;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
         position: sticky;
         top: 0;
         z-index: 1000;
         padding: 15px 0;
     }

     .nav-inner {
         display: flex;
         justify-content: space-between;
         align-items: center;
         width: 100%;
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 24px;
     }

     .brand {
         display: flex;
         align-items: center;
         gap: 10px;
         text-decoration: none;
         color: #031828;
     }

     .brand img {
         height: 40px;
     }

     .brand-text strong {
         font-size: 16px;
         letter-spacing: 1px;
     }

     .gradient-bandung {
         background: linear-gradient(45deg, #0056fb, #4EA8FF);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
     }

     .nav-menu {
         display: flex;
         list-style: none;
         gap: 24px;
     }

     .nav-menu a {
         text-decoration: none;
         color: #4A5568;
         font-size: 14px;
         font-weight: 500;
         transition: color 0.2s;
     }

     .nav-menu a:hover {
         color: #0056fb;
     }

     /* ==========================================
           PREFIX KHUSUS: DESTINATIONS PAGE CONTENT
           ========================================== */
     .dest-page-section {
         background-color: #f8faff;
         width: 100%;
     }

     .dest-container {
         width: 100%;
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 24px;
         /* Memperbaiki typo 24x menjadi 24px */
     }

     /* --- DET DETAIL HERO BANNER --- */
     .dest-hero-banner {
         background-size: cover;
         background-position: center;
         padding: 80px 0;
         color: #ffffff;
         position: relative;
     }

     .dest-breadcrumb {
         font-size: 12px;
         opacity: 0.7;
         margin-bottom: 16px;
     }

     .dest-hero-banner h1 {
         font-size: clamp(2.2rem, 5vw, 3.5rem);
         font-weight: 700;
         margin-bottom: 12px;
         line-height: 1.2;
     }

     .dest-hero-banner h1 span {
         color: #4EA8FF;
     }

     .dest-hero-subtitle {
         font-size: 14px;
         color: rgba(255, 255, 255, 0.8);
         max-width: 550px;
         line-height: 1.6;
         margin-bottom: 35px;
     }

     /* Kolom input pencarian melengkung */
     .dest-search-container {
         display: flex;
         gap: 12px;
         max-width: 600px;
     }

     .dest-search-input-wrap {
         position: relative;
         flex-grow: 1;
     }

     .dest-search-icon {
         position: absolute;
         left: 18px;
         top: 50%;
         transform: translateY(-50%);
         color: #A0AEC0;
     }

     .dest-search-input-wrap input {
         width: 100%;
         padding: 14px 16px 14px 48px;
         border-radius: 30px;
         border: none;
         font-size: 13px;
         outline: none;
         color: #031828;
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     }

     .dest-btn-filter {
         background: #ffffff;
         color: #031828;
         border: none;
         padding: 0 24px;
         border-radius: 30px;
         font-size: 13px;
         font-weight: 600;
         cursor: pointer;
         display: flex;
         align-items: center;
         gap: 8px;
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
         transition: all 0.2s;
     }

     .dest-btn-filter:hover {
         background: #edf2f9;
     }

     /* --- TAB SELEKSI KATEGORI --- */
     .dest-categories-tabs {
         background: #ffffff;
         border-bottom: 1px solid #edf2f9;
         padding: 16px 0;
     }

     .dest-tabs-flex {
         display: flex;
         justify-content: flex-start;
         overflow-x: auto;
         gap: 16px;
     }

     .dest-tabs-flex::-webkit-scrollbar {
         height: 0px;
     }

     .dest-tab-item {
         display: flex;
         align-items: center;
         gap: 12px;
         padding: 8px 20px;
         border-radius: 12px;
         cursor: pointer;
         transition: all 0.2s ease;
         border: 1px solid transparent;
         flex-shrink: 0;
         background: #f8fafc;
     }

     .dest-tab-icon {
         width: 36px;
         height: 36px;
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 14px;
     }

     .tc-blue {
         background: #EBF3FF;
         color: #2F80ED;
     }

     .tc-green {
         background: #EAF7EE;
         color: #27AE60;
     }

     .tc-purple {
         background: #EEF2FA;
         color: #9B51E0;
     }

     .tc-orange {
         background: #FFF3EB;
         color: #E67E22;
     }

     .tc-red {
         background: #FDF0F2;
         color: #EB5757;
     }

     .tc-cyan {
         background: #E0F7FA;
         color: #00ACC1;
     }

     .tc-yellow {
         background: #FEF9E7;
         color: #F1C40F;
     }

     .dest-tab-txt strong {
         display: block;
         font-size: 13px;
         color: #4A5568;
     }

     .dest-tab-txt small {
         font-size: 11px;
         color: #A0AEC0;
     }

     .dest-tab-item:hover {
         background: #edf2f7;
     }

     .dest-tab-item.active {
         background: #EBF3FF !important;
         border-color: #2F80ED;
     }

     .dest-tab-item.active .dest-tab-txt strong {
         color: #0056fb;
     }

     /* --- TOOLBAR URUTKAN --- */
     .dest-toolbar-section {
         padding: 24px 0 10px 0;
     }

     .dest-toolbar-flex {
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     .dest-view-right {
         display: flex;
         gap: 6px;
     }

     .dest-view-btn {
         width: 32px;
         height: 32px;
         border-radius: 6px;
         border: 1px solid #E2E8F0;
         background: #ffffff;
         color: #A0AEC0;
         cursor: pointer;
         font-size: 12px;
     }

     .dest-view-btn.active {
         color: #0056fb;
         border-color: #0056fb;
     }

     /* --- CORE GRIDS KARTU PRODUK --- */
     .dest-grid-layout {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 24px;
         margin-top: 15px;
     }

     .dest-product-card {
         background: #ffffff;
         border-radius: 20px;
         overflow: hidden;
         border: 1px solid #edf2f9;
         display: flex;
         flex-direction: column;
         transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
     }

     .dest-product-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 15px 35px rgba(3, 24, 40, 0.08);
     }

     .dest-card-media {
         position: relative;
         height: 180px;
         overflow: hidden;
     }

     .dest-card-media img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.5s ease;
     }

     .dest-product-card:hover .dest-card-media img {
         transform: scale(1.08);
     }

     .dest-badge-tag {
         position: absolute;
         top: 14px;
         left: 14px;
         font-size: 10px;
         font-weight: 700;
         padding: 4px 12px;
         border-radius: 6px;
         color: #ffffff;
         z-index: 2;
     }

     .b-green {
         background: #27AE60;
     }

     .b-purple {
         background: #9B51E0;
     }

     .b-orange {
         background: #E67E22;
     }

     .b-red {
         background: #EB5757;
     }

     .b-cyan {
         background: #00ACC1;
     }

     .b-yellow {
         background: #F1C40F;
     }

     .dest-heart-btn {
         position: absolute;
         top: 14px;
         right: 14px;
         width: 32px;
         height: 32px;
         border-radius: 50%;
         border: none;
         background: rgba(255, 255, 255, 0.3);
         backdrop-filter: blur(8px);
         -webkit-backdrop-filter: blur(8px);
         color: #ffffff;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         font-size: 13px;
         z-index: 2;
         transition: all 0.2s ease;
     }

     .dest-heart-btn:hover {
         background: rgba(255, 255, 255, 0.9);
         color: #EB5757;
     }

     .dest-card-info {
         padding: 20px;
         display: flex;
         flex-direction: column;
         flex-grow: 1;
     }

     .dest-card-info h3 {
         font-size: 15px;
         color: #031828;
         font-weight: 700;
         margin-bottom: 6px;
         line-height: 1.4;
     }

     .dest-loc {
         font-size: 12px;
         color: #7F8C8D;
         margin-bottom: 12px;
         display: flex;
         align-items: center;
         gap: 4px;
     }

     .dest-loc i {
         color: #A0AEC0;
     }

     .dest-rating-row {
         margin-top: auto;
         display: flex;
         align-items: center;
         gap: 6px;
         border-top: 1px solid #edf2f9;
         padding-top: 12px;
     }

     .dest-star {
         font-size: 12px;
         font-weight: 700;
         color: #FFB300;
     }

     .dest-reviews {
         font-size: 12px;
         color: #A0AEC0;
     }

     /* --- BAR NAVIGATION PAGINATION BAWAH --- */
     .dest-pagination-section {
         padding: 40px 0 60px 0;
     }

     .dest-pagination-flex {
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     .dest-pages-buttons {
         display: flex;
         gap: 6px;
         align-items: center;
     }

     .dest-page-num,
     .dest-page-arrow {
         width: 36px;
         height: 36px;
         border-radius: 50%;
         border: 1px solid #E2E8F0;
         background: #ffffff;
         color: #4A5568;
         font-size: 13px;
         font-weight: 600;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 0.2s;
     }

     .dest-page-num.active {
         background: #0056fb;
         color: #ffffff;
         border-color: #0056fb;
     }

     .dest-page-num:hover:not(.active),
     .dest-page-arrow:hover {
         background: #edf2f9;
     }

     .dest-page-dots {
         font-size: 12px;
         color: #A0AEC0;
         padding: 0 4px;
     }

     .dest-pagination-meta {
         font-size: 13px;
         color: #718096;
     }

     /* --- RESPONSIVITAS GRID ADAPTIF --- */
     @media (max-width: 1200px) {
         .dest-grid-layout {
             grid-template-columns: repeat(3, 1fr);
         }
     }

     @media (max-width: 850px) {
         .dest-grid-layout {
             grid-template-columns: repeat(2, 1fr);
             gap: 16px;
         }

         .dest-pagination-flex {
             flex-direction: column;
             gap: 20px;
             text-align: center;
         }

         .nav-menu {
             display: none;
         }
     }

     @media (max-width: 520px) {
         .dest-grid-layout {
             grid-template-columns: 1fr;
         }

         .dest-search-container {
             flex-direction: column;
         }

         .dest-btn-filter {
             padding: 12px 0;
             justify-content: center;
         }
     }

     /* ==========================================
           PREFIX KHUSUS: DESTINATIONS PAGE CONTENT
           ========================================== */
     .dest-page-section {
         background-color: #f8faff;
         width: 100%;
     }

     .dest-container {
         width: 100%;
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 24px;
         /* Memperbaiki typo 24x menjadi 24px */
     }

     /* --- DET DETAIL HERO BANNER --- */
     .dest-hero-banner {
         background-size: cover;
         background-position: center;
         padding: 80px 0;
         color: #ffffff;
         position: relative;
     }

     .dest-breadcrumb {
         font-size: 12px;
         opacity: 0.7;
         margin-bottom: 16px;
     }

     .dest-hero-banner h1 {
         font-size: clamp(2.2rem, 5vw, 3.5rem);
         font-weight: 700;
         margin-bottom: 12px;
         line-height: 1.2;
     }

     .dest-hero-banner h1 span {
         color: #4EA8FF;
     }

     .dest-hero-subtitle {
         font-size: 14px;
         color: rgba(255, 255, 255, 0.8);
         max-width: 550px;
         line-height: 1.6;
         margin-bottom: 35px;
     }

     /* Kolom input pencarian melengkung */
     .dest-search-container {
         display: flex;
         gap: 12px;
         max-width: 600px;
     }

     .dest-search-input-wrap {
         position: relative;
         flex-grow: 1;
     }

     .dest-search-icon {
         position: absolute;
         left: 18px;
         top: 50%;
         transform: translateY(-50%);
         color: #A0AEC0;
     }

     .dest-search-input-wrap input {
         width: 100%;
         padding: 14px 16px 14px 48px;
         border-radius: 30px;
         border: none;
         font-size: 13px;
         outline: none;
         color: #031828;
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     }

     .dest-btn-filter {
         background: #ffffff;
         color: #031828;
         border: none;
         padding: 0 24px;
         border-radius: 30px;
         font-size: 13px;
         font-weight: 600;
         cursor: pointer;
         display: flex;
         align-items: center;
         gap: 8px;
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
         transition: all 0.2s;
     }

     .dest-btn-filter:hover {
         background: #edf2f9;
     }

     /* --- TAB SELEKSI KATEGORI --- */
     .dest-categories-tabs {
         background: #ffffff;
         border-bottom: 1px solid #edf2f9;
         padding: 16px 0;
     }

     .dest-tabs-flex {
         display: flex;
         justify-content: flex-start;
         overflow-x: auto;
         gap: 16px;
     }

     .dest-tabs-flex::-webkit-scrollbar {
         height: 0px;
     }

     .dest-tab-item {
         display: flex;
         align-items: center;
         gap: 12px;
         padding: 8px 20px;
         border-radius: 12px;
         cursor: pointer;
         transition: all 0.2s ease;
         border: 1px solid transparent;
         flex-shrink: 0;
         background: #f8fafc;
     }

     .dest-tab-icon {
         width: 36px;
         height: 36px;
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 14px;
     }

     .tc-blue {
         background: #EBF3FF;
         color: #2F80ED;
     }

     .tc-green {
         background: #EAF7EE;
         color: #27AE60;
     }

     .tc-purple {
         background: #EEF2FA;
         color: #9B51E0;
     }

     .tc-orange {
         background: #FFF3EB;
         color: #E67E22;
     }

     .tc-red {
         background: #FDF0F2;
         color: #EB5757;
     }

     .tc-cyan {
         background: #E0F7FA;
         color: #00ACC1;
     }

     .tc-yellow {
         background: #FEF9E7;
         color: #F1C40F;
     }

     .dest-tab-txt strong {
         display: block;
         font-size: 13px;
         color: #4A5568;
     }

     .dest-tab-txt small {
         font-size: 11px;
         color: #A0AEC0;
     }

     .dest-tab-item:hover {
         background: #edf2f7;
     }

     .dest-tab-item.active {
         background: #EBF3FF !important;
         border-color: #2F80ED;
     }

     .dest-tab-item.active .dest-tab-txt strong {
         color: #0056fb;
     }

     /* --- TOOLBAR URUTKAN --- */
     .dest-toolbar-section {
         padding: 24px 0 10px 0;
     }

     .dest-toolbar-flex {
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     .dest-view-right {
         display: flex;
         gap: 6px;
     }

     .dest-view-btn {
         width: 32px;
         height: 32px;
         border-radius: 6px;
         border: 1px solid #E2E8F0;
         background: #ffffff;
         color: #A0AEC0;
         cursor: pointer;
         font-size: 12px;
     }

     .dest-view-btn.active {
         color: #0056fb;
         border-color: #0056fb;
     }

     /* --- CORE GRIDS KARTU PRODUK --- */
     .dest-grid-layout {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 24px;
         margin-top: 15px;
     }

     .dest-product-card {
         background: #ffffff;
         border-radius: 20px;
         overflow: hidden;
         border: 1px solid #edf2f9;
         display: flex;
         flex-direction: column;
         transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
     }

     .dest-product-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 15px 35px rgba(3, 24, 40, 0.08);
     }

     .dest-card-media {
         position: relative;
         height: 180px;
         overflow: hidden;
     }

     .dest-card-media img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.5s ease;
     }

     .dest-product-card:hover .dest-card-media img {
         transform: scale(1.08);
     }

     .dest-badge-tag {
         position: absolute;
         top: 14px;
         left: 14px;
         font-size: 10px;
         font-weight: 700;
         padding: 4px 12px;
         border-radius: 6px;
         color: #ffffff;
         z-index: 2;
     }

     .b-green {
         background: #27AE60;
     }

     .b-purple {
         background: #9B51E0;
     }

     .b-orange {
         background: #E67E22;
     }

     .b-red {
         background: #EB5757;
     }

     .b-cyan {
         background: #00ACC1;
     }

     .b-yellow {
         background: #F1C40F;
     }

     .dest-heart-btn {
         position: absolute;
         top: 14px;
         right: 14px;
         width: 32px;
         height: 32px;
         border-radius: 50%;
         border: none;
         background: rgba(255, 255, 255, 0.3);
         backdrop-filter: blur(8px);
         -webkit-backdrop-filter: blur(8px);
         color: #ffffff;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         font-size: 13px;
         z-index: 2;
         transition: all 0.2s ease;
     }

     .dest-heart-btn:hover {
         background: rgba(255, 255, 255, 0.9);
         color: #EB5757;
     }

     .dest-card-info {
         padding: 20px;
         display: flex;
         flex-direction: column;
         flex-grow: 1;
     }

     .dest-card-info h3 {
         font-size: 15px;
         color: #031828;
         font-weight: 700;
         margin-bottom: 6px;
         line-height: 1.4;
     }

     .dest-loc {
         font-size: 12px;
         color: #7F8C8D;
         margin-bottom: 12px;
         display: flex;
         align-items: center;
         gap: 4px;
     }

     .dest-loc i {
         color: #A0AEC0;
     }

     .dest-rating-row {
         margin-top: auto;
         display: flex;
         align-items: center;
         gap: 6px;
         border-top: 1px solid #edf2f9;
         padding-top: 12px;
     }

     .dest-star {
         font-size: 12px;
         font-weight: 700;
         color: #FFB300;
     }

     .dest-reviews {
         font-size: 12px;
         color: #A0AEC0;
     }

     /* --- BAR NAVIGATION PAGINATION BAWAH --- */
     .dest-pagination-section {
         padding: 40px 0 60px 0;
     }

     .dest-pagination-flex {
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     .dest-pages-buttons {
         display: flex;
         gap: 6px;
         align-items: center;
     }

     .dest-page-num,
     .dest-page-arrow {
         width: 36px;
         height: 36px;
         border-radius: 50%;
         border: 1px solid #E2E8F0;
         background: #ffffff;
         color: #4A5568;
         font-size: 13px;
         font-weight: 600;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 0.2s;
     }

     .dest-page-num.active {
         background: #0056fb;
         color: #ffffff;
         border-color: #0056fb;
     }

     .dest-page-num:hover:not(.active),
     .dest-page-arrow:hover {
         background: #edf2f9;
     }

     .dest-page-dots {
         font-size: 12px;
         color: #A0AEC0;
         padding: 0 4px;
     }

     .dest-pagination-meta {
         font-size: 13px;
         color: #718096;
     }

     /* --- RESPONSIVITAS GRID ADAPTIF --- */
     @media (max-width: 1200px) {
         .dest-grid-layout {
             grid-template-columns: repeat(3, 1fr);
         }
     }

     @media (max-width: 850px) {
         .dest-grid-layout {
             grid-template-columns: repeat(2, 1fr);
             gap: 16px;
         }

         .dest-pagination-flex {
             flex-direction: column;
             gap: 20px;
             text-align: center;
         }
     }

     @media (max-width: 520px) {
         .dest-grid-layout {
             grid-template-columns: 1fr;
         }

         .dest-search-container {
             flex-direction: column;
         }

         .dest-btn-filter {
             padding: 12px 0;
             justify-content: center;
         }
         }