/* =========================================================
   PTSP MAN ENREKANG
   PREMIUM LANDING UI
   VISUAL ONLY - STRUCTURE UNCHANGED
   ========================================================= */

body{
    font-family:'Poppins',sans-serif;
    background:#f5f7fb;
}

/* =========================================================
   NAVBAR
   ========================================================= */

.navbar{
    position:relative;
    z-index:1000;

    min-height:76px;

    padding:0 !important;

    background:#07111f !important;

    border-bottom:1px solid rgba(255,255,255,.08);

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

.navbar .container{
    min-height:76px;
}

.navbar-brand{
    display:flex !important;
    align-items:center;

    gap:10px;

    font-size:16px !important;
    font-weight:800 !important;

    color:#fff !important;
}

.navbar-brand img{
    width:40px;
    height:40px;

    margin-right:0 !important;

    object-fit:contain;
}

.nav-link{
    color:#cbd5e1 !important;

    font-size:10px;

    font-weight:700;

    margin-left:6px;

    padding:9px 11px !important;

    border-radius:9px;

    transition:.18s;
}

.nav-link:hover{
    color:#fff !important;

    background:rgba(255,255,255,.07);
}

.navbar .btn-warning{
    border:0 !important;

    border-radius:9px !important;

    background:#f59e0b !important;

    color:#172033 !important;

    font-size:9px;

    font-weight:850;

    padding:9px 13px;
}

/* =========================================================
   HERO
   ========================================================= */

.hero{
    position:relative;

    min-height:650px;

    padding:90px 0 !important;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#08121f !important;

    color:#fff;
}

/* FOTO DI KIRI */

.hero::before{
    content:"";

    position:absolute;

    top:0;
    left:0;
    bottom:0;

    width:56%;

    background:
        linear-gradient(
            90deg,
            rgba(8,18,31,.05) 0%,
            rgba(8,18,31,.12) 42%,
            rgba(8,18,31,.85) 100%
        ),
        url("../img/gedung.jpg");

    background-size:cover;

    background-position:center;

    z-index:0;
}

/* OVERLAY KE ARAH PANEL KANAN */

.hero::after{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(8,18,31,.03) 35%,
            rgba(8,18,31,.48) 55%,
            rgba(8,18,31,.94) 76%,
            #08121f 100%
        );

    z-index:1;

    pointer-events:none;
}

.hero .container{
    position:relative;

    z-index:2;
}

.hero .row{
    justify-content:flex-end;
}

/* =========================================================
   PANEL KANAN
   ========================================================= */

.hero .row > .col-md-6{
    width:48%;

    max-width:570px;

    margin-left:auto;

    padding:32px;

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

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.11),
            rgba(255,255,255,.045)
        );

    box-shadow:
        0 28px 70px rgba(0,0,0,.30);

    backdrop-filter:blur(18px);

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

/* LABEL KECIL */

.hero .row > .col-md-6::before{
    content:"LAYANAN DIGITAL PTSP";

    display:block;

    margin-bottom:15px;

    color:#99f6e4;

    font-size:8px;

    font-weight:800;

    letter-spacing:.16em;

    text-transform:uppercase;
}

/* LOGO */

.hero .row > .col-md-6 > img{
    width:auto;

    max-height:72px !important;

    margin-bottom:12px !important;

    object-fit:contain;

    filter:drop-shadow(0 10px 24px rgba(0,0,0,.25));
}

/* SUBLABEL */

.hero h5{
    display:inline-flex;

    margin:0 0 8px !important;

    padding:7px 10px;

    border:1px solid rgba(251,191,36,.20);

    border-radius:999px;

    background:rgba(251,191,36,.10);

    color:#fde68a !important;

    font-size:9px;

    font-weight:800;

    letter-spacing:.06em;
}

/* TITLE */

.hero .hero-title{
    margin:7px 0 10px !important;

    color:#fff;

    font-size:clamp(38px,4.5vw,58px) !important;

    line-height:1.02;

    font-weight:800 !important;

    letter-spacing:-.045em;

    text-shadow:0 14px 30px rgba(0,0,0,.24);
}

/* DESCRIPTION */

.hero .hero-sub{
    max-width:490px;

    margin:0 0 24px !important;

    color:#dbe5ee;

    font-size:12px !important;

    line-height:1.8 !important;
}

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

.hero .btn{
    min-width:140px;

    min-height:44px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:11px !important;

    font-size:10px !important;

    font-weight:850 !important;

    transition:.18s;
}

