/* ==============================
   CSS VARIABLES & ROOT STYLES
   ============================== */
:root {
  /* Color System */
  --main: #FFCC00;
  --main1: rgba(255, 204, 0, 0.025);
  --main2: rgba(255, 204, 0, 0.1);
  --main3: rgba(255, 204, 0, 0.25);
  --main5: rgba(255, 204, 0, 0.5);
  
  --sec: #FF6600;
  --ter: #000;
  
  --light: #e0e0e0;
  --light1: rgba(255, 255, 255, 0.025);
  --light2: rgba(255, 255, 255, 0.1);
  --light3: rgba(255, 255, 255, 0.25);
  --light5: rgba(255, 255, 255, 0.5);
  
  --dark: #121212;
  --dark1: rgba(0, 0, 0, 0.025);
  --dark2: rgba(0, 0, 0, 0.1);
  --dark3: rgba(0, 0, 0, 0.25);
  --dark5: rgba(0, 0, 0, 0.5);
  --dark9: rgba(0, 0, 0, 0.9);
  
  --grey: #888888;
  
  /* Typography */
  --font-primary: 'Helvetica', 'Roboto', sans-serif;
  --font-heading: 'harabara', sans-serif;
  --font-accent: 'arka', sans-serif;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 4rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Z-index layers */
  --z-dropdown: 1000;
  --z-modal: 2000;
  --z-tooltip: 3000;
}

/* ==============================
   CSS RESET & BASE STYLES
   ============================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0; 
  padding: 0; 
  height: 100%; 
  background: var(--ter);
  font-family: var(--font-primary);
  color: var(--light);
  line-height: 1.5;
}

.bsof {
  overflow: hidden;  
}
a{
  cursor:pointer;
}

/* ==============================
   TYPOGRAPHY
   ============================== */
@font-face {
  font-family: 'harabara';
  font-display: swap;
  src: url(../fonts/Harabara.woff2) format('woff2'),
       url(../fonts/Harabara.woff) format('woff');
}

@font-face {
  font-family: 'arka';
  font-display: swap;
  src: url(../fonts/arka.woff2) format('woff2'),
       url(../fonts/arka.woff) format('woff');
}

