/* Production responsive refresh v2.0
   Fokus: laptop, tablet, dan HP, tanpa mengubah struktur PHP native.
*/

:root {
    --container-fluid: 1240px;
    --space-section: clamp(3rem, 6vw, 5.5rem);
    --space-section-compact: clamp(1.65rem, 3.8vw, 2.8rem);
    --card-radius-fluid: clamp(22px, 2.1vw, 30px);
    --card-gap-fluid: clamp(1rem, 2vw, 1.45rem);
    --surface-soft: rgba(255, 255, 255, 0.045);
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    text-rendering: optimizeLegibility;
}

body.nav-open {
    overflow: hidden;
}

section[id],
.page-hero[id],
.section[id] {
    scroll-margin-top: 108px;
}

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

iframe {
    border: 0;
}

.container {
    width: min(var(--container-fluid), calc(100% - clamp(1rem, 4vw, 2.5rem)));
}

.site-main {
    padding-top: clamp(86px, 10vw, 112px);
}

.section {
    padding-block: var(--space-section);
}

.section.compact,
.section-tight {
    padding-top: var(--space-section-compact);
    padding-bottom: var(--space-section-compact);
}

.display-title {
    font-size: clamp(2.45rem, 5.75vw, 5.4rem);
    line-height: 0.98;
}

.page-title {
    font-size: clamp(2rem, 4.15vw, 4.1rem);
    line-height: 1.02;
}

.section-title {
    font-size: clamp(1.5rem, 2.8vw, 2.85rem);
    line-height: 1.1;
}

.lead,
.page-subtitle,
.section-text,
.card-copy,
.hero.hero-premium .lead {
    max-width: 70ch;
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    line-height: 1.8;
}

.premium-card,
.glass-card,
.hero-card,
.about-panel,
.page-card,
.contact-card,
.detail-card,
.page-summary-card,
.stats-card,
.service-card,
.event-card,
.gallery-card,
.team-card,
.value-card,
.event-highlight,
.auth-card,
.user-sidebar,
.social-hub-card,
.organization-lead-card,
.organization-side-card,
.organization-directory-card,
.organization-detail-main,
.organization-share-card,
.organization-gallery-stage-card,
.organization-social-card,
.organization-official-contact {
    border-radius: var(--card-radius-fluid);
}

