/* ============================================================
   10-footer.css — Footer (alt bilgi) — Sephora.com.tr 1:1 düzeni
   Siyah ana blok + üstte beyaz "hizmet" bandı. Flatsome footer
   GERÇEK sınıflarını hedefler (#footer / .footer-widgets /
   .widget-title / ul.menu / .social-icons / .absolute-footer).
   Beyaz hizmet bandı + uygulama rozetleri için yardımcı sınıflar
   (.bks-footer-services / .bks-footer-app).

   NOT: Önceki dosya BOZUKTU — kapanmamış yorum bloğu ile yarıda
   kesilmişti (sosyal/alt-bar/beyaz-bant kuralları HİÇ yoktu).
   Bu sürüm SIFIRDAN, geçerli ve eksiksiz yazıldı.

   GERÇEK ÖLÇÜ — sephora.com.tr <footer> DOM (anasayfa, Chrome
   computed-style, viewport 1905).
   RE-DOĞRULAMA 2026-06-01 19:02 — CANLI footer baştan computed-style ile
   ölçüldü; tüm tipografi/ölçü BİREBİR DOĞRULANDI (değişmedi):
     beyaz bant bg#fff iç 1440/pad24, grid 4x330 gap24, ikon hücresi 44px
     (pad6) + img 32, başlık 16/700, açıklama 16/500, Keşfet 16/500 altçizgi;
     siyah blok bg rgb(0,0,0)->#0a0a0a iç 1440; sütun başlığı 16/700 #f2f2f2
     ls.4 lh24 + başlık->ilk-link boşluğu GERÇEK 16px (mb16 DOĞRU); menü linki
     (gerçek stil iç <p>'de) 14/500 #b3b3b3 ls.35 lh20 dikey adım 36px; alt bar
     pad 24/80/24/24 gap40 space-between.
   DÜZELTİLEN (bu run): alt bar ÜSTÜNE tam-genişlik AYRAÇ eklendi — canlı
     Sephora'da <hr> 1px #d6d6d6 var; eski dosya "ayraç yok" diyordu (YANLIŞ)
     -> #footer .absolute-footer border-top rgba(255,255,255,.14).
   NOT: "Bizi takip et" sosyal satırı canlıda ul.flex-row gap24 içinde 4 büyük
     100x120 tıklama-alanı olarak ölçüldü (glif değil, dokunma hedefi; ekran
     görüntüsü boş döndü) -> mevcut sade 20px glif uyarlaması KORUNDU.
   Önceki düzeltmeler (geçerli): ikon hücresi 32->44px; :focus-visible halkası.
     YAPI: <footer class="flex flex-col">
        = div.bg-background-l0      -> BEYAZ "hizmet" bandı (üst)
        + div.bg-background-brand   -> SİYAH ana blok rgb(0,0,0) -> Bisso #0a0a0a
     - Her iki blok tam genişlik (1905); iç kapsayıcı TAM 1440px, padding 24px.
     - İki bant ARASINDA AYRAÇ/ÇİZGİ YOK (ayrım yalnız beyaz->siyah renk geçişi).

     [BEYAZ HİZMET BANDI] bg #fff, iç 1440/pad24, yük.~152:
        - 4-SÜTUN GRID: grid-template-columns 330px x4, gap 24px (öğe yük.104).
        - Öğe li: flex, gap 8px (330x104). İkon span 32x32 (img 32x32).
        - Başlık p: 16/700/#000/lh24/ls.4.
        - Açıklama p: 16/500/#000/lh24/ls.4 (varsa).
        - "Keşfet" link p: 16/500/#000/lh24/ls.4 ALTÇİZGİLİ.

     [SİYAH ANA BLOK] bg rgb(0,0,0)->#0a0a0a, iç 1440/pad24/flex gap24:
        - Sütun başlığı p: 16/700/#f2f2f2(rgb242)/lh24/ls.4/tt:none;
          başlık->ilk link boşluğu GERÇEK 16px (-> .widget-title mb16).
        - Menü linki a>p: 14/500/#b3b3b3(rgb179)/lh20/ls.35/td:none;
          DİKEY ADIM (pitch) GERÇEK 36px = lh20 + 8+8 padding -> hover #fff (altçizgi YOK).
        - Sosyal "Bizi takip et" 16/700 başlık -> 3 SADE GLİF 20x20
          (kutu/daire/kenarlık YOK), yatay pitch 44px = 20 glif + 24 boşluk.
        - Uygulama: 16/500 başlık + 2 mağaza rozeti ~125x40 (+ QR ~100-120px).
        - ALT BAR (.absolute-footer): flex, justify-between, gap 40px,
          padding 24px 80px 24px 24px (yük.80); ülke seçici a "Türkiye"
          iç metin 14/500/#b3b3b3 ALTÇİZGİLİ + bayrak (88x32).
   ============================================================ */


