.ctc-hero {
    padding: var(--space-5) 0 var(--space-4);
}

.ctc-hero-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 640px;
}

.ctc-hero-overline {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
    margin-bottom: var(--space-05);
}

.ctc-hero-title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-regular);
    line-height: 1.15;
    color: var(--color-primary-dark);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-1);
}

.ctc-hero-title em {
    font-style: italic;
    color: var(--color-primary);
}

.ctc-hero-desc {
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    line-height: var(--line-height-body);
}


.ctc-trust-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    list-style: none;
    margin-top: var(--space-3);
    padding: 0;
}

.ctc-trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background-color: var(--color-white);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    box-shadow: var(--shadow-raised);
}

.ctc-trust-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background-color: rgba(252, 100, 50, 0.1);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.ctc-trust-icon--purple {
    background-color: rgba(85, 70, 255, 0.1);
    color: var(--color-accent-purple-1);
}

.ctc-trust-icon--gold {
    background-color: rgba(247, 183, 15, 0.15);
    color: var(--color-warning-secondary);
}

.ctc-trust-num {
    display: block;
    font-family: var(--font-family-display);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-dark);
    line-height: 1.2;
}

.ctc-trust-label {
    display: block;
    font-size: 11px;
    color: var(--color-text-tertiary);
    line-height: 1.2;
}


.ctc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    align-items: start;
    margin-bottom: var(--space-7);
}

@media (min-width: 960px) {
    .ctc-grid {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: var(--space-4);
    }
}


.ctc-form-card {
    padding: var(--space-3);
}

@media (min-width: 640px) {
    .ctc-form-card {
        padding: var(--space-4);
    }
}

.ctc-form-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-muted);
}

.ctc-form-ordinal {
    flex: 0 0 auto;
    font-family: var(--font-family-body);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 1px;
    color: var(--color-primary);
    background-color: rgba(252, 100, 50, 0.1);
    border: 1px solid rgba(252, 100, 50, 0.25);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    min-width: 44px;
    text-align: center;
}

.ctc-form-title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-dark);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: 2px;
}

.ctc-form-desc {
    font-family: var(--font-family-body);
    font-size: var(--font-size-caption);
    color: var(--color-text-secondary);
    line-height: 1.5;
}


.ctc-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ctc-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ctc-field-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 640px) {
    .ctc-field-row {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }
}

.ctc-label {
    font-family: var(--font-family-body);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-dark);
    line-height: 20px;
    margin-bottom: 6px;
}

.ctc-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ctc-counter {
    font-size: 11px;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-tertiary);
    letter-spacing: 0.3px;
}

.ctc-counter.is-near-limit {
    color: var(--color-warning-secondary);
}

.ctc-counter.is-at-limit {
    color: #b91c1c;
}


.ctc-cat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-1);
}

.ctc-cat-btn {
    display: grid;
    grid-template-columns: 44px 1fr 24px;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    text-align: left;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    cursor: pointer;
    transition: all var(--transition-default);
    font-family: inherit;
}

.ctc-cat-btn:hover {
    border-color: var(--color-primary-dark);
    background-color: var(--color-bg-primary);
}

.ctc-cat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background-color: rgba(252, 100, 50, 0.1);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: all var(--transition-default);
}

.ctc-cat-icon--purple {
    background-color: rgba(85, 70, 255, 0.1);
    color: var(--color-accent-purple-1);
}

.ctc-cat-icon--gold {
    background-color: rgba(247, 183, 15, 0.15);
    color: var(--color-warning-secondary);
}

.ctc-cat-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ctc-cat-text strong {
    font-family: var(--font-family-display);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-dark);
    line-height: 1.3;
}

.ctc-cat-text em {
    font-style: normal;
    font-size: 12px;
    color: var(--color-text-tertiary);
    line-height: 1.4;
}

.ctc-cat-check {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-circle);
    background-color: var(--color-bg-neutral);
    color: transparent;
    border: 1px solid var(--color-border-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    transition: all var(--transition-default);
}

.ctc-cat-btn.is-active {
    border-color: var(--color-primary-dark);
    background-color: var(--color-primary-dark);
}

.ctc-cat-btn.is-active .ctc-cat-text strong {
    color: var(--color-white);
}

