/* Modern polish layer. Uses the existing theme palette only. */
:root {
    --theme-green: #03871d;
    --theme-text: #393939;
    --theme-muted: #626262;
    --theme-soft: #f7f9fb;
    --theme-line: #c4d8dc;
}

html {
    scroll-behavior: smooth;
}

body {
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img, video, iframe, table { max-width: 100%; }

.spinner-wrapper { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, #f1fff4 0, #fff 48%, #f7faf8 100%); }
.loading-card { text-align: center; color: var(--theme-text); padding: 2rem; }
.loading-card > strong { display: block; margin-top: 1rem; font-size: 1.2rem; letter-spacing: .02em; }
.loading-card > span { display: block; margin-top: .25rem; color: var(--theme-muted); font-size: .875rem; }
.loading-mark { position: relative; width: 94px; height: 94px; margin: auto; display: grid; place-items: center; }
.loading-mark img { width: 52px; height: 52px; object-fit: contain; position: relative; z-index: 1; }
.loading-ring { position: absolute; inset: 0; border: 3px solid rgba(3,135,29,.12); border-top-color: var(--theme-green); border-radius: 50%; animation: loading-spin .9s linear infinite; }
.loading-progress { width: 150px; height: 4px; margin: 1.25rem auto 0; overflow: hidden; border-radius: 99px; background: rgba(3,135,29,.1); }
.loading-progress i { display: block; width: 45%; height: 100%; border-radius: inherit; background: var(--theme-green); animation: loading-slide 1.25s ease-in-out infinite; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@keyframes loading-slide { from { transform: translateX(-110%); } to { transform: translateX(335%); } }

.navbar-custom {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.navbar-custom .navbar-brand.logo-image img {
    max-height: 48px;
    width: auto;
}

.navbar-custom .nav-item .nav-link {
    border-radius: 999px;
    font-weight: 700;
    padding-inline: 1rem;
}

.navbar-custom .nav-item .nav-link:hover,
.navbar-custom .nav-item .nav-link.active {
    background-color: rgba(3, 135, 29, 0.08);
}

.header .header-content {
    min-height: 92vh;
    display: flex;
    align-items: center;
    padding-top: 7.5rem;
    padding-bottom: 4.5rem;
}

.header h1 {
    max-width: 720px;
    line-height: 1.05;
}

.header h3 {
    margin-top: 1rem;
    line-height: 1.35;
}

.header .image-container img,
.basic-2 .image-container img {
    filter: drop-shadow(0 1.25rem 2.5rem rgba(0, 0, 0, 0.12));
}

.hero-video { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 1.25rem; color: #fff; background: #102d18; box-shadow: 0 1.5rem 3.5rem rgba(0,0,0,.2); cursor: pointer; text-align: left; transition: transform .25s ease, box-shadow .25s ease; }
.hero-video:hover { transform: translateY(-5px); box-shadow: 0 2rem 4rem rgba(0,0,0,.25); }
.hero-video-frame { display: block; position: relative; aspect-ratio: 16/9; pointer-events: none; }
.hero-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; transform: scale(1.015); }
.hero-video-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: .9rem; padding: 1.5rem; background: linear-gradient(180deg,rgba(0,0,0,.02) 35%,rgba(5,32,12,.88)); }
.hero-play { width: 56px; height: 56px; flex: 0 0 56px; display: grid; place-items: center; border-radius: 50%; color: var(--theme-green); background: #fff; box-shadow: 0 8px 25px rgba(0,0,0,.22); }
.hero-play i { margin-left: 3px; }.hero-video-label small,.hero-video-label strong { display: block; }.hero-video-label small { opacity: .78; }.hero-video-label strong { font-size: 1.05rem; }
.video-modal .modal-content { background: #07130a; border: 0; }.video-modal .modal-header { color: #fff; border-color: rgba(255,255,255,.12); }.video-modal .close { color: #fff; text-shadow: none; opacity: .9; }.video-modal .modal-body { padding: 0; }
.video-responsive { position: relative; aspect-ratio: 16/9; }.video-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.hero-illustration-video { position: relative; display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hero-illustration-video>img { position: relative; z-index: 2; display: block; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 1.25rem 2.5rem rgba(0,0,0,.12)); }
.illustration-screen { position: absolute; z-index: 1; top: 1.96%; left: 33.01%; width: 49.26%; height: 41.86%; overflow: hidden; background-color: #111; box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); }
.illustration-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.illustration-screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 55%,rgba(0,0,0,.28)); transition: background .2s ease; }
.board-play { position: absolute; z-index: 2; top: 50%; left: 50%; width: clamp(34px,5vw,58px); height: clamp(34px,5vw,58px); display: grid; place-items: center; border-radius: 50%; color: #fff; background: #e62117; box-shadow: 0 8px 22px rgba(0,0,0,.3); transform: translate(-50%,-50%); transition: transform .2s ease, background .2s ease; }
.board-play i { margin-left: 3px; font-size: clamp(.8rem,1.5vw,1.2rem); }
.hero-illustration-video:hover .board-play { background: var(--theme-green); transform: translate(-50%,-50%) scale(1.08); }
.hero-illustration-video:focus { outline: none; }.hero-illustration-video:focus-visible .illustration-screen { outline: 4px solid #fff; outline-offset: 3px; }

/* Contact area */
.contact-section { background: linear-gradient(145deg,#f4fbf6,#fff); }.contact-heading { max-width: 650px; margin: 0 auto 2.5rem; text-align: center; }.contact-heading h2 { margin: .4rem 0 .75rem; }.contact-heading p { color: var(--theme-muted); }.section-kicker { color: var(--theme-green); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.contact-shell { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); overflow: hidden; border: 1px solid rgba(3,135,29,.1); border-radius: 1.25rem; background: #fff; box-shadow: 0 1.5rem 3.5rem rgba(24,58,32,.1); }
.contact-map { position: relative; min-height: 590px; background: #eaf4ec; }.contact-map>iframe { width: 100%; height: 100%; min-height: 590px; border: 0; }.contact-address { position: absolute; right: 1.25rem; bottom: 1.25rem; left: 1.25rem; display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem; border-radius: 1rem; background: rgba(255,255,255,.95); box-shadow: 0 10px 30px rgba(0,0,0,.14); backdrop-filter: blur(10px); }.contact-address p { margin: .2rem 0 0; line-height: 1.55; }.contact-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--theme-green); }.contact-address small,.contact-email small { display: block; color: var(--theme-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.contact-content { padding: clamp(1.5rem,4vw,3rem); }.contact-email { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid #e7eee9; }.contact-email a { display: block; margin-top: .2rem; color: var(--theme-green); font-weight: 700; overflow-wrap: anywhere; }.contact-content h3 { margin-bottom: 1.25rem; font-size: 1.35rem; }.contact-groups { display: grid; gap: 1.25rem; }.contact-group { display: grid; gap: .6rem; }.contact-group-label { color: var(--theme-muted); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.contact-person { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: .8rem; align-items: center; padding: .85rem; border: 1px solid #e3eee6; border-radius: .85rem; color: var(--theme-text); text-decoration: none !important; transition: .2s ease; }.contact-person:hover { border-color: rgba(3,135,29,.4); color: var(--theme-green); transform: translateX(3px); box-shadow: 0 8px 20px rgba(3,135,29,.08); }.whatsapp-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #25d366; font-size: 1.25rem; }.contact-person strong,.contact-person small { display: block; }.contact-person small { margin-top: .15rem; color: var(--theme-muted); }.contact-arrow { color: var(--theme-green); font-size: .8rem; }

.btn,
.btn-solid-reg,
.btn-solid-lg,
.btn-outline-reg,
.btn-outline-lg,
.btn-outline-sm {
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 0.625rem 1.5rem rgba(3, 135, 29, 0.14);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn:hover,
.btn-solid-reg:hover,
.btn-solid-lg:hover,
.btn-outline-reg:hover,
.btn-outline-lg:hover,
.btn-outline-sm:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.875rem 2rem rgba(3, 135, 29, 0.18);
}

.cards-1,
.basic-2,
.slider-2,
.form-2,
#news_wrapper {
    position: relative;
}

.cards-1 .card {
    height: auto !important;
    min-height: 410px;
    border-radius: 0.75rem;
    display: inline-flex;
    vertical-align: top;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cards-1 .card:hover,
.card-inews-index:hover,
#news_wrapper .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2.25rem rgba(0, 0, 0, 0.1) !important;
}

.cards-1 .card-image {
    max-height: 116px;
    object-fit: contain;
}

.cards-1 .card-body {
    display: flex;
    flex-direction: column;
}

.cards-1 .card-body .btn {
    margin-top: auto;
    align-self: flex-start;
}

.basic-2 .text-container,
.form-2 .col-lg-6:last-child {
    padding: 1.5rem;
}

.li-space-lg .media {
    align-items: flex-start;
    margin-bottom: 0.9rem;
}

.li-space-lg .media i {
    margin-top: 0.25rem;
}

.modal-content,
.card,
.rounded-lg,
.map-responsive,
.trend-top-img,
.trend-bottom-img,
.weekly-img,
.image-container {
    border-radius: 0.75rem !important;
}

.modal-content,
.card {
    overflow: hidden;
}

.image-container {
    overflow: hidden;
}

.image-zoom,
.card-img-top-news,
.trend-top-img img,
.trend-bottom-img img,
.weekly-img img,
#news_wrapper article img {
    transition: transform 0.35s ease;
}

.image-container:hover .image-zoom,
.trend-top-img:hover img,
.trend-bottom-img:hover img,
.weekly-img:hover img {
    transform: scale(1.04);
}

.card-img-top-news {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.news-title,
.title-other-news,
.trend-bottom-cap h4,
.trand-right-cap h4 {
    line-height: 1.35;
}

.news-desc,
.card-text,
article p,
article li {
    line-height: 1.8;
}

#news_wrapper {
    padding-top: 7rem;
    padding-bottom: 4rem;
}

#news_wrapper .trending-area {
    padding-top: 1rem;
}

#news_wrapper .trand-right-single {
    gap: 1rem;
    align-items: center;
    border-radius: 0.75rem;
    padding: 0.75rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

#news_wrapper .trand-right-single:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.875rem 1.75rem rgba(0, 0, 0, 0.08);
}

#news_wrapper .trand-right-img,
#news_wrapper .trand-right-img img {
    border-radius: 0.625rem;
    flex: 0 0 auto;
    overflow: hidden;
}

#news_wrapper .weekly-wrapper {
    border-radius: 0.75rem;
}

#news_wrapper .d-flex.my-4,
#news_wrapper .weekly-wrapper > .d-flex {
    flex-wrap: wrap;
    gap: 0.75rem;
}

#news_wrapper .d-flex.my-4 a,
#news_wrapper .weekly-wrapper > .d-flex a {
    text-decoration: none;
}

#news_wrapper article {
    padding-bottom: 2rem;
    overflow-wrap: anywhere;
}

