/*=====================================================
    PTSP CSS UNIVERSAL
    MTsN 2 Aceh Besar
======================================================*/

/*=====================================================
    ROOT COLOR
======================================================*/

:root{

    --primary:#1565c0;
    --primary-dark:#0d47a1;
    --primary-light:#42a5f5;

    --success:#28a745;
    --warning:#ffc107;
    --danger:#dc3545;
    --secondary:#6c757d;
    --info:#17a2b8;

    --white:#ffffff;

    --body:#f3f6fb;

    --border:#e5e7eb;

    --text:#333;

    --shadow:
        0 3px 12px rgba(0,0,0,.10);

    --radius:10px;

}


/*=====================================================
    RESET
======================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--body);

    color:var(--text);

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:14px;

    line-height:1.6;

}


/*=====================================================
    CONTAINER
======================================================*/

.container{

    width:96%;

    max-width:1500px;

    margin:20px auto;

}


/*=====================================================
    MAIN CONTENT
======================================================*/

.main-content{

    display:grid;

    grid-template-columns:

        3fr

        1fr;

    gap:20px;

    align-items:start;

}

.left-panel{

    width:100%;

}

.right-panel{

    width:100%;

}


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

.page-title{

    font-size:28px;

    font-weight:bold;

    color:var(--primary);

    margin-bottom:20px;

}


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

.header{

    background:

        linear-gradient(

            135deg,

            #00c853,

            #1976d2,

            #0d47a1

        );

    

    border-radius:12px;

    overflow:hidden;

    box-shadow:var(--shadow);

    margin-bottom:25px;

}

.header-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px;

}

.header-logo{

    width:100px;
    margin-left:50px;

}

.header-logo img{

    width:100%;
    
    margin-left:50px;

}

.header-center{

    flex:1;

    text-align:center;

    padding:0 20px;

}

.header-center h1{

    font-size:42px;

    letter-spacing:1px;

    margin-bottom:5px;
    
    color:#ffeb3b;

}

.header-center h2{

    font-size:32px;

    font-weight:normal;

    margin-bottom:10px;
    
    color:#fff;
}

.header-center p{

    font-size:14px;

    opacity:.95;

}

.header-photo{

    width:200px;

    text-align:center;

}

.header-photo img{

    width:95px;

    height:95px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #fff;

    box-shadow:

        0 3px 12px rgba(0,0,0,.25);

}

.header-photo small{

    display:block;

    margin-top:8px;

}

.header-bottom{

    background:

        rgba(255,255,255,.15);

    text-align:center;

    padding:12px;

    font-size:15px;

}

.header-bottom strong{

    color:#ffeb3b;

}


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

.card{

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    overflow:hidden;

    margin-bottom:20px;

}

.card-header{

    background:var(--primary);

    color:#fff;

    padding:14px 20px;

}

.card-header h3{

    font-size:18px;

    font-weight:600;

}

.card-body{

    padding:20px;

}

.card-footer{

    background:#fafafa;

    border-top:1px solid var(--border);

    padding:15px 20px;

    text-align:right;

}


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

.side-card{

    background:#fff;

    border-radius:10px;

    box-shadow:var(--shadow);

    overflow:hidden;

    margin-bottom:18px;

}

.side-title{

    background:var(--primary);

    color:#fff;

    padding:12px 15px;

    font-size:15px;

    font-weight:bold;

}

.side-body{

    padding:15px;

}

/*=====================================================
    BUTTON
======================================================*/

.btn{

    display:inline-block;

    padding:10px 18px;

    border:none;

    border-radius:6px;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    transition:.25s;

}

.btn:hover{

    opacity:.92;

    transform:translateY(-1px);

}

.btn-sm{

    padding:7px 12px;

    font-size:13px;

}

.btn-lg{

    padding:12px 22px;

    font-size:15px;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-success{

    background:var(--success);

    color:#fff;

}

.btn-warning{

    background:var(--warning);

    color:#000;

}

.btn-danger{

    background:var(--danger);

    color:#fff;

}

.btn-secondary{

    background:var(--secondary);

    color:#fff;

}


/*=====================================================
    FORM
======================================================*/

.form-group{

    margin-bottom:16px;

}

.form-group label{

    display:block;

    margin-bottom:6px;

    font-weight:600;

}

.required{

    color:red;

}

.form-control{

    width:100%;

    padding:10px 12px;

    border:1px solid #ced4da;

    border-radius:6px;

    font-size:14px;

    background:#fff;

    transition:.2s;

}

.form-control:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(21,101,192,.12);

}

