#katalog{
    background-color: #F9F9F9;
}

.modal-dialog-scrollable .modal-body{
  max-height: calc(100vh - 3.5rem);
  overflow-y: auto;
  width: 100%;
}

.btn-mobile{
    display: none;
}

.katalog-container{
    /* border-radius: 40px; */
    /* background-color: #FFFFFF; */
}

/* Carousel container */
#katalog .carousel-katalog {
  position: relative;
}

/* Inner scroller: hide scrollbar cross-browser, enable smooth scroll */
#katalog #katalogCarouselInner {
  scroll-behavior: smooth;
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none;    /* Firefox */
  overscroll-behavior-x: contain;
}
#katalog #katalogCarouselInner::-webkit-scrollbar { /* Chrome/Safari */
  display: none;
}

/* Item sizing so it flows horizontally */
#katalog .carousel-item-katalog {
  flex: 0 0 auto;
}

/* Indicators */
#katalog .carousel-indicators-custom {
  display: flex;
  justify-content: center;
  gap: 8px;
}
#katalog .katalog-dot {
  width: 10px;
  height: 10px;
  border-radius: 100px;
  border: none;
  background: #D9D9D9;
}
#katalog .katalog-dot.active {
  width: 20px;
  background: #768491;
}

.overlay-hover {
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
        display: flex; /* langsung flex dari awal */
        flex-direction: column;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        padding: 0 50px;
    }

    .carousel-item-katalog:hover .overlay-hover {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

/* Pastikan konten terpotong mengikuti rounded image */
#katalog .carousel-item-katalog {
  overflow: hidden;
}

/* Fullscreen modal image: fit within viewport without scrolling */
#katalogImageModal .modal-body {
  height: auto;
  max-height: calc(100vh - 3.5rem);
  overflow-y: auto;
}
.katalog-modal-img {
  object-fit: cover;
  border-radius: 20px !important;
  display: block;
}

/* Ensure description does not create nested scroll; only modal-body scrolls */
.katalog-desc {
  min-width: 0;
  white-space: normal;        
  overflow-wrap: anywhere;     
  word-break: break-word;      
  hyphens: auto;               
}

.btn-view-image{
    border-radius: 16px;
    width: 100%;
    height: 64px;
    font-size: 14px;
    border: 1px solid #ADB5BD;
    background-color: white;
}

.btn-whatsapp{
    background-color: #00b94a;
    border-radius: 16px;
    width: 100%;
    height: 64px;
    font-size: 14px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.btn-link{
  text-decoration: none;
  border-radius: 12px;
  color: #FCEEE9;
  background-color: #2A1608;
}

.btn-link:hover{
  transition: .5s;
  color: black;
  background-color: #ADB5BD;
}

/* Mobile */
@media (max-width: 768px) {
    .katalog-container p{
      font-size: 14px;
    }

    .overlay-hover{
      display: none;
    }

    .katalog-container div h2{
      font-size: 20px !important;
    }

    /* Reduce modal body height on small screens */
    .modal-dialog-scrollable .modal-body{
      max-height: calc(100vh - 2rem);
    }

    .btn-mobile{
      display: flex;
    }
}