/* ==========================================================================
   ENQUIRY — tek form bileşeni + yan panel + teşekkür sayfası
   Kaynak: proje dışı panache-belgeler/enquiry.pdf (Developer Specification, Eylül 2026)

   Bu dosya her sayfada yükleniyor (panel header'dan açılabiliyor), bu yüzden
   sections.css / contact.css token'larına DAYANMAZ: kendi --eq-* setini
   tanımlar. Değerler contact.css ile bilerek aynı — krem zemin, serif başlık,
   kırmızı vurgu — ama ana sayfada ve about'ta da çalışması gerekiyor.

   Ölçü kararı: bileşen iki farklı genişlikte yaşıyor (dar panel ~640px,
   Contact sayfasında ~1000px). Bu yüzden kırılımlar viewport'a değil
   @container'a bağlı — aynı işaretleme her iki yerde de doğru diziliyor.
   ========================================================================== */

.eq{
  --eq-cream:#FAF8F4;
  --eq-field:#FFFFFF;
  --eq-ink:#05244F;
  --eq-muted:#405A7B;
  --eq-red:#DF3131;
  --eq-red-deep:#C41414;
  --eq-border:rgba(5,36,79,.22);
  --eq-border-strong:rgba(5,36,79,.38);
  --eq-hair:rgba(5,36,79,.14);

  --eq-caslon:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --eq-cormorant:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --eq-isans:"Instrument Sans","Manrope","Helvetica Neue",Arial,sans-serif;

  container-type:inline-size;
  container-name:eq;
  color:var(--eq-ink);
}

/* Tarayıcılar gövde font'unu form denetimlerine miras vermez.
   DİKKAT: bu seçici (0,1,1); kendi font'unu yazan bileşen kuralları (.eq-submit,
   .eq-back) .eq ile nitelenmek zorunda, yoksa buraya yeniliyorlar. */
.eq input,.eq select,.eq textarea,.eq button{font:inherit;color:inherit}

.eq__form{margin:0}
.eq fieldset{min-width:0;margin:0;padding:0;border:0}
.eq legend{padding:0}

.eq-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Bal küpü — ekranda da ekran okuyucuda da yok, ama otomatik doldurulur.
   left:-9999px KULLANILMIYOR: LTR'de sol taraf taşması kaydırma yaratmaz ama
   RTL'de kaydırma yönü ters olduğu için o -9999px gerçek bir yatay kaydırma
   çubuğuna dönüşüyordu (Arapça Contact sayfasında ölçüldü: 1440px ekranda
   11439px genişlik). Bunun yerine .eq-sr ile aynı kırpma tekniği: hiçbir yöne
   taşmıyor, alan yine DOM'da ve botlar tarafından doldurulabilir. */
.eq__hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- giriş cümlesi ------------------------------------------------ */
.eq__intro{font-family:var(--eq-caslon);color:var(--eq-muted);
  font-size:clamp(15px,1.05vw,19px);line-height:1.45;margin:0 0 clamp(22px,2.2vw,34px);
  max-width:56ch}

/* ---------- adım görünürlüğü --------------------------------------------- */
/* Tek kural: hangi adımın gizleneceği. data-enquiry-state JS tarafından
   'choose' <-> 'fields' arasında değişir; JS yoksa PHP'nin bastığı değer kalır. */
.eq[data-enquiry-state="choose"] .eq__step--fields,
.eq[data-enquiry-state="fields"] .eq__step--choose{display:none}

/* ---------- adım 1 — profil seçimi --------------------------------------- */
.eq__question{font-family:var(--eq-cormorant);font-weight:600;color:var(--eq-ink);
  font-size:clamp(26px,2.3vw,44px);line-height:1.08;margin:0 0 clamp(18px,1.6vw,28px);
  text-wrap:balance}

.eq__choices{display:grid;grid-template-columns:1fr;gap:clamp(12px,1.2vw,20px)}
@container eq (min-width:620px){
  .eq__choices{grid-template-columns:1fr 1fr}
}

