/* ============================================================
   ELC Premium — Override & perbaikan di atas CSS asli.
   Tujuan: pastikan konten SELALU terlihat (anti-blank) lalu
   animasi GSAP hanya "memperindah". Bila JS/CDN gagal, situs
   tetap tampil utuh.
   ============================================================ */

/* 1) Reveal-safe: elemen yang di CSS asli di-set opacity:0 dibuat
      terlihat secara default. Kelas .elc-anim-ready ditambahkan oleh
      JS hanya bila GSAP siap, untuk mengaktifkan animasi bertahap. */
.hero-sub,
.hero-desc,
.hero-actions,
.hero-img-wrapper,
.floating-badge,
.bento-card,
.cinematic-reveal-paragraph,
.section-intro,
.pillar-card,
.program-card,
.service-card,
.insight-card,
.metric-card,
.gallery-item,
.partner-logo {
    opacity: 1;
    transform: none;
}

/* Bila JS animasi aktif, biarkan GSAP yang mengatur (override balik). */
html.elc-anim-on .elc-animate-init {
    opacity: 0;
    will-change: opacity, transform;
}

/* 2) Hero image: pastikan tampil penuh & proporsional seperti desain. */
.hero-img-wrapper {
    overflow: hidden;
    border-radius: 14px;
}
.hero-img-wrapper img,
img#heroImg {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    display: block;
    min-height: 360px;
}

/* 3) Timeline tabs: hanya kartu .active yang tampil. Bila JS mati,
      kartu pertama (yang sudah punya class active di markup) tetap tampil. */
.timeline-cards-wrapper .timeline-card { display: none; opacity: 1 !important; transform: none !important; }
.timeline-cards-wrapper .timeline-card.active { display: block; }

/* 4) Smooth scroll dasar (bila Lenis gagal, native tetap halus). */
html { scroll-behavior: smooth; }

/* 5) Header sticky shadow saat scroll. */
.site-header.scrolled {
    box-shadow: 0 6px 24px -10px rgba(26, 43, 95, 0.28);
}

/* 6) Mobile nav (authoritative). CSS asli membuka lewat .active + transform,
      sementara JS memakai .open. Blok ini menyelaraskannya dan mereset transform
      serta z-index:-1 warisan dari elc-original.css agar menu benar-benar tampil. */
