/* ==========================================================================
   Contact sayfası — sections.css'in üzerine biner
   Brief: "calm and spacious; it must look like an invitation rather than a
   form page. Cream background, generous spacing, large serif headings."
   ========================================================================== */

.contact-page{
  /* Sitenin tüm açık tonları mavi kaçıyor (#F8F9FA, #E6E9ED). Brief krem
     istiyor; "bej" değil "sıcak kâğıt" tonu seçildi. Beğenilmezse tek
     satır: #FAF8F4 -> #F8F9FA yapıp geri al. */
  --ct-cream:#FAF8F4;
  --ct-field:#FFFFFF;
  --ct-border:rgba(5,36,79,.22);
  --ct-border-strong:rgba(5,36,79,.38);
}
.sc-band--cream{background:var(--ct-cream)}

/* ---------- 1. açılış ----------------------------------------------------- */
.ct-open{padding-block:clamp(52px,5vw,104px)}
.ct-open h1{font-family:var(--cormorant);font-weight:600;color:var(--sc-ink);
  font-size:clamp(32px,3.6vw,68px);line-height:1.04;margin:0 0 clamp(14px,1.2vw,22px);
  max-width:22ch;text-wrap:balance}
.ct-open__sub{font-family:var(--caslon);color:var(--sc-muted);
  font-size:clamp(16px,1.35vw,26px);line-height:1.35;margin:0;max-width:52ch}

/* ---------- 2. yönlendirme kartları --------------------------------------
   İki radio + iki <label>. :checked ~ kardeş seçicileriyle hem kart görünümü
   hem form alanları hem de "first call" 4. maddesi değişiyor — JS yok.       */
/* position:fixed — absolute olsaydı radio sayfanın en üstünde konumlanır ve
   karta tıklayınca tarayıcı onu görünüme kaydırıp sayfayı başa zıplatırdı.
   fixed her zaman viewport içinde sayıldığı için kaydırma olmuyor.
   display:none DEĞİL — klavye erişimi kaybolmasın. */
.ct-switch{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;margin:0;
  pointer-events:none}
.ct-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.6vw,30px);
  margin-top:clamp(26px,2.4vw,46px)}
.ct-card{position:relative;display:flex;flex-direction:column;
  background:var(--ct-field);border:1px solid var(--ct-border);
  padding:clamp(20px,1.9vw,36px);transition:border-color .18s ease,transform .18s ease}
.ct-card:hover{border-color:var(--sc-red);transform:translateY(-2px)}
/* <label> sadece başlığı sarıyor (geçerli HTML); ::after ile tıklama alanı
   tüm karta yayılıyor. Radio'nun erişilebilir adı da böylece sadece başlık. */
.ct-card label{cursor:pointer}
.ct-card label::after{content:"";position:absolute;inset:0}
.ct-card h2{font-family:var(--cormorant);font-weight:700;color:var(--sc-ink);
  font-size:clamp(19px,1.66vw,32px);line-height:1.15;margin:0 0 10px}
.ct-card p{font-family:var(--caslon);color:var(--sc-muted);
  font-size:clamp(15px,1.04vw,20px);line-height:1.35;margin:0 0 clamp(14px,1.2vw,22px)}
.ct-card .go{font-family:var(--isans);font-weight:700;font-size:clamp(13px,.83vw,15px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--sc-red-text);margin-top:auto}
/* seçili kart — kartlar radio'ların doğrudan kardeşi değil, bir <section>
   içindeler; bu yüzden "~ *" (sonraki kardeşin torunu) kullanılıyor. */
#ct-for-families:checked ~ * .ct-card--fam,
#ct-for-schools:checked  ~ * .ct-card--sch{
  border-color:var(--sc-red);box-shadow:inset 3px 0 0 var(--sc-red)}
/* klavyeyle radio'ya odaklanınca kartın kendisi belli olsun */
#ct-for-families:focus-visible ~ * .ct-card--fam,
#ct-for-schools:focus-visible  ~ * .ct-card--sch{outline:2px solid var(--sc-red);outline-offset:3px}

/* Profil bazlı gösterim — artık yalnızca metin parçaları için (ct-firstcall
   maddeleri); form alanları enquiry bileşeninin kendi adım mantığına taşındı.
   Kural: display YALNIZCA gizlemek için yazılır, geri yazılmaz — display:revert
   gizlenen maddenin kendi düzenini bozar. */
#ct-for-families:checked ~ * .ct-only-sch{display:none}
#ct-for-schools:checked  ~ * .ct-only-fam{display:none}

/* ---------- 3-5. iletişim / booking / yanıt süresi ------------------------ */
.ct-reach{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2vw,40px);
  margin-top:clamp(22px,2vw,38px)}
.ct-reach h3{font-family:var(--isans);font-weight:700;color:var(--sc-ink);
  font-size:clamp(13px,.83vw,15px);letter-spacing:.14em;text-transform:uppercase;
  line-height:1.2;margin:0 0 10px}
.ct-reach p,.ct-reach a{font-family:var(--caslon);color:var(--sc-ink);
  font-size:clamp(15px,1.15vw,22px);line-height:1.35;margin:0}
