/* ===================================================
   HOME LAYOUT
=================================================== */

.home{

    max-width:500px;

    margin:auto;

    min-height:100vh;

}


/* ===================================================
   HEADER
=================================================== */

.hero{

    background:#ECEFF3;

    padding:40px 25px 70px;

    border-bottom-left-radius:40px;

    border-bottom-right-radius:40px;

    text-align:center;

    box-shadow:0 6px 18px rgba(0,0,0,.06);

}


/* ===================================================
   LOGO EDITI
=================================================== */

.logo-editi{

    display:flex;

    justify-content:center;

    align-items:center;

}

.logo-editi-img{

    height:44px;

    width:auto;

}

.logo-editi-text{

    font-family:'Cormorant Garamond', serif;

    font-size:46px;

    font-weight:600;

    letter-spacing:0.28em;

    padding-left:0.28em;

    color:#1A1A1A;

    background:linear-gradient(120deg, #2B2B2B 0%, #8A7648 55%, #C9A96A 100%);

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;

}

/* ===================================================
   TOMBOL CUSTOMER SERVICE
=================================================== */

.btn-cs{

    width:40px;

    height:40px;

    border-radius:50%;

    border:none;

    background:#FFFFFF;

    color:#1F1F44;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 4px 12px rgba(0,0,0,.1);

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

}

.btn-cs:active{

    background:#F0EFEC;

}

.btn-cs .material-symbols-rounded{

    font-size:22px;

}


/* ===================================================
   TITLE
=================================================== */

.hero p{

    margin-top:2px;

    color:#666;

    font-size:16px;

}


/* ===================================================
   MENU
=================================================== */

.menu{

    margin-top:-35px;

    padding:0 32px 30px;

}


/* ===================================================
   CARD
=================================================== */

.menu-item{

    background:white;

    border-radius:18px;

    padding:14px;

    margin-bottom:10px;

    display:flex;

    align-items:center;

    text-decoration:none;

    color:#222;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

    transition:.25s;

}


.menu-item:hover{

    transform:translateY(-3px);

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

}


/* ===================================================
   ICON
=================================================== */

.menu-icon{

    width:48px;

    height:48px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    margin-right:14px;

}


/* ===================================================
   ICON COLOR
=================================================== */

.blue{

    background:#EAF2FF;

}

.green{

    background:#EAFBF1;

}

.purple{

    background:#F0EAFF;

}

.orange{

    background:#FFF2E5;

}

.teal{

    background:#E6FBF8;

}


/* ===================================================
   TEXT
=================================================== */

.menu-info{

    flex:1;

}


.menu-info h2{

    font-size:16px;

    font-weight:600;

    color:#222;

}


.menu-info span{

    display:block;

    margin-top:2px;

    color:#777;

    font-size:12.5px;

}


/* ===================================================
   PANAH
=================================================== */

.next{

    color:#666;

    font-size:22px;

}


/* ===================================================
   RESPONSIVE
=================================================== */

@media (max-width:480px){

.hero{

padding:35px 20px 60px;

}

.menu{

padding:0 24px 20px;

}

.logo-editi-img{

height:34px;

}

.menu-icon{

width:42px;

height:42px;

font-size:19px;

margin-right:12px;

}

.menu-item{

padding:12px;

margin-bottom:8px;

}

.menu-info h2{

font-size:15px;

}

.menu-info span{

font-size:11.5px;

}

}
/* ==========================================
   MATERIAL SYMBOLS
========================================== */

.material-symbols-rounded{

    font-size:30px;

    line-height:1;

}

.next .material-symbols-rounded{

    font-size:26px;

    color:#666;

}