/* Büyük dokunma hedefi — şartname mobil için bunu açıkça istiyor. */
.eq-choice{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  width:100%;min-height:132px;text-align:start;cursor:pointer;
  padding:clamp(20px,1.7vw,30px);
  background:var(--eq-field);border:1px solid var(--eq-border);border-radius:0;
  appearance:none;-webkit-appearance:none;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.eq-choice:hover{border-color:var(--eq-red);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(5,36,79,.09)}
.eq-choice:focus-visible{outline:2px solid var(--eq-red);outline-offset:3px}
.eq-choice__title{font-family:var(--eq-cormorant);font-weight:700;
  font-size:clamp(20px,1.55vw,30px);line-height:1.15;color:var(--eq-ink)}
.eq-choice__sub{font-family:var(--eq-caslon);color:var(--eq-muted);
  font-size:clamp(15px,.95vw,17px);line-height:1.38}
.eq-choice__go{margin-top:auto;padding-top:14px}
.eq-choice__go svg{width:30px;height:auto;stroke:var(--eq-red);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.eq-choice:hover .eq-choice__go svg{transform:translateX(5px)}

/* ---------- adım 2 — geri dönüş satırı ----------------------------------- */
.eq__crumb{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 16px;
  margin:0 0 clamp(20px,1.8vw,30px);padding-bottom:clamp(14px,1.2vw,20px);
  border-bottom:1px solid var(--eq-hair)}
.eq .eq-back{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:none;border:0;padding:6px 0;min-height:32px;
  font-family:var(--eq-isans);font-weight:700;font-size:clamp(13px,.8vw,13px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--eq-red-deep);
  transition:color .18s ease}
.eq-back svg{width:18px;height:auto;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.eq-back:hover{color:var(--eq-red)}
.eq-back:hover svg{transform:translateX(-4px)}
.eq-back:focus-visible{outline:2px solid var(--eq-red);outline-offset:3px}
.eq__crumb-label{font-family:var(--eq-caslon);color:var(--eq-muted);
  font-size:clamp(14px,.95vw,17px);line-height:1.3;margin:0}
.eq__crumb-label strong{font-weight:400;color:var(--eq-ink)}

/* ---------- alan ızgarası ------------------------------------------------ */
.eq-grid{display:grid;grid-template-columns:1fr;gap:clamp(16px,1.35vw,24px)}
@container eq (min-width:620px){
  .eq-grid{grid-template-columns:1fr 1fr}
}
.eq-field--full{grid-column:1 / -1}

@container eq (min-width:900px){
  .eq-field input[type="text"],
  .eq-field input[type="email"],
  .eq-field textarea,
  .eq-select select{font-size:17.5px;padding:15px 17px}
  .eq-check__item label,
  .eq-consent label{font-size:16.5px}
}

.eq-field{display:flex;flex-direction:column;margin:0}
.eq-field > label,
.eq-check > legend{font-family:var(--eq-isans);font-weight:700;color:var(--eq-ink);
  font-size:clamp(13px,.8vw,13px);letter-spacing:.12em;text-transform:uppercase;
  line-height:1.3;margin:0 0 9px}
.eq-opt{font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--eq-muted)}
.eq-req{color:var(--eq-red);margin-inline-start:.2em}

.eq-field input[type="text"],
.eq-field input[type="email"],
.eq-field textarea,
.eq-select select{
  /* 16px taban: iOS Safari daha küçüğünde odakta sayfayı yakınlaştırır. */
  font-family:var(--eq-caslon);font-size:16px;line-height:1.45;
  color:var(--eq-ink);background:var(--eq-field);
  border:1px solid var(--eq-border);border-radius:0;
  appearance:none;-webkit-appearance:none;
  padding:13px 15px;width:100%;
  transition:border-color .18s ease,box-shadow .18s ease}
.eq-field textarea{resize:vertical;min-height:92px}

.eq-select{position:relative;display:block}
.eq-select::after{content:"";position:absolute;right:15px;top:50%;
  width:11px;height:7px;margin-top:-3px;pointer-events:none;
  background:var(--eq-ink);
  clip-path:polygon(0 0,50% 100%,100% 0,88% 0,50% 74%,12% 0)}
.eq-select select{padding-inline-end:38px}

.eq-field input:hover,.eq-field textarea:hover,.eq-select select:hover{border-color:var(--eq-border-strong)}
.eq-field input:focus,.eq-field textarea:focus,.eq-select select:focus{
  border-color:var(--eq-red);box-shadow:inset 0 0 0 1px var(--eq-red);outline:none}
.eq-field input::placeholder,.eq-field textarea::placeholder{color:rgba(64,90,123,.6)}

/* Açık uçlu soru: küçük gri bir label değil, serif bir başlık olarak dizilir.
   Şartnamenin özellikle istediği ayrıntı — boş kutuya iki kelime, gerçek bir
   soruya paragraf yazılıyor. */
.eq-field--headline > label{font-family:var(--eq-cormorant);font-weight:600;
  font-size:clamp(19px,1.5vw,28px);letter-spacing:0;text-transform:none;
  line-height:1.18;color:var(--eq-ink);margin-bottom:12px;max-width:42ch;text-wrap:balance}

/* ---------- çoklu seçim kutuları ----------------------------------------- */
.eq-check{display:block}
.eq-check__grid{display:grid;grid-template-columns:1fr;gap:9px}
@container eq (min-width:520px){
  .eq-check__grid{grid-template-columns:1fr 1fr}
}
@container eq (min-width:900px){
  .eq-check__grid{grid-template-columns:repeat(3,1fr)}
}
.eq-check__item{display:flex;align-items:center;gap:11px;
  background:var(--eq-field);border:1px solid var(--eq-border);
  padding:11px 14px;min-height:48px;
  transition:border-color .16s ease}
.eq-check__item:hover{border-color:var(--eq-border-strong)}
.eq-check__item:has(input:checked){border-color:var(--eq-red)}
.eq-check__item label{font-family:var(--eq-caslon);font-size:15px;line-height:1.3;
  color:var(--eq-ink);cursor:pointer;flex:1}

.eq input[type="checkbox"]{flex:0 0 auto;width:20px;height:20px;margin:0;cursor:pointer;
  appearance:none;-webkit-appearance:none;border-radius:0;
  border:1px solid var(--eq-border-strong);background:var(--eq-field);
  transition:background .15s ease,border-color .15s ease}
.eq input[type="checkbox"]:checked{background:var(--eq-red);border-color:var(--eq-red);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:13px}
.eq input[type="checkbox"]:focus-visible{outline:2px solid var(--eq-red);outline-offset:2px}

/* ---------- hata iletileri ----------------------------------------------- */
/* Alanın ALTINDA, sade dilde. Şartname: doğrulama blur'da ve satır içinde,
   yalnızca submit'te değil. */
.eq-err{display:block;font-family:var(--eq-caslon);font-size:14px;line-height:1.35;
  color:var(--eq-red-deep);margin-top:7px}
.eq-err[hidden]{display:none}
/* Onay hatası, altındaki destek satırıyla aynı hizaya otursun (kutunun değil
   etiketin soluna). 32px = kutu 20px + aradaki 12px. */
.eq-err--block{margin-top:10px;padding-inline-start:32px}
.eq-field.is-invalid input,
.eq-field.is-invalid textarea{border-color:var(--eq-red-deep);
  box-shadow:inset 0 0 0 1px var(--eq-red-deep)}
.eq-consent.is-invalid input[type="checkbox"]{border-color:var(--eq-red-deep)}

/* ---------- onay ---------------------------------------------------------- */
.eq-consent{display:flex;align-items:flex-start;gap:12px;
  margin-top:clamp(22px,2vw,34px);padding-top:clamp(18px,1.6vw,28px);
  border-top:1px solid var(--eq-hair)}
.eq-consent input[type="checkbox"]{margin-top:2px}
.eq-consent label{font-family:var(--eq-caslon);color:var(--eq-ink);
  font-size:15px;line-height:1.45;cursor:pointer}
.eq-consent a{color:var(--eq-red-deep);border-bottom:1px solid var(--eq-border)}
.eq-consent a:hover{border-color:var(--eq-red)}
.eq-consent__note{font-family:var(--eq-caslon);color:var(--eq-muted);
  font-size:14px;line-height:1.45;margin:10px 0 0;padding-inline-start:32px;max-width:62ch}

/* ---------- gönder -------------------------------------------------------- */
.eq__actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 22px;
  margin-top:clamp(22px,2vw,34px)}
.eq .eq-submit{display:inline-flex;align-items:center;justify-content:center;gap:11px;
  cursor:pointer;background:var(--eq-red);color:#fff;
  border:1px solid transparent;border-radius:0;appearance:none;-webkit-appearance:none;
  padding:15px 34px;min-height:52px;
  font-family:var(--eq-isans);font-weight:700;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;
  transition:background .2s ease}
.eq-submit:hover{background:var(--eq-red-deep)}
.eq-submit:focus-visible{outline:2px solid var(--eq-ink);outline-offset:3px}
/* Uçuştaki istek sırasında: devre dışı + dönen gösterge. Çift gönderimi önler. */
.eq-submit[disabled]{opacity:.62;cursor:progress}
.eq-submit__spinner{display:none;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:eq-spin .7s linear infinite}
.eq-submit.is-busy .eq-submit__spinner{display:block}
@keyframes eq-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .eq-submit__spinner{animation-duration:2s}
}
.eq-status{font-family:var(--eq-caslon);font-size:14px;line-height:1.35;color:var(--eq-red-deep)}
.eq-status:empty{display:none}

