/* Teklif formu — rehber sayfalarinda kullanilan paylasimli stil.
 *
 * NEDEN AYRI DOSYA: bu sitede CSS sayfa basina gomulu (AGENTS.md §7). Kural
 * bilincli, ama form alti dilde ayni ve gomulu tutulursa alti kopya olurdu;
 * biri duzeltilip digerleri unutulurdu. Paylasimli JS icin analytics.js zaten
 * emsal. Form da ayni gerekcyle paylasimli.
 *
 * KAYNAK: index.html icindeki "ENQUIRY FORM" blogu. Iki kopya var ve
 * DRIFT RISKI GERCEK — index.html'i degistirirsen buraya da bak.
 * index.html bilerek refactor EDILMEDI: build-i18n.js onu alti dile
 * uretiyor, ve o dosyaya dokunmak alti agacin tamamini yeniden uretmek
 * demek. Formun bir rehber sayfasinda ise yarayip yaramadigi olculmeden
 * o riski almanin anlami yok. Olcum sonucu iyiyse birlestirilir.
 *
 * TOKEN NOTU: rehber sayfalarinin :root'u index.html'inkinden dar. Asagidaki
 * dort token orada TANIMSIZ; degerler index.html'den birebir kopyalandi.
 */
:root {
  --sepia: #6b4f3f;        /* form etiketi */
  --danger-ink: #7d2f26;   /* hata metni */
  --danger: #a33b30;       /* hata noktasi */
  --focus: var(--cognac-ink);
  --s-base: 1rem; --s-md: 1.5rem; --s-lg: 2rem;
}

/* Formu saran blok — rehber sayfasinin .cta'sinin yerini alir. */
.enq-block { margin: 3.5rem 0 0; padding: 2.4rem 0 0; border-top: 1px solid var(--line-l); }
.enq-block > h2 { margin: 0 0 0.5rem; }
.enq-block .enq-sub { color: var(--stone); font-size: var(--t-sm); margin: 0; }
.enq-block .enq { margin-top: 2.4rem; }