@font-face {
  font-family: 'Material Icons';
  font-display: block;
  src: url(../fonts/MaterialIcons-Regular.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

/* Heading Scale */
h1, h2, h3, h4, h5, .brand-logo {
  font-family: var(--font-heading);
  letter-spacing: 2px;
  margin: 0;
  line-height: 1.2;
}

h1 { font-size: clamp(2rem, 4vw, 2.5rem); margin-bottom: var(--space-lg); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2rem); margin-bottom: var(--space-md); }
h3 { font-size: clamp(1.2rem, 3vw, 1.75rem); margin-bottom: var(--space-md); }
h4 { font-size: clamp(1rem, 2.5vw, 1.5rem); margin-bottom: var(--space-sm); }
h5 { font-size: clamp(0.9rem, 2vw, 1.25rem); margin-bottom: var(--space-sm); }

/* Text Utilities */
.smaller-text { font-size: 0.75rem !important; }
.small-text { font-size: 0.875rem !important; }
.large-text { font-size: clamp(2rem, 8vw, 4rem); }

/* ==============================
   COLOR UTILITIES
   ============================== */
/* Background Colors */
.main-bg { background-color: var(--main); }
.sec-bg { background-color: var(--sec); }
.ter-bg { background-color: var(--ter); }
.light-bg { background-color: var(--light); }
.dark-bg { background-color: var(--dark); }
.grey-bg { background-color: var(--grey); }

/* Text Colors */
.main-text { color: var(--main); }
.sec-text { color: var(--sec); }
.ter-text { color: var(--ter); }
.light-text { color: var(--light); }
.dark-text { color: var(--dark); }
.grey-text { color: var(--grey); }

/* ==============================
   LAYOUT & SPACING UTILITIES
   ============================== */
/* Margin Utilities */
.m0, .no-margin { margin: 0 !important; }
.mt0 { margin-top: 0 !important; }
.mb0 { margin-bottom: 0 !important; }
.mt1 { margin-top: var(--space-xs); }
.mt2 { margin-top: var(--space-sm); }
.mt3 { margin-top: var(--space-md); }
.mt4 { margin-top: var(--space-lg); }
.mt5 { margin-top: var(--space-xl); }
.mb1 { margin-bottom: var(--space-xs); }
.mb2 { margin-bottom: var(--space-sm); }
.mb3 { margin-bottom: var(--space-md); }
.mb4 { margin-bottom: var(--space-lg); }
.mb5 { margin-bottom: var(--space-xl); }

/* Padding Utilities */
.p0, .no-padding { padding: 0 !important; }

/* Display Utilities */
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==============================
   COMPONENT STYLES
   ============================== */

/* === LINKS & INTERACTIVE ELEMENTS === */
a {
  color: var(--light);
  text-decoration: none;
  transition: color var(--transition-normal);
}

a:hover,
a:focus-visible {
  color: var(--main);
  outline: 2px solid var(--main);
  outline-offset: 2px;
}

.active-link {
  color: var(--main) !important;
}

/* === BUTTONS === */
.btn, .btn-large, .btn-small, .btn-floating {
  background-color: var(--main);
  color: var(--dark) !important;
  border: none;
  transition: all var(--transition-normal);
}

.btn:hover, .btn-large:hover, .btn-small:hover, 
.btn-floating:hover, .btn:focus-visible {
  background-color: var(--ter);
  color: var(--main) !important;
  transform: translateY(-1px);
}

.btn-floating {
  background-color: var(--dark);
}

.btn-floating:hover {
  background-color: var(--main);
}

/* === CHIPS === */
.chip {
  background-color: var(--dark5);
  color: var(--light);
  border: 1px solid var(--dark5);
  transition: all var(--transition-normal);
  position: relative;
}

.chip:hover {
  background-color: var(--main5);
  color: var(--dark);
  border-color: var(--dark);
}

.chip > img {
  float: left;
  margin: 0 8px 0 -12px;
  height: 32px;
  width: 32px;
  border-radius: 50%;
}

.chip-small {
  font-size: 0.8rem;
  height: 20px;
  line-height: 20px;
  padding: 0 8px;
}
.chip>i {
  float: left;
  margin: 4px 8px -4px -5px;
  height: 32px;
  width: 18px;
  border-radius: 50%;
}

/* === FORMS & INPUTS === */
.input-field {
  position: relative;
}
input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea{
  color:#444;
  background-color: #fff;
  font-size:1.5rem;
}
input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]){
  border-bottom: 1px solid var(--ter);
  -webkit-box-shadow: 0 1px 0 0 var(--ter);
  box-shadow: 0 1px 0 0 var(--ter);  
}
input:not([type]):focus:not([readonly])+label, input[type=text]:not(.browser-default):focus:not([readonly])+label, input[type=password]:not(.browser-default):focus:not([readonly])+label, input[type=email]:not(.browser-default):focus:not([readonly])+label, input[type=url]:not(.browser-default):focus:not([readonly])+label, input[type=time]:not(.browser-default):focus:not([readonly])+label, input[type=date]:not(.browser-default):focus:not([readonly])+label, input[type=datetime]:not(.browser-default):focus:not([readonly])+label, input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label, input[type=tel]:not(.browser-default):focus:not([readonly])+label, input[type=number]:not(.browser-default):focus:not([readonly])+label, input[type=search]:not(.browser-default):focus:not([readonly])+label, textarea.materialize-textarea:focus:not([readonly])+label{
  color:var(--grey);
}
.input-field>label:not(.label-icon).active{
  transform:translateY(-16px) translateX(10px) scale(0.8);
}
.input-field .prefix.active {
  color: var(--main);
}
.input-field .prefix{
  cursor:pointer;
}
input:not([type]), 
  input[type=text]:not(.browser-default), 
  input[type=password]:not(.browser-default), 
  input[type=email]:not(.browser-default), 
  input[type=url]:not(.browser-default), 
  input[type=time]:not(.browser-default), 
  input[type=date]:not(.browser-default), 
  input[type=datetime]:not(.browser-default), 
  input[type=datetime-local]:not(.browser-default), 
  input[type=tel]:not(.browser-default), 
  input[type=number]:not(.browser-default), 
  input[type=search]:not(.browser-default), 
  textarea.materialize-textarea{
  /*background-color: #1e1e1e;  */
  background-color:transparent;
  color:#e0e0e0;
  }
input:not([type]):focus:not([readonly]), 
  input[type=text]:not(.browser-default):focus:not([readonly]), 
  input[type=password]:not(.browser-default):focus:not([readonly]), 
  input[type=email]:not(.browser-default):focus:not([readonly]), 
  input[type=url]:not(.browser-default):focus:not([readonly]), 
  input[type=time]:not(.browser-default):focus:not([readonly]), 
  input[type=date]:not(.browser-default):focus:not([readonly]), 
  input[type=datetime]:not(.browser-default):focus:not([readonly]), 
  input[type=datetime-local]:not(.browser-default):focus:not([readonly]), 
  input[type=tel]:not(.browser-default):focus:not([readonly]), 
  input[type=number]:not(.browser-default):focus:not([readonly]), 
  input[type=search]:not(.browser-default):focus:not([readonly]), 
  textarea.materialize-textarea:focus:not([readonly]){
  border-bottom: 1px solid var(--main);    
  box-shadow: 0 1px 0 0 var(--main);
  }
input:not([type]):focus:not([readonly])+label, 
  input[type=text]:not(.browser-default):focus:not([readonly])+label, 
  input[type=password]:not(.browser-default):focus:not([readonly])+label, 
  input[type=email]:not(.browser-default):focus:not([readonly])+label, 
  input[type=url]:not(.browser-default):focus:not([readonly])+label, 
  input[type=time]:not(.browser-default):focus:not([readonly])+label, 
  input[type=date]:not(.browser-default):focus:not([readonly])+label, 
  input[type=datetime]:not(.browser-default):focus:not([readonly])+label, 
  input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label, 
  input[type=tel]:not(.browser-default):focus:not([readonly])+label, 
  input[type=number]:not(.browser-default):focus:not([readonly])+label, 
  input[type=search]:not(.browser-default):focus:not([readonly])+label, 
  textarea.materialize-textarea:focus:not([readonly])+label{
  color:var(--main);
}

