/* Anasayfa banner kaydırıcısı: oklar (yuvarlak · cam · minimal · kapsül) ve alt noktalar (nokta · çubuk). Seçim: Genel Ayarlar > Görünüm. */
.banner-kaydirici.sl-hazir{position:relative}
.banner-kaydirici.sl-hazir:focus-visible{outline:3px solid color-mix(in srgb,var(--ana) 55%,transparent);outline-offset:3px}
.sl-ok{position:absolute;top:50%;z-index:6;transform:translateY(-50%);display:grid;place-items:center;border:0;padding:0;cursor:pointer;transition:background .2s,opacity .2s,transform .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.sl-ok svg{width:22px;height:22px;display:block}
.sl-geri{left:16px}.sl-ileri{right:16px}
.sl-ok:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px color-mix(in srgb,var(--ana) 70%,transparent)}

/* 1) Yuvarlak: beyaz, gölgeli */
.sl-o-yuvarlak{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.94);color:#1f2937;box-shadow:0 6px 18px rgba(15,23,42,.28)}
.sl-o-yuvarlak:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
/* 2) Cam: buzlu cam */
.sl-o-cam{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.sl-o-cam:hover{background:rgba(255,255,255,.3)}
/* 3) Minimal: yalnız ok, üzerine gelince belirginleşir */
.sl-o-minimal{width:44px;height:64px;background:transparent;color:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));opacity:.75}
.sl-o-minimal svg{width:34px;height:34px}
.sl-o-minimal:hover{opacity:1}.sl-o-minimal.sl-geri:hover{transform:translateY(-50%) translateX(-3px)}.sl-o-minimal.sl-ileri:hover{transform:translateY(-50%) translateX(3px)}
/* 4) Kapsül: kenara yaslı koyu şerit */
.sl-o-kapsul{width:34px;height:76px;background:rgba(15,23,42,.5);color:#fff}
.sl-o-kapsul.sl-geri{left:0;border-radius:0 38px 38px 0}.sl-o-kapsul.sl-ileri{right:0;border-radius:38px 0 0 38px}
.sl-o-kapsul:hover{background:rgba(15,23,42,.78)}

/* Noktalar */
.sl-noktalar{position:absolute;left:0;right:0;bottom:16px;z-index:6;display:flex;justify-content:center;align-items:center;gap:8px;pointer-events:none}
.sl-nokta{pointer-events:auto;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.55);box-shadow:0 1px 4px rgba(0,0,0,.35);transition:width .25s,background .2s,transform .2s;-webkit-tap-highlight-color:transparent}
.sl-n-nokta .sl-nokta{width:9px;height:9px;border-radius:50%}
.sl-n-nokta .sl-nokta.aktif{background:#fff;transform:scale(1.35)}
.sl-n-cubuk .sl-nokta{width:22px;height:5px;border-radius:99px}
.sl-n-cubuk .sl-nokta.aktif{width:40px;background:#fff}
.sl-nokta:hover{background:#fff}
.sl-nokta:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* dar ekran: daha küçük ve içeride */
@media(max-width:700px){
  .sl-geri{left:8px}.sl-ileri{right:8px}
  .sl-o-yuvarlak,.sl-o-cam{width:36px;height:36px}.sl-ok svg{width:18px;height:18px}
  .sl-o-minimal{width:32px;height:48px}.sl-o-minimal svg{width:26px;height:26px}
  .sl-o-kapsul{width:26px;height:56px}
  .sl-noktalar{bottom:10px}
}
@media(prefers-reduced-motion:reduce){.sl-ok,.sl-nokta{transition:none}}

/* Telefon: banner kenar boşluğu 16px → 8px (sağ ve sol eşit) (kategori vitrini başlangıcıyla aynı hizada) */
@media (max-width:575.98px){section.banner-kaydirici,section.mozaik{margin-inline:-8px;max-width:none;width:calc(100% + 16px)}}

/* Geçiş okları biraz küçük */
.sl-o-yuvarlak,.sl-o-cam{width:32px;height:32px}.sl-ok svg{width:16px;height:16px}
@media (max-width:575.98px){.sl-o-yuvarlak,.sl-o-cam{width:28px;height:28px}.sl-ok svg{width:14px;height:14px}}

/* Anasayfa banner yüksekliği (Genel Ayarlar → Anasayfa banner yüksekliği). "normal" mevcut görünümdür (kural yok). Mozaik düzenin ana bannerı kendi yüksekliğini kullanır. */
@media (min-width:701px){
  body.bny-cokdar:not(.hr-mozaik) .banner-kaydirici:not(.mz-ana){aspect-ratio:8/1.7;min-height:120px}
  body.bny-dar:not(.hr-mozaik) .banner-kaydirici:not(.mz-ana){aspect-ratio:8/2.2;min-height:160px}
  body.bny-yuksek:not(.hr-mozaik) .banner-kaydirici:not(.mz-ana){aspect-ratio:8/3.7;min-height:260px}
  body.bny-cokyuksek:not(.hr-mozaik) .banner-kaydirici:not(.mz-ana){aspect-ratio:8/4.5;min-height:320px}
}
@media (max-width:700px){
  body.bny-cokdar:not(.hr-mozaik) .banner-kaydirici:not(.mz-ana){height:clamp(120px,34vw,180px)}
  body.bny-dar:not(.hr-mozaik) .banner-kaydirici:not(.mz-ana){height:clamp(150px,44vw,230px)}
  body.bny-yuksek:not(.hr-mozaik) .banner-kaydirici:not(.mz-ana){height:clamp(250px,70vw,380px)}
  body.bny-cokyuksek:not(.hr-mozaik) .banner-kaydirici:not(.mz-ana){height:clamp(300px,84vw,440px)}
}