/* ==========================================================================
   KMeet — Template landing alternatif (Focus & Immersive)
   ==========================================================================
   Dimuat di semua halaman home, TAPI setiap aturan diikat ke kelas akarnya
   sendiri (.k-focus / .k-immersive) sehingga template `classic` tak tersentuh
   satu piksel pun.

   Warna SELALU dari token engine (kmeet-tokens.css) — nol nilai warna keras.
   Konsekuensinya: satu klien white-label mengganti PRIMARY_COLOR dan seluruh
   template ini ikut berganti, terang maupun gelap, tanpa menyentuh berkas ini.
   ========================================================================== */

/* Navbar transparan juga berlaku untuk kedua template baru (classic memakai
   :has(.k-hero); di sini kita perluas ke akar masing-masing). */
.jm-homepage:has(.k-focus) .navbar,
.jm-homepage:has(.k-immersive) .navbar {
    background: transparent !important;
    box-shadow: none !important;
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 5;
    padding-top: 0.4rem;
}

.jm-homepage:has(.k-focus) .navbar .nav-link,
.jm-homepage:has(.k-immersive) .navbar .nav-link,
.jm-homepage:has(.k-focus) .navbar .navbar-toggler,
.jm-homepage:has(.k-immersive) .navbar .navbar-toggler {
    color: var(--k-ink-muted);
}

.jm-homepage:has(.k-focus) .navbar .nav-link:hover,
.jm-homepage:has(.k-immersive) .navbar .nav-link:hover {
    color: var(--k-ink);
}

.jm-homepage:has(.k-focus) .navbar .logo-image,
.jm-homepage:has(.k-immersive) .navbar .logo-image {
    height: 30px;
    width: auto;
}


/* --------------------------------------------------------------------------
   Latar tombol utama: aksen YANG DIGELAPKAN, bukan --k-accent mentah.

   Diukur, bukan dikira: putih di atas --k-accent apa adanya hanya mencapai
   4,40:1 (terang) dan 3,77:1 (gelap) — di bawah ambang 4,5:1 untuk teks normal.
   Penyebabnya ada di token engine (`--k-on-accent` memilih putih saat aksen
   lebih gelap dari L 0.70), jadi tombol Join di template classic pun terkena;
   itu di luar lingkup berkas ini dan dicatat terpisah untuk owner.

   Mencampur ke arah navy sangat gelap (bukan hitam murni) menaikkan kontras
   melewati ambang tanpa membuat tombol terlihat kotor, dan tetap mengikuti
   warna merek tiap klien karena basisnya masih --k-accent.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   1. FOCUS — portal join, satu kolom terpusat
   ==========================================================================
   Prinsipnya satu: kolom input adalah pahlawan halaman, bukan pelengkap.
   Judul sengaja LEBIH KECIL dari Classic supaya tak merebut perhatian dari
   tindakan yang sebenarnya dicari orang.
   ========================================================================== */

.k-focus {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 6rem 1.25rem 3.5rem;
    background:
        radial-gradient(120% 90% at 50% 0%, var(--k-bg-1) 0%, var(--k-bg-2) 68%);
    overflow: hidden;
}

/* Bidang cahaya warna merek. Bukan hiasan: ia menarik mata ke tengah, tempat
   input berada, dan memberi halaman ini suasana yang berbeda dari Classic. */
.k-focus__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(1100px, 150vw);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    /* Dua lapis: inti aksen pekat + halo lebar. Satu lapis tipis terbaca sebagai
       "gradien lupa dimatikan", bukan sebagai bidang cahaya yang disengaja. */
    background:
        radial-gradient(circle, color-mix(in oklab, var(--k-accent) 34%, transparent) 0%, transparent 45%),
        radial-gradient(circle, color-mix(in oklab, var(--k-accent) 14%, transparent) 30%, transparent 70%);
    filter: blur(36px);
    pointer-events: none;
}

