/* ============================================================================
   HOMI — Elementor widget'ları için ek stiller (CTA, buton) + editör uyumu.
   Diğer görünümler mevcut hero/process/sections/intro CSS'lerinden gelir.
   Renkler tokens.css değişkenlerinden → dark/light uyumlu.
   ==========================================================================*/

/* Ortak buton (CTA + hero widget) */
.homi-btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--accent, #f0c479);
  color: var(--on-accent, #0b0f26);
  background: var(--accent, #f0c479);
  transition: transform .3s var(--ease, ease), filter .3s var(--ease, ease);
}
.homi-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* ── CTA widget ─────────────────────────────────────────────────────── */
.homi-cta {
  padding: clamp(48px, 8vw, 110px) clamp(20px, 5vw, 60px);
  text-align: center;
}
.homi-cta__inner { max-width: 720px; margin: 0 auto; }
.homi-cta__title {
  font-family: var(--font-head, Georgia, serif);
  font-size: clamp(1.5rem, 5.5vw, 3.2rem);   /* mobil-önce akışkan */
  line-height: 1.12;
  margin: 0 0 .5em;
}
.homi-cta__text {
  font-size: var(--step-1, 1.15rem);
  line-height: 1.6;
  margin: 0 0 1.6em;
  opacity: .85;
}
.homi-cta__btn { margin-top: .4em; }

/* Renk şeritleri */
.homi-cta--accent  { background: var(--accent, #f0c479); color: var(--on-accent, #0b0f26); }
.homi-cta--accent .homi-btn { background: var(--navy, #0b0f26); color: #fff; border-color: var(--navy, #0b0f26); }
.homi-cta--navy    { background: var(--navy, #0b0f26); color: var(--ink, #f1eee6); }
.homi-cta--surface { background: var(--surface, #fff); color: var(--text, #20243a); border-top: 1px solid var(--border, rgba(0,0,0,.1)); border-bottom: 1px solid var(--border, rgba(0,0,0,.1)); }

/* ── Elementor tam-ekran + güvenilir pin (Hero & Süreç) ──────────────────
   SORUN: .hero__stage / .proc__stage `position: sticky` ile pinlenir. Elementor
   bir üst öğeye (section/column/container) `overflow:hidden` ya da `transform`
   koyarsa (arka plan bindirmesi, hareket efekti, hover) HEM sticky pin KIRILIR
   (bölüm 340vh boyunca sabitlenmez → "düzgün görünmez") HEM de tam-genişlik
   taşması KIRPILIR (→ "full screen olmaz"). ÇÖZÜM: hero/süreç'i saran Elementor
   öğelerini :has() ile nötrle (kırpma/transform yok) + sağlam full-bleed. */

/* 1) Saran Elementor öğeleri sticky'yi ve taşmayı BOZMASIN. */
.elementor-element:has(> .elementor-widget-container > .hero),
.elementor-element:has(> .elementor-widget-container > .proc),
.e-con:has(> .e-con-inner > .elementor-widget-homi-hero),
.e-con:has(> .e-con-inner > .elementor-widget-homi-process),
.e-con:has(.elementor-widget-homi-hero),
.e-con:has(.elementor-widget-homi-process),
.elementor-column:has(.elementor-widget-homi-hero),
.elementor-column:has(.elementor-widget-homi-process),
.elementor-section:has(.elementor-widget-homi-hero),
.elementor-section:has(.elementor-widget-homi-process) {
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

/* 2) Widget kabı da kırpmasın / genişlik sınırlamasın. */
.elementor-widget-homi-hero,
.elementor-widget-homi-process,
.elementor-widget-homi-hero > .elementor-widget-container,
.elementor-widget-homi-process > .elementor-widget-container {
  overflow: visible !important;
  width: auto;
  max-width: none;
  padding: 0;
}

/* 3) Full-bleed: kap ne kadar dar olursa olsun tam viewport genişliği.
      (.hero'ya transform VERİLMEZ — sticky çocuğu bozardı; margin ile taşınır.) */
.elementor-widget-homi-hero .hero,
.elementor-widget-homi-process .proc {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.elementor-widget-homi-hero .hero__stage,
.elementor-widget-homi-process .proc__stage { width: 100%; }

/* ÜSTTEKİ BOŞLUK: full-ekran bloğu (Hero/Süreç) saran Elementor container'ının
   DOĞRUDAN dikey padding'ini sıfırla → blok gerçekten en üstten başlar, üstte
   saçma boşluk kalmaz. Sadece bloğu doğrudan barındıran kabı etkiler. */
.e-con:has( > .elementor-widget-homi-hero ),
.e-con:has( > .elementor-widget-homi-process ),
.e-con > .e-con-inner:has( > .elementor-widget-homi-hero ),
.e-con > .e-con-inner:has( > .elementor-widget-homi-process ),
.elementor-widget-wrap:has( > .elementor-widget-homi-hero ),
.elementor-widget-wrap:has( > .elementor-widget-homi-process ) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Widget'ın kendi kabı da tamamen padding'siz. */
.elementor-widget-homi-hero > .elementor-widget-container,
.elementor-widget-homi-process > .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}
/* Hero/Süreç bölümü kendisi de üstten/alttan margin taşımasın. */
.elementor-widget-homi-hero .hero,
.elementor-widget-homi-process .proc { margin-top: 0; margin-bottom: 0; }

/* Editörde aşırı yükseklik kabı taşmasını engelle (önizleme netliği). */
.elementor-editor-active .elementor-widget-homi-hero .hero__track,
.elementor-editor-active .elementor-widget-homi-process .proc__track { height: 180vh; }

/* ── İçerik blokları: ŞEFFAF arka plan ───────────────────────────────────
   Lacivert (sistem-koyu) zorlaması kaldırıldı. Artık arka planı Elementor
   Bölüm/Container arka planından (siyah/beyaz/istediğiniz) VEYA bloğun Stil
   sekmesindeki "Blok arka planı" kontrolünden yönetirsiniz. Metin renkleri de
   her bloğun Stil sekmesinden ayarlanır. */
.elementor-widget-homi-stats .stats,
.elementor-widget-homi-text .intro,
.elementor-widget-homi-heading .sec-head,
.elementor-widget-homi-projects .projects__grid,
.elementor-widget-homi-projects .card,
.elementor-widget-homi-team .team__grid,
.elementor-widget-homi-team .member,
.elementor-widget-homi-cta .homi-cta,
.elementor-widget-homi-projects .hpro {
  background: transparent;
}

/* Yatay kayan projeler (hpro): tam-genişlik + sticky pin — Hero/Süreç gibi. */
.elementor-widget-homi-projects:has( .hpro ) {
  overflow: visible !important;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.elementor-element:has( > .elementor-widget-container > .hpro ),
.e-con:has( .elementor-widget-homi-projects ),
.elementor-column:has( .elementor-widget-homi-projects ),
.elementor-section:has( .elementor-widget-homi-projects ) {
  overflow: visible !important;
  transform: none !important;
}
.elementor-widget-homi-projects .hpro { position: relative; width: 100%; max-width: none; }

/* Scroll Banner tam-genişlik: üst öğeler kırpmasın. */
.elementor-widget-homi-frameband.homi-fb-full-yes,
.e-con:has( .homi-fb-full-yes ),
.elementor-column:has( .homi-fb-full-yes ),
.elementor-section:has( .homi-fb-full-yes ) { overflow: visible !important; }

/* ── Marka fontu: FUTURA (bold başlıklar) — tüm HOMI bloklarında ──────────
   Not: Elementor'un blok-bazlı Tipografi kontrolü bunu ezebilir (daha özgül),
   yani istisna gerekirse blok bazında değiştirebilirsiniz. */
[class*="elementor-widget-homi-"] { font-family: var( --font-brand ); }
[class*="elementor-widget-homi-"] h1,
[class*="elementor-widget-homi-"] h2,
[class*="elementor-widget-homi-"] h3,
[class*="elementor-widget-homi-"] .hero__title,
[class*="elementor-widget-homi-"] .hero__wordmark,
[class*="elementor-widget-homi-"] .sec-title,
[class*="elementor-widget-homi-"] .intro__big,
[class*="elementor-widget-homi-"] .homi-cta__title,
[class*="elementor-widget-homi-"] .homi-frameband__text > *,
[class*="elementor-widget-homi-"] .stat b {
  font-family: var( --font-brand );
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — tüm HOMI bloklarının mobil/tablet optimizasyonu
   (Yatay taşma engeli · tipografi ölçekleme · pinli bölümler · banner ·
   yatay projeler. Elementor'un blok-bazlı kontrolleri gerekirse ezebilir.)
   ═══════════════════════════════════════════════════════════════════════ */

/* Hiçbir HOMI bloğu kabından/viewport'tan taşmasın. */
[class*="elementor-widget-homi-"] { max-width: 100%; }
[class*="elementor-widget-homi-"] img,
[class*="elementor-widget-homi-"] canvas { max-width: 100%; }

/* NOT: Yazı BOYUTLARI artık temel akışkan clamp() değerleriyle (mobil-önce) VE
   Elementor'un blok-bazlı Tipografi kontrolleriyle yönetilir. Burada media-query
   ile font-size EZİLMEZ → böylece her bloğun yazı boyutu serbestçe ayarlanabilir.
   Aşağıda yalnızca DÜZEN / BOŞLUK / taşma ayarları var. */
@media (max-width: 767px) {
  .elementor-widget-homi-process .proc__stage { padding: 56px 14px 20px; }
  .elementor-widget-homi-cta .homi-cta { padding: 44px 18px; }
  .elementor-widget-homi-frameband .homi-frameband { min-height: 230px; }
  .elementor-widget-homi-frameband .homi-frameband__text { padding: 18px; }
  .elementor-widget-homi-projects .hpro.is-touch .hpro__block { width: 86vw; }
  .elementor-widget-homi-projects .hpro__block img { height: 48vh; }
  .elementor-widget-homi-projects .card__body { padding: 14px 16px; }
  .elementor-widget-homi-stats .stats__row { gap: 12px; }
}
@media (max-width: 480px) {
  .elementor-widget-homi-process .proc__stage { padding: 50px 10px 16px; }
}
/* Proje kartları: ince kenarlık (okunurluk). */
.elementor-widget-homi-projects .card { border: 1px solid var(--border, rgba(128,128,128,.18)); }

/* Projeler başlığı — SOLA YASLI, carousel/ızgaranın başında. */
.homi-projects-head { text-align: left; margin: 0 0 clamp(18px, 3vw, 38px); }
.homi-projects-head .sec-eyebrow { display: block; margin: 0 0 .5em; }
.homi-projects-head .sec-title { margin: 0; }
/* Yatay modda header stage'in İÇİNDE — stage padding'i hizalar, gap boşluğu
   verir; ekstra alt-boşluk YOK (fotoların hemen üstünde durur). */
.hpro__stage .homi-projects-head { margin: 0; }

/* Ekip: KART KUTUSU YOK — sade avatar + isim + görev (arka plan/kenarlık/oval
   köşe/gölge/hover-yükselme kaldırıldı). */
.elementor-widget-homi-team .member,
.elementor-widget-homi-team .member:hover {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0;
  transform: none !important;
}