/* ---------- alternatif yol ------------------------------------------------ */
.eq__alt{font-family:var(--eq-caslon);color:var(--eq-muted);
  font-size:14.5px;line-height:1.6;margin:clamp(20px,1.8vw,30px) 0 0;
  padding-top:clamp(16px,1.4vw,24px);border-top:1px solid var(--eq-hair)}
.eq__alt a{color:var(--eq-red-deep);border-bottom:1px solid var(--eq-border)}
.eq__alt a:hover{border-color:var(--eq-red)}
.eq__alt-sep{margin:0 8px;color:var(--eq-border-strong)}

/* ---------- sayfa içi kullanım (Contact) --------------------------------- */
/* Eskiden 1020px'de sınırlanıyordu; "Kimin adına bilgi almak istiyorsunuz?"
   kutuları bandın geri kalanına göre dar kalıp sağda boşluk bırakıyordu.
   Artık .sc-wrap'in tam genişliğini kullanıyor — 1fr 1fr ızgarası da col-6 +
   col-6 gibi satırı ikiye bölüyor. */
.eq--page{max-width:none}

/* ==========================================================================
   YAN PANEL
   ========================================================================== */
.eq-panel{position:fixed;inset:0;z-index:120}
.eq-panel[hidden]{display:none}

.eq-panel__scrim{position:absolute;inset:0;background:rgba(5,20,40,.55);
  opacity:0;transition:opacity .3s ease}
