/* Bilesen: Site alt bilgisi (parts/footer.html)
   Lacivert zemin, 4 kolon: marka / SEO hizmetleri / tum hizmetler / kaynaklar+ofisler. */

.site-footer {
  background: var(--ar-navy);
  color: var(--ar-on-dark);
  /* Yatay dolgu sart: alt bilgi kenardan kenara bir bant, icerigi ekran
     kenarina yapismamali. */
  padding: var(--ar-space-xl) var(--ar-space-md) var(--ar-space-md);
}

.site-footer h3 {
  color: #fff;
  font-size: 1rem;
  font-family: var(--ar-font-heading);
  margin-bottom: var(--ar-space-sm);
}

.site-footer a {
  color: var(--ar-on-dark-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--ar-sky);
}

.site-footer .wp-block-navigation {
  font-size: 0.925rem;
}

.site-footer hr {
  border-color: rgba(255, 255, 255, 0.12);
}

/* --- Alt bilgi iletişim bloğu ---
   E-posta ve genel iletişim BİR KEZ burada; ofis listesinde tekrar etmez. */

.ar-filetisim { margin-top: 26px; }

.ar-filetisim__baslik {
  margin: 0 0 12px;
  font-family: var(--ar-font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: inherit;
}

.ar-filetisim__liste {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-filetisim__satir {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
}

.ar-filetisim__ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  color: var(--ar-mint);
}

.ar-filetisim__govde { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.ar-filetisim__etiket {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  /* Koyu alt bilgide gümüş gri — koyu gri asla kullanılmaz. */
  color: var(--ar-silver);
  text-transform: uppercase;
}

.ar-filetisim__govde a,
.ar-filetisim__govde > span:last-child {
  font-size: 0.92rem;
  color: var(--ar-on-dark);
  text-decoration: none;
  overflow-wrap: break-word;
}

.ar-filetisim__govde a:hover { color: #fff; text-decoration: underline; }

/* E-posta gibi uzun ve boşluksuz değerler dar sütunda ortadan bölünüyordu
   ("info@alienroad.co / m"). anywhere kırılmayı sözcük sınırlarında dener,
   break-all gibi rastgele yerden kesmez. */
.ar-filetisim__govde a { overflow-wrap: anywhere; }

/* =========================================================================
   ALT BİLGİ SÜTUNLARI (inc/footer-columns.php)
   -------------------------------------------------------------------------
   Bu blok için hiç stil yoktu: listeler ızgaraya girmeden alt alta
   yığılıyor, sağlarında geniş bir boşluk kalıyordu. Orta sütun %52
   genişlikteyken içindeki tek kolon ~%20 kullanıyordu.
   ========================================================================= */

.ar-footer-sutunlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(20px, 2.5vw, 36px);
  align-items: start;
}

.ar-footer-sutun {
  min-width: 0;
}

.ar-footer-sutun__baslik {
  margin: 0 0 10px;
  font-family: var(--ar-font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
}

.ar-footer-sutun__liste {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  /* Madde imleri kaldırılıyor: ekran görüntüsünde noktalar bağlantıları
     içeri itip sütunu daha da daraltıyordu. */
  list-style: none;
}

.ar-footer-sutun__liste li {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.ar-footer-sutun__liste a {
  display: inline-block;
  color: var(--ar-on-dark-muted);
  text-decoration: none;
  transition: color var(--ar-transition);
}

.ar-footer-sutun__liste a:hover,
.ar-footer-sutun__liste a:focus-visible {
  color: var(--ar-sky);
}

/* --- Kompakt düzen ---
   Üst dolgu 64px'ti ve marka sütununun altında büyük bir boşluk
   bırakıyordu. Bant artık daha dar; sütunlar üstten hizalı. */

.site-footer {
  padding-block: clamp(36px, 4vw, 52px) var(--ar-space-md);
}

.site-footer .wp-block-columns {
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

.site-footer .wp-block-column > :first-child {
  margin-top: 0;
}

.site-footer .wp-block-column > :last-child {
  margin-bottom: 0;
}

/* İletişim bloğunun üst boşluğu 26px'ti; sütunlar hizalanınca
   gereksiz kaldı. */
.ar-filetisim {
  margin-top: 18px;
}

/* Dar ekranda tek kolona düşerken boşluk daha da toplanır. */
@media (max-width: 780px) {
  .site-footer {
    padding-block: 32px 20px;
  }

  .ar-footer-sutunlar {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 18px;
  }
}

/* --- Sütun 3'ü yatayda yay ---
   Ölçüm: marka sütununda 426px, bağlantılarda 280px ölü alan vardı;
   yüksekliği tek başına bu sütun dayatıyordu (562px içerik). Ofis ve
   iletişim satırları alt alta dizildiği için sütun uzuyordu.
   İki kolona alınca yükseklik yarıya iniyor ve bant kısalıyor. */

.site-footer .ar-offices--kompakt,
.site-footer .ar-filetisim__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px 20px;
}

/* Adres satırları iki kolonda daha dar kalıyor; punto bir tık küçülüp
   satır sıklaşıyor ki iki satıra taşmasın. */
.site-footer .ar-office__kompakt-adres {
  font-size: 0.8125rem;
  line-height: 1.45;
}

.site-footer .ar-filetisim__satir {
  align-items: start;
}

/* Tek kolona düşen dar ekranlarda ızgara zaten auto-fit ile kapanıyor;
   ek kural gerekmiyor. */

/* --- Telif, sosyal ve ödeme şeridi (inc/footer-columns.php) --- */

.ar-flegal__ust {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.ar-flegal__telif {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ar-on-dark-muted);
}

.ar-fsos {
  display: flex;
  gap: 10px;
}

.ar-fsos__bag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--ar-on-dark-muted);
  background: rgb(255 255 255 / 7%);
  border-radius: 50%;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.ar-fsos__bag:hover,
.ar-fsos__bag:focus-visible {
  color: var(--ar-navy);
  background: #fff;
  transform: translateY(-2px);
}

/* Ödeme rozetleri: marka logolarını yeniden üretmek yerine adlar.
   Hem telif açısından güvenli hem her ekran yoğunluğunda net. */
.ar-fode {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.ar-fode__rozet {
  padding: 5px 12px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ar-silver);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--ar-radius-sm, 6px);
}

@media (max-width: 620px) {
  .ar-flegal__ust { justify-content: flex-start; }
}

/*
 * Dokunma hedefleri.
 *
 * Alt bilgi baglantilari 23 px, sosyal ikonlar 34 px yuksekliginde
 * olculdu. WCAG 2.5.8'in alt siniri 24 px, mobil kilavuzlari 44 px
 * onerir. Alt alta dizili 23 px'lik baglantilarda yanlis dokunma
 * kacinilmaz.
 *
 * Yazi boyutu DEGISTIRILMIYOR — tasarim ayni kalsin diye yalnizca
 * dikey dolgu ekleniyor. Negatif dis bosluk, buyuyen dolgunun sutun
 * araliklarini acmasini engelliyor.
 */
@media (hover: none) and (max-width: 780px) {
  .ar-footer-sutun__liste a,
  .ar-footer-iletisim a,
  .ar-filetisim__govde a,
  .ar-crumbs a,
  .ar-flegal a {
    padding-block: 11px;
    margin-block: -7px;
  }

  .ar-fsos__bag {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ar-fsos__bag { transition: none; }
  .ar-fsos__bag:hover { transform: none; }
}

/* --- Footer renkleri (panelden) --- */

.site-footer {
  background: var(--ar-footer-arka, var(--ar-navy));
  color: var(--ar-footer-yazi, var(--ar-on-dark));
}

.site-footer .ar-footer-sutun__baslik {
  color: var(--ar-footer-baslik, #fff);
}

.site-footer a,
.site-footer .ar-footer-sutun__liste a {
  color: var(--ar-footer-bag, var(--ar-on-dark-muted));
}

.site-footer a:hover,
.site-footer .ar-footer-sutun__liste a:hover {
  color: var(--ar-footer-bag-h, var(--ar-sky));
}

/* =========================================================================
   AÇIK (GÜMÜŞ) ALT BİLGİ
   -------------------------------------------------------------------------
   Referans alt bilgi açık zeminli: gümüş arka plan, lacivert metin,
   siyah logo.

   NEDEN TEK TEK DEĞİL TOPLU
   Alt bilgi ve içindeki bileşenler (ofisler, iletişim, sütunlar) koyu
   zemin varsayımıyla yazılmıştı: --ar-on-dark, #fff, rgb(255 255 255/…).
   Bunları tek tek çevirmek her bileşende ayrı bir düzeltme demekti ve
   biri atlanınca gümüş üzerine beyaz yazı kalıyordu.

   Bunun yerine alt bilginin KENDİ renk katmanı: kapsayıcıda değişkenler
   yeniden tanımlanıyor, alt bileşenler hiç değişmeden doğru rengi
   alıyor. Panelden verilen renk (--ar-footer-*) yine üstte kazanıyor.
   ========================================================================= */

.site-footer {
  /* Koyu zemin varsayan değişkenleri açık zemine göre yeniden tanımla.
     Bu tanım YALNIZCA alt bilgi içinde geçerli. */
  --ar-on-dark: var(--ar-navy);
  --ar-on-dark-muted: var(--ar-muted);

  background: var(--ar-footer-arka, var(--ar-silver-soft));
  color: var(--ar-footer-yazi, var(--ar-navy));
  border-top: 1px solid var(--ar-border);
}

/* Beyaz yazı yazan sabit kurallar — artık lacivert. */
.site-footer h3,
.site-footer .ar-footer-sutun__baslik,
.site-footer .ar-filetisim__baslik,
.site-footer .ar-office__kompakt-baslik {
  color: var(--ar-footer-baslik, var(--ar-navy));
}

.site-footer .ar-filetisim__govde a:hover {
  color: var(--ar-footer-bag-h, var(--ar-green-deep));
}

.site-footer a,
.site-footer .ar-footer-sutun__liste a {
  color: var(--ar-footer-bag, var(--ar-muted));
}

.site-footer a:hover,
.site-footer .ar-footer-sutun__liste a:hover {
  color: var(--ar-footer-bag-h, var(--ar-green-deep));
}

/* Ayırıcı çizgiler açık zeminde görünür olmalı; beyaz saydam
   çizgi gümüş üzerinde kayboluyordu. */
.site-footer hr,
.site-footer .wp-block-separator {
  border-color: var(--ar-border);
}

/* --- Sosyal ve ödeme: açık zemine göre --- */

.site-footer .ar-fsos__bag {
  color: var(--ar-navy);
  background: #fff;
  border: 1px solid var(--ar-border);
}

.site-footer .ar-fsos__bag:hover,
.site-footer .ar-fsos__bag:focus-visible {
  color: #fff;
  background: var(--ar-navy);
  border-color: var(--ar-navy);
}

.site-footer .ar-fode__rozet {
  color: var(--ar-muted);
  background: #fff;
  border: 1px solid var(--ar-border);
}

.site-footer .ar-flegal__telif {
  color: var(--ar-muted);
}

/* Marka bloğundaki logo koyu zeminde beyazlatılıyordu; açık zeminde
   ters çevirme kaldırılmalı. */
.site-footer .wp-block-site-logo img,
.site-footer .ar-footer-marka img {
  filter: none;
}

/* İletişim ikonları */
.site-footer .ar-filetisim__ikon {
  color: var(--ar-green-deep);
}

/* Koyu bölüm koruması (dark.css) alt bilgiyi de yakalıyordu; alt bilgi
   artık açık zeminli, metni beyaza çevirmemeli. */
.ar-sahne.ar-sahne .site-footer :is(p, li, dd, dt, span, a) {
  color: var(--ar-footer-yazi, var(--ar-muted));
}

/* İletişim etiketleri ("E-POSTA", "TELEFON") gümüş renkle SABİT
   yazılmıştı — koyu alt bilgi için doğruydu, gümüş zeminde kontrastı
   1.31'e düşüyor ve okunmuyor. Ölçüldü ve düzeltildi. */
.site-footer .ar-filetisim__etiket,
.site-footer .ar-office__kompakt-adres {
  color: var(--ar-muted);
}

/* =========================================================================
   ALT BİLGİ — TİPOGRAFİ VE HİZA
   -------------------------------------------------------------------------
   "Offices" başlığının aşağı kaymasının sebebi: sütunlar farklı
   bileşenlerden geliyor ve her birinin kendi üst boşluğu vardı.
   Artık tüm sütun başlıkları AYNI kutu modelini paylaşıyor.

   Başlıklar hariç her şey aynı punto, aynı kalınlık, aynı satır
   yüksekliği — ayarlanabilir değişkenlerle (Tema Ayarları > Tipografi).
   ========================================================================= */

/* Tüm sütunlar üstten hizalı başlasın. */
.site-footer .wp-block-columns {
  align-items: flex-start;
}

.site-footer .wp-block-column > :first-child,
.site-footer .ar-footer-sutun:first-child,
.site-footer .ar-filetisim:first-child {
  margin-top: 0;
}

/* --- Başlıklar: tek ölçü --- */
.site-footer h3,
.site-footer .ar-footer-sutun__baslik,
.site-footer .ar-filetisim__baslik,
.site-footer .ar-offices__baslik {
  margin: 0 0 14px;
  font-family: var(--ar-font-heading);
  font-size: var(--ar-footer-baslik-punto, 0.9375rem);
  font-weight: var(--ar-footer-baslik-kalinlik, 700);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

/*
 * SÜTUNLAR ARASI BOŞLUK GRID GAP İLE — margin-top İLE DEĞİL.
 *
 * Önceki kural ".ar-footer-sutun + .ar-footer-sutun" idi: ızgarada
 * YAN YANA duran sütunlara da üst boşluk veriyordu ve ilk sütun
 * dışındaki her başlık 32px aşağı kayıyordu. "Offices" başlığının
 * aşağıda durmasının sebebi buydu.
 *
 * Dikey boşluk artık ızgaranın satır aralığından geliyor; yatay
 * komşular etkilenmiyor.
 */
.site-footer .ar-footer-sutunlar {
  row-gap: clamp(22px, 3vw, 34px);
}

/* İletişim bloğu ofislerin ALTINDA, aynı sütunda — burada margin
   doğru, çünkü gerçekten dikey bir kardeş. */
.site-footer .ar-filetisim {
  margin-top: clamp(22px, 3vw, 32px);
}

/* --- Başlık DIŞINDA her şey aynı --- */
.site-footer :is(p, li, a, address, span, dd, dt):not(.ar-fmarka__ad):not(.ar-fode__rozet) {
  font-family: var(--ar-font-body);
  font-size: var(--ar-footer-punto, 0.875rem);
  font-weight: var(--ar-footer-kalinlik, 400);
  line-height: var(--ar-footer-satir, 1.65);
  letter-spacing: 0;
  text-transform: none;
}

/* İletişim etiketleri de aynı ölçüde — önceden büyük harf ve
   harf aralıklıydı, sütun içinde ikinci bir tipografi dili
   oluşturuyordu. */
.site-footer .ar-filetisim__etiket {
  font-size: var(--ar-footer-punto, 0.875rem);
  font-weight: var(--ar-footer-kalinlik, 400);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ar-muted);
}

/* --- Marka sütunu --- */

.ar-fmarka__bag {
  display: inline-block;
  text-decoration: none;
}

.ar-fmarka__ad {
  font-family: var(--ar-font-heading);
  /* Logo gibi: belirgin şekilde büyük. */
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ar-footer-baslik, var(--ar-navy));
}

.ar-fmarka__logo {
  display: block;
  width: auto;
  max-width: 190px;
  height: auto;
}

/* Sosyal ikonlar: markadan sonra belirgin bir boşluk. */
.ar-fsos--marka {
  margin-top: clamp(26px, 4vw, 40px);
}

/* --- Ofisler: ikonlu, kurumsal --- */

.site-footer .ar-offices--kompakt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer .ar-office {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

/* Konum ikonu — CSS ile çizilen sade bir iğne.
   Ayrı SVG yerine ::before: her ofis için işaretlemeye ikon eklemek
   yerine tek kural. */
.site-footer .ar-office::before {
  content: "";
  width: 15px;
  height: 15px;
  margin-top: 3px;
  background: var(--ar-green-deep);
  /* İğne biçimi: yuvarlak baş + sivri uç. */
  clip-path: path("M7.5 0C3.9 0 1 2.9 1 6.5 1 11 7.5 15 7.5 15S14 11 14 6.5C14 2.9 11.1 0 7.5 0zm0 9a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z");
  grid-row: span 2;
}

.site-footer .ar-office__kompakt-baslik {
  margin: 0 0 3px;
  font-weight: 600;
  color: var(--ar-navy);
}

.site-footer .ar-office__kompakt-adres {
  margin: 0;
  font-style: normal;
  color: var(--ar-muted);
}

/* İletişim satırları da ikon hizasında. */
.site-footer .ar-filetisim__liste {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.site-footer .ar-filetisim__ikon {
  flex: 0 0 auto;
  margin-top: 2px;
}

/* "Ofisler" başlığı bir çekirdek wp-block-heading ve blok editörünün
   24px üst boşluğunu taşıyordu; komşu sütun başlıklarından aşağıda
   duruyordu. Alt bilgideki TÜM sütun başlıkları aynı hizadan başlar. */
.site-footer .wp-block-column > .wp-block-heading:first-child,
.site-footer .wp-block-template-part > .wp-block-heading:first-child,
/* Sablon parcasi <footer> etiketiyle ciziliyor; yukaridaki
   ".wp-block-template-part" seciciyi kapsamiyordu cunku o sinif
   ic ice bir <footer> uzerinde. */
.site-footer footer.wp-block-template-part > .wp-block-heading:first-child {
  margin-top: 0;
}

/* Izgara hücresi: aynı hücrede yığılan sütunlar (İş Birliği →
   Kaynaklar). Hücre bir ızgara öğesi, içindekiler dikey akar. */
.ar-footer-hucre {
  display: grid;
  gap: clamp(22px, 3vw, 32px);
  align-content: start;
  min-width: 0;
}

/* İletişim bloğu marka sütununda; sosyal ikonlardan sonra nefes. */
.site-footer .ar-fmarka + .ar-filetisim,
.site-footer .wp-block-column > .ar-filetisim {
  margin-top: clamp(26px, 4vw, 40px);
}

/* Marka sütunu dar; iletişim satırları tek kolona düşsün. */
.site-footer .wp-block-column:first-child .ar-filetisim__liste {
  grid-template-columns: 1fr;
}

/* Ofis adresleri ALT ALTA — yan yana iki kolonda dar kalıp
   adresler iki satıra bölünüyordu. Çalışma saatleri de en altta,
   adreslerden sonra. */
.site-footer .ar-offices--kompakt {
  grid-template-columns: 1fr;
  gap: 14px;
}

/* --- Çalışma saatleri (adreslerin altında) --- */

.ar-fsaat {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ar-border);
}

.ar-fsaat__ikon {
  margin-top: 2px;
  color: var(--ar-green-deep);
}

.ar-fsaat__govde {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ar-fsaat__etiket { color: var(--ar-muted); }
.ar-fsaat__deger { color: var(--ar-navy); font-weight: 600; }

/* --- Sütun bağlantılarına ikon ---
   Düz metin listesi yerine her satırın solunda küçük bir ok.
   Ayrı SVG yerine ::before: 30'dan fazla bağlantıya işaretleme
   eklemek yerine tek kural. */
.site-footer .ar-footer-sutun__liste li {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.site-footer .ar-footer-sutun__liste li::before {
  content: "";
  width: 11px;
  height: 11px;
  margin-top: 6px;
  background: currentColor;
  color: var(--ar-green-light);
  /* Sağa bakan ince ok. */
  clip-path: path("M1 4.2h6.1L4.9 2 6 1l4 4.5L6 10 4.9 9l2.2-2.2H1z");
  transition: transform 0.2s ease, color 0.2s ease;
}

.site-footer .ar-footer-sutun__liste li:hover::before {
  color: var(--ar-green);
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .site-footer .ar-footer-sutun__liste li::before { transition: none; }
  .site-footer .ar-footer-sutun__liste li:hover::before { transform: none; }
}