/* ============================================================
   A) SİYAH ANA FOOTER — zemin + tipografi
   ============================================================ */
#footer,
.footer-widgets.footer{
  background-color:var(--bks-black) !important;   /* Sephora rgb(0,0,0) -> Bisso #0a0a0a */
  color:#b3b3b3 !important;
  font-family:var(--bks-font);
}

/* iç kapsayıcı: GERÇEK 1440px ortalı */
#footer .footer-widgets > .row,
#footer .row,
#footer .container{
  max-width:1440px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* kapsayıcı padding GERÇEK 24px (4 yön) */
#footer .footer-widgets{
  padding:24px !important;
}


/* ============================================================
   B) SÜTUN BAŞLIĞI (.widget-title) — GERÇEK 16/700 #f2f2f2 ls.4 lh24
   ============================================================ */
#footer .widget-title,
#footer .widget-title span{
  color:#f2f2f2 !important;
  font-size:16px !important;
  font-weight:700 !important;
  text-transform:none !important;      /* Sephora başlıkları BÜYÜK-HARF DEĞİL */
  letter-spacing:.4px !important;
  line-height:24px !important;
  margin-bottom:16px !important;       /* GERÇEK başlık->link boşluğu 16px */
}
/* Flatsome başlık-altı çizgisini kaldır (Sephora'da yok) */
#footer .widget-title .is-divider,
#footer .widget .is-divider{ display:none !important; }


/* ============================================================
   C) MENÜ LİNKLERİ — GERÇEK 14/500/#b3b3b3/lh20/ls.35, dikey adım 36px
   ============================================================ */
#footer .widget a,
#footer ul.menu li a,
#footer .menu-item a{
  color:#b3b3b3 !important;
  font-size:14px !important;
  font-weight:500 !important;
  line-height:20px !important;
  letter-spacing:.35px !important;
  text-decoration:none !important;
  padding:8px 0 !important;            /* 8 + lh20 + 8 = 36px GERÇEK pitch */
  border:0 !important;
  display:inline-block;
  transition:color var(--bks-t-fast);
}
#footer .widget a:hover,
#footer ul.menu li a:hover,
#footer .menu-item a:hover{
  color:#fff !important;               /* Sephora: beyaza açılır, altçizgi YOK */
  text-decoration:none !important;
}
/* menü liste sıfırlama */
#footer ul.menu,
#footer .widget ul{ list-style:none; margin:0; padding:0; }
#footer ul.menu li,
#footer .widget li{ border:0 !important; margin:0; padding:0; }

/* genel açık-gri gövde metni (link ölçüsünü izler) */
#footer p,
#footer .widget{
  color:#b3b3b3;
  font-size:14px;
  line-height:20px;
  letter-spacing:.35px;
}


/* ============================================================
   D) SOSYAL İKONLAR — GERÇEK 3 SADE GLİF 20x20, yatay pitch 44px
   "Bizi takip et" başlığı altında; çevresinde daire/kutu/kenarlık YOK.
   Flatsome .social-icons varsayılan yuvarlak buton stilini DÜZLEŞTİRİR.
   ============================================================ */