input:not([type]), 
input[type="text"]:not(.browser-default),
input[type="password"]:not(.browser-default),
input[type="email"]:not(.browser-default),
textarea.materialize-textarea {
  background-color: transparent;
  color: var(--light);
  border: none;
  border-bottom: 2px solid var(--light1);
  transition: border-color var(--transition-normal);
  width: 100%;
}

input:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom-color: var(--main);
  box-shadow: 0 1px 0 0 var(--main);
  outline: none;
}
/* default */
#cariData i.material-icons.prefix {
  color: var(--light2);
}
#cariData input.browser-default {
  color: var(--main);
  background-color: var(--dark);
  border: 0;
  border-bottom: 2px solid var(--light1);
}

/* hover input */
#cariData input.browser-default:hover {
  border-bottom: 2px solid var(--light);
}
/* saat input dihover, ubah icon (pakai parent hover) */
#cariData:hover i.material-icons.prefix {
  color: var(--light);
}

/* focus input */
#cariData input.browser-default:focus-visible {
  border-bottom: 2px solid var(--main);
  outline: none;
  box-shadow: none;
}
/* saat input fokus, ubah icon */
#cariData:has(input.browser-default:focus-visible) i.material-icons.prefix {
  color: var(--main);
}

input[type="text"].browser-default {
  color: var(--main);
  background-color: var(--dark);
  /*border:0;*/
  border-bottom:2px solid var(--light1);
}
input[type="text"].browser-default:focus-visible{
  border-bottom: 2px solid var(--main);
  box-shadow: 0;
  outline: 0;
  outline-offset: 2px;
}
input[type="text"].browser-default>i.material-icons:focus-visible{
  color:var(--main);
}
.select-wrapper input.select-dropdown:focus {
  border-bottom: 1px solid var(--main);
}
.select-wrapper .caret {
  fill: rgba(255, 255, 255, 0.87);
}

/* === NAVIGATION === */
nav {
  background: transparent !important;
  box-shadow: none;
}

.navbar-fixed {
  position: absolute;
  width: 100%;
  z-index: var(--z-dropdown);
}

.brand-logo img {
  height: 60px;
  width: auto;
}
@media only screen and (max-width: 992px) {
  nav .brand-logo {
    left: 0%;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  .nav-wrapper{
    margin:0;
  }
}

#icon-menu > li > a {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  margin: 8px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#icon-menu > li > a:hover {
  background-color: var(--dark1);
}
#icon-menu > li > a > img{
  height:40px;
  margin:0px;
}
#icon-menu .dots {
  position:absolute;
  top:10px;
  right:12px;
  display: inline-block;
  padding: 0;
  border-radius: 50%;
  margin: 0;
  block-size: .5rem;
  inline-size: .5rem;
  border-radius: 50%;
  background-color: #db3c31;
}
/*=============================== ddnotification ===============================*/
#ddnotification li a{
  padding:5px;
}
/*=============================== ddprofile ===============================*/
#ddprofile,#ddnotification{
  width:300px;
  color:var(--light);
}
.profile-container img{
  height:100px;
}
#ddprofile .profile-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}
/* Dropdown links */
#ddprofile li a {
  color: var(--light);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
  padding:20px;
  display: flex;
  align-items: center;
}
#ddprofile li:hover{
  background-color:transparent!important;
}
#ddprofile li a:hover {
  background-color: var(--dark2);
  color: var(--light);
}
#ddprofile li a i.material-icons {
  margin-right: 12px;
  font-size: 20px;
}
/*=============================== dropdown ===============================*/
.dropdown-content{
  background-color:var(--dark);
  z-index: 11000 !important;
  border-radius:10px;
  border:1px solid var(--light2);
  overflow:hidden;
}
.dropdown-content>li>a, .dropdown-content>li>span>a, .dropdown-content>li{
  color:var(--light);
}
.dropdown-content li:hover{
  background-color:var(--dark2);
}
.divider{
  background-color:var(--light2);
}
#bs-main{
  margin:0;
  padding:0;  
}
#bs-main>.col{
  margin:0;
  padding:0;
}
#bs-main-mid{
  /*height:100vh;*/
  position:relative;
  overflow-x:hidden;
}
#bs-main-mid>.container{
  width:90%;
}
.timeline-container{
  position: relative;
}
/* Timeline for all sections */
#timeline {
  will-change: transform;
  touch-action: none; /* Prevent default gestures interfering */
  height: 100vh;
  width: 50vw;
  /*overflow-x: hidden;*/
  position: relative;
}
#timeline .section {
  position: relative;
  z-index: 1;
}
@media only screen and (max-width : 900px) {
  #timeline {
    width:100vw;
  }
}
/*=============================== Section ===============================*/
.swipe-top{
  justify-content:flex-start;
  /*height:100vh!important;*/
}
.swipe-top>.section-content{
  height:100vh;  
  align-content:center;
}
.section-content {
  position:relative;
  background: rgba(0, 0, 0, 0.5);
  padding: 1rem 4rem;
  width: 100%;
  z-index: 2;
  margin:0 auto;
  overflow:hidden;
  border:0px solid var(--dark1);
  /* Optional: add margin bottom if you want space from bottom edge */
  /*margin-bottom: 40px;*/
}
.section-content h2 {
  margin: 0;
  font-size: 2.0rem;
}
.section-content .harga{
  /*position:absolute;*/
  top:0;
  right:4rem;
  font-size:2.5rem;
  line-height:1;
  font-family:'harabara';
  letter-spacing:4px;
  /*background-color:var(--dark5);*/
  padding:8px;
}
.section-content .harga-text{
  font-family: 'Fantasy', 'Helvetica', 'Roboto';
  font-size: 0.8rem;
  line-height: 1;
  padding: 0;
  margin: 0 5px;
  letter-spacing: normal;
  width: 20px;
  display: inline-block;
}
.section-content .juta{
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
  margin: 0;
}
.section-content p {
  font-size: 1.0rem;
  opacity: 0.9;
  margin:0.5rem 0;
}
@media only screen and (max-width : 599px) {
  .section-content{
    /*max-width:85%;*/
  }
  .section-content .harga{
    right:0;
  }
  .section{
    /*padding-bottom:60px;*/
    width:100vw;
  }
}
.scroll-down{
  content: '▼'; /* down arrow */
  width:100%;
  display:block;
  position:relative;
  left:50%;
}
.peta-container>img{
  width:100%;
  height:80vh;
  object-fit:cover;
}
aside{padding:0;margin:0}
/* === SIDENAV === */
.sidenav {
  background-color: var(--dark);
  border-radius: var(--radius-lg);
  margin: 20px 0 0 20px;
  width: 275px;
}