/* (Cincin konsentris pernah dicoba di sini dan DIBUANG: sebagai anak dari elemen
   ber-`filter: blur(36px)`, ia ikut terblur sampai tak terlihat sama sekali —
   kode mati yang menipu pembaca berikutnya. Kalau suatu saat ingin cincin, ia
   harus jadi elemen terpisah di luar lapisan blur.) */

.k-focus__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.k-focus__title {
    margin: 0;
    font-family: var(--k-font-display);
    font-weight: 700;
    /* Ceiling sengaja ditahan: di template ini judul BUKAN bintangnya. */
    font-size: clamp(1.6rem, 3.2vw, 2.35rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-wrap: balance;
    color: var(--k-ink);
}

.k-focus__title .accent { color: var(--k-accent); }

.k-focus__sub {
    margin: 0.75rem 0 0;
    max-width: 38ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--k-ink-muted);
    text-wrap: pretty;
}

.k-focus__form {
    width: 100%;
    margin-top: 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.k-focus__label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--k-ink-muted);
    text-align: left;
}

/* Plat input: elemen terbesar & paling kontras di halaman. Itu disengaja. */
.k-focus__field {
    display: flex;
    align-items: center;
    background: var(--k-field);
    border: 1px solid var(--k-hairline);
    border-radius: var(--k-radius);
    transition: border-color 0.18s var(--k-ease), box-shadow 0.18s var(--k-ease);
}

.k-focus__field:focus-within {
    border-color: var(--k-accent);
    box-shadow: 0 0 0 4px var(--k-accent-tint);
}

.k-focus__field input {
    width: 100%;
    padding: 1.15rem 1.25rem;
    border: 0;
    background: transparent;
    color: var(--k-ink);
    font-family: var(--k-font-display);
    font-size: clamp(1.25rem, 3.4vw, 1.6rem);
    font-weight: 600;
    /* Jarak huruf lebar + angka tabular: ini KODE yang dibaca-ulang orang saat
       mengetik, bukan kalimat. Fungsional, bukan gaya-gayaan monospace. */
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
    text-align: center;
    outline: none;
}

.k-focus__field input::placeholder {
    color: var(--k-ink-faint);
    letter-spacing: 0.02em;
    font-weight: 500;
    font-size: 1rem;
}

.k-focus__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* ≥44px: target sentuh nyaman di ponsel, tempat template ini paling dipakai. */
    min-height: 54px;
    padding: 0 1.5rem;
    border: 0;
    border-radius: var(--k-radius);
    background: color-mix(in oklab, var(--k-accent) 84%, #05070f);
    color: #fff;
    font-family: var(--k-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.16s var(--k-ease), box-shadow 0.16s var(--k-ease), background 0.16s var(--k-ease);
}

.k-focus__submit svg { width: 20px; height: 20px; }

.k-focus__submit:hover {
    background: color-mix(in oklab, var(--k-accent) 94%, #05070f);
    box-shadow: 0 10px 30px -12px var(--k-brand-glow);
    transform: translateY(-1px);
}

.k-focus__submit:active { transform: translateY(0); }

.k-focus__submit:focus-visible {
    outline: 2px solid var(--k-accent);
    outline-offset: 3px;
}

.k-focus__trust {
    display: inline-flex;
    /* flex-start, BUKAN center: saat teks membungkus jadi dua baris (kerap di ponsel),
       center membuat ikon melayang di tengah blok dan terlihat terlepas dari kalimatnya. */
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 1.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--k-ink-muted);
    text-align: left;
    text-wrap: pretty;
}

.k-focus__trust svg {
    width: 17px;
    height: 17px;
    flex: none;
    margin-top: 0.15em; /* sejajarkan optis dengan baris pertama */
}

/* Masuk halaman: satu gerakan tenang, bukan pesta animasi. */
@media (prefers-reduced-motion: no-preference) {
    .k-focus__inner > * {
        animation: kFocusRise 0.6s var(--k-ease) both;
    }
    .k-focus__inner > *:nth-child(2) { animation-delay: 0.06s; }
    .k-focus__inner > *:nth-child(3) { animation-delay: 0.12s; }
    .k-focus__inner > *:nth-child(4) { animation-delay: 0.18s; }
}

@keyframes kFocusRise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 575.98px) {
    .k-focus { padding: 5.25rem 1.1rem 2.5rem; }
    .k-focus__form { margin-top: 1.75rem; }
}