.hero-actions,
.compact-actions-row,
.organization-card-footer,
.organization-share-grid,
.social-pill-list,
.social-connect-bar,
.social-connect-bar-left,
.social-connect-bar-facebook,
.footer-meta,
.footer-links,
.main-nav,
.nav-auth {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hero-actions .btn,
.compact-actions-row .btn,
.organization-share-grid .share-chip,
.nav-auth .btn,
.main-nav .btn {
    justify-content: center;
}

.btn,
button.btn,
a.btn,
.share-chip,
.filter-btn,
.faq-trigger,
.hero-dot,
.gallery-trigger,
.organization-gallery-thumb,
.organization-gallery-stage,
.organization-identity-visual,
.copy-link-btn,
[data-native-share-url] {
    -webkit-tap-highlight-color: transparent;
}

.btn,
button.btn,
a.btn {
    min-height: 46px;
}

.btn-small,
button.btn-small,
a.btn-small {
    min-height: 40px;
}

.site-header {
    padding-top: max(12px, env(safe-area-inset-top));
}

.site-header.is-scrolled {
    background: rgba(4, 10, 19, 0.8);
}

.nav-shell {
    min-height: 76px;
    padding: 12px clamp(14px, 2vw, 18px);
    gap: 18px;
    border-radius: 28px;
}

.brand {
    min-width: 0;
    gap: 12px;
}

.brand img {
    width: clamp(42px, 4.2vw, 50px);
    height: auto;
}

.brand > div {
    min-width: 0;
}

.brand-title,
.brand-subtitle {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-nav {
    align-items: center;
    gap: 0.4rem;
}

.main-nav a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

.nav-auth {
    margin-left: auto;
    align-items: center;
}

.hero.hero-premium {
    min-height: min(100svh, 1040px);
    padding-top: clamp(126px, 15vw, 176px);
    padding-bottom: clamp(3rem, 7vw, 5rem);
}

.hero.hero-premium .hero-content,
.page-shell,
.about-grid,
.two-column-grid,
.page-grid,
.contact-grid,
.event-feature-grid,
.organization-shell-grid,
.organization-detail-grid,
.social-hub-grid,
.social-showcase-grid,
.social-showcase-top,
.social-youtube-feature,
.user-layout,
.user-panel-grid,
.member-profile-shell,
.member-feature-grid,
.organization-official-contact-grid {
    gap: clamp(1rem, 2.2vw, 1.6rem);
}

.hero.hero-premium .hero-content {
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    align-items: center;
}

.hero.hero-premium .hero-copy {
    gap: 1rem;
}

.hero.hero-premium .display-title {
    max-width: 12ch;
}

.hero-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.chip,
.hero.hero-premium .hero-meta span,
.mini-channel-chip,
.member-status-chip {
    padding: 0.72rem 0.95rem;
    min-height: 40px;
    border-radius: 999px;
}

.hero.hero-premium .hero-slider,
.hero-slider-panel {
    min-width: 0;
}

.hero.hero-premium .hero-slider {
    min-height: clamp(360px, 45vw, 590px);
    border-radius: clamp(24px, 2.1vw, 32px);
    overflow: hidden;
}

.hero.hero-premium .hero-slide {
    inset: 0;
}

.hero.hero-premium .hero-slide img,
.card-image img,
.wide-media img,
.team-photo img,
.organization-lead-media img,
.organization-detail-photo img,
.organization-card-photo img,
.organization-gallery-stage img,
.organization-gallery-thumb img,
.organization-identity-visual img,
.gallery-trigger img,
.event-feature-image img,
.detail-sidebar-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero.hero-premium .hero-slide-content {
    inset: auto clamp(16px, 2.5vw, 24px) clamp(16px, 2.5vw, 24px);
    max-width: min(30rem, 100%);
}

.hero-pagination {
    justify-content: flex-start;
}

.page-hero {
    padding-top: clamp(94px, 12vw, 118px);
    padding-bottom: clamp(20px, 3vw, 34px);
}

.page-shell {
    grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr);
    align-items: end;
}

.page-summary-card {
    width: 100%;
    max-width: 430px;
    justify-self: end;
}

.stats-strip,
.user-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: clamp(0.9rem, 2vw, 1.2rem);
}

.service-grid,
.event-grid,
.team-grid,
.compact-team-grid,
.organization-directory-grid,
.organization-directory-grid.mini-grid,
.user-panel-grid,
.organization-social-grid,
.organization-social-mini-grid,
.organization-official-contact-grid,
.organization-detail-card-grid,
.youtube-feed-grid {
    display: grid;
    gap: var(--card-gap-fluid);
}

.service-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.event-grid,
.team-grid,
.compact-team-grid,
.organization-directory-grid,
.organization-directory-grid.mini-grid,
.user-panel-grid,
.organization-social-grid,
.organization-social-mini-grid,
.organization-detail-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--card-gap-fluid);
}

.value-grid,
.process-grid,
.organization-fact-grid,
.organization-pillars-grid,
.quick-fact-grid {
    display: grid;
    gap: var(--card-gap-fluid);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.youtube-feed-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.gallery-grid-home .gallery-card:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}

.filter-bar {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.filter-bar::-webkit-scrollbar {
    display: none;
}

.filter-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.form-grid,
.contact-form .form-grid,
.site-form .form-grid,
.organization-official-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-group input,
.form-group textarea,
.form-group select,
.site-form input,
.site-form textarea,
.site-form select {
    min-height: 48px;
}

.form-group textarea,
.site-form textarea {
    min-height: 140px;
}

.cta-banner {
    gap: 1rem;
    align-items: center;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.95fr 1fr 0.95fr;
    gap: clamp(1rem, 2vw, 1.4rem);
}

.footer-bottom {
    gap: 0.9rem;
}

.user-layout {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    align-items: start;
}

.user-sidebar {
    top: 104px;
}

.user-content,
.user-list-stack,
.activity-timeline {
    min-width: 0;
}

.organization-shell-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(290px, 0.95fr);
}

.organization-lead-card {
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
}

.organization-detail-grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
}

.organization-gallery-shell,
.organization-gallery-thumb-grid {
    display: grid;
    gap: var(--card-gap-fluid);
}

.organization-gallery-stage-card {
    overflow: hidden;
}

.organization-gallery-stage,
.organization-gallery-stage img {
    width: 100%;
}