textarea.form-control{

    resize:vertical;

    min-height:90px;

}

.form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

}

.filter-grid{

    display:grid;

    grid-template-columns:

        1fr

        1fr

        2fr

        auto;

    gap:15px;

    align-items:end;

}


/*=====================================================
    TABLE
======================================================*/

.table{

    width:100%;

    border-collapse:collapse;

}

.table th{

    background:var(--primary);

    color:#fff;

    padding:12px;

    text-align:center;

    font-size:14px;

}

.table td{

    border-bottom:1px solid #ececec;

    padding:11px;

    vertical-align:middle;

}

.table tbody tr:hover{

    background:#f5f9ff;

}

.table-body{

    overflow:auto;

}


/*=====================================================
    BADGE
======================================================*/

.badge{

    display:inline-block;

    padding:5px 12px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

}

.badge-primary{

    background:#1976d2;

    color:#000;

}

.badge-warning{

    background:#ffb300;

    color:#000;

}

.badge-success{

    background:#28a745;

    color:#000;

}

.badge-danger{

    background:#dc3545;

    color:#000;

}

.badge-secondary{

    background:#6c757d;

    color:#000;

}


/*=====================================================
    ALERT
======================================================*/

.alert{

    padding:14px 18px;

    border-radius:8px;

    margin-bottom:20px;

}

.alert-success{

    background:#d4edda;

    color:#155724;

}

.alert-danger{

    background:#f8d7da;

    color:#721c24;

}

.alert-warning{

    background:#fff3cd;

    color:#856404;

}


/*=====================================================
    MODAL UNIVERSAL
======================================================*/

.modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    z-index:99999;

    justify-content:center;

    align-items:center;

    padding:20px;

}

.modal.show{

    display:flex;

}

.modal-dialog{

    width:100%;

    max-width:950px;

}

.modal-content{

    background:#fff;

    border-radius:12px;

    overflow:hidden;

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

    animation:popup .25s ease;

}

.modal-header{

    background:var(--primary);

    color:#fff;

    padding:15px 20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.modal-header h2{

    font-size:20px;

    margin:0;

}

.closeModal{

    font-size:30px;

    cursor:pointer;

    font-weight:bold;

}

.closeModal:hover{

    color:#ffd54f;

}

.modal-body{

    padding:20px;

}

.modal-footer{

    background:#fafafa;

    border-top:1px solid #eee;

    padding:15px 20px;

    text-align:right;

}

.modal-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

}


/*=====================================================
    ANIMATION
======================================================*/

