/* MI AL-MUHAJIRIN BANJARMASIN/Main Stylesheet */
:root {
    --primary: #087f5b;
    --primary-dark: #055c43;
    --primary-deep: #043f32;
    --primary-light: #e8f5f0;

    --gold: #d6a84b;
    --gold-light: #f6e8c8;

    --white: #ffffff;
    --background: #f7faf9;
    --background-soft: #eef7f3;

    --text: #18251f;
    --text-light: #637069;
    --border: #dfe9e4;

    --shadow-sm: 0 8px 25px rgba(7, 67, 48, 0.08);
    --shadow-md: 0 18px 50px rgba(7, 67, 48, 0.13);

    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 30px;

    --transition: 0.3s ease;
}
html {
    scroll-behavior: smooth;
}

/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}
body {
    font-family: "Plus Jakarta Sans", sans-serif;
    background: var(--white);
    color: var(--text);
    line-height: 1.7;
    overflow-x: hidden;
}
img {
    max-width: 100%;
    display: block;
}
a {
    text-decoration: none;
    color: inherit;
}
button,
input,
textarea,
select {
    font: inherit;
}
button {
    border: none;
    background: none;
    cursor: pointer;
}
.container {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
}
.section {
    padding: 100px 0;
}

/* TOP BAR */
.topbar {
    background: var(--primary-deep);
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
}
.topbar-content {
    min-height: 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 25px;
}
.topbar span {
    display: flex;
    align-items: center;
    gap: 8px;
}
.topbar i {
    color: var(--gold);
}
.accreditation {
    color: var(--white);
    font-weight: 700;
}

/* HEADER / NAVBAR */
.header {
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: var(--transition);
}
.header.scrolled {
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
}
.navbar {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/* BRAND */
.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-shrink: 0;
}
.brand-logo {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.brand-text {
    line-height: 1.2;
}
.brand-text h1 {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-dark);
}
.brand-text span {
    font-size: 11px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1.3px;
}

/* NAV MENU */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 27px;
}
.nav-link {
    position: relative;
    font-size: 13px;
    font-weight: 600;
    color: #38473f;
    transition: var(--transition);
}
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: var(--transition);
}
.nav-link:hover,
.nav-link.active {
    color: var(--primary);
}
.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* PPDB BUTTON */
.nav-ppdb {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 19px;
    border-radius: 100px;
    background: var(--primary);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    transition: var(--transition);
}
.nav-ppdb:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}
.nav-ppdb i {
    font-size: 10px;
}

/* MOBILE MENU */
.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 20px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

/* HERO */
.hero {
    position: relative;
    min-height: 690px;
    display: flex;
    align-items: center;
    /*
       Ganti hero.jpg dengan foto asli madrasah.
    */
    background:
        linear-gradient(
            90deg,
            rgba(3, 55, 42, 0.97) 0%,
            rgba(3, 70, 50, 0.90) 42%,
            rgba(3, 70, 50, 0.38) 100%
        ),
        url("aset/fotobersama1.jpeg");
    background-size: cover;
    background-position: center;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(
            circle at 15% 25%,
            rgba(255, 255, 255, 0.08),
            transparent 25%
        );
}
.hero-overlay {
    position: absolute;
    inset: 0;
}
.hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
}
.hero-content {
    max-width: 720px;
    color: var(--white);
}
.hero-badge {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(8px);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 25px;
    margin-left: 80px;
}
.hero-badge i {
    color: var(--gold);
}
.hero-small {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.80);
    margin-bottom: 4px;
}
.hero h2 {
    max-width: 750px;
    font-size: clamp(45px, 6vw, 76px);
    line-height: 1.05;
    letter-spacing: -3px;
    font-weight: 800;
    margin-left: 80px;
}
.hero p{
    margin-left: 80px;
}
.hero h2 span {
    display: block;
    color: #f4cf7a;
    margin-left: 0px;
}
.hero-motto {
    margin-top: 23px;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.90);
}
.hero-motto strong {
    color: var(--white);
}
.hero-description {
    max-width: 650px;
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.73);
    font-size: 14px;
    line-height: 1.9;
}
.hero-buttons {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-left: 80px;
}

/* BUTTONS */
.btn {
    min-height: 51px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 23px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    transition: var(--transition);
}
.btn-primary {
    background: var(--gold);
    color: #283128;
}
.btn-primary:hover {
    transform: translateY(-3px);
    background: #e6ba60;
}
.btn-outline {
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.40);
}
.btn-outline:hover {
    background: var(--white);
    color: var(--primary-dark);
}

/* STATISTICS */
.stats {
    position: relative;
    z-index: 10;
    margin-top: -35px;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.stat-item {
    min-height: 125px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 25px;
    border-right: 1px solid var(--border);
}
.stat-item:last-child {
    border-right: none;
}
.stat-icon {
    width: 47px;
    height: 47px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 18px;
}
.stat-item h3 {
    font-size: 25px;
    color: var(--primary-dark);
    line-height: 1.2;
}
.stat-item p {
    margin-top: 3px;
    font-size: 10px;
    color: var(--text-light);
}

/* SECTION TITLES */
.section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.section-label > span {
    width: 28px;
    height: 2px;
    background: var(--gold);
}
.section-label.center {
    justify-content: center;
}
.section-title {
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.2;
    letter-spacing: -1.7px;
}
.section-title span {
    color: var(--primary);
}
.section-heading {
    max-width: 690px;
    margin: 0 auto 55px;
    text-align: center;
}
.section-heading > p {
    max-width: 580px;
    margin: 15px auto 0;
    color: var(--text-light);
    font-size: 13px;
}

/* ABOUT */

.about {
    padding-top: 125px;
}
.about-grid {
    display: grid;
    grid-template-columns: 0.92fr 1fr;
    gap: 80px;
    align-items: center;
}
.about-image {
    position: relative;
}
.about-image::before {
    content: "";
    position: absolute;
    left: -18px;
    top: -18px;
    width: 110px;
    height: 110px;
    border-left: 4px solid var(--gold);
    border-top: 4px solid var(--gold);
    border-radius: 20px 0 0 0;
    z-index: -1;
}
.about-image img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 25px;
    box-shadow: var(--shadow-md);
}
.about-badge {
    position: absolute;
    right: -25px;
    bottom: 30px;
    min-width: 145px;
    padding: 20px;
    border-radius: 18px;
    background: var(--primary);
    color: var(--white);
    box-shadow: var(--shadow-md);
}
.about-badge strong,
.about-badge span {
    display: block;
}
.about-badge strong {
    color: #f5d27d;
    font-size: 30px;
    line-height: 1;
}
.about-badge span {
    margin-top: 7px;
    font-size: 10px;
}
.about-content > p {
    margin-top: 17px;
    color: var(--text-light);
    font-size: 13px;
}
.about-values {
    margin: 27px 0;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.about-values div {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 700;
}
.about-values i {
    color: var(--primary);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    transition: var(--transition);
}
.text-link:hover {
    gap: 15px;
}

/* VISION */
.vision {
    padding-top: 20px;
}
.vision-card {
    position: relative;
    overflow: hidden;
    min-height: 310px;
    display: flex;
    align-items: center;
    padding: 60px 75px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(
            120deg,
            var(--primary-deep),
            var(--primary)
        );
    color: var(--white);
}
.vision-card::after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    right: -100px;
    top: -140px;
    border-radius: 50%;
    border: 60px solid rgba(255, 255, 255, 0.04);
}
.vision-decoration {
    position: absolute;
    right: 70px;
    bottom: -25px;
    font-size: 160px;
    color: rgba(255, 255, 255, 0.05);
}
.vision-content {
    position: relative;
    z-index: 2;
    max-width: 880px;
}
.vision-content > span {
    display: inline-block;
    margin-bottom: 18px;
    color: #f1cf7d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}
.vision-content h2 {
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: -1px;
}

/* ADVANTAGES */
.advantages {
    background: var(--background);
}
.advantages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.advantage-card {
    position: relative;
    overflow: hidden;
    min-height: 285px;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    transition: var(--transition);
}
.advantage-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition);
}
.advantage-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}
.advantage-card:hover::before {
    transform: scaleX(1);
}
.advantage-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 22px;
}
.advantage-card h3 {
    margin-top: 25px;
    font-size: 16px;
}
.advantage-card p {
    margin-top: 12px;
    color: var(--text-light);
    font-size: 12px;
}

/* PANCA CINTA */
.panca-cinta {
    position: relative;
    overflow: hidden;
    background: var(--primary-deep);
    color: var(--white);
}
.panca-cinta::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    left: -300px;
    top: -300px;
    border-radius: 50%;
    border: 100px solid rgba(255, 255, 255, 0.02);
}
.section-heading.light h2 {
    font-size: clamp(30px, 4vw, 44px);
}
.section-heading.light h2 span {
    color: #f2cc73;
}
.section-heading.light p {
    color: rgba(255, 255, 255, 0.60);
}
.light-label {
    color: #f2cc73;
}
.cinta-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}
.cinta-card {
    min-height: 230px;
    padding: 27px 22px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.045);
    transition: var(--transition);
}
.cinta-card:hover {
    transform: translateY(-7px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(242, 204, 115, 0.5);
}
.cinta-card > i {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: rgba(242, 204, 115, 0.13);
    color: #f2cc73;
    font-size: 20px;
}
.cinta-card > span {
    margin-top: auto;
    color: rgba(255, 255, 255, 0.30);
    font-size: 11px;
}
.cinta-card h3 {
    margin-top: 5px;
    font-size: 15px;
    line-height: 1.5;
}

/* PROGRAM */
.program-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.program-card {
    position: relative;
    overflow: hidden;
    min-height: 290px;
    padding: 30px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--white);
    transition: var(--transition);
}
.program-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-md);
}
.program-number {
    position: absolute;
    right: 20px;
    top: 12px;
    font-size: 48px;
    font-weight: 800;
    color: #edf3f0;
}
.program-card > i {
    position: relative;
    z-index: 2;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 20px;
}
.program-card h3 {
    position: relative;
    z-index: 2;
    margin-top: 27px;
    font-size: 17px;
}
.program-card p {
    position: relative;
    z-index: 2;
    margin-top: 12px;
    color: var(--text-light);
    font-size: 12px;
}
.program-button {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.btn-green {
    background: var(--primary);
    color: var(--white);
}
.btn-green:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
}

/* 7 SIKAP DASAR */
.character {
    background: var(--background-soft);
}
.character-container {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 80px;
    align-items: center;
}
.mini-title {
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.character-heading h2 {
    margin-top: 10px;

    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.15;
    letter-spacing: -2px;
}
.character-heading h2 span {
    display: block;
    color: var(--primary);
}
.character-heading p {
    max-width: 420px;
    margin-top: 18px;

    color: var(--text-light);
    font-size: 12px;
}
.character-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.character-list div {
    min-height: 65px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 18px;
    border-radius: 13px;
    background: var(--white);
    font-size: 12px;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.character-list div:hover {
    transform: translateX(5px);
}
.character-list span {
    width: 37px;
    height: 37px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 9px;
    font-weight: 800;
}

/* CTA PPDB */
.cta {
    padding: 70px 0;
    background:
        linear-gradient(
            120deg,
            var(--primary),
            var(--primary-dark)
        );
    color: var(--white);
}
.cta-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}
.cta-container > div {
    max-width: 700px;
}
.cta span {
    color: #f2d17f;
    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.cta h2 {
    margin-top: 8px;
    font-size: clamp(27px, 4vw, 41px);
    line-height: 1.25;
    letter-spacing: -1.5px;
}
.cta p {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 12px;
}
.btn-white {
    flex-shrink: 0;
    background: var(--white);
    color: var(--primary-dark);
}
.btn-white:hover {
    transform: translateY(-3px);
    background: #f7e5b8;
}

/* FOOTER */
.footer {
    background: #062f26;
    color: rgba(255, 255, 255, 0.72);
}
.footer-grid {
    padding: 75px 0 60px;
    display: grid;
    grid-template-columns: 1.4fr 0.7fr 0.7fr 1.3fr;
    gap: 55px;
}
.footer-brand {
    display: flex;
    align-items: center;
    gap: 13px;
}
.footer-brand img {
    width: 55px;
    height: 55px;
    object-fit: contain;
}
.footer-brand h3 {
    color: var(--white);
    font-size: 17px;
}
.footer-brand span {
    font-size: 10px;
}
.footer-school > p {
    max-width: 280px;
    margin-top: 18px;
    font-size: 11px;
}
.social {
    display: flex;
    gap: 9px;
    margin-top: 22px;
}
.social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    font-size: 12px;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.social a:hover {
    background: var(--gold);
    color: var(--primary-deep);
    transform: translateY(-3px);
}
.footer-column {
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.footer-column h4 {
    margin-bottom: 8px;
    color: var(--white);
    font-size: 13px;
}
.footer-column a,
.footer-column p {
    font-size: 10.5px;
    transition: var(--transition);
}
.footer-column a:hover {
    color: #f2cf7d;
    transform: translateX(3px);
}
.footer-column.contact p {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.footer-column.contact i {
    width: 15px;
    margin-top: 4px;
    color: #e9c66e;
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-bottom .container {
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.footer-bottom p {
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.50);
}

/* =====================================================
   FOOTER COPYRIGHT LINK
===================================================== */

.footer-brand-link {
    color: inherit;

    text-decoration: none;

    transition:
        color .2s ease,
        opacity .2s ease;
}

.footer-brand-link:hover {
    color: orange;

    opacity: .85;
}

.footer-brand-link:active {
    opacity: .7;
}

@media (max-width: 1100px) {
    .nav-menu {
        gap: 17px;
    }
    .nav-link {
        font-size: 11px;
    }
    .advantages-grid,
    .program-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cinta-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .section {
        padding: 30px 0;
    }
    .topbar {
        display: none;
    }
    .navbar {
        min-height: 74px;
    }
    .brand-logo {
        width: 48px;
        height: 48px;
    }
    .brand-text h1 {
        font-size: 16px;
    }

    /* MOBILE NAVIGATION */
    .menu-toggle {
        display: flex;
    }
    .nav-menu {
        position: fixed;
        left: 20px;
        right: 20px;
        top: 85px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 15px;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: var(--white);
        box-shadow: var(--shadow-md);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-15px);
        transition: var(--transition);
        -webkit-border-radius: 18px;
        -moz-border-radius: 18px;
        -ms-border-radius: 18px;
        -o-border-radius: 18px;
        -webkit-transform: translateY(-15px);
        -moz-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        -o-transform: translateY(-15px);
        -webkit-transition: var(--transition);
        -moz-transition: var(--transition);
        -ms-transition: var(--transition);
        -o-transition: var(--transition);
}
    .nav-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .nav-link {
        padding: 13px 12px;
        font-size: 12px;
        border-bottom: 1px solid #eef2f0;
    }
    .nav-link::after {
        display: none;
    }
    .nav-ppdb {
        margin-top: 10px;
        justify-content: center;
        border-radius: 10px;
    }

    /* HERO */
    .hero {
        min-height: 650px;
        background-position: 62% center;
    }
    .hero h2 {
        font-size: 56px;
    }
    .hero-feature {
        display: none;
    }

    /* STATISTICS */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stat-item:nth-child(2) {
        border-right: none;
    }
    .stat-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--border);
    }

    /* ABOUT */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .about-image {
        max-width: 650px;
        margin-inline: auto;
    }
    .about-image img {
        height: 450px;
    }

    /* CHARACTER */
    .character-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* CTA */
    .cta-container {
        align-items: flex-start;
        flex-direction: column;
        gap: 30px;
    }
}

@media (max-width: 600px) {
    .container {
        width: min(100% - 32px, 1180px);
    }
    .section {
        padding: 65px 0;
    }

    /* HEADER */
    .brand-text h1 {
        font-size: 14px;
    }
    .brand-text span {
        font-size: 9px;
    }
    .brand-logo {
        width: 43px;
        height: 43px;
    }

    /* HERO */
    .hero {
        min-height: 650px;
        background:
            linear-gradient(
                rgba(3, 58, 43, 0.91),
                rgba(3, 58, 43, 0.91)
            ),
            url("aset/fotobersama1.jpeg");
        background-size: cover;
        background-position: center;
    }
    .hero-content {
        text-align: left;
    }
    .hero-badge {
        font-size: 9px;
    }
    .hero-small {
        font-size: 13px;
    }
    .hero h2 {
        font-size: clamp(40px, 13vw, 54px);
        letter-spacing: -2px;
    }
    .hero-motto {
        font-size: 16px;
    }
    .hero-description {
        font-size: 12px;
    }
    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-buttons .btn {
        width: 100%;
    }

    /* STATISTICS */
    .stats {
        margin-top: -25px;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stat-item {
        min-height: 115px;
        flex-direction: column;
        text-align: center;
        padding: 18px 10px;
        gap: 8px;
    }
    .stat-icon {
        width: 40px;
        height: 40px;
    }
    .stat-item h3 {
        font-size: 20px;
    }
    .stat-item p {
        font-size: 8.5px;
    }

    /* SECTION TITLES */
    .section-title {
        font-size: 31px;
        letter-spacing: -1px;
    }
    .section-heading {
        margin-bottom: 40px;
    }

    /* ABOUT */
    .about {
        padding-top: 85px;
    }
    .about-image img {
        height: 360px;
    }
    .about-image::before {
        display: none;
    }
    .about-badge {
        right: 12px;
        bottom: 12px;
    }
    .about-values {
        grid-template-columns: 1fr;
    }

    /* VISION */
    .vision {
        padding-top: 0;
    }
    .vision-card {
        min-height: 340px;
        padding: 40px 27px;
        border-radius: 22px;
    }
    .vision-content h2 {
        font-size: 23px;
    }

    /* ADVANTAGES */
    .advantages-grid,
    .program-grid {
        grid-template-columns: 1fr;
    }
    .advantage-card,
    .program-card {
        min-height: auto;
    }

    /* PANCA CINTA */
    .cinta-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cinta-card {
        min-height: 190px;
        padding: 20px;
    }
    .cinta-card:last-child {
        grid-column: span 2;
    }

    /* CHARACTER */
    .character-list {
        grid-template-columns: 1fr;
    }

    /* CTA */
    .cta {
        padding: 55px 0;
    }
    .cta h2 {
        font-size: 29px;
    }
    .cta .btn {
        width: 100%;
    }

    /* FOOTER */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 60px 0 45px;
    }
}

@media (max-width: 380px) {
    .container {
        width: calc(100% - 24px);
    }
    .hero h2 {
        font-size: 38px;
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .stat-item {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .cinta-grid {
        grid-template-columns: 1fr;
    }
    .cinta-card:last-child {
        grid-column: auto;
    }
}

/* PROFILE HERO */
.profile-hero {
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            90deg,
            rgba(3, 55, 42, 0.97),
            rgba(3, 70, 50, 0.82),
            rgba(3, 70, 50, 0.55)
        ),
        url("aset/fotobersama1.jpeg");
    background-size: cover;
    background-position: center;
}
.profile-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255,255,255,0.08),
            transparent 30%
        );
}
.profile-hero-container {
    position: relative;
    z-index: 2;
}
.profile-hero-content {
    max-width: 720px;
    color: var(--white);
}
.profile-hero-badge {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 100px;
    background: rgba(255,255,255,0.09);
    font-size: 10px;
    font-weight: 700;
    margin-top: -20;
    margin-bottom: -20;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}
.profile-hero-badge i {
    color: var(--gold);
}
.profile-hero h1 {
    font-size: clamp(42px, 6vw, 67px);
    line-height: 1.08;
    letter-spacing: -3px;
}
.profile-hero h1 span {
    display: block;
    color: #f2cf7a;
}
.profile-hero-content > p {
    max-width: 620px;
    margin-top: 18px;
    color: rgba(255,255,255,0.72);
    font-size: 13px;
    line-height: 1.8;
}

/* BREADCRUMB */
.breadcrumb {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 10px;
}
.breadcrumb a {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,0.72);
    transition: var(--transition);
}
.breadcrumb a:hover {
    color: var(--gold);
}
.breadcrumb > i {
    font-size: 7px;
    color: rgba(255,255,255,0.30);
}
.breadcrumb span {
    color: #f2cf7a;
}

/* PROFILE ABOUT */
.profile-about-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: center;
}
.profile-about-image {
    position: relative;
}
.profile-about-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 25px;
    box-shadow: var(--shadow-md);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}
.profile-year {
    position: absolute;
    right: -25px;
    bottom: 30px;
    min-width: 130px;
    padding: 18px 22px;
    background: var(--primary);
    color: var(--white);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
}
.profile-year span,
.profile-year strong {
    display: block;
}
.profile-year span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.profile-year strong {
    margin-top: 3px;
    color: #f4d17c;
    font-size: 29px;
}
.profile-about-content > p {
    margin-top: 17px;
    color: var(--text-light);
    font-size: 13px;
}
.profile-quote {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 20px;
    background: var(--primary-light);
    border-left: 4px solid var(--primary);
    border-radius: 12px;
}
.profile-quote > i {
    color: var(--primary);
    font-size: 24px;
}
.profile-quote span,
.profile-quote strong {
    display: block;
}
.profile-quote span {
    color: var(--text-light);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.profile-quote strong {
    margin-top: 3px;
    color: var(--primary-dark);
    font-size: 13px;
}

/* IDENTITY */
.identity-section {
    background: var(--background);
}
.identity-wrapper {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 35px;
}
.identity-main {
    min-height: 430px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 24px;
    background: linear-gradient( 145deg, var(--primary-deep),            var(--primary)        );
    color: var(--white);
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
}
.identity-logo {
    width: 115px;
    height: 115px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--white);
}
.identity-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.identity-main > div:last-child > span {
    display: block;
    margin-top: 25px;
    color: #e9cb7e;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.identity-main h3 {
    margin-top: 4px;
    font-size: 25px;
}
.identity-main p {
    color: rgba(255,255,255,0.65);
    font-size: 11px;
}
.identity-status {
    width: fit-content;
    margin: 18px auto 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 100px;
    font-size: 9px;
}
.identity-status i {
    color: #f0cd75;
}

