/* ============================================================
   UDW Tema Katmanı — "Kirli Beyaz / Krem + Gold" (light theme)
   Anasayfa (index / index-en)
   ------------------------------------------------------------
   Amaç: her yeri siyah olan görünümü, logo gold tonlarıyla
   uyumlu, sıcak kremimsi ve zarif bir temaya çevirmek.

   Yaklaşım:
   - İçerik bölümleri  -> krem zemin, espresso metin, gold vurgu
   - Marka/logo/kurucu/proje/footer bölümleri -> espresso koyu
     (gold logolar ve gold yazılar koyu üstünde parlar)
   - Hero -> sinematik koyu kalır, altı kreme yumuşak geçer

   BU DOSYA EN SON YÜKLENMELİDİR (main.css + udw-hero.css'ten sonra).

   Kolay ayar noktaları hepsi aşağıdaki :root değişkenlerinde.
   Bir bölümü krem<->koyu arasında değiştirmek için sadece 4. ya da
   5. bloktaki ilgili seçiciyi taşıman yeterli.
   ============================================================ */

:root {
  /* --- Palet --- */
  --udw-cream:        #F6F1E7;  /* ana zemin — sıcak kirli beyaz */
  --udw-cream-2:      #FBF8F1;  /* daha açık krem (kart/alternatif) */
  --udw-sand:         #EFE7D3;  /* yumuşak kum tonu */
  --udw-espresso:     #221E19;  /* koyu vurgu bölümleri (siyah değil, sıcak koyu) */
  --udw-ink:          #2A2622;  /* krem üstü ana metin (espresso mürekkep) */
  --udw-ink-soft:     #6B6157;  /* krem üstü ikincil metin (ılık gri) */
  --udw-gold:         #BEA160;  /* logo/hero gold — tek vurgu tonu */
  --udw-gold-deep:    #A6884A;  /* hover gold */
  --udw-on-dark:      #F4EEE1;  /* koyu bölümlerdeki metin (ılık beyaz) */
  --udw-border:       rgba(42, 38, 34, 0.14);   /* krem üstü ince çizgi */
  --udw-border-dark:  rgba(244, 238, 225, 0.14);/* koyu üstü ince çizgi */

  /* --- Şablonun karışmış değişkenlerini düzelt + gold'u birleştir --- */
  --tp-common-white: #F4EEE1;   /* koyu bölüm metni (eskiden yanlışlıkla gold idi) */
  --tp-common-cream: #BEA160;   /* footer başlık/mail/dev yazı + reveal → logo gold */
  --tp-theme-primary: #BEA160;  /* tüm site vurgu tonu = logo gold */
}

/* ============================================================
   1) GENEL — sayfa zemini krem, temel metin espresso
   ============================================================ */
.aleric-dark body,
body {
  background-color: var(--udw-cream) !important;
}

/* ============================================================
   2) HERO — sinematik koyu kalır; alt kenar kreme yumuşak geçer
      (video, altındaki krem sayfaya erir)
   ============================================================ */
.udw-hero-banner::after {
  background: linear-gradient(
    to bottom,
    rgba(246, 241, 231, 0) 0%,
    var(--udw-cream) 100%
  ) !important;
}

/* ============================================================
   3) HEADER — sabit (sticky) durumda sıcak espresso, hafif blur
      (logo ve menü metni açık kalır)
   ============================================================ */
.header-sticky.sticky-black-bg {
  background: rgba(28, 24, 20, 0.85) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ============================================================
   4) KREM BÖLÜMLER — zemin krem, metin espresso, vurgu gold
      (showcase / hakkımızda / hizmetler / instagram)
   ============================================================ */
.udw-scroll-showcase-area,
#section-about,
#section-services,
#section-instagram {
  background-color: var(--udw-cream) !important;
  color: var(--udw-ink);
}

/* Bu bölümlerdeki tüm metni espresso yap (koyu-tema beyaz metnini bastırır).
   :where() düşük özgüllükte tutulur ki gold vurgular kolayca üste çıksın. */