/* ==========================================================================
   2. IMMERSIVE — ruang live jadi latar, panel join mengambang
   ==========================================================================
   Kebalikan struktur Classic: di sana mockup BERSANDING dengan teks; di sini
   ia BERADA DI BELAKANG sebagai suasana, dan panel join berdiri di atasnya.
   ========================================================================== */

.k-immersive {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 6rem 1.25rem 3.5rem;
    background: var(--k-bg-2);
    overflow: hidden;
    isolation: isolate;
}

/* -- Latar ---------------------------------------------------------------- */
.k-immersive__scene {
    position: absolute;
    inset: -6% -4%;
    display: grid;
    place-items: center;
    pointer-events: none;   /* latar tak pernah mencuri klik dari form */
    z-index: 0;
}

/* Foto klien sebagai latar penuh. Berbeda dari mockup, ia mengisi tepi ke tepi:
   sebuah foto yang mengambang di tengah akan terbaca sebagai gambar yang dipajang,
   sedangkan yang dituju Immersive adalah suasana di balik pintu. */
.k-immersive__scene.has-photo { inset: 0; }

.k-immersive__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Sama seperti Classic: "tampilkan utuh" menyisakan ruang, dan ruang itu harus
       jadi warna latar merek, bukan transparan. */
    background: var(--k-bg-2);
}

/* Foto bisa terang, ramai, dan warnanya tak kita kendalikan — tirai vignette yang
   dirancang untuk mockup buatan sendiri terlalu ringan untuknya. Versi foto meredam
   lebih dalam supaya panel join tetap menang, tanpa menghapus fotonya. */
.k-immersive__scene.has-photo ~ .k-immersive__scrim {
    background:
        radial-gradient(72% 62% at 50% 48%,
            color-mix(in oklab, var(--k-bg-2) 20%, transparent) 0%,
            color-mix(in oklab, var(--k-bg-2) 52%, transparent) 62%,
            color-mix(in oklab, var(--k-bg-2) 86%, transparent) 100%);
}

.k-imm-room {
    width: min(1180px, 108%);
    border-radius: 26px;
    border: 1px solid var(--k-hairline);
    background: linear-gradient(160deg, var(--k-bg-1), var(--k-bg-2));
    box-shadow: var(--k-shadow-lg);
    padding: 0.9rem;
    transform: perspective(1600px) rotateX(3deg) scale(1.02);
}

/* Bar judul ruang: kontras cukup di kedua tema (dulu ikut --k-ink saja). */
.k-imm-room__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.6rem 0.85rem;
}

.k-imm-room__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--k-font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--k-ink);
}

.k-imm-room__brand .mark {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--k-accent);
    color: var(--k-on-accent);
    font-weight: 800;
    font-size: 0.85rem;
}

/* Badge LIVE sengaja SOLID, bukan tint transparan: versi tint memakai teks merah
   muda yang lenyap di mode terang. Merah + putih terbaca di kedua tema, dan ini
   satu-satunya tempat warna non-token dipakai — karena "sedang siaran" adalah
   konvensi universal berwarna merah, bukan bagian dari palet merek klien. */
.k-imm-room__live {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.62rem;
    border-radius: var(--k-radius-pill);
    background: #d93a3f;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.k-imm-room__live .rec {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
}

@media (prefers-reduced-motion: no-preference) {
    .k-imm-room__live .rec { animation: kImmPulse 2s ease-in-out infinite; }
}

@keyframes kImmPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* Dinding peserta: satu tile besar + empat kecil. Bukan grid seragam —
   susunannya meniru ruang nyata dengan satu pembicara utama. */
