:root{
      --brand:#191a19;
      --green:#191a19;
      --muted:#f2f4f3;
      --text:#333;
    }
    /* background */
    .bg-g-01 {
    background-color: #dcffd370; /* ini overlay */
    background-image: url("../images/kebab.png"); /* ini background image */
    background-repeat: repeat;
    background-size: cover; /* atau 'contain', tergantung kebutuhan */
    }

    body{font-family: Arial, sans-serif;}

    /* Top bar */
   
    .top-bar{background:var(--brand) !important;color:#fff;font-size:14px;padding:6px 20px;}
    .top-bar .info{display:flex;align-items:center;margin-left:20px;}
    .top-bar i{margin-right:6px;}
    .top-bar .info {
    opacity: 0;
    animation: fadeInRight 0.5s ease forwards;
    }

.top-bar .info:nth-child(1) {
  animation-delay: 0.3s;
}
.top-bar .info:nth-child(2) {
  animation-delay: 0.6s;
}
.top-bar .info:nth-child(3) {
  animation-delay: 0.9s;
}

@keyframes fadeInRight {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulseWithPause {
  0%, 70%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  35% {
    transform: scale(1.5);
    opacity: 0.7;
  }
}

.pulse-text {
  display: inline-flex;
  align-items: center;
  animation: pulseWithPause 3s infinite;
}

@keyframes pulse {
  0%, 70%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  35% {
    transform: scale(1.06);
    opacity: 0.9;
  }
}

.nav-link:hover {
  animation: pulse 1.5s infinite;
  /* Optional supaya animasi smooth */
  transition: transform 0.3s ease;
  background-color: #191a19;
  color: #ffffff !important;
}

.ul.dropdown-menu.show {
    border-radius: 0px !important;
}
    /* Header */
    .main-header {
      padding: 12px 20px;
      border-bottom: 0;
    }

    /* Logo */
    .main-header .logo img {
      max-height: 120px;
    }

    /* Search Box Wrapper */
    .main-header .search-box {
      position: relative;
    }

    /* Search Input - Modern Food Style */
    .main-header .search-box input {
      height: 46px;
      width: 100%;
      border-radius: 999px; /* pill modern */
      padding: 0 16px 0 44px;
      background-color: #ffffff; /* warm food tone */
      border: 1px solid #afdbff93;
      font-size: 14px;
      transition: all 0.25s ease;
    }

    /* Placeholder */
    .main-header .search-box input::placeholder {
      color: #4794d1;
    }

    /* Focus State */
    .main-header .search-box input:focus {
      background-color: #fff;
      border-color: #4794d1;
      box-shadow: 0 0 0 3px rgba(223, 223, 223, 0.25);
      outline: none;
    }

    /* Search Icon */
    .main-header .search-box i {
      position: absolute;
      top: 50%;
      left: 16px;
      transform: translateY(-50%);
      font-size: 20px;
      color: #4794d1;
      pointer-events: none;
    }

    /* Nav (sticky) */
    .nav-bar{border-bottom:1px solid #eee;padding:0 20px;}
    .nav-bar .navbar-nav .nav-link{color:var(--text);font-weight:500;padding:10px 16px;}
    .nav-bar .navbar-nav .nav-link:hover{color:var(--green);}

    /* Tombol Beli Emas */
    .dropdown-mega .mdi{margin-right:8px;}
    .mega-parent{position:static;} /* penting agar dropdown bisa full-width */

    /* Dasar tombol */
/* Dasar tombol */
.dropdown-mega {
  position: relative;
  overflow: hidden;
  background: var(--green);
  font-size: 1em;
  color: #fff !important;
  font-weight: 600;
  padding: 10px 16px !important;
  text-decoration: none;
}

.dropdown-mega::before {
  content: '';
  position: absolute;
  top: 0; left: -50%;
  width: 20%; /* Lebar garis */
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,       /* Transparan di ujung */
    rgba(255,255,255,0.3) 50%,    /* Cahaya tipis di tengah */
    rgba(255,255,255,0) 100%      /* Transparan di ujung */
  );
  transform: skewX(-20deg);
}

/* Animasi saat hover */
.dropdown-mega:hover::before {
  animation: shine 0.8s forwards;
}

@keyframes shine {
  0% { left: -50%; }
  100% { left: 125%; }
}


.mega-parent{position:static;}

.mega-dropdown {
  position:absolute;
  width:100%;
  left:0;
  top:100%;
  background:#fff;
  border-radius:0 0 8px 8px;
  z-index:1050;
}

.mega-category .list-group-item{
  border:0;
  border-radius:0;
  padding:12px 16px;
  background:transparent;
  color:var(--green);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.mega-category .list-group-item.active{
  background:var(--green);
  color:#fff;
}

.mega-panel{display:none; padding:16px 20px;}
.mega-panel.show{display:block;}

.mega-panel .dropdown-item{padding:.35rem 0;color:#555;}
.mega-panel .dropdown-item:hover{color:var(--green);}

.mega-image{
  width:150px;
  max-width:100%;
  border-radius:6px;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}

/* EFEK HOVER */

/* Panah dropdown Beli Emas */
.dropdown-mega .mdi-chevron-down {
  transition: transform 0.3s ease;
}

/* Ketika dropdown terbuka, panah berputar 180 derajat */
.mega-parent.show .dropdown-mega .mdi-chevron-down {
  transform: rotate(180deg);
}

/* Animasi panel kanan */
.mega-panel {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.mega-panel.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Animasi panah */
.mega-category .mdi-chevron-right {
  transition: transform 0.3s ease;
}

.mega-category .list-group-item.active .mdi-chevron-right {
  transform: rotate(90deg); /* panah berputar 90 derajat saat aktif */
}