/* ================================================================
   BEYOND THE WEBSITE (ch-bey) — gelap di kiri, matahari terbenam di kanan
   Desktop (>=1200px): teks kiri, dua panel kaca di gambar diisi channel dan ikon
   sosial (persentase + cqw). Di bawah itu: gambar di atas, konten bertumpuk.
================================================================ */
.ch-bey {
    --ch-gold: #f0b99a;
    --ch-ink: #fbf7f1;
    --ch-bg: #10213d;
    position: relative;
    background: var(--ch-bg);
    color: var(--ch-ink);
    overflow: hidden;
}

.ch-bey-stage { position: relative; }
.ch-bey .ch-accent { color: var(--ch-gold); }

.ch-bey-art { position: relative; }
.ch-bey-art img { display: block; width: 100%; height: auto; }

/* mobile: panel kaca di gambar tidak dipakai, jadi dipotong dengan fade */
.ch-bey-art-scrim {
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(0deg, var(--ch-bg) 4%, transparent);
}

.ch-bey-copy,
.ch-bey-channel,
.ch-bey-connect {
    position: relative;
    width: min(100% - 40px, 720px);
    margin-inline: auto;
}

.ch-bey-copy { margin-top: -8px; }

.ch-bey-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    color: var(--ch-gold);
    font-size: 12px;
    line-height: 1;
    letter-spacing: .26em;
}

.ch-bey-eyebrow-line { flex: 0 0 30px; height: 1px; background: rgba(240, 185, 154, .85); }

.ch-bey-title {
    margin: 0 0 16px;
    font-size: clamp(25px, 6.8vw, 38px);
    line-height: 1.14;
    letter-spacing: -.02em;
    color: var(--ch-ink);
}

.ch-bey-body p {
    margin: 0 0 .9em;
    color: rgba(251, 247, 241, .9);
    font-size: 14px;
    line-height: 1.65;
}

/* kartu kaca (mobile) */
.ch-bey-channel,
.ch-bey-connect {
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05));
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.ch-bey-channel {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    padding: 20px;
}

.ch-bey-channel-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(240, 185, 154, .7);
    border-radius: 50%;
    color: var(--ch-gold);
}

.ch-bey-channel h3 { margin: 0 0 8px; font-size: 14px; letter-spacing: .12em; color: var(--ch-ink); }
.ch-bey-channel p { margin: 0 0 14px; color: rgba(251, 247, 241, .88); font-size: 13px; line-height: 1.55; }

.ch-bey-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid rgba(240, 185, 154, .8);
    border-radius: 999px;
    color: var(--ch-ink);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    transition: background .25s ease, gap .25s ease;
}

.ch-bey-btn svg { color: var(--ch-gold); }
.ch-bey-btn:hover,
.ch-bey-btn:focus-visible { background: rgba(240, 185, 154, .16); gap: 12px; }

.ch-bey-connect { margin-top: 14px; margin-bottom: 56px; padding: 20px 12px 18px; }

.ch-bey-socials {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.ch-bey-socials li + li { border-left: 1px solid rgba(255, 255, 255, .22); }

.ch-bey-socials a {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 4px 2px;
    color: var(--ch-ink);
    font-size: 11px;
    line-height: 1.2;
    text-decoration: none;
    transition: color .25s ease;
}

.ch-bey-socials a:hover,
.ch-bey-socials a:focus-visible { color: var(--ch-gold); }

.ch-bey-inquiry {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: max-content;
    margin: 0 auto;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--ch-gold);
    color: var(--ch-ink);
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    transition: gap .25s ease, color .25s ease;
}

.ch-bey-inquiry svg { color: var(--ch-gold); }
.ch-bey-inquiry:hover,
.ch-bey-inquiry:focus-visible { gap: 12px; color: var(--ch-gold); }

@media (min-width: 700px) and (max-width: 1199px) {
    .ch-bey-copy,
    .ch-bey-channel,
    .ch-bey-connect { width: min(100% - 40px, 760px); }
}

/* ---------- Desktop: isi dua panel kaca di gambar ---------- */
@media (min-width: 1200px) {
    .ch-bey-stage { container-type: inline-size; }

    .ch-bey-art-scrim {
        inset: 0;
        height: auto;
        background: linear-gradient(90deg, rgba(14, 28, 52, .72) 0%, rgba(14, 28, 52, .5) 26%, transparent 42%);
    }

    .ch-bey-copy,
    .ch-bey-channel,
    .ch-bey-connect {
        position: absolute;
        margin: 0;
        width: auto;
        border: 0;
        border-radius: 0;
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .ch-bey-copy { left: 5.9%; top: 6.5%; width: 34%; }

    .ch-bey-eyebrow { gap: 1.4cqw; margin-bottom: 1.2cqw; font-size: max(11px, .85cqw); }
    .ch-bey-eyebrow-line { flex-basis: 3cqw; }
    .ch-bey-title { margin-bottom: 1.5cqw; font-size: 2.55cqw; }
    .ch-bey-body p { margin-bottom: 1.1cqw; font-size: max(12px, .92cqw); line-height: 1.6; }

    /* panel 1 (art: x 53.9-93.1%, y 47.6-69.5%) */
    .ch-bey-channel {
        left: 53.9%;
        top: 47.6%;
        width: 39.2%;
        height: 21.9%;
        margin: 0;
        padding: 0 3cqw 0 2.8cqw;
        align-items: center;
        gap: 2.4cqw;
    }

    .ch-bey-channel-icon { width: 5.6cqw; height: 5.6cqw; }
    .ch-bey-channel-icon svg { width: 46%; height: 46%; }
    .ch-bey-channel-body { padding-left: 2.2cqw; border-left: 1px solid rgba(255, 255, 255, .28); }
    .ch-bey-channel h3 { margin-bottom: .6cqw; font-size: 1.02cqw; }
    .ch-bey-channel p { margin-bottom: .9cqw; font-size: .8cqw; line-height: 1.5; }
    .ch-bey-btn { padding: .65cqw 1.5cqw; font-size: .86cqw; }

    /* panel 2 (art: x 50-95.2%, y 70-86.8%) */
    .ch-bey-connect {
        left: 50%;
        top: 70%;
        width: 45.2%;
        height: 16.8%;
        margin: 0;
        padding: 0 1.5cqw;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .ch-bey-socials { margin-bottom: 1.3cqw; }
    .ch-bey-socials a { gap: .5cqw; font-size: .82cqw; }
    .ch-bey-socials svg { width: 1.7cqw; height: 1.7cqw; }
    .ch-bey-inquiry { margin: 0 auto 0 8%; font-size: .95cqw; padding-bottom: .35cqw; }
}

@media (prefers-reduced-motion: reduce) {
    .ch-bey-btn, .ch-bey-socials a, .ch-bey-inquiry { transition: none; }
}