.sidenav li a {
  padding: 0 20px;
  color: var(--light5);
  transition: all var(--transition-normal);
}

.sidenav li a:hover,
.sidenav li a:focus-visible {
  color: var(--main);
  background-color: var(--light1);
}
.container-sidenav-logo a:hover{
outline:none;
}
/*=============================== Slide Out Sidenav ===============================*/
#slide-out, #filter{
  background-color:var(--dark);
  margin:0;
  border-radius:0;
}
/*=============================== Sidenav ===============================*/
@media only screen and (max-width : 599px) {
  .sidenav{
    margin-top: 100px;
  }
}
.sidenav{
  background-color: var(--dark);
  box-shadow: none;
  overflow:scroll;
  border-radius:15px;
  margin-top:0px;
  margin-left:20px;
  width:275px;
}
.sidenav li a{
  padding:0 20px;
}
.sidenav li a, .sidenav li>a>i.material-icons{
  color:var(--light5);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.sidenav li a:hover, .sidenav li a:hover>i.material-icons{
  color:var(--main);
}
.sidenav li:hover{
  background-color:var(--light1);
}
.container-sidenav-logo{
  height:120px;
}
.sidenav-logo{
  height:100px;
  text-align:center;
}
.sidenav-logo>a>img{
  height:100px;
}
.sidenav-logo>a>span{
  margin-top:14px;
}
.sidenav-search{
  margin:20px;
}
/*=============================== BS Main Left Nav ===============================*/
@media only screen and (max-width : 599px) {
  #bs-main-left{
    margin-top: 50px;
  }
}
#bs-main-left{
  margin-top:0;
}
.bsnav-search{
  padding:20px;
}
.left-nav{
  position:relative;
  background-color:var(--light1);
  box-shadow: none;
  overflow:hidden;
  border-radius:15px;
  /*margin-top:70px;*/
  margin-left:7%;
  width:86%;
  height:90vh;
}
.left-nav:hover{
  overflow:auto;
  transition: all 0.3s ease;
}
.left-nav>li{
  float:left;
  line-height:48px;
  width:100%;
}
.left-nav>li>a{
  display: inline-block;
  width:100%;
  font-size: 14px;
  font-weight: 500;
  height: 48px;
  line-height: 48px;
  padding:0 20px;
}
.left-nav>li:hover {
  background-color: var(--light1);
}
.left-nav>li:hover>a, .left-nav>li:hover>a>i.material-icons{
  color:var(--main);  
}
.left-nav>li>a>i{
  float: left;
  height: 48px;
  line-height: 48px;
  margin: 0 32px 0 0;
  width: 24px;  
}
.left-nav>li>a>i.right{
  margin: 0 0 0 32px;  
}
.left-nav>li>a, .left-nav>li>a>i.material-icons{
  color:var(--light);
}
/*=============================== BS Main Right Nav ===============================*/
#bs-main-right{
}
#bs-main-right .container{
  width:90%;
}
.right-nav{
  position:relative;
  background-color:var(--light2);
  box-shadow: none;
  /*overflow:auto;*/
  border-radius:15px;
  margin-top:70px;
  padding:10px;
  /*margin-left:7%;*/
  width:100%;
  /*height:80vh;*/
}
.right-nav>li{
  float:left;
  text-align:left;
  line-height:48px;
  width:100%;
  padding:0 40px;
}
.right-nav>li>a{
  display: inline-block;
  width:100%;
  font-size: 14px;
  font-weight: 500;
  height: 48px;
  line-height: 48px;
  padding:0 20px;
}
.right-nav>li:hover {
  background-color: var(--dark2);
}
.right-nav>li>a>i{
  float: left;
  height: 48px;
  line-height: 48px;
  margin: 0 32px 0 0;
  width: 24px;  
}
.right-nav>li>a, .right-nav>li>a>i.material-icons{
  color:var(--light);
}
/*=============================== BS Search Box ===============================*/
#bs-search-form{
  padding: 0px 16px;
  background: var(--dark);
  transition: background-color 0.3s ease;
  border-radius: 92px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  /*margin: 0px;*/
  height:42px;      
}
#bs-search-form:hover, #bs-search-form:focus{
  background: var(--light1);
}
.bsnav-search:hover{
  background-color: transparent!important;
}
#bs-search-text{
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  border: none;
  background: transparent;
  outline: none;
  padding: 0px;
  width: 89%;
  appearance: textfield;      
  height:40px;
}
#bs-search-form>input::placeholder{
  color: var(--light3);  
  transition: color 0.3s ease;
}
#bs-search-form:hover>input::placeholder, #bs-search-form:hover>i.material-icons, #bs-search-form>input:focus::placeholder{
  color: var(--light);  
}
#bs-search-form i.material-icons {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  z-index: 10;
  color:var(--light3);
  cursor:pointer;
}