@keyframes popup{

    from{

        opacity:0;

        transform:translateY(-25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.user-box{

    text-align:center;

}

.user-box img{

    width:95px;

    height:95px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid var(--primary);

    margin-bottom:12px;

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

}

.user-box h3{

    font-size:18px;

    margin-bottom:5px;

    color:#333;

}

.user-box p{

    color:#777;

    font-size:13px;

}

.user-role{

    display:inline-block;

    margin-top:8px;

    background:var(--primary);

    color:#fff;

    padding:4px 12px;

    border-radius:20px;

    font-size:12px;

}


/*=====================================================
    SIDE INFORMATION
======================================================*/

.side-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

    border-bottom:1px solid #ececec;

}

.side-item:last-child{

    border-bottom:none;

}

.side-item span{

    color:#555;

}

.side-item strong{

    color:#222;

}


/*=====================================================
    INFO LIST
======================================================*/

.info-list{

    line-height:28px;

}

.info-list span{

    display:block;

    padding-left:10px;

    position:relative;

}

.info-list span::before{

    content:"•";

    color:var(--primary);

    position:absolute;

    left:0;

}


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

.dashboard-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:20px;

}

.dashboard-card{

    background:#fff;

    border-radius:10px;

    padding:20px;

    box-shadow:var(--shadow);

    display:flex;

    justify-content:space-between;

    align-items:center;

    transition:.25s;

}

.dashboard-card:hover{

    transform:translateY(-3px);

}

.dashboard-icon{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:26px;

    color:#fff;

}

.dashboard-info{

    text-align:right;

}

.dashboard-title{

    color:#666;

    font-size:14px;

}

.dashboard-value{

    font-size:30px;

    font-weight:bold;

    color:#222;

}


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

.bg-primary{

    background:var(--primary);

}

.bg-success{

    background:var(--success);

}

.bg-warning{

    background:var(--warning);

    color:#000;

}

.bg-danger{

    background:var(--danger);

}




/*=====================================================
    TIMELINE
======================================================*/

.timeline{

    position:relative;

    margin-left:15px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:8px;

    top:0;

    bottom:0;

    width:3px;

    background:#ddd;

}

.timeline-item{

    position:relative;

    margin-bottom:20px;

    padding-left:30px;

}

.timeline-item::before{

    content:"";

    position:absolute;

    width:14px;

    height:14px;

    border-radius:50%;

    background:var(--primary);

    left:2px;

    top:4px;

}

.timeline-title{

    font-weight:bold;

    color:#222;

}

.timeline-time{

    font-size:12px;

    color:#888;

    margin-bottom:5px;

}

.timeline-content{

    color:#555;

}


/*=====================================================
    STATISTIC LIST
======================================================*/

.stat-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.stat-box{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 15px;

    border-radius:8px;

    background:#fafafa;

    border-left:5px solid var(--primary);

}

.stat-box.success{

    border-left-color:var(--success);

}

.stat-box.warning{

    border-left-color:#ff9800;

}

.stat-box.danger{

    border-left-color:var(--danger);

}

.stat-number{

    font-size:26px;

    font-weight:bold;

}

.stat-text{

    color:#666;

}


/*=====================================================
    SEARCH BOX
======================================================*/

.search-box{

    position:relative;

}

.search-box input{

    padding-left:40px;

}

.search-box i{

    position:absolute;

    left:15px;

    top:12px;

    color:#888;

}


/*=====================================================
    EMPTY DATA
======================================================*/

.empty-data{

    padding:40px;

    text-align:center;

    color:#999;

    font-size:15px;

}

.empty-data i{

    font-size:50px;

    margin-bottom:15px;

    display:block;

}


/*=====================================================
    LOADING
======================================================*/

.loading{

    text-align:center;

    padding:30px;

    color:#666;

}

.loading::after{

    content:"";

    display:block;

    width:35px;

    height:35px;

    margin:15px auto;

    border-radius:50%;

    border:4px solid #ddd;

    border-top:4px solid var(--primary);

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/*=====================================================
    PAGINATION
======================================================*/

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin:25px 0;

    flex-wrap:wrap;

}

.pagination a,
.pagination span{

    min-width:38px;

    height:38px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:6px;

    text-decoration:none;

    border:1px solid #ddd;

    background:#fff;

    color:#333;

    transition:.25s;

}

.pagination a:hover{

    background:var(--primary);

    color:#fff;

}

.pagination .active{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}


/*=====================================================
    DROPDOWN
======================================================*/

.dropdown{

    position:relative;

    display:inline-block;

}

.dropdown-menu{

    display:none;

    position:absolute;

    top:100%;

    left:0;

    min-width:220px;

    background:#fff;

    border-radius:8px;

    box-shadow:var(--shadow);

    z-index:999;

    overflow:hidden;

}

.dropdown:hover .dropdown-menu{

    display:block;

}

.dropdown-menu a{

    display:block;

    padding:12px 15px;

    color:#333;

    text-decoration:none;

}

.dropdown-menu a:hover{

    background:#f3f6fb;

}


/*=====================================================
    TOOLTIP
======================================================*/

.tooltip{

    position:relative;

    cursor:pointer;

}

.tooltip::after{

    content:attr(data-title);

    position:absolute;

    left:50%;

    bottom:120%;

    transform:translateX(-50%);

    background:#222;

    color:#fff;

    padding:6px 10px;

    border-radius:6px;

    white-space:nowrap;

    opacity:0;

    visibility:hidden;

    transition:.2s;

    font-size:12px;

}

.tooltip:hover::after{

    opacity:1;

    visibility:visible;

}


/*=====================================================
    IMAGE
======================================================*/

.img-fluid{

    max-width:100%;

    height:auto;

}

.img-circle{

    border-radius:50%;

}

.img-thumbnail{

    border:1px solid #ddd;

    padding:3px;

    border-radius:8px;

}


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

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.text-left{

    text-align:left;

}

.text-primary{

    color:var(--primary);

}

.text-success{

    color:var(--success);

}

.text-danger{

    color:var(--danger);

}

.text-warning{

    color:#ff9800;

}

.text-muted{

    color:#888;

}

.fw-bold{

    font-weight:bold;

}


/*=====================================================
    SPACING
======================================================*/

.mt-1{margin-top:5px;}
.mt-2{margin-top:10px;}
.mt-3{margin-top:15px;}
.mt-4{margin-top:20px;}
.mt-5{margin-top:30px;}

.mb-1{margin-bottom:5px;}
.mb-2{margin-bottom:10px;}
.mb-3{margin-bottom:15px;}
.mb-4{margin-bottom:20px;}
.mb-5{margin-bottom:30px;}

.ms-1{margin-left:5px;}
.ms-2{margin-left:10px;}
.ms-3{margin-left:15px;}

.me-1{margin-right:5px;}
.me-2{margin-right:10px;}
.me-3{margin-right:15px;}

.p-1{padding:5px;}
.p-2{padding:10px;}
.p-3{padding:15px;}
.p-4{padding:20px;}
.p-5{padding:30px;}


/*=====================================================
    FLEX
======================================================*/

.d-flex{

    display:flex;

}

.flex-column{

    flex-direction:column;

}

.justify-between{

    justify-content:space-between;

}

.justify-center{

    justify-content:center;

}

.align-center{

    align-items:center;

}

.flex-wrap{

    flex-wrap:wrap;

}

.gap-1{

    gap:5px;

}

.gap-2{

    gap:10px;

}

.gap-3{

    gap:15px;

}

.gap-4{

    gap:20px;

}


/*=====================================================
    SHADOW
======================================================*/

.shadow{

    box-shadow:var(--shadow);

}

.shadow-sm{

    box-shadow:0 2px 5px rgba(0,0,0,.08);

}

.shadow-lg{

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

}


/*=====================================================
    PRINT
======================================================*/

@media print{

body{

    background:#fff;

}

.header,
.sidebar,
.btn,
.no-print{

    display:none !important;

}

.container{

    width:100%;

    margin:0;

}

.card{

    box-shadow:none;

    border:1px solid #ddd;

}

}


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

@media(max-width:1200px){

.main-content{

    grid-template-columns:2fr 1fr;

}

.dashboard-grid{

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

}

}


@media(max-width:900px){

.main-content{

    grid-template-columns:1fr;

}

.right-panel{

    order:-1;

}

.form-grid{

    grid-template-columns:1fr;

}

.modal-grid{

    grid-template-columns:1fr;

}

.filter-grid{

    grid-template-columns:1fr;

}

.dashboard-grid{

    grid-template-columns:1fr 1fr;

}

.header-top{

    flex-direction:column;

    text-align:center;

}

.header-logo,
.header-photo{

    margin-bottom:15px;

}

.header-center{

    padding:0;

}

.header-center h1{

    font-size:24px;

}

.header-center h2{

    font-size:18px;

}

}


@media(max-width:600px){

.container{

    width:98%;

}

.dashboard-grid{

    grid-template-columns:1fr;

}

.card-body{

    padding:15px;

}

.card-header{

    padding:12px 15px;

}

.card-footer{

    text-align:center;

}

.btn{

    width:100%;

    margin-top:8px;

}

.table{

    font-size:13px;

}

.modal-dialog{

    width:100%;

}

.user-box img{

    width:75px;

    height:75px;

}

.header-photo img{

    width:80px;

    height:80px;

}

}


.loading-overlay{

    display:none;

    position:fixed;

    inset:0;

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

    z-index:999999;

    justify-content:center;

    align-items:center;

}

.loading-box{

    background:white;

    padding:25px 35px;

    border-radius:10px;

    text-align:center;

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

}

.spinner{

    width:45px;

    height:45px;

    margin:auto;

    border:4px solid #ddd;

    border-top:4px solid #1565c0;

    border-radius:50%;

    animation:spin .8s linear infinite;

}

.spinner + p{

    margin-top:15px;

    font-weight:bold;

}

/*=====================================================
    TOAST
======================================================*/

.toast{

    position:fixed;

    right:20px;

    top:20px;

    padding:14px 18px;

    color:#fff;

    border-radius:8px;

    box-shadow:0 4px 15px rgba(0,0,0,.2);

    opacity:0;

    transform:translateY(-20px);

    transition:.3s;

    z-index:999999;

}

.toast.show{

    opacity:1;

    transform:translateY(0);

}

.toast-success{

    background:#28a745;

}

.toast-danger{

    background:#dc3545;

}

.toast-warning{

    background:#ff9800;

    color:#000;

}


/*=====================================================
    INPUT ERROR
======================================================*/

.input-error{

    border:2px solid #dc3545 !important;

}


/*=====================================================
    SCROLL TO TOP
======================================================*/

#scrollTop{

    position:fixed;

    right:20px;

    bottom:20px;

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    background:#1565c0;

    color:#fff;

    cursor:pointer;

    display:none;

    z-index:99999;

    font-size:18px;

}