#section-about :where(h1, h2, h3, h4, h5, h6, p, span, a, li, em, i, strong, label, div),
#section-services :where(h1, h2, h3, h4, h5, h6, p, span, a, li, em, i, strong, label, div),
#section-instagram :where(h1, h2, h3, h4, h5, h6, p, span, a, li, em, i, strong, label, div) {
  color: var(--udw-ink) !important;
}

/* İkincil (tanıtım) paragrafları biraz daha yumuşak */
#section-about .udw-about-agency-intro p,
#section-about .udw-about-agency-desc p {
  color: var(--udw-ink-soft) !important;
}

/* Gold vurgu: instagram kullanıcı adı.
   ("Merkezinde" kelimesi artık siyah; yalnızca altındaki çizgi gold kalır.) */
#section-instagram .al-insta-pg-title span a {
  color: var(--udw-gold) !important;
}

/* "Merkezinde" altındaki çizgi -> gold */
#section-about .udw-about-headline-highlight-line {
  background-color: var(--udw-gold) !important;
}

/* Krem bölümlerdeki ince kenarlıkları koyulaştır (koyu-tema için saydamdı) */
#section-about [class*="border"],
#section-services [class*="border"],
#section-instagram [class*="border"] {
  border-color: var(--udw-border) !important;
}

/* Hizmetler item düzeni: içerik taşmasını engelle.
   Şablonda item sabit 615px yükseklikte ve görsel %100 + margin olduğundan
   başlık/açıklama item kutusunun altına taşıp bir sonraki (koyu) bölümün
   üstüne biniyordu -> item yüksekliği otomatik, görsele sabit yükseklik. */
#section-services .al-project-pg-item {
  height: auto !important;
}
#section-services .al-project-pg-thumb {
  height: 600px !important;
  margin-bottom: 24px;
}
@media (max-width: 767px) {
  #section-services .al-project-pg-thumb {
    height: 420px !important;
  }
}
/* Servis başlığı espresso (net), açıklama yumuşak espresso */
#section-services .al-project-pg-title {
  color: var(--udw-ink) !important;
}
#section-services .al-project-pg-desc {
  color: var(--udw-ink-soft) !important;
}

/* ============================================================
   4b) PROJELER bölümü — koyu yerine KREM
       (bölüm koyu tasarlandığı için tüm metinleri espresso'ya çevir;
        aksi halde krem üstünde kaybolurlar)
   ============================================================ */
#section-projects {
  background-color: var(--udw-cream) !important;
}

/* "PROJELERİMİZ" başlığı + alt açıklama (invert-reveal metni) -> espresso.
   İki yarısı da espresso yapılır ki hangi animasyon anında olursa olsun okunsun. */
#section-projects .tp_text_invert.invert-black-7 > div {
  background-image: linear-gradient(
    to right,
    var(--udw-ink) 50%,
    var(--udw-ink) 50%
  ) !important;
}

/* Üst-etiket pill "İŞ BİRLİKLERİMİZ" -> espresso metin + gold çerçeve */
#section-projects .al-section-pg-subtitle {
  color: var(--udw-ink) !important;
  border-color: var(--udw-gold) !important;
}

/* Proje satırı başlıkları (aktif/pasif iki durum da) -> espresso serif */
#section-projects .al-project-pg-2-title,
#section-projects .al-project-pg-2-item.active .al-project-pg-2-title {
  color: var(--udw-ink) !important;
}

/* Satır açıklamaları -> yumuşak espresso */
#section-projects .al-project-pg-2-title-box > span,
#section-projects .al-project-pg-2-item.active .al-project-pg-2-title-box > span {
  color: var(--udw-ink-soft) !important;
}

/* Yıl etiketi (2025) -> koyu gold (krem üstünde kontrast) */
#section-projects .al-project-pg-2-year span,
#section-projects .al-project-pg-2-item.active .al-project-pg-2-year span {
  color: var(--udw-gold-deep) !important;
  border-color: var(--udw-gold-deep) !important;
}

/* Ok işareti -> gold */
#section-projects .al-project-pg-2-link span,
#section-projects .al-project-pg-2-item.active .al-project-pg-2-link span {
  color: var(--udw-gold) !important;
}

/* Satır ayraç çizgileri -> krem üstünde koyu ince çizgi */
#section-projects .al-project-pg-2-item,
#section-projects .al-project-pg-2-item:first-child {
  border-color: var(--udw-border) !important;
}