.ctc-cat-btn.is-active .ctc-cat-text em {
    color: rgba(243, 242, 240, 0.7);
}

.ctc-cat-btn.is-active .ctc-cat-check {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

@media (min-width: 640px) {
    .ctc-cat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-1);
    }

    .ctc-cat-btn {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: var(--space-1);
        text-align: center;
        padding: var(--space-3) var(--space-2);
        min-height: 168px;
    }

    .ctc-cat-icon {
        margin: 0 auto;
    }

    .ctc-cat-text {
        align-items: center;
    }

    .ctc-cat-check {
        position: absolute;
        top: var(--space-2);
        right: var(--space-2);
    }

    .ctc-cat-btn {
        position: relative;
    }
}


.ctc-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ctc-input-icon {
    position: absolute;
    left: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    font-size: 14px;
    pointer-events: none;
    transition: color var(--transition-default);
}

.ctc-input {
    width: 100%;
    height: 48px;
    padding: 12px var(--space-2) 12px 44px;
    background-color: var(--color-white);
    color: var(--color-text-primary);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-input);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-md);
    transition: all var(--transition-default);
}

.ctc-input::placeholder {
    color: var(--color-text-tertiary);
    opacity: 0.6;
}

.ctc-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus-ring);
}

.ctc-input:focus+.ctc-input-icon,
.ctc-input-wrap:focus-within .ctc-input-icon {
    color: var(--color-primary);
}

.ctc-input.is-invalid,
.ctc-textarea.is-invalid {
    border-color: var(--color-warning-secondary);
    box-shadow: var(--shadow-error-ring);
}


.ctc-textarea {
    width: 100%;
    min-height: 140px;
    padding: var(--space-2);
    background-color: var(--color-white);
    color: var(--color-text-primary);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    line-height: 1.5;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-md);
    resize: vertical;
    transition: all var(--transition-default);
}

.ctc-textarea::placeholder {
    color: var(--color-text-tertiary);
    opacity: 0.6;
}

.ctc-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus-ring);
}


.ctc-error {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #b91c1c;
    margin-top: 4px;
    line-height: 1.4;
}

.ctc-error::before {
    content: '\f06a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 11px;
}


.ctc-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    font-size: var(--font-size-caption);
    color: var(--color-text-secondary);
    cursor: pointer;
    line-height: 1.5;
    padding: var(--space-1) 0;
}

.ctc-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--color-primary);
    flex-shrink: 0;
    cursor: pointer;
}

.ctc-checkbox a {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
}


.ctc-submit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-2);
}

.ctc-btn-submit {
    flex: 1 1 auto;
    min-width: 200px;
    gap: var(--space-1);
}

.ctc-btn-submit:disabled {
    cursor: wait;
}

.ctc-btn-submit .fa-spinner {
    margin-right: 0;
}

.ctc-btn-reset {
    flex: 0 0 auto;
}


.ctc-form-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-tertiary);
    line-height: 1.5;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-muted);
}

.ctc-form-hint i {
    color: var(--color-primary);
    font-size: 12px;
}

.ctc-form-hint strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-dark);
}


.ctc-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
    opacity: 0;
}


.ctc-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

@media (min-width: 960px) {
    .ctc-sidebar {
        position: sticky;
        top: 88px;
        align-self: start;
    }
}

.ctc-side-card {
    padding: var(--space-3);
}

.ctc-side-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-muted);
}

.ctc-side-ordinal {
    align-self: flex-start;
    font-family: var(--font-family-body);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 1px;
    color: var(--color-primary);
    background-color: rgba(252, 100, 50, 0.1);
    border: 1px solid rgba(252, 100, 50, 0.25);
    border-radius: var(--radius-md);
    padding: 4px 8px;
    margin-bottom: var(--space-1);
}

.ctc-side-title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-dark);
    line-height: 1.3;
}

.ctc-side-desc {
    font-family: var(--font-family-body);
    font-size: var(--font-size-caption);
    color: var(--color-text-secondary);
    line-height: 1.5;
}


.ctc-channel-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    list-style: none;
    padding: 0;
    margin: 0;
}