/*=========================================================
    DASHBOARD
=========================================================*/


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

.page-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

padding-bottom:15px;

border-bottom:1px solid #e5e7eb;

}

.page-header h2{

font-size:28px;

font-weight:700;

color:#1f2937;

margin:0;

}

.page-header p{

margin-top:6px;

color:#6b7280;

}


/*=========================================================
    CLOCK
=========================================================*/

#clockArea{

text-align:right;

}

#jamDigital{

font-size:30px;

font-weight:bold;

margin:0;

color:#2563eb;

}

#tanggalDigital{

font-size:14px;

color:#666;

margin-top:5px;

}


/*=========================================================
    GRID
=========================================================*/

.grid-5{

display:grid;

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

gap:20px;

margin-bottom:25px;

}

.grid-3{

display:grid;

grid-template-columns:2fr 1fr;

gap:20px;

}

.col-span-2{

display:flex;

flex-direction:column;

gap:20px;

}


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

.stat-card{

display:flex;

align-items:center;

gap:18px;

padding:22px;

transition:.25s;

cursor:pointer;

}

.stat-card:hover{

transform:translateY(-5px);

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

}

.stat-card h2{

font-size:34px;

margin:0;

font-weight:700;

}

.stat-card span{

color:#6b7280;

font-size:14px;

}


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

