body {
    font-family: 'Inter', sans-serif;
    background-color: white;
    color: #1F2937;
    overflow-x: hidden;
}


.scroll-anim {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-anim.is-visible {
    opacity: 1;
    transform: translateY(0);
}


@keyframes float {
    0% { transform: translateY(0) rotate(var(--initial-rot, 0deg)); }
    50% { transform: translateY(-12px) rotate(var(--initial-rot, 0deg)); }
    100% { transform: translateY(0) rotate(var(--initial-rot, 0deg)); }
}


.abstract-visual {
    position: relative;
    width: 100%;
    height: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 0 5%;
}


.photo-frame-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.photo-frame {
    position: absolute;
    background: #F3F4F6; 
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9CA3AF;
    font-size: 0.9rem;
    text-align: center;
    border: 2px dashed #D1D5DB; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    animation: float 5s ease-in-out infinite; 
    transition: background 0.3s, transform 0.3s;
}


.camera-icon {
    width: 30px;
    height: 30px;
    stroke: #9CA3AF;
    fill: none;
    stroke-width: 1.5;
}


#frame-main {
    width: 300px;
    height: 200px;
    border-radius: 20px;
    --initial-rot: -5deg;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--initial-rot));
    z-index: 10;
}

/* Frame Kecil */
#frame-small-tl {
    width: 90px; height: 60px; border-radius: 12px; --initial-rot: 15deg; top: 15%; left: 8%; animation-delay: 1s;
}
#frame-small-bl {
    width: 80px; height: 80px; border-radius: 50%; --initial-rot: -10deg; top: 70%; left: 15%; animation-delay: 2.5s;
}
#frame-small-tr {
    width: 110px; height: 75px; border-radius: 16px; --initial-rot: 5deg; top: 20%; left: 70%; animation-delay: 0.5s;
}
#frame-small-br {
    width: 70px; height: 90px; border-radius: 14px; --initial-rot: -25deg; top: 85%; left: 75%; animation-delay: 1.5s;
}


.decor-star {
    width: 1rem; height: 1rem;
    position: absolute;
    transform: scale(1.2);
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.1));
    animation: float 6s ease-in-out infinite;
}



.curved-underline-effect {
    position: absolute;
    left: -10px;
    width: calc(100% + 20px);
    bottom: -15px;
    height: 15px;
    z-index: 50;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='15' viewBox='0 0 100 15'%3E%3Cpath d='M0 8 C 25 3, 75 12, 100 7' stroke='%233A86FF' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom;
    

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; 
}
    

.is-visible .curved-underline-effect {
    transform: scaleX(1);
}



.category-card {
    position: relative;
    display: flex;
    align-items: flex-end; 
    padding: 1.5rem;
    border-radius: 1.5rem; 
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    z-index: 1;

    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    background-color: #374151; 
}

.category-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}


.text-container {
    position: relative;
    z-index: 10;
    line-height: 1; 
}

.text-container .subtitle {
    font-size: 0.8rem; 
    font-weight: 600; 
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7); 
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.text-container .title {
    font-size: 1.8rem; 
    font-weight: 900; 
    color: white; 
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); 
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
   
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 50%);
    z-index: 5;
}


@media (max-width: 768px) {
    .text-container .title {
        font-size: 1.4rem; 
    }
    .text-container .subtitle {
        font-size: 0.7rem;
    }
}
@media (max-width: 640px) {
    .curved-underline-effect {
        left: -5px;
        width: calc(100% + 10px);
        bottom: -8px;
        height: 8px;
        
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='8' viewBox='0 0 100 8'%3E%3Cpath d='M0 4 C 25 1, 75 7, 100 4' stroke='%233A86FF' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    }
    .abstract-visual {
        height: 450px;
        padding: 0 5%;
    }
    #frame-main {
        width: 220px;
        height: 140px;
    }
}


