/* ==========================================================
   PORTAL INFORMASI DAN PENGUMUMAN SISWA
   THEME CSS
   Version : 1.0
========================================================== */

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

:root{

    --primary:#1565C0;
    --primary-dark:#0D47A1;
    --primary-light:#EAF4FF;

    --secondary:#1976D2;

    --accent:#F9A825;

    --success:#2E7D32;

    --danger:#C62828;

    --warning:#F9A825;

    --info:#0288D1;

    --dark:#263238;

    --gray:#64748B;

    --border:#E6ECF3;

    --body:#F5F7FB;

    --white:#FFFFFF;

    --radius-sm:10px;

    --radius:18px;

    --radius-lg:28px;

    --shadow-sm:0 6px 18px rgba(0,0,0,.05);

    --shadow:0 16px 45px rgba(21,101,192,.10);

    --shadow-lg:0 30px 60px rgba(21,101,192,.18);

    --transition:.30s;

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--body);

    color:var(--dark);

    font-family:'Segoe UI',sans-serif;

    font-size:15px;

    line-height:1.7;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

img{

    display:block;

    max-width:100%;

}

button{

    transition:var(--transition);

}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

.portal-title{

    font-size:42px;

    font-weight:700;

    color:var(--dark);

}

.portal-subtitle{

    font-size:17px;

    color:var(--gray);

}

.portal-heading{

    font-size:30px;

    font-weight:700;

}

.portal-small{

    font-size:14px;

    color:var(--gray);

}

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

.portal-card{

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    border:none;

}

.portal-card-body{

    padding:35px;

}

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

.btn-primary-custom{

    background:var(--primary);

    color:#fff;

    border:none;

    border-radius:12px;

    padding:12px 28px;

    font-weight:600;

}

.btn-primary-custom:hover{

    background:var(--primary-dark);

    color:#fff;

}

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

.portal-input{

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

    border-radius:12px;

    padding:13px 18px;

    width:100%;

    transition:var(--transition);

}

.portal-input:focus{

    outline:none;

    border-color:var(--primary);

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

}

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

.shadow-soft{

    box-shadow:var(--shadow);

}

.shadow-large{

    box-shadow:var(--shadow-lg);

}

/* ==========================================================
   RADIUS
========================================================== */

.radius{

    border-radius:var(--radius);

}

.radius-lg{

    border-radius:var(--radius-lg);

}

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

.section{

    padding:90px 0;

}

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

@media(max-width:992px){

    .portal-title{

        font-size:34px;

    }

}

@media(max-width:768px){

    .portal-title{

        font-size:28px;

    }

    .portal-card-body{

        padding:25px;

    }

}