<?php header("Content-type: text/css"); ?>

/* RESET */
body{
    margin:0;
    font-family:Arial, sans-serif;
    background:#f5f6fa;
    overflow-y:auto;
}

/* CONTAINER UTAMA (SIMULASI HP) */
.app{
    max-width:420px;
    margin:auto;
    padding-bottom:80px; /* AGAR TIDAK KETUTUP NAV */
}

/* HERO IMAGE */
.hero img{
    width:100%;
    border-radius:0 0 20px 20px;
}

/* TITLE */
.title{
    text-align:center;
    margin:10px 0;
}

/* CARD */
.saldo-card{
    background:#fff;
    margin:15px;
    padding:15px;
    border-radius:15px;
    box-shadow:0 4px 8px rgba(0,0,0,.1);
}

.saldo-card small{
    color:#777;
}

.saldo-card h1{
    margin:5px 0;
}

.saldo-info{
    display:flex;
    justify-content:space-between;
    margin-top:10px;
}

/* MENU GRID */
.menu-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin:15px;
}

.menu-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    font-size:12px;
    cursor:pointer;
}

/* ICON */
.icon-circle{
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:5px;
}

.icon-circle svg{
    width:26px;
    height:26px;
    fill:#fff;
}

/* WARNA */
.green{background:#2ecc71;}
.red{background:#e74c3c;}
.blue{background:#3498db;}
.orange{background:#f39c12;}
.purple{background:#9b59b6;}

/* SECTION */
.section{
    margin:15px;
    background:#fff;
    border-radius:15px;
    padding:15px;
    box-shadow:0 4px 8px rgba(0,0,0,.1);
}

.section h3{
    margin-top:0;
}

/* LIST */
.list-item{
    display:flex;
    justify-content:space-between;
    padding:10px 0;
    border-bottom:1px solid #eee;
}

.list-item:last-child{
    border-bottom:none;
}

/* TEXT COLOR */
.green-text{color:#27ae60;}
.red-text{color:#c0392b;}

/* ========================= */
/* NAV BAWAH (FIX FINAL) */
/* ========================= */
.nav-bottom{
    position:fixed;
    bottom:0;

    left:50%;
    transform:translateX(-50%);

    width:100%;
    max-width:420px;

    background:#fff;
    display:flex;
    justify-content:space-around;
    align-items:center;

    border-top:1px solid #ddd;
    padding:8px 0;

    z-index:999;

    /* BIAR ELEGAN */
    box-shadow:0 -2px 10px rgba(0,0,0,.1);
}

/* ITEM NAV */
.nav-bottom div{
    display:flex;
    flex-direction:column;
    align-items:center;
    font-size:11px;
    cursor:pointer;
    color:#555;
}

/* ICON NAV */
.nav-bottom svg{
    width:22px;
    height:22px;
    margin-bottom:3px;
}

/* ACTIVE */
.nav-bottom .active{
    color:#2ecc71;
}

/* KLIK EFEK */
.nav-bottom div:active{
    transform:scale(0.9);
}

/* ========================= */
/* BANNER SCROLL (FIX)       */
/* ========================= */

.banner-scroll{
    display:flex;
    overflow-x:auto;
    gap:10px;
    padding:10px 0;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
}

.banner-scroll::-webkit-scrollbar{
    display:none;
}

.banner-item{
    flex:0 0 70%;
    height:130px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    scroll-snap-align:start;
}

.banner-item img{
    width:100%;
    height:100%;
    object-fit:cover;
}
/* ========================= */
/* ZOOM / LIGHTBOX          */
/* ========================= */

.zoom-overlay{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    z-index:9999;
    align-items:center;
    justify-content:center;
}

.zoom-overlay.active{
    display:flex;
}

.zoom-overlay img{
    max-width:90%;
    max-height:80%;
    border-radius:12px;
}