#news_wrapper article img, #news_wrapper article iframe { height: auto; border-radius: .75rem; }
.modal-dialog { width: auto; }
.modal-body .row { margin-left: 0; margin-right: 0; }

#news_wrapper article .main-title {
    line-height: 1.2;
}

.footer .container,
.copyright .container {
    max-width: 1120px;
}

.footer .fa-stack {
    transition: transform 0.2s ease;
}

.footer .fa-stack:hover {
    transform: translateY(-2px);
}

@media (max-width: 991.98px) {
    .navbar-custom { padding: .65rem 1rem; background: rgba(255,255,255,.94); box-shadow: 0 6px 24px rgba(0,0,0,.08); }
    .navbar-custom .navbar-brand.logo-image img { max-width: min(65vw, 230px); max-height: 42px; }
    .navbar-custom .navbar-collapse {
        max-height: calc(100vh - 72px); overflow-y: auto; padding: .75rem 0 .35rem;
    }

    .navbar-custom .nav-item .nav-link {
        padding: 0.85rem 1rem;
    }

    .header .header-content {
        min-height: auto;
        padding-top: 7rem;
        text-align: center;
    }

    .header .text-container {
        margin-bottom: 2.5rem;
    }

    .cards-1 .card {
        width: 100%;
        margin-right: 0;
        min-height: auto;
    }

    .basic-2 .text-container,
    .form-2 .col-lg-6:last-child {
        padding: 1rem 0;
    }

    #news_wrapper {
        padding-top: 6rem;
    }
    #news_wrapper .trand-right-single { align-items: flex-start; }
    .modal-xl { max-width: calc(100vw - 2rem); margin-inline: auto; }
    .hero-video, .hero-illustration-video { max-width: 680px; margin: 0 auto; }
    .contact-shell { grid-template-columns: 1fr; }.contact-map,.contact-map>iframe { min-height: 390px; }
}

