/* :root {
            --primary-green: #2e7d32;
            --primary-red: #c62828;
        } */

        body {
            font-family: Arial, sans-serif;
        }

        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 999;
            height: 78px;
            /* pastikan fix */
        }

        .navbar.scrolled {
            background-color: #F5F5ED;
        }

        .btn-primary {
            background-color: var(--primary-green);
            border: none;
        }

        .btn-primary:hover {
            background-color: var(--primary-red);
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            flex-direction: column;
        }

        main {
            flex: 1;
            margin-top: 78px;
        }

        .batik-wrapper {
            position: relative;
            z-index: 0;

            background-image: url('/assets/images/batik-bg(2).png');
            background-repeat: repeat;
            background-size: 280px;

            /* ini bikin efek "tipis banget" */
            background-color: rgba(255, 255, 255, 0.01);
            background-blend-mode: lighten;
            padding-top: 10px;
        }

        /* semua konten di atas */
        .batik-wrapper>* {
            position: relative;
            z-index: 1;
        }

        /* main,
        .container,
        .navbar,
        section {
            position: relative;
            z-index: 1;
        } */

        /* === CARD HOVER EFFECT === */
        .card {
            border-radius: 15px;
            /* lebih tegas */
            border: 1px solid #e0e0e0;
            transition: all 0.25s ease;
            overflow: hidden;
            /* penting untuk gambar full */
        }

        .card:hover {
            transform: translateY(-6px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        }

        /* === BUTTON UPGRADE === */
        .btn {
            transition: all 0.25s ease;
            border-radius: 8px;
            /* lebih kotak tapi tetap modern */
            padding: 8px 18px;
            font-weight: 500;
        }

        .btn-success {
            background-color: var(--primary-green);
            border: none;
            box-shadow: 0 4px 10px rgba(46, 125, 50, 0.25);
        }

        .btn-success:hover {
            background-color: #1b5e20;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(46, 125, 50, 0.35);
        }

        .btn-outline-primary:hover,
        .btn-outline-danger:hover {
            transform: translateY(-2px);
        }

        /* === IMAGE HOVER ZOOM === */
        .card img {
            transition: transform 0.4s ease;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }

        /* .card:hover img {
            transform: scale(1.05);
        } */

        /* === Visi Misi Card === */
        .vm-card {
            padding: 30px;
            border-radius: 12px;
            background: #fff;
            transition: 0.3s;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }

        .vm-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        }

        /* === SECTION SPACING BIAR NAfas === */
        section,
        .container {
            margin-bottom: 30px;
        }

        /* === BASE CARD (SEMUA CARD CUSTOM) === */
        .custom-card {
            border-radius: 15px;
            /* tegas, tidak terlalu bulat */
            border: 1px solid #dcdcdc;
            background: #ffffff;
            transition: all 0.25s ease;
            overflow: hidden;
        }

        /* Hover hanya card */
        .custom-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
        }

        /* === WRAPPER GAMBAR === */
        .card-img-wrapper {
            padding: 12px;
            /* jarak dari border card */
        }

        /* === GAMBAR === */
        .card-img-wrapper img {
            width: 100%;
            height: 180px;
            /* default jurnal */
            object-fit: cover;
            border-radius: 4px;
            display: block;
        }

        /* === KHUSUS JURNAL === */
        .jurnal-card .card-img-wrapper img {
            height: 200px;
        }

        /* === KHUSUS BERITA (opsional beda tinggi) === */
        .berita-card .card-img-wrapper img {
            height: 200px;
        }

        /* === BODY PEMISAH HALUS === */
        .custom-card .card-body {
            border-top: 1px solid #f1f1f1;
            padding: 12px; 
        }

        .card-body {
    align-items: flex-start; /* 🔥 ini penting */
}

        /* === BUTTON BIAR KONSISTEN === */
        .btn {
            border-radius: 6px;
            transition: all 0.2s ease;
        }

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

        /* === BUTTON OUTLINE PRIMARY === */
        .btn-outline-primary {
            border-width: 1.2px;
        }

        .btn-outline-primary:hover {
            background-color: #0d6efd;
            color: #fff;
        }

        .section-title {
            position: relative;
            display: inline-block;
            margin-bottom: 15px;
        }

        /* CENTER (Visi Misi) */
        .section-title-center::after {
            content: "";
            display: block;
            width: 50px;
            height: 3px;
            background-color: var(--primary-green);
            margin: 8px auto 0;
            border-radius: 2px;
            margin-bottom: 10px;
        }

        /* LEFT (Arsip & Berita) */
        .section-title-left::after {
            content: "";
            display: block;
            width: 50px;
            height: 3px;
            background-color: var(--primary-green);
            margin: 8px 0 0 0;
            border-radius: 2px;
        }

        /* 
        .visi-text {
            font-size: 1.15rem;
            line-height: 1.9;
            color: #2f2f2f;

            max-width: 520px;
            margin: 0 auto;

            font-weight: 400;
            letter-spacing: 0.2px;
        }

        /* garis aksen kecil di kiri */

        /* bullet custom */
        /* .misi-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 8px;
            width: 8px;
            height: 8px;
            background-color: var(--primary-green);
            border-radius: 50%;
        } */

        .visi-highlight {
            font-size: 1.35rem;
            /* lebih besar */
            line-height: 1.8;
            color: #2a2a2a;

            max-width: 520px;
            margin: 10px auto 0;

            font-weight: 500;
            /* sedikit lebih tegas */
            letter-spacing: 0.3px;
        }

        .text-highlight {
            color: var(--primary-green);
            font-weight: 600;
        }

        .misi-list li {
            line-height: 1.8;
            color: #2f2f2f;
            font-size: 1rem;
        }

        .visi-misi-section {
            background: linear-gradient(180deg,
                    #f3fff5 0%,
                    #f7fff9 100%);
        }

        .text-highlight-soft {
            color: var(--primary-green);
            font-weight: 500;
            /* lebih ringan dari visi */
        }

        /* === SOCIAL CARD === */
        .social-card {
            background: #ffffff;
            border: 1px solid #e5e5e5;
            border-radius: 10px;

            padding: 25px 20px;

            text-align: center;

            transition: all 0.25s ease;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        /* ICON */
        .social-card i {
            font-size: 32px;
            color: var(--primary-green);
        }

        /* TITLE */
        .social-card h6 {
            font-weight: 600;
        }

        /* HOVER */
        .social-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        }

        .bi-tiktok {
            color: #000;
        }

        .bi-instagram {
            color: #e1306c;
        }

        .bi-whatsapp {
            color: #25d366;
        }

        .social-card .btn:hover {
            transform: scale(1.05);
        }

        .btn-card {
            padding: 6px 18px;
            font-size: 0.9rem;
            font-weight: 500;
            border-radius: 6px;

            width: fit-content;      /* 🔥 biar ikut teks */
            display: inline-block;   /* 🔥 biar gak stretch */
        }

       .btn-card-jurnal {
    padding: 7px 20px;
    font-size: 0.9rem;
}

            .card-body .btn {
        padding: 4px 12px !important;
        font-size: 0.85rem !important;
        border-radius: 6px !important;
    }

.card-img-wrapper {
    width: 100%;
    aspect-ratio: 3 / 4; /* 🔥 mendekati A4 */
    
    display: flex;
    align-items: center;
    justify-content: center;

    background: #f5f5f5;
    border-radius: 10px;
    overflow: hidden;
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* balik ke cover */
}

.jurnal-card .card-img-wrapper {
    height: auto;              /* matikan height lama */
    aspect-ratio: 3 / 4;       /* 🔥 portrait */
    max-height: 300px;         /* biar tidak terlalu besar */

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f5f5f5;
    border-radius: 10px;
    overflow: hidden;
}

.jurnal-card .card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 🔥 biar penuh & tidak kecil */
}