.k-imm-room__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    height: min(56vh, 460px);
}

/* Isian tile SENGAJA berbasis campuran aksen, bukan --k-surface-2.
   Alasannya konkret: --k-surface-2 adalah lapisan putih transparan yang dirancang
   untuk latar gelap — di mode terang ia putih-di-atas-putih alias tak terlihat, dan
   seluruh "ruang" lenyap. Campuran aksen punya bobot di kedua tema. */
.k-imm-tile {
    display: grid;
    place-items: center;
    border-radius: 16px;
    border: 1px solid color-mix(in oklab, var(--k-accent) 26%, transparent);
    background: color-mix(in oklab, var(--k-accent) 12%, var(--k-bg-1));
}

.k-imm-tile--lead {
    grid-row: span 2;
    background:
        linear-gradient(150deg,
            color-mix(in oklab, var(--k-accent) 34%, var(--k-bg-1)),
            color-mix(in oklab, var(--k-accent) 14%, var(--k-bg-1)));
    border-color: color-mix(in oklab, var(--k-accent) 40%, transparent);
}

/* t2/t4 dulu memakai --k-secondary (field dihapus 2026-07-25); dialihkan ke --k-brand
   agar tetap sedikit berbeda nuansanya dari tile beraksen (t1/t3). */
.k-imm-tile.t1 { background: color-mix(in oklab, var(--k-accent) 20%, var(--k-bg-1)); }
.k-imm-tile.t2 { background: color-mix(in oklab, var(--k-brand) 22%, var(--k-bg-1)); }
.k-imm-tile.t3 { background: color-mix(in oklab, var(--k-accent) 8%, var(--k-bg-1)); }
.k-imm-tile.t4 { background: color-mix(in oklab, var(--k-brand) 13%, var(--k-bg-1)); }

.k-imm-av {
    display: grid;
    place-items: center;
    min-width: 48px;
    height: 48px;
    padding: 0 0.65rem;
    border-radius: var(--k-radius-pill);
    background: color-mix(in oklab, var(--k-accent) 62%, var(--k-bg-1));
    color: var(--k-on-accent);
    font-family: var(--k-font-display);
    font-weight: 700;
    font-size: 1.05rem;
}

.k-imm-tile--lead .k-imm-av {
    min-width: 92px;
    height: 92px;
    font-size: 2.1rem;
    background: var(--k-accent);
    color: var(--k-on-accent);
    box-shadow: 0 12px 32px -10px var(--k-brand-glow);
}

/* -- Tirai ---------------------------------------------------------------
   Wajib. Tanpa ini, panel join bisa kehilangan kontras pada warna merek
   tertentu — dan keterbacaan form selalu menang atas suasana. */
.k-immersive__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Vignette, BUKAN selimut. Versi pertama memakai 82-94% dan menghapus seluruh
       ruang di baliknya — konsepnya mati. Panel join punya latar solid + bayangan
       sendiri, jadi ia sudah menjamin kontrasnya; tirai cukup meredam tepi supaya
       mata tertarik ke tengah. */
    background:
        radial-gradient(75% 65% at 50% 48%,
            transparent 0%,
            color-mix(in oklab, var(--k-bg-2) 45%, transparent) 62%,
            color-mix(in oklab, var(--k-bg-2) 88%, transparent) 100%);
}

/* -- Panel join ----------------------------------------------------------- */
.k-immersive__panel {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 540px;
    padding: clamp(1.6rem, 4vw, 2.4rem);
    border-radius: var(--k-radius-lg);
    border: 1px solid var(--k-hairline);
    background: color-mix(in oklab, var(--k-bg-1) 94%, transparent);
    backdrop-filter: blur(12px);
    box-shadow: var(--k-shadow-lg);
    text-align: center;
}

.k-immersive__live {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--k-radius-pill);
    background: var(--k-accent-tint);
    color: var(--k-ink);
    font-size: 0.78rem;
    font-weight: 600;
}

.k-immersive__live .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--k-accent);
}