/* DATA */
.identity-data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.identity-row {
    min-height: 95px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 15px;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.identity-row:hover {
    transform: translateY(-3px);
    border-color: #bcdacf;
    box-shadow: var(--shadow-sm);
}
.identity-icon {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 15px;
}
.identity-row span,
.identity-row strong {
    display: block;
}
.identity-row span {
    color: var(--text-light);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}
.identity-row strong {
    margin-top: 3px;
    color: var(--text);
    font-size: 11px;
    line-height: 1.5;
}

/* VISION & MISSION */
.profile-vision {
    position: relative;
    overflow: hidden;
    min-height: 280px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 30px;
    align-items: center;
    padding: 50px;
    border-radius: 25px;
    background: linear-gradient( 120deg, var(--primary-deep),            var(--primary)        );
    color: var(--white);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}
.profile-vision::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -100px;
    top: -100px;
    border: 55px solid rgba(255,255,255,0.04);
    border-radius: 50%;
}
.profile-vision-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: rgba(255,255,255,0.10);
    color: #f2cf7a;
    font-size: 30px;
}
.profile-vision > div:last-child {
    position: relative;
    z-index: 2;
}
.profile-vision span {
    color: #efcc75;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
.profile-vision h3 {
    max-width: 850px;
    margin-top: 10px;
    font-size: clamp(21px, 3vw, 31px);
    line-height: 1.5;
    font-weight: 600;
}

/* MISSION */
.mission-wrapper {
    margin-top: 60px;
    display: grid;
    grid-template-columns: 0.65fr 1.35fr;
    gap: 70px;
}
.mission-heading > span {
    color: var(--primary);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
.mission-heading h3 {
    margin-top: 8px;
    font-size: 30px;
    line-height: 1.25;
}
.mission-heading p {
    margin-top: 15px;
    color: var(--text-light);
    font-size: 11px;
}
.mission-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.mission-card {
    display: flex;
    gap: 18px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: var(--transition);
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.mission-card:hover {
    border-color: #b9d8cc;
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    -ms-transform: translateX(5px);
    -o-transform: translateX(5px);
}
.mission-card > span {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 9px;
    font-weight: 800;
}
.mission-card h4 {
    font-size: 13px;
}
.mission-card p {
    margin-top: 5px;
    color: var(--text-light);
    font-size: 10.5px;
}

/* GRADUATE PROFILE */
.graduate-section {
    position: relative;
    overflow: hidden;
    background: var(--primary-deep);
    color: var(--white);
}
.graduate-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    left: -250px;
    bottom: -300px;
    border: 80px solid rgba(255,255,255,0.025);
    border-radius: 50%;
}
.graduate-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.graduate-card {
    min-height: 230px;
    padding: 28px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    background: rgba(255,255,255,0.045);
    transition: var(--transition);
}
.graduate-card:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.08);
    border-color: rgba(240,204,117,0.40);
}
.graduate-card > div {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(240,204,117,0.12);
    color: #f0cc75;
    font-size: 19px;
}
.graduate-card h3 {
    margin-top: 22px;
    font-size: 14px;
}
.graduate-card p {
    margin-top: 8px;
    color: rgba(255,255,255,0.58);
    font-size: 10.5px;
}

/* CHARACTER */
.profile-character {
    background: var(--background);
}
.profile-character-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
}
.profile-character-card {
    position: relative;
    min-height: 180px;
    padding: 22px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--white);
    transition: var(--transition);
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    -ms-border-radius: 17px;
    -o-border-radius: 17px;
}
.profile-character-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}
.profile-character-card > span {
    position: absolute;
    top: 12px;
    right: 14px;
    color: #dce8e3;
    font-size: 18px;
    font-weight: 800;
}
.profile-character-card i {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 17px;
}
.profile-character-card h3 {
    margin-top: 16px;
    font-size: 11px;
    line-height: 1.4;
}

/* FACILITIES */
.facility-header {
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
    margin-bottom: 45px;
}
.facility-header > p {
    max-width: 420px;
    color: var(--text-light);
    margin-top: 20px;
    font-size: 11px;
}
.facility-header .section-label .section-title p {
    align-items: center;
}
.facility-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.facility-card {
    min-height: 175px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 17px;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.facility-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}
.facility-card i {
    color: var(--primary);
    font-size: 20px;
}
.facility-card strong {
    margin-top: auto;
    color: var(--primary-dark);
    font-size: 28px;
}
.facility-card span {
    color: var(--text-light);
    font-size: 10px;
}

@media (max-width: 1000px) {
    .profile-character-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .facility-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .profile-about-grid,
    .identity-wrapper,
    .mission-wrapper {
        grid-template-columns: 1fr;
    }
    .profile-about-image {
        max-width: 650px;
        margin: auto;
    }
    .identity-main {
        min-height: 350px;
    }
    .graduate-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .profile-hero {
        min-height: 400px;
        background:
            linear-gradient(
                rgba(3,55,42,0.90),
                rgba(3,55,42,0.90)
            ),
            url("aset/fotobersama1.jpeg");
        background-size: cover;
        background-position: center;
    }
    .profile-hero h1 {
        font-size: 42px;
        letter-spacing: -2px;
    }
    .profile-about-image img {
        height: 370px;
    }
    .profile-year {
        right: 12px;
        bottom: 12px;
    }

    /* IDENTITY */
    .identity-data {
        grid-template-columns: 1fr;
    }
    .identity-main {
        padding: 35px 20px;
    }

    /* VISION */
    .profile-vision {
        grid-template-columns: 1fr;
        padding: 35px 25px;
    }
    .profile-vision-icon {
        width: 60px;
        height: 60px;

        font-size: 22px;
    }
    .profile-vision h3 {
        font-size: 21px;
    }

    /* GRADUATE */
    .graduate-grid {
        grid-template-columns: 1fr;
    }
    .graduate-card {
        min-height: auto;
    }

    /* CHARACTER */
    .profile-character-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .profile-character-card:last-child {
        grid-column: span 2;
    }

    /* FACILITY */
    .facility-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .facility-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .facility-card {
        min-height: 150px;
    }
}

@media (max-width: 380px) {
    .profile-character-grid,
    .facility-grid {
        grid-template-columns: 1fr;
    }
    .profile-character-card:last-child {
        grid-column: auto;
    }
}

/* KEPALA MADRASAH */
.principal{
    margin-top: 30px;
    background:#f8fbfa;
    margin-bottom: 0px;
}
.principal-grid{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:70px;
    align-items:center;
}
.principal-photo{
    position:relative;
}
.principal-photo img{
    width:100%;
    height:500px;
    object-fit:cover;
    border-radius:24px;
    box-shadow:0 25px 60px rgba(0,0,0,.12);
    -webkit-border-radius:24px;
    -moz-border-radius:24px;
    -ms-border-radius:24px;
    -o-border-radius:24px;
}
.principal-name{
    position:absolute;
    left:25px;
    right:25px;
    bottom:25px;
    background:rgba(8,127,91,.95);
    backdrop-filter:blur(10px);
    color:#fff;
    padding:18px;
    border-radius:15px;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    -ms-border-radius:15px;
    -o-border-radius:15px;
}
.principal-name strong{
    display:block;
    font-size:20px;
}
.principal-name span{
    display:block;
    margin-top:5px;
    font-size:13px;
    color:#d9f4ea;
}
.principal-content p{
    margin-top:18px;
    color:#5d6d66;
    text-align:justify;
}
.principal-sign{
    margin-top:35px;
    padding-top:25px;
    border-top:2px solid #dbe8e2;
}
.principal-sign h4{
    color:#087f5b;
    font-size:22px;
    margin-bottom:5px;
}
.principal-sign span{
    color:#777;
    font-size:14px;
}

@media(max-width:900px){
.principal-grid{
grid-template-columns:1fr;
gap:40px;
}
.principal-photo{
max-width:420px;
margin:auto;
}
}

@media(max-width:600px){
.principal-photo img{
height:420px;
}
.principal-name strong{
font-size:18px;
}
}

/* ACADEMIC HERO */
.academic-hero {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            90deg,
            rgba(3, 55, 42, 0.97) 0%,
            rgba(3, 70, 50, 0.86) 48%,
            rgba(3, 70, 50, 0.50) 100%
        ),
        url("aset/fotobersama1.jpeg");
    background-size: cover;
    background-position: center;
}
.academic-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(255,255,255,0.08),
            transparent 28%
        );
}
.academic-hero-container {
    position: relative;
    z-index: 2;
}
.academic-hero-content {
    max-width: 760px;
    color: var(--white);
}
.academic-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 100px;
    background: rgba(255,255,255,0.09);
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 20px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}
.academic-badge i {
    color: var(--gold);
}
.academic-hero h1 {
    font-size: clamp(42px, 6vw, 67px);
    line-height: 1.08;
    letter-spacing: -3px;
}
.academic-hero h1 span {
    display: block;
    color: #f2cf7a;
}
.academic-hero-content > p {
    max-width: 620px;
    margin-top: 18px;
    color: rgba(255,255,255,0.72);
    font-size: 13px;
    line-height: 1.85;
}

/* ACADEMIC INTRO */
.academic-intro-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 75px;
    align-items: center;
}
.academic-intro-content > p {
    margin-top: 17px;
    color: var(--text-light);
    font-size: 13px;
}
.academic-tags {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.academic-tags span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    font-size: 10.5px;
    font-weight: 700;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.academic-tags i {
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 8px;
}

/* RIGHT VISUAL */
.academic-intro-visual {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 45px;
    border-radius: 27px;
    background: linear-gradient( 145deg, var(--primary-deep),            var(--primary)        );
    color: var(--white);
    box-shadow: var(--shadow-md);
    -webkit-border-radius: 27px;
    -moz-border-radius: 27px;
    -ms-border-radius: 27px;
    -o-border-radius: 27px;
}
.academic-intro-visual::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    right: -100px;
    top: -100px;
    border: 50px solid rgba(255,255,255,0.04);
    border-radius: 50%;
}
.academic-big-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(255,255,255,0.10);
    color: #f2cf7a;
    font-size: 27px;
}
.academic-intro-visual > span {
    margin-top: 32px;
    color: #f2cf7a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.academic-intro-visual h3 {
    margin-top: 8px;
    font-size: 33px;
    line-height: 1.25;
    letter-spacing: -1px;
}
.academic-visual-line {
    width: 55px;
    height: 3px;
    margin-top: 22px;
    background: var(--gold);
}
.academic-intro-visual p {
    max-width: 310px;
    margin-top: 18px;
    color: rgba(255,255,255,0.65);
    font-size: 11px;
}

/* LEARNING STRUCTURE */
.learning-structure {
    background: var(--background);
}
.learning-structure-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.learning-card {
    position: relative;
    overflow: hidden;
    min-height: 370px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 21px;
    background: var(--white);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.learning-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}
.learning-card.featured {
    background:
        linear-gradient(
            145deg,
            var(--primary-deep),
            var(--primary)
        );
    color: var(--white);
    border-color: transparent;
}
.learning-number {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 52px;
    font-weight: 800;
    color: #edf3f0;
}
.learning-card.featured .learning-number {
    color: rgba(255,255,255,0.07);
}
.learning-icon {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 21px;
}
.learning-card.featured .learning-icon {
    background: rgba(255,255,255,0.10);
    color: #f2cf7a;
}
.learning-card > span {
    margin-top: 30px;
    color: var(--primary);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.learning-card.featured > span {
    color: #f2cf7a;
}
.learning-card h3 {
    margin-top: 6px;
    font-size: 21px;
}
.learning-card p {
    margin-top: 12px;
    color: var(--text-light);
    font-size: 11px;
}
.learning-card.featured p {
    color: rgba(255,255,255,0.64);
}
.learning-line {
    width: 100%;
    height: 1px;
    margin-top: auto;
    margin-bottom: 15px;
    background: var(--border);
}
.learning-card.featured .learning-line {
    background: rgba(255,255,255,0.12);
}
.learning-card small {
    color: var(--text-light);
    font-size: 8.5px;
    font-weight: 700;
}
.learning-card.featured small {
    color: rgba(255,255,255,0.58);
}

/* KURIKULUM BERBASIS CINTA */
.academic-love {
    position: relative;
    overflow: hidden;
    background: var(--primary-deep);
    color: var(--white);
}
.academic-love::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    left: -320px;
    top: -300px;
    border: 90px solid rgba(255,255,255,0.02);
    border-radius: 50%;
}
.academic-love-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
    align-items: center;
}
.academic-love-content h2 {
    font-size: clamp(31px, 4vw, 47px);
    line-height: 1.2;
    letter-spacing: -2px;
}
.academic-love-content h2 span {
    display: block;
    color: #f2cf7a;
}
.academic-love-content p {
    margin-top: 18px;
    color: rgba(255,255,255,0.62);
    font-size: 11.5px;
}
.academic-love-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.academic-love-list > div {
    position: relative;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    padding: 22px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 17px;
    background: rgba(255,255,255,0.04);
    transition: var(--transition);
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    -ms-border-radius: 17px;
    -o-border-radius: 17px;
}
.academic-love-list > div:hover {
    transform: translateY(-5px);
    border-color: rgba(242,207,122,0.45);
    background: rgba(255,255,255,0.07);
}
.academic-love-list > div:last-child {
    grid-column: span 2;
}
.academic-love-list span {
    position: absolute;
    right: 15px;
    top: 10px;
    color: rgba(255,255,255,0.14);
    font-size: 20px;
    font-weight: 800;
}
.academic-love-list i {
    color: #f2cf7a;
    font-size: 21px;
}
.academic-love-list p {
    margin-top: auto;
    color: rgba(255,255,255,0.64);
    font-size: 11px;
}
.academic-love-list strong {
    display: block;
    color: var(--white);
    font-size: 13px;
}

/* DEEP LEARNING */
.deep-header,
.model-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 50px;
}
.deep-header > p,
.model-header > p {
    max-width: 440px;
    color: var(--text-light);
    font-size: 11px;
}
.deep-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.deep-card {
    position: relative;
    min-height: 280px;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--white);
    transition: var(--transition);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.deep-card:hover {
    transform: translateY(-7px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}
.deep-card > span {
    position: absolute;
    right: 20px;
    top: 15px;
    color: #e4ece8;
    font-size: 25px;
    font-weight: 800;
}
.deep-card > div {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 21px;
}
.deep-card h3 {
    margin-top: 25px;
    font-size: 17px;
}
.deep-card p {
    margin-top: 10px;
    color: var(--text-light);
    font-size: 11px;
}

/* 6C SKILLS */
.skills-section {
    background: var(--background);
}
.skills-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.skill-card {
    position: relative;
    min-height: 210px;
    padding: 27px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--white);
    transition: var(--transition);
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    -ms-border-radius: 18px;
    -o-border-radius: 18px;
}
.skill-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}
.skill-card > span {
    position: absolute;
    right: 17px;
    top: 13px;
    color: #dce9e4;
    font-size: 20px;
    font-weight: 800;
}
.skill-card > i {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 18px;
}
.skill-card h3 {
    margin-top: 21px;
    color: var(--primary-dark);
    font-size: 14px;
}
.skill-card p {
    margin-top: 7px;
    color: var(--text-light);
    font-size: 10px;
}

/* LEARNING MODELS */
.learning-model {
    background: var(--white);
}
.model-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
}
.model-list article {
    display: grid;
    grid-template-columns: 50px 60px 1fr auto;
    gap: 20px;
    align-items: center;
    min-height: 120px;
    padding: 20px 10px;
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
}
.model-list article:hover {
    padding-left: 22px;
    background: var(--background-soft);
}
.model-list article > span {
    color: #b8c9c2;
    font-size: 10px;
    font-weight: 800;
}
.model-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 18px;
}
.model-list h3 {
    color: var(--primary-dark);
    font-size: 15px;
}
.model-list p {
    margin-top: 4px;
    color: var(--text-light);
    font-size: 10px;
}
.model-list article > i {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--background-soft);
    color: var(--primary);
    font-size: 11px;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.model-list article:hover > i {
    background: var(--primary);
    color: var(--white);
    transform: translateX(4px);
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
}

@media (max-width: 1000px) {
    .academic-intro-grid {
        gap: 45px;
    }
    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .academic-intro-grid,
    .academic-love-grid {
        grid-template-columns: 1fr;
    }
    .academic-intro-visual {
        min-height: 350px;
    }
    .learning-structure-grid {
        grid-template-columns: 1fr;
    }
    .learning-card {
        min-height: 310px;
    }
    .deep-grid {
        grid-template-columns: 1fr;
    }
    .deep-card {
        min-height: 230px;
    }
    .deep-header,
    .model-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

@media (max-width: 600px) {

    /* HERO */
    .academic-hero {
        min-height: 420px;
        background:
            linear-gradient(
                rgba(3,55,42,0.91),
                rgba(3,55,42,0.91)
            ),
            url("aset/fotobersama1.jpeg");
        background-size: cover;
        background-position: center;
    }
    .academic-hero h1 {
        font-size: 41px;
        letter-spacing: -2px;
    }

    /* INTRO */
    .academic-tags {
        grid-template-columns: 1fr;
    }
    .academic-intro-visual {
        min-height: 340px;
        padding: 30px;
    }
    .academic-intro-visual h3 {
        font-size: 28px;
    }

    /* LOVE */
    .academic-love-list {
        grid-template-columns: 1fr;
    }
    .academic-love-list > div:last-child {
        grid-column: auto;
    }

    /* SKILLS */
    .skills-grid {
        grid-template-columns: 1fr;
    }
    .skill-card {
        min-height: 190px;
    }

    /* MODEL */
    .model-list article {
        grid-template-columns: 42px 1fr;
        gap: 12px;
        padding: 22px 5px;
    }
    .model-list article > span {
        grid-row: span 2;
    }
    .model-icon {
        display: none;
    }
    .model-list article > i {
        display: none;
    }
}

@media (max-width: 380px) {
    .academic-hero h1 {
        font-size: 36px;
    }
}

/* HERO KESISWAAN */
.student-hero {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            90deg,
            rgba(3, 55, 42, 0.97) 0%,
            rgba(3, 70, 50, 0.86) 48%,
            rgba(3, 70, 50, 0.48) 100%
        ),
        url("aset/fotobersama1.jpeg");
    background-size: cover;
    background-position: center;
}
.student-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(255, 255, 255, 0.08),
            transparent 30%
        );
}
.student-hero-container {
    position: relative;
    z-index: 2;
}
.student-hero-content {
    max-width: 750px;
    color: var(--white);
}
.student-hero-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.09);
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 20px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}
.student-hero-badge i {
    color: var(--gold);
}
.student-hero h1 {
    font-size: clamp(43px, 6vw, 68px);
    line-height: 1.08;
    letter-spacing: -3px;
}
.student-hero h1 span {
    display: block;
    color: #f2cf7a;
}
.student-hero-content > p {
    max-width: 620px;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.85;
}

/* INTRO KESISWAAN */
.student-intro-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 75px;
    align-items: center;
}
.student-intro-content > p {
    margin-top: 17px;
    color: var(--text-light);
    font-size: 13px;
}
.student-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 28px;
}
.student-points div {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    font-size: 10.5px;
    font-weight: 700;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.student-points i {
    color: var(--primary);
}

/* INTRO CARD */
.student-intro-card {
    position: relative;
    overflow: hidden;
    min-height: 430px;
    padding: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 28px;
    background:
        linear-gradient(
            145deg,
            var(--primary-deep),
            var(--primary)
        );
    color: var(--white);
    box-shadow: var(--shadow-md);
}
.student-intro-card::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -110px;
    top: -100px;
    border: 55px solid rgba(255, 255, 255, 0.04);
    border-radius: 50%;
}
.student-intro-icon {
    position: relative;
    z-index: 2;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.10);
    color: #f2cf7a;
    font-size: 26px;
}
.student-intro-card > span {
    position: relative;
    z-index: 2;
    margin-top: 30px;
    color: #f2cf7a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
.student-intro-card h3 {
    position: relative;
    z-index: 2;
    margin-top: 7px;
    font-size: clamp(30px, 4vw, 40px);
    line-height: 1.2;
    letter-spacing: -1.5px;
}
.student-intro-card p {
    position: relative;
    z-index: 2;
    max-width: 330px;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.63);
    font-size: 11px;
}

/* EKSTRAKURIKULER */
.extracurricular {
    background: var(--background);
}
.extracurricular-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
}
.extra-card {
    position: relative;
    overflow: hidden;
    min-height: 275px;
    padding: 27px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--white);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.extra-card:hover {
    transform: translateY(-7px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}
.extra-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 20px;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.extra-card:hover .extra-icon {
    background: var(--primary);
    color: var(--white);
}
.extra-card > small,
.extra-content small {
    display: block;
    margin-top: auto;
    padding-top: 25px;
    color: var(--primary);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.extra-card h3 {
    margin-top: 4px;
    color: var(--primary-dark);
    font-size: 16px;
}
.extra-card p {
    margin-top: 9px;
    color: var(--text-light);
    font-size: 10.5px;
}

/* PRAMUKA FEATURED CARD */
.extra-card.extra-main {
    grid-column: span 2;
    min-height: 330px;
    padding: 35px;
    background:
        linear-gradient(
            135deg,
            var(--primary-deep),
            var(--primary)
        );
    border-color: transparent;
    color: var(--white);
}
.extra-main::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -120px;
    bottom: -120px;
    border: 50px solid rgba(255, 255, 255, 0.04);
    border-radius: 50%;
}
.extra-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.extra-top > span {
    padding: 7px 12px;
    border-radius: 100px;
    background: rgba(242, 207, 122, 0.15);
    color: #f2cf7a;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}
.extra-main .extra-icon {
    background: rgba(255, 255, 255, 0.10);
    color: #f2cf7a;
}
.extra-main:hover .extra-icon {
    background: #f2cf7a;
    color: var(--primary-deep);
}
.extra-content {
    position: relative;
    z-index: 2;
    margin-top: auto;
    max-width: 500px;
}
.extra-content small {
    color: #f2cf7a;
}
.extra-main h3 {
    color: var(--white);
    font-size: 27px;
}
.extra-main p {
    max-width: 500px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
}

/* PEMBIASAAN */
.habit-section {
    position: relative;
    overflow: hidden;
    background: var(--primary-deep);
    color: var(--white);
}
.habit-section::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    left: -330px;
    bottom: -330px;
    border: 100px solid rgba(255, 255, 255, 0.02);
    border-radius: 50%;
}
.habit-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 80px;
    align-items: center;
}
.habit-heading h2 {
    font-size: clamp(33px, 4vw, 48px);
    line-height: 1.2;
    letter-spacing: -2px;
}
.habit-heading h2 span {
    display: block;
    color: #f2cf7a;
}
.habit-heading > p {
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 11.5px;
}
.habit-quote {
    margin-top: 30px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.045);
}
.habit-quote i {
    color: #f2cf7a;
    font-size: 18px;
}
.habit-quote p {
    color: rgba(255, 255, 255, 0.66);
    font-size: 10.5px;
}