.stat-icon{

width:70px;

height:70px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:#fff;

flex-shrink:0;

}


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

.quick-menu{

display:grid;

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

gap:15px;
}

.quick-item{

text-decoration:none;

background:#fff;

border:1px solid #ececec;

border-radius:14px;

padding:20px;

display:flex;

flex-direction:column;

align-items:center;

transition:.25s;

color:#333;

}




.quick-menu a{

    display:block;

    text-align:center;

    padding:18px;

    border-radius:10px;

    background:#fff;

    box-shadow:var(--shadow);

    text-decoration:none;

    color:#333;

    transition:.25s;

}

.quick-menu a:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-3px);

}

.quick-menu i{

    font-size:28px;

    margin-bottom:10px;

    display:block;

}


.quick-item:hover{

transform:translateY(-5px);

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

}

.quick-icon{

width:70px;

height:70px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:#fff;

margin-bottom:15px;

}

.quick-item span{

font-weight:600;

text-align:center;

}


/*=========================================================
    AVATAR
=========================================================*/

.avatar-lg{

width:120px;

height:120px;

border-radius:50%;

object-fit:cover;

border:4px solid #fff;

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

}


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

.card{

transition:.25s;

}

.card:hover{

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

}


/*=========================================================
    INFO
=========================================================*/

.info-list{

display:flex;

flex-direction:column;

gap:15px;

}

.info-item{

display:flex;

align-items:flex-start;

gap:10px;

line-height:1.6;

font-size:14px;

}

.info-item i{

margin-top:3px;

color:#2563eb;

}


/*=========================================================
    CHART
=========================================================*/

canvas{

max-width:100%;

}


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

.bg-primary{

background:#2563eb;

}

.bg-success{

background:#16a34a;

}

.bg-warning{

background:#f59e0b;

}

.bg-danger{

background:#dc2626;

}

.bg-info{

background:#0891b2;

}


/*=========================================================
    TABLE
=========================================================*/

.table tbody tr{

transition:.2s;

}

.table tbody tr:hover{

background:#f8fafc;

}


