/* ==========================================================
   PabrikTani Premium Theme
   Global Foundation
========================================================== */

/* RESET */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

/* ROOT */

:root{

    --primary:#2E7D32;
    --primary-dark:#1B5E20;
    --secondary:#8BC34A;

    --white:#ffffff;
    --black:#202124;

    --text:#444;
    --border:#ECECEC;

    --background:#F7FAF7;

    --radius:18px;

    --shadow:

        0 10px 30px rgba(0,0,0,.08);

    --transition:.30s;

}

/* HTML */

html{

    scroll-behavior:smooth;

}

/* BODY */

body{

    font-family:

        Inter,

        "Segoe UI",

        Arial,

        sans-serif;

    font-size:16px;

    color:var(--black);

    background:var(--background);

    line-height:1.7;

}

/* LINKS */

a{

    color:inherit;

    text-decoration:none;

}

/* IMAGE */

img{

    display:block;

    max-width:100%;

}

/* LIST */

ul{

    list-style:none;

}

/* CONTAINER */

.container{

    width:1320px;

    max-width:94%;

    margin:auto;

}

/* SECTION */

section{

    padding:70px 0;

}

/* BUTTON */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 28px;

    border-radius:14px;

    transition:var(--transition);

    font-weight:600;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

}

.btn-outline{

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

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

/* TITLE */

.section-title{

    font-size:42px;

    font-weight:800;

    margin-bottom:15px;

}

.section-description{

    color:#666;

    max-width:720px;

}

/* CARD */

.card{

    background:#fff;

    border-radius:22px;

    box-shadow:var(--shadow);

}

/* GRID */

.grid{

    display:grid;

    gap:30px;

}

/* RESPONSIVE */

@media(max-width:992px){

.container{

max-width:96%;

}

section{

padding:55px 0;

}

.section-title{

font-size:34px;

}

}

@media(max-width:768px){

.section-title{

font-size:28px;

}

}

/* Kalender Masehi, Islam, Jawa */
.calendar-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.calendar-bar-item {
    background: #fff;
    border: 1px solid rgba(46, 125, 50, 0.14);
    border-radius: 12px;
    padding: 10px 12px;
    min-width: 0;
}

.calendar-bar-label {
    display: block;
    color: #2E7D32;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.calendar-bar-item strong {
    display: block;
    color: #142017;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 700;
}

.calendar-bar--footer {
    margin-bottom: 10px;
}

.calendar-bar--compact .calendar-bar-item {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.calendar-bar--compact .calendar-bar-label {
    color: rgba(255, 255, 255, 0.72);
}

.calendar-bar--compact .calendar-bar-item strong {
    color: #fff;
    font-size: 13px;
}

@media (max-width: 768px) {
    .calendar-bar {
        grid-template-columns: 1fr;
    }
}