.dropdown-menu {

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.dropdown:hover .dropdown-menu {

    display: block;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}


    
.footer-heading {
    font-size: 0.875rem; 
    font-weight: 700; 
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em; 
    margin-bottom: 1.25rem; 
}

.footer-link {
    font-size: 0.875rem; 
    color: #9CA3AF; 
    transition: all 0.3s ease;
    display: inline-block; 
}
    
.footer-link:hover {
    color: #ffffff; 
    transform: translateX(5px); 
    text-decoration: none; 
}


.badge-hiring {
    margin-left: 0.25rem;
    padding: 0.125rem 0.5rem; 
    background-color: #06D6A0;
    font-size: 0.75rem; 
    border-radius: 9999px; 
    color: #1F2937; 
    font-weight: 600; 
}


.social-icon:hover {
background-color: #3A86FF; 
color: white;
transform: scale(1.1) rotate(-10deg);
}


.social-icon.social-insta {
background-color: #C13584;
color: white;
}

.social-icon.social-insta:hover {
background-color: #C13584; 
opacity: 0.9;
}

.social-icon.social-shopee {
background-color: #EE4D2D;
color: white;
}

.social-icon.social-shopee:hover {
background-color: #EE4D2D; 
opacity: 0.9;
}



@keyframes float-cta {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

.floating-cta-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.floating-cta-container.cta-visible {
    opacity: 1;
    transform: translateY(0);
}


.floating-cta-container.cta-hidden {
    opacity: 0;
    transform: translateY(calc(100% + 2rem)); 
}



.floating-icon {
    width: 3.5rem; 
    height: 3.5rem; 
    border-radius: 50%;
    background-color: #25D366; 
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    
    box-shadow: 0 10px 25px -5px rgba(37, 211, 102, 0.4), 0 8px 10px -6px rgba(37, 211, 102, 0.2);
    animation: float-cta 3s ease-in-out infinite;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
    border: none;
}

.floating-icon:hover {
    transform: scale(1.1);
  
    box-shadow: 0 15px 30px -5px rgba(37, 211, 102, 0.5), 0 10px 15px -6px rgba(37, 211, 102, 0.3);
    background-color: #128C7E; 
}

.floating-bubble {
    position: absolute;
    right: calc(100% + 1rem); 
    bottom: 50%;
    transform: translateY(50%) translateX(10px); 
    background-color: white;
    color: #1F2937; 
    padding: 0.75rem 1.25rem;
    border-radius: 1.5rem 1.5rem 0.25rem 1.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    pointer-events: none; 
}


.floating-cta-container:hover .floating-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateY(50%) translateX(0);
}


@media (max-width: 640px) {
    .floating-cta-container {
  
        bottom: 2rem;
        right: auto;
        left: 1.5rem;
    }
    .floating-icon {
        width: 3.25rem;
        height: 3.25rem;
    }
 
    .floating-bubble {
        display: none;
    }
}


.product-filter-btn {
    background-color: #F9FAFB; 
    color: #1F2937; 
    border-radius: 9999px; 
    font-weight: 500; 
    transition: all 0.2s ease-in-out;
    transform: scale(1);
   
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); 
}
.product-filter-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03); 
}
.product-filter-btn.active {
   
    background-color: #3A86FF !important; 
    color: white !important;
   
    box-shadow: 0 6px 20px rgba(58, 134, 255, 0.4), 0 4px 8px rgba(58, 134, 255, 0.2); 
}


.dropdown-menu.hover-active {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}


.solution-finder-card {
    display: flex;
    align-items: center;
    padding: 1.5rem; 
    background-color: white;
    border: 1px solid #E5E7EB; 
    border-radius: 1.5rem; 
  
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    text-align: left;
    overflow: hidden; 
    position: relative; 
}

.solution-finder-card:hover {
    transform: translateY(-8px); 
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.1); 
    border-color: #E5E7EB; 
    
}
.solution-finder-card .icon-container {
    flex-shrink: 0;
    width: 3rem; 
    height: 3rem; 
    border-radius: 0.75rem; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem; 
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; 
    z-index: 2; 
}

.solution-finder-card:hover .icon-container {
  
    background-color: var(--icon-bg-solid, #E5E7EB);
    color: white; 
    transform: scale(1.1) rotate(-5deg); 
    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.15); 
}
.solution-finder-card:hover .icon-container svg {
    color: white; 
}