@media (max-width: 575.98px) {
    h2 { font-size: 1.8rem; line-height: 1.2; }
    .header { position: relative; overflow: hidden; background: linear-gradient(180deg, #f7fff9 0%, #fff 58%, #f4fbf6 100%); border-radius: 0 0 2rem 2rem; }
    .header::before { content: ''; position: absolute; top: 5.5rem; right: -5rem; width: 14rem; height: 14rem; border-radius: 50%; background: rgba(3,135,29,.055); }
    .header::after { content: ''; position: absolute; right: 1.25rem; bottom: 1rem; left: 1.25rem; height: 1px; background: linear-gradient(90deg,transparent,rgba(3,135,29,.2),transparent); }
    .header h1 {
        max-width: 330px;
        margin: 0 auto .8rem;
        font-size: clamp(1.95rem, 9vw, 2.3rem);
        line-height: 1.08;
        letter-spacing: -.035em;
    }
    .header h3 { max-width: 310px; margin: 0 auto; font-size: clamp(1.25rem, 6.2vw, 1.55rem); line-height: 1.35; }
    .header .p-large:empty { display: none; }
    .header .header-content { min-height: auto; padding-top: 6.6rem; padding-bottom: 2.75rem; }
    .header .text-container { position: relative; z-index: 2; margin-bottom: 1.25rem; }
    .header .text-container::before { content: 'Selamat Datang di'; display: inline-flex; margin-bottom: .75rem; padding: .35rem .75rem; border: 1px solid rgba(3,135,29,.16); border-radius: 999px; color: var(--theme-green); background: rgba(255,255,255,.72); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .header .text-container .btn-solid-lg { min-width: 190px; margin-top: 1.35rem; padding: .9rem 1.5rem; font-size: .75rem; box-shadow: 0 .75rem 1.75rem rgba(3,135,29,.2); }
    .header .image-container { margin-inline: auto; max-width: 390px; }
    .header .col-lg-6:last-child { padding-inline: .35rem; }
    .header .hero-illustration-video { width: min(100%, 390px); margin-top: .25rem; margin-bottom: -1rem; }
    .header .illustration-screen { box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 .4rem 1rem rgba(0,0,0,.1); }
    .header .board-play { width: 38px; height: 38px; font-size: .8rem; }
    .cards-1, .basic-2, .slider-2, .form-2 { padding-top: 4rem; padding-bottom: 4rem; }
    .cards-1 .card { margin-left: 0; margin-bottom: 1.25rem; }
    .cards-1 .card-body { padding: 1.5rem 1.25rem; }
    .cards-1 .card-body .btn { align-self: center; }
    .btn-solid-reg, .btn-solid-lg, .btn-outline-reg, .btn-outline-lg { max-width: 100%; white-space: normal; text-align: center; margin-bottom: .5rem; }
    #news_wrapper { padding-top: 5.25rem; }
    #news_wrapper .trand-right-single { display: grid !important; grid-template-columns: 92px minmax(0,1fr); gap: .75rem; }
    #news_wrapper .trand-right-img, #news_wrapper .trand-right-img img { width: 92px; height: 76px; object-fit: cover; }
    #news_wrapper article .main-title { font-size: 1.85rem; overflow-wrap: anywhere; }
    .modal-xl { max-width: calc(100vw - 1rem); margin: .5rem auto; }
    .modal-body .p-4 { padding: 1.25rem !important; }
    .footer { text-align: center; }
    .hero-video-overlay { padding: 1rem; }.hero-play { width: 48px; height: 48px; flex-basis: 48px; }.hero-video-label strong { font-size: .95rem; }
    .video-modal .modal-dialog { margin: .5rem; }.video-modal .modal-title { font-size: .95rem; }
    .contact-heading { margin-bottom: 1.5rem; }.contact-shell { border-radius: 1rem; }.contact-map,.contact-map>iframe { min-height: 320px; }.contact-address { right: .75rem; bottom: .75rem; left: .75rem; padding: .85rem; }.contact-address p { font-size: .84rem; }.contact-content { padding: 1.25rem; }.contact-person { grid-template-columns: 38px minmax(0,1fr); padding: .75rem; }.whatsapp-icon { width: 38px; height: 38px; }.contact-arrow { display: none; }.contact-person strong { font-size: .92rem; }.contact-person small { font-size: .78rem; }

    .card-img-top-news {
        height: 210px;
    }

    .copyright .col-lg-12 {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }
}

@media (max-width: 359.98px) {
    .navbar-custom .navbar-brand.logo-image img { max-width: 205px; }
    .navbar-custom .navbar-toggler { font-size: 1.5rem; padding: .25rem; }
    .header h1 { font-size: 1.85rem; }
    .header .header-content { padding-top: 6.25rem; }
    .header .text-container::before { font-size: .64rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}