/*
 * Elementor markup'ı → Renaissance tasarımı köprüsü.
 *
 * İki iş yapar:
 *  1. Elementor Pro Form'un kendi markup'ını tasarımın .ct-* diline bağlar.
 *  2. Elementor container/widget yapısının, tasarımın beklediği DOM yerleşimini
 *     bozduğu yerleri düzeltir (dekoratif absolute katmanların kapsayıcısı vb.).
 *
 * Form widget'ı kendi markup'ını üretiyor (.elementor-field-group, .elementor-field…);
 * tasarım ise .ct-field / .ct-input / .ct-submit görünümünü bekliyor. Bu dosya
 * Elementor'un seçicilerine aynı görünümü verir — form WordPress'ten yönetilebilir
 * kalırken görünüm React sürümüyle aynı olur.
 *
 * ÖZGÜLLÜK NOTU: Elementor kendi form CSS'ini bu dosyadan SONRA yüklüyor ve
 * .elementor-field kurallarını eziyordu (girdiler beyaz kalıyordu). Bu yüzden
 * seçiciler .elementor-widget-form ile derinleştirildi ve görünümü belirleyen
 * özelliklerde !important kullanıldı. Burada risk yok: bu CSS yalnızca iletişim
 * formuna dokunuyor, React widget'larının inline animasyon stillerine değil.
 */

/* ── Dekoratif katmanların kapsayıcısı ──────────────────────────────────
 *
 * .ct-overlay ve .ct-grid `position:absolute; inset:0` ile tanımlı ve
 * orijinalde doğrudan `.ct`'nin çocukları oldukları için TÜM bölümü kaplıyorlar.
 * Elementor'da ise bir HTML widget'ının içindeler ve Elementor her widget'a
 * `position: relative` verdiği için katmanlar yalnızca o widget'ın kutusuna
 * hapsoluyordu: başlığın üstünde koyu bir dikdörtgen (bant) oluşuyordu.
 *
 * Widget'ın konumlandırmasını nötrleyince `inset:0` yeniden `.ct`'ye (relative)
 * göre çözülüyor ve overlay tüm bölümü kaplıyor. */
.ct > .elementor-widget-html {
  position: static;
}

/* Orijinalde içerik `.ct-inner` (position:relative; z-index:3) içinde durur ve
 * overlay (z-1) ile grid'in (z-2) ÜSTÜNDE kalır. Elementor yapısında `.ct-inner`
 * sarmalayıcısı yok; içeriği aynı katmana elle kaldırmazsak overlay onu da
 * örtüyor ve sayfa soluk görünüyordu. */
.ct .ct-head,
.ct .ct-layout {
  position: relative;
  z-index: 3;
}

/* ── Yerleşim: altın oran (Φ) ile rail + form ───────────────────────── */
.ct .ct-layout {
  display: grid;
  grid-template-columns: 1fr 1.618fr;
  gap: 64px;
  align-items: start;
}

/* Elementor container'ları grid hücrelerini bozmasın. */
.ct .ct-layout > .e-con,
.ct .ct-layout > .elementor-element {
  width: 100%;
  max-width: 100%;
}

/* ── Form ızgarası ──────────────────────────────────────────────────── */
/* Alanların gerçek kabı .elementor-form değil, içindeki fields-wrapper. */
.ct .elementor-widget-form .elementor-form-fields-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 24px;
}

/* Alan grubu: TEK SÜTUNLU GRID.
 *
 * flex-direction: column denendi ama Elementor'un kendi kuralları etiketi
 * girdinin soluna itmeye devam ediyordu. Tek sütunlu grid'de iki eleman
 * yan yana gelemez — etiket her koşulda girdinin üstünde kalır. */
.ct .elementor-widget-form .elementor-field-group {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: unset !important;
}

.ct .elementor-widget-form .elementor-field-group > * {
  grid-column: 1 !important;
  min-width: 0;
}

/* Konu, mesaj ve gönder iki sütunu birden kaplar. */
.ct .elementor-widget-form .elementor-field-type-textarea,
.ct .elementor-widget-form .elementor-field-type-submit,
.ct .elementor-widget-form .elementor-field-group.elementor-col-100 {
  grid-column: 1 / -1;
}

/* ── Etiketler ──────────────────────────────────────────────────────── */
.ct .elementor-widget-form .elementor-field-group > label,
.ct .elementor-widget-form .elementor-field-label {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--f-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim) !important;
}