/* ============================================================
   5) KOYU (ESPRESSO) VURGU BÖLÜMLER
      (referanslar / kurucu / text-slider / footer / copyright)
      Metin zaten açık (--tp-common-white) + gold; sadece zemini sıcaklaştır.
   ============================================================ */
#section-clients,
.aleric-dark .black-bg-6,
.al-about-pg-area.black-bg-6,
.al-footer-pg-area,
.al-copyright-pg-area {
  background-color: var(--udw-espresso) !important;
}

/* Koyu bölüm üst-etiketi (pill): gold metin + gold çerçeve zaten uygulanıyor
   (--tp-common-cream). ::before/::after'ları saydam bırak ki pill'in içi
   gold dolmasın ve metin okunur kalsın. */
.black-bg-6 .al-section-pg-subtitle::before,
.black-bg-6 .al-section-pg-subtitle::after {
  background: transparent !important;
}

/* Footer aksanları */
.al-footer-pg-social a:hover {
  color: var(--udw-gold) !important;
}
.al-footer-pg-info-mail::after {
  background-color: var(--udw-gold) !important;
}
.al-btn-pg-subscribe {
  background-color: var(--udw-gold) !important;
  color: var(--udw-espresso) !important;
  border: none !important;
}
.al-btn-pg-subscribe:hover {
  background-color: var(--udw-gold-deep) !important;
}

/* ============================================================
   6) GENEL VURGU / CİLA
   ============================================================ */
/* Sayfa boyunca linklerin hover'ı gold */
a:hover {
  color: var(--udw-gold);
}

/* Yukarı çık butonu — gold ok */
.scrollToTop .arrowUp {
  color: var(--udw-gold);
}

/* ============================================================
   7) ORTAK BÖLÜM BAŞLIKLARI
      Hakkımızda / Hizmetlerimiz / Projelerimiz üçü de aynı görünür:
      gold renk, ortalanmış, aynı boyut, tek font (Poppins).
      Her başlığı <div class="udw-section-head"> içine
      <h2 class="udw-section-heading"> olarak sarmalıyoruz.
   ============================================================ */
.udw-section-head {
  text-align: center;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.udw-section-heading {
  margin: 0;
  font-family: var(--tp-ff-poppins);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--udw-gold);
}
.udw-section-subtitle {
  margin: 18px auto 0;
  max-width: 620px;
  font-family: var(--tp-ff-poppins);
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--udw-ink-soft);
}

/* Bölümlerin kendi renk kuralları (espresso !important vb.) başlığı
   ezmesin diye gold rengi bölüm bazında sabitliyoruz. */
#section-about .udw-section-heading,
#section-services .udw-section-heading,
#section-projects .udw-section-heading {
  color: var(--udw-gold) !important;
}
#section-projects .udw-section-subtitle {
  color: var(--udw-ink-soft) !important;
}

/* ============================================================
   8) HAKKIMIZDA — tek ekrana sığan, dengeli ve ortalı düzen
      Eski editorial ızgara (dev başlık + sağda küçük yazılar)
      yerine: ortalı başlık, dengeli orta-boy manşet ve altında
      yan yana iki okunaklı açıklama sütunu.
   ============================================================ */
#section-about.udw-about-agency-area {
  padding: clamp(56px, 7vh, 96px) 0;
}
#section-about .container {
  width: 100%;
}
#section-about .udw-section-head {
  margin-bottom: clamp(22px, 4vh, 46px);
}

/* Izgarayı ortalı dikey akışa çevir (HTML: head dışarıda,
   grid içinde manşet + iki sütun) */
#section-about .udw-about-agency-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(26px, 4vh, 52px);
}

/* Manşet: orta boy, ortalı, kaydırmalı ofset kaldırıldı */
#section-about .udw-about-agency-headline {
  padding: 0;
  text-align: center;
}
/* Tek satırlık cümle; boyut HAKKIMIZDA başlığı ile metinler arasında
   bir geçiş değeri. Geniş ekranda tek satır, çok dar ekranda sarabilir. */
