body{
    margin:0;
    padding:0;
    min-height:100vh;
    font-family:Arial, Helvetica, sans-serif;
    overflow:hidden;

    background:linear-gradient(
    180deg,
    #ffffff 0%,
    #fcfcfd 60%,
    #fff4e8 88%,
    #ffe7c8 100%
);
}

/* ===========================
   LOGIN
=========================== */

.login-page{

    min-height:100vh;

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    padding-top:0;

    background:url("../images/background/login-bg.png");

    background-repeat:no-repeat;

    background-position:center;

    background-size:cover;
}

.login-page .container{
    max-width:420px;
    transform:translateY(-60px);
    transform:translateY(-30px);
}

.mhi-logo{

    width:130px;

    height:auto;

    display:block;

    margin:0 auto 25px;

}

.app-title{

    color:white;

    font-size:18px;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:18px;

    opacity:.95;

}

.welcome-text{
    color:white;
    margin-bottom:35px;
    text-align:center;
}

.welcome-text h1{
    font-size:46px;
    font-weight:700;
    margin-bottom:8px;
}

.welcome-text h2{
    font-size:42px;
    font-weight:300;
    margin:0;
}

.welcome-text p{
    margin-top:14px;
    font-size:18px;
    opacity:.95;
}

.login-card{

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.22);

    border-radius:28px;

    padding:42px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.18),
        0 0 25px rgba(255,153,0,.08);

    transition:.3s;

}

.brand-header{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-bottom:28px;
}

.brand-logo{
    width:52px;
    height:auto;
}

.brand-name{
    color:white;
    font-size:20px;
    font-weight:600;
    letter-spacing:.5px;
}

.login-btn:hover{

    background:#1458d6;

}

.login-btn:active{

    transform:scale(.98);

    border-bottom-width:2px;

    box-shadow:
        0 4px 10px rgba(23,104,255,.20);

}

.input-group{

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    border-radius:40px;

}

.input-group-text{

    border-radius:40px 0 0 40px;

    background:white;

    border:none;

    color:#1d72f3;

    font-size:18px;

    padding-left:18px;

}

.form-control{

    height:58px;

    border:none;

    border-radius:0 40px 40px 0;

    font-size:17px;

}

.form-control:focus{

    box-shadow:none;

}

.login-btn{

    height:50px;

    border:none;

    border-radius:40px;

    background:#1768ff;

    color:#fff;

    font-size:18px;

    font-weight:600;

    letter-spacing:.5px;

    border-bottom:4px solid #f89a1c;

    box-shadow:
        0 8px 20px rgba(23,104,255,.28);

    transition:all .25s ease;

}

.login-btn:hover{

    background:#1458d6;

    transform:translateY(-2px);

    box-shadow:
        0 0 12px rgba(248,154,28,.45),
        0 0 24px rgba(248,154,28,.30),
        0 10px 22px rgba(23,104,255,.35);

}

.login-btn:active{

    transform:scale(.98);

}

.forgot-password{

    margin-top:18px;

    text-align:right;

}

.forgot-password a{

    color:rgb(60, 0, 255);

    text-decoration:none;

    font-size:14px;

    opacity:.9;

    transition:.3s;

}

.forgot-password a:hover{

    opacity:1;

    text-decoration:underline;

}

.footer-text{

    margin-top:40px;

    text-align:center;

    color:white;

    font-size:14px;

}

.footer-text p{

    margin-bottom:6px;

}
/* ===========================
   HOME
=========================== */

.header-brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.header-logo{
    width:34px;
    height:auto;
}

.home-header{

    padding:18px 0 10px;

}

.page-title{
    font-size:22px;
    font-weight:600;
    color:#222;
    margin:0;
}

.profile-btn{

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    background:#808080;

    color:white;

    font-size:24px;

    transition:.3s;

}

.profile-btn:hover{

    transform:scale(1.05);

}

.product-scroll{

    height:calc(100vh - 290px);

    overflow-y:auto;

    padding-bottom:120px;

    scrollbar-width:none;      /* Firefox */

    -ms-overflow-style:none;   /* Edge lama */

}

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

   /*BAGIAN SETING HP */

.phone-card{
    background: white;
    border-radius: 22px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 6px 15px rgba(0,0,0,.12);
    transition: .3s;
    width: 100%;
    min-height:190px;
}

.phone-card:hover{
    transform: translateY(-4px);
}

.phone-image{
    width: 95px;
    height: auto;
    margin: 0 auto 6px;
    display: block;
}

.phone-card h5{
    font-size:13px;
    font-weight:700;
    margin:4px 0;
    line-height:1.2;
    height:32px;          
    display:flex;
    align-items:center;
    justify-content:center;
}

.phone-card p{
    font-size: 11px;
    color: #777;
    margin: 0 0 8px;
    line-height: 1.2;
}

.phone-card .btn{
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 20px;
}

.products{
    margin-top: 25px;
}

.category-btn{

    border-radius:18px;

    padding:8px 16px;

    font-size:15px;

    font-weight:600;

}