.organization-gallery-stage {
    min-height: clamp(260px, 44vw, 520px);
}

.organization-gallery-thumb-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.organization-cinematic-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: clamp(1rem, 2.4vw, 1.6rem);
}

.organization-cinematic-highlight-grid,
.organization-share-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.organization-share-grid .share-chip {
    min-height: 46px;
    width: 100%;
}

.organization-social-card-head,
.organization-card-head {
    gap: 0.9rem;
}

.organization-card-head {
    align-items: center;
}

.organization-card-photo,
.organization-detail-avatar.large {
    flex-shrink: 0;
}

.organization-official-contact-grid {
    display: grid;
    gap: 0.9rem;
}

.organization-official-contact-item,
.organization-social-card,
.organization-context-card,
.user-list-item,
.activity-item {
    min-width: 0;
}

.social-hub-grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(320px, 0.94fr);
    align-items: start;
}

.social-hub-card {
    padding: clamp(1rem, 2vw, 1.2rem);
    gap: clamp(0.9rem, 1.8vw, 1.1rem);
}

.social-brief-card {
    align-items: flex-start;
}

.social-brief-card .btn {
    flex-shrink: 0;
}

.social-youtube-feature {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    align-items: center;
}

.social-device-frame {
    width: min(100%, 270px);
    max-width: 100%;
    min-height: auto;
    aspect-ratio: 9 / 18.5;
}

.social-video-frame {
    min-height: auto;
    height: 100%;
    aspect-ratio: 9 / 16;
}

.youtube-feed-card {
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: stretch;
}

.youtube-feed-thumb {
    aspect-ratio: 1 / 1;
}

.youtube-feed-body,
.youtube-feed-body h4,
.youtube-feed-body p,
.user-list-item > div,
.organization-card-head > div,
.organization-lead-copy,
.organization-detail-summary-stack {
    min-width: 0;
}

.youtube-feed-body h4,
.organization-card-head h3,
.team-card h3,
.service-card h3,
.event-card h3 {
    overflow-wrap: anywhere;
}

.social-facebook-frame-wrap {
    padding: 0;
}

.social-embed-shell-facebook {
    max-width: min(100%, 360px);
    margin-inline: auto;
}

.social-frame-facebook {
    min-height: clamp(560px, 70vh, 760px);
}

.map-card iframe,
.location-map iframe {
    width: 100%;
    min-height: clamp(280px, 46vw, 460px);
}

.lightbox {
    padding: clamp(16px, 3vw, 28px);
}

.lightbox-stage {
    width: min(100%, 1100px);
}