.solution-finder-card .title {
    font-size: 1.125rem; 
    font-weight: 700; 
    color: #1F2937; 
    transition: color 0.3s ease;
    z-index: 2;
}
.solution-finder-card .description {
    font-size: 0.875rem; 
    color: #4B5563; 
    transition: color 0.3s ease;
    z-index: 2;
}
    

.solution-finder-card .arrow-icon,
.solution-finder-card .external-arrow-icon {
    width: 1.25rem; 
    height: 1.25rem; 
    color: #9CA3AF; 
    margin-left: auto; 
    transition: transform 0.3s ease, color 0.3s ease;
    z-index: 2;
}
    

.solution-finder-card:hover .arrow-icon {
    transform: translateX(8px); 
    color: var(--icon-bg-solid, #3A86FF); 
}


.solution-finder-card:hover .external-arrow-icon {
    transform: translate(6px, -6px) scale(1.1); 
    color: var(--icon-bg-solid, #3A86FF); 
}


/* [MODIFIKASI] Mengaktifkan pseudo-element untuk 'glow' effect */
.solution-finder-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
  
    background: radial-gradient(circle at 25% 25%, var(--icon-bg-solid, #3A86FF) 0%, rgba(255, 255, 255, 0) 80%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    border-radius: 1.5rem; 
}
.solution-finder-card:hover::before {
    opacity: 0.12; 
}

/* Responsive untuk card */
@media (max-width: 768px) {
    .solution-finder-card {
        padding: 1rem;
    }
    .solution-finder-card .icon-container {
        width: 2.5rem; height: 2.5rem; margin-right: 0.75rem;
    }
    .solution-finder-card .title {
        font-size: 1rem; /* text-base */
    }
    .solution-finder-card .description {
        font-size: 0.75rem; /* text-xs */
    }
}

/* ===== CSS untuk Horizontal Scroll / Swipe ===== */
.solution-scroll {
 
    scrollbar-width: none; 
    -ms-overflow-style: none;  
    position: relative;
    padding-left: 10%; 
    padding-right: 10%; 
}
.solution-scroll::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
    

.solution-scroll {
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch; 
}
.solution-scroll > * {
    scroll-snap-align: center; 
    
}
    

@media (min-width: 768px) {
    .solution-scroll {
        scroll-snap-type: none;
        padding-left: 0;  
        padding-right: 0; 
    }
    .solution-scroll > * {
        scroll-snap-align: none;
    }
}

/* ===== Style untuk Dots Indikator ===== */
#solution-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #D1D5DB; 
    transition: background-color 0.3s ease;
}

#solution-dots .dot.active {
    background-color: #3A86FF; 
}

/* --- STYLE BARU UNTUK MODAL POP-UP PRODUK --- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none; /* Diatur oleh JS */
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.is-open {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: white;
    border-radius: 1.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 900px; 
    width: 100%;
    max-height: 90vh;
    overflow-y: auto; 
    transform: scale(0.95);
    transition: transform 0.3s ease;
    position: relative; 
}

.modal.is-open .modal-content {
    transform: scale(1);
}

/* Responsive untuk modal content */
@media (min-width: 768px) {
    .modal-content {

        overflow-y: hidden; 
    }
}


.modal {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
.modal.is-open {
    opacity: 1;
}
.modal.is-open .modal-content {
    transform: scale(1);
}
.modal-content {
    transform: scale(0.95);
    transition: transform 0.3s ease-out;
}

.product-detail-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1.5rem; 
    border: 2px solid #3A86FF; 
    color: #3A86FF; 
    background-color: transparent;
    border-radius: 0.75rem; 
    font-size: 1rem;
    font-weight: 600; 
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.product-detail-btn:hover {
    background-color: #3A86FF; 
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(58, 134, 255, 0.3); 
}


.product-detail-btn svg {
    display: none !important;
}


.product-card > img {
    height: 14rem; 
    min-height: 14rem;
}


#product-grid {

    align-items: stretch; 
}

.product-card {
    display: flex;
    flex-direction: column; 
    height: 100%; 
}


.product-card .p-6 {
    flex-grow: 1; 
}


/* ===== Kategori Produk (desain baru) ===== */
.cat-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:768px){.cat-grid{grid-template-columns:repeat(3,1fr);gap:1.75rem}}
.cat-card{--c:#8338EC;--bg:#F3EBFF;display:flex;flex-direction:column;background:#fff;border:1px solid #EEF0F4;border-radius:1.5rem;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 4px 14px rgba(17,24,39,.05);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.cat-card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(17,24,39,.10);border-color:var(--c)}
.cat-food{--c:#8338EC;--bg:#F3EBFF}
.cat-nonfood{--c:#FF006E;--bg:#FFEAF3}
.cat-kitchen{--c:#3A86FF;--bg:#E8F1FF}
.cat-media{position:relative;aspect-ratio:4/3;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden}
.cat-media img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform .45s ease}
.cat-card:hover .cat-media img{transform:scale(1.07) rotate(-1.5deg)}
.cat-body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.cat-count{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c);background:var(--bg);padding:.3rem .65rem;border-radius:999px;margin-bottom:.75rem}
.cat-title{font-size:1.4rem;font-weight:800;color:#1F2937;line-height:1.25;margin-bottom:.4rem}
.cat-desc{font-size:.93rem;color:#6B7280;line-height:1.55;margin-bottom:1.1rem;flex:1}
.cat-cta{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;font-size:.95rem;color:var(--c)}
.cat-cta svg{transition:transform .3s ease}
.cat-card:hover .cat-cta svg{transform:translateX(5px)}
@media (max-width:767px){
  .cat-card{flex-direction:row;align-items:stretch}
  .cat-media{aspect-ratio:auto;width:38%;padding:0}
  .cat-body{padding:1rem 1.1rem}
  .cat-title{font-size:1.1rem}
  .cat-desc{font-size:.82rem;margin-bottom:.6rem}
  .cat-count{font-size:.65rem;margin-bottom:.5rem}
}


/* ===== Quick pick "Apa yang Anda butuhkan?" (desain baru) ===== */
.qp-heading{text-align:center;font-size:1.35rem;font-weight:800;color:#1F2937;margin:0 0 1.25rem;padding:0 1rem}
.qp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;padding:0 .25rem;margin-bottom:2.5rem}
@media (min-width:768px){.qp-grid{grid-template-columns:repeat(4,1fr);gap:1rem;padding:0}}
.qp-card{--c:#8338EC;--bg:#F3EBFF;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;text-align:left;background:#fff;border:1px solid #EEF0F4;border-radius:1.25rem;padding:1rem;cursor:pointer;text-decoration:none;color:inherit;font:inherit;box-shadow:0 2px 10px rgba(17,24,39,.04);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease}
.qp-card:hover{transform:translateY(-4px);border-color:var(--c);box-shadow:0 12px 26px rgba(17,24,39,.09)}
.qp-card:active{transform:scale(.98)}
.qp-food{--c:#8338EC;--bg:#F3EBFF}
.qp-nonfood{--c:#FF006E;--bg:#FFEAF3}
.qp-kitchen{--c:#3A86FF;--bg:#E8F1FF}
.qp-custom{--c:#059669;--bg:#E6F9F2;background:linear-gradient(135deg,#F2FCF8 0%,#fff 70%);border-style:dashed;border-color:#A7E8CF}
.qp-icon{width:2.75rem;height:2.75rem;border-radius:.9rem;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--c);transition:background .25s ease,color .25s ease}
.qp-icon svg{width:1.4rem;height:1.4rem}
.qp-card:hover .qp-icon{background:var(--c);color:#fff}
.qp-text{display:flex;flex-direction:column;gap:.2rem;padding-right:1.25rem}
.qp-title{font-size:.98rem;font-weight:700;color:#1F2937;line-height:1.3}
.qp-desc{font-size:.8rem;color:#6B7280;line-height:1.4}
.qp-arrow{position:absolute;top:1rem;right:1rem;width:1.1rem;height:1.1rem;color:#C4C9D2;transition:transform .25s ease,color .25s ease}
.qp-card:hover .qp-arrow{color:var(--c);transform:translateX(3px)}
@media (min-width:768px){
  .qp-heading{font-size:1.5rem;margin-bottom:1.5rem}
  .qp-card{padding:1.25rem}
  .qp-title{font-size:1.05rem}
  .qp-desc{font-size:.85rem}
}