.cover-wrapper {
    width: 100%;
    aspect-ratio: 3 / 4; /* 🔥 A4 feel */
    
    display: flex;
    align-items: center;
    justify-content: center;

    background: #f5f5f5;
    border-radius: 10px;
    overflow: hidden;
}

.cover-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 🔥 jangan cover */
}

.card-header-custom {
    padding: 14px 18px;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
}

/* warna */
.bg-profile {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1565c0;
}

.bg-bookmark {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    color: var(--primary-green);
}

.bg-download {
    background: linear-gradient(135deg, #ede7f6, #d1c4e9);
    color: #6a1b9a;
}

footer {
    color: #fff;
}

footer .footer-text {
    color: #aaa;
}

footer p,
footer li {
    color: #aaa !important;
}

/* INI KUNCI NYA */
footer a.footer-link {
    color: #aaa !important;
    text-decoration: none;
}

footer a.footer-link:hover {
    color: #fff !important;
}

.social-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #555;
    color: white !important;
    font-size: 18px;
    transition: 0.3s;
}

.social-icon:hover {
    background: #00c853;
    border-color: #00c853;
    transform: translateY(-3px);
}

.social-icon i {
    color: #fff !important;
}

.struktur-section {
    margin-bottom: 100px;
}

.tree ul {
    padding-top: 20px;
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.tree li {
    float: left;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
}

.tree li::before, .tree li::after{
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 2px solid #ccc;
    width: 50%;
    height: 20px;
}

.tree li::after{
    right: auto;
    left: 50%;
    border-left: 2px solid #ccc;
}

.tree::after {
    content: "";
    display: block;
    clear: both;
}

.tree li:only-child::after, 
.tree li:only-child::before {
    display: none;
}

.tree li:only-child{
    padding-top: 0;
}

.tree li:first-child::before,
.tree li:last-child::after{
    border: 0 none;
}

.node {
    border: 1px solid #ddd;
    padding: 15px;
    display: inline-block;
    border-radius: 10px;
    background: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.node img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 8px;
}
.struktur-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.struktur-img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* MOBILE FIX */
@media (max-width: 768px) {
    .struktur-img {
        width: 100%;
    }
}

/* show.blade */
.artikel-content * {
    max-width: 100%;
    word-wrap: break-word;
}

.artikel-content {
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.9;
    font-size: 16px;
    color: #222;
}

.artikel-content p {
    text-align: justify;
    text-justify: inter-word;
    margin-bottom: 18px;
}

.artikel-content h1,
.artikel-content h2,
.artikel-content h3,
.artikel-content h4 {
    font-weight: bold;
    margin-top: 32px;
    margin-bottom: 18px;
}

.artikel-content ul,
.artikel-content ol {
    padding-left: 25px;
    margin-bottom: 20px;
}

.artikel-content img {
    max-width: 100%;
    height: auto;
}


@media(max-width:768px){

    .artikel-content{
        font-size:15px;
        line-height:1.8;
    }

}

.hero-description{
    text-align:justify;
    line-height:1.9;
}

@media(max-width:768px){

    .hero-description{
        text-align:justify;
        line-height:1.8;
    }

}

.hero-buttons{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

@media(max-width:768px){

    .hero-buttons{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

    .hero-buttons .btn{
        width:auto;
        min-width:220px;
    }

}

/* .misi-list li{
text-align: justify;
line-height: 1.8;
}

.tox-tinymce{
border-radius: 10px !important;
} */