.hero .btn-success{
    background:
        linear-gradient(
            135deg,
            #14b8a6,
            #0f766e
        ) !important;

    border:1px solid rgba(255,255,255,.08) !important;

    color:#fff !important;

    box-shadow:
        0 12px 28px rgba(20,184,166,.20);
}

.hero .btn-warning{
    margin-left:7px !important;

    background:rgba(255,255,255,.07) !important;

    border:1px solid rgba(255,255,255,.18) !important;

    color:#fff !important;
}

.hero .btn:hover{
    transform:translateY(-2px);
}

/* =========================================================
   STATISTICS
   ========================================================= */

.stat-box{
    border:1px solid #e5ebf1 !important;

    border-radius:16px !important;

    box-shadow:
        0 8px 28px rgba(15,23,42,.055) !important;

    transition:.18s;
}

.stat-box:hover{
    transform:translateY(-3px);

    box-shadow:
        0 16px 34px rgba(15,23,42,.08) !important;
}

.stat-box h2{
    color:#0f766e !important;
}

/* =========================================================
   TABLE / CARD GLOBAL POLISH
   ========================================================= */

.card-ptsp,
.table,
.table-responsive{
    border-radius:16px;
}

.table thead{
    background:#0f766e;
}

.table thead th{
    color:#fff;
}

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

@media(max-width:991px){

    .hero{
        min-height:650px;
    }

    .hero::before{
        width:100%;

        opacity:.35;
    }

    .hero::after{
        background:
            linear-gradient(
                90deg,
                rgba(8,18,31,.62),
                rgba(8,18,31,.94)
            );
    }

    .hero .row{
        justify-content:center;
    }

    .hero .row > .col-md-6{
        width:88%;

        max-width:620px;

        margin:0 auto;
    }
}

@media(max-width:575px){

    .hero{
        min-height:700px;

        padding:70px 0 !important;
    }

    .hero .row > .col-md-6{
        width:94%;

        padding:24px 20px;

        border-radius:20px;
    }

    .hero .hero-title{
        font-size:36px !important;
    }

    .hero .btn{
        width:100%;

        margin-left:0 !important;
    }

    .hero .btn-warning{
        margin-top:8px !important;
    }
}

/* =========================================================
   PREMIUM LOWER SECTIONS
   ========================================================= */

section{
    position:relative;
}

/* Section heading */

section h2.fw-bold{
    color:#172033;
    font-size:28px;
    font-weight:800 !important;
    letter-spacing:-.035em;
}

section h2.fw-bold::after{
    content:"";
    display:block;

    width:42px;
    height:3px;

    margin:11px auto 0;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #14b8a6,
            #0f766e
        );
}

/* =========================================================
   STATISTICS
   ========================================================= */

.hero + section{
    padding-top:0 !important;
    margin-top:-1px;
}

.hero + section .stat-box{
    position:relative;

    background:#fff !important;

    border:1px solid #e7edf3 !important;
    border-radius:18px !important;

    padding:23px 18px !important;

    box-shadow:
        0 10px 30px
        rgba(15,23,42,.055) !important;
}

.hero + section .stat-box h2{
    margin:0;

    font-size:32px !important;
    font-weight:850 !important;

    color:#0f766e !important;
}

/* =========================================================
   TRACKING
   ========================================================= */

#tracking{
    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );

    padding-top:78px !important;
    padding-bottom:78px !important;
}

#tracking .input-group{
    max-width:680px;
    margin:auto;

    padding:6px;

    background:#fff;

    border:1px solid #e5ebf1;

    border-radius:16px;

    box-shadow:
        0 14px 40px
        rgba(15,23,42,.07);
}

#tracking .form-control{
    border:0 !important;
    box-shadow:none !important;

    border-radius:11px !important;

    font-size:11px;
}

#tracking .btn{
    border:0 !important;

    border-radius:11px !important;

    padding:0 22px;

    background:
        linear-gradient(
            135deg,
            #0f766e,
            #14b8a6
        ) !important;

    font-size:10px;
    font-weight:850;
}

/* =========================================================
   DATA TABLE SECTIONS
   ========================================================= */

section.bg-light{
    background:#f5f7fb !important;
}

.table-responsive{
    overflow:hidden;

    background:#fff;

    border:
        1px solid
        #e5ebf1;

    border-radius:18px;

    box-shadow:
        0 12px 35px
        rgba(15,23,42,.055);
}

.table{
    margin-bottom:0;

    font-size:10px;
}

.table thead th{
    padding:13px 15px;

    border:0 !important;

    background:#0f766e !important;

    color:#fff !important;

    font-size:8px;

    font-weight:800;

    letter-spacing:.07em;

    text-transform:uppercase;
}