/*=========================================================
    BADGE
=========================================================*/

.badge{

display:inline-block;

padding:5px 10px;

border-radius:20px;

font-size:12px;

font-weight:600;

color:#fff;

}

.badge-primary{

background:#2563eb;

}

.badge-success{

background:#16a34a;

}

.badge-warning{

background:#f59e0b;

}

.badge-danger{

background:#dc2626;

}

.badge-secondary{

background:#64748b;

}


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

@media(max-width:1200px){

.grid-5{

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

}

.grid-3{

grid-template-columns:1fr;

}

}


@media(max-width:768px){

.grid-5{

grid-template-columns:1fr;

}

.page-header{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

#clockArea{

text-align:left;

}

.quick-menu{

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

}

}


@media(max-width:576px){

.quick-menu{

grid-template-columns:1fr;

}

.stat-card{

padding:16px;

}

.stat-card h2{

font-size:26px;

}

.stat-icon{

width:55px;

height:55px;

font-size:22px;

}

.avatar-lg{

width:90px;

height:90px;

}

}


/*=====================================================
    INDEX / LANDING PAGE PTSP
======================================================*/

.hero{

    background:
        linear-gradient(135deg,#1565c0,#0d47a1);

    color:#fff;

    border-radius:12px;

    padding:40px;

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:30px;

    align-items:center;

    margin-bottom:25px;

    box-shadow:var(--shadow);

}

.hero h1{

    font-size:38px;

    margin-bottom:15px;

    line-height:1.3;

}

.hero p{

    font-size:16px;

    opacity:.95;

    margin-bottom:25px;

}

.hero img{

    width:100%;

    max-width:260px;

    margin:auto;

    display:block;

}

.hero-action{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}


/*=====================================================
    LAYANAN GRID
======================================================*/

.service-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

    gap:20px;

}

.service-card{

    background:#fff;

    border-radius:10px;

    padding:25px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.3s;

}

.service-card:hover{

    transform:translateY(-5px);

}

.service-card i{

    width:70px;

    height:70px;

    line-height:70px;

    border-radius:50%;

    font-size:28px;

    color:#fff;

    background:var(--primary);

    margin-bottom:18px;

}

.service-card h3{

    margin-bottom:10px;

    color:#222;

}

.service-card p{

    color:#666;

    font-size:14px;

}


/*=====================================================
    ALUR PELAYANAN
======================================================*/

.flow-grid{

    display:grid;

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

    gap:20px;

}

.flow-card{

    background:#fff;

    border-radius:10px;

    padding:25px;

    text-align:center;

    box-shadow:var(--shadow);

    position:relative;

}

.flow-number{

    width:45px;

    height:45px;

    line-height:45px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:18px;

    font-weight:bold;

    margin:auto auto 15px;

}


/*=====================================================
    INFORMASI
======================================================*/

.info-box{

    display:flex;

    align-items:flex-start;

    gap:15px;

    padding:18px;

    border-bottom:1px solid #eee;

}

.info-box:last-child{

    border-bottom:none;

}

.info-box i{

    font-size:22px;

    color:var(--primary);

    margin-top:3px;

}

.info-box h4{

    margin-bottom:5px;

}


/*=====================================================
    KONTAK
======================================================*/

.contact-grid{

    display:grid;

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

    gap:20px;

}

.contact-card{

    background:#fff;

    border-radius:10px;

    padding:25px;

    text-align:center;

    box-shadow:var(--shadow);

}

.contact-card i{

    font-size:34px;

    color:var(--primary);

    margin-bottom:15px;

}

.contact-card h3{

    margin-bottom:10px;

}


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

.footer{

    margin-top:40px;

    padding:25px;

    text-align:center;

    background:#0d47a1;

    color:#fff;

    border-radius:10px;

}

.footer p{

    margin:5px 0;

}


/*=====================================================
    ANIMASI
======================================================*/

.fade-up{

    animation:fadeUp .7s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@media(max-width:900px){

.hero{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-action{

    justify-content:center;

}

.flow-grid{

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

}

.contact-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:600px){

.hero{

    padding:25px;

}

.hero h1{

    font-size:28px;

}

.flow-grid{

    grid-template-columns:1fr;

}

.service-grid{

    grid-template-columns:1fr;

}

}


/*=====================================================
    END OF FILE
======================================================*/