.category-btn:hover{

    background:#fafafa;

}
/* ==========================
PROFILE
========================== */

.profile-card{

    background:white;

    border-radius:25px;

    padding:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

}

.profile-item{

    display:flex;

    align-items:center;

    gap:20px;

}

.profile-item i{

    font-size:28px;

    color:#0d6efd;

}

.profile-item small{

    color:gray;

}

.profile-item h5{

    margin:0;

    font-weight:600;

}

/* ==========================
PROFILE PAGE
========================== */

.profile-page{

    background:#f7f9fc;
    min-height:100vh;
    background:white;
    min-height:100vh;


}

/* ==========================
BOTTOM NAVIGATION
========================== */

.bottom-nav{

    position:fixed;

    bottom:50px;

    left:50%;

    transform:translateX(-50%);

    width:90%;

    max-width:500px;

    background:white;

    border-radius:25px;

    display:flex;

    justify-content:space-around;

    align-items:center;

    padding:12px 0;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

    z-index:999;

}

.nav-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-decoration:none;

    color:#666;

    font-size:14px;

    transition:.3s;

}

.nav-item i{

    font-size:22px;

    margin-bottom:5px;

}

.nav-item.active{

    color:#0d6efd;

    font-weight:bold;

}

.nav-item:hover{

    color:#0d6efd;

}

.phone-link{
    text-decoration:none;
    color:inherit;
    display:block;
}

.phone-link:hover{
    color:inherit;
}

/* ==========================
PRODUCT DETAIL
========================== */

.product-page{

    min-height:100vh;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #fcfcfd 60%,
        #fff4e8 88%,
        #ffe7c8 100%
    );

}

.product-image{

    width:180px;

    height:auto;

    margin-bottom:20px;

}

.product-name{

    text-align:center;

    font-size:28px;

    font-weight:700;

    margin-bottom:25px;

}

.product-tab{

    background:white;

    border-radius:30px;

    padding:6px;

    box-shadow:0 6px 20px rgba(0,0,0,.08);

}

.product-tab .nav-link{

    border-radius:25px;

    color:#666;

    font-weight:600;

}

.product-tab .nav-link.active{

    background:#0d6efd;

    color:white;

}

.product-content{

    background:white;

    border-radius:25px;

    padding:25px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    height:340px;

    overflow-y:auto;

}

.product-content::-webkit-scrollbar{

    display:none;

}

.product-content{

    scrollbar-width:none;

}

/* ==========================
PRODUCT DETAIL V2
========================== */

.product-wrapper{

    max-width:520px;

    margin:0 auto;

    height:100vh;

    display:flex;

    flex-direction:column;

}

.product-header{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px 18px 10px;

}

.product-header h2{

    font-size:20px;

    font-weight:600;

    margin:0;

}

.back-btn{

    width:38px;

    height:38px;

    border-radius:50%;

    background:white;

    color:#0d6efd;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-size:20px;

    box-shadow:0 5px 12px rgba(0,0,0,.08);

    flex-shrink:0;

}

.back-btn:hover{

    color:#0d6efd;

}

.product-image-area{

    text-align:center;

    margin-top:5px;

}

.product-image{

    width:170px;

    max-width:70%;

    height:auto;

}

.product-name{

    text-align:center;

    font-size:21px;

    font-weight:600;

    margin:12px 0 18px;

    color:#222;

}

.product-tabs{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:50px;

    margin-bottom:12px;

}

.tab-btn{

    background:none;

    border:none;

    

    font-weight:600;

    color:#8a8a8a;

    padding:8px 0;

    width:140px;

    transition:.25s;

}

.tab-btn.active{

    color:#0d6efd;

    border-bottom:3px solid #0d6efd;

}

.variant-box{

    width:fit-content;

    margin:0 auto 16px;

    background:white;

    border-radius:14px;

    padding:8px 16px;

    box-shadow:0 5px 12px rgba(0,0,0,.06);

}

.variant-box p{

    margin:3px 0;

    font-size:12px;

    color:#444;

    line-height:1.5;

}

.variant-box strong{

    font-weight:700;

}

.product-card{

    flex:1;

    margin:0 16px 18px;

    background:white;

    border-radius:24px;

    box-shadow:0 10px 24px rgba(0,0,0,.08);

    padding:22px;

    overflow-y:auto;

    scrollbar-width:none;

    scroll-behavior:smooth;

}

.product-card::-webkit-scrollbar{

    width:0;

    height:0;

}

.section-title{

    font-size:17px;

    font-weight:600;

    color:#222;

    margin-bottom:18px;

    text-align:center;

}

/* ==========================
SPECIFICATION ITEM
========================== */

.spec-item{

    padding:14px 0;

    border-bottom:1px solid #ececec;

}

.spec-item:last-child{

    border-bottom:none;

}

.spec-title{

    font-size:13px;

    font-weight:600;

    color:#222;

    margin-bottom:6px;

}

.spec-value{

    font-size:13px;

    color:#666;

    line-height:1.6;

}

.promo-empty{

    text-align:center;

    color:#999;

    padding:80px 10px;

    font-size:14px;

}