/* =====================================================
   PKW Portal v1.0
   UPTD SPNF SKB Ungaran
   Master Stylesheet
===================================================== */

/* ===========================
   Root
=========================== */

:root{
    --primary:#20B2AA;
    --primary-dark:#138D88;
    --primary-light:#DDF7F5;
    --secondary:#FFC857;
    --text:#2F4858;
    --background:#f5f7fb;
    --radius:16px;
    --shadow:0 6px 18px rgba(0,0,0,.08);

}


/* ===========================
   Body
=========================== */

body{

    background:var(--background);
    font-family:"Segoe UI",Tahoma,sans-serif;
    font-size:16px;
    color:#333;

}

.icon-preview{

    width:56px;
    height:56px;

    object-fit:contain;

    transition:.25s;

}
.icon-preview-large{

    width:72px;
    height:72px;

    object-fit:contain;

}
.icon-select:hover .icon-preview{

    transform:scale(1.1);

}
.icon-select{

    height:95px;

    border-radius:15px;

    display:flex;
    justify-content:center;
    align-items:center;

    transition:.25s;

}
/* ===========================
   Navbar
=========================== */

.navbar{

    box-shadow:var(--shadow);

}

.navbar-brand{

    font-size:1.2rem;
    font-weight:600;

}
.navbar-skb{

background:#138D88;

}


/* ===========================
   Logo
=========================== */

.logo{

    width:160px;
    height:auto;
    display:block;
    margin:0 auto 20px auto;

}

.logo-navbar{

    width:42px;
    height:42px;
    object-fit:contain;
    background:#ffffff;
    border-radius:50%;
    padding:3px;

}


/* ===========================
   Card
=========================== */

.card{

    border:none;
    border-radius:var(--radius);
    box-shadow:var(--shadow);

}

.card-body{

    padding:1.5rem;

}

.menu-card{

    transition:.25s;

}

.menu-card:hover{

    transform:translateY(-3px);

}
.menu-icon-img{
    width:64px;
    height:64px;
    object-fit:contain;
    transition:.3s;
}

.menu-card:hover .menu-icon-img{
    transform:scale(1.08);
}

/* ===========================
   Alert
=========================== */

.alert{

    border-radius:var(--radius);

}


/* ===========================
   Form
=========================== */

.form-label{

    font-weight:600;

}

.form-control{

    border-radius:10px;
    padding:.75rem;
    font-size:1rem;

}


/* ===========================
   Button
=========================== */

.btn{

    border-radius:10px;
    font-size:1rem;

}


/* ===========================
   Typography
=========================== */

.page-title{

    font-size:2rem;
    font-weight:700;

}

.page-subtitle{

    color:#666;

}


/* ===========================
   List Group
=========================== */

.list-group{

    border-radius:16px;
    overflow:hidden;

}

.list-group-item{

    font-size:1.05rem;
    padding:18px 20px;

}

.list-group-item i{

    font-size:1.2rem;

}


/* ===========================
   Login Page
=========================== */

.login-box{

    max-width:420px;
    margin:auto;
    margin-top:8vh;

}


/* ===========================
   Responsive
=========================== */

@media (max-width:576px){

    body{

        font-size:17px;

    }

    .login-box{

        margin-top:30px;
        padding:10px;

    }

    .navbar-brand{

        font-size:1.3rem;

    }

    .page-title{

        font-size:2rem;

    }

    h3{

        font-size:1.8rem;

    }

    h4{

        font-size:1.6rem;

    }

    h5{

        font-size:1.3rem;

    }

    p{

        font-size:1.05rem;

    }

    .form-label{

        font-size:1rem;

    }

    .form-control{

        font-size:1.05rem;
        padding:.85rem;

    }

    .btn{

        font-size:1.05rem;
        padding:.85rem;

    }

    .logo{

        width:140px;

    }

    .logo-navbar{

        width:38px;
        height:38px;

    }

}
/* =====================================================
   HERO PREMIUM
===================================================== */

.hero{

    position:relative;
    overflow:hidden;

    min-height:540px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    background:
    url("../img/hero/banner-pkw.jpg")
    center center/cover no-repeat;

}

.hero-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        rgba(255,255,255,.72),
        rgba(255,255,255,.82)
    );

    z-index:1;

}

.hero-content{

    position:relative;
    z-index:5;

    max-width:850px;

}

.hero-logo{

    width:150px;

    background:#fff;

    border-radius:50%;

    padding:12px;

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

    margin-bottom:25px;

    transition:.35s;

}

.hero-logo:hover{

    transform:
    translateY(-6px)
    scale(1.03);

}

.hero-title{

    font-size:3.1rem;

    font-weight:800;

    color:#0f766e;

    margin-bottom:8px;

}

.hero-subtitle{

    font-size:1.35rem;

    color:#256d68;

    margin-bottom:20px;

    font-weight:500;

}

.hero-banner{

    font-size:1.08rem;

    line-height:1.9;

    color:#415b59;

    max-width:760px;

    margin:auto;

}