/* === SWIPER SLIDER === */
.swiper {
  height: 100vh;
  width: 100%;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
  height: 100vh !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  color: white;
  text-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.section-content {
  background: rgba(0, 0, 0, 0.5);
  padding: var(--space-md) var(--space-xxl);
  width: 100%;
  z-index: 2;
  position: relative;
}

.swiper-button-prev,
.swiper-button-next {
  width: 44px;
  height: 44px;
  color: rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 10px;
  z-index: 10;
  transition: background var(--transition-normal);
  border: none;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: rgba(0,0,0,0.7);
}
/* Stack buttons vertically */
.swiper-button-prev {
  top: 50%;
  transform: translateY(-100%);
}

.swiper-button-next {
  top: 52%;
  transform: translateY(0);
}
/* Use up/down arrows for vertical navigation */
.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 24px;
  font-weight: bold;
  color: rgba(255,255,255,0.4);
  text-shadow: none;
}

.swiper-button-prev::after {
  content: '▲'; /* up arrow */
  position:absolute;
  top:8px;
}

.swiper-button-next::after {
  content: '▼'; /* down arrow */
}
.swiper-pagination-bullet-active{
  color:rgba(255,255,255,0.5)!important;
  background-color:rgba(0,0,0,0.7)!important;
  opacity:1!important;
}
.swiper-pagination-bullet{
  color:rgba(255,255,255,0.2);
  background-color:rgba(0,0,0,0.2);
  transition: opacity 2s ease-in-out, background-color 0.3s ease, color 0.3s ease;
  opacity:0.9;
  width:44px;
  height:44px;
  padding-top:10px;
}
.swiper-pagination-bullet:hover{
  color:rgba(255,255,255,0.3);
  background-color:rgba(0,0,0,0.7);
}
.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets{
  top:50%;
}
@media only screen and (max-width : 599px) {
  .swiper-button-next, .swiper-button-prev{
    display:none;
  }
}

/* === PRODUCT GRID === */
.vp-container {
  position: relative;
  height: 100px;
  overflow: hidden;
  padding: 1px !important;
  margin: 0 !important;
  transition: opacity var(--transition-normal);
  opacity: 0.5;
}

.vp-container:hover {
  opacity: 1;
}

.vp-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vp-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  text-align: right;
  letter-spacing: 3px;
  line-height: 0.8;
  color: var(--main);
  position: absolute;
  bottom: 5px;
  right: 5px;
}

/* === CARDS === */
.card {
  background-color: var(--dark);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-normal);
}

.card:hover {
  transform: translateY(-2px);
}

/* === TABLES === */
table {
  background-color: var(--dark);
  color: var(--light);
  width: 100%;
  border-collapse: collapse;
}

table.striped > tbody > tr:nth-child(odd) {
  background-color: var(--light1);
}

table.highlight > tbody > tr:hover {
  background-color: var(--light2);
}

/* === PAGINATION === */
.pagination li.active {
  background-color: var(--main);
}

.pagination li.active a {
  color: var(--dark) !important;
}

/* === MODALS === */
.modal {
  background-color: var(--dark);
}

.modal .modal-footer {
  background-color: var(--dark);
}

/* === LOADING STATES === */

.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--light1);
  border-top: 2px solid var(--main);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* === SCROLL ANIMATIONS === */
.scroll-up {
  margin-top: var(--space-md);
  color: rgba(255,255,255,0.5);
  font-size: 48px;
  cursor: pointer;
  animation: bounceArrow 1.5s infinite;
  transition: opacity var(--transition-slow);
}

