/*
 * Form sayfaları (contacts / ucretsiz-muayene / geri-bildirim / insan-kaynaklari).
 * Yalnız bu 4 sayfada yüklenir (inc/enqueue.php). Class isimlerine dokunmaz.
 */

/* ===== Paylaşımlı özel dropdown (.cf-service-*) — İletişim formundaki "Hizmet seçin" tasarımı =====
   Kaynak contacts.html <head>'inden; İK formunun native <select>'leri de mtr-select.js ile buna dönüşür. */
.cf-service-pick{position:relative;width:100%}
.cf-service-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:50px;padding:0 16px;border-radius:10px;border:none;background:var(--color-gray-50, #f9fafb);font-family:'Inter',sans-serif;font-size:16px;color:var(--color-black, #000);cursor:pointer;text-align:left;transition:background-color .15s ease}
.cf-service-toggle:hover{background:var(--color-gray-100, #f3f4f6)}
.cf-service-toggle[aria-expanded="true"]{outline:2px solid var(--color-primary, #5b7a12);outline-offset:1px;background:#fff}
.cf-service-toggle.cf-invalid{outline:2px solid var(--color-error, #a6021a);outline-offset:1px;background:#fff}
.cf-service-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-service-label.is-placeholder{color:var(--color-text-muted, #6b7280)}
.cf-service-chevron{width:14px;height:14px;flex:none;color:var(--color-text-muted, #6b7280);transition:transform .2s ease}
.cf-service-toggle[aria-expanded="true"] .cf-service-chevron{transform:rotate(180deg)}
.cf-service-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border-radius:12px;box-shadow:0px 12px 28px rgba(0,0,0,0.16);border:1px solid var(--color-border, #f3f4f6);padding:6px;z-index:20;max-height:280px;overflow-y:auto}
.cf-service-menu.is-open{display:block}
.cf-service-option{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:11px 14px;border-radius:8px;border:none;background:none;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:var(--color-black, #000);cursor:pointer}
.cf-service-option:hover{background:var(--color-gray-50, #f9fafb)}
.cf-service-option.is-active{background:var(--color-primary-tint, #f0f5e4);color:var(--color-primary, #5b7a12)}
.cf-service-option svg{width:14px;height:14px;flex:none;color:var(--color-primary, #5b7a12);opacity:0}
.cf-service-option.is-active svg{opacity:1}

/* mtr-select.js: native <select> -> .cf-service-pick sarmalayıcısı */
.mtr-select{position:relative;width:100%}
.mtr-select-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* mtr-select ile üretilen toggle: formun diğer alanlarıyla aynı (BEYAZ zemin + ince kenarlık + radius 12).
   (İletişim formundaki hazır .cf-service-toggle gri-50 kalır; bu yalnız .mtr-select içindekini hedefler.) */
.mtr-select .cf-service-toggle{background:#fff;border:1px solid var(--color-border, #f3f4f6);border-radius:12px}
.mtr-select .cf-service-toggle:hover{background:#fff;border-color:var(--color-primary, #5b7a12)}
.mtr-select .cf-service-toggle[aria-expanded="true"]{background:#fff}

/* --- /ucretsiz-muayene/ onay kutusu: İletişim "Disclaimer" tasarımı (Framer sınıfları) --- */
.um-form .um-consent{margin:6px 0 18px;cursor:pointer}
.um-form .um-consent .el-text{cursor:pointer}
.cf-service-toggle.is-invalid{outline:2px solid var(--color-error, #a6021a);outline-offset:1px;background:#fff}

/* --- JS düşerse: native <select> yine de temiz chevron'lu görünsün (progressive enhancement) --- */
.el-42EyA select:not([multiple]):not(.mtr-select-native){
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 4.5 6 7.5 9 4.5'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;cursor:pointer;
}
.el-42EyA select:not([multiple]):not(.mtr-select-native)::-ms-expand{display:none}

/* --- Mobil dokunma/zoom düzeltmesi: iOS Safari font-size < 16px input'ta focus'ta
       otomatik zoom yapar. <=809px'de 16px + min yükseklik. Masaüstü değişmez. --- */
@media (max-width: 809.98px) {
  .el-42EyA input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  .el-42EyA textarea,
  .el-42EyA select {
    font-size: 16px !important;
    min-height: 40px;
  }
  .cf-service-toggle{font-size:16px}
}