/* HABIT LIST */
.habit-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.habit-item {
    display: grid;
    grid-template-columns: 35px 48px 1fr;
    align-items: center;
    gap: 15px;
    min-height: 80px;
    padding: 13px 18px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    transition: var(--transition);
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    -ms-border-radius: 14px;
    -o-border-radius: 14px;
}
.habit-item:hover {
    transform: translateX(6px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(242, 207, 122, 0.35);
}
.habit-item > span {
    color: rgba(255, 255, 255, 0.28);
    font-size: 9px;
    font-weight: 800;
}
.habit-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(242, 207, 122, 0.10);
    color: #f2cf7a;
    font-size: 15px;
}
.habit-item h3 {
    font-size: 12px;
}
.habit-item p {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.50);
    font-size: 9px;
}

/* STUDENT VALUES */
.student-values {
    background: var(--white);
}
.student-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
}
.student-values-grid article {
    min-height: 265px;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 19px;
    transition: var(--transition);
    -webkit-border-radius: 19px;
    -moz-border-radius: 19px;
    -ms-border-radius: 19px;
    -o-border-radius: 19px;
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.student-values-grid article:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}
.student-values-grid article > div {
    width: 57px;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 20px;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.student-values-grid article:hover > div {
    background: var(--primary);
    color: var(--white);
}
.student-values-grid h3 {
    margin-top: 25px;
    color: var(--primary-dark);
    font-size: 16px;
}
.student-values-grid p {
    margin-top: 10px;
    color: var(--text-light);
    font-size: 10.5px;
}

/* 7 SIKAP DASAR - KESISWAAN */
.student-character {
    background: var(--background-soft);
}
.student-character-container {
    display: grid;
    grid-template-columns: 0.65fr 1.35fr;
    gap: 75px;
    align-items: center;
}
.student-character-heading > span {
    color: var(--primary);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.student-character-heading h2 {
    margin-top: 8px;
    font-size: clamp(32px, 4vw, 45px);
    line-height: 1.2;
    letter-spacing: -2px;
}
.student-character-heading h2 strong {
    display: block;
    color: var(--primary);
    font-weight: 800;
}
.student-character-heading p {
    max-width: 400px;
    margin-top: 17px;
    color: var(--text-light);
    font-size: 11px;
}
.student-character-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
}
.student-character-list > div {
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 17px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--white);
    transition: var(--transition);
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    -ms-border-radius: 13px;
    -o-border-radius: 13px;
}
.student-character-list > div:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}
.student-character-list span {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 8px;
    font-weight: 800;
}
.student-character-list strong {
    font-size: 11px;
}

/* GALERI PREVIEW */
.student-gallery {
    background: var(--white);
}
.student-gallery-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
}
.student-gallery-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    grid-template-rows: repeat(2, 230px);
    gap: 15px;
}
.student-gallery-item {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 20px;
    background: var(--primary-deep);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.student-gallery-item.gallery-large {
    grid-row: span 2;
}
.student-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    -webkit-transition: transform 0.6s ease;
    -moz-transition: transform 0.6s ease;
    -ms-transition: transform 0.6s ease;
    -o-transition: transform 0.6s ease;
}
.student-gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(2, 40, 30, 0.90),
            rgba(2, 40, 30, 0.05) 65%
        );
}
.student-gallery-item:hover img {
    transform: scale(1.07);
}
.student-gallery-item > div {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 23px;
    z-index: 3;
    color: var(--white);
}
.student-gallery-item span {
    color: #f2cf7a;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.student-gallery-item h3 {
    margin-top: 3px;
    font-size: 17px;
}
.gallery-large h3 {
    font-size: 25px;
}

@media (max-width: 1050px) {
    .extracurricular-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .extra-card.extra-main {
        grid-column: span 2;
    }
    .student-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .student-intro-grid,
    .habit-grid,
    .student-character-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .student-intro-card {
        min-height: 370px;
    }
    .extracurricular-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .student-character-heading {
        max-width: 600px;
    }
}

@media (max-width: 700px) {
    .student-gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 350px 220px 220px;
    }
    .student-gallery-item.gallery-large {
        grid-row: auto;
    }
}

@media (max-width: 600px) {
    /* HERO */
    .student-hero {
        min-height: 420px;
        background:
            linear-gradient(
                rgba(3, 55, 42, 0.91),
                rgba(3, 55, 42, 0.91)
            ),
            url("aset/fotobersama1.jpeg");
        background-size: cover;
        background-position: center;
    }
    .student-hero h1 {
        font-size: 41px;
        letter-spacing: -2px;
    }

    /* INTRO */
    .student-points {
        grid-template-columns: 1fr;
    }
    .student-intro-card {
        min-height: 340px;
        padding: 30px;
    }

    /* EKSTRAKURIKULER */
    .extracurricular-grid {
        grid-template-columns: 1fr;
    }
    .extra-card.extra-main {
        grid-column: auto;
        min-height: 320px;
    }
    .extra-card {
        min-height: 245px;
    }

    /* HABIT */
    .habit-item {
        grid-template-columns: 30px 42px 1fr;
        padding: 12px;
    }

    /* VALUES */
    .student-values-grid {
        grid-template-columns: 1fr;
    }
    .student-values-grid article {
        min-height: 230px;
    }

    /* CHARACTER */
    .student-character-list {
        grid-template-columns: 1fr;
    }

    /* GALLERY */
    .student-gallery-header {
        align-items: flex-start;
        flex-direction: column;
    }
    .student-gallery-grid {
        grid-template-rows: 300px 200px 200px;
    }
    .student-gallery-item > div {
        left: 18px;
        bottom: 17px;
    }
    .gallery-large h3 {
        font-size: 20px;
    }
}

@media (max-width: 380px) {
    .student-hero h1 {
        font-size: 36px;
    }
    .habit-item {
        grid-template-columns: 30px 1fr;
    }
    .habit-icon {
        display: none;
    }
}

/* HERO PROGRAM */
.program-hero {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            90deg,
            rgba(3, 55, 42, 0.97) 0%,
            rgba(3, 70, 50, 0.86) 48%,
            rgba(3, 70, 50, 0.48) 100%
        ),
        url("aset/fotobersama1.jpeg");
    background-size: cover;
    background-position: center;
}
.program-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 78% 28%,
            rgba(255,255,255,0.08),
            transparent 30%
        );
}
.program-hero-container {
    position: relative;
    z-index: 2;
}
.program-hero-content {
    max-width: 760px;
    color: var(--white);
}
.program-hero-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 100px;
    background: rgba(255,255,255,0.09);
    font-size: 10px;
    font-weight: 700;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}
.program-hero-badge i {
    color: var(--gold);
}
.program-hero h1 {
    font-size: clamp(43px, 6vw, 68px);
    line-height: 1.08;
    letter-spacing: -3px;
}
.program-hero h1 span {
    display: block;
    color: #f2cf7a;
}
.program-hero-content > p {
    max-width: 620px;
    margin-top: 18px;
    color: rgba(255,255,255,0.72);
    font-size: 13px;
    line-height: 1.85;
}

/* INTRO PROGRAM */
.program-intro-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 75px;
    align-items: center;
}
.program-intro-content > p {
    margin-top: 17px;
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.8;
}
.program-intro-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 28px;
}
.program-intro-points > span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    font-size: 10.5px;
    font-weight: 700;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.program-intro-points i {
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 8px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

/* INTRO VISUAL */
.program-intro-visual {
    position: relative;
    overflow: hidden;
    min-height: 430px;
    padding: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 28px;
    background:
        linear-gradient(
            145deg,
            var(--primary-deep),
            var(--primary)
        );
    color: var(--white);
    box-shadow: var(--shadow-md);
}
.program-intro-visual::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -120px;
    top: -110px;
    border: 55px solid rgba(255,255,255,0.04);
    border-radius: 50%;
}
.program-intro-visual::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: 40px;
    bottom: -70px;
    border: 30px solid rgba(242,207,122,0.05);
    border-radius: 50%;
}
.program-visual-icon {
    position: relative;
    z-index: 2;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(255,255,255,0.10);
    color: #f2cf7a;
    font-size: 27px;
}
.program-intro-visual > span {
    position: relative;
    z-index: 2;
    margin-top: 31px;
    color: #f2cf7a;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
.program-intro-visual h3 {
    position: relative;
    z-index: 2;
    margin-top: 8px;
    font-size: clamp(29px, 4vw, 39px);
    line-height: 1.2;
    letter-spacing: -1.5px;
}
.program-intro-visual p {
    position: relative;
    z-index: 2;
    max-width: 330px;
    margin-top: 18px;
    color: rgba(255,255,255,0.62);
    font-size: 11px;
}

/* FEATURED PROGRAM */
.featured-program {
    background: var(--background);
}
.featured-program-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px;
}
.program-card {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 21px;
    background: var(--white);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.program-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}
.program-card-number {
    position: absolute;
    right: 20px;
    top: 10px;
    color: #edf3f0;
    font-size: 50px;
    font-weight: 800;
    line-height: 1;
}
.program-card-icon {
    position: relative;
    z-index: 2;
    width: 57px;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 20px;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.program-card:hover .program-card-icon {
    background: var(--primary);
    color: var(--white);
}
.program-card-content {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding-top: 45px;
}
.program-card-content > span {
    color: var(--primary);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.1px;
}
.program-card-content h3 {
    margin-top: 5px;
    color: var(--primary-dark);
    font-size: 19px;
}
.program-card-content p {
    max-width: 500px;
    margin-top: 9px;
    color: var(--text-light);
    font-size: 10.5px;
    line-height: 1.75;
}

/* MAIN PROGRAM CARD */
.program-card-main {
    grid-column: span 2;
    min-height: 390px;
    padding: 40px;
    background:
        linear-gradient(
            135deg,
            var(--primary-deep),
            var(--primary)
        );
    border-color: transparent;
    color: var(--white);
}
.program-card-main::after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    right: -150px;
    bottom: -160px;
    border: 65px solid rgba(255,255,255,0.035);
    border-radius: 50%;
}
.program-card-main .program-card-number {
    color: rgba(255,255,255,0.07);
    font-size: 80px;
}
.program-card-main .program-card-icon {
    background: rgba(255,255,255,0.10);
    color: #f2cf7a;
}
.program-card-main:hover .program-card-icon {
    background: #f2cf7a;
    color: var(--primary-deep);
}
.program-card-main .program-card-content {
    max-width: 620px;
}
.program-card-main .program-card-content > span {
    color: #f2cf7a;
}
.program-card-main .program-card-content h3 {
    color: var(--white);
    font-size: 29px;
}
.program-card-main .program-card-content p {
    color: rgba(255,255,255,0.64);
    font-size: 11px;
}
.program-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}
.program-tags span {
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 100px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.72);
    font-size: 8px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}

/* PANCA CINTA */
.love-program {
    position: relative;
    overflow: hidden;
    background: var(--primary-deep);
    color: var(--white);
}
.love-program::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    left: -350px;
    bottom: -350px;
    border: 100px solid rgba(255,255,255,0.02);
    border-radius: 50%;
}
.love-program-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 80px;
    align-items: center;
}
.love-program-heading h2 {
    font-size: clamp(34px, 4vw, 49px);
    line-height: 1.18;
    letter-spacing: -2px;
}
.love-program-heading h2 span {
    display: block;
    color: #f2cf7a;
}
.love-program-heading > p {
    margin-top: 18px;
    color: rgba(255,255,255,0.60);
    font-size: 11.5px;
    line-height: 1.8;
}
.love-program-message {
    margin-top: 28px;
    display: flex;
    gap: 14px;
    padding: 19px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 15px;
    background: rgba(255,255,255,0.04);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}
.love-program-message i {
    color: #f2cf7a;
    font-size: 17px;
}
.love-program-message p {
    color: rgba(255,255,255,0.60);
    font-size: 10px;
}

/* PANCA CINTA CARDS */
.love-program-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.love-program-list article {
    position: relative;
    min-height: 175px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 17px;
    background: rgba(255,255,255,0.04);
    transition: var(--transition);
}
.love-program-list article:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.07);
    border-color: rgba(242,207,122,0.35);
}
.love-program-list article:last-child {
    grid-column: span 2;
}
.love-program-list article > span {
    position: absolute;
    right: 15px;
    top: 11px;
    color: rgba(255,255,255,0.13);
    font-size: 22px;
    font-weight: 800;
}
.love-program-list article > div {
    width: 49px;
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(242,207,122,0.10);
    color: #f2cf7a;
    font-size: 18px;
}
.love-program-list h3 {
    margin-top: auto;
    padding-top: 25px;
    font-size: 12px;
    line-height: 1.5;
}

/* PROGRAM JUMAT */
.friday-program {
    background: var(--white);
}
.friday-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
    margin-bottom: 45px;
}
.friday-header > p {
    max-width: 430px;
    color: var(--text-light);
    font-size: 11px;
    line-height: 1.8;
}
.friday-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.friday-grid article {
    position: relative;
    overflow: hidden;
    min-height: 285px;
    padding: 27px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 19px;
    background: var(--white);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.friday-grid article:hover {
    transform: translateY(-7px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}
.friday-number {
    position: absolute;
    right: 16px;
    top: 11px;
    color: #e7efec;
    font-size: 27px;
    font-weight: 800;
}
.friday-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 19px;
    transition: var(--transition);
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
}
.friday-grid article:hover .friday-icon {
    background: var(--primary);

    color: var(--white);
}
.friday-grid article > span {
    margin-top: auto;
    padding-top: 35px;
    color: var(--primary);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.friday-grid h3 {
    margin-top: 4px;
    color: var(--primary-dark);
    font-size: 16px;
}
.friday-grid p {
    margin-top: 8px;
    color: var(--text-light);
    font-size: 10px;
    line-height: 1.7;
}

/* DEVELOPMENT PROGRAM */
.development-program {
    background: var(--background);
}
.development-program-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
.development-program-grid article {
    display: grid;
    grid-template-columns: 65px 1fr;
    gap: 20px;
    align-items: center;
    min-height: 180px;
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--white);
    transition: var(--transition);
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    -ms-border-radius: 18px;
    -o-border-radius: 18px;
}
.development-program-grid article:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}
.development-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 21px;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.development-program-grid article:hover .development-icon {
    background: var(--primary);
    color: var(--white);
}
.development-program-grid span {
    color: var(--primary);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.development-program-grid h3 {
    margin-top: 3px;
    color: var(--primary-dark);
    font-size: 15px;
}
.development-program-grid p {
    margin-top: 6px;
    color: var(--text-light);
    font-size: 10px;
    line-height: 1.7;
}

/* PROGRAM PROCESS */
.program-process {
    background: var(--white);
}
.program-process-wrapper {
    padding: 55px;
    border-radius: 27px;
    background: linear-gradient( 135deg, var(--primary-deep),            var(--primary)        );
    color: var(--white);
    -webkit-border-radius: 27px;
    -moz-border-radius: 27px;
    -ms-border-radius: 27px;
    -o-border-radius: 27px;
}
.program-process-heading {
    max-width: 700px;
    margin: 0 auto 50px;
    text-align: center;
}
.program-process-heading > span {
    color: #f2cf7a;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.program-process-heading h2 {
    margin-top: 9px;
    font-size: clamp(31px, 4vw, 43px);
    line-height: 1.2;
    letter-spacing: -2px;
}
.program-process-heading h2 strong {
    color: #f2cf7a;
}
.program-process-heading p {
    max-width: 580px;
    margin: 17px auto 0;
    color: rgba(255,255,255,0.60);
    font-size: 10.5px;
    line-height: 1.8;
}
.program-process-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
.program-process-list > div {
    width: 145px;
    height: 145px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
    transition: var(--transition);
}
.program-process-list > div:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.09);
    border-color: rgba(242,207,122,0.40);
}
.program-process-list > div span {
    position: absolute;
    right: 10px;
    top: 8px;
    color: rgba(255,255,255,0.18);
    font-size: 9px;
    font-weight: 800;
}
.program-process-list > div i {
    color: #f2cf7a;
    font-size: 21px;
}
.program-process-list > div strong {
    margin-top: 12px;
    font-size: 10px;
}
.process-arrow {
    color: rgba(255,255,255,0.28);
    font-size: 11px;
}

@media (max-width: 1050px) {
    .friday-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .program-intro-grid,
    .love-program-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .program-intro-visual {
        min-height: 370px;
    }
    .program-process-list {
        flex-wrap: wrap;
    }
    .process-arrow {
        display: none;
    }
}

@media (max-width: 700px) {
    .featured-program-grid {
        grid-template-columns: 1fr;
    }
    .program-card-main {
        grid-column: auto;
    }
    .development-program-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    /* HERO */
    .program-hero {
        min-height: 420px;
        background:
            linear-gradient(
                rgba(3,55,42,0.91),
                rgba(3,55,42,0.91)
            ),
            url("aset/fotobersama1.jpeg");

        background-size: cover;
        background-position: center;
    }
    .program-hero h1 {
        font-size: 41px;
        letter-spacing: -2px;
    }

    /* INTRO */
    .program-intro-points {
        grid-template-columns: 1fr;
    }
    .program-intro-visual {
        min-height: 340px;
        padding: 30px;
    }
    .program-intro-visual h3 {
        font-size: 29px;
    }

    /* PROGRAM */
    .program-card {
        min-height: 270px;
        padding: 25px;
    }
    .program-card-main {
        min-height: 340px;
        padding: 28px;
    }
    .program-card-main .program-card-content h3 {
        font-size: 24px;
    }

    /* PANCA CINTA */
    .love-program-list {
        grid-template-columns: 1fr;
    }
    .love-program-list article:last-child {
        grid-column: auto;
    }

    /* JUMAT */
    .friday-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
    .friday-grid {
        grid-template-columns: 1fr;
    }
    .friday-grid article {
        min-height: 245px;
    }

    /* DEVELOPMENT */
    .development-program-grid article {
        grid-template-columns: 55px 1fr;
        padding: 20px;
    }
    .development-icon {
        width: 52px;
        height: 52px;
        font-size: 18px;
    }

    /* PROCESS */
    .program-process-wrapper {
        padding: 40px 20px;
    }
    .program-process-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .program-process-list > div {
        width: 100%;
        height: 130px;
    }
}

@media (max-width: 380px) {
    .program-hero h1 {
        font-size: 36px;
    }
    .program-process-list {
        grid-template-columns: 1fr;
    }
}

/* HERO GALERI */
.gallery-hero {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            90deg,
            rgba(3, 55, 42, 0.97) 0%,
            rgba(3, 70, 50, 0.86) 48%,
            rgba(3, 70, 50, 0.48) 100%
        ),
        url("aset/fotobersama1.jpeg");
    background-size: cover;
    background-position: center;
}
.gallery-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(255,255,255,0.08),
            transparent 30%
        );
}
.gallery-hero-container {
    position: relative;
    z-index: 2;
}
.gallery-hero-content {
    max-width: 760px;
    color: var(--white);
}
.gallery-hero-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 100px;
    background: rgba(255,255,255,0.09);
    font-size: 10px;
    font-weight: 700;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}
.gallery-hero-badge i {
    color: var(--gold);
}
.gallery-hero h1 {
    font-size: clamp(43px, 6vw, 68px);
    line-height: 1.08;
    letter-spacing: -3px;
}
.gallery-hero h1 span {
    display: block;
    color: #f2cf7a;
}
.gallery-hero-content > p {
    max-width: 620px;
    margin-top: 18px;
    color: rgba(255,255,255,0.72);
    font-size: 13px;
    line-height: 1.85;
}

/* INTRO GALERI */
.gallery-intro {
    padding-bottom: 45px;
}
.gallery-intro-wrapper {
    display: grid;
    grid-template-columns: 1fr 0.65fr;
    gap: 70px;
    align-items: end;
}
.gallery-intro-wrapper > p {
    color: var(--text-light);
    font-size: 11.5px;
    line-height: 1.85;
}

/* MAIN GALLERY */
.main-gallery {
    padding-bottom: 100px;
    background: var(--white);
}

/* FILTER */
.gallery-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 38px;
}
.gallery-filter-btn {
    appearance: none;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 100px;
    background: var(--white);
    color: var(--text-light);
    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}
.gallery-filter-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}
.gallery-filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
    box-shadow: 0 8px 20px rgba(4, 88, 64, 0.16);
}

/* GALLERY GRID */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 240px;
    grid-auto-flow: dense;
    gap: 13px;
}

/* GALLERY CARD */
.gallery-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: var(--primary-deep);
    transition:        opacity 0.3s ease,        transform 0.3s ease;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    -ms-border-radius: 18px;
    -o-border-radius: 18px;
}
.gallery-card.gallery-tall {
    grid-row: span 2;
}
.gallery-card.gallery-wide {
    grid-column: span 2;
}
.gallery-card.hide {
    display: none;
}

/* BUTTON */
.gallery-open {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    overflow: hidden;
    text-align: left;
}

/* IMAGE */
.gallery-open img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.65s ease;
    -webkit-transition: transform 0.65s ease;
    -moz-transition: transform 0.65s ease;
    -ms-transition: transform 0.65s ease;
    -o-transition: transform 0.65s ease;
}
.gallery-card:hover img {
    transform: scale(1.07);
}

/* OVERLAY */
.gallery-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 22px;
    background:
        linear-gradient(
            to top,
            rgba(2, 37, 28, 0.94) 0%,
            rgba(2, 37, 28, 0.50) 38%,
            rgba(2, 37, 28, 0.05) 75%
        );
    transition: background 0.4s ease;
}
.gallery-card:hover .gallery-overlay {
    background:
        linear-gradient(
            to top,
            rgba(2, 37, 28, 0.96) 0%,
            rgba(2, 37, 28, 0.57) 43%,
            rgba(2, 37, 28, 0.10) 80%
        );
}
.gallery-overlay span {
    color: #f2cf7a;
    font-size: 7.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.1px;
}
.gallery-overlay h3 {
    margin-top: 4px;
    color: var(--white);
    font-size: 14px;
    line-height: 1.3;
}
.gallery-overlay > i {
    width: 37px;
    height: 37px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.17);
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: var(--white);
    font-size: 10px;
    opacity: 0;
    transform: translateY(7px);
    transition: var(--transition);
    -webkit-transform: translateY(7px);
    -moz-transform: translateY(7px);
    -ms-transform: translateY(7px);
    -o-transform: translateY(7px);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.gallery-card:hover .gallery-overlay > i {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
}

