/* DW Panel v2 — Slider Pro — Site (frontend) stilleri */
.dw-sp-slider {
  position: relative; width: 100%; aspect-ratio: var(--dw-sp-ratio, 2.74); overflow: hidden;
  /* ── MOBİL/TABLET UYUMLULUK (2. Adım) ──
     Katmanların font-size/width/height'i artık "cqw" biriminde
     (konteynerin genişliğinin %'si) basılıyor (bkz. SliderRev.php).
     Bu birimin çalışması için elementin bir "container" olması
     GEREKİR — aksi halde cqw hiçbir şey ifade etmez. */
  container-type: inline-size;
  container-name: dw-sp;
}
.dw-sp-track { position: relative; width: 100%; height: 100%; }
.dw-sp-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; background-size: cover; background-position: center; }
.dw-sp-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.dw-sp-overlay { position: absolute; inset: 0; }
.dw-sp-layers { position: absolute; inset: 0; }
.dw-sp-layer {
  position: absolute; white-space: pre-wrap;
  /* Çok dar ekranlarda (küçük telefonlar) cqw tabanlı yazı boyutu
     okunamayacak kadar küçülmesin diye bir taban değer — tasarımda
     belirlenen boyuttan küçük olması gerekiyorsa zaten cqw devreye
     girip küçültüyor, bu sadece AŞIRI küçülmeyi engelliyor. */
  font-size: clamp(11px, 1em, 999px);
}
.dw-sp-button {
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  text-align: center; padding: .6em 1.4em;
}
.dw-sp-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dw-sp-icon { display: flex; align-items: center; justify-content: center; }
.dw-sp-icon i { display: block; }
.dw-sp-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); color: #fff; display: flex; align-items: center;
  justify-content: center; cursor: pointer; z-index: 5; backdrop-filter: blur(4px); }
.dw-sp-arrow:hover { background: rgba(255,255,255,.3); }
.dw-sp-prev { left: 20px; }
.dw-sp-next { right: 20px; }
.dw-sp-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: .5rem; z-index: 5; }
.dw-sp-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.4); border: none; cursor: pointer; padding: 0; }
.dw-sp-dot.is-active { background: #fff; width: 26px; border-radius: 6px; transition: width .25s; }
@media (max-width: 768px) {
  .dw-sp-slider { aspect-ratio: 4 / 5; }
  .dw-sp-arrow { width: 36px; height: 36px; }
}
/* ── Ok stilleri ── */
.dw-sp-arrow img { width: 20px; height: 20px; object-fit: contain; }
.dw-sp-arrow-thin { background: transparent; border: none; }
.dw-sp-arrow-rounded { background: rgba(255,255,255,.9); color: #1e293b; border: none; }
.dw-sp-arrow-rounded:hover { background: #fff; }
.dw-sp-arrow-square { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); border-radius: 6px; }
/* ── Boncuk pozisyonları (varsayılan: alt orta) ── */
.dw-sp-dots-bottom-left { left: 20px; right: auto; transform: none; }
.dw-sp-dots-bottom-right { left: auto; right: 20px; transform: none; }
/* ── Boncuk stilleri ── */
.dw-sp-dot-square .dw-sp-dot { border-radius: 3px; }
.dw-sp-dot-square .dw-sp-dot.is-active { border-radius: 3px; }
.dw-sp-dot-bar .dw-sp-dot { width: 24px; height: 4px; border-radius: 2px; }
.dw-sp-dot-bar .dw-sp-dot.is-active { width: 36px; border-radius: 2px; }
.dw-sp-dot img { width: 100%; height: 100%; object-fit: contain; display: block; }