.hero-decor{

    position:absolute;

    z-index:2;

    pointer-events:none;

    opacity:.90;

    transition:.4s;

}

.hero-left{

    width:260px;

    left:-70px;

    top:40px;

    transform:rotate(-15deg);

}

.hero-right{

    width:260px;

    right:-70px;

    bottom:60px;

    transform:rotate(18deg);

}

.hero:hover .hero-left{

    transform:
    rotate(-8deg)
    translateY(-8px);

}

.hero:hover .hero-right{

    transform:
    rotate(12deg)
    translateY(-8px);

}

.hero-wave{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    line-height:0;

    z-index:4;

}

.hero-wave svg{

    display:block;

    width:100%;

    height:95px;

}

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

@media (max-width:992px){

.hero{

min-height:500px;

}

.hero-title{

font-size:2.6rem;

}

.hero-logo{

width:130px;

}

.hero-left,
.hero-right{

width:200px;

}

}

@media (max-width:768px){

.hero{

min-height:460px;

padding:80px 20px;

}

.hero-title{

font-size:2rem;

}

.hero-subtitle{

font-size:1.15rem;

}

.hero-banner{

font-size:.98rem;

}

.hero-logo{

width:110px;

padding:10px;

}

.hero-left{

width:130px;

left:-45px;

top:20px;

}

.hero-right{

width:130px;

right:-45px;

bottom:50px;

}

.hero-wave svg{

height:70px;

}

}

@media (max-width:576px){

.hero{

min-height:420px;

}

.hero-left,
.hero-right{

opacity:.30;

}

.hero-title{

font-size:1.7rem;

}

.hero-subtitle{

font-size:1rem;

}

.hero-banner{

font-size:.92rem;

line-height:1.7;

}

}
/* ==========================================
   MENU PREMIUM
========================================== */

.menu-section{

    padding:70px 0 90px;

    background:
    linear-gradient(
        90deg,
        #99ffd6 0%,
        #edfdfb 40%,
        #ffffff 100%
    );

}

.menu-card{

display:block;

position:relative;

background:#fff;

border-radius:22px;

padding:35px 28px;

text-decoration:none;

color:#333;

overflow:hidden;

height:100%;

transition:.35s;

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

}

.menu-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 45px rgba(0,0,0,.15);

color:#333;

}

.menu-top{

position:absolute;

left:0;

top:0;

height:6px;

width:100%;

}

.menu-icon{

width:72px;

height:72px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:32px;

color:white;

margin-bottom:25px;

transition:.35s;

}

.menu-card:hover .menu-icon{

transform:scale(1.12) rotate(-8deg);

}

.menu-card h4{

font-weight:700;

margin-bottom:12px;

color:#15374f;

}

.menu-card p{

color:#6c757d;

line-height:1.7;

min-height:60px;

}

.menu-open{

margin-top:25px;

font-weight:600;

color:#20B2AA;

}

.menu-open i{

transition:.3s;

}

.menu-card:hover .menu-open i{

margin-left:8px;

}

@media(max-width:768px){

.menu-card{

padding:28px;

}

}

/* ======================================================
   FOOTER
====================================================== */

.site-footer{

    position:relative;

    margin-top:10px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

    overflow:hidden;

}

.footer-wave{

    line-height:0;

}

.footer-wave svg{

    display:block;

    width:100%;

    height:70px;

}

.footer-content{

    max-width:800px;

    margin:auto;

    padding:40px 20px 50px;

    text-align:center;

}

.footer-logos{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:28px;

    margin-bottom:24px;

}

.footer-logo{

    width:78px;

    height:78px;

    object-fit:contain;

    transition:.3s;

}

.footer-logo:hover{

    transform:translateY(-4px);

}

.site-footer h3{

    margin:0;

    font-size:2rem;

    font-weight:700;

    color:#fff;

}

.footer-subtitle{

    margin:18px 0 8px;

    font-size:1.05rem;

    line-height:1.8;

    color:rgba(255,255,255,.95);

}

.footer-org{

    margin-bottom:30px;

    font-size:1rem;

    font-weight:600;

    color:#DDF7F5;

}

.footer-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:35px;

}

.footer-links a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

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

    color:#fff;

    text-decoration:none;

    transition:.25s;

}

.footer-links a:hover{

    background:#fff;

    color:var(--primary-dark);

    transform:translateY(-2px);

}

.footer-copy{

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.18);

    font-size:.92rem;

    color:rgba(255,255,255,.9);

}

.footer-copy span{

    display:block;

    margin-top:8px;

    font-size:.85rem;

    opacity:.8;

}

/* ===== Mobile ===== */

@media(max-width:768px){

    .footer-logo{

        width:64px;

        height:64px;

    }

    .site-footer h3{

        font-size:1.6rem;

    }

    .footer-subtitle{

        font-size:.95rem;

    }

    .footer-links{

        flex-direction:column;

        align-items:center;

    }

}