/* ============================================================
   04-anasayfa.css — Anasayfa (hero, promo, bölüm başlıkları, markalar)
   Anasayfa UX Builder ile kurulduğu için: bazı bloklara UX Builder'da
   sınıf eklemen gerekir (her blokta "Advanced → CSS class" alanı var).
   Eklenecek sınıflar: bks-hero, bks-promo, bks-section, bks-brands
   ============================================================ */

/* === Pazarlama banner/hero → YUVARLAK köşe (ürün kartından farklı) === */
.banner,
.bks-hero .banner,
.bks-hero,
.ux-banner{
  border-radius:var(--bks-r-marketing) !important;
  overflow:hidden !important;
}

/* Hero üstündeki beyaz promo kartı (UX'te bir "box"a bks-hero-card sınıfı ver) */
.bks-hero-card{
  background:#fff;border-radius:var(--bks-r-marketing);
  padding:34px 36px;box-shadow:var(--bks-shadow-pop);
}
.bks-hero-card .kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bks-red);}
.bks-hero-card h2{font-size:26px;font-weight:800;letter-spacing:-.01em;line-height:1.1;margin:8px 0;}
.bks-hero-card p{color:var(--bks-grey);font-size:14px;margin-bottom:18px;}

/* Siyah indirim rozetleri (hero içi) — UX "text" bloğuna bks-badge sınıfı */
.bks-badge{
  display:inline-block;background:var(--bks-black);color:#fff;border-radius:14px;
  padding:18px 22px;text-align:center;line-height:1.15;
}
.bks-badge small{display:block;font-size:12px;font-weight:600;opacity:.85;margin-bottom:6px;}
.bks-badge b{font-size:38px;font-weight:800;letter-spacing:-.02em;}

/* === İki sütun promo kart (UX'te kutuya bks-promo sınıfı) === */
.bks-promo{
  display:flex;align-items:center;gap:18px;
  background:var(--bks-soft);border-radius:var(--bks-r-marketing);
  padding:26px;min-height:190px;
}
.bks-promo h3{font-size:20px;font-weight:800;margin-bottom:6px;}
.bks-promo p{color:var(--bks-grey);font-size:14px;margin-bottom:14px;}

/* === Bölüm başlığı (Çok Satanlar vb.) — büyük kalın + sağda Keşfet === */
.bks-section .section-title b,
.bks-section h3.section-title,
.row-title .section-title b,
h3.section-title{
  font-size:24px !important;font-weight:800 !important;
  letter-spacing:.01em !important;text-transform:uppercase;color:var(--bks-black) !important;
}
.section-title:before,.section-title:after{display:none !important;} /* Flatsome çizgilerini kaldır */
.bks-section .section-title{border:0 !important;}

/* Ürün karuseli boşluğu */
.bks-section{margin:48px auto;}

/* === Markalar şeridi (UX'te satıra bks-brands sınıfı) === */
.bks-brands{background:var(--bks-soft);padding:38px 0;}
.bks-brands .brand-link,
.bks-brands a{
  font-size:22px;font-weight:800;letter-spacing:.14em;color:#3a3a3a;opacity:.7;transition:opacity var(--bks-t),color var(--bks-t);
}
.bks-brands a:hover{opacity:1;color:var(--bks-red);}

/* Üst duyuru bandını ortala (Sephora gibi) */
.bks-topbar,.header-top .nav{justify-content:center !important;}

/* === ÜRÜN KARUSELİ (yatay, Sephora: sağa-sola kayar) ===
   Anasayfada ürünleri Flatsome "Products" elemanıyla SLIDER/ROW ekle,
   ya da özel .bks-carousel sarmalı kullan. ~4.3 kart görünür, kalanı kayar. */
.bks-carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;-webkit-overflow-scrolling:touch}
.bks-carousel > *{flex:0 0 calc((100% - 4*16px)/4.3);scroll-snap-align:start}
@media(max-width:1023px){.bks-carousel > *{flex:0 0 46%}}
.bks-carousel::-webkit-scrollbar{height:6px}
.bks-carousel::-webkit-scrollbar-thumb{background:#dcdcdc;border-radius:3px}

/* Flatsome ürün slider okları — yuvarlak outline (Sephora) */
.slider .flickity-prev-next-button,
.flickity-prev-next-button{
  width:40px !important;height:40px !important;background:#fff !important;
  border:1.5px solid var(--bks-black) !important;border-radius:50% !important;box-shadow:none !important;
}
.flickity-prev-next-button:hover{background:var(--bks-black) !important;}
.flickity-prev-next-button .arrow{fill:var(--bks-black);}
.flickity-prev-next-button:hover .arrow{fill:#fff;}

/* Karusel başlığı + sağda oklar / "Tümünü gör" */
.bks-car-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.bks-car-head h2,.bks-car-head .section-title b{font-size:24px;font-weight:800;text-transform:uppercase;letter-spacing:.01em}