/* GALLERY MESSAGE */
.gallery-message {
    background: var(--background);
}
.gallery-message-box {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    gap: 35px;
    padding: 55px;
    border-radius: 27px;
    background: linear-gradient( 135deg, var(--primary-deep),            var(--primary)        );
    color: var(--white);
    -webkit-border-radius: 27px;
    -moz-border-radius: 27px;
    -ms-border-radius: 27px;
    -o-border-radius: 27px;
}
.gallery-message-box::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    right: -170px;
    top: -170px;
    border: 70px solid rgba(255,255,255,0.035);
    border-radius: 50%;
}
.gallery-message-icon {
    position: relative;
    z-index: 2;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    background: rgba(255,255,255,0.09);
    color: #f2cf7a;
    font-size: 31px;
}
.gallery-message-box > div:last-child {
    position: relative;
    z-index: 2;
}
.gallery-message-box span {
    color: #f2cf7a;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
.gallery-message-box h2 {
    max-width: 650px;
    margin-top: 7px;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.2;
    letter-spacing: -1.5px;
}
.gallery-message-box h2 strong {
    color: #f2cf7a;
}
.gallery-message-box p {
    max-width: 570px;
    margin-top: 14px;
    color: rgba(255,255,255,0.61);
    font-size: 10.5px;
    line-height: 1.8;
}

/* LIGHTBOX */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 90px;
    background: rgba(0, 20, 15, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
    -moz-transition: opacity 0.3s ease, visibility 0.3s ease;
    -ms-transition: opacity 0.3s ease, visibility 0.3s ease;
    -o-transition: opacity 0.3s ease, visibility 0.3s ease;
}
.gallery-lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* LIGHTBOX CONTENT */
.lightbox-content {
    position: relative;
    width: min(100%, 1050px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.96);
    transition: transform 0.3s ease;
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
}
.gallery-lightbox.active .lightbox-content {
    transform: scale(1);
}
.lightbox-content img {
    width: 100%;
    max-height: 72vh;
    display: block;
    object-fit: contain;
    border-radius: 15px;
    background: rgba(255,255,255,0.03);
}
.lightbox-caption {
    padding-top: 17px;
    text-align: center;
}
.lightbox-caption span {
    color: #f2cf7a;
    font-size: 7.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.lightbox-caption h3 {
    margin-top: 4px;
    color: var(--white);
    font-size: 16px;
}

/* CLOSE */
.lightbox-close {
    position: absolute;
    top: 25px;
    right: 28px;
    z-index: 5;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    color: var(--white);
    cursor: pointer;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.lightbox-close:hover {
    background: var(--white);
    color: var(--primary-deep);
    transform: rotate(90deg);
}

/* PREV NEXT */
.lightbox-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    color: var(--white);
    cursor: pointer;
    transition: var(--transition);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.lightbox-nav:hover {
    background: var(--white);
    color: var(--primary-deep);
}
.lightbox-prev {
    left: 27px;
}
.lightbox-next {
    right: 27px;
}

/* STOP BODY SCROLL */
body.lightbox-open {
    overflow: hidden;
}

@media (max-width: 1000px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 800px) {
    .gallery-intro-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .gallery-intro-wrapper > p {
        max-width: 600px;
    }
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 220px;
    }
    .gallery-message-box {
        grid-template-columns: 75px 1fr;
        padding: 40px;
        gap: 25px;
    }
    .gallery-message-icon {
        width: 70px;
        height: 70px;
        border-radius: 20px;
        font-size: 25px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -ms-border-radius: 20px;
        -o-border-radius: 20px;
}
    .gallery-lightbox {
        padding: 70px 60px;
    }
}

@media (max-width: 600px) {
    /* HERO */
    .gallery-hero {
        min-height: 420px;
        background:
            linear-gradient(
                rgba(3,55,42,0.91),
                rgba(3,55,42,0.91)
            ),
            url("aset/fotobersama1.jpeg");
        background-size: cover;
        background-position: center;
    }
    .gallery-hero h1 {
        font-size: 41px;
        letter-spacing: -2px;
    }

    /* FILTER */
    .gallery-filter {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: none;
    }
    .gallery-filter::-webkit-scrollbar {
        display: none;
    }
    .gallery-filter-btn {
        flex-shrink: 0;
    }

    /* GRID */
    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 280px;
        gap: 11px;
    }
    .gallery-card.gallery-tall,
    .gallery-card.gallery-wide {
        grid-row: auto;
        grid-column: auto;
    }
    .gallery-overlay > i {
        opacity: 1;
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
}

    /* MESSAGE */
    .gallery-message-box {
        grid-template-columns: 1fr;
        min-height: 360px;
        padding: 32px 27px;
    }
    .gallery-message-icon {
        width: 65px;
        height: 65px;
    }

    /* LIGHTBOX */
    .gallery-lightbox {
        padding: 75px 15px 30px;
    }
    .lightbox-close {
        top: 18px;
        right: 18px;
    }
    .lightbox-nav {
        width: 39px;
        height: 39px;
        top: auto;
        bottom: 25px;
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
    }
    .lightbox-prev {
        left: 18px;
    }
    .lightbox-next {
        right: 18px;
    }
    .lightbox-caption {
        padding: 15px 50px 0;
    }
}

@media (max-width: 380px) {
    .gallery-hero h1 {
        font-size: 36px;
    }
    .gallery-grid {
        grid-auto-rows: 250px;
    }
}

/* HERO KONTAK */
.contact-hero {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            90deg,
            rgba(3, 55, 42, 0.97) 0%,
            rgba(3, 70, 50, 0.86) 48%,
            rgba(3, 70, 50, 0.48) 100%
        ),
        url("aset/fotobersama1.jpeg");
    background-size: cover;
    background-position: center;
}
.contact-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(255, 255, 255, 0.08),
            transparent 30%
        );
}
.contact-hero-container {
    position: relative;
    z-index: 2;
}
.contact-hero-content {
    max-width: 760px;
    color: var(--white);
}
.contact-hero-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.09);
    font-size: 10px;
    font-weight: 700;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}
.contact-hero-badge i {
    color: var(--gold);
}
.contact-hero h1 {
    font-size: clamp(43px, 6vw, 68px);
    line-height: 1.08;
    letter-spacing: -3px;
}
.contact-hero h1 span {
    display: block;
    color: #f2cf7a;
}
.contact-hero-content > p {
    max-width: 620px;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.85;
}

/* INTRO KONTAK */
.contact-intro {
    padding-bottom: 45px;
}
.contact-intro-grid {
    display: grid;
    grid-template-columns: 1fr 0.65fr;
    gap: 70px;
    align-items: end;
}
.contact-intro-text p {
    color: var(--text-light);
    font-size: 11.5px;
    line-height: 1.85;
}

/* CONTACT INFORMATION */
.contact-info {
    padding-bottom: 100px;
}
.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.contact-info-card {
    position: relative;
    overflow: hidden;
    min-height: 245px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 19px;
    background: var(--white);
    transition: var(--transition);
}
.contact-info-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}
.contact-info-main {
    grid-column: span 2;
    background:
        linear-gradient(
            135deg,
            var(--primary-deep),
            var(--primary)
        );
    border-color: transparent;
    color: var(--white);
}
.contact-info-main::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -110px;
    bottom: -120px;
    border: 45px solid rgba(255, 255, 255, 0.04);
    border-radius: 50%;
}

/* CARD TOP */
.contact-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.contact-info-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 18px;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.contact-info-card:hover .contact-info-icon {
    background: var(--primary);
    color: var(--white);
}
.contact-info-main .contact-info-icon {
    background: rgba(255, 255, 255, 0.10);
    color: #f2cf7a;
}
.contact-info-main:hover .contact-info-icon {
    background: #f2cf7a;

    color: var(--primary-deep);
}
.contact-card-top > span {
    color: #dce8e3;
    font-size: 23px;
    font-weight: 800;
}
.contact-info-main .contact-card-top > span {
    color: rgba(255, 255, 255, 0.12);
}

/* CARD CONTENT */
.contact-info-content {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding-top: 35px;
}
.contact-info-content small {
    color: var(--primary);
    font-size: 7.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.contact-info-content h3 {
    margin-top: 4px;
    color: var(--primary-dark);
    font-size: 17px;
}
.contact-info-content p {
    margin-top: 8px;
    color: var(--text-light);
    font-size: 10px;
}
.contact-info-content strong {
    display: block;
    margin-top: 3px;
    color: var(--primary-dark);
    font-size: 10.5px;
}
.contact-info-content a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    color: var(--primary-dark);
    font-size: 10.5px;
    font-weight: 700;
    word-break: break-word;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.contact-info-content a:hover {
    color: var(--primary);
}
.contact-info-main .contact-info-content small {
    color: #f2cf7a;
}
.contact-info-main .contact-info-content h3,
.contact-info-main .contact-info-content strong {
    color: var(--white);
}
.contact-info-main .contact-info-content p {
    color: rgba(255, 255, 255, 0.62);
}

/* MAP + FORM */
.contact-main {
    background: var(--background);
}
.contact-main-grid {
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    gap: 25px;
    align-items: stretch;
}

/* LOCATION */
.contact-location {
    padding: 15px 15px 15px 0;
}
.contact-location h2 {
    margin-top: 7px;
    font-size: clamp(31px, 4vw, 43px);
    line-height: 1.2;
    letter-spacing: -1.5px;
}
.contact-location h2 span {
    display: block;
    color: var(--primary);
}
.contact-location > p {
    max-width: 500px;
    margin-top: 14px;
    color: var(--text-light);
    font-size: 11px;
    line-height: 1.8;
}

/* MAP */
.contact-map {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 390px;
    margin-top: 28px;
    border-radius: 20px;
    background: #e7efeb;
    box-shadow: var(--shadow-sm);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.contact-map iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

/* MAP BUTTON */
.contact-map-button {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 17px;
    padding: 11px 16px;
    border: 1px solid var(--border);
    border-radius: 100px;
    background: var(--white);
    color: var(--primary-dark);
    font-size: 9px;
    font-weight: 700;
    transition: var(--transition);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}
.contact-map-button:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
    transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
}
.contact-map-button i:last-child {
    font-size: 7px;
    opacity: 0.6;
}

/* CONTACT FORM */
.contact-form-wrapper {
    position: relative;
    overflow: hidden;
    padding: 40px;
    border-radius: 25px;
    background: linear-gradient( 145deg, var(--primary-deep),            var(--primary)        );
    color: var(--white);
    box-shadow: var(--shadow-md);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}
.contact-form-wrapper::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -140px;
    top: -130px;
    border: 55px solid rgba(255, 255, 255, 0.035);
    border-radius: 50%;
}
.contact-form-header {
    position: relative;
    z-index: 2;
    margin-bottom: 28px;
}
.contact-form-header > span {
    color: #f2cf7a;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.3px;
}
.contact-form-header h2 {
    margin-top: 6px;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -1px;
}
.contact-form-header h2 strong {
    display: block;
    color: #f2cf7a;
}
.contact-form-header p {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.60);
    font-size: 10px;
    line-height: 1.7;
}

/* FORM */
.contact-form {
    position: relative;
    z-index: 2;
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 8.5px;
    font-weight: 700;
}
.form-input {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    transition: var(--transition);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.form-input:focus-within {
    border-color: rgba(242, 207, 122, 0.65);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 3px rgba(242, 207, 122, 0.06);
}
.form-input > i {
    width: 17px;
    flex-shrink: 0;
    color: #f2cf7a;
    font-size: 11px;
}
.form-input input,
.form-input select,
.form-input textarea {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--white);
    font-family: inherit;
    font-size: 10px;
}
.form-input input {
    height: 46px;
}
.form-input select {
    height: 46px;
    cursor: pointer;
}
.form-input select option {
    background: var(--primary-deep);
    color: var(--white);
}
.form-input input::placeholder,
.form-input textarea::placeholder {
    color: rgba(255, 255, 255, 0.36);
}
.form-textarea {
    align-items: flex-start;
    padding-top: 15px;
}
.form-textarea > i {
    margin-top: 2px;
}
.form-input textarea {
    min-height: 110px;
    resize: vertical;
    line-height: 1.6;
}

/* SUBMIT */
.contact-submit {
    width: 100%;
    min-height: 51px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 22px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: #f2cf7a;
    color: var(--primary-deep);
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.contact-submit i {
    font-size: 17px;
}
.contact-submit:hover {
    transform: translateY(-2px);
    background: var(--white);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* NOTE */
.contact-form-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 13px;
    color: rgba(255, 255, 255, 0.40);
    font-size: 7.5px;
    line-height: 1.6;
}
.contact-form-note i {
    margin-top: 2px;
    color: rgba(242, 207, 122, 0.65);
}

/* QUICK CONTACT / PPDB */
.contact-quick {
    background: var(--white);
}
.contact-quick-box {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 55px;
    border-radius: 27px;
    background: linear-gradient( 135deg, var(--primary-deep),            var(--primary)        );
    color: var(--white);
    -webkit-border-radius: 27px;
    -moz-border-radius: 27px;
    -ms-border-radius: 27px;
    -o-border-radius: 27px;
}
.contact-quick-box::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    right: -160px;
    top: -190px;
    border: 70px solid rgba(255, 255, 255, 0.035);
    border-radius: 50%;
}
.contact-quick-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}
.contact-quick-content > span {
    color: #f2cf7a;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.3px;
}
.contact-quick-content h2 {
    margin-top: 7px;
    font-size: clamp(29px, 4vw, 41px);
    line-height: 1.2;
    letter-spacing: -1.5px;
}
.contact-quick-content h2 strong {
    color: #f2cf7a;
}
.contact-quick-content p {
    max-width: 520px;
    margin-top: 13px;
    color: rgba(255, 255, 255, 0.61);
    font-size: 10.5px;
    line-height: 1.8;
}
.contact-quick-box > .btn {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

@media (max-width: 1050px) {
    .contact-info-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .contact-info-main {
        grid-column: span 2;
    }
}

@media (max-width: 900px) {
    .contact-intro-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .contact-intro-text {
        max-width: 600px;
    }
    .contact-main-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .contact-location {
        padding-right: 0;
    }
    .contact-form-wrapper {
        max-width: 700px;
    }
    .contact-quick-box {
        align-items: flex-start;
        flex-direction: column;
        gap: 30px;
    }
}

@media (max-width: 700px) {
    .contact-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    /* HERO */
    .contact-hero {
        min-height: 420px;
        background:
            linear-gradient(
                rgba(3, 55, 42, 0.91),
                rgba(3, 55, 42, 0.91)
            ),
            url("aset/fotobersama1.jpeg");
        background-size: cover;
        background-position: center;
    }
    .contact-hero h1 {
        font-size: 41px;
        letter-spacing: -2px;
    }

    /* INFO */
    .contact-info-grid {
        grid-template-columns: 1fr;
    }
    .contact-info-main {
        grid-column: auto;
        min-height: 260px;
    }
    .contact-info-card {
        min-height: 220px;
    }

    /* MAP */
    .contact-map {
        height: 320px;
        border-radius: 16px;
        -webkit-border-radius: 16px;
        -moz-border-radius: 16px;
        -ms-border-radius: 16px;
        -o-border-radius: 16px;
}

    /* FORM */
    .contact-form-wrapper {
        padding: 30px 22px;
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -ms-border-radius: 20px;
        -o-border-radius: 20px;
}
    .contact-form-header h2 {
        font-size: 27px;
    }

    /* QUICK */
    .contact-quick-box {
        min-height: 350px;
        padding: 35px 27px;
    }
}

@media (max-width: 380px) {
    .contact-hero h1 {
        font-size: 36px;
    }
    .contact-map {
        height: 280px;
    }
}

/* HERO PPDB */
.ppdb-hero {
    position: relative;
    overflow: hidden;
    min-height: 650px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            90deg,
            rgba(3, 55, 42, 0.98) 0%,
            rgba(3, 70, 50, 0.92) 52%,
            rgba(3, 70, 50, 0.68) 100%
        ),
        url("aset/fotobersama1.jpeg");
    background-size: cover;
    background-position: center;
}
.ppdb-hero::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -220px;
    top: -220px;
    border: 90px solid rgba(255,255,255,0.025);
    border-radius: 50%;
}
.ppdb-hero::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    left: -170px;
    bottom: -180px;
    border: 60px solid rgba(242,207,122,0.035);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.ppdb-hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: grid;
    grid-template-columns: 1.15fr 0.65fr;
    gap: 70px;
    align-items: center;
}
.ppdb-hero-content {
    color: var(--white);
    margin-left: 80px;
}
.ppdb-hero-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 100px;
    background: rgba(255,255,255,0.08);
    font-size: 9px;
    font-weight: 700;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}
.ppdb-hero-badge i {
    color: #f2cf7a;
}
.ppdb-hero h1 {
    max-width: 750px;
    font-size: clamp(43px, 5.5vw, 67px);
    line-height: 1.07;
    letter-spacing: -3px;
}
.ppdb-hero h1 span {
    display: block;
    color: #f2cf7a;
}
.ppdb-hero-content > p {
    max-width: 620px;
    margin-top: 20px;
    color: rgba(255,255,255,0.68);
    font-size: 12px;
    line-height: 1.85;
}

/* HERO ACTION */
.ppdb-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}
.btn-gold {
    background: #f2cf7a;
    color: var(--primary-deep);
}
.btn-gold:hover {
    background: var(--white);
    color: var(--primary-deep);
    transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
}
.ppdb-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 18px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 100px;
    background: rgba(255,255,255,0.06);
    color: var(--white);
    font-size: 9px;
    font-weight: 700;
    transition: var(--transition);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}
.ppdb-outline-btn:hover {
    background: var(--white);
    color: var(--primary-deep);
}

/* HERO CARD */
.ppdb-hero-card {
    position: relative;
    overflow: hidden;
    margin-right: 30px;
    min-height: 390px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 25px;
    background: rgba(255,255,255,0.09);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: var(--white);
    box-shadow: 0 25px 60px rgba(0,0,0,0.16);
}
.ppdb-hero-card::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    right: -100px;
    top: -100px;
    border: 40px solid rgba(255,255,255,0.035);
    border-radius: 50%;
}
.ppdb-card-icon {
    position: relative;
    z-index: 2;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 19px;
    background: rgba(242,207,122,0.13);
    color: #f2cf7a;
    font-size: 24px;
}
.ppdb-hero-card > span {
    position: relative;
    z-index: 2;
    margin-top: 30px;
    color: #f2cf7a;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.ppdb-hero-card h2 {
    position: relative;
    z-index: 2;
    margin-top: 7px;
    font-size: 27px;
    line-height: 1.2;
    letter-spacing: -1px;
}
.ppdb-hero-card > p {
    position: relative;
    z-index: 2;
    margin-top: 12px;
    color: rgba(255,255,255,0.58);
    font-size: 10px;
    line-height: 1.75;
}
.ppdb-card-line {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 1px;
    margin: auto 0 20px;
    background: rgba(255,255,255,0.10);
}
.ppdb-card-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ppdb-card-bottom small {
    display: block;
    color: rgba(255,255,255,0.45);
    font-size: 7px;
}
.ppdb-card-bottom strong {
    display: block;
    margin-top: 3px;
    color: var(--white);
    font-size: 10px;
}
.ppdb-card-bottom > i {
    color: #f2cf7a;
}

/* INTRO */
.ppdb-intro-grid {
    display: grid;
    grid-template-columns: 1fr 0.65fr;
    gap: 70px;
    align-items: end;
}
.ppdb-intro-text p {
    color: var(--text-light);
    font-size: 11.5px;
    line-height: 1.85;
}
.ppdb-intro-text a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 17px;
    color: var(--primary);
    font-size: 9px;
    font-weight: 800;
}
.ppdb-intro-text a i {
    font-size: 8px;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.ppdb-intro-text a:hover i {
    transform: translateY(3px);
}

/* REASONS */
.ppdb-reasons {
    padding: 90px 0;
    background: var(--background);
}
.ppdb-reasons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.ppdb-reasons-grid article {
    position: relative;
    overflow: hidden;
    min-height: 290px;
    padding: 27px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 19px;
    background: var(--white);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.ppdb-reasons-grid article:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}
.ppdb-reasons-grid article > span {
    position: absolute;
    right: 18px;
    top: 12px;
    color: #e8f0ed;
    font-size: 26px;
    font-weight: 800;
}
.ppdb-reason-icon {
    width: 57px;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 20px;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.ppdb-reasons-grid article:hover .ppdb-reason-icon {
    background: var(--primary);
    color: var(--white);
}
.ppdb-reasons-grid h3 {
    margin-top: auto;
    padding-top: 40px;
    color: var(--primary-dark);
    font-size: 15px;
}
.ppdb-reasons-grid p {
    margin-top: 8px;
    color: var(--text-light);
    font-size: 9.5px;
    line-height: 1.75;
}

/* ALUR PPDB */
.ppdb-flow {
    position: relative;
    overflow: hidden;
    background: var(--primary-deep);
    color: var(--white);
}
.ppdb-flow::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    left: -350px;
    bottom: -350px;
    border: 100px solid rgba(255,255,255,0.018);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.ppdb-flow-heading {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 50px;
}
.ppdb-flow-heading h2 {
    font-size: clamp(35px, 4vw, 49px);
    line-height: 1.15;
    letter-spacing: -2px;
}
.ppdb-flow-heading h2 span {
    display: block;
    color: #f2cf7a;
}
.ppdb-flow-heading > p {
    max-width: 430px;
    color: rgba(255,255,255,0.55);
    font-size: 10.5px;
    line-height: 1.8;
}

/* FLOW GRID */
.ppdb-flow-grid {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.ppdb-flow-grid article {
    position: relative;
    width: 185px;
    min-height: 260px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 17px;
    background: rgba(255,255,255,0.04);
    transition: var(--transition);
}
.ppdb-flow-grid article:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,0.07);
    border-color: rgba(242,207,122,0.35);
}
.ppdb-step-number {
    position: absolute;
    right: 13px;
    top: 10px;
    color: rgba(255,255,255,0.13);
    font-size: 21px;
    font-weight: 800;
}
.ppdb-step-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(242,207,122,0.10);
    color: #f2cf7a;
    font-size: 17px;
}
.ppdb-flow-grid article > span {
    margin-top: auto;
    padding-top: 30px;
    color: #f2cf7a;
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.ppdb-flow-grid h3 {
    margin-top: 5px;
    color: var(--white);
    font-size: 13px;
}
.ppdb-flow-grid p {
    margin-top: 8px;
    color: rgba(255,255,255,0.50);
    font-size: 8.5px;
    line-height: 1.7;
}
.ppdb-flow-arrow {
    flex-shrink: 0;
    color: rgba(255,255,255,0.22);
    font-size: 10px;
}

/* REQUIREMENTS */
.ppdb-requirements {
    background: var(--white);
}
.ppdb-requirements-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 70px;
    align-items: center;
}
.ppdb-requirements-heading > p {
    margin-top: 17px;
    color: var(--text-light);
    font-size: 11px;
    line-height: 1.8;
}

