/* =========================================================
   TEMA GLOBAL ARSIP DIGITAL - MTsN 1 BOGOR
   Versi 2026 - halaman dalam
   ========================================================= */

:root {
    --hijau: #006b4f;
    --hijau-tua: #064a38;
    --hijau-muda: #e9f5f0;
    --putih: #ffffff;
    --teks: #18352c;
    --bayangan: 0 8px 25px rgba(0, 70, 50, .12);
}

/* Latar halaman menggunakan foto gedung asli secara proporsional */
body {
    background:
        linear-gradient(rgba(235, 246, 242, .92), rgba(235, 246, 242, .94)),
        url("images/hero-mtsn1-proporsional.jpg") center center / cover fixed no-repeat !important;
    color: var(--teks);
}

/* Lapisan lembut agar teks tetap nyaman dibaca */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 12% 15%, rgba(0,107,79,.09), transparent 30%),
        radial-gradient(circle at 88% 80%, rgba(0,107,79,.07), transparent 32%);
}

/* Area utama halaman */
main.container,
main.container-page,
main {
    position: relative;
}

/* Panel / kartu halaman dalam */
.panel,
.card,
.box,
.form-card,
.content-card,
.table-card,
.dashboard-card {
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(0,107,79,.10) !important;
    border-radius: 16px !important;
    box-shadow: var(--bayangan) !important;
}

/* Panel utama */
.panel {
    padding: 24px !important;
    margin-top: 22px;
    margin-bottom: 25px;
}

/* Judul */
.panel h1,
.panel h2,
.panel h3,
.card h1,
.card h2,
.card h3,
.box h1,
.box h2,
.box h3 {
    color: var(--hijau-tua);
}

/* Garis kecil dekoratif pada heading */
.panel h1:first-child,
.panel h2:first-child {
    border-left: 5px solid var(--hijau);
    padding-left: 12px;
}

/* Link */
main a {
    color: var(--hijau);
}

main a:hover {
    color: var(--hijau-tua);
}

/* Tombol */
button,
.btn,
input[type="submit"],
input[type="button"] {
    border-radius: 9px !important;
    transition: .2s ease;
}

button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    transform: translateY(-1px);
}

/* Input */
input,
select,
textarea {
    border-radius: 8px !important;
    border: 1px solid #cbded7 !important;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--hijau) !important;
    box-shadow: 0 0 0 3px rgba(0,107,79,.10) !important;
}

/* Tabel */
table {
    border-radius: 10px;
    overflow: hidden;
}

table th {
    background: var(--hijau) !important;
    color: #fff !important;
}

table td {
    background: rgba(255,255,255,.94);
}

/* Navbar sedikit timbul */
.main-nav {
    box-shadow: 0 4px 12px rgba(0,55,40,.16);
}

.main-nav a {
    transition: .2s ease;
}

.main-nav a:hover {
    transform: translateY(-1px);
}

/* Footer */
footer {
    margin-top: 30px;
}

/* Mobile */
@media (max-width: 700px) {
    body {
        background:
            linear-gradient(rgba(235,246,242,.96), rgba(235,246,242,.97)),
            url("images/hero-mtsn1-proporsional.jpg") center center / cover fixed no-repeat !important;
    }

    .panel,
    .card,
    .box,
    .form-card,
    .content-card,
    .table-card,
    .dashboard-card {
        border-radius: 13px !important;
    }

    .panel {
        padding: 17px !important;
        margin-top: 15px;
    }

    .panel h1,
    .panel h2 {
        font-size: 22px;
    }

    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ===== NAVBAR GLOSSY 3D - TAMBAHAN ===== */
.nav{
    background:
      linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.08) 28%,transparent 48%),
      linear-gradient(135deg,#06482d,#087b45 35%,#29ad63 50%,#087b45 68%,#04351f) !important;
    border-bottom:2px solid rgba(255,255,255,.5) !important;
    box-shadow:inset 0 2px rgba(255,255,255,.5),inset 0 -6px 12px rgba(0,0,0,.2),0 6px 18px rgba(0,50,30,.25) !important;
}
.nav .brand{color:#fff!important;text-shadow:0 2px 2px rgba(0,0,0,.3)!important}
.nav .brand small{color:#eafff2!important}
.nav nav a{
    position:relative;overflow:hidden;color:#fff!important;
    background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.1) 35%,transparent 36%),linear-gradient(145deg,#ffacd6,#f4519c 38%,#df277e 60%,#b8145c)!important;
    border:1px solid rgba(255,255,255,.72)!important;border-radius:11px!important;
    text-shadow:0 2px 2px rgba(0,0,0,.34)!important;
    box-shadow:inset 0 2px 4px rgba(255,255,255,.88),inset 0 -5px 8px rgba(90,0,45,.25),0 4px 0 rgba(100,0,48,.4),0 7px 13px rgba(0,0,0,.2)!important;
}
.nav nav a:hover{transform:translateY(-2px)!important;filter:brightness(1.08)}
.nav nav a:active{transform:translateY(2px)!important}
.nav .logout{color:#fff!important;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 36%),linear-gradient(145deg,#ff8999,#ed4059,#b91536)!important}
.nav .loginlink{background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 36%),linear-gradient(145deg,#37d97b,#0eae59,#078748)!important}
.ticker{
    background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 42%),linear-gradient(90deg,#03492e,#087a46,#159b58,#087a46,#03492e)!important;
    border-top:1px solid rgba(255,255,255,.45)!important;border-bottom:2px solid rgba(0,0,0,.16)!important;
}