/* Contact page (page-hubungi-kami.php). */

.os-contact {
	--ct-accent: #ef4444;
	--ct-ink: var(--text-primary, #0f172a);
	--ct-muted: var(--text-secondary, #64748b);
	--ct-line: #e2e8f0;
	--ct-soft: #f8fafc;
	--ct-card: #fff;
	color: var(--ct-ink);
}
[data-theme="dark"] .os-contact { --ct-line: #334155; --ct-soft: #111827; --ct-card: #1e293b; }

.os-contact__hero {
	position: relative;
	padding: calc(72px + clamp(1.5rem, 4vw, 3rem)) 0 clamp(2.25rem, 5vw, 3.5rem);
	overflow: hidden;
	background:
		radial-gradient(700px 320px at 85% 20%, rgba(239, 68, 68, .25), transparent 70%),
		linear-gradient(135deg, #0b1120 0%, #111827 55%, #1e293b 100%);
	color: #fff;
}
.os-contact__hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); pointer-events: none; }
.os-contact__hero .container { position: relative; }
.os-contact__crumbs { display: flex; gap: 8px; margin: 0 0 18px; color: #94a3b8; font-size: .82rem; font-weight: 600; }
.os-contact__crumbs a { color: #cbd5e1; text-decoration: none; }
.os-contact__crumbs a:hover { color: #fff; }
.os-contact__crumbs [aria-current] { color: #f87171; }
.os-contact__eyebrow { margin: 0 0 10px; color: #f87171; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.os-contact__title { max-width: 18ch; margin: 0 0 16px; color: #fff; font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
.os-contact__lead { max-width: 64ch; margin: 0; color: #cbd5e1; font-size: clamp(1rem, 1.6vw, 1.1rem); line-height: 1.65; }

.os-contact__section { padding: clamp(2.5rem, 5vw, 3.75rem) 0; }
.os-contact__section--soft { background: var(--ct-soft); }
.os-contact__heading { margin: 0 0 1.25rem; color: var(--ct-ink); font-size: clamp(1.35rem, 2.6vw, 1.8rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.os-contact p { line-height: 1.65; }

/* Topic cards */
.os-contact__topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.os-contact__topic { display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--ct-line); border-radius: 18px; background: var(--ct-card); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.os-contact__topic:hover { transform: translateY(-3px); border-color: rgba(239, 68, 68, .35); box-shadow: 0 18px 36px rgba(15, 23, 42, .08); }
.os-contact__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: rgba(239, 68, 68, .1); color: var(--ct-accent); }
.os-contact__topic h3 { margin: 0 0 .45rem; font-size: 1.15rem; font-weight: 800; }
.os-contact__topic p { margin: 0 0 .9rem; color: var(--ct-muted); font-size: .95rem; }
.os-contact__subject { margin-top: auto !important; color: var(--ct-ink) !important; font-size: .88rem !important; }
.os-contact__btn { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; background: var(--ct-accent); color: #fff; font-weight: 700; text-decoration: none; transition: background-color .2s ease, transform .15s ease; }
.os-contact__btn:hover { background: #dc2626; color: #fff; }
.os-contact__btn:active { transform: scale(.98); }
.os-contact__btn:focus-visible { outline: 3px solid rgba(239, 68, 68, .4); outline-offset: 2px; }
.os-contact__address { margin-top: 6px; color: var(--ct-muted); font-size: .82rem; }
.os-contact__fallback { margin: 0 !important; padding: 10px 12px; border-radius: 10px; background: var(--ct-soft); font-size: .85rem !important; }

/* Checklist + after */
.os-contact__guide { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.os-contact__guide > div > p { margin: 0 0 1rem; color: var(--ct-muted); }
.os-contact__checklist { margin: 0; padding: 0; list-style: none; }
.os-contact__checklist li { position: relative; margin-bottom: .75rem; padding-left: 34px; line-height: 1.6; }
.os-contact__checklist li::before { content: ""; position: absolute; top: 2px; left: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--ct-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center; }
.os-contact__after { padding: 1.5rem; border: 1px solid var(--ct-line); border-radius: 18px; background: var(--ct-card); }
.os-contact__after p { margin: 0; color: var(--ct-muted); }
.os-contact__after strong { color: var(--ct-ink); }

/* Official contact */
.os-contact__official { padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--ct-line); border-radius: 20px; background: linear-gradient(160deg, rgba(239, 68, 68, .06), var(--ct-card) 55%); }
.os-contact__official dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1.25rem 2rem; margin: 0 0 1.5rem; }
.os-contact__official dt { margin: 0 0 4px; color: var(--ct-muted); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.os-contact__official dd { margin: 0; font-size: 1rem; line-height: 1.55; }
.os-contact__official a { color: var(--ct-accent); font-weight: 700; }
.os-contact__privacy { margin: 0; padding-top: 1rem; border-top: 1px solid var(--ct-line); color: var(--ct-muted); font-size: .88rem; }

@media (max-width: 860px) {
	.os-contact__topics, .os-contact__guide { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.os-contact__topic { transition: none; }
	.os-contact__topic:hover { transform: none; }
}