/* Dokunma hedefi (denetim B4): satır içi bağlantı olarak 20px kalıyordu.
   min-height ile 44px'e çıkarıldı — padding yerine min-height, çünkü punto
   clamp'li: padding her ekranda farklı yükseklik verirdi, min-height hepsinde
   tam 44px veriyor. Alt çizgi ::after'a taşındı ve satır kutusunun altına
   sabitlendi (50% + yarım satır yüksekliği = .675em), yoksa border dikey
   ortalanan metinden kopardı. Negatif margin-block, büyüyen kutunun satır
   yüksekliğini geri alıyor: hedef 44px, ama üstündeki başlıkla arası
   eskisiyle aynı kalıyor — düzen hiç kaymıyor. */
.ct-reach a{position:relative;display:inline-flex;align-items:center;min-height:44px;
  margin-block:-12px;transition:color .18s ease}
.ct-reach a::after{content:"";position:absolute;left:0;right:0;top:calc(50% + .675em);
  height:1px;background:var(--ct-border);transition:background .18s ease}
.ct-reach a:hover{color:var(--sc-red-text)}
.ct-reach a:hover::after{background:var(--sc-red)}

.ct-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:var(--ct-field);border:1px solid var(--ct-border)}
.ct-book__text h3{font-family:var(--cormorant);font-weight:700;color:var(--sc-ink);
  font-size:clamp(19px,1.66vw,32px);line-height:1.15;margin:0 0 8px}
.ct-book__text p{font-family:var(--caslon);color:var(--sc-muted);
  font-size:clamp(15px,1.09vw,21px);line-height:1.35;margin:0}
.ct-response{font-family:var(--caslon);color:var(--sc-ink);
  font-size:clamp(15px,1.25vw,24px);line-height:1.4;margin:clamp(20px,1.8vw,34px) 0 0;
  padding-inline-start:clamp(14px,1.2vw,22px);border-inline-start:3px solid var(--sc-red)}

/* ---------- form ---------------------------------------------------------- */
/* Enquiry formu bu dosyada DEĞİL. Tek bileşen iki yerde çalışıyor (header'daki
   ENQUIRE paneli + bu sayfanın ortası); işaretleme includes/enquiry-form.php,
   stil assets/css/enquiry.css. Şartname: proje dışı panache-belgeler/enquiry.pdf, bölüm 01-06. */

/* ---------- 6. ilk görüşmede ne olur -------------------------------------- */
.ct-firstcall{list-style:none;margin:clamp(22px,2vw,38px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.2vw,22px) clamp(24px,2.4vw,46px)}
.ct-firstcall li{position:relative;font-family:var(--caslon);color:var(--sc-ink);
  font-size:clamp(15px,1.15vw,22px);line-height:1.35;padding-inline-start:1.5em}
.ct-firstcall li::before{content:"";position:absolute;left:0;top:.62em;
  width:14px;height:1px;background:var(--sc-red)}

/* ---------- 7. SSS akordiyonu (native <details>, JS yok) ------------------ */
.ct-faq{margin-top:clamp(22px,2vw,38px)}
.ct-faq details{border-top:1px solid var(--sc-hair)}
.ct-faq details:last-of-type{border-bottom:1px solid var(--sc-hair)}
.ct-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  cursor:pointer;list-style:none;min-height:44px;
  padding:clamp(15px,1.3vw,24px) 0;
  font-family:var(--cormorant);font-weight:700;color:var(--sc-ink);
  font-size:clamp(17px,1.35vw,26px);line-height:1.25}
.ct-faq summary::-webkit-details-marker{display:none}
.ct-faq summary::marker{content:""}
.ct-faq summary:hover{color:var(--sc-red-text)}
.ct-faq summary svg{flex:0 0 auto;width:14px;height:auto;stroke:var(--sc-red);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.ct-faq details[open] summary svg{transform:rotate(180deg)}
.ct-faq details p{font-family:var(--caslon);color:var(--sc-muted);
  font-size:clamp(15px,1.09vw,21px);line-height:1.45;margin:0 0 clamp(16px,1.4vw,26px);max-width:78ch}

/* ---------- 8. anket köprüsü ---------------------------------------------- */
.ct-bridge{background:var(--sc-dark);color:#fff}
.ct-bridge__inner{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(18px,2vw,40px);flex-wrap:wrap}
.ct-bridge h2{font-family:var(--cormorant);font-weight:700;color:#fff;
  font-size:clamp(21px,1.87vw,36px);line-height:1.15;margin:0 0 8px}
.ct-bridge p{font-family:var(--caslon);color:#C6D2E2;
  font-size:clamp(15px,1.09vw,21px);line-height:1.35;margin:0;max-width:60ch}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width:900px){
  .ct-cards{grid-template-columns:1fr}
  .ct-reach{grid-template-columns:1fr;gap:22px}
  .ct-firstcall{grid-template-columns:1fr}
  .ct-book,.ct-bridge__inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .ct-open h1{max-width:none}
}