/* ── Girdiler: cam yüzey + altın odak halkası ───────────────────────── */
.ct .elementor-widget-form .elementor-field-group .elementor-field,
.ct .elementor-widget-form .elementor-field-group .elementor-field-textual,
.ct .elementor-widget-form .elementor-field-group input[type='text'],
.ct .elementor-widget-form .elementor-field-group input[type='email'],
.ct .elementor-widget-form .elementor-field-group input[type='tel'],
.ct .elementor-widget-form .elementor-field-group select,
.ct .elementor-widget-form .elementor-field-group textarea {
  width: 100% !important;
  padding: 14px 16px !important;
  background: rgba(10, 17, 40, 0.55) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  font-family: var(--f-sans) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.ct .elementor-widget-form .elementor-field-group .elementor-field::placeholder,
.ct .elementor-widget-form .elementor-field-group textarea::placeholder {
  color: var(--text-dim) !important;
  opacity: 0.7;
}

.ct .elementor-widget-form .elementor-field-group .elementor-field:focus,
.ct .elementor-widget-form .elementor-field-group textarea:focus,
.ct .elementor-widget-form .elementor-field-group select:focus {
  outline: none !important;
  border-color: var(--gold-50) !important;
  box-shadow: 0 0 0 3px var(--gold-10) !important;
  background: rgba(10, 17, 40, 0.75) !important;
}

.ct .elementor-widget-form .elementor-field-group textarea {
  min-height: 160px !important;
  resize: vertical;
}

/* Açılır liste (select).
 *
 * Elementor <select>'i `.elementor-select-wrapper` adlı bir div'e sarıyor ve o
 * div DE `elementor-field` sınıfını taşıyor. Yukarıdaki cam kutu kuralı hem
 * sarmalayıcıya hem select'in kendisine uygulanınca iç içe İKİ kutu oluşuyor ve
 * alan gereksiz yere şişiyordu. Sarmalayıcıyı görünümden muaf tutuyoruz:
 * kutu yalnızca select'in kendisinde kalır. */
.ct .elementor-widget-form .elementor-field-group .elementor-select-wrapper {
  position: relative;
  display: block;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.ct .elementor-widget-form .elementor-field-group select {
  appearance: none !important;
  padding-right: 44px !important;
}

/* Elementor'un kendi ok ikonu: koyu zeminde görünmüyordu, altına alalım. */
.ct .elementor-widget-form .select-caret-down-wrapper {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
  color: var(--gold);
}

.ct .elementor-widget-form .select-caret-down-wrapper svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.ct .elementor-widget-form .elementor-field-group select option {
  background: var(--bg-2);
  color: var(--text);
}

/* ── Gönder düğmesi ─────────────────────────────────────────────────── */
.ct .elementor-widget-form .elementor-button {
  justify-self: start;
  width: auto !important;
  padding: 16px 44px !important;
  background: var(--gold) !important;
  color: var(--bg-2) !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--f-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.ct .elementor-widget-form .elementor-button:hover {
  background: #f3d193 !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px var(--gold-50);
}

/* ── Durum mesajları ────────────────────────────────────────────────── */
.ct .elementor-message {
  grid-column: 1 / -1;
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
}

.ct .elementor-message.elementor-message-success {
  color: var(--gold);
}

.ct .elementor-message.elementor-message-danger,
.ct .elementor-widget-form .elementor-field-group .elementor-error {
  color: #f08a8a;
}

.ct .elementor-widget-form .elementor-field-group.elementor-error .elementor-field {
  border-color: rgba(240, 138, 138, 0.6) !important;
}

/* ── Mobil ──────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .ct .ct-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 767px) {
  .ct .elementor-widget-form .elementor-form-fields-wrapper {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * PORTFOLYO SAYFASI
 *
 * Orijinal DOM: main.portfolio > [.portfolio-bg, .portfolio-overlay,
 * .portfolio-grid-bg] + .portfolio-inner > .portfolio-head + filtre/ızgara.
 *
 * Elementor'da dekoratif katmanlar bir HTML widget'ının içine giriyor ve
 * Elementor her widget'a `position: relative` verdiği için `inset:0` bölüme
 * değil widget kutusuna göre çözülüyor (iletişim sayfasındaki siyah bandın
 * aynısı). Widget'ın konumlandırmasını nötrleyerek katmanları .portfolio'ya
 * bağlıyoruz.
 * ═══════════════════════════════════════════════════════════════════════ */

.portfolio > .elementor-widget-html {
  position: static;
}

/* .portfolio-inner CSS'te zaten position:relative + z-index:3; Elementor
 * container'ının kendi flex ayarları tasarımın yerleşimini ezmesin. */
.portfolio > .portfolio-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* Başlık bloğu ve React ızgarası, overlay (z-1) ile grid-bg'nin üstünde kalmalı.
 * Izgaranın kendi sınıfı yok (Tailwind ile çiziliyor); widget kabını hedefliyoruz. */
.portfolio .portfolio-head,
.portfolio .ar-scope {
  position: relative;
  z-index: 3;
}

/* Elementor container/widget'ları ızgara genişliğini daraltmasın. */
.portfolio .portfolio-inner > .elementor-element {
  width: 100%;
  max-width: 100%;
}

/* Filtre çubuğu ↔ kart ızgarası arasındaki boşluk.
 *
 * PortfolioFilter, filtre çubuğu ile ızgarayı KARDEŞ olarak döndürüyor ve
 * orijinalde aralarındaki 48px, ikisini de doğrudan çocuk olarak tutan
 * .portfolio-inner'ın `gap`'inden geliyor. WordPress'te ikisi de widget kabının
 * (.ar-scope) içinde kaldığı için o gap aralarına uygulanmıyor, kartlar filtre
 * çubuğuna yapışıyordu. Kabı aynı flex düzenine sokuyoruz. */
.portfolio .ar-scope {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
}

/* Izgara, ortalanmış flex kolonunda içeriğe göre daralmasın. */
.portfolio .ar-scope > .grid {
  width: 100%;
}