/* ===========================================
   MOBILE.CSS
   Responsive Smartphone
===========================================*/

/* Safe Area (iPhone & Android Gesture) */

body{

    padding-left:env(safe-area-inset-left);

    padding-right:env(safe-area-inset-right);

    padding-top:env(safe-area-inset-top);

    padding-bottom:env(safe-area-inset-bottom);

}

/* ========================================= */

@media (max-width:600px){

main{

    padding-left:15px;

    padding-right:15px;

}

/* Header */

.topbar{

    height:68px;

    padding:12px;

}

.logo-area span{

    display:none;

}

.logo-area img{

    width:40px;

    height:40px;

}

/* Search */

.search-box{

    height:42px;

}

.search-box input{

    font-size:14px;

}

/* Icon kanan */

.top-icons{

    gap:8px;

}

.top-icons button{

    width:40px;

    height:40px;

}

/* Hero */

.hero{

    margin-top:5px;

}

.hero-logo{

    width:82px;

    height:82px;

}

.hero h1{

    font-size:23px;

}

/* Jam */

#clock{

    font-size:34px;

}

#date{

    font-size:13px;

}

/* Menu */

.menu-grid{

    grid-template-columns:repeat(2,1fr);

    gap:14px;

}

.card{

    padding:18px;

    border-radius:18px;

}

.card i{

    font-size:30px;

}

.card h3{

    font-size:15px;

}

.card p{

    font-size:12px;

}

/* Bottom Navigation */

.bottom-nav{

    height:74px;

}

.bottom-nav a i{

    font-size:21px;

}

.bottom-nav a span{

    font-size:11px;

}

}

/* ========================================= */

@media (max-width:390px){

.menu-grid{

    gap:12px;

}

.card{

    padding:16px;

}

.card h3{

    font-size:14px;

}

.card p{

    display:none;

}

.hero-logo{

    width:75px;

    height:75px;

}

.hero h1{

    font-size:21px;

}

#clock{

    font-size:30px;

}

}

/* ========================================= */

@media (min-width:601px){

.menu-grid{

    grid-template-columns:repeat(3,1fr);

}

}

/* ========================================= */

@media (min-width:900px){

main{

    max-width:900px;

}

.topbar{

    max-width:900px;

}

.bottom-nav{

    max-width:900px;

}

.menu-grid{

    grid-template-columns:repeat(4,1fr);

}

}

/* ========================================= */

/* Touch Effect */

.card:active{

    transform:scale(.96);

}

.top-icons button:active{

    transform:scale(.90);

}

.bottom-nav a:active{

    transform:scale(.92);

}

/* ========================================= */

/* Ripple Animation */

.card{

    position:relative;

    overflow:hidden;

}

.card::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:0;

    height:0;

    border-radius:50%;

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

    transform:translate(-50%,-50%);

    transition:.45s;

}

.card:active::after{

    width:250px;

    height:250px;

}

/* ========================================= */

/* Floating Animation */

.hero-logo{

    animation:float 5s ease-in-out infinite;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

/* ========================================= */

/* Fade Animation */

.card{

    opacity:0;

    animation:fadeUp .6s forwards;

}

.card:nth-child(1){animation-delay:.05s;}
.card:nth-child(2){animation-delay:.10s;}
.card:nth-child(3){animation-delay:.15s;}
.card:nth-child(4){animation-delay:.20s;}
.card:nth-child(5){animation-delay:.25s;}
.card:nth-child(6){animation-delay:.30s;}
.card:nth-child(7){animation-delay:.35s;}
.card:nth-child(8){animation-delay:.40s;}
.card:nth-child(9){animation-delay:.45s;}
.card:nth-child(10){animation-delay:.50s;}
.card:nth-child(11){animation-delay:.55s;}
.card:nth-child(12){animation-delay:.60s;}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ========================================= */

/* Smooth Hover */

.card,
button,
.bottom-nav a{

transition:

transform .25s,

box-shadow .25s,

background .25s,

color .25s;

}

/* ========================================= */

/* Glass Effect */

.card{

backdrop-filter:blur(18px);

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

}

/* ========================================= */

/* Prevent Zoom iOS */

input,
button{

font-size:16px;

}

/* ========================================= */

/* Better Tap Area */

.bottom-nav a{

min-width:60px;

min-height:60px;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

}