/* =========================
   HERO WRAPPER
========================= */
.hero-wrap{
  padding:30px 0;
  background:#f4f6f8;
}

/* =========================
   CAROUSEL
========================= */
.hero-carousel{
  border-radius:18px;
  overflow:hidden;
}

/* =========================
   SLIDE
========================= */
.hero-slide{
  position:relative;
  width:100%;
}

.hero-slide img{
  width:100%;
  height:420px;
  object-fit:cover;
  display:block;
}

/* =========================
   OVERLAY
========================= */
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(3,23,58,.9) 0%,
    rgba(3,23,58,.7) 40%,
    rgba(3,23,58,.3) 70%,
    rgba(3,23,58,0) 100%
  );

  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:48px;
  max-width:55%;
}


.hero-overlay h2{
  font-size:36px;
  font-weight:800;
  margin-bottom:12px;
}

.hero-overlay p{
  font-size:16px;
  line-height:1.6;
  margin-bottom:20px;
  color:#e5e7eb;
}

/* =========================
   BUTTON
========================= */
.hero-btn{
  display:inline-block;
  padding:12px 26px;
  background:#2563eb;
  border-radius:999px;
  color:#fff;
  font-weight:700;
  text-decoration:none;
  width:fit-content;
  transition:.2s;
}

.hero-btn:hover{
  background:#ffb703;
  color:#000;
}

/* =========================
   FLICKITY CUSTOM
========================= */
.flickity-page-dots{
  bottom:15px;
}

.flickity-page-dots .dot{
  width:18px;
  height:4px;
  border-radius:4px;
  background:#cbd5f5;
  opacity:.4;
}

.flickity-page-dots .dot.is-selected{
  background:#ffb703;
  opacity:1;
}

.flickity-prev-next-button{
  background:rgba(0,0,0,.4);
}

.flickity-prev-next-button:hover{
  background:#ffb703;
}

/* =========================
   MOBILE
========================= */
@media(max-width:768px){

  .hero-slide img{
    height:260px;
  }

  .hero-overlay{
    max-width:100%;
    padding:24px;
    background:linear-gradient(
      to top,
      rgba(3,23,58,.85) 0%,
      rgba(3,23,58,.3) 70%,
      rgba(3,23,58,0) 100%
    );
    justify-content:flex-end;
  }

  .hero-overlay h2{
    font-size:22px;
  }

  .hero-overlay p{
    font-size:14px;
  }
}
/* ===== TOP NOTIFICATION ===== */
.top-notif{
  background:#000000;
}

.top-notif-inner{
  max-width:1200px;
  margin:auto;
  padding:10px 16px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:#ffffff;
}

.top-notif a{
  color:#f97316;
  font-weight:600;
  text-decoration:none;
}

.top-notif a:hover{
  text-decoration:underline;
}
/* ===== HOME MENU ===== */
.home-menu{
  background:#f4f6f8;
  padding:24px 0 30px;
}

.home-menu-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.home-menu-item{
  position:relative;
  flex:1;
  text-align:center;
  text-decoration:none;
  color:#0f172a;
  font-size:14px;
  font-weight:500;
}

.home-menu-item img{
  height:42px;
  margin-bottom:6px;
}

.home-menu-item span{
  display:block;
}

/* hover halus */
.home-menu-item:hover span{
  color:#ffb703;
}

/* badge HOT */
.menu-badge{
  position:absolute;
  top:-6px;
  right:22px;
  background:#ff4d4f;
  color:#fff;
  font-size:10px;
  padding:2px 6px;
  border-radius:999px;
  font-style:normal;
  font-weight:600;
}

/* MOBILE */
@media(max-width:768px){
  .home-menu-row{
    overflow-x:auto;
  }

  .home-menu-item{
    min-width:90px;
  }
}

/* =========================================================
   TUL CAROUSEL - TOPUPLIVE STYLE (RAPIH + RESPONSIVE)
   Prefix: tul-
   ========================================================= */

   .tul-carousel-wrapper{
    width: 100%;
    background: #000;
    padding: 12px 0 0 0;
    position: relative;
    overflow: hidden;
  }

  .tul-carousel-container{
    /* max 1100px tapi auto ngikut layar */
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;

    /* padding auto */
    padding-left: clamp(8px, 2vw, 16px);
    padding-right: clamp(8px, 2vw, 16px);
  }