@media (max-width: 1180px) {
    .page-shell,
    .social-hub-grid,
    .organization-shell-grid,
    .organization-detail-grid,
    .organization-cinematic-grid,
    .hero.hero-premium .hero-content,
    .social-showcase-grid {
        grid-template-columns: 1fr;
    }

    .page-summary-card {
        justify-self: stretch;
        max-width: none;
    }

    .organization-lead-card {
        grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .site-main {
        padding-top: 94px;
    }

    .nav-shell {
        position: relative;
        min-height: 72px;
    }

    .main-nav {
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        right: 0;
        z-index: 35;
        padding: 16px;
        border-radius: 28px;
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
        background: rgba(5, 10, 20, 0.97);
        border: 1px solid rgba(255, 255, 255, 0.09);
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.34);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.26s ease, visibility 0.26s ease, transform 0.26s ease;
    }

    .main-nav.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .main-nav a,
    .main-nav .btn,
    .nav-auth {
        width: 100%;
    }

    .nav-auth {
        margin-left: 0;
        padding-top: 0.25rem;
        flex-direction: column;
        align-items: stretch;
    }

    .hero.hero-premium .hero-content,
    .about-grid,
    .two-column-grid,
    .page-grid,
    .contact-grid,
    .event-feature-grid,
    .user-layout,
    .social-showcase-top,
    .social-youtube-feature,
    .organization-official-contact-grid {
        grid-template-columns: 1fr;
    }

    .hero.hero-premium .hero-content {
        align-items: start;
    }

    .hero-slider-panel,
    .social-device-frame {
        margin-inline: auto;
    }

    .hero-pagination {
        justify-content: center;
    }

    .user-sidebar {
        position: static;
    }

    .organization-lead-card,
    .organization-card-head {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .container {
        width: min(var(--container-fluid), calc(100% - 1rem));
    }

    .hero.hero-premium {
        min-height: auto;
        padding-top: 116px;
        padding-bottom: 3rem;
    }

    .hero.hero-premium .display-title {
        max-width: 14ch;
    }

    .hero.hero-premium .hero-slider {
        min-height: clamp(320px, 68vw, 480px);
    }

    .gallery-grid-home .gallery-card:nth-child(1) {
        grid-column: span 1;
        grid-row: span 1;
    }

    .footer-grid,
    .form-grid,
    .contact-form .form-grid,
    .site-form .form-grid,
    .organization-cinematic-highlight-grid,
    .organization-share-grid {
        grid-template-columns: 1fr;
    }

    .social-frame-facebook {
        min-height: 660px;
    }
}

@media (max-width: 640px) {
    .site-main {
        padding-top: 88px;
    }

    .nav-shell {
        border-radius: 24px;
        padding-inline: 12px;
    }

    .brand-title {
        font-size: 0.98rem;
    }

    .brand-subtitle {
        font-size: 0.68rem;
    }

    .display-title {
        font-size: clamp(2rem, 11vw, 3.2rem);
    }

    .page-title {
        font-size: clamp(1.8rem, 8.4vw, 2.6rem);
    }

    .hero.hero-premium .hero-slider {
        min-height: clamp(280px, 84vw, 400px);
    }

    .hero.hero-premium .hero-slide-content {
        inset: auto 14px 14px 14px;
    }

    .hero-actions,
    .compact-actions-row,
    .organization-card-footer,
    .organization-share-grid,
    .hero-chip-row,
    .hero.hero-premium .hero-meta,
    .nav-auth {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn,
    .compact-actions-row .btn,
    .organization-share-grid .share-chip,
    .nav-auth .btn,
    .hero-chip-row .chip {
        width: 100%;
    }

    .premium-card,
    .glass-card,
    .hero-card,
    .about-panel,
    .page-card,
    .contact-card,
    .detail-card,
    .page-summary-card,
    .stats-card,
    .service-card,
    .event-card,
    .gallery-card,
    .team-card,
    .value-card,
    .auth-card,
    .social-hub-card,
    .organization-lead-card,
    .organization-side-card,
    .organization-directory-card,
    .organization-detail-main,
    .organization-share-card,
    .organization-social-card,
    .organization-official-contact {
        padding: 18px;
    }

    .stats-strip,
    .service-grid,
    .event-grid,
    .team-grid,
    .compact-team-grid,
    .gallery-grid,
    .value-grid,
    .process-grid,
    .organization-social-grid,
    .organization-social-mini-grid,
    .organization-directory-grid,
    .organization-directory-grid.mini-grid,
    .organization-detail-card-grid,
    .user-stat-grid,
    .user-panel-grid,
    .youtube-feed-grid,
    .organization-fact-grid,
    .organization-pillars-grid,
    .organization-gallery-thumb-grid {
        grid-template-columns: 1fr;
    }

    .user-sidebar-head,
    .organization-card-head,
    .organization-social-card-head,
    .social-brief-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .organization-card-photo,
    .organization-detail-avatar.large,
    .organization-detail-avatar,
    .user-avatar-large {
        width: 72px;
        height: 72px;
    }

    .social-device-frame {
        width: min(100%, 250px);
    }

    .youtube-feed-card {
        grid-template-columns: 96px minmax(0, 1fr);
        padding: 0.68rem;
    }

    .social-frame-facebook {
        min-height: 610px;
    }

    .lightbox {
        padding-inline: 12px;
    }
}

@media (max-width: 480px) {
    .container {
        width: calc(100% - 0.9rem);
    }

    .nav-shell {
        gap: 10px;
    }

    .brand {
        gap: 10px;
    }

    .brand img {
        width: 40px;
    }

    .menu-toggle {
        width: 46px;
        height: 46px;
    }

    .page-summary-card,
    .hero-story,
    .section-intro,
    .social-hub-card,
    .organization-share-card,
    .organization-side-card,
    .organization-detail-main {
        overflow: hidden;
    }

    .hero.hero-premium .hero-slider {
        min-height: 260px;
    }

    .social-device-frame {
        width: min(100%, 232px);
    }

    .social-frame-facebook {
        min-height: 560px;
    }

    .youtube-feed-card {
        grid-template-columns: 88px minmax(0, 1fr);
    }
}