/* NOTE */
.ppdb-requirement-note {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 25px;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--background);
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    -ms-border-radius: 14px;
    -o-border-radius: 14px;
}
.ppdb-requirement-note > i {
    margin-top: 2px;
    color: var(--primary);
    font-size: 14px;
}
.ppdb-requirement-note strong {
    color: var(--primary-dark);
    font-size: 9px;
}
.ppdb-requirement-note p {
    margin-top: 3px;
    color: var(--text-light);
    font-size: 8.5px;
    line-height: 1.6;
}

/* DOCUMENT BOX */
.ppdb-document-box {
    position: relative;
    overflow: hidden;
    min-height: 410px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            var(--primary-deep),
            var(--primary)
        );
    color: var(--white);

    box-shadow: var(--shadow-md);
}
.ppdb-document-box::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -130px;
    bottom: -130px;
    border: 55px solid rgba(255,255,255,0.035);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.ppdb-document-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.ppdb-document-header span {
    color: #f2cf7a;
    font-size: 7.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.ppdb-document-header h3 {
    margin-top: 4px;
    font-size: 21px;
}
.ppdb-document-header > i {
    color: #f2cf7a;
    font-size: 28px;
}

/* PLACEHOLDER */
.ppdb-document-placeholder {
    position: relative;
    z-index: 2;
    margin: auto 0;
    text-align: center;
}
.ppdb-document-placeholder > i {
    color: rgba(242,207,122,0.55);
    font-size: 38px;
}
.ppdb-document-placeholder h4 {
    margin-top: 15px;
    font-size: 15px;
}
.ppdb-document-placeholder p {
    max-width: 390px;
    margin: 8px auto 0;
    color: rgba(255,255,255,0.52);
    font-size: 9.5px;
    line-height: 1.7;
}
.ppdb-document-placeholder a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 15px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 100px;
    color: #f2cf7a;
    font-size: 8px;
    font-weight: 800;
    transition: var(--transition);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}
.ppdb-document-placeholder a:hover {
    background: #f2cf7a;
    border-color: #f2cf7a;

    color: var(--primary-deep);
}

/* INFORMATION */
.ppdb-information {
    background: var(--background);
}
.ppdb-information-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.ppdb-information-grid article {
    min-height: 270px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 19px;
    background: var(--white);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.ppdb-information-grid article:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}
.ppdb-information-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 19px;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.ppdb-information-grid article:hover .ppdb-information-icon {
    background: var(--primary);
    color: var(--white);
}
.ppdb-information-grid article > span {
    margin-top: auto;
    padding-top: 35px;
    color: var(--primary);
    font-size: 7.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.ppdb-information-grid h3 {
    margin-top: 4px;
    color: var(--primary-dark);
    font-size: 16px;
}
.ppdb-information-grid p {
    margin-top: 8px;
    color: var(--text-light);
    font-size: 9.5px;
    line-height: 1.7;
}

/* PPDB - DOCUMENT / BERKAS PENDAFTARAN */
.ppdb-document-list {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

/* ITEM DOKUMEN */
.ppdb-document-list li {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 62px;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.055);
    transition:        transform 0.3s ease,        background 0.3s ease,        border-color 0.3s ease;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    -ms-border-radius: 13px;
    -o-border-radius: 13px;
}

/* HOVER */
.ppdb-document-list li:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(242, 207, 122, 0.30);
}

/* ICON CHECK */
.ppdb-document-list li > i {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(242, 207, 122, 0.12);
    color: #f2cf7a;
    font-size: 10px;
    transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -o-transition: 0.3s ease;
}
.ppdb-document-list li:hover > i {
    background: #f2cf7a;
    color: var(--primary-deep);
    transform: scale(1.05);
}

/* TEKS DOKUMEN */
.ppdb-document-list li > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* JUDUL DOKUMEN */
.ppdb-document-list strong {
    display: block;
    color: var(--white);
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.5;
}

/* KETERANGAN */
.ppdb-document-list span {
    display: block;
    color: rgba(255, 255, 255, 0.47);
    font-size: 7.5px;
    line-height: 1.5;
}

/* NOMOR ITEM - OPSIONAL */
.ppdb-document-list {
    counter-reset: document-counter;
}
.ppdb-document-list li {
    counter-increment: document-counter;
}
.ppdb-document-list li::after {
    content: counter(document-counter, decimal-leading-zero);
    margin-left: auto;
    padding-left: 10px;
    color: rgba(255, 255, 255, 0.14);
    font-size: 10px;
    font-weight: 800;
}

/* JIKA DOKUMEN BANYAK */
.ppdb-document-box:has(.ppdb-document-list) {
    min-height: auto;
}

/* CATATAN DI BAWAH DOKUMEN */
.ppdb-document-note {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.48);
    font-size: 7.5px;
    line-height: 1.6;
}
.ppdb-document-note i {
    flex-shrink: 0;
    margin-top: 2px;
    color: #f2cf7a;
    font-size: 9px;
}

@media (max-width: 600px) {
    .ppdb-document-list {
        gap: 9px;
        margin-top: 23px;
    }
    .ppdb-document-list li {
        min-height: 58px;
        gap: 11px;
        padding: 11px 12px;
    }
    .ppdb-document-list li > i {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        -webkit-border-radius: 9px;
        -moz-border-radius: 9px;
        -ms-border-radius: 9px;
        -o-border-radius: 9px;
}
    .ppdb-document-list strong {
        font-size: 9px;
    }
    .ppdb-document-list span {
        font-size: 7px;
    }
    .ppdb-document-list li::after {
        display: none;
    }
}

@media (max-width: 380px) {
    .ppdb-document-list li {
        align-items: flex-start;
    }
    .ppdb-document-list li > i {
        margin-top: 2px;
    }
}

/* FAQ */
.ppdb-faq {
    background: var(--white);
}
.ppdb-faq-grid {
    display: grid;
    grid-template-columns: 0.65fr 1fr;
    gap: 80px;
    align-items: start;
}
.ppdb-faq-heading > p {
    margin-top: 15px;
    color: var(--text-light);
    font-size: 10.5px;
    line-height: 1.8;
}
.ppdb-faq-heading > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--primary);
    font-size: 9px;
    font-weight: 800;
}
.ppdb-faq-heading > a i {
    transition: var(--transition);
}
.ppdb-faq-heading > a:hover i {
    transform: translateX(4px);
}

/* FAQ ITEM */
.ppdb-faq-item {
    border-bottom: 1px solid var(--border);
}
.ppdb-faq-item:first-child {
    border-top: 1px solid var(--border);
}
.ppdb-faq-question {
    width: 100%;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 20px 0;
    border: 0;
    background: transparent;
    color: var(--primary-dark);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.ppdb-faq-question span {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}
.ppdb-faq-question i {
    width: 31px;
    height: 31px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 9px;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.ppdb-faq-item.active .ppdb-faq-question i {
    transform: rotate(45deg);
    background: var(--primary);
    color: var(--white);
}

/* ANSWER */
.ppdb-faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
    -webkit-transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
    -moz-transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
    -ms-transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
    -o-transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}
.ppdb-faq-answer p {
    max-width: 600px;
    padding: 0 55px 0 0;
    color: var(--text-light);
    font-size: 9.5px;
    line-height: 1.8;
}
.ppdb-faq-item.active .ppdb-faq-answer {
    opacity: 1;
    padding-bottom: 22px;
}

/* FINAL CTA */
.ppdb-final {
    padding-top: 30px;
    background: var(--white);
}
.ppdb-final-box {
    position: relative;
    overflow: hidden;
    min-height: 350px;
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center;
    gap: 35px;
    padding: 55px;
    border-radius: 28px;
    background: linear-gradient( 135deg, var(--primary-deep),            var(--primary)        );
    color: var(--white);
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    -ms-border-radius: 28px;
    -o-border-radius: 28px;
}
.ppdb-final-box::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    right: -190px;
    top: -220px;
    border: 80px solid rgba(255,255,255,0.035);
    border-radius: 50%;
}
.ppdb-final-icon {
    position: relative;
    z-index: 2;
    width: 85px;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 23px;
    background: rgba(255,255,255,0.09);
    color: #f2cf7a;
    font-size: 31px;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    -ms-border-radius: 23px;
    -o-border-radius: 23px;
}
.ppdb-final-content {
    position: relative;
    z-index: 2;
}
.ppdb-final-content > span {
    color: #f2cf7a;
    font-size: 7.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.3px;
}
.ppdb-final-content h2 {
    max-width: 580px;
    margin-top: 7px;
    font-size: clamp(29px, 4vw, 41px);
    line-height: 1.2;
    letter-spacing: -1.5px;
}
.ppdb-final-content h2 strong {
    color: #f2cf7a;
}
.ppdb-final-content p {
    max-width: 520px;
    margin-top: 13px;
    color: rgba(255,255,255,0.58);
    font-size: 10px;
    line-height: 1.8;
}
.ppdb-final-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ppdb-final-link {
    color: rgba(255,255,255,0.65);
    font-size: 8.5px;
    font-weight: 700;
    text-align: center;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.ppdb-final-link:hover {
    color: #f2cf7a;
}

@media (max-width: 1100px) {
    .ppdb-hero-container {
        grid-template-columns: 1fr 0.65fr;
        gap: 40px;
    }
    .ppdb-flow-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .ppdb-flow-grid article {
        width: 100%;
    }
    .ppdb-flow-arrow {
        display: none;
    }
}

@media (max-width: 900px) {
    .ppdb-hero {
        padding: 100px 0 70px;
    }
    .ppdb-hero-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }
    .ppdb-hero-card {
        max-width: 550px;
    }
    .ppdb-intro-grid,
    .ppdb-requirements-grid,
    .ppdb-faq-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }
    .ppdb-reasons-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ppdb-flow-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }
    .ppdb-final-box {
        grid-template-columns: 75px 1fr;
        gap: 25px;
    }
    .ppdb-final-icon {
        width: 70px;
        height: 70px;
        font-size: 26px;
    }
    .ppdb-final-actions {
        grid-column: 2;
        align-items: flex-start;
    }
}

@media (max-width: 700px) {
    .ppdb-flow-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ppdb-information-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {

    /* HERO */
    .ppdb-hero {
        min-height: auto;
        padding: 85px 0 60px;
        background:
            linear-gradient(
                rgba(3,55,42,0.93),
                rgba(3,55,42,0.93)
            ),
            url("aset/fotobersama1.jpeg");

        background-size: cover;
        background-position: center;
    }
    .ppdb-hero h1 {
        font-size: 40px;
        letter-spacing: -2px;
    }
    .ppdb-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .ppdb-hero-actions > * {
        width: 100%;
    }
    .ppdb-hero-card {
        min-height: 350px;
        padding: 28px;
    }

    /* REASONS */
    .ppdb-reasons-grid {
        grid-template-columns: 1fr;
    }
    .ppdb-reasons-grid article {
        min-height: 250px;
    }

    /* FLOW */
    .ppdb-flow-grid {
        grid-template-columns: 1fr;
    }
    .ppdb-flow-grid article {
        min-height: 220px;
    }

    /* DOCUMENT */
    .ppdb-document-box {
        min-height: 380px;
        padding: 28px 23px;
    }

    /* FAQ */
    .ppdb-faq-question {
        min-height: 72px;
        gap: 15px;
    }
    .ppdb-faq-question span {
        font-size: 10px;
    }
    .ppdb-faq-answer p {
        padding-right: 20px;
    }

    /* FINAL */
    .ppdb-final-box {
        grid-template-columns: 1fr;
        min-height: 430px;
        padding: 35px 27px;
    }
    .ppdb-final-actions {
        grid-column: auto;
        width: 100%;
    }
    .ppdb-final-actions .btn {
        width: 100%;
    }
    .ppdb-final-link {
        text-align: left;
    }
}

@media (max-width: 380px) {
    .ppdb-hero h1 {
        font-size: 35px;
    }
}


/* SECTION BERITA */
.gallery-news {
    position: relative;
    overflow: hidden;
    background: var(--background);
}

/* HEADER BERITA */
.gallery-news-header {
    display: grid;
    grid-template-columns: 1fr 0.65fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 42px;
}
.gallery-news-header > p {
    max-width: 500px;
    color: var(--text-light);
    font-size: 11.5px;
    line-height: 1.85;
}

/* BERITA UTAMA / FEATURED NEWS */
.featured-news {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    min-height: 420px;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    -webkit-transition: transform 0.35s ease, box-shadow 0.35s ease;
    -moz-transition: transform 0.35s ease, box-shadow 0.35s ease;
    -ms-transition: transform 0.35s ease, box-shadow 0.35s ease;
    -o-transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.featured-news:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* FOTO BERITA UTAMA */
.featured-news-image {
    position: relative;
    overflow: hidden;
    display: block;
    min-height: 420px;
    background: #e7efeb;
}
.featured-news-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(2, 40, 30, 0.32),
            transparent 45%
        );
    pointer-events: none;
}
.featured-news-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.65s ease;
    -webkit-transition: transform 0.65s ease;
    -moz-transition: transform 0.65s ease;
    -ms-transition: transform 0.65s ease;
    -o-transition: transform 0.65s ease;
}
.featured-news:hover .featured-news-image img {
    transform: scale(1.045);
}

/* CATEGORY */
.featured-news-category {
    position: absolute;
    z-index: 3;
    left: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    padding: 8px 13px;
    border-radius: 100px;
    background: #f2cf7a;
    color: var(--primary-deep);
    font-size: 7.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.12);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}

/* CONTENT BERITA UTAMA */
.featured-news-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 45px;
}
.featured-news-content::before {
    content: "TERBARU";
    position: absolute;
    top: 27px;
    right: 30px;
    color: #e5eeea;
    font-size: 27px;
    font-weight: 900;
    letter-spacing: -1px;
    pointer-events: none;
}

/* NEWS META */
.news-meta {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}
.news-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-light);
    font-size: 7.5px;
    font-weight: 600;
}
.news-meta i {
    color: var(--primary);
    font-size: 8px;
}

/* TITLE */
.featured-news-content h3 {
    position: relative;
    z-index: 2;
    margin-top: 15px;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.25;
    letter-spacing: -1px;
}
.featured-news-content h3 a {
    color: var(--primary-dark);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.featured-news-content h3 a:hover {
    color: var(--primary);
}

/* DESCRIPTION */
.featured-news-content > p {
    position: relative;
    z-index: 2;
    margin-top: 15px;
    color: var(--text-light);
    font-size: 10.5px;
    line-height: 1.85;
}

/* BACA SELENGKAPNYA */
.news-read-more {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    color: var(--primary);
    font-size: 8.5px;
    font-weight: 800;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.news-read-more i {
    font-size: 8px;
    transition: transform 0.3s ease;
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
}
.news-read-more:hover {
    color: var(--primary-dark);
}
.news-read-more:hover i {
    transform: translateX(5px);
}

/* GRID BERITA LAINNYA */
.gallery-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 15px;
}

/* NEWS CARD */
.gallery-news-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 440px;
    border: 1px solid var(--border);
    border-radius: 19px;
    background: var(--white);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    -webkit-border-radius: 19px;
    -moz-border-radius: 19px;
    -ms-border-radius: 19px;
    -o-border-radius: 19px;
    -webkit-transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    -moz-transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    -ms-transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    -o-transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.gallery-news-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

/* NEWS CARD IMAGE */
.gallery-news-image {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    height: 220px;
    flex-shrink: 0;
    background: #e7efeb;
}
.gallery-news-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(2, 40, 30, 0.30),
            transparent 55%
        );
    pointer-events: none;
}
.gallery-news-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.gallery-news-card:hover .gallery-news-image img {
    transform: scale(1.06);
}

/* CATEGORY */
.gallery-news-image > span {
    position: absolute;
    z-index: 3;
    left: 16px;
    bottom: 15px;
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 100px;
    background: #f2cf7a;
    color: var(--primary-deep);
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}

/* NEWS CARD CONTENT */
.gallery-news-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 23px;
}

/* TITLE */
.gallery-news-content h3 {
    margin-top: 11px;
    font-size: 15px;
    line-height: 1.45;
}
.gallery-news-content h3 a {
    color: var(--primary-dark);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}
.gallery-news-content h3 a:hover {
    color: var(--primary);
}

/* DESCRIPTION */
.gallery-news-content > p {
    margin-top: 9px;
    color: var(--text-light);
    font-size: 9px;
    line-height: 1.75;
}

/* READ MORE DI BAWAH */
.gallery-news-content .news-read-more {
    margin-top: auto;
    padding-top: 20px;
}

/* GARIS AKSEN CARD */
.gallery-news-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background: var(--primary);
    transition: width 0.4s ease;
    -webkit-transition: width 0.4s ease;
    -moz-transition: width 0.4s ease;
    -ms-transition: width 0.4s ease;
    -o-transition: width 0.4s ease;
}
.gallery-news-card:hover::after {
    width: 100%;
}

/* OPTIONAL - TOMBOL LIHAT BERITA LAINNYA */
.gallery-news-footer {
    display: flex;
    justify-content: center;
    margin-top: 35px;
}
.gallery-news-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 19px;
    border: 1px solid var(--border);
    border-radius: 100px;
    background: var(--white);
    color: var(--primary-dark);
    font-size: 8.5px;
    font-weight: 800;
    transition: var(--transition);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}
.gallery-news-more:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
    transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
}
.gallery-news-more i {
    font-size: 8px;
    transition: transform 0.3s ease;
}
.gallery-news-more:hover i {
    transform: translateX(4px);
}

@media (max-width: 1000px) {
    .featured-news {
        grid-template-columns: 1fr 0.9fr;
    }
    .featured-news-content {
        padding: 35px;
    }
    .gallery-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 800px) {
    .gallery-news-header {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .gallery-news-header > p {
        max-width: 600px;
    }

    /* FEATURED */
    .featured-news {
        grid-template-columns: 1fr;
    }
    .featured-news-image {
        min-height: 360px;
        height: 360px;
    }
    .featured-news-content {
        padding: 35px;
    }
    .featured-news-content::before {
        top: 20px;
        right: 25px;
        font-size: 22px;
    }
}

@media (max-width: 600px) {

    /* HEADER */
    .gallery-news-header {
        margin-bottom: 30px;
    }

    /* BERITA UTAMA */
    .featured-news {
        min-height: auto;
        border-radius: 18px;
        -webkit-border-radius: 18px;
        -moz-border-radius: 18px;
        -ms-border-radius: 18px;
        -o-border-radius: 18px;
}
    .featured-news-image {
        min-height: 270px;
        height: 270px;
    }
    .featured-news-category {
        left: 15px;
        bottom: 15px;
        padding: 7px 11px;
    }
    .featured-news-content {
        padding: 27px 22px 30px;
    }
    .featured-news-content::before {
        display: none;
    }
    .featured-news-content h3 {
        font-size: 23px;
    }
    .featured-news-content > p {
        font-size: 10px;
    }

    /* META */
    .news-meta {
        gap: 10px;
    }

    /* NEWS GRID */
    .gallery-news-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    /* CARD */
    .gallery-news-card {
        min-height: auto;
        border-radius: 17px;
        -webkit-border-radius: 17px;
        -moz-border-radius: 17px;
        -ms-border-radius: 17px;
        -o-border-radius: 17px;
}
    .gallery-news-image {
        height: 250px;
    }
    .gallery-news-content {
        min-height: 210px;
        padding: 21px;
    }
    .gallery-news-content h3 {
        font-size: 15px;
    }
    .gallery-news-content > p {
        font-size: 9.5px;
    }
}

@media (max-width: 380px) {
    .featured-news-image {
        min-height: 235px;
        height: 235px;
    }
    .featured-news-content {
        padding: 23px 18px 26px;
    }
    .featured-news-content h3 {
        font-size: 20px;
    }
    .gallery-news-image {
        height: 220px;
    }
}

/* HERO BERITA */
.article-hero {
    position: relative;
    overflow: hidden;
    padding: 135px 0 80px;
    background:
        linear-gradient(
            135deg,
            var(--primary-deep),
            var(--primary)
        );
    color: var(--white);
}

/* DEKORASI BACKGROUND */
.article-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -230px;
    right: -120px;
    border: 80px solid rgba(255, 255, 255, 0.025);
    border-radius: 50%;
}
.article-hero::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    left: -150px;
    bottom: -170px;
    border: 55px solid rgba(242, 207, 122, 0.035);
    border-radius: 50%;
}
.article-hero-container {
    position: relative;
    z-index: 2;
    max-width: 950px;
    margin-left: 80px;
    margin-top: 10px;
}

/* BREADCRUMB */
.article-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 28px;
}
.article-breadcrumb a,
.article-breadcrumb span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 8px;
    font-weight: 600;
    transition: var(--transition);
}
.article-breadcrumb a:hover {
    color: #f2cf7a;
}
.article-breadcrumb > i {
    color: rgba(255, 255, 255, 0.25);
    font-size: 6px;
}
.article-breadcrumb a i {
    font-size: 7px;
}

/* CATEGORY */
.article-category {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid rgba(242, 207, 122, 0.20);
    border-radius: 100px;
    background: rgba(242, 207, 122, 0.09);
    color: #f2cf7a;
    font-size: 7.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.article-category i {
    font-size: 9px;
}

/* TITLE */
.article-hero h1 {
    max-width: 900px;
    margin-top: 20px;
    color: var(--white);
    font-size: clamp(38px, 5vw, 60px);
    font-weight: 700;
    line-height: 1.13;
    letter-spacing: -2.5px;
}

/* LEAD / RINGKASAN */
.article-lead {
    max-width: 720px;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 11.5px;
    line-height: 1.85;
}

/* META BERITA */
.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
}
.article-meta > div {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.62);
    font-size: 7.5px;
    font-weight: 600;
}
.article-meta i {
    color: #f2cf7a;
    font-size: 8px;
}