@keyframes bounceArrow {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  40% {
    transform: translateY(-15px);
    opacity: 1;
  }
  60% {
    transform: translateY(-5px);
    opacity: 0.8;
  }
}

.scroll-up.hidden {
  opacity: 0;
  pointer-events: none;
}

/* === SCROLLBAR STYLING === */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background-color: var(--light1);
}

::-webkit-scrollbar-thumb {
  background-color: var(--light2);
  border-radius: var(--radius-lg);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--light1);
  transition: all 3s ease;
}

input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
/*input:-internal-autofill-selected{*/
-webkit-box-shadow:inset 0px 50px 50px 50px #212121 !important;
-webkit-text-fill-color:#fff;
transition: background-color 99999s ease-in-out 0s;
}
.autocomplete-content li .highlight {
  color: var(--main);
}
/* ==============================
   RESPONSIVE DESIGN
   ============================== */
@media (max-width: 992px) {
  .nav-wrapper {
    margin: 0;
  }
  
  .brand-logo {
    left: 0;
    transform: translateX(0);
  }
}

@media (max-width: 768px) {
  .section-content {
    padding: var(--space-md);
  }
  
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
  
  #timeline {
    width: 100vw;
  }
}

@media (max-width: 480px) {
  :root {
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-xxl: 2rem;
  }
  
  .sidenav {
    margin: 10px;
    width: calc(100vw - 20px);
  }
  
  .vp-container {
    height: 80px;
  }
}

/* ==============================
   ACCESSIBILITY IMPROVEMENTS
   ============================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --main: #FFCC00;
    --sec: #FF6600;
    --light: #FFFFFF;
    --dark: #000000;
  }
}

/* ==============================
   PRINT STYLES
   ============================== */
@media print {
  .navbar-fixed,
  .fixed-action-btn,
  .swiper-button-prev,
  .swiper-button-next {
    display: none !important;
  }
  
  .swiper-slide {
    height: auto !important;
    break-inside: avoid;
  }
}

/* ==============================
   UTILITY CLASSES
   ============================== */