#footer .social-icons{
  display:flex !important;
  align-items:center;
  gap:24px !important;                 /* 20px glif + 24px boşluk = 44px pitch */
  margin-top:16px !important;
  padding:0 !important;
  list-style:none;
}
#footer .social-icons li{ margin:0 !important; padding:0 !important; border:0 !important; }
#footer .social-icons a,
#footer .social-icons a.icon,
#footer .social-icons .button.icon{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  line-height:20px !important;
  background:transparent !important;   /* yuvarlak dolgu YOK */
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:#f2f2f2 !important;            /* beyaz glif */
  margin:0 !important;
  padding:0 !important;
  opacity:1 !important;
  transition:color var(--bks-t-fast);
}
#footer .social-icons a:hover,
#footer .social-icons a.icon:hover{
  background:transparent !important;
  color:var(--bks-red) !important;     /* Bisso marka kuralı: hover kırmızı */
}
#footer .social-icons a svg,
#footer .social-icons a .ux-svg-icon,
#footer .social-icons a i{
  width:20px !important;
  height:20px !important;
  font-size:20px !important;
  fill:currentColor !important;
}


/* ============================================================
   E) UYGULAMA İNDİR — başlık 16/500 + mağaza rozetleri ~125x40
   Yardımcı sınıf: footer içinde .bks-footer-app bloğu.
   ============================================================ */
#footer .bks-footer-app .bks-app-title{
  color:#f2f2f2 !important;
  font-size:16px !important;
  font-weight:500 !important;
  letter-spacing:.4px !important;
  line-height:24px !important;
  margin-bottom:16px !important;
}
#footer .bks-footer-app .bks-app-badges{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
#footer .bks-footer-app .bks-app-badges img{
  height:40px !important;              /* GERÇEK mağaza rozeti ~125x40 */
  width:auto !important;
  border-radius:6px;
  display:block;
}
#footer .bks-footer-app .bks-app-qr{
  width:104px !important;              /* QR ~100-120px */
  height:104px !important;
  border-radius:6px;
  background:#fff;
  padding:4px;
}


/* ============================================================
   F) ALT BAR (.absolute-footer) — GERÇEK pad 24/80/24/24, gap40, justify-between
   Ülke seçici "Türkiye" 14/500 #b3b3b3 ALTÇİZGİLİ; telif metni gri.
   ============================================================ */
#footer .absolute-footer{
  background-color:var(--bks-black) !important;
  /* GERÇEK (2026-06-01 19:02): Sephora alt-bar ÜSTÜNDE tam-genişlik <hr> var
     (computed 1px solid #d6d6d6, full 1905). Koyu Bisso #0a0a0a footer için
     parlak #d6d6d6 yerine rgba(255,255,255,.14) hairline'a uyarlandı
     (renk-eşleme kuralıyla tutarlı). Eski "border-top:0 / ayraç yok" DÜZELTİLDİ. */
  border-top:1px solid rgba(255,255,255,.14) !important;
  color:#b3b3b3 !important;
  padding:24px 80px 24px 24px !important;
}
#footer .absolute-footer .container{
  max-width:1440px !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center;
  justify-content:space-between !important;
  gap:40px !important;
  padding:0 !important;
}
#footer .absolute-footer,
#footer .absolute-footer p,
#footer .absolute-footer .copyright-footer{
  font-size:14px !important;
  font-weight:500 !important;
  line-height:20px !important;
  letter-spacing:.35px !important;
  color:#b3b3b3 !important;
}
/* ülke seçici + alt-bar linkleri: ALTÇİZGİLİ gri, hover beyaz */
#footer .absolute-footer a,
#footer .bks-country a,
#footer .bks-country{
  color:#b3b3b3 !important;
  font-size:14px !important;
  font-weight:500 !important;
  letter-spacing:.35px !important;
  text-decoration:underline !important;
  text-underline-offset:2px;
  transition:color var(--bks-t-fast);
}
#footer .absolute-footer a:hover,
#footer .bks-country a:hover{ color:#fff !important; }
/* ülke seçici bayrak + metin hizası */
#footer .bks-country{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
#footer .bks-country .bks-flag,
#footer .bks-country .bks-flag img,
#footer .bks-country svg{
  width:24px !important; height:24px !important;   /* GERÇEK ülke kontrolü h32 satır, bayrak bounding 32x32, metne 8px gap -> Bisso 24 yuvarlak chip */
  border-radius:999px; display:inline-block; overflow:hidden; flex:0 0 auto;
}