.table tbody td{
    padding:13px 15px;

    color:#475569;

    border-color:#edf1f5;

    vertical-align:middle;
}

.table-striped > tbody > tr:nth-of-type(odd) > *{
    background:#fbfdff !important;
}

.table tbody tr:hover > *{
    background:#f0fdfa !important;
}

/* =========================================================
   DIGITAL SERVICES
   ========================================================= */

#layanan{
    padding-top:82px !important;
    padding-bottom:82px !important;

    background:#fff;
}

#layanan .card{
    border:
        1px solid
        #e7edf3 !important;

    border-radius:18px !important;

    box-shadow:
        0 10px 30px
        rgba(15,23,42,.055) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

#layanan .card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 18px 38px
        rgba(15,23,42,.09) !important;
}

#layanan .card-body{
    padding:27px !important;
}

#layanan .card h1{
    font-size:31px;
}

#layanan .card h4{
    margin-top:10px;

    color:#172033;

    font-size:14px;
    font-weight:800;
}

#layanan .card p{
    color:#64748b;

    font-size:10px;

    line-height:1.7;
}

#layanan .btn-success{
    min-height:38px;

    padding:0 15px;

    border:0 !important;
    border-radius:9px !important;

    background:
        linear-gradient(
            135deg,
            #0f766e,
            #14b8a6
        ) !important;

    font-size:9px;

    font-weight:850;
}

/* =========================================================
   PROFILE / INFORMATION
   ========================================================= */

section.bg-light .img-fluid{
    border-radius:18px !important;

    box-shadow:
        0 16px 40px
        rgba(15,23,42,.10) !important;
}

section.bg-light h2{
    color:#172033;
}

section.bg-light hr{
    width:42px;

    margin-left:0;

    border:0;

    border-top:3px solid #14b8a6;

    opacity:1;
}

section.bg-light p{
    color:#64748b;

    font-size:10px;

    line-height:1.8;
}

/* =========================================================
   MAKLUMAT
   ========================================================= */

section .card.shadow{
    border:
        1px solid
        #e7edf3 !important;

    border-radius:20px !important;

    box-shadow:
        0 14px 38px
        rgba(15,23,42,.065) !important;
}

section .card.shadow .card-body{
    padding:42px !important;
}

section .card.shadow p.fs-5{
    color:#475569;

    font-size:14px !important;

    line-height:1.9;

    font-style:italic;
}

/* =========================================================
   ZONA INTEGRITAS
   ========================================================= */

section .card.text-center{
    border:
        1px solid
        #e7edf3 !important;

    border-radius:18px !important;

    box-shadow:
        0 10px 30px
        rgba(15,23,42,.05) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

section .card.text-center:hover{
    transform:translateY(-4px);

    box-shadow:
        0 18px 38px
        rgba(15,23,42,.085) !important;
}

section .card.text-center h1{
    margin-bottom:12px;
}

section .card.text-center h4{
    color:#172033;

    font-size:13px;
    font-weight:800;
}

section .card.text-center p{
    color:#64748b;

    font-size:9px;
}

/* =========================================================
   FOOTER — THIN PREMIUM
   ========================================================= */

footer.bg-success{
    padding:18px 0 !important;

    background:
        linear-gradient(
            135deg,
            #0b1f2a,
            #0f2f36
        ) !important;

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

footer.bg-success .container{
    max-width:1100px;
}

footer.bg-success img{
    display:none !important;
}

footer.bg-success h3{
    margin:0 0 4px !important;

    font-size:13px !important;

    font-weight:800 !important;

    letter-spacing:.03em;
}

footer.bg-success p{
    margin:2px 0 !important;

    color:#94a3b8 !important;

    font-size:8px !important;

    line-height:1.4;
}

footer.bg-success p:last-child{
    margin-top:7px !important;

    padding-top:7px;

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

    color:#64748b !important;

    font-size:7px !important;
}

/* =========================================================
   LOWER SECTION RESPONSIVE
   ========================================================= */

@media(max-width:575px){

    section h2.fw-bold{
        font-size:23px;
    }

    #tracking{
        padding-top:55px !important;
        padding-bottom:55px !important;
    }

    #tracking .input-group{
        display:block;

        padding:8px;
    }

    #tracking .form-control{
        min-height:43px;

        margin-bottom:7px;
    }

    #tracking .btn{
        width:100%;

        min-height:42px;
    }

    #layanan{
        padding-top:55px !important;
        padding-bottom:55px !important;
    }

    section .card.shadow .card-body{
        padding:25px !important;
    }

    footer.bg-success{
        padding:15px 0 !important;
    }
}