/* Flexbox Utilities */
.flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-center { 
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Text Alignment */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

/* Border Radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: 50%; }

/* Opacity */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Shadows */
.shadow-sm { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.shadow-md { box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.shadow-lg { box-shadow: 0 8px 16px rgba(0,0,0,0.2); }

/* Transitions */
.transition { transition: all var(--transition-normal); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* ==============================
   COMPONENT VARIATIONS
   ============================== */
/* WhatsApp Button */
.wa-btn {
  background-color: #009688 !important;
  color: #fff !important;
}

.wa-btn:hover {
  background-color: #1d7d74 !important;
}
.wa-btn>img{
  width: 30px;
  height:auto;
  float: left;
  left:-15px;
  top:5px;
  margin:5px 0;
  color: #fff;
}
.wa-btn>img:hover{
  filter: invert(100%);
}

/* Badge */
.badge.new {
  background-color: var(--main);
  color: var(--dark);
  border-radius: var(--radius-sm);
}

/* Copyright */
.copyright {
  color: var(--grey) !important;
  text-align: center !important;
  font-size: 0.875rem;
}

.copyright a {
  color: var(--grey) !important;
}

.copyright a:hover {
  color: var(--main) !important;
  outline:0;
}
.version-indicator {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 111111111;
  font-size: 0.75rem;
  opacity: 0.5;
}
/* Add debug borders to see actual dimensions */
.debug * {
  outline: 1px solid red !important;
}

.debug .problematic-element {
  outline: 2px solid blue !important;
}
.element {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  background-size: cover; /* or use specific pixel values */
  background-size: 260px auto; /* Account for padding */
}
.img-container img{
  height:40px;
  width: auto;
}
/*=============================== Produk Pilihan  ===============================*/
#vp-section{
  margin:50px;
  margin-top:100px;
}
.vp-container{
  position:relative;;
  height:100px;
  overflow:hidden;
  padding:1px!important;
  margin:0px!important;
  transition: opacity 1s;
  opacity:0.5;
}
.vp-container:hover{
  opacity:1;
}
.vp-container img{
  display:block;
  width:100%;
  height:100px;
  object-fit:cover;
  margin:auto;
}
.vp-title{
  font-family: 'harabara';
  font-size:1.1rem;
  text-align:right;
  letter-spacing:3px;
  line-height:0.8;
  /*color:#fff;*/
  color:#ffcc00;
  opacity:1;
  position:absolute;
  bottom:5px;
  right:5px;
}
.vp-caption{
  position: absolute;
  bottom: 0;
  right: 0;
  /*background-color: rgba(255, 204, 0, 0.8);*/
  background-color: rgba(0, 0, 0, 0.8);
  padding: 0 5px;
  font-family: 'harabara';
}
.vp-promo img{
  object-fit:contain;
}
.vp-diskon{
  font-size:3rem;
}
.vp-deskripsi{
  font-size:1rem;
  font-family:'Roboto';
  color:#fff;
}
/*============================= Collection =============================*/
.collection{
  border:1px solid var(--light2);
}
/*.collection, .collection .collection-item:first-child{
  border:0;
}*/
.collection .collection-item{
  border-bottom:1px solid var(--light2);
}
.collection .collection-item{
  background-color:var(--dark1);
}
/*============================= Pill Boxes Checkbox =============================*/
.pill-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0px;
}
.jcenter{
  justify-content:center;
}
.pill-checkboxes input[type="checkbox"], 
{
  display: none;
}
.pill-checkboxes [type="checkbox"]+span:not(.lever):before, 
.pill-checkboxes input[type="checkbox"]:not(.filled-in)+span:not(.lever):after
{
  /*opacity:0;*/
  width:10px!important;
  height:10px!important;
  margin:0!important;  
  border-radius:20px;
}
.pill-checkboxes input[type="checkbox"]+span:not(.lever){
  padding-left:12px;
  height:10px;
  line-height:10px;
  font-size:0.8rem;

}
.pill-checkboxes label {
  cursor: pointer;
  padding: 0px 8px;
  border-radius: 50px;
  border: 2.5px solid var(--grey);
  color: var(--grey);
  font-weight: 500;
  font-size:1rem;
  user-select: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.pill-checkboxes input[type="checkbox"]:checked + label,
  .pill-checkboxes input[type="checkbox"]:checked+span:not(.lever):before{
  background-color: var(--main);
  color: var(--main);
  box-shadow: 0 0 2px var(--dark);
  border-color: var(--main);
  transform:none;
  translate: none;
  border-radius:20px;
  top:0;
  left:0;

}
/*============================= Pill Boxes Radio =============================*/
.pill-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0px;
}
.pill-radio.small [type="radio"]:not(:checked)+span, .pill-radio.small [type="radio"]:checked+span{
  padding:5px;
  font-weight: 400;
  font-size:.8rem;
  line-height:1;
  margin-bottom:0px;
}
.pill-radio.small [type="radio"]:not(:checked)+span{
  border: 1.5px solid var(--grey);
}
.pill-radio.small [type="radio"]:checked+span{
  border: 1.5px solid var(--main);
}
.pill-radio [type="radio"]:not(:checked)+span{
  cursor: pointer;
  padding: 15px;
  border-radius: 50px;
  background-color:var(--dark1);
  border: 2.5px solid var(--grey);
  color: var(--grey);
  font-weight: 500;
  font-size:1rem;
  user-select: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  line-height:0;
}

.pill-radio [type="radio"]:checked+span{
  cursor: pointer;
  padding: 15px;
  border-radius: 50px;
  background-color:var(--dark5);
  border: 2.5px solid var(--main);
  color: var(--main);
  font-weight: 500;
  font-size:1rem;
  user-select: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  line-height:0;
}
.pill-radio [type="radio"]:not(:checked)+span:before, 
.pill-radio [type="radio"]:not(:checked)+span:after, 
.pill-radio [type="radio"]:checked+span:before,
.pill-radio [type="radio"]:checked+span:after{
  display:none;
}
/*============================= Produk Item =============================*/
#list_produk{
  padding:10px;
  margin:0;
  transition:all .5s ease-in-out;
}
.loader{
  width:100%;
  height:100%;
  background-color:#000;
  visibility:hidden;
  opacity:0;
}
.loader{
  opacity:1;
  visibility:visible;
  transition: opacity .25s ease-in-out;
}
.equal-col {
  display: flex;
  flex-wrap: wrap;
}

#list_produk .produk_item{
  padding:0
}
#list_produk .card{
  background-color:var(--dark1);
  margin:10px;
  transition:all .5s ease-in-out;
}
#list_produk .card-content{
  position:relative;
  padding:0;
}
#list_produk .produk-caption{
  padding:10px;
}
#list_produk .img-container{
  width:100%;
  height:300px;
  overflow:hidden;
  border-radius:10px;
  position:relative;
}
#list_produk .card-content .removeFav{
  position:absolute;
  top:0px;
  right:0px;
  z-index:999;
  opacity:0.1;
  transition:opacity .25s ease-in-out;
  cursor:pointer;
}
#list_produk .card-content:hover>.removeFav{
  opacity:1;
}  
#list_produk .title-card{
  position:absolute;
  bottom:5px;
  right:5px;
}
#list_produk .img-container img{
  height:100%;
  transition:all .25s ease-in-out;
}
#list_produk .img-container::after{
  content: '';
  background-color: var(--dark2);
  height: 300px;
  display: block;
  width: 100%;
  top: 0;
  position: absolute;
  left: 0;
  transition:all .25s ease-in-out;
}
#list_produk .img-container:hover > img{
  transform: scale(1.05);
}
#list_produk .img-container:hover::after{
  background-color:transparent;  
}
#list_produk .btn-floating{
  position:absolute;
  right:10px;
  bottom:70px;
}
@media only screen and (max-width : 599px) {
  #list_produk .produk-caption{
    padding:5px;
  }
  #list_produk .img-container{
    height:200px;
  }
  #list_produk .btn-floating{
    position:absolute;
    right:10px;
    bottom:40px;
  }
  #list_produk .card{
    margin:5px;
  }
}
/*=============================== CARD ===============================*/
.card{
  background-color:var(--dark);
  border-radius:15px;
}
/*============================= DASHBOARD =============================*/
#dashboard{
  margin:20px;
}