/* ============================================================
   G) BEYAZ HİZMET BANDI (.bks-footer-services) — footer ÜSTÜ helper
   GERÇEK: bg #fff, iç 1440/pad24, 4-sütun grid 330px gap24,
   öğe flex gap8, ikon 32, başlık 16/700, açıklama 16/500, Keşfet 16/500 altçizgili.
   Kullanım: footer'dan ÖNCE .bks-footer-services bloğu yerleştir.
   ============================================================ */
.bks-footer-services{
  background:#fff;
  color:#000;
  font-family:var(--bks-font);
}
.bks-footer-services .bks-services-inner{
  max-width:1440px;
  margin:0 auto;
  padding:24px;
  display:grid;
  grid-template-columns:repeat(4,1fr);   /* GERÇEK 4x330px ~ 1fr; daralınca esner */
  gap:24px;
}
.bks-footer-services .bks-service{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.bks-footer-services .bks-service-icon{
  width:44px !important;        /* GERÇEK ikon hücresi 44px = 32 ikon + 6px iç-boşluk */
  height:44px !important;
  flex:0 0 44px;
  padding:6px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bks-footer-services .bks-service-icon img{
  width:32px !important;        /* GERÇEK ikon görseli 32x32 */
  height:32px !important;
  display:block;
}
.bks-footer-services .bks-service-text{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.bks-footer-services .bks-service-title{
  font-size:16px;
  font-weight:700;
  line-height:24px;
  letter-spacing:.4px;
  color:#000;
  margin:0;
}
.bks-footer-services .bks-service-desc{
  font-size:16px;
  font-weight:500;
  line-height:24px;
  letter-spacing:.4px;
  color:#000;
  margin:0;
}
.bks-footer-services .bks-service-link{
  font-size:16px;
  font-weight:500;
  line-height:24px;
  letter-spacing:.4px;
  color:#000;
  text-decoration:underline;
  text-underline-offset:2px;
}
.bks-footer-services .bks-service-link:hover{ color:var(--bks-red); }


/* ============================================================
   I) ERİŞİLEBİLİRLİK — klavye odak halkası (Bisso kırmızı)
   05/06/07/09/11 bölümleriyle tutarlı; outline:2px + offset:2px,
   eleman kendi köşesini korur. Yalnız :focus-visible => fareyle temiz,
   klavyede görünür halka. Koyu footer zemininde kırmızı net okunur.
   ============================================================ */
#footer a:focus-visible,
#footer .social-icons a:focus-visible,
#footer .absolute-footer a:focus-visible,
#footer .bks-country a:focus-visible,
#footer .bks-footer-app .bks-app-badges a:focus-visible,
#footer .bks-footer-app .bks-app-badges img:focus-visible,
.bks-footer-services a:focus-visible,
.bks-footer-services .bks-service-link:focus-visible{
  outline:2px solid var(--bks-red) !important;
  outline-offset:2px !important;
  border-radius:2px;
}


/* ============================================================
   H) MOBİL/DAR EKRAN — sütunlar tek/iki kolona iner (Sephora dar düzeni)
   ============================================================ */
@media (max-width:849px){
  #footer .footer-widgets{ padding:24px 16px !important; }
  #footer .absolute-footer{ padding:24px 16px !important; }
  #footer .absolute-footer .container{
    flex-direction:column;
    align-items:flex-start;
    gap:16px !important;
  }
  .bks-footer-services .bks-services-inner{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    padding:24px 16px;
  }
}
@media (max-width:549px){
  .bks-footer-services .bks-services-inner{ grid-template-columns:1fr; }
}