/* =====================================================================
   THERALETIK STEGLITZ — kontakt.css
   Section khusus halaman Kontakt: contact (info + form lengkap dengan
   radio Versicherung) + maps. Butuh globals.css + utilities.css.
   Token + rem/clamp only (no px, no hex).
   ===================================================================== */

/* ============================ CONTACT ============================ */
.kon_sec { background: var(--light-100); padding-block: var(--sp-sect); }
.kon_grid { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-8); }
.kon_info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-7); max-width: 30.9375rem; }
.kon_intro { display: flex; flex-direction: column; gap: var(--sp-3); }
.kon_eyebrow { font-weight: 500; color: var(--brand-o60); }
.kon_title { color: var(--brand-500); }
.kon_lead { font-weight: 500; color: var(--brand-o60); }

.kon_details { display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; }
.kon_detail { display: flex; flex-direction: column; gap: var(--sp-1); }
.kon_detail_label { font-weight: 500; color: var(--brand-o60); }
.kon_detail_value { margin: 0; font-weight: 500; color: var(--brand-500); }
.kon_detail_link { transition: color .2s ease; }
.kon_detail_link:hover { color: var(--brand-200); }
.kon_detail_link:focus-visible { outline: var(--bw2) solid var(--brand-500); outline-offset: .125rem; }

.kon_form {
  flex: 0 1 42.375rem; min-width: 0;
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-4);
  background: var(--brand-500);
  border: var(--bw) solid var(--brand-o10);
  border-radius: .625rem;
  -webkit-backdrop-filter: blur(var(--blur-15));
  backdrop-filter: blur(var(--blur-15));
}
.kon_form_head { display: flex; flex-direction: column; gap: var(--sp-3); }
.kon_form_title { color: var(--light-100); }
.kon_form_sub { font-weight: 500; color: var(--white-o60); }
.kon_form_body { display: flex; flex-direction: column; gap: var(--sp-4); }
.kon_row { display: flex; gap: var(--sp-3); }
.kon_field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.kon_field_label { font-weight: 500; color: var(--light-100); }
.kon_input {
  width: 100%;
  padding: var(--sp-3);
  font: inherit; font-weight: 500;
  color: var(--light-100);
  background: transparent;
  border: var(--bw) solid var(--white-o10);
  border-radius: var(--r-100);
  transition: border-color .2s ease;
}
.kon_textarea {
  width: 100%; min-height: 11.75rem; resize: vertical;
  padding: var(--sp-3);
  font: inherit; font-weight: 500;
  color: var(--light-100);
  background: transparent;
  border: var(--bw) solid var(--white-o10);
  border-radius: var(--r-main);
  transition: border-color .2s ease;
}
.kon_input::placeholder, .kon_textarea::placeholder { color: var(--white-o60); }
.kon_input:focus, .kon_textarea:focus { outline: none; border-color: var(--brand-400); }

/* insurance radios */
.kon_radios { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; border: 0; }
.kon_radios_label { padding: 0; font-weight: 500; color: var(--light-100); }
.kon_radio { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.kon_radio_input { position: absolute; width: var(--bw); height: var(--bw); opacity: 0; }
.kon_radio_mark {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem;
  background: var(--white-o10);
  border: var(--bw) solid var(--white-o10);
  border-radius: var(--r-main);
  transition: border-color .2s ease;
}
.kon_radio_mark::after {
  content: ""; width: .75rem; height: .75rem; border-radius: var(--r-999);
  background: var(--brand-400); opacity: 0; transition: opacity .2s ease;
}
.kon_radio_input:checked + .kon_radio_mark { border-color: var(--brand-400); }
.kon_radio_input:checked + .kon_radio_mark::after { opacity: 1; }
.kon_radio_input:focus-visible + .kon_radio_mark { outline: var(--bw2) solid var(--brand-400); outline-offset: .125rem; }
.kon_radio_text { font-weight: 500; color: var(--light-100); }

.kon_submit {
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 500; color: var(--brand-500);
  background: var(--brand-400);
  border-radius: var(--r-100);
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}
.kon_submit:hover { filter: brightness(1.06); transform: translateY(-.125rem); }
.kon_submit:focus-visible { outline: var(--bw2) solid var(--brand-400); outline-offset: .25rem; }

/* ============================ MAPS ============================ */
.map_sec { background: var(--light-100); padding-top: var(--sp-sect); padding-bottom: var(--sp-sect-lg); }
.map_frame { display: block; width: 100%; height: 31.1875rem; border-radius: .625rem; overflow: hidden; background: var(--light-1000); }
.map_img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.map_frame:hover .map_img { transform: scale(1.03); }
.map_frame:focus-visible { outline: var(--bw2) solid var(--brand-500); outline-offset: .25rem; }

/* ============================ RESPONSIVE (kontakt) ============================ */
@media (max-width: 60rem) {
  .kon_grid { flex-direction: column; align-items: stretch; }
  .kon_info { max-width: 100%; }
  .kon_form { flex-basis: auto; }
  .map_frame { height: 24rem; }
}

@media (max-width: 30rem) {
  .kon_row { flex-direction: column; }
  .map_frame { height: 18rem; }
}