/* index.html'de var, rehber sayfalarinda yok. */
.label { font-family: var(--sans); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase; }
.enq button[type="submit"]:disabled { opacity: 0.5; cursor: wait; }
.enq button[type="submit"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.enq {
  margin: 3.6rem auto 0; max-width: 760px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem var(--s-lg);
  text-align: left;
}
.f-field { display: flex; flex-direction: column; gap: 0.6rem; }
.f-hint { font-size: var(--t-xs); line-height: 1.5; color: var(--stone); margin: -0.15rem 0 0; }
/* Form etiketleri cumle duzeninde. Caps + harf araligi burada okumayi
   zorlastiriyordu; bolum basliklarinda kalabilir, formda kalmamali. */
/* 13 Eylul 2026: font-weight 500 -> 600. Manrope 500 sitede SADECE bu
   kural icin yukleniyordu — metnin %0,7'si, 24,3 KB. Manrope 600 zaten
   yuklu. Genislik farki olculdu: "ESTIMATED QUANTITY" 153,2px -> 154,94px,
   yani %1,1. Etiketler kucuk ve cumle duzeninde; fark gorunmuyor. */
.f-field .label { color: var(--sepia); text-transform: none; letter-spacing: 0;
  font-size: var(--t-sm); font-weight: 600; }
.enq input, .enq select, .enq textarea {
  font-family: var(--sans); font-size: var(--t-base); color: var(--espresso);
  background: transparent; border: 1px solid var(--line-l); border-radius: 0;
  padding: 0.85rem var(--s-base); transition: border-color 0.3s; width: 100%;
}
.enq input:focus, .enq select:focus, .enq textarea:focus { outline: none; border-color: var(--cognac); }
.enq input:focus-visible, .enq select:focus-visible, .enq textarea:focus-visible {
  border-color: var(--cognac-ink); box-shadow: 0 0 0 3px rgba(183, 101, 66, 0.18);
}
.enq select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23b76542'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center;
}
.enq textarea { resize: vertical; min-height: 120px; }
.f-wide { grid-column: 1 / -1; }
.f-submit { display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; }
.f-submit .btn { cursor: pointer; font-family: var(--sans); }
.f-status {
  display: none; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1.1rem; letter-spacing: 0.12em;
  border: 1px solid var(--line-l); color: var(--stone);
  background: rgba(255,255,255,0.4);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.f-status.is-visible { display: inline-flex; opacity: 1; transform: none; }
.f-status::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--stone); flex: 0 0 auto;
}
/* sending — muted, pulsing */
.f-status.sending::before { animation: pulseDot 1.1s ease-in-out infinite; }
@keyframes pulseDot { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
/* success — brand cognac */
.f-status.ok { color: var(--espresso); border-color: rgba(183, 101, 66,0.45); background: rgba(183, 101, 66,0.07); }
.f-status.ok::before { background: var(--cognac); }
/* error — muted brick, still on-brand */
.f-status.error { color: var(--danger-ink); border-color: rgba(125,47,38,0.4); background: rgba(125,47,38,0.06); }
.f-status.error::before { background: var(--danger); }
@media (prefers-reduced-motion: reduce) {
  .f-status { transition: none; }
  .f-status.sending::before { animation: none; }
}
/* field-level feedback */
.enq input:user-invalid, .enq textarea:user-invalid { border-color: rgba(125,47,38,0.55); }
.enq input:user-valid, .enq textarea:user-valid { border-color: rgba(183, 101, 66,0.4); }

/* form fades out when the enquiry lands */
.enq.is-sent { opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.45s ease, transform 0.45s ease; }

/* thank-you card that takes its place */
.enq-thanks {
  max-width: 760px; margin: 3.6rem auto 0;
  border: 1px solid var(--line-l); background: rgba(183, 101, 66,0.045);
  padding: 3.2rem 2.4rem; text-align: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.enq-thanks[hidden] { display: none; }
.enq-thanks.is-visible { opacity: 1; transform: none; }
.enq-thanks-mark { display: block; margin: 0 auto var(--s-md); }
.enq-thanks-title {
  font-family: var(--serif); font-weight: 600;
  font-size: var(--t-xl); color: var(--espresso);
  margin-bottom: 0.9rem; letter-spacing: 0.004em;
}
.enq-thanks-body { color: var(--umber); font-size: var(--t-base); line-height: 1.8; max-width: 46ch; margin: 0 auto 1.9rem; }
.enq-thanks-again {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cognac-ink); background: none; border: none;
  border-bottom: 1px solid rgba(183, 101, 66,0.45);
  padding: 0 0 0.3rem; cursor: pointer; transition: color 0.3s, border-color 0.3s;
}
.enq-thanks-again:hover, .enq-thanks-again:active { color: var(--espresso); border-color: var(--espresso); }
.enq-thanks-again:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .enq.is-sent, .enq-thanks { transition: none; }
}
@media (max-width: 640px) { .enq { grid-template-columns: 1fr; } }

/* ── DOGRUDAN TEMAS SATIRI ───────────────────────────────
 * NEDEN VAR: 4 Eylul'de form butun rehberlere konurken rehberlerdeki
 * /#contact baglantilari #enq'e cevrildi. Boylece rehberi okuyanin ana
 * sayfadaki e-posta/WhatsApp bloguna giden yolu kalmadi — form kanali
 * degistirmemeliydi, eklemeliydi. Bu satir o yolu geri koyuyor.
 * Olcum: 9 Eylul, GSC son 7 gun 1.370 gosterim / 20 tik, form 8 gundur sessiz.
 *
 * .btn KULLANILMIYOR: rehber sayfalari .btn'i dolu konyak buton olarak
 * tanimliyor, index.html ise bos cerceve. Ayni isim iki farkli sey demek;
 * carpismasin diye bu satirin kendi sinifi var.
 */
.enq-direct-or {
  margin: 2.6rem 0 0; text-align: center; color: var(--stone);
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
}
.enq-direct {
  margin-top: 1.4rem; display: flex; gap: 1rem;
  justify-content: center; flex-wrap: wrap;
}
.enq-direct a {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 1rem 1.9rem; text-decoration: none;
  color: var(--espresso); background: transparent;
  border: 1px solid var(--line-l);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.enq-direct a:hover, .enq-direct a:active {
  border-color: var(--cognac); color: var(--cognac-ink);
}
.enq-direct a:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
@media (max-width: 520px) {
  .enq-direct { flex-direction: column; }
  .enq-direct a { text-align: center; }
}