/* ==========================================================
   Rocket Talks — MoraRepublic Rocket Week 2026
   Bootstrap 5 + custom style. Desktop mengikuti desain 1920x1080,
   mobile (< 992px) mengikuti desain 1080x1920.
   Struktur & skala sama dengan Rocket 100 Summit.
   ========================================================== */

/* ---------- Fonts ---------- */
@font-face {
    font-family: "Conthrax";
    src: url("../../fonts/Conthrax/Conthrax-SemiBold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "MoraRepublic Sans";
    src: url("../../fonts/MoRarepublic-Sans/MoraRepublicSans-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "MoraRepublic Sans";
    src: url("../../fonts/MoRarepublic-Sans/MoraRepublicSans-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "MoraRepublic Sans";
    src: url("../../fonts/MoRarepublic-Sans/MoraRepublicSans-Italic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "MoraRepublic Sans";
    src: url("../../fonts/MoRarepublic-Sans/MoraRepublicSans-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
    /* Satuan skala desktop: 1u = 1px desain 1920x1080 dibagi 19.2.
       Mengikuti lebar ATAU tinggi layar (mana yang lebih kecil) agar semua muat 1 layar. */
    --u: min(1vw, 1.7778vh);
    --rt-font-display: "Conthrax", "Arial Black", sans-serif;
    --rt-font-body: "MoraRepublic Sans", "Figtree", Arial, sans-serif;
    --rt-white: #ffffff;
    --rt-blue: #1149e8;
    --rt-blue-dark: #0a37c4;
    --rt-input-text: #1d1b3a;
    --rt-placeholder: #8f8f9c;
}

/* ---------- Base ---------- */
html, body { min-height: 100%; }
body {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: #2a0f8f;
    color: var(--rt-white);
    font-family: var(--rt-font-body);
    font-weight: 400;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 3px solid #9fd0ff;
    outline-offset: 3px;
}

/* Background tetap (fixed) mengikuti layar */
.rt-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: #2a0f8f url("images/bg-desktop.jpg") center / cover no-repeat;
}

/* ---------- Topbar & footer ---------- */
.rt-topbar {
    position: absolute;
    top: clamp(23px, calc(2.3 * var(--u)), 44px);
    left: clamp(28px, calc(2.8 * var(--u)), 54px);
    right: clamp(28px, calc(2.8 * var(--u)), 54px);
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    pointer-events: none;
}
.rt-topbar > * { pointer-events: auto; }
.rt-mrw img { display: block; width: clamp(146px, calc(14.6 * var(--u)), 280px); }

.rt-footer {
    position: absolute;
    right: clamp(31px, calc(3.1 * var(--u)), 60px);
    bottom: clamp(23px, calc(2.3 * var(--u)), 44px);
    z-index: 2;
}
.rt-footer img { display: block; width: clamp(110px, calc(11 * var(--u)), 210px); }

/* ---------- Main ---------- */
.rt-main {
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(80px, calc(8 * var(--u)), 150px) 0 clamp(50px, calc(5 * var(--u)), 100px);
}
.rt-main > * { width: 100%; }

/* ---------- Layout ----------
   Desktop: kolom brand (kiri, ~60%) dan form (kanan).
   Brand dipecah dua (atas & bawah) supaya di mobile form bisa berada di tengahnya. */
.rt-page {
    display: grid;
    grid-template-columns: 60.2fr 39.8fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "top    form"
        "bottom form";
}
.rt-brand--top    { grid-area: top; align-self: end; }
.rt-brand--bottom { grid-area: bottom; }
.rt-form-area     { grid-area: form; align-self: end; padding-left: calc(1.6 * var(--u)); }

/* ---------- Brand ---------- */
.rt-brand { text-align: center; }
.rt-logo { margin: 0; line-height: 0; }
.rt-logo img { width: min(calc(38.6 * var(--u)), 742px); }

.rt-theme {
    display: block;
    width: min(calc(43.6 * var(--u)), 836px);
    margin: calc(2.1 * var(--u)) auto 0;
}
.rt-collaborate {
    display: block;
    width: min(calc(21.2 * var(--u)), 411px);
    margin: calc(2.9 * var(--u)) auto 0;
}
.rt-tagline {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: calc(2.1 * var(--u)) 0 0;
    line-height: 1.2;
}
.rt-tagline-light {
    font-weight: 300;
    font-size: clamp(17px, calc(1.7 * var(--u)), 33px);
}
.rt-tagline-bold {
    font-weight: 700;
    font-size: clamp(19px, calc(1.95 * var(--u)), 37px);
}
.rt-date {
    margin: calc(1.6 * var(--u)) 0 0;
    font-weight: 300;
    font-size: clamp(15px, calc(1.46 * var(--u)), 28px);
    line-height: 1.3;
}
.rt-date strong { font-weight: 700; }

/* ---------- Form ---------- */
.rt-form-wrap { width: min(100%, calc(28.2 * var(--u))); min-width: 300px; }
.rt-form-title {
    margin: 0 0 calc(1.9 * var(--u));
    font-family: var(--rt-font-display);
    font-weight: 600;
    font-size: clamp(22px, calc(2.6 * var(--u)), 50px);
    line-height: 1.15;
    letter-spacing: .01em;
    color: var(--rt-white);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}
.rt-form { width: 100%; }

.rt-field { margin: 0 0 calc(2.1 * var(--u)); }
.rt-label {
    display: block;
    margin: 0 0 clamp(4px, calc(.4 * var(--u)), 8px);
    color: var(--rt-white);
    font-weight: 400;
    font-size: clamp(13px, calc(1.35 * var(--u)), 26px);
    line-height: 1.25;
    letter-spacing: .01em;
}

.rt-input.form-control,
.rt-input.form-select {
    height: clamp(30px, calc(2.85 * var(--u)), 55px);
    padding: 0 clamp(12px, calc(1.3 * var(--u)), 24px);
    border: 0;
    border-radius: clamp(8px, calc(.75 * var(--u)), 14px);
    background-color: var(--rt-white);
    color: var(--rt-input-text);
    font-family: var(--rt-font-body);
    font-size: clamp(13px, calc(1.1 * var(--u)), 20px);
    box-shadow: 0 4px 14px rgba(20, 0, 60, .12);
}
.rt-input.form-control:focus,
.rt-input.form-select:focus {
    box-shadow: 0 0 0 4px rgba(120, 190, 255, .55);
    outline: none;
}

/* Workshop tanpa JavaScript / Select2 gagal dimuat: dropdown standar Bootstrap. */
.rt-select.form-select {
    padding-right: 2.75rem;
    background-position: right 1rem center;
    cursor: pointer;
}
.rt-select.is-placeholder { color: var(--rt-placeholder); }
.rt-select option { color: var(--rt-input-text); }
.rt-select option:disabled { color: #a0a4ad; }

/* Workshop: Select2 (dropdown + kolom pencarian). Dropdown ditaruh di dalam .rt-select-field. */
.rt-select-field { position: relative; }
.rt-select-field .select2-container { font-family: var(--rt-font-body); }

.rt-select-field .select2-container--default .select2-selection--single,
.rt-select-field .select2-container--default.select2-container--open .select2-selection--single {
    display: flex;
    align-items: center;
    height: clamp(30px, calc(2.85 * var(--u)), 55px);
    padding: 0 clamp(12px, calc(1.3 * var(--u)), 24px);
    border: 0;
    border-radius: clamp(8px, calc(.75 * var(--u)), 14px);
    background: var(--rt-white);
    font-size: clamp(13px, calc(1.1 * var(--u)), 20px);
    box-shadow: 0 4px 14px rgba(20, 0, 60, .12);
    outline: none;
    cursor: pointer;
}
.rt-select-field .select2-container--focus .select2-selection--single,
.rt-select-field .select2-container--open .select2-selection--single {
    box-shadow: 0 0 0 4px rgba(120, 190, 255, .55);
}
.rt-select-field .select2-container--default .select2-selection--single .select2-selection__rendered {
    flex: 1;
    min-width: 0;
    padding: 0 1.75rem 0 0;
    color: var(--rt-input-text);
    line-height: 1.3;
}
.rt-select-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--rt-placeholder);
}
.rt-select-field .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: clamp(10px, calc(1 * var(--u)), 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 100%;
}
.rt-select-field .select2-container--default .select2-selection--single .select2-selection__arrow b {
    position: static;
    margin: 0;
    border-width: 6px 5px 0;
    border-color: var(--rt-placeholder) transparent transparent;
}
.rt-select-field .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-width: 0 5px 6px;
    border-color: transparent transparent var(--rt-placeholder);
}

.rt-select-field .select2-dropdown {
    overflow: hidden;
    border: 0;
    border-radius: clamp(8px, calc(.75 * var(--u)), 14px);
    background: var(--rt-white);
    font-size: clamp(13px, calc(1.05 * var(--u)), 18px);
    box-shadow: 0 18px 40px rgba(10, 10, 40, .28);
}
.rt-select-field .select2-dropdown--below { margin-top: 8px; }
.rt-select-field .select2-dropdown--above { margin-top: -8px; }

.rt-select-field .select2-search--dropdown { padding: 12px 12px 8px; }
.rt-select-field .select2-search--dropdown .select2-search__field {
    height: clamp(36px, calc(2.6 * var(--u)), 48px);
    padding: 0 14px;
    border: 1px solid var(--rt-blue);
    border-radius: 8px;
    color: var(--rt-input-text);
    font-family: var(--rt-font-body);
    font-size: inherit;
    outline: none;
}
.rt-select-field .select2-search--dropdown .select2-search__field:focus { box-shadow: 0 0 0 3px rgba(17, 73, 232, .18); }
.rt-select-field .select2-search--dropdown .select2-search__field::placeholder { color: var(--rt-placeholder); }

.rt-select-field .select2-container--default .select2-results > .select2-results__options {
    max-height: min(320px, 45vh);
    scrollbar-width: thin;
}
.rt-select-field .select2-results__option {
    padding: 10px 14px;
    color: var(--rt-input-text);
    line-height: 1.35;
}
/* Grup workshop (<optgroup>): judul grup tebal, opsi di dalamnya sedikit menjorok. */
.rt-select-field .select2-results__option[role="group"] { padding: 0; }
.rt-select-field .select2-results__group {
    padding: 12px 14px 6px;
    color: var(--rt-blue);
    font-weight: 700;
    letter-spacing: .04em;
    cursor: default;
}
.rt-select-field .select2-container--default .select2-results__option .select2-results__option {
    padding-left: 24px;
}
.rt-select-field optgroup { font-weight: 700; }
.rt-select-field .select2-container--default .select2-results__option--selected {
    background: #e8eefd;
}
.rt-select-field .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--rt-blue);
    color: var(--rt-white);
}
/* Workshop yang di-disable (config: 'disabled' => true): abu-abu, tidak bisa dipilih. */
.rt-select-field .select2-container--default .select2-results__option--disabled {
    color: #a0a4ad;
    background: #f3f4f6;
    cursor: not-allowed;
}
.rt-select-field .select2-results__message { color: var(--rt-placeholder); }