@media (max-width: 900px) {
    /* tombol hamburger & sembunyikan tombol "Book" versi desktop */
    .menu-toggle { display: block; }
    .nav-wrapper > .btn-primary { display: none; }

    nav.nav-links {
        display: none;
        transform: none;            /* reset translateY(-150%) dari elc-original */
    }
    nav.nav-links.open,
    nav.nav-links.active {          /* dukung kedua nama kelas */
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 100%; left: 0; right: 0; width: 100%;
        transform: none;
        background: #fff;
        padding: 20px 24px 28px;
        gap: 14px;
        box-shadow: 0 14px 34px -14px rgba(26,43,95,0.28);
        border-bottom: 1px solid rgba(197,198,211,0.35);
        z-index: 1000;              /* di atas konten (bukan -1) */
    }
    nav.nav-links.open .btn-primary,
    nav.nav-links.active .btn-primary {
        display: inline-flex !important;   /* tampilkan tombol "Book" di dalam menu */
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }
    nav.nav-links a { padding: 10px 0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .elc-animate-init { opacity: 1 !important; transform: none !important; }
}

/* 7) Cinematic quote ("This approach allows…"): CSS asli memakai warna nyaris
      transparan (#ffffff1a) yang seharusnya di-reveal oleh animasi per-kata.
      Override ini menjamin teks selalu TERBACA (dengan atau tanpa JS); saat JS
      aktif, tiap .word dianimasikan lewat opacity (0.15 -> 1). */
.cinematic-reveal-paragraph { color: rgba(255,255,255,.92) !important; }
.cinematic-reveal-paragraph .word { display: inline-block; will-change: opacity; }

/* ============ Workshop Modal (Corporate Alignment) ============ */
.workshop-modal-overlay { position: fixed; inset: 0; background: rgba(16,28,44,0.72); backdrop-filter: blur(4px); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px; }
.workshop-modal-overlay.open { display: flex; }
.workshop-modal-container { background: #fff; border-radius: 16px; max-width: 980px; width: 100%; max-height: 88vh; overflow: hidden; display: grid; grid-template-columns: 1fr 1.1fr; position: relative; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
.workshop-modal-close { position: absolute; top: 16px; right: 16px; z-index: 2; background: rgba(255,255,255,.9); border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #1A2B5F; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.workshop-modal-close:hover { background: #fff; }
.workshop-modal-left-pane { padding: 40px 36px; overflow-y: auto; max-height: 88vh; }
.workshop-modal-title { font-family: var(--font-display, "Playfair Display", serif); font-size: 26px; color: #1A2B5F; margin: 0 0 18px; line-height: 1.2; }
.workshop-modal-body { font-family: var(--font-body, "Inter", sans-serif); font-size: 15px; line-height: 1.7; color: #4A5568; }
.workshop-modal-right-pane { background: #f0f3ff; padding: 28px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; max-height: 88vh; }
.workshop-modal-main-img { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; background: #dde; }
.workshop-modal-main-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.workshop-preview-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(16,28,44,.82)); color: #fff; font-size: 13px; padding: 24px 16px 12px; }
.workshop-modal-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.workshop-modal-thumbs button { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 1; background: #dde; }
.workshop-modal-thumbs button.active { border-color: var(--gold-accent, #B19A6D); }
.workshop-modal-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.elc-modal-open { overflow: hidden; }
@media (max-width: 768px) {
    .workshop-modal-container { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
    .workshop-modal-left-pane, .workshop-modal-right-pane { max-height: none; }
}

/* ============ Floating Language Switch (replika desain asli) ============ */
.lang-switcher-wrap {
    position: fixed; bottom: 30px; right: 30px; z-index: 10000;
    display: flex; gap: 2px;
    background: rgba(11, 14, 27, 0.95);
    padding: 4px; border-radius: 30px;
    border: 1px solid rgba(177, 154, 109, 0.4);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    backdrop-filter: blur(8px);
    user-select: none;
}
.lang-switcher-wrap .elc-lang-pill {
    padding: 6px 14px; border-radius: 20px; border: none;
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
    font-size: 11px; font-weight: 700; cursor: pointer; text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    background: transparent; color: #8a8d9f; opacity: 0.8;
    line-height: 1; display: inline-flex; align-items: center;
}
.lang-switcher-wrap .elc-lang-pill.active {
    background: var(--gold-accent, #B19A6D); color: var(--deep-navy, #1A2B5F); opacity: 1;
}
.lang-switcher-wrap .elc-lang-pill:hover { opacity: 1; }
@media (max-width: 600px) {
    .lang-switcher-wrap { bottom: 18px; right: 18px; }
}

/* ============ Article reader ============ */
.article-reader-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--gold-accent, #B19A6D); z-index: 9998; transition: width .1s linear; }
.reader-content-canvas h2 { font-family: var(--font-display, serif); font-size: 28px; color: var(--deep-navy, #1A2B5F); margin: 36px 0 16px; }
.reader-content-canvas h3 { font-family: var(--font-display, serif); font-size: 22px; color: var(--deep-navy, #1A2B5F); margin: 28px 0 12px; }
.reader-content-canvas p { margin-bottom: 20px; }
.reader-content-canvas img { max-width: 100%; height: auto; border-radius: 12px; margin: 24px 0; }
.reader-content-canvas blockquote { border-left: 3px solid var(--gold-accent, #B19A6D); padding-left: 20px; font-style: italic; color: var(--deep-navy, #1A2B5F); margin: 24px 0; }
.elc-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; margin: 0 3px; border: 1px solid var(--outline-variant, #c5c6d3); border-radius: 8px; text-decoration: none; color: var(--deep-navy, #1A2B5F); font-family: var(--font-sans); }
.elc-pagination .page-numbers.current { background: var(--deep-navy, #1A2B5F); color: #fff; border-color: var(--deep-navy, #1A2B5F); }
.elc-pagination .page-numbers:hover { border-color: var(--gold-accent, #B19A6D); }
.hover-text-gold:hover { color: var(--gold-accent, #B19A6D) !important; }

/* ============ Gallery view hint & GLightbox ============ */
.gallery-view-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--gold-light, #D4C4A8); }
.gallery-view-hint .material-symbols-outlined { font-size: 16px; }
.engagement-gallery-card { cursor: pointer; }
.glightbox-clean .gslide-description { background: #fff; }
.glightbox-clean .gslide-title { font-family: var(--font-display, serif); font-size: 18px; color: var(--deep-navy, #1A2B5F); margin-bottom: 8px; }
.glightbox-clean .gslide-desc { font-family: var(--font-body, sans-serif); font-size: 14px; line-height: 1.6; color: var(--slate-gray, #4A5568); }

/* ============ Reader sidebar socials (kolom 1 dari grid) ============ */
.reader-content-canvas .reader-sidebar-socials { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 12px; align-self: start; }
.socials-bubble-btn { width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 1px solid var(--outline-variant, #c5c6d3); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: var(--deep-navy, #1A2B5F); box-shadow: 0 6px 18px -8px rgba(26,43,95,.3); text-decoration: none; transition: transform .25s, border-color .25s; }
.socials-bubble-btn:hover { transform: translateY(-3px); border-color: var(--gold-accent, #B19A6D); }
/* Tablet & mobile: canvas jadi 1 kolom, socials horizontal di atas prosa */
@media (max-width: 1024px) {
    .reader-content-canvas { grid-template-columns: 1fr !important; gap: 32px !important; }
    .reader-content-canvas .reader-sidebar-socials { position: static; flex-direction: row; justify-content: center; }
    .reader-canvas-sidebar .sidebar-cta-card { position: static !important; }
}

/* ============ Share sheet ============ */
.elc-share-backdrop { position: fixed; inset: 0; background: rgba(16,28,44,.6); backdrop-filter: blur(4px); z-index: 10001; display: none; align-items: flex-end; justify-content: center; }
.elc-share-backdrop.open { display: flex; }
.elc-share-sheet { background: #fff; width: 100%; max-width: 460px; border-radius: 20px 20px 0 0; padding: 12px 24px 28px; animation: elcSlideUp .3s cubic-bezier(.16,1,.3,1); }
@media (min-width: 600px) { .elc-share-backdrop { align-items: center; } .elc-share-sheet { border-radius: 20px; } }
@keyframes elcSlideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.elc-share-handle { width: 40px; height: 4px; background: var(--outline-variant,#c5c6d3); border-radius: 2px; margin: 4px auto 16px; }
.elc-share-head h4 { font-family: var(--font-display,serif); font-size: 20px; color: var(--deep-navy,#1A2B5F); margin: 0 0 4px; }
.elc-share-head p { font-size: 13px; color: var(--slate-gray,#4A5568); margin: 0 0 18px; }
.elc-share-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.elc-share-opt { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--outline-variant,#c5c6d3); border-radius: 12px; background: #fff; cursor: pointer; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--deep-navy,#1A2B5F); transition: background .2s, border-color .2s; }
.elc-share-opt:hover { background: var(--surface,#f9f9ff); border-color: var(--gold-accent,#B19A6D); }
.elc-share-close { width: 100%; padding: 12px; border: none; background: var(--deep-navy,#1A2B5F); color: #fff; border-radius: 12px; font-family: var(--font-sans); font-weight: 600; cursor: pointer; }
.elc-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--deep-navy,#1A2B5F); color: #fff; padding: 12px 24px; border-radius: 30px; font-family: var(--font-sans); font-size: 14px; z-index: 10002; opacity: 0; transition: all .3s; pointer-events: none; }
.elc-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ============ Comments (gaya desain ELC) ============ */
.elc-comments { max-width: 760px; margin: 56px auto 0; }
.elc-comments .comments-title { font-family: var(--font-display,serif); font-size: 24px; color: var(--deep-navy,#1A2B5F); margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--outline-variant,#c5c6d3); }
.elc-comments .comment-list { list-style: none; padding: 0; margin: 0 0 40px; }
.elc-comments .comment-list li { padding: 0; }
.elc-comments .comment-body { padding: 20px 0; border-bottom: 1px solid #eef0f4; }
.elc-comments .comment-author { display: flex; align-items: center; gap: 12px; }
.elc-comments .comment-author .avatar { border-radius: 50%; }
.elc-comments .comment-author .fn { font-family: var(--font-sans); font-weight: 700; color: var(--deep-navy,#1A2B5F); font-style: normal; }
.elc-comments .comment-institution { display: inline-block; font-size: 12px; color: var(--gold-accent,#B19A6D); font-weight: 600; }
.elc-comments .comment-meta { font-family: var(--font-sans); font-size: 12px; color: var(--slate-gray,#4A5568); margin: 4px 0 0; }
.elc-comments .comment-meta a { color: inherit; text-decoration: none; }
.elc-comments .comment-content { margin-top: 12px; font-family: var(--font-body,sans-serif); font-size: 15px; line-height: 1.7; color: var(--slate-gray,#4A5568); }
.elc-comments .reply { margin-top: 8px; }
.elc-comments .comment-reply-link { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--gold-accent,#B19A6D); text-decoration: none; text-transform: uppercase; letter-spacing: .05em; }
.elc-comments .comment-respond { background: var(--surface,#f9f9ff); border: 1px solid var(--outline-variant,#c5c6d3); border-radius: 16px; padding: 32px; margin-top: 24px; }
.elc-comments .comment-reply-title { font-family: var(--font-display,serif); font-size: 22px; color: var(--deep-navy,#1A2B5F); margin: 0 0 8px; }
.elc-comments .comment-form { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.elc-comments .comment-form p { margin: 0; }
.elc-comments .comment-form label { display: block; font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--deep-navy,#1A2B5F); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.elc-comments .comment-form input[type=text], .elc-comments .comment-form input[type=email], .elc-comments .comment-form input[type=url], .elc-comments .comment-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--outline-variant,#c5c6d3); border-radius: 10px; font-family: var(--font-body,sans-serif); font-size: 15px; background: #fff; }
.elc-comments .comment-form input:focus, .elc-comments .comment-form textarea:focus { outline: none; border-color: var(--gold-accent,#B19A6D); }
.elc-comments .form-submit .submit { background: var(--deep-navy,#1A2B5F); color: #fff; border: none; padding: 14px 32px; border-radius: 10px; font-family: var(--font-sans); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .25s; }
.elc-comments .form-submit .submit:hover { background: var(--gold-accent,#B19A6D); color: var(--deep-navy,#1A2B5F); }
.elc-comments .comment-form-author, .elc-comments .comment-form-email, .elc-comments .comment-form-institution { display: inline-block; width: 32%; margin-right: 1%; vertical-align: top; }
@media (max-width: 600px) { .elc-comments .comment-form-author, .elc-comments .comment-form-email, .elc-comments .comment-form-institution { width: 100%; display: block; } }

/* ============ Mobile & Tablet optimization ============ */
@media (max-width: 1024px) {
    .hero-inner, .content-container { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 768px) {
    .lang-switcher-wrap { bottom: 16px; right: 16px; padding: 3px; }
    .lang-switcher-wrap .elc-lang-pill { padding: 6px 12px; font-size: 10px; }
    .gallery-view-hint { font-size: 11px; }
    .reader-main-title, .reader-content-canvas { font-size: 16px !important; }
    .reader-content-canvas { font-size: 16px !important; }
    .section-intro h1, .section-intro h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
    /* grid kartu jadi 1 kolom di mobile */
    .sub-posts-grid, #insightsMasonryGrid { grid-template-columns: 1fr !important; }
    .blog-controls { flex-direction: column; align-items: stretch !important; }
    .filter-chips-list { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
    .filter-chip { white-space: nowrap; }
    .search-input-wrapper input { width: 100% !important; min-width: 0 !important; }
    /* artikel detail padding */
    .article-reader-page .content-container { padding: 0 18px; }
    .sidebar-cta-card { padding: 28px 20px !important; }
}
@media (max-width: 600px) {
    .elc-share-options { grid-template-columns: 1fr; }
    .reader-sidebar-socials { gap: 10px; }
    .socials-bubble-btn { width: 44px; height: 44px; }
}
/* Tablet: kartu 2 kolom */
@media (min-width: 601px) and (max-width: 1024px) {
    .sub-posts-grid, #insightsMasonryGrid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Touch: nonaktifkan hover-magnet tilt (cegah elemen "nyangkut") */
@media (hover: none) {
    .hover-magnet { transform: none !important; }
}

/* ===== Self-contained gallery lightbox ===== */
body.elc-lb-open{overflow:hidden}
.elc-lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center}
.elc-lb.open{display:flex}
.elc-lb-backdrop{position:absolute;inset:0;background:rgba(10,16,40,.92);cursor:zoom-out}
.elc-lb-stage{position:relative;z-index:2;max-width:90vw;max-height:86vh;margin:0;display:flex;flex-direction:column;align-items:center}
.elc-lb-img{max-width:90vw;max-height:78vh;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.elc-lb-cap{color:#fff;text-align:center;margin-top:14px;max-width:680px;font-size:14px;line-height:1.5}
.elc-lb-cap strong{display:block;font-size:16px;margin-bottom:4px}
.elc-lb-cap span{color:#c9cee0}
.elc-lb-close{position:absolute;top:20px;right:24px;z-index:3;background:transparent;border:none;color:#fff;font-size:38px;line-height:1;cursor:pointer;opacity:.8}
.elc-lb-close:hover{opacity:1}
.elc-lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:rgba(255,255,255,.12);border:none;color:#fff;font-size:22px;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.elc-lb-nav:hover{background:rgba(255,255,255,.25)}
.elc-lb-prev{left:24px}.elc-lb-next{right:24px}
.elc-lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:3;color:#fff;font-size:13px;letter-spacing:.05em;opacity:.7}
@media(max-width:600px){ .elc-lb-nav{width:40px;height:40px;font-size:18px} .elc-lb-prev{left:8px}.elc-lb-next{right:8px} }

/* ===== WPForms styled to match ELC homepage ===== */
.elc-wpforms-wrap .wpforms-container{margin:0}
.elc-wpforms-wrap .wpforms-form .wpforms-field-label{font-family:var(--font-sans,system-ui);font-size:13px;font-weight:600;color:var(--deep-navy,#1A2B5F);margin-bottom:6px}
.elc-wpforms-wrap .wpforms-form input[type=text],
.elc-wpforms-wrap .wpforms-form input[type=email],
.elc-wpforms-wrap .wpforms-form input[type=tel],
.elc-wpforms-wrap .wpforms-form input[type=url],
.elc-wpforms-wrap .wpforms-form select,
.elc-wpforms-wrap .wpforms-form textarea{
  width:100%;padding:12px 14px;border:1px solid var(--outline-variant,#e3e5ed);border-radius:8px;
  font-size:14px;font-family:var(--font-body,system-ui);background:#fff;color:var(--deep-navy,#1A2B5F);
  transition:border-color .2s,box-shadow .2s;box-sizing:border-box}
.elc-wpforms-wrap .wpforms-form input:focus,
.elc-wpforms-wrap .wpforms-form textarea:focus,
.elc-wpforms-wrap .wpforms-form select:focus{
  outline:none;border-color:var(--gold-accent,#B19A6D);box-shadow:0 0 0 3px rgba(177,154,109,.15)}
.elc-wpforms-wrap .wpforms-form textarea{min-height:110px;resize:vertical}
.elc-wpforms-wrap .wpforms-form .wpforms-field{margin-bottom:16px;padding:0}
.elc-wpforms-wrap .wpforms-form button[type=submit],
.elc-wpforms-wrap .wpforms-form .wpforms-submit{
  background:var(--deep-navy,#1A2B5F);color:#fff;border:none;border-radius:8px;
  padding:13px 28px;font-size:14px;font-weight:600;font-family:var(--font-sans,system-ui);
  cursor:pointer;transition:background .2s,transform .05s;margin-top:8px}
.elc-wpforms-wrap .wpforms-form button[type=submit]:hover,
.elc-wpforms-wrap .wpforms-form .wpforms-submit:hover{background:var(--gold-accent,#B19A6D)}
.elc-wpforms-wrap .wpforms-form .wpforms-required-label{color:#e06363}
.elc-wpforms-wrap .wpforms-confirmation-container-full{
  background:rgba(177,154,109,.1);border:1px solid var(--gold-accent,#B19A6D);
  border-radius:8px;padding:16px;color:var(--deep-navy,#1A2B5F)}