/* =========================================
   PORTAL LAYANAN GTK KABUPATEN KONAWE
   14-responsive.css
   Version 6.0
========================================= */

/* DESKTOP BESAR */
@media (min-width:1600px){
.hero,.topbar,.layanan,.pengumuman,footer{
    max-width:1200px;
}
}

/* LAPTOP */
@media (max-width:1200px){
.hero,.topbar,.layanan,.pengumuman,footer{
    width:95%;
}
.hero{padding:32px;}
}

/* TABLET */
@media (max-width:992px){

.dashboard{
    grid-template-columns:repeat(2,1fr);
}

.topbar{
    flex-direction:column;
    align-items:stretch;
    gap:18px;
}

.topbar-left,
.topbar-center,
.topbar-right{
    width:100%;
    justify-content:center;
}

.hero{
    padding:30px 24px;
}

.hero-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.hero-logo-image{
    max-width:620px;
}

.hero-description{
    font-size:22px;
}

.layanan{
    padding:30px;
}

.layanan-grid{
    grid-template-columns:repeat(2,1fr);
}

.mega-grid{
    grid-template-columns:repeat(2,1fr);
}

footer{
    padding:35px 28px;
}
}

/* MOBILE */
@media (max-width:768px){

.dashboard{
    grid-template-columns:1fr;
    gap:14px;
}

.dashboard-item{
    justify-content:flex-start;
}

.hero{
    padding:24px 18px;
}

.hero-logo-image{
    max-width:100%;
}

.hero-description{
    font-size:18px;
    line-height:1.7;
}

.hero-highlight{
    width:100%;
    font-size:15px;
    text-align:center;
}

.topbar{
    padding:18px;
}

#formNRG{
    flex-direction:column;
}

#nrgSearch,
#formNRG button{
    width:100%;
}

#topbarText{
    white-space:normal;
    text-align:center;
}

.mega-grid{
    grid-template-columns:1fr;
}

.layanan{
    padding:24px 18px;
}

.layanan-grid{
    grid-template-columns:1fr;
}

.pengumuman{
    padding:24px 18px;
}

footer{
    padding:30px 20px;
}

.floating-nav{
    width:96%;
    height:68px;
}

.floating-nav .portal{
    width:64px;
    height:64px;
    margin-top:-24px;
}
}

/* HP KECIL */
@media (max-width:480px){

body{
    font-size:14px;
}

.hero-description{
    font-size:16px;
}

.hero-highlight{
    font-size:14px;
}

.dashboard-item{
    font-size:14px;
}

.layanan h2,
.pengumuman h2,
footer h3{
    font-size:22px;
}

.footer-social a{
    width:42px;
    height:42px;
}
}

/* REDUCE MOTION */
@media (prefers-reduced-motion:reduce){
*{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
}
}