/* =============================================================
 * ct.css — SAYFA 5: CONTACT US (1032:2312)
 * .in-cta-btn pd.css'ten. Sol başlık+illüstrasyon / sağ form; 1280 altı responsive EN SON.
 * ============================================================= */
.ct { padding-top: 67px; padding-bottom: 90px; }
/* Sol içerik x=227, form x=650 → iki kolon. Container inset zaten 227; grid ile 2 kolon. */
.ct__grid { display: grid; grid-template-columns: 423px 404px; column-gap: 0; align-items: start; }
/* sol kolon (227→650 = 423) */
.ct__left { position: relative; }
.ct__title { margin: 0; font-family: var(--in-head); font-weight: 700; font-size: 56px; line-height: 64px; letter-spacing: -1.12px; color: var(--in-heading); }
.ct__lead { margin: 45px 0 0; width: 356px; font-family: var(--in-text); font-weight: 400; font-size: 18px; line-height: 30px; color: var(--in-body); }
.ct__hl { display: inline; background: var(--in-lime); box-shadow: 0 2px 0 0 var(--in-border); padding: 0 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---- İllüstrasyon (cluster origin ~x253,y474; ill kutusu 295×241) ----
   Katman sırası: backdrop(bulut) → mail(sarı-bar pencere, arka-sağ) → env(zarf) →
   ön pencere(turuncu bar + 3 buton) → yıldızlar. */
.ct__ill { position: relative; margin-top: 74px; width: 305px; height: 245px; }
.ct__ill img, .ct__ill > div { position: absolute; display: block; }
/* dalgalı bulut — yavaş döner (20s) */
/* Tasarım cluster (Group 194, 305×241): backdrop@(15,1) 239, back2@(170,39) 117×83, back@(158,31) 121×83,
   env@(37,0) 58×61, ön pencere@(12,113) 256×128, star1@(265,7) 40, star2@(0,168) 47×46. */
.ct__ill-backdrop { left: 15px; top: 1px; width: 239px; height: 239px; z-index: 1;
  transform-origin: center; animation: ct-cloud-rot 20s linear infinite; }
/* Arka pencere: sarı bar + mor bar arka arkaya + açık gövde (121×83 @158,31) */
.ct__ill-back { left: 158px; top: 31px; width: 121px; height: 83px; z-index: 3;
  background: var(--in-card-fill); border: 1px solid var(--in-border); overflow: hidden; }
.ct__ill-back-y { position: absolute; left: 0; top: 0; width: 100%; height: 18px; background: var(--in-yellow); border-bottom: 1px solid var(--in-border); display: block; }
.ct__ill-back-p { position: absolute; left: 0; top: 19px; width: 100%; height: 18px; background: #8A38F5; border-bottom: 1px solid var(--in-border); display: block; }
.ct__ill-env { left: 37px; top: 0; width: 58px; height: 61px; z-index: 5; }               /* lime zarf sol-üst */
/* Ön pencere: turuncu bar + 3 buton, açık gövde — hafif büyür (20s) */
.ct__ill-win { left: 12px; top: 113px; width: 256px; height: 128px; z-index: 4;
  background: var(--in-card-fill); border: 1px solid var(--in-border);
  transform-origin: center; animation: ct-win-scale 20s linear infinite; }
.ct__ill-win-bar { position: absolute; left: 0; top: 0; width: 100%; height: 32px; background: var(--in-orange);
  border-bottom: 1px solid var(--in-border); display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-right: 14px; }
.ct__ill-win-bar i { width: 11px; height: 11px; background: #fff; border: 1px solid var(--in-border); display: block; }
.ct__ill-star { z-index: 6; }
.ct__ill-star--1 { left: 265px; top: 7px; width: 40px; height: 40px; }
.ct__ill-star--2 { left: 0; top: 168px; width: 47px; height: 46px; }
/* İllüstrasyon animasyonları (get_motion_context 1032:2312, 20s loop) */
@keyframes ct-cloud-rot { 0%{transform:rotate(0);} 92.1%,100%{transform:rotate(360deg);} }
@keyframes ct-win-scale { 0%{transform:scale(1);} 40.02%,100%{transform:scale(1.099);} }
@media (prefers-reduced-motion: reduce){ .ct__ill-backdrop, .ct__ill-win { animation: none !important; } }

/* =============================================================
 * FORM (sağ kolon, 404 genişlik)
 * ============================================================= */
.ct__form { width: 404px; }
.ct-field { margin-bottom: 20px; }
.ct-field__label { display: block; margin-bottom: 7px; font-family: var(--in-text); font-weight: 400; font-size: 14px; line-height: 22px; color: var(--in-body); }
/* Form Input (1050:3181): 48px, 2px border, 2px sert gölge. default beyaz; typing lime; error kırmızı */
.ct-input { width: 100%; height: 48px; background: var(--in-card); border: 2px solid var(--in-border); box-shadow: var(--in-shadow-sm);
  padding: 10px 16px; font-family: var(--in-text); font-weight: 400; font-size: 16px; line-height: 28px; color: var(--in-body);
  outline: none; -webkit-appearance: none; appearance: none; border-radius: 0; transition: background .12s, border-color .12s, color .12s;
  caret-color: var(--in-orange); }   /* Yazma imleci (caret) turuncu */
.ct-input::placeholder { color: var(--in-muted); }
.ct-input:focus, .ct-input.is-typing { background: #F8FFDC; }                        /* Typing Arkaplan */
.ct-input.is-error { background: #FFDFD8; border-color: #E4483C; color: #E4483C; }
.ct-input.is-error::placeholder { color: #E4483C; }
.ct-input--area { height: 100px; resize: vertical; padding-top: 10px; line-height: 28px; }
.ct-field__err { margin: 8px 0 0; font-family: var(--in-text); font-weight: 500; font-size: 12px; line-height: 18px; color: #E4483C; }
/* Select (What can we help you with?) — chevron sağda */
.ct-select { position: relative; }
.ct-select__el { padding-right: 40px; cursor: pointer; color: var(--in-heading); }
.ct-select__el:invalid { color: var(--in-muted); }
/* keyboard_arrow_down (1037:2636) — 24px kutu içinde ~12×8 ok */
.ct-select__chev { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none;
  width: 14px; height: auto; display: block; }
/* Not: turuncu bar + açıklama */
.ct-note { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; padding-left: 0;
  font-family: var(--in-text); font-weight: 400; font-size: 14px; line-height: 22px; color: var(--in-body); }
.ct-note__bar { flex: 0 0 auto; width: 3px; height: 32px; background: var(--in-orange); display: block; }
.ct__btn { margin-top: 24px; }

/* =============================================================
 * RESPONSIVE — 1280 altı (tek 1000px kırılımı; ≤1000 dikey stack + ORTALI)
 * ============================================================= */
@media (max-width: 1000px){
  .ct { padding-top: 48px; padding-bottom: 70px; }
  /* Tek kolon: başlık+açıklama+illüstrasyon üstte ortalı, form altta */
  .ct__grid { display: flex; flex-direction: column; align-items: center; gap: 40px; }
  .ct__left { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 480px; }
  .ct__lead { width: auto; max-width: 400px; }
  .ct__ill { margin-top: 40px; }
  /* Form akışkan (max 404), ortalı */
  .ct__form { width: 100%; max-width: 404px; }
}
@media (max-width: 900px){
  .ct__title { font-size: 44px; line-height: 52px; }
}
@media (max-width: 420px){
  .ct__title { font-size: 38px; line-height: 46px; }
  .ct__ill { transform: scale(.9); }
}

/* FormKeep gönderim durum mesajı (JS ile gösterilir/gizlenir) */
.ct-status { margin: 14px 0 0; font-family: var(--in-text); font-weight: 500; font-size: 14px; line-height: 22px; color: var(--in-body); }
.ct-status.is-success { color: #1f7a1f; }
.ct-status.is-error { color: #E4483C; }

/* =============================================================
 * Custom neobrutalist select (JS ile). Native <select> gizlenir, aynı
 * .ct-select__el kutusu trigger olarak kalır; açılan panel neobrutalist.
 * ============================================================= */
.ct-select.is-enhanced select.ct-select__el { position: absolute; opacity: 0; pointer-events: none; }
/* Trigger: görünen kutu (native select ile aynı stil — .ct-select__el zaten .ct-input) */
.ct-select__trigger { width: 100%; height: 48px; background: var(--in-card); border: 2px solid var(--in-border);
  box-shadow: var(--in-shadow-sm); padding: 10px 40px 10px 16px; text-align: left;
  font-family: var(--in-text); font-weight: 400; font-size: 16px; line-height: 28px; color: var(--in-heading);
  cursor: pointer; border-radius: 0; position: relative; display: none; }
.ct-select.is-enhanced .ct-select__trigger { display: block; }
.ct-select__trigger.is-placeholder { color: var(--in-muted); }
.ct-select__trigger.is-open { background: #F8FFDC; }
/* Açılan panel: kalın border + sert gölge */
.ct-select__panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  background: var(--in-card); border: 2px solid var(--in-border); box-shadow: 4px 4px 0 0 var(--in-border);
  max-height: 260px; overflow-y: auto; display: none; }
.ct-select__panel.is-open { display: block; }
.ct-select__opt { padding: 11px 16px; font-family: var(--in-text); font-weight: 400; font-size: 16px; line-height: 24px;
  color: var(--in-body); cursor: pointer; border-bottom: 1px solid var(--in-table-border, #E3DDD2); }
.ct-select__opt:last-child { border-bottom: 0; }
.ct-select__opt:hover, .ct-select__opt.is-active { background: var(--in-lime); color: var(--in-heading); }
.ct-select__opt.is-selected { font-weight: 600; }