/* ARTICLE SECTION */
.article-section {
    position: relative;
    padding: 70px 0 100px;
    background: var(--background);
}

/* ARTICLE LAYOUT */
.article-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        300px;
    gap: 45px;
    align-items: start;
}

/* ARTICLE CONTENT */
.article-content {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

/* FOTO UTAMA */
.article-main-image {
    position: relative;
    width: 100%;
    margin: 0;
}
.article-main-image img {
    width: 100%;
    height: 480px;
    display: block;
    object-fit: cover;
}
.article-main-image figcaption {
    padding: 11px 28px;
    border-bottom: 1px solid var(--border);
    background: #f8faf9;
    color: var(--text-light);
    font-size: 7.5px;
    font-style: italic;
    line-height: 1.6;
}

/* ARTICLE BODY */
.article-body {
    max-width: 780px;
    margin: 0 auto;
    padding: 45px 50px;
}
.article-body > p {
    margin-bottom: 21px;
    color: #56635e;
    font-size: 11.5px;
    line-height: 2;
    text-align: left;
}
.article-body > p:last-child {
    margin-bottom: 0;
}
.article-body strong {
    color: var(--primary-dark);
    font-weight: 700;
}

/* SUB JUDUL ARTIKEL */
.article-body h2 {
    position: relative;
    margin: 40px 0 17px;
    padding-left: 17px;
    color: var(--primary-dark);
    font-size: 23px;
    line-height: 1.35;
    letter-spacing: -0.7px;
}
.article-body h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 100px;
    background: #f2cf7a;
}

/* BLOCKQUOTE */
.article-body blockquote {
    position: relative;
    overflow: hidden;
    margin: 35px 0;
    padding: 30px 32px 30px 70px;
    border: 0;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            var(--primary-deep),
            var(--primary)
        );
    color: var(--white);
}
.article-body blockquote::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -75px;
    bottom: -80px;
    border: 30px solid rgba(255, 255, 255, 0.035);
    border-radius: 50%;
}
.article-body blockquote > i {
    position: absolute;
    top: 30px;
    left: 28px;
    color: #f2cf7a;
    font-size: 22px;
}
.article-body blockquote p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.9;
}

/* FOTO TAMBAHAN */
.article-image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 35px 0;
}
.article-image-grid figure {
    position: relative;
    overflow: hidden;
    height: 280px;
    margin: 0;
    border-radius: 15px;
    background: #e8efec;
}
.article-image-grid img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.article-image-grid figure:hover img {
    transform: scale(1.05);
}

/* ARTICLE FOOTER */
.article-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin: 0 50px;
    padding: 25px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* TAG */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}
.article-tags > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 3px;
    color: var(--text-light);
    font-size: 8px;
    font-weight: 700;
}
.article-tags > span i {
    color: var(--primary);
}
.article-tags a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 100px;
    background: var(--background);
    color: var(--primary-dark);
    font-size: 7px;
    font-weight: 700;
    transition: var(--transition);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}
.article-tags a:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--white);
}

/* SHARE */
.article-share {
    display: flex;
    align-items: center;
    gap: 7px;
}
.article-share > span {
    margin-right: 3px;
    color: var(--text-light);
    font-size: 7.5px;
    font-weight: 700;
}
.article-share a,
.article-share button {
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--background);
    color: var(--primary);
    font-size: 11px;
    cursor: pointer;
    transition: var(--transition);
}
.article-share a:hover,
.article-share button:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    background: var(--primary);
    color: var(--white);
}

/* WHATSAPP */
.article-share .article-share-whatsapp:hover {
    border-color: #25d366;
    background: #25d366;
    color: #ffffff;
}

/* AUTHOR */
.article-author {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 30px 50px 45px;
    padding: 20px;
    border-radius: 16px;
    background: var(--background);
}
.article-author-icon {
    width: 53px;
    height: 53px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 19px;
}
.article-author > div:last-child > span {
    color: var(--text-light);
    font-size: 7px;
}
.article-author h3 {
    margin-top: 2px;
    color: var(--primary-dark);
    font-size: 11px;
}
.article-author p {
    margin-top: 4px;
    color: var(--text-light);
    font-size: 8px;
    line-height: 1.6;
}

/* SIDEBAR */
.article-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

/* SIDEBAR INFORMATION */
.article-sidebar-box {
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: 19px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
}
.article-sidebar-label {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 100px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 6.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}
.article-sidebar-box > h3 {
    margin-top: 12px;
    color: var(--primary-dark);
    font-size: 17px;
}

/* INFO LIST */
.article-info-list {
    display: flex;
    flex-direction: column;
    margin-top: 22px;
}
.article-info-list > div {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.article-info-list > div:first-child {
    padding-top: 0;
}
.article-info-list > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.article-info-list > div > i {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 10px;
}
.article-info-list span {
    display: block;
    color: var(--text-light);
    font-size: 6.5px;
}
.article-info-list strong {
    display: block;
    margin-top: 2px;
    color: var(--primary-dark);
    font-size: 8px;
    line-height: 1.4;
}

/* SIDEBAR CTA */
.article-sidebar-cta {
    position: relative;
    overflow: hidden;
    padding: 27px;
    border-radius: 19px;
    background: linear-gradient( 45deg, var(--primary-deep), var(--primary) );
    color: var(--white);
    -webkit-border-radius: 19px;
    -moz-border-radius: 19px;
    -ms-border-radius: 19px;
    -o-border-radius: 19px;
}
.article-sidebar-cta::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -75px;
    bottom: -80px;
    border: 30px solid rgba(255, 255, 255, 0.035);
    border-radius: 50%;
}
.article-sidebar-cta-icon {
    position: relative;
    z-index: 2;
    width: 47px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(242, 207, 122, 0.12);
    color: #f2cf7a;
    font-size: 17px;
}
.article-sidebar-cta > span {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 25px;
    color: #f2cf7a;
    font-size: 6.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.article-sidebar-cta h3 {
    position: relative;
    z-index: 2;
    margin-top: 5px;
    color: var(--white);
    font-size: 18px;
    line-height: 1.35;
}
.article-sidebar-cta p {
    position: relative;
    z-index: 2;
    margin-top: 9px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 8.5px;
    line-height: 1.7;
}
.article-sidebar-cta a {
    position: relative;
    z-index: 2;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: #f2cf7a;
    font-size: 7.5px;
    font-weight: 800;
}
.article-sidebar-cta a i {
    font-size: 7px;
    transition: transform 0.3s ease;
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
}
.article-sidebar-cta a:hover i {
    transform: translateX(4px);
}

/* RELATED NEWS */
.related-news {
    background: var(--white);
}

/* HEADER */
.related-news-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 35px;
}
.related-news-header > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    color: var(--primary);
    font-size: 8px;
    font-weight: 800;
}
.related-news-header > a i {
    font-size: 7px;
    transition: transform 0.3s ease;
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
}
.related-news-header > a:hover i {
    transform: translateX(4px);
}

/* RELATED NEWS GRID */
.related-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

/* RELATED NEWS CARD */
.related-news-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--white);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}
.related-news-card:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

/* IMAGE */
.related-news-image {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    height: 220px;
    background: #e7efeb;
}

.related-news-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(3, 55, 42, 0.30),
            transparent 55%
        );
    pointer-events: none;
}
.related-news-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.55s ease;
    -webkit-transition: transform 0.55s ease;
    -moz-transition: transform 0.55s ease;
    -ms-transition: transform 0.55s ease;
    -o-transition: transform 0.55s ease;
}
.related-news-card:hover .related-news-image img {
    transform: scale(1.06);
}

/* CATEGORY */
.related-news-image > span {
    position: absolute;
    z-index: 3;
    left: 15px;
    bottom: 14px;
    padding: 7px 10px;
    border-radius: 100px;
    background: #f2cf7a;
    color: var(--primary-deep);
    font-size: 6.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}

/* CONTENT */
.related-news-content {
    padding: 21px;
}
.related-news-content h3 {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.45;
}
.related-news-content h3 a {
    color: var(--primary-dark);
    transition: var(--transition);
}
.related-news-content h3 a:hover {
    color: var(--primary);
}
.related-news-content .news-read-more {
    margin-top: 18px;
}

@media (max-width: 1100px) {
    .article-layout {
        grid-template-columns:
            minmax(0, 1fr)
            270px;
        gap: 30px;
    }
    .article-body {
        padding: 40px;
    }
    .article-footer {
        margin-left: 40px;
        margin-right: 40px;
    }
    .article-author {
        margin-left: 40px;
        margin-right: 40px;
    }
}

@media (max-width: 900px) {

    /* HERO */
    .article-hero {
        padding: 115px 0 70px;
    }

    /* LAYOUT */
    .article-layout {
        grid-template-columns: 1fr;
    }

    /* SIDEBAR */
    .article-sidebar {
        position: static;

        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    /* RELATED */
    .related-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    
    /* HERO */
    .article-hero {
        padding: 95px 0 55px;
    }
    .article-breadcrumb {
        margin-bottom: 22px;
    }
    .article-hero h1 {
        margin-top: 17px;
        font-size: 36px;
        line-height: 1.17;
        letter-spacing: -1.5px;
    }
    .article-lead {
        font-size: 10px;
    }
    .article-meta {
        gap: 7px;
        margin-top: 23px;
    }
    .article-meta > div {
        padding: 7px 10px;
    }

    /* SECTION */
    .article-section {
        padding: 40px 0 70px;
    }

    /* ARTICLE */
    .article-content {
        border-radius: 17px;
    }

    /* MAIN IMAGE */
    .article-main-image img {
        height: 300px;
    }
    .article-main-image figcaption {
        padding: 10px 18px;
        font-size: 7px;
    }

    /* BODY */
    .article-body {
        padding: 30px 22px;
    }
    .article-body > p {
        margin-bottom: 18px;
        font-size: 10.5px;
        line-height: 1.9;
    }
    .article-body h2 {
        margin-top: 32px;
        font-size: 19px;
    }

    /* QUOTE */
    .article-body blockquote {
        margin: 28px 0;
        padding: 25px 20px 25px 53px;
        border-radius: 15px;
    }
    .article-body blockquote > i {
        top: 26px;
        left: 20px;
        font-size: 17px;
    }
    .article-body blockquote p {
        font-size: 10.5px;
    }

    /* FOTO TAMBAHAN */
    .article-image-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 28px 0;
    }
    .article-image-grid figure {
        height: 260px;
    }

    /* FOOTER ARTIKEL */
    .article-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        margin: 0 22px;
        padding: 20px 0;
    }

    /* AUTHOR */
    .article-author {
        align-items: flex-start;
        margin: 25px 22px 30px;
        padding: 17px;
    }

    /* SIDEBAR */
    .article-sidebar {
        grid-template-columns: 1fr;
    }

    /* RELATED */
    .related-news-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }
    .related-news-header > a {
        margin-bottom: 0;
    }
    .related-news-grid {
        grid-template-columns: 1fr;
    }
    .related-news-image {
        height: 250px;
    }
}

@media (max-width: 380px) {
    .article-hero h1 {
        font-size: 31px;
    }
    .article-main-image img {
        height: 250px;
    }
    .article-body {
        padding: 26px 18px;
    }
    .article-footer {
        margin-left: 18px;
        margin-right: 18px;
    }
    .article-author {
        margin-left: 18px;
        margin-right: 18px;
    }
    .article-image-grid figure {
        height: 225px;
    }
    .related-news-image {
        height: 220px;
    }
}

/* ARTICLE SHARE - COPY SUCCESS */
.article-copy-link.copied {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--white);
    transform: scale(1.05);
}

/* ARTICLE TOAST */
.article-toast {
    position: fixed;
    z-index: 99999;
    left: 50%;
    bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 30px);
    padding: 12px 17px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 100px;
    background: var(--primary-deep);
    color: var(--white);
    box-shadow:        0 15px 40px rgba(0, 0, 0, 0.20);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(20px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    -webkit-transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
    -moz-transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
    -ms-transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
    -o-transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
    -webkit-transform: translateX(-50%) translateY(20px);
    -moz-transform: translateX(-50%) translateY(20px);
    -ms-transform: translateX(-50%) translateY(20px);
    -o-transform: translateX(-50%) translateY(20px);
}

/* SHOW */
.article-toast.show {
    opacity: 1;
    visibility: visible;
    transform:
        translateX(-50%)
        translateY(0);
}

/* ICON */
.article-toast i {
    flex-shrink: 0;
    color: #f2cf7a;
    font-size: 13px;
}

/* TEXT */
.article-toast span {
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .article-toast {
        bottom: 20px;
        padding: 11px 15px;
    }
    .article-toast span {
        font-size: 7.5px;
    }
}

/*=========================================================
    GURU
=========================================================*/
.teacher {
    background-color: white;
    margin-top: 0px;
}
.section-heading.center{
    text-align:center;
}

.section-heading.center .section-label{

    justify-content:center;

    margin:0 auto 18px;

}
.teacher-stat{

    display:grid;
    grid-template-columns:320px 1fr;

    gap:30px;

    margin:50px 0 60px;

}