#section-about .udw-about-agency-headline-line {
  font-size: clamp(22px, 3vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
@media (min-width: 576px) {
  #section-about .udw-about-agency-headline-line {
    white-space: nowrap;
  }
}
#section-about .udw-about-agency-headline-line--offset {
  padding-left: 0;
}

/* Açıklamalar: manşetin altında yan yana, dengeli ve okunaklı */
#section-about .udw-about-agency-cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(28px, 4vw, 66px);
  width: 100%;
  max-width: 940px;
}
#section-about .udw-about-agency-intro,
#section-about .udw-about-agency-desc {
  flex: 1 1 320px;
  max-width: 430px;
}
#section-about .udw-about-agency-intro p,
#section-about .udw-about-agency-desc p {
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 500;
  line-height: 1.6;
}

@media (max-width: 767px) {
  #section-about.udw-about-agency-area {
    padding: 52px 0;
  }
  #section-about .udw-about-agency-cols {
    gap: 26px;
  }
}

/* ============================================================
   9) FOOTER — 3 sütun: solda logo, ortada sosyal medya +
      iletişim bilgileri, sağda abone ol (başlık + form).
      (Eski ortalı tek sütun + dev kayan yazı kaldırıldı.)
   ============================================================ */
.udw-footer-grid {
  display: grid;
  grid-template-columns: auto 1fr minmax(300px, 400px);
  align-items: center;
  column-gap: 48px;
  row-gap: 40px;
  padding: 14px 0 34px;
}

/* Sol: logo */
.udw-footer-brand img {
  width: 148px;
  max-width: 100%;
  height: auto;
}

/* Orta: sosyal medya + iletişim */
.udw-footer-contact {
  text-align: center;
}
.udw-footer-social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}
.udw-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--udw-border-dark);
  color: var(--udw-on-dark);
  font-size: 15px;
  transition: color 0.25s ease, background-color 0.25s ease,
    border-color 0.25s ease;
}
.udw-footer-social a:hover {
  color: var(--udw-espresso);
  background-color: var(--udw-gold);
  border-color: var(--udw-gold);
}
.udw-footer-info {
  list-style: none;
  margin: 0;
  padding: 0;
}
.udw-footer-info li {
  margin: 5px 0;
  font-family: var(--tp-ff-poppins);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(244, 238, 225, 0.72);
}
.udw-footer-info a {
  color: rgba(244, 238, 225, 0.72);
  transition: color 0.2s ease;
}
.udw-footer-info a:hover {
  color: var(--udw-gold);
}

/* Sağ: abone ol */
.udw-footer-subscribe {
  justify-self: end;
  width: 100%;
  max-width: 400px;
}
.udw-footer-subscribe-title {
  display: block;
  margin-bottom: 16px;
  font-family: var(--tp-ff-playfair);
  font-size: 19px;
  line-height: 1.35;
  color: var(--udw-gold);
}
.udw-footer-subscribe .al-footer-pg-input-box {
  margin-bottom: 0 !important;
}
.udw-footer-subscribe .al-footer-pg-input input {
  width: 100%;
}

/* Tablet ve altı: tek sütun, ortalı diz */
@media (max-width: 991px) {
  .udw-footer-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    row-gap: 32px;
    padding-top: 6px;
  }
  .udw-footer-subscribe {
    justify-self: center;
    max-width: 480px;
  }
}

/* ============================================================
   10) REFERANSLAR — Hizmetler ile logo şeridi arasındaki
       fazla siyah boşluğu azalt (orijinal üst padding 150px).
       Logo şeridinin zeminini Hizmetler/Hakkımızda ile aynı krem yap.
   ============================================================ */
/* Bölümün koyu zemini (#121314, JS ile inline uygulanıyor) hizmetler ile
   logo şeridi arasında siyah bir şerit bırakıyordu -> Hizmetler/Hakkımızda
   ile aynı krem yap ki tüm bölge tek renk olsun (siyah şerit kalkar). */
#section-clients {
  background-color: var(--udw-cream) !important;
}
.al-referanslar-pg-slide-wrap {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  background-color: var(--udw-cream);
}
@media (max-width: 767px) {
  .al-referanslar-pg-slide-wrap {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
}