.eq-panel.is-open .eq-panel__scrim{opacity:1}

.eq-panel__sheet{position:absolute;top:0;right:0;bottom:0;
  width:min(680px,100%);display:flex;flex-direction:column;
  background:var(--ct-cream,#FAF8F4);
  box-shadow:-24px 0 60px rgba(5,20,40,.28);
  transform:translateX(100%);transition:transform .34s cubic-bezier(.22,.61,.36,1)}
.eq-panel.is-open .eq-panel__sheet{transform:none}
@media (prefers-reduced-motion:reduce){
  .eq-panel__sheet{transition:none}
}

.eq-panel__bar{position:sticky;top:0;z-index:2;flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px clamp(20px,3.4vw,44px);
  background:#0E1A2B;color:#fff}
.eq-panel__title{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
  font-size:clamp(22px,2vw,30px);letter-spacing:.14em;text-transform:uppercase;
  line-height:1;margin:0}
.eq-panel__dot{color:#DF3131}
.eq-panel__close{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-inline-end:-10px;cursor:pointer;
  background:none;border:0;padding:0;color:#fff;opacity:.82;
  transition:opacity .18s ease,transform .18s ease}
.eq-panel__close svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round}
.eq-panel__close:hover{opacity:1;transform:rotate(90deg)}
.eq-panel__close:focus-visible{outline:2px solid #DF3131;outline-offset:-2px}

.eq-panel__body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:clamp(26px,3.4vw,44px) clamp(20px,3.4vw,44px) clamp(40px,4vw,64px)}

/* Panel açıkken arka plan kaymasın. */
body.eq-locked{overflow:hidden}

/* Dar ekranda panel tam sayfa olur; sağdan değil aşağıdan gelmesi mobilde
   daha doğal, ama yön değişimi kullanıcıyı şaşırtıyor — genişliği 100%'e
   çekip aynı hareketi koruyoruz. */
@media (max-width:560px){
  .eq-panel__sheet{width:100%;box-shadow:none}
  .eq-panel__bar{padding-inline:20px}
}

/* ==========================================================================
   TEŞEKKÜR SAYFASI (şartname bölüm 08)
   Gerçek bir URL, formun yerine geçen bir mesaj değil.
   ========================================================================== */
.ty-page{--ty-cream:#FAF8F4;--ty-ink:#05244F;--ty-muted:#405A7B;
  --ty-red:#DF3131;--ty-red-deep:#C41414;--ty-border:rgba(5,36,79,.22);
  --ty-hair:rgba(5,36,79,.14);
  --ty-caslon:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --ty-cormorant:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ty-isans:"Instrument Sans","Manrope","Helvetica Neue",Arial,sans-serif;
  --ty-gut:clamp(20px,6.25vw,120px)}

.ty{background:var(--ty-cream);padding-block:clamp(56px,6vw,120px)}
.ty__wrap{width:100%;padding-inline:var(--ty-gut)}
.ty__eyebrow{font-family:var(--ty-cormorant);font-weight:700;color:var(--ty-red-deep);
  font-size:clamp(15px,1.15vw,22px);letter-spacing:.06em;text-transform:uppercase;
  line-height:1;margin:0 0 16px}
.ty h1{font-family:var(--ty-cormorant);font-weight:600;color:var(--ty-ink);
  font-size:clamp(34px,4vw,74px);line-height:1.03;margin:0 0 clamp(16px,1.4vw,26px);
  max-width:20ch;text-wrap:balance}
.ty__dot{color:var(--ty-red)}
.ty__lede{font-family:var(--ty-caslon);color:var(--ty-muted);
  font-size:clamp(16px,1.3vw,25px);line-height:1.4;margin:0;max-width:52ch}
.ty__promise{font-family:var(--ty-caslon);color:var(--ty-ink);
  font-size:clamp(15px,1.2vw,23px);line-height:1.4;
  margin:clamp(26px,2.4vw,44px) 0 0;padding-inline-start:clamp(14px,1.2vw,22px);
  border-inline-start:3px solid var(--ty-red);max-width:52ch}

.ty__reading{margin-top:clamp(38px,3.6vw,68px);padding-top:clamp(26px,2.4vw,44px);
  border-top:1px solid var(--ty-hair)}
.ty__reading h2{font-family:var(--ty-isans);font-weight:700;color:var(--ty-ink);
  font-size:clamp(13px,.85vw,15px);letter-spacing:.14em;text-transform:uppercase;
  line-height:1.2;margin:0 0 clamp(18px,1.6vw,28px)}
.ty__cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.6vw,30px)}
.ty-card{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--ty-border);padding:clamp(20px,1.9vw,36px);
  transition:border-color .18s ease,transform .18s ease}