.ctc-channel {
    display: grid;
    grid-template-columns: 44px 1fr 28px;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background-color: var(--color-white);
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all var(--transition-default);
}

.ctc-channel:hover {
    border-color: var(--color-primary-dark);
    background-color: var(--color-bg-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-floating);
    text-decoration: none;
}

.ctc-channel-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.ctc-channel-icon--mail {
    background-color: rgba(252, 100, 50, 0.1);
    color: var(--color-primary);
}

.ctc-channel-icon--tele {
    background-color: rgba(85, 70, 255, 0.1);
    color: var(--color-accent-purple-1);
}

.ctc-channel-icon--ig {
    background: linear-gradient(135deg, rgba(252, 100, 50, 0.15) 0%, rgba(85, 70, 255, 0.15) 100%);
    color: var(--color-primary);
}

.ctc-channel-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ctc-channel-text strong {
    font-family: var(--font-family-display);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-dark);
    line-height: 1.3;
}

.ctc-channel-text em {
    font-style: normal;
    font-family: var(--font-family-body);
    font-size: var(--font-size-caption);
    color: var(--color-text-tertiary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctc-channel-arrow {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-circle);
    background-color: var(--color-bg-neutral);
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    transition: all var(--transition-default);
}

.ctc-channel:hover .ctc-channel-arrow {
    background-color: var(--color-primary);
    color: var(--color-white);
}


.ctc-tip-card {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3);
    border-left: 3px solid var(--color-primary);
}

.ctc-tip-icon {
    flex: 0 0 auto;
    color: var(--color-primary);
    font-size: 18px;
    line-height: 1;
    margin-top: 2px;
}

.ctc-tip-title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-dark);
    margin-bottom: var(--space-05);
    line-height: 1.3;
}

.ctc-tip-text {
    font-family: var(--font-family-body);
    font-size: var(--font-size-caption);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.ctc-tip-text a {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}


.ctc-toast {
    position: fixed;
    bottom: var(--space-3);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background-color: var(--color-primary-dark);
    color: var(--color-bg-primary);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-default);
    box-shadow: var(--shadow-overlay);
    min-width: 280px;
    max-width: calc(100% - var(--space-3));
}

@media (min-width: 640px) {
    .ctc-toast {
        bottom: var(--space-4);
        max-width: 420px;
    }
}

.ctc-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.ctc-toast-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background-color: rgba(252, 100, 50, 0.2);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.ctc-toast.is-error .ctc-toast-icon {
    background-color: rgba(224, 162, 0, 0.25);
    color: var(--color-warning-primary);
}

.ctc-toast-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ctc-toast-title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    color: var(--color-bg-primary);
}

.ctc-toast-msg {
    font-family: var(--font-family-body);
    font-size: 12px;
    color: rgba(243, 242, 240, 0.75);
    line-height: 1.4;
}

.ctc-toast-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-circle);
    background-color: rgba(243, 242, 240, 0.08);
    color: var(--color-bg-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-default);
    border: 0;
    font-size: 12px;
}

.ctc-toast-close:hover {
    background-color: rgba(243, 242, 240, 0.18);
}


@media (max-width: 639px) {
    .ctc-trust-list {
        grid-template-columns: 1fr;
    }

    .ctc-form-head {
        gap: var(--space-1);
        margin-bottom: var(--space-3);
    }

    .ctc-form-ordinal {
        min-width: 40px;
        padding: 4px 8px;
    }

    .ctc-submit-row {
        flex-direction: column;
        align-items: stretch;
    }

    .ctc-btn-submit {
        min-width: 0;
    }

    .ctc-btn-reset {
        align-self: center;
    }
}


/* ============================================================
   Header override khusus halaman Hubungi Kami.
   Tampil sebagai header transparan tanpa tombol profil / aksi —
   hanya logo brand. Tidak menyentuh markup unified header
   (scripts/components/header.js).
   ============================================================ */

.contact-page .main-header {
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
}

.contact-page .main-header.is-scrolled {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}

/* Sembunyikan semua aksi header (search, donate, notif, profil + dropdown).
   Pakai display:none agar tidak mengambil ruang dan tidak bisa difokus. */
.contact-page .main-header .header-actions {
    display: none !important;
}