/* =====================================================================
   E-LEARNING ISLAHUNA — tema
   Rumpun toska yang sama dengan Idaroh, supaya kedua aplikasi terbaca
   sebagai satu keluarga meski berdiri di basis data yang berbeda.
   ===================================================================== */

:root {
    --isl-950: #04342C;
    --isl-900: #064136;
    --isl-800: #085041;
    --isl-700: #0F6E56;
    --isl-600: #12836A;
    --isl-500: #1D9E75;
    --isl-300: #5DCAA5;
    --isl-200: #9FE1CB;
    --isl-100: #C9EDDF;
    --isl-050: #E1F5EE;
}

body { font-size: 14px; }

/* ------------------------------------------------------------ bilah atas */
.navbar-isl { background-color: var(--isl-700); border-bottom: none; }
.navbar-isl .nav-link, .navbar-isl .nav-link:hover { color: #fff; }

.penanda-peran {
    background: rgba(255, 255, 255, .12);
    border-radius: 8px;
    padding: 5px 12px !important;
    margin-right: 10px;
    font-size: 13.5px;
}

/* --------------------------------------------------------- menu samping */
.sidebar-isl { background-color: var(--isl-950); }
.sidebar-isl .brand-link { background: var(--isl-900); border-bottom: none; color: #fff; }
.sidebar-isl .brand-text { font-size: 16px; font-weight: 500; }
.sidebar-isl .nav-header {
    color: var(--isl-300);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding-top: 14px;
}
.sidebar-isl .nav-sidebar .nav-link { color: #CFE7DA; font-size: 13.5px; }
.sidebar-isl .nav-sidebar .nav-link:hover { background: var(--isl-800); color: #fff; }
.sidebar-isl .nav-sidebar .nav-link.active { background: var(--isl-600); color: #fff; box-shadow: none; }

.titik-nanti {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--isl-500);
    opacity: .6;
    margin-left: 6px;
    vertical-align: middle;
}

/* -------------------------------------------------------------- kartu */
.content-wrapper { background: #F2F6F4; }
.card { border-radius: 10px; border: 0.5px solid var(--isl-100); }
.card-isl > .card-header {
    background: var(--isl-700);
    color: #fff;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}
.card-isl > .card-header .card-title { font-size: 15px; font-weight: 500; }

.btn-isl { background: var(--isl-700); border-color: var(--isl-700); color: #fff; }
.btn-isl:hover { background: var(--isl-900); border-color: var(--isl-900); color: #fff; }

table.table th { font-weight: 500; }
.text-isl { color: var(--isl-700); }
.bg-isl { background: var(--isl-700) !important; color: #fff; }

.kotak-angka { border-radius: 10px; padding: 16px 18px; background: #fff; border: .5px solid var(--isl-100); }
.kotak-angka .angka { font-size: 26px; font-weight: 700; color: var(--isl-800); line-height: 1.1; }
.kotak-angka .label { font-size: 12.5px; color: #6B8079; text-transform: uppercase; letter-spacing: .05em; }
.kotak-angka i { font-size: 26px; color: var(--isl-200); }

/* ------------------------------------------------------------- masuk */
.laman-masuk {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, var(--isl-900), var(--isl-700) 70%);
    padding: 20px;
}
.kartu-masuk { width: 100%; max-width: 390px; background: #fff; border-radius: 14px; padding: 26px 24px; }
.kartu-masuk h1 { font-size: 19px; font-weight: 700; color: var(--isl-900); margin-bottom: 2px; }
.kartu-masuk p.lembaga { font-size: 12.5px; color: #6B8079; margin-bottom: 18px; }

/* ------------------------------------------------------------ singgah */
.singgah { text-align: center; padding: 56px 20px; }
.singgah i { font-size: 42px; color: var(--isl-200); margin-bottom: 14px; }
.singgah h4 { font-size: 19px; font-weight: 500; color: var(--isl-900); }
.singgah p { color: #6B8079; max-width: 520px; margin: 8px auto 0; }