.ty-card:hover{border-color:var(--ty-red);transform:translateY(-2px)}
.ty-card h3{font-family:var(--ty-cormorant);font-weight:700;color:var(--ty-ink);
  font-size:clamp(19px,1.6vw,31px);line-height:1.15;margin:0 0 10px}
.ty-card p{font-family:var(--ty-caslon);color:var(--ty-muted);
  font-size:clamp(15px,1.04vw,19px);line-height:1.38;margin:0 0 clamp(14px,1.2vw,22px)}
.ty-card .go{font-family:var(--ty-isans);font-weight:700;font-size:clamp(13px,.83vw,14px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ty-red-deep);margin-top:auto}

.ty__book{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(18px,2vw,40px);flex-wrap:wrap;
  margin-top:clamp(26px,2.4vw,46px);padding:clamp(20px,1.9vw,36px);
  background:#0E1A2B;color:#fff}
.ty__book h2{font-family:var(--ty-cormorant);font-weight:700;color:#fff;
  font-size:clamp(20px,1.75vw,34px);line-height:1.15;margin:0 0 8px;letter-spacing:0;
  text-transform:none}
.ty__book p{font-family:var(--ty-caslon);color:#C6D2E2;
  font-size:clamp(15px,1.04vw,20px);line-height:1.35;margin:0;max-width:52ch}
.ty__book .btn{border-radius:0;appearance:none;-webkit-appearance:none;flex:0 0 auto}

/* Dokunma hedefi (denetim B4): bağlantı 20px kalıyordu → 44px.
   .ct-reach a ile aynı desen: min-height + alt çizgi ::after'da.
   line-height burada açıkça yazıldı, ::after'ın .675em hesabı ona dayanıyor;
   negatif margin-block büyümeyi satır yüksekliğinden geri alıyor. */
.ty__back{font-family:var(--ty-caslon);color:var(--ty-muted);font-size:15px;line-height:1.35;
  margin:clamp(30px,2.6vw,48px) 0 0}
.ty__back a{position:relative;display:inline-flex;align-items:center;min-height:44px;
  margin-block:-12px;color:var(--ty-red-deep)}
.ty__back a::after{content:"";position:absolute;left:0;right:0;top:calc(50% + .675em);
  height:1px;background:var(--ty-border);transition:background .18s ease}
.ty__back a:hover::after{background:var(--ty-red)}

@media (max-width:760px){
  .ty__cards{grid-template-columns:1fr}
  .ty__book{flex-direction:column;align-items:flex-start}
  .ty__book .btn{width:100%;text-align:center}
}