/*============================= SUMMARY =============================*/
#summary{
  display: flex;
  flex-wrap: wrap;  
}
#summary .col{
  display:flex;
  flex-direction:column;
}
#summary .card{
  width:100%;
  display: flex;
  flex-direction:column;
}
#summary .card-content{
  flex:1;
  max-height:100px;
  overflow-y:hidden;
  padding:12px;
  flex-direction:column;
}
#summary ul{
  margin:0;
}
#summary ul li{
  white-space:nowrap;
}
#summary h1{
  margin:5px 0;
}
#summary .totalText{
  white-space:nowrap;
}
.underline::after{
  content: "";
  width: 40%;
  height: 2px;
  background: rgba(255,255,255,0.5);
  position: absolute;
  top: 34px;
  left: 13px;
}
.underline2::after{
  content: "";
  width: 40%;
  height: 2px;
  background: rgba(0,0,0,0.5);
  position: absolute;
  top: 34px;
  left: 13px;
}
.img-container img{
  height:40px;
}
.muttm .img-container a{
  padding-top:10px;
  height:64px;
}
.muttm .circle{
  background-color:#fff;
}
#summary .card .card-content img.circle{
  height:80px;
}
#recentUsers{
  margin-top:0;
}
#recentUsers li{
  line-height:1.4rem;
}
@media only screen and (max-width : 599px) {
  .section{
    position:relative;
  }
  #summary .card .card-content img.circle{
    height:40px;
  }
  #recentUsers li{
    font-size:11px;
  }
}

/*user_view*/
#userForm .foto-container{
  height:260px;
  width:260px;
  padding:20px;
  margin:0 auto;
  overflow:hidden;
}
#userForm .foto-container img{
  width:100%;
  height:auto;
}
/*============================= MODAL =============================*/
.modal-full{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  top:0!important;
  left:0!important;
  transform:none!important;
}
.modal, .modal .modal-footer{
  background-color:var(--dark);
}
/*============================= Preview Photo =============================*/
#previewContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.preview-item {
  position: relative;
  width: 120px;
  height: 90px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  cursor: pointer;
}
.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.delete-photo-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: rgba(255, 0, 0, 0.8);
  border: none;
  border-radius: 50%;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background-color 0.3s ease;
}
.delete-photo-btn:hover {
  background-color: rgba(255, 0, 0, 1);
}
.delete-photo-btn i.material-icons {
  font-size: 16px;
  color: white;
  line-height: 16px;
  user-select: none;
  pointer-events: none;
}
/*============================= Pengaturan =============================*/
#pengaturan{
  margin:0 20px;
}
#pengaturan .title-collection{
  margin-left:20px;
}
#pengaturan .collection{
  border-radius:10px;
}
#pengaturan .collection-item{
  color:var(--light);
  border-bottom:0px;
  padding:20px;
}
#pengaturan a.collection-item:not(.active):hover{
  background-color:var(--light1);
  color:var(--main);
}
#pengaturan .container{
  width:90%;
}
#pengaturan .foto-profil-container{
  height:200px;
  text-align:center;
  margin:20px;
}
#pengaturan .foto-profil-container img{
  border-radius:50%;
  height:100%;
}
/*============================= AKUN =============================*/
@media only screen and (max-width : 599px) {
  #akun h1, #akun h5{
    text-align:center;
  }
}
/*============================= Pengaturan =============================*/
/*.filter{
  opacity:0;
  transition:opacity 0.5s ease-in-out;
}
.filter.fade_in{
  opacity:1;
}*/
/*============================= SweetAlert2 =============================*/
.swal2-modal, .swal2-popup{
  background:var(--dark)!important;
}
.swal2-title, .swal2-html-container{
  color:var(--light)!important;
}
.swal2-confirm{
  background-color:var(--main)!important;
  color:var(--dark)!important;
}
.swal2-cancel{
  background-color:var(--sec)!important;
  color:var(--light)!important;
}
/*============================= tabs =============================*/
.tabs{
  background-color:transparent;
}
.tabs .tab{
  text-transform:none;
}
.tabs .tab a{
  color:var(--light);
}
.tabs .tab a:hover{
  color:var(--light);
}
.tabs .tab a.active{
  color:var(--main);
}
.tabs .tab a:focus{
  background-color:var(--main2);
  color:var(--main);
}
.tabs .tab a:focus.active{
  background-color:transparent;
  color:var(--main);
}
.tabs .tab.disabled a, .tabs .tab.disabled a:hover{
  color:var(--light5);
}
.tabs .indicator {
  background-color: var(--main); /* Change the indicator color */
  height: 3px; /* Change the indicator thickness */
}
/*============================= TEAM =============================*/
.team-img{
  border-radius:50%;
  height:100px;
  transition: all 0.3s ease;
}
.team-img:hover{
  transform:scale(105%);
}