:root{--navy:<?=$navy?>;--orange:<?=$orange?>}
        body{font-family:'Plus Jakarta Sans',sans-serif;background:#f8fafc;color:var(--navy);margin:0;min-height:100vh}
        .app-container{width:100%;max-width:500px;margin:0 auto;background:#fff;min-height:100vh;box-shadow:0 0 25px rgba(0,0,0,.06)}
        .main-header{padding:12px 16px;background:rgba(255,255,255,.98);backdrop-filter:blur(16px);position:sticky;top:0;z-index:1100;border-bottom:1px solid rgba(0,0,0,.08)}
        #ajax-content{min-height:85vh;padding-bottom:90px}
        @media(min-width:992px){
            body{background:linear-gradient(135deg,#f1f5f9,#e0e7ff);padding:20px 0}
            .app-container{max-width:1320px;border-radius:24px;box-shadow:0 15px 70px rgba(0,0,0,.18);overflow:hidden;min-height:calc(100vh - 40px);display:flex;flex-direction:column}
            .main-header{padding:16px 40px;position:fixed;top:0;left:0;right:0;z-index:1200;width:100%;max-width:1320px;margin:0 auto}
            #ajax-content{flex:1;padding:32px 40px 40px;min-height:auto;padding-top:85px}
            .nav-wrapper{display:block!important;position:fixed;bottom:25px;left:50%;transform:translateX(-50%);width:94%;max-width:1100px;z-index:1500}
            .bottom-nav {background: rgba(255, 255, 255, 0.45);backdrop-filter: blur(20px) saturate(180%);-webkit-backdrop-filter: blur(20px) saturate(180%);border: 1px solid rgba(255, 255, 255, 0.4);box-shadow: 0 10px 30px rgba(0,0,0,0.08);}
        }
        .nav-wrapper{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);width:94%;max-width:460px;z-index:1500}
        .bottom-nav {background: rgba(255, 255, 255, 0.45); /* Bening */backdrop-filter: blur(20px) saturate(180%);-webkit-backdrop-filter: blur(20px) saturate(180%);height: 82px;border-radius: 30px;display: flex;align-items: center;padding: 0 10px;box-shadow: 0 8px 32px rgba(21, 50, 88, 0.08);border: 1px solid rgba(255, 255, 255, 0.4);position: relative;}
        .nav-item{flex:1;text-align:center;color:var(--navy);font-size:9.8px;font-weight:700;text-decoration:none}
        .nav-item i{display:block;font-size:23px;margin-bottom:3px}
        .nav-item.active{color:var(--navy)}
        .nav-item.active i{transform:scale(1.18)}
        .nav-center{position:absolute;top:-34px;left:50%;transform:translateX(-50%);width:74px;height:74px;background:linear-gradient(135deg,var(--orange),#ff8a5c);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 35px rgba(255,107,53,.6);border:5px solid #fff;z-index:20}
        .nav-center:active{transform:translateX(-50%) scale(.92)}
        .back-btn{font-size:22px;padding:8px 12px;color:var(--navy);cursor:pointer}

    :root{--navy:#153258;--orange:#FF6B35}
    .home-container{padding-bottom:110px}
    .hero-section{padding:0 8px 16px 8px}
    .carousel-item img{width:100%;height:195px;object-fit:cover;border-radius:24px;box-shadow:0 10px 28px rgba(0,0,0,.12)}
    @media(min-width:992px){.carousel-item img{height:320px;border-radius:16px}}
    .section-title{font-size:17.8px;font-weight:800;color:var(--navy);margin-bottom:16px;padding-left:6px}
    .menu-container{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 16px}
    @media(min-width:992px){.menu-container{grid-template-columns:repeat(5,1fr);gap:28px 24px}.menu-card{display:flex;align-items:center;gap:12px;text-align:left}.icon-box{width:62px;height:62px;font-size:34px;margin:0}.menu-card span{font-size:14.5px;font-weight:700}}
    .menu-card{text-align:center;transition:all .35s ease;cursor:pointer}
    .menu-card:active{transform:scale(.92)}
    .icon-box{width:76px;height:76px;background:linear-gradient(145deg,#fff,#f8fafc);border-radius:28px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;box-shadow:0 12px 28px rgba(0,0,0,.11),inset 0 -6px 10px rgba(255,255,255,.85);font-size:40px;transition:all .4s ease}
    .menu-card:hover .icon-box{transform:translateY(-8px) scale(1.06);box-shadow:0 18px 38px rgba(255,107,53,.25)}
    .menu-card span{font-size:12.3px;font-weight:700;color:#1e2937}
    .sos-card .icon-box{background:linear-gradient(135deg,#ef4444,#f87171,#b91c1c);background-size:300% 300%;animation:sosShimmer 1.7s linear infinite;box-shadow:0 0 28px #ef4444;color:#fff;font-size:43px}
    @keyframes sosShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
    .rekomendasi-section{padding:0 20px 35px}
    .rekomendasi-container{display:flex;overflow-x:auto;gap:16px;padding-bottom:14px;scrollbar-width:none}
    .rekomendasi-container::-webkit-scrollbar{display:none}
    .rekomendasi-card{min-width:195px;background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.10);transition:all .3s ease}
    .rekomendasi-card:active{transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,0,0,.15)}
    .rekomendasi-card img{width:100%;height:130px;object-fit:cover}
    .rekomendasi-info{padding:14px 16px 16px}
    .rekomendasi-info h6{font-size:14.5px;font-weight:700;color:var(--navy);margin-bottom:8px;line-height:1.3}
    .price-tag{font-size:15.8px;font-weight:800;color:var(--orange)}
    .promo-bottom{margin:20px 20px 40px;background:linear-gradient(135deg,var(--navy),#1e4b85);border-radius:26px;padding:28px 24px;color:#fff;box-shadow:0 15px 35px rgba(21,50,88,.25)}
    .promo-bottom h5{font-size:17px;margin-bottom:4px}
    .promo-bottom p{font-size:14px;opacity:.9;margin-bottom:0}
    .home-search{margin:12px 20px 20px}
    .home-search input{height:52px;border-radius:9999px;border:2px solid #e2e8f0;padding-left:52px;font-size:15px}
    .home-search input:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,107,53,.15)}
#header-search-container {
    transition: all 0.3s ease;
    max-width: 250px; /* Batasi agar tidak terlalu lebar di desktop */
}
@media (max-width: 576px) {
    #header-search-container { max-width: 100%; }
}