@media (prefers-reduced-motion: no-preference) {
    .k-immersive__live .dot { animation: kImmPulse 2s ease-in-out infinite; }
}

.k-immersive__title {
    margin: 1rem 0 0;
    font-family: var(--k-font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 4.2vw, 2.6rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
    text-wrap: balance;
    color: var(--k-ink);
}

.k-immersive__title .accent { color: var(--k-accent); }

.k-immersive__sub {
    margin: 0.7rem auto 0;
    max-width: 34ch;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--k-ink-muted);
    text-wrap: pretty;
}

.k-immersive__form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.6rem;
    padding: 0.4rem 0.4rem 0.4rem 0.9rem;
    background: var(--k-field);
    border: 1px solid var(--k-hairline);
    border-radius: var(--k-radius-pill);
    transition: border-color 0.18s var(--k-ease), box-shadow 0.18s var(--k-ease);
}

.k-immersive__form:focus-within {
    border-color: var(--k-accent);
    box-shadow: 0 0 0 4px var(--k-accent-tint);
}

.k-immersive__icon {
    display: grid;
    place-items: center;
    color: var(--k-ink-faint);
    flex: none;
}

.k-immersive__icon svg { width: 21px; height: 21px; }

.k-immersive__form input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--k-ink);
    font-size: 1rem;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    outline: none;
    padding: 0.75rem 0;
}

.k-immersive__form input::placeholder { color: var(--k-ink-faint); letter-spacing: normal; }

.k-immersive__form button {
    flex: none;
    min-height: 46px;
    padding: 0 1.5rem;
    border: 0;
    border-radius: var(--k-radius-pill);
    background: color-mix(in oklab, var(--k-accent) 84%, #05070f);
    color: #fff;
    font-family: var(--k-font-display);
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    transition: background 0.16s var(--k-ease), box-shadow 0.16s var(--k-ease);
}

.k-immersive__form button:hover {
    background: color-mix(in oklab, var(--k-accent) 94%, #05070f);
    box-shadow: 0 8px 24px -10px var(--k-brand-glow);
}

.k-immersive__form button:focus-visible {
    outline: 2px solid var(--k-accent);
    outline-offset: 3px;
}

.k-immersive__trust {
    display: block;
    margin-top: 1.1rem;
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--k-ink-muted);
    text-wrap: pretty;
}

@media (prefers-reduced-motion: no-preference) {
    .k-immersive__panel { animation: kImmRise 0.7s var(--k-ease) both; }
    .k-immersive__scene { animation: kImmFade 1.1s var(--k-ease) both; }
}

@keyframes kImmRise {
    from { opacity: 0; transform: translateY(16px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

@keyframes kImmFade {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: none; }
}

/* Ponsel: latar disederhanakan (tile kecil jadi satu baris) supaya tak ramai
   di balik panel, dan panel mendapat lebar penuh. */
@media (max-width: 767.98px) {
    .k-immersive { padding: 5.25rem 1rem 2.5rem; }
    .k-imm-room__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: 1.4fr 1fr;
        height: min(48vh, 340px);
    }
    .k-imm-tile--lead { grid-column: span 3; grid-row: auto; }
    .k-imm-tile.t4 { display: none; }
    .k-imm-room { transform: none; }

    /* Bar judul ruang disembunyikan di ponsel. Latar sengaja mem-bleed melewati
       tepi layar, dan bleed pada BIDANG terbaca sebagai kedalaman — tapi bleed
       yang memotong badge "LIVE" jadi separuh terbaca sebagai kerusakan.
       Deretan tile sendiri sudah cukup menyampaikan "ada ruang yang hidup". */
    .k-imm-room__bar { display: none; }
}

@media (max-width: 480px) {
    .k-immersive__form {
        flex-wrap: wrap;
        border-radius: var(--k-radius);
        padding: 0.75rem;
    }
    .k-immersive__form input { flex: 1 1 60%; padding-left: 0.25rem; }
    .k-immersive__form button { flex: 1 1 100%; }
}