/* =========================
   MAIN SLIDER
   ========================= */
   .tul-main-slider{
    /* height responsif tanpa statis (lebih stabil untuk carousel) */
    --tul-hero-h: clamp(170px, 28vw, 380px);

    position: relative;
    width: 100%;
    height: var(--tul-hero-h);

    border-radius: 14px;
    overflow: hidden;
    background: #1a1a3e;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  }

  .tul-slides-viewport{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .tul-slides-track{
    display: flex;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
  }

  .tul-slide-item{
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

/* ✅ gambar FULL FILL (ngalahin img{height:auto} global) */
.tul-slide-item img{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* optional vignette biar lebih premium */
.tul-main-slider::after{
  position:absolute; inset:0;
  pointer-events:none;
  content: none !important;
}

/* =========================
   MAIN ARROWS
   ========================= */
   .tul-arrow-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.3);
    color: #fff;

    width: 44px;
    height: 44px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: all 0.25s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .tul-arrow-btn:hover{
    background: rgba(255,255,255,0.30);
    border-color: rgba(255,255,255,0.9);
    transform: translateY(-50%) scale(1.06);
  }
  .tul-arrow-btn svg{
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tul-arrow-prev{ left: 14px; }
  .tul-arrow-next{ right: 14px; }

/* =========================
   DOTS
   ========================= */
   .tul-dots-wrapper{
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 10;
  }
  .tul-dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
    padding: 0;
  }
  .tul-dot.tul-active{
    background: #fff;
    width: 24px;
    border-radius: 4px;
  }

/* =========================================================
   THUMB STRIP (mobile-like di desktop)
   - ukuran thumb FIXED (tidak melebar full)
   - wrapper auto shrink kalau slide sedikit
   ========================================================= */
   .tul-thumb-section{
    --tul-thumb-w: clamp(120px, 12vw, 165px);
    --tul-thumb-h: clamp(38px, 4.2vw, 52px);
    --tul-thumb-gap: 10px;
    --tul-thumb-btn: 34px;

    position: relative;
    margin-top: 10px;

    /* auto center */
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;

    display: grid;
    grid-template-columns: var(--tul-thumb-btn) auto var(--tul-thumb-btn);
    align-items: center;
    column-gap: 10px;

    padding: 0 12px;
    box-sizing: border-box;
  }

  .tul-thumb-track-wrapper{
    /* auto shrink sesuai konten, tapi ada batas layar */
    width: fit-content;
    max-width: min(720px, calc(100vw - 140px));
    overflow: hidden;
    border-radius: 10px;
    min-width: 0;
  }

  .tul-thumb-track{
    display: flex;
    gap: var(--tul-thumb-gap);
    transition: transform 0.35s ease;
    will-change: transform;
    align-items: stretch;
  }

  .tul-thumb-item{
    flex: 0 0 var(--tul-thumb-w);
    width: var(--tul-thumb-w);
    height: var(--tul-thumb-h);

    border-radius: 8px;
    overflow: hidden;

    cursor: pointer;
    border: 2px solid transparent;
    background: #1a1a3e;

    padding: 0;
    line-height: 0;
    display: block;
    box-sizing: border-box;
  }

  .tul-thumb-item img{
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  .tul-thumb-item.tul-thumb-active{
    border-color: #f5a623;
    box-shadow: 0 0 10px rgba(245,166,35,0.6);
  }

  .tul-thumb-btn{
    width: var(--tul-thumb-btn);
    height: var(--tul-thumb-btn);
    border-radius: 50%;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
    background: rgba(10,14,46,0.85);
    border: 1.5px solid rgba(255,255,255,0.2);
    transition: all 0.25s ease;
    color:#fff;
  }
  .tul-thumb-btn:hover{
    background: rgba(30,40,100,0.95);
    border-color: #f5a623;
  }
  .tul-thumb-btn svg{
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

/* kalau slide cuma 1, sembunyikan semua control */
.tul-is-single .tul-arrow-btn,
.tul-is-single .tul-dots-wrapper,
.tul-is-single .tul-thumb-section{
  display: none !important;
}

/* =========================
   RESPONSIVE
   ========================= */
   @media (max-width: 1024px){
    .tul-main-slider{ --tul-hero-h: clamp(170px, 34vw, 300px); }
    .tul-arrow-btn{ width: 38px; height: 38px; }
  }

  @media (max-width: 699px){
    .tul-main-slider{
      --tul-hero-h: 180px;
      border-radius: 10px;
    }
    .tul-arrow-btn{
      width: 30px; height: 30px;
    }
    .tul-arrow-btn svg{ width: 13px; height: 13px; }
    .tul-arrow-prev{ left: 8px; }
    .tul-arrow-next{ right: 8px; }

    .tul-dots-wrapper{ bottom: 8px; }
    .tul-dot{ width: 6px; height: 6px; }
    .tul-dot.tul-active{ width: 18px; }

    .tul-thumb-section{
      --tul-thumb-w: 130px;
      --tul-thumb-h: 42px;
      --tul-thumb-gap: 8px;
      --tul-thumb-btn: 28px;

      column-gap: 8px;
      padding: 0 8px;
    }
    .tul-thumb-track-wrapper{
      max-width: min(520px, calc(100vw - 110px));
    }
    .tul-thumb-btn svg{ width: 11px; height: 11px; }
  }

  @media (max-width: 479px){
    .tul-main-slider{ --tul-hero-h: 150px; }
    .tul-thumb-section{
      --tul-thumb-w: 115px;
      --tul-thumb-h: 38px;
    }
  }