/* ===============================
    VARIABLES WARNA
    =============================== */
:root {
    --primary-color: #0b0b5c; /* Biru utama */
    --primary-soft: rgba(11, 11, 92, 0.12);
    --border-color: #dcdce3;
    --text-main: #1c1c1c;
    --text-muted: #484646;
    --bg-card: #ffffff;
    --bg-page: #f6f7fb;
    --btn-hover: #08084a;
}

/* ===============================
    SECTION
    =============================== */
.partnership-section {
    background-color: var(--bg-page);
    padding: 60px 20px;
    font-family: "Figtree", sans-serif;
}

.pages-head {
    text-align: start;
    margin-bottom: 40px;
}

.partnership-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.pages-head p {
    color: var(--text-muted);
    font-size: 16px;
}

/* ===============================
    CARD FORM
    =============================== */
.partnership-card {
    background: var(--bg-card);
    border-radius: 18px;
    padding: 40px 32px;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
}

/* ===============================
    FORM FIELDS
    =============================== */
.partnership-form .form-group {
    margin-bottom: 20px;
    position: relative;
}

/* Input & Textarea */
.partnership-form .form-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
    transition: all 0.25s ease;
    outline: none;
    appearance: none;
}

/* Placeholder */
.partnership-form .form-input::placeholder {
    color: #000;
}

/* Hover / Focus */
.partnership-form .form-input:hover {
    border-color: #b9b9c9;
}

.partnership-form .form-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Textarea */
.partnership-form .textarea-input {
    min-height: 130px;
    line-height: 1.6;
    resize: vertical;
}

/* ===============================
    CUSTOM SELECT
    =============================== */
select {
    appearance: none;
    @supports (appearance: base-select) {
        @media (hover: hover) {
            &,
            &::picker(select) {
                appearance: base-select;
            }
        }
    }
}

select {
    display: flex;
    justify-content: space-between;
    min-width: 300px;
    align-items: center;
    color: white;
    margin-bottom: 40px;
    padding-block: 10px;
    padding-inline: 30px 40px;
    border-radius: 30px;
    border: 2px solid indigo;
    cursor: pointer;
    font-weight: 700;
    background: #000072
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23FFF' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A")
        right 10px center / 20px no-repeat;
    @media (hover: hover) {
        @supports (appearance: base-select) {
            padding-inline: 20px;
            background-image: none;
            &::picker-icon {
                content: "";
                width: 20px;
                height: 20px;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23FFF' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
                transition: rotate 0.2s ease-out;
            }
            &:open::picker-icon {
                rotate: 180deg;
            }
            &::picker(select) {
                padding: 0;
                margin-top: 5px;
                border: 2px solid indigo;
                background: white;
                border-radius: 20px;
                font-weight: 400;

                opacity: 0;
                height: 0;
                overflow: clip;
                transition:
                    height 0.5s ease-out,
                    opacity 0.5s ease-out,
                    overlay 0.5s,
                    display 0.5s;

                transition-behavior: allow-discrete;
            }
            &:open::picker(select) {
                opacity: 1;
                height: calc-size(auto, size);
                overflow: auto;
                @starting-style {
                    opacity: 0;
                    height: 0;
                }
            }
            option {
                padding: 15px 20px;
                border-top: 1px solid indigo;
                cursor: pointer;
                transition-property: color, background;
                transition-duration: 0.2s;
                transition-timing-function: ease-out;
                &:where(:hover, :focus, :active) {
                    background: dodgerblue;
                    color: white;
                }
                &:checked {
                    background: navy;
                    color: white;
                }
                &::checkmark {
                    display: none;
                }
                &:first-child {
                    border: 0;
                }
            }
        }
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ===============================
    BUTTON
    =============================== */
.btn-submit {
    display: inline-block;
    width: 100%;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background-color: var(--primary-color);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-submit:hover {
    background-color: var(--btn-hover);
    transform: translateY(-2px);
}

/* =========================
        PAGE HEAD
        ========================= */
.partnership-page-head {
    display: block;
    position: relative;
    z-index: 2;
    margin-bottom: 32px;
}

.post-title {
    padding: 0;
    margin: 0 0 12px;

    color: #000; /* tetap putih karena dark mode */
    font-family: "Hammersmith One", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 36px;

    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.2;
}
.post-paragraph {
    padding: 0;
    color: #000;
    font-family: "Figtree", Helvetica, sans-serif;
    font-weight: 400; /* Regular */
    line-height: 1.6;
    font-size: 14px;
}

/* ===============================
    RESPONSIVE
    =============================== */
@media (max-width: 640px) {
    .partnership-card {
        padding: 28px 20px;
    }

    .partnership-title {
        font-size: 28px;
    }
}

/* Animation */

#release-link-group {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

#release-link-group.active {
    opacity: 1;
    max-height: 100px;
}