/* Tombol submit */
.rt-submit-wrap { display: flex; justify-content: center; padding-top: calc(1.5 * var(--u)); }
.rt-submit.btn {
    width: clamp(120px, calc(11.9 * var(--u)), 230px);
    height: clamp(30px, calc(2.8 * var(--u)), 54px);
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--rt-blue);
    color: var(--rt-white);
    font-family: var(--rt-font-body);
    font-weight: 400;
    font-size: clamp(14px, calc(1.35 * var(--u)), 26px);
    letter-spacing: .02em;
    box-shadow: 0 10px 26px rgba(8, 30, 140, .3);
    transition: background .2s ease, transform .2s ease;
}
.rt-submit.btn:hover,
.rt-submit.btn:focus-visible { background: var(--rt-blue-dark); color: var(--rt-white); transform: translateY(-1px); }
.rt-submit.btn:active { background: var(--rt-blue-dark); color: var(--rt-white); }

/* ==========================================================
   Mobile / tablet portrait (< 992px) — desain 1080x1920
   Urutan: logo & tema -> form -> Collaborate & tagline
   ========================================================== */
@media (max-width: 991.98px) {
    .rt-bg { background-image: url("images/bg-mobile.jpg"); }

    body { display: flex; flex-direction: column; }
    .rt-main { flex: 1 0 auto; }
    .rt-topbar {
        position: static;
        padding: 22px 20px 0;
    }
    .rt-mrw img { width: clamp(110px, 20vw, 220px); }
    .rt-date-mobile { width: clamp(120px, 26vw, 270px); }

    .rt-main {
        display: block;
        min-height: 0;
        padding: clamp(36px, 11vw, 120px) 0 24px;
    }

    .rt-footer {
        position: static;
        display: flex;
        justify-content: center;
        padding: clamp(36px, 10vw, 90px) 0 28px;
    }
    .rt-footer img { width: clamp(120px, 30vw, 170px); }

    /* Layout satu kolom */
    .rt-page {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: "top" "form" "bottom";
        row-gap: clamp(32px, 7.4vw, 72px);
        padding: 0 20px;
    }
    .rt-form-area { align-self: auto; padding-left: 0; }

    .rt-logo img { width: min(68.5vw, 520px); }
    .rt-theme { width: min(77vw, 600px); margin-top: clamp(16px, 4.2vw, 40px); }
    .rt-collaborate { width: clamp(170px, 37.4vw, 300px); margin-top: 0; }
    .rt-tagline { margin-top: clamp(18px, 4vw, 36px); }
    .rt-tagline-light { font-size: clamp(16px, 3vw, 26px); }
    .rt-tagline-bold { font-size: clamp(19px, 3.45vw, 30px); }
    .rt-date { display: none; } /* tanggal sudah ada di topbar */

    /* Form */
    .rt-form-wrap {
        width: 90%;
        min-width: 0;
        max-width: 100%;
        margin: 0 auto;
    }
    .rt-form-title { font-size: clamp(20px, 5.6vw, 40px); margin-bottom: clamp(16px, 4vw, 32px); }
    .rt-field { margin-bottom: 16px; }
    .rt-label { font-size: clamp(14px, 3vw, 22px); }
    .rt-input.form-control,
    .rt-input.form-select { height: 46px; font-size: 16px; } /* 16px: iOS tidak auto-zoom */
    .rt-select-field .select2-container--default .select2-selection--single,
    .rt-select-field .select2-container--default.select2-container--open .select2-selection--single { height: 46px; font-size: 16px; }
    .rt-select-field .select2-search--dropdown .select2-search__field { height: 44px; font-size: 16px; }
    .rt-select-field .select2-dropdown { font-size: 15px; }

    .rt-submit-wrap { padding-top: clamp(14px, 4vw, 34px); }
    .rt-submit.btn { width: clamp(150px, 27vw, 240px); height: 50px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .rt-submit.btn { transition: none; }
    .rt-submit.btn:hover { transform: none; }
}