.teacher-stat-card{

    padding:40px;

    border-radius:20px;

    background:linear-gradient(135deg,#0b6b46,#13865b);

    color:#fff;

    text-align:center;

}

.teacher-stat-card h2{

    font-size:64px;

    color:#f2cf7a;

}

.teacher-stat-card p{

    margin-top:10px;

    opacity:.9;

}

.teacher-info{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

.teacher-info div{

    background:#fff;

    border:1px solid #e6ece8;

    border-radius:18px;

    text-align:center;

    padding:30px 20px;

}

.teacher-info strong{

    display:block;

    font-size:38px;

    color:#0b6b46;

}

.teacher-info span{

    display:block;

    margin-top:8px;

    color:#666;

}

.teacher-grid{

    display:grid;
    
    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.teacher-card{

    background:#fff;
    
    border:1px solid #e7ece8;

    border-radius:20px;

    overflow:hidden;

    text-align:center;

    transition:.3s;

}

.teacher-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.teacher-card img{

    width: 100%;
    height: 300px;
    
    aspect-ratio:1/1;

    object-fit:cover;

    background:#eef2ef;

}

.teacher-card h3{

    margin-top:20px;

    padding:0 15px;

    font-size:20px;

    color:#154734;

}

.teacher-card span{

    display:block;

    margin:10px 0 25px;

    color:#777;

}

@media(max-width:992px){

.teacher-grid{

grid-template-columns:repeat(3,1fr);

}

.teacher-stat{

grid-template-columns:1fr;

}

.teacher-info{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:768px){

.teacher-grid{

grid-template-columns:repeat(2,1fr);

}

.teacher-info{

grid-template-columns:1fr;

}

}

@media(max-width:500px){

.teacher-grid{

grid-template-columns:1fr;

}

}

/* =====================================================
   DROPDOWN AKADEMIK
===================================================== */

.nav-item.dropdown {
    position: relative;
    text-decoration: none;
}

.nav-item.dropdown > .nav-link {
    display: flex;
    align-items: center;
    gap: 7px;
}

.nav-item.dropdown > .nav-link i {
    font-size: 10px;
    transition: transform 0.3s ease;
}

/* MENU DROPDOWN */

.nav-item.dropdown .dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;

    min-width: 230px;

    padding: 10px;

    margin: 0;

    list-style: none;

    background: #ffffff;

    border: 1px solid #e7ece8;

    border-radius: 14px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.10);

    opacity: 0;
    visibility: hidden;

    transform: translateY(8px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;

    z-index: 1000;
}

/* TAMPIL SAAT HOVER */

.nav-item.dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

/* PUTAR ICON */

.nav-item.dropdown:hover > .nav-link i {

    transform: rotate(180deg);

}

/* ITEM DROPDOWN */

.nav-item.dropdown .dropdown-menu li {

    margin: 0;

    padding: 0;

}

/* LINK DROPDOWN */

.nav-item.dropdown .dropdown-menu li a {

    display: flex;

    align-items: center;

    width: 100%;

    padding: 12px 14px;

    border-radius: 9px;

    color: #234b3a;

    text-decoration: none;

    font-size: 14px;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        padding-left 0.2s ease;

}

/* HOVER ITEM */

.nav-item.dropdown .dropdown-menu li a:hover {

    background: #eef7f2;

    color: #0b6b46;

    padding-left: 18px;

}

.nav-menu,
.nav-menu ul,
.nav-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* =====================================================
   DROPDOWN MOBILE
===================================================== */

@media (max-width: 768px) {

    .nav-item.dropdown {
        width: 100%;
    }

    .nav-item.dropdown > .nav-link {
        width: 100%;
        justify-content: space-between;
    }

    .nav-item.dropdown .dropdown-menu {

        position: static;

        width: 100%;
        min-width: 0;

        margin-top: 6px;

        padding: 6px;

        border: none;

        border-radius: 10px;

        box-shadow: none;

        background: #f5f9f7;

        opacity: 1;
        visibility: visible;

        transform: none;

        display: none;
    }

    .nav-item.dropdown:hover .dropdown-menu {
        display: none;
    }

    .nav-item.dropdown.active .dropdown-menu {
        display: block;
    }

    .nav-item.dropdown .dropdown-menu li a {

        padding: 11px 15px;

        font-size: 14px;

    }

}

/* =====================================================
   KALENDER AKADEMIK
===================================================== */

.academic-calendar {
    background: #f8faf9;
}

.calendar-year-card {
    max-width: 850px;
    margin: 45px auto 70px;

    display: flex;
    align-items: center;
    gap: 25px;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #e5ebe7;

    border-radius: 22px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.calendar-year-icon {
    width: 75px;
    height: 75px;

    flex-shrink: 0;

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

    border-radius: 18px;

    background: #0b6b46;

    color: #ffffff;

    font-size: 30px;
}

.calendar-year-content span {
    display: block;

    margin-bottom: 5px;

    font-size: 14px;

    color: #777;
}

.calendar-year-content h2 {
    margin: 0;

    font-size: 32px;

    color: #154734;
}

.calendar-year-content p {
    margin: 8px 0 0;

    color: #666;

    line-height: 1.6;
}


/* =====================================================
   TIMELINE
===================================================== */

.calendar-timeline {
    max-width: 900px;

    margin: 0 auto;

    position: relative;
}

.calendar-timeline::before {
    content: "";

    position: absolute;

    left: 115px;

    top: 10px;

    bottom: 10px;

    width: 2px;

    background: #dce8e1;
}


/* =====================================================
   BULAN
===================================================== */

.calendar-month {
    position: relative;

    margin-bottom: 55px;
}

.calendar-month-title {
    display: flex;

    align-items: baseline;

    gap: 10px;

    margin-bottom: 25px;

    padding-left: 150px;
}

.calendar-month-title span {
    font-size: 25px;

    font-weight: 700;

    color: #154734;
}

.calendar-month-title small {
    font-size: 15px;

    color: #888;
}


/* =====================================================
   EVENT
===================================================== */

.calendar-events {
    display: flex;

    flex-direction: column;

    gap: 18px;
}

.calendar-event {
    display: grid;

    grid-template-columns: 115px 1fr;

    position: relative;
}

.calendar-date {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 65px;

    min-height: 65px;

    margin-left: 32px;

    border-radius: 14px;

    background: #ffffff;

    border: 2px solid #0b6b46;

    color: #0b6b46;

    text-align: center;
}

.calendar-date strong {
    font-size: 17px;

    line-height: 1.1;
}

.calendar-date span {
    margin-top: 3px;

    font-size: 11px;

    text-transform: uppercase;

    color: #777;
}


/* =====================================================
   ISI EVENT
===================================================== */

.calendar-event-content {
    padding: 18px 22px;

    background: #ffffff;

    border: 1px solid #e5ebe7;

    border-radius: 16px;

    transition: 0.3s ease;
}

.calendar-event-content:hover {
    transform: translateX(5px);

    border-color: #cbded4;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.calendar-event-content h3 {
    margin: 0 0 7px;

    font-size: 18px;

    color: #154734;
}

.calendar-event-content p {
    margin: 0;

    color: #666;

    font-size: 14px;

    line-height: 1.7;
}

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

@media (max-width: 768px) {

    .calendar-year-card {
        margin-top: 35px;
        margin-bottom: 50px;

        padding: 22px;

        gap: 18px;
    }

    .calendar-year-icon {
        width: 60px;
        height: 60px;

        font-size: 24px;
    }

    .calendar-year-content h2 {
        font-size: 26px;
    }

    .calendar-timeline::before {
        left: 30px;
    }

    .calendar-month-title {
        padding-left: 65px;
    }

    .calendar-month-title span {
        font-size: 22px;
    }

    .calendar-event {
        grid-template-columns: 60px 1fr;
    }

    .calendar-date {
        width: 52px;
        min-height: 52px;

        margin-left: 4px;
    }

    .calendar-date strong {
        font-size: 14px;
    }

    .calendar-date span {
        font-size: 9px;
    }

    .calendar-event-content {
        padding: 15px;
    }

    .calendar-event-content h3 {
        font-size: 16px;
    }

    .calendar-event-content p {
        font-size: 13px;
    }

}

@media (max-width: 480px) {

    .calendar-year-card {
        align-items: flex-start;
    }

    .calendar-year-icon {
        width: 52px;
        height: 52px;

        font-size: 20px;

        border-radius: 14px;
    }

    .calendar-year-content h2 {
        font-size: 22px;
    }

    .calendar-year-content p {
        font-size: 13px;
    }

}

/* =====================================================
   HALAMAN KURIKULUM
===================================================== */

.curriculum {
    background: #f8faf9;
}


/* =====================================================
   INTRO KURIKULUM
===================================================== */

.curriculum-intro {
    max-width: 950px;
    margin: 45px auto 60px;

    display: flex;
    align-items: center;
    gap: 28px;

    padding: 32px;

    background: #ffffff;

    border: 1px solid #e5ebe7;
    border-radius: 22px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.curriculum-intro-icon {
    width: 78px;
    height: 78px;

    flex-shrink: 0;

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

    border-radius: 20px;

    background: #0b6b46;
    color: #ffffff;

    font-size: 30px;
}

.curriculum-intro-content span {
    display: block;

    margin-bottom: 6px;

    font-size: 14px;
    color: #777;
}

.curriculum-intro-content h2 {
    margin: 0;

    font-size: 27px;
    line-height: 1.35;

    color: #154734;
}

.curriculum-intro-content p {
    margin: 10px 0 0;

    color: #666;

    line-height: 1.7;
}


/* =====================================================
   KARTU PENDEKATAN
===================================================== */

.curriculum-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;

    max-width: 1100px;

    margin: 0 auto 75px;
}

.curriculum-card {
    padding: 28px;

    background: #ffffff;

    border: 1px solid #e5ebe7;

    border-radius: 20px;

    transition: 0.3s ease;
}

.curriculum-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.07);

    border-color: #cbded4;
}

.curriculum-card-icon {
    width: 55px;
    height: 55px;

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

    margin-bottom: 20px;

    border-radius: 15px;

    background: #eef7f2;

    color: #0b6b46;

    font-size: 22px;
}

.curriculum-card h3 {
    margin: 0 0 10px;

    font-size: 19px;

    color: #154734;
}

.curriculum-card p {
    margin: 0;

    color: #666;

    font-size: 14px;

    line-height: 1.7;
}


/* =====================================================
   MUATAN PEMBELAJARAN
===================================================== */

.curriculum-content {
    max-width: 1100px;

    margin: 0 auto;
}

.curriculum-content-heading {
    max-width: 700px;

    margin-bottom: 35px;
}

.curriculum-content-heading h2 {
    margin: 0 0 12px;

    font-size: 30px;

    color: #154734;
}

.curriculum-content-heading h2 span {
    color: #0b6b46;
}

.curriculum-content-heading p {
    margin: 0;

    color: #666;

    line-height: 1.7;
}


/* =====================================================
   DAFTAR MATA PELAJARAN
===================================================== */

.curriculum-subjects {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;
}

.subject-item {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 18px 20px;

    background: #ffffff;

    border: 1px solid #e5ebe7;

    border-radius: 14px;

    color: #154734;

    transition: 0.25s ease;
}

.subject-item:hover {
    transform: translateY(-3px);

    background: #f1f8f4;

    border-color: #cbded4;
}

.subject-item i {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

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

    border-radius: 10px;

    background: #eef7f2;

    color: #0b6b46;
}

.subject-item span {
    font-size: 14px;

    font-weight: 600;
}


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

@media (max-width: 900px) {

    .curriculum-grid {
        grid-template-columns: 1fr 1fr;
    }

    .curriculum-subjects {
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 768px) {

    .curriculum-intro {
        margin-top: 35px;

        padding: 24px;

        gap: 18px;

        align-items: flex-start;
    }

    .curriculum-intro-icon {
        width: 62px;
        height: 62px;

        border-radius: 16px;

        font-size: 24px;
    }

    .curriculum-intro-content h2 {
        font-size: 22px;
    }

    .curriculum-grid {
        grid-template-columns: 1fr;

        margin-bottom: 55px;
    }

    .curriculum-card {
        padding: 23px;
    }

    .curriculum-content-heading h2 {
        font-size: 26px;
    }

    .curriculum-subjects {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 480px) {

    .curriculum-intro {
        padding: 20px;
    }

    .curriculum-intro-icon {
        width: 52px;
        height: 52px;

        font-size: 20px;
    }

    .curriculum-intro-content span {
        font-size: 12px;
    }

    .curriculum-intro-content h2 {
        font-size: 19px;
    }

    .curriculum-intro-content p {
        font-size: 13px;
    }

}

/* =====================================================
   STRUKTUR KURIKULUM
===================================================== */

.curriculum-structure {
    max-width: 1100px;
    margin: 80px auto 0;
}

.curriculum-structure-heading {
    max-width: 700px;
    margin-bottom: 35px;
}

.curriculum-structure-heading h2 {
    margin: 0 0 12px;

    font-size: 30px;
    line-height: 1.3;

    color: #154734;
}

.curriculum-structure-heading h2 span {
    color: #0b6b46;
}

.curriculum-structure-heading p {
    margin: 0;

    color: #666;

    line-height: 1.7;
}


/* =====================================================
   GRID STRUKTUR
===================================================== */

.curriculum-structure-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;
}


/* =====================================================
   KARTU STRUKTUR
===================================================== */

.structure-card {
    position: relative;

    padding: 28px 22px;

    background: #ffffff;

    border: 1px solid #e5ebe7;

    border-radius: 20px;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.structure-card:hover {
    transform: translateY(-6px);

    border-color: #cbded4;

    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.07);
}


/* =====================================================
   NOMOR
===================================================== */

.structure-card-number {
    position: absolute;

    top: 15px;
    right: 18px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    color: #b7c9bf;
}


/* =====================================================
   ICON
===================================================== */

.structure-card-icon {
    width: 55px;
    height: 55px;

    display: flex;

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

    margin-bottom: 20px;

    border-radius: 15px;

    background: #eef7f2;

    color: #0b6b46;

    font-size: 21px;
}

.structure-card h3 {
    margin: 0 0 10px;

    font-size: 18px;

    line-height: 1.4;

    color: #154734;
}

.structure-card p {
    margin: 0;

    font-size: 14px;

    line-height: 1.7;

    color: #666;
}


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

@media (max-width: 1000px) {

    .curriculum-structure-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


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

@media (max-width: 768px) {

    .curriculum-structure {
        margin-top: 60px;
    }

    .curriculum-structure-heading h2 {
        font-size: 26px;
    }

    .curriculum-structure-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .structure-card {
        padding: 24px 20px;
    }

}

/* =====================================================
   HALAMAN KEGIATAN PEMBELAJARAN
===================================================== */

.learning-activities {
    background: #f8faf9;
}


/* =====================================================
   INTRO KEGIATAN
===================================================== */

.learning-intro {
    max-width: 950px;
    margin: 45px auto 65px;

    display: flex;
    align-items: center;
    gap: 28px;

    padding: 32px;

    background: #ffffff;

    border: 1px solid #e5ebe7;
    border-radius: 22px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.learning-intro-icon {
    width: 78px;
    height: 78px;

    flex-shrink: 0;

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

    border-radius: 20px;

    background: #0b6b46;
    color: #ffffff;

    font-size: 30px;
}

.learning-intro-content span {
    display: block;

    margin-bottom: 6px;

    font-size: 14px;

    color: #777;
}

.learning-intro-content h2 {
    margin: 0;

    font-size: 27px;
    line-height: 1.35;

    color: #154734;
}

.learning-intro-content p {
    margin: 10px 0 0;

    color: #666;

    line-height: 1.7;
}


/* =====================================================
   HEADING RAGAM KEGIATAN
===================================================== */

.learning-activities-heading {
    max-width: 700px;

    margin: 0 auto 35px;
}

.learning-activities-heading h2 {
    margin: 0 0 12px;

    font-size: 30px;
    line-height: 1.3;

    color: #154734;
}

.learning-activities-heading h2 span {
    color: #0b6b46;
}

.learning-activities-heading p {
    margin: 0;

    color: #666;

    line-height: 1.7;
}


/* =====================================================
   GRID KEGIATAN
===================================================== */

.learning-activities-grid {
    max-width: 1100px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 22px;
}


/* =====================================================
   KARTU KEGIATAN
===================================================== */

.learning-card {
    position: relative;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #e5ebe7;

    border-radius: 20px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.learning-card:hover {
    transform: translateY(-5px);

    border-color: #cbded4;

    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.07);
}

.learning-card-icon {
    width: 58px;
    height: 58px;

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

    margin-bottom: 20px;

    border-radius: 15px;

    background: #eef7f2;

    color: #0b6b46;

    font-size: 22px;
}

.learning-card h3 {
    margin: 0 0 10px;

    font-size: 19px;
    line-height: 1.4;

    color: #154734;
}

.learning-card p {
    margin: 0;

    font-size: 14px;

    line-height: 1.7;

    color: #666;
}


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

@media (max-width: 768px) {

    .learning-intro {
        margin-top: 35px;

        padding: 24px;

        gap: 18px;

        align-items: flex-start;
    }

    .learning-intro-icon {
        width: 62px;
        height: 62px;

        border-radius: 16px;

        font-size: 24px;
    }

    .learning-intro-content h2 {
        font-size: 22px;
    }

    .learning-activities-heading h2 {
        font-size: 26px;
    }

    .learning-activities-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .learning-card {
        padding: 24px;
    }

}


/* =====================================================
   RESPONSIVE HP KECIL
===================================================== */

@media (max-width: 480px) {

    .learning-intro {
        padding: 20px;
    }

    .learning-intro-icon {
        width: 52px;
        height: 52px;

        font-size: 20px;
    }

    .learning-intro-content span {
        font-size: 12px;
    }

    .learning-intro-content h2 {
        font-size: 19px;
    }

    .learning-intro-content p {
        font-size: 13px;
    }

    .learning-card {
        padding: 21px;
    }

    .learning-card h3 {
        font-size: 17px;
    }

    .learning-card p {
        font-size: 13px;
    }

}

/* =====================================================
   DOKUMENTASI KEGIATAN
===================================================== */

.learning-documentation {
    max-width: 1100px;

    margin: 70px auto 0;

    padding: 30px 32px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    background: #ffffff;

    border: 1px solid #e5ebe7;

    border-radius: 22px;

    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
}

.learning-documentation-content {
    max-width: 700px;
}

.learning-documentation-content h2 {
    margin: 0 0 10px;

    font-size: 25px;

    line-height: 1.35;

    color: #154734;
}

.learning-documentation-content h2 span {
    color: #0b6b46;
}

.learning-documentation-content p {
    margin: 0;

    color: #666;

    font-size: 14px;

    line-height: 1.7;
}

.learning-documentation-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    padding: 12px 19px;

    border-radius: 10px;

    background: #0b6b46;

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: 0.3s ease;
}

.learning-documentation-link:hover {
    background: #154734;

    transform: translateY(-2px);
}


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

@media (max-width: 768px) {

    .learning-documentation {
        flex-direction: column;

        align-items: flex-start;

        margin-top: 55px;

        padding: 24px;
    }

    .learning-documentation-content h2 {
        font-size: 22px;
    }

    .learning-documentation-link {
        width: 100%;

        justify-content: center;

        box-sizing: border-box;
    }

}

/* =====================================================
   DOKUMEN KURIKULUM
===================================================== */

.curriculum-document {
    max-width: 1100px;
    margin: 70px auto 0;

    display: flex;
    align-items: center;
    gap: 25px;

    padding: 30px 32px;

    background: #ffffff;

    border: 1px solid #e5ebe7;
    border-radius: 22px;

    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
}


/* =====================================================
   ICON DOKUMEN
===================================================== */

.curriculum-document-icon {
    width: 65px;
    height: 65px;

    flex-shrink: 0;

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

    border-radius: 16px;

    background: #eef7f2;
    color: #0b6b46;

    font-size: 25px;
}


/* =====================================================
   KONTEN DOKUMEN
===================================================== */

.curriculum-document-content {
    flex: 1;
}

.curriculum-document-content .section-label {
    margin-bottom: 7px;
}

.curriculum-document-content h2 {
    margin: 0 0 8px;

    font-size: 24px;
    line-height: 1.35;

    color: #154734;
}

.curriculum-document-content h2 span {
    color: #0b6b46;
}

.curriculum-document-content p {
    max-width: 650px;

    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: #666;
}


/* =====================================================
   ACTION / STATUS
===================================================== */

.curriculum-document-action {
    flex-shrink: 0;
}

.document-status {
    display: inline-flex;

    align-items: center;
    gap: 8px;

    padding: 10px 14px;

    border-radius: 10px;

    background: #f4f7f5;

    color: #68756e;

    font-size: 13px;
    line-height: 1.4;
}

.document-status i {
    font-size: 14px;
}


/* =====================================================
   JIKA NANTI TOMBOL DOKUMEN DIAKTIFKAN
===================================================== */

.curriculum-document-action a {
    display: inline-flex;

    align-items: center;
    gap: 10px;

    padding: 12px 18px;

    border-radius: 10px;

    background: #0b6b46;
    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition: 0.3s ease;
}

.curriculum-document-action a:hover {
    background: #154734;

    transform: translateY(-2px);
}


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

@media (max-width: 768px) {

    .curriculum-document {
        flex-direction: column;

        align-items: flex-start;

        margin-top: 55px;

        padding: 24px;
    }

    .curriculum-document-icon {
        width: 55px;
        height: 55px;

        font-size: 21px;
    }

    .curriculum-document-content h2 {
        font-size: 22px;
    }

    .curriculum-document-content p {
        font-size: 13px;
    }

    .curriculum-document-action {
        width: 100%;
    }

    .document-status {
        width: 100%;

        justify-content: center;

        box-sizing: border-box;
    }

    .curriculum-document-action a {
        width: 100%;

        justify-content: center;

        box-sizing: border-box;
    }

}


/* =====================================================
   RESPONSIVE HP KECIL
===================================================== */

@media (max-width: 480px) {

    .curriculum-document {
        padding: 20px;
    }

    .curriculum-document-content h2 {
        font-size: 20px;
    }

    .curriculum-document-content p {
        font-size: 13px;
    }

}

/* =====================================================
   PENGADUAN BULLYING
===================================================== */

.bullying-report {
    background: #f8faf9;
}

.bullying-report-card {
    max-width: 1100px;
    margin: 0 auto;

    display: flex;
    align-items: center;

    gap: 28px;

    padding: 30px 32px;

    background: #ffffff;

    border: 1px solid #e2eae5;
    border-radius: 22px;

    box-shadow:
        0 10px 28px rgba(21, 71, 52, 0.06);
}


/* =====================================================
   ICON
===================================================== */

.bullying-report-icon {
    width: 68px;
    height: 68px;

    flex-shrink: 0;

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

    border-radius: 17px;

    background: #edf7f2;
    color: #0b6b46;

    font-size: 27px;
}


/* =====================================================
   CONTENT
===================================================== */

.bullying-report-content {
    flex: 1;
    min-width: 0;
}

.bullying-report-content .section-label {
    margin-bottom: 7px;
}

.bullying-report-content h2 {
    margin: 0 0 10px;

    color: #154734;

    font-size: 27px;
    line-height: 1.3;
}

.bullying-report-content h2 span {
    color: #0b6b46;
}

.bullying-report-content > p {
    max-width: 700px;

    margin: 0;

    color: #66736c;

    font-size: 14px;
    line-height: 1.75;
}


/* =====================================================
   PENANGGUNG JAWAB
===================================================== */

.bullying-report-contact {
    display: flex;
    flex-direction: column;

    gap: 4px;

    margin-top: 17px;
}

.bullying-report-contact span {
    margin-bottom: 2px;

    color: #7b8780;

    font-size: 12px;
}

.bullying-report-contact strong {
    color: #154734;

    font-size: 15px;
    line-height: 1.5;
}


/* =====================================================
   TOMBOL WHATSAPP
===================================================== */

.bullying-report-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 20px;
}

.bullying-contact-button {
    display: inline-flex;

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

    gap: 8px;

    min-height: 40px;

    padding: 10px 15px;

    border: 1px solid transparent;
    border-radius: 10px;

    background: #0b6b46;
    color: #ffffff !important;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.bullying-contact-button i {
    font-size: 14px;
}

.bullying-contact-button:hover {
    background: #154734;
    color: #ffffff !important;

    transform: translateY(-2px);
}


/* =====================================================
   TOMBOL SEKUNDER
===================================================== */

.bullying-contact-secondary {
    background: #edf7f2;

    border-color: #d7e9df;

    color: #0b6b46 !important;
}

.bullying-contact-secondary:hover {
    background: #dceee5;

    border-color: #c8dfd3;

    color: #154734 !important;
}


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

@media (max-width: 768px) {

    .bullying-report-card {
        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

        padding: 25px;
    }

    .bullying-report-icon {
        width: 60px;
        height: 60px;

        font-size: 24px;
    }

    .bullying-report-content h2 {
        font-size: 24px;
    }

    .bullying-report-actions {
        width: 100%;
    }

    .bullying-contact-button {
        flex: 1;
    }

}


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

@media (max-width: 520px) {

    .bullying-report-card {
        padding: 21px;
    }

    .bullying-report-content h2 {
        font-size: 22px;
    }

    .bullying-report-content > p {
        font-size: 13px;
    }

    .bullying-report-contact strong {
        font-size: 14px;
    }

    .bullying-report-actions {
        flex-direction: column;

        gap: 8px;
    }

    .bullying-contact-button {
        width: 100%;
    }

}

/* =====================================================
   KESISWAAN - OPSI MENU
   Data Siswa | Data Kelas | Prestasi | Kegiatan Siswa
===================================================== */

.student-affairs-options {
    width: 100%;
    max-width: 1080px;

    margin: 42px auto 0;
    padding: 0;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}


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

.student-affairs-option {
    position: relative;

    display: flex;
    align-items: flex-start;

    width: 100%;
    min-height: 155px;

    padding: 24px;

    background: #ffffff;

    border: 1px solid #e2eae5;
    border-radius: 18px;

    color: #263a31;
    text-decoration: none;

    box-shadow:
        0 6px 18px rgba(21, 71, 52, 0.04);

    transform: translateY(0);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background-color 0.22s ease;
}


/* =====================================================
   HOVER
===================================================== */

.student-affairs-option:hover {
    transform: translateY(-3px);

    border-color: #cbded3;

    background: #ffffff;

    box-shadow:
        0 12px 26px rgba(21, 71, 52, 0.08);
}


/* =====================================================
   SAAT DIKLIK
===================================================== */

.student-affairs-option:active {
    transform: translateY(0) scale(0.985);

    box-shadow:
        0 5px 12px rgba(21, 71, 52, 0.06);

    transition-duration: 0.08s;
}


/* =====================================================
   ICON
===================================================== */

.student-affairs-option-icon {
    width: 56px;
    height: 56px;

    flex: 0 0 56px;

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

    margin-right: 16px;

    border-radius: 14px;

    background: #edf7f2;
    color: #0b6b46;

    font-size: 20px;

    transition:
        background-color 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease;
}


/* icon saat hover */

.student-affairs-option:hover
.student-affairs-option-icon {
    background: #0b6b46;
    color: #ffffff;

    transform: scale(1.03);
}


/* icon saat klik */

.student-affairs-option:active
.student-affairs-option-icon {
    transform: scale(0.95);
}


/* =====================================================
   KONTEN
===================================================== */

.student-affairs-option-content {
    min-width: 0;

    padding-right: 28px;
}


/* label kecil */

.student-affairs-option-content span {
    display: block;

    margin: 0 0 4px;

    color: #7d8983;

    font-size: 10px;
    font-weight: 700;

    line-height: 1.3;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


/* judul */

.student-affairs-option-content h3 {
    margin: 0 0 7px;

    color: #154734;

    font-size: 18px;
    font-weight: 700;

    line-height: 1.35;

    transition:
        color 0.22s ease;
}

.student-affairs-option:hover
.student-affairs-option-content h3 {
    color: #0b6b46;
}


/* deskripsi */

.student-affairs-option-content p {
    margin: 0 0 8px;

    color: #68756e;

    font-size: 13px;
    font-weight: 400;

    line-height: 1.65;
}


/* informasi tambahan */

.student-affairs-option-content strong {
    display: inline-block;

    color: #0b6b46;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.4;
}


/* =====================================================
   PANAH
===================================================== */

.student-option-arrow {
    position: absolute;

    top: 50%;
    right: 20px;

    color: #9aaa9f;

    font-size: 12px;

    transform: translateY(-50%);

    transition:
        color 0.22s ease,
        transform 0.22s ease;
}


/* hover */

.student-affairs-option:hover
.student-option-arrow {
    color: #0b6b46;

    transform:
        translate(4px, -50%);
}


/* klik */

.student-affairs-option:active
.student-option-arrow {
    transform:
        translate(6px, -50%) scale(0.92);
}


/* =====================================================
   FOCUS KEYBOARD
===================================================== */

.student-affairs-option:focus-visible {
    outline: 2px solid #0b6b46;
    outline-offset: 3px;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .student-affairs-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 15px;

        margin-top: 35px;
    }

    .student-affairs-option {
        min-height: 145px;

        padding: 21px;
    }

    .student-affairs-option-icon {
        width: 52px;
        height: 52px;

        flex-basis: 52px;

        margin-right: 14px;

        font-size: 19px;
    }

    .student-affairs-option-content h3 {
        font-size: 17px;
    }

    .student-affairs-option-content p {
        font-size: 12px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 680px) {

    .student-affairs-options {
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 30px;
    }

    .student-affairs-option {
        min-height: auto;

        padding: 20px;

        border-radius: 16px;
    }

    .student-affairs-option-icon {
        width: 50px;
        height: 50px;

        flex-basis: 50px;

        margin-right: 13px;

        border-radius: 13px;

        font-size: 18px;
    }

    .student-affairs-option-content {
        padding-right: 25px;
    }

    .student-affairs-option-content h3 {
        font-size: 16px;
    }

    .student-affairs-option-content p {
        font-size: 12px;

        line-height: 1.6;
    }

    .student-affairs-option-content strong {
        font-size: 11px;
    }

    .student-option-arrow {
        right: 17px;
    }

}


/* =====================================================
   HP KECIL
===================================================== */

@media (max-width: 420px) {

    .student-affairs-option {
        padding: 18px;
    }

    .student-affairs-option-icon {
        width: 46px;
        height: 46px;

        flex-basis: 46px;

        margin-right: 12px;

        font-size: 17px;
    }

    .student-affairs-option-content span {
        font-size: 9px;
    }

    .student-affairs-option-content h3 {
        font-size: 15px;
    }

    .student-affairs-option-content p {
        font-size: 11.5px;
    }

}

/* =====================================================
   KESISWAAN - HALAMAN ISI
   Data Siswa | Data Kelas | Prestasi | Kegiatan Siswa
===================================================== */


/* =====================================================
   DATA SISWA
===================================================== */

.student-stat-grid {
    max-width: 800px;

    margin: 40px auto;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;
}

.student-stat-card {
    position: relative;

    padding: 28px;

    background: #ffffff;

    border: 1px solid #e2eae5;

    border-radius: 20px;

    text-align: center;

    box-shadow:
        0 8px 24px rgba(21,71,52,.05);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.student-stat-card:hover {
    transform: translateY(-4px);

    border-color: #cbded3;

    box-shadow:
        0 14px 30px rgba(21,71,52,.09);
}

.student-stat-card:active {
    transform: scale(.985);

    transition-duration: .08s;
}


/* ICON DATA SISWA */

.student-stat-icon,
.achievement-icon,
.student-activity-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 16px;

    display: flex;

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

    border-radius: 15px;

    background: #edf7f2;

    color: #0b6b46;

    font-size: 22px;

    transition:
        background-color .22s ease,
        color .22s ease,
        transform .22s ease;
}

.student-stat-card:hover .student-stat-icon,
.achievement-card:hover .achievement-icon,
.student-activity-card:hover .student-activity-icon {
    background: #0b6b46;

    color: #ffffff;

    transform: scale(1.04);
}


/* ANGKA */

.student-stat-card strong {
    display: block;

    color: #154734;

    font-size: 34px;

    line-height: 1;

    transition: color .22s ease;
}

.student-stat-card:hover strong {
    color: #0b6b46;
}

.student-stat-card span {
    display: block;

    margin-top: 8px;

    color: #68756e;

    font-size: 13px;
}


/* INFORMASI DATA */

.student-data-note {
    max-width: 800px;

    margin: 30px auto 0;

    padding: 18px 20px;

    display: flex;

    gap: 13px;

    background: #edf7f2;

    border: 1px solid #d8ebe0;

    border-radius: 14px;
}

.student-data-note > i {
    flex-shrink: 0;

    color: #0b6b46;

    font-size: 16px;

    margin-top: 2px;
}

.student-data-note strong {
    color: #154734;

    font-size: 13px;
}

.student-data-note p {
    margin: 4px 0 0;

    color: #68756e;

    font-size: 12px;

    line-height: 1.6;
}


/* =====================================================
   DATA KELAS
===================================================== */

.class-data-grid {
    max-width: 1000px;

    margin: 45px auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}

.class-card {
    position: relative;

    padding: 24px;

    background: #ffffff;

    border: 1px solid #e2eae5;

    border-radius: 18px;

    box-shadow:
        0 7px 22px rgba(21,71,52,.04);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.class-card:hover {
    transform: translateY(-4px);

    border-color: #cbded3;

    box-shadow:
        0 13px 28px rgba(21,71,52,.08);
}

.class-card:active {
    transform: scale(.985);

    transition-duration: .08s;
}

.class-card span {
    color: #7b8780;

    font-size: 11px;
}

.class-card h3 {
    margin: 5px 0 10px;

    color: #154734;

    font-size: 21px;

    transition: color .22s ease;
}

.class-card:hover h3 {
    color: #0b6b46;
}

.class-card strong {
    display: block;

    color: #0b6b46;

    font-size: 28px;

    line-height: 1.1;
}

.class-card small {
    color: #68756e;

    font-size: 12px;
}


/* TOTAL */

.class-total {
    max-width: 1000px;

    margin: 0 auto;

    padding: 22px 25px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: #154734;

    border-radius: 17px;

    color: #ffffff;

    box-shadow:
        0 10px 26px rgba(21,71,52,.10);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.class-total:hover {
    transform: translateY(-2px);

    box-shadow:
        0 13px 30px rgba(21,71,52,.14);
}

.class-total:active {
    transform: scale(.99);

    transition-duration: .08s;
}

.class-total span {
    font-size: 13px;
}

.class-total strong {
    font-size: 28px;
}

/* =====================================================
   PEMISAH PRESTASI SISWA
===================================================== */

.achievement-divider {
    max-width: 1000px;

    margin: 55px auto 35px;

    display: flex;

    align-items: center;

    gap: 18px;
}

.achievement-divider-line {
    flex: 1;

    height: 1px;

    background: #dfe8e3;
}

.achievement-divider-caption {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 18px;

    background: #edf7f2;

    border: 1px solid #d9ebe1;

    border-radius: 999px;
}

.achievement-divider-caption > span {
    width: 32px;
    height: 32px;

    display: flex;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: #0b6b46;

    color: #ffffff;

    font-size: 13px;
}

.achievement-divider-caption strong {
    display: block;

    color: #154734;

    font-size: 13px;

    line-height: 1.3;
}

.achievement-divider-caption small {
    display: block;

    margin-top: 2px;

    color: #718078;

    font-size: 10px;

    line-height: 1.3;
}


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

@media (max-width: 600px) {

    .achievement-divider {
        margin: 40px auto 28px;

        gap: 10px;
    }

    .achievement-divider-caption {
        gap: 8px;

        padding: 8px 13px;
    }

    .achievement-divider-caption > span {
        width: 28px;
        height: 28px;

        font-size: 11px;
    }

    .achievement-divider-caption strong {
        font-size: 11px;
    }

    .achievement-divider-caption small {
        font-size: 9px;
    }

}

/* =====================================================
   PRESTASI & KEGIATAN SISWA
===================================================== */

.achievement-grid,
.student-activities-grid {
    max-width: 1000px;

    margin: 0 auto 100px;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;
}


/* =====================================================
   KARTU PRESTASI / KEGIATAN
===================================================== */

.achievement-card,
.student-activity-card {
    position: relative;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2eae5;

    border-radius: 19px;

    box-shadow:
        0 8px 25px rgba(21, 71, 52, 0.05);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.achievement-card:hover,
.student-activity-card:hover {
    transform: translateY(-4px);

    border-color: #cbded3;

    box-shadow:
        0 14px 30px rgba(21, 71, 52, 0.09);
}

.achievement-card:active,
.student-activity-card:active {
    transform: scale(0.985);

    transition-duration: 0.08s;
}


/* =====================================================
   KARTU KATEGORI PRESTASI
   Dipakai pada 4 kartu pertama
===================================================== */

.achievement-card > .achievement-icon {
    width: 58px;
    height: 58px;

    margin: 28px 28px 0;

    display: flex;

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

    border-radius: 15px;

    background: #edf7f2;

    color: #0b6b46;

    font-size: 22px;

    transition:
        background-color 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease;
}

.achievement-card:hover > .achievement-icon {
    background: #0b6b46;

    color: #ffffff;

    transform: scale(1.04);
}


/* Judul kategori */

.achievement-card > h3 {
    margin: 0 28px 8px;

    color: #154734;

    font-size: 18px;

    line-height: 1.35;

    transition:
        color 0.22s ease;
}

.achievement-card:hover > h3 {
    color: #0b6b46;
}


/* Deskripsi kategori */

.achievement-card > p {
    margin: 0 28px 28px;

    color: #68756e;

    font-size: 13px;

    line-height: 1.7;
}


/* =====================================================
   PRESTASI SISWA BERGAMBAR
   Dipakai pada 6 kartu setelah kategori
===================================================== */

.achievement-image {
    width: 100%;

    height: 250px;

    overflow: hidden;

    background: #edf7f2;
}

.achievement-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.35s ease;
}

.achievement-card:hover
.achievement-image img {
    transform: scale(1.04);
}


/* =====================================================
   ISI KARTU PRESTASI SISWA
===================================================== */

.achievement-content {
    padding: 21px 24px 24px;
}


/* Label */

.achievement-label {
    display: block;

    margin-bottom: 5px;

    color: #7b8780;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


/* Nama siswa */

.achievement-content h3 {
    margin: 0 0 7px;

    color: #154734;

    font-size: 19px;

    line-height: 1.35;

    transition:
        color 0.22s ease;
}

.achievement-card:hover
.achievement-content h3 {
    color: #0b6b46;
}


/* Nama prestasi */

.achievement-title {
    margin: 0 0 8px;

    color: #56635b;

    font-size: 13px;

    line-height: 1.7;
}


/* Kelas / tingkat / tahun */

.achievement-meta {
    display: inline-block;

    color: #0b6b46;

    font-size: 11px;

    font-weight: 700;

    line-height: 1.5;
}


/* =====================================================
   KEGIATAN SISWA
===================================================== */

.student-activity-icon {
    width: 58px;
    height: 58px;

    margin: 28px 28px 16px;

    display: flex;

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

    border-radius: 15px;

    background: #edf7f2;

    color: #0b6b46;

    font-size: 22px;

    transition:
        background-color 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease;
}

.student-activity-card:hover .student-activity-icon {
    background: #0b6b46;

    color: #ffffff;

    transform: scale(1.04);
}

.student-activity-card h3 {
    margin: 0 28px 8px;

    color: #154734;

    font-size: 18px;

    line-height: 1.35;
}

.student-activity-card:hover h3 {
    color: #0b6b46;
}

.student-activity-card p {
    margin: 0 28px 28px;

    color: #68756e;

    font-size: 13px;

    line-height: 1.7;
}

/* =====================================================
   KEGIATAN SISWA - CARD
===================================================== */

.student-activities-grid {
    max-width: 1000px;

    margin: 45px auto 0;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


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

.student-activity-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2eae5;

    border-radius: 20px;

    box-shadow:
        0 8px 25px rgba(21, 71, 52, 0.05);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.student-activity-card:hover {
    transform: translateY(-4px);

    border-color: #cbded3;

    box-shadow:
        0 14px 30px rgba(21, 71, 52, 0.09);
}

.student-activity-card:active {
    transform: scale(0.985);

    transition-duration: 0.08s;
}


/* =====================================================
   FOTO
===================================================== */

.student-activity-image {
    width: 100%;
    height: 235px;

    overflow: hidden;

    background: #edf7f2;
}

.student-activity-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.35s ease;
}

.student-activity-card:hover
.student-activity-image img {
    transform: scale(1.04);
}


/* =====================================================
   KONTEN
===================================================== */

.student-activity-content {
    padding: 20px 22px 22px;
}


/* Kelas */

.student-activity-label {
    display: inline-block;

    margin-bottom: 7px;

    padding: 5px 9px;

    background: #edf7f2;

    color: #0b6b46;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .5px;
}


/* Judul kegiatan */

.student-activity-content h3 {
    margin: 0 0 7px;

    color: #154734;

    font-size: 18px;

    line-height: 1.4;

    transition:
        color .22s ease;
}

.student-activity-card:hover
.student-activity-content h3 {
    color: #0b6b46;
}


/* Deskripsi */

.student-activity-content p {
    margin: 0 0 13px;

    color: #68756e;

    font-size: 13px;

    line-height: 1.7;
}


/* Tanggal */

.student-activity-meta {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #7b8780;

    font-size: 11px;
}

.student-activity-meta i {
    color: #0b6b46;

    font-size: 11px;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .student-activities-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .student-activity-image {
        height: 230px;
    }

}

@media (max-width: 450px) {

    .student-activity-image {
        height: 210px;
    }

    .student-activity-content {
        padding: 18px 20px 20px;
    }

    .student-activity-content h3 {
        font-size: 17px;
    }

}

/* =====================================================
   FOCUS / AKSESIBILITAS
===================================================== */

.achievement-card:focus-visible,
.student-activity-card:focus-visible {
    outline: 2px solid #0b6b46;

    outline-offset: 3px;
}


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

@media (max-width: 700px) {

    .achievement-grid,
    .student-activities-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .achievement-card > .achievement-icon,
    .student-activity-icon {
        margin-left: 24px;
        margin-right: 24px;
    }

    .achievement-card > h3,
    .achievement-card > p,
    .student-activity-card h3,
    .student-activity-card p {
        margin-left: 24px;
        margin-right: 24px;
    }

    .achievement-content {
        padding: 20px 21px 22px;
    }

    .achievement-image {
        height: 230px;
    }

}


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

@media (max-width: 450px) {

    .achievement-card > .achievement-icon,
    .student-activity-icon {
        width: 52px;
        height: 52px;

        margin: 21px 20px 14px;

        font-size: 19px;
    }

    .achievement-card > h3,
    .achievement-card > p,
    .student-activity-card h3,
    .student-activity-card p {
        margin-left: 20px;
        margin-right: 20px;
    }

    .achievement-card > h3,
    .student-activity-card h3 {
        font-size: 17px;
    }

    .achievement-card > p,
    .student-activity-card p {
        font-size: 12px;
    }

    .achievement-image {
        height: 210px;
    }

    .achievement-content {
        padding: 18px 20px 21px;
    }

    .achievement-content h3 {
        font-size: 17px;
    }

}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .student-stat-grid,
    .achievement-grid,
    .student-activities-grid {
        grid-template-columns: 1fr;
    }

    .class-data-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .student-stat-card {
        padding: 24px;
    }

    .achievement-card,
    .student-activity-card {
        padding: 24px;
    }

}


/* =====================================================
   HP KECIL
===================================================== */

@media (max-width: 450px) {

    .class-data-grid {
        grid-template-columns: 1fr;
    }

    .class-total {
        padding: 18px;
    }

    .student-stat-card strong {
        font-size: 30px;
    }

    .class-card strong {
        font-size: 25px;
    }

    .achievement-card h3,
    .student-activity-card h3 {
        font-size: 17px;
    }

}

/* =====================================================
   KEGIATAN KHUSUS MIS AL MUHAJIRIN
===================================================== */

.special-events-section {
    max-width: 1100px;

    margin: 80px auto 0;
}


/* =====================================================
   GRID
===================================================== */

.special-events-grid {
    margin-top: 40px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


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

.special-event-card {
    display: flex;

    align-items: stretch;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2eae5;

    border-radius: 18px;

    box-shadow:
        0 7px 22px rgba(21, 71, 52, 0.045);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.special-event-card:hover {
    transform: translateY(-3px);

    border-color: #cbded3;

    box-shadow:
        0 13px 28px rgba(21, 71, 52, 0.08);
}

.special-event-card:active {
    transform: scale(.985);

    transition-duration: .08s;
}


/* =====================================================
   TANGGAL
===================================================== */

.special-event-date {
    width: 105px;

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

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

    padding: 20px 12px;

    background: #edf7f2;

    border-right: 1px solid #dcebe2;

    color: #0b6b46;

    text-align: center;
}

.special-event-date strong {
    display: block;

    font-size: 24px;

    line-height: 1.1;
}

.special-event-date span {
    display: block;

    margin-top: 5px;

    color: #6f7d75;

    font-size: 10px;

    line-height: 1.4;
}


/* =====================================================
   CONTENT
===================================================== */

.special-event-content {
    min-width: 0;

    padding: 20px 22px;
}

.special-event-category {
    display: inline-block;

    margin-bottom: 6px;

    color: #7b8780;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .7px;

    text-transform: uppercase;
}

.special-event-content h3 {
    margin: 0 0 7px;

    color: #154734;

    font-size: 17px;

    line-height: 1.4;

    transition: color .2s ease;
}

.special-event-card:hover .special-event-content h3 {
    color: #0b6b46;
}

.special-event-content p {
    margin: 0;

    color: #68756e;

    font-size: 12px;

    line-height: 1.65;
}


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

@media (max-width: 700px) {

    .special-events-section {
        margin-top: 60px;
    }

    .special-events-grid {
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 30px;
    }

    .special-event-date {
        width: 92px;

        padding: 17px 10px;
    }

    .special-event-date strong {
        font-size: 21px;
    }

    .special-event-content {
        padding: 18px;
    }

}

@media (max-width: 430px) {

    .special-event-date {
        width: 82px;
    }

    .special-event-date strong {
        font-size: 19px;
    }

    .special-event-content h3 {
        font-size: 16px;
    }

}

/* =====================================================
   MITRA & KERJA SAMA
===================================================== */

.partners-section {
    padding-top: 20px;
    padding-bottom: 60px;

    background: #f8faf9;
}

.partners-section .section-heading {
    margin-bottom: 28px;
}

.partners-grid {
    width: 100%;
    max-width: 1000px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


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

.partner-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2eae5;

    border-radius: 18px;

    box-shadow:
        0 6px 20px rgba(21, 71, 52, 0.045);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.partner-card:hover {
    transform: translateY(-3px);

    border-color: #cbded3;

    box-shadow:
        0 12px 26px rgba(21, 71, 52, 0.08);
}

.partner-card:active {
    transform: scale(.985);

    transition-duration: .08s;
}


/* =====================================================
   FOTO
===================================================== */

.partner-image {
    width: 100%;
    height: 220px;

    overflow: hidden;

    background: #edf7f2;
}

.partner-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform .35s ease;
}

.partner-card:hover
.partner-image img {
    transform: scale(1.035);
}


/* =====================================================
   KONTEN
===================================================== */

.partner-content {
    padding: 18px 20px 20px;
}

.partner-label {
    display: block;

    margin-bottom: 5px;

    color: #7b8780;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .7px;

    text-transform: uppercase;
}

.partner-content h2 {
    margin: 0;

    color: #154734;

    font-size: 20px;

    line-height: 1.3;

    transition: color .22s ease;
}

.partner-card:hover
.partner-content h2 {
    color: #0b6b46;
}

.partner-program {
    display: inline-flex;

    margin-top: 7px;

    padding: 4px 9px;

    background: #edf7f2;

    color: #0b6b46;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 700;
}

.partner-content p {
    margin: 10px 0 0;

    color: #68756e;

    font-size: 12px;

    line-height: 1.65;
}


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

@media (max-width: 800px) {

    .partners-section {
        padding-top: 15px;
        padding-bottom: 50px;
    }

    .partners-section .section-heading {
        margin-bottom: 24px;
    }

    .partners-grid {
        gap: 15px;
    }

    .partner-image {
        height: 200px;
    }

}


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

@media (max-width: 600px) {

    .partners-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .partner-image {
        height: 220px;
    }

    .partner-content {
        padding: 17px 18px 19px;
    }

}

@media (max-width: 420px) {

    .partner-image {
        height: 200px;
    }

    .partner-content h2 {
        font-size: 19px;
    }

}

/* =====================================================
   PROFIL - OPSI / SUBMENU
===================================================== */

.profile-options {
    width: 100%;
    max-width: 1100px;

    margin: 32px auto 0;
    padding: 0;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    justify-content: center;
    align-items: stretch;

    gap: 18px;
}


/* =====================================================
   CARD OPSI PROFIL
===================================================== */

.profile-option-card {
    position: relative;

    display: flex;
    align-items: flex-start;

    width: 100%;
    max-width: 520px;

    margin: 0 auto;
    margin-bottom: 50px;
    gap: 16px;

    padding: 22px;

    background: #ffffff;

    border: 1px solid #e2eae5;

    border-radius: 18px;

    color: #263a31;
    text-decoration: none;

    box-shadow:
        0 6px 18px rgba(21, 71, 52, 0.04);

    transform: translateY(0);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


/* =====================================================
   HOVER
===================================================== */

.profile-option-card:hover {
    transform: translateY(-3px);

    border-color: #cbded3;

    box-shadow:
        0 12px 26px rgba(21, 71, 52, 0.08);
}


/* =====================================================
   ACTIVE / DIKLIK
===================================================== */

.profile-option-card:active {
    transform: scale(.985);

    transition-duration: .08s;
}


/* =====================================================
   ICON
===================================================== */

.profile-option-icon {
    width: 54px;
    height: 54px;

    flex: 0 0 54px;

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

    border-radius: 14px;

    background: #edf7f2;

    color: #0b6b46;

    font-size: 20px;

    transition:
        background .22s ease,
        color .22s ease,
        transform .22s ease;
}

.profile-option-card:hover .profile-option-icon {
    background: #0b6b46;

    color: #ffffff;

    transform: scale(1.04);
}


/* =====================================================
   KONTEN
===================================================== */

.profile-option-content {
    min-width: 0;

    padding-right: 25px;

    text-align: left;
}

.profile-option-content > span {
    display: block;

    margin: 0 0 4px;

    color: #7d8983;

    font-size: 10px;
    font-weight: 700;

    line-height: 1.3;

    letter-spacing: .7px;

    text-transform: uppercase;
}

.profile-option-content h3 {
    margin: 0 0 6px;

    color: #154734;

    font-size: 18px;
    font-weight: 700;

    line-height: 1.35;

    transition: color .22s ease;
}

.profile-option-card:hover
.profile-option-content h3 {
    color: #0b6b46;
}

.profile-option-content p {
    margin: 0 0 8px;

    color: #68756e;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.6;
}

.profile-option-content strong {
    display: inline-block;

    color: #0b6b46;

    font-size: 11px;
    font-weight: 700;

    line-height: 1.4;
}


/* =====================================================
   PANAH
===================================================== */

.profile-option-arrow {
    position: absolute;

    top: 50%;
    right: 18px;

    color: #9aaa9f;

    font-size: 12px;

    transform: translateY(-50%);

    transition:
        color .22s ease,
        transform .22s ease;
}

.profile-option-card:hover
.profile-option-arrow {
    color: #0b6b46;

    transform:
        translate(4px, -50%);
}


/* =====================================================
   KALAU HANYA ADA SATU OPSI
   Contoh: hanya Mitra & Kerja Sama
===================================================== */

.profile-options > .profile-option-card:only-child {
    grid-column: 1 / -1;

    width: 100%;
    max-width: 520px;

    margin-left: auto;
    margin-right: auto;
}

/* =====================================================
   TANGGAL KEGIATAN MITRA
===================================================== */

.partner-date {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 10px;

    color: #7b8780;

    font-size: 11px;

    line-height: 1.4;
}

.partner-date i {
    color: #0b6b46;

    font-size: 11px;
}


/* =====================================================
   FOCUS
===================================================== */

.profile-option-card:focus-visible {
    outline: 2px solid #0b6b46;

    outline-offset: 3px;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .profile-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 15px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 680px) {

    .profile-options {
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 28px;
    }

    .profile-option-card {
        width: 100%;
        max-width: 100%;

        padding: 20px;

        border-radius: 16px;
    }

    .profile-option-icon {
        width: 50px;
        height: 50px;

        flex-basis: 50px;

        font-size: 18px;
    }

    .profile-option-content {
        padding-right: 22px;
    }

    .profile-option-content h3 {
        font-size: 16px;
    }

    .profile-option-content p {
        font-size: 12px;
    }

    .profile-option-arrow {
        right: 16px;
    }

}


/* =====================================================
   HP KECIL
===================================================== */

@media (max-width: 420px) {

    .profile-option-card {
        padding: 18px;
    }

    .profile-option-icon {
        width: 46px;
        height: 46px;

        flex-basis: 46px;

        font-size: 17px;
    }

    .profile-option-content h3 {
        font-size: 15px;
    }

    .profile-option-content p {
        font-size: 11.5px;
    }

}