/* ===========================
       DWK EXTRA4 — Pixel-perfect şerit
       =========================== */

    .dwk-extra4-wrapper{
      width:100%;
      max-width:none;
      margin:0;
      padding:4px 0;
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:4px;
    }

    .dwk-extra4-item{
      position:relative;
      overflow:hidden;
      border:none !important;
      border-radius:0 !important;
      box-shadow:none !important;
      background:#000;
      aspect-ratio: 5 / 4;
    }

    .dwk-extra4-item > a{
      display:block; width:100%; height:100%;
      position:relative;
      text-decoration:none; color:inherit;
      border-radius:0 !important;
    }

    .dwk-extra4-thumb{ position:absolute; inset:0; }
    .dwk-extra4-thumb img{
      display:block; width:100%; height:100%;
      object-fit:cover;
      border-radius:0 !important;
    }

    .dwk-extra4-title{
      position:absolute; left:0; right:0; bottom:0;
      display:flex; align-items:center; justify-content:center;
      min-height:44px;
      padding:0 10px;
      background:rgba(0,0,0,.55);
      color:#fff; font-weight:700; font-size:13px;
      text-transform:uppercase; letter-spacing:.4px;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      text-shadow:none;
      pointer-events:none;
    }

    .dwk-extra4-item:hover{ transform:none; }

    @media (max-width: 1100px){
      .dwk-extra4-wrapper{ grid-template-columns:repeat(5,1fr); }
    }
    @media (max-width: 900px){
      .dwk-extra4-wrapper{ grid-template-columns:repeat(4,1fr); }
    }
    @media (max-width: 720px){
      .dwk-extra4-wrapper{ grid-template-columns:repeat(3,1fr); }
    }
    @media (max-width: 520px){
      .dwk-extra4-title{
        min-height:26px;
        font-size:12px;
        background:rgba(0,0,0,.45);
        padding:0 6px;
      }
    }

    /* ==== EXTRA4 — Mobil (≤540px): 3'lü carousel ==== */
    @media (max-width: 540px){
      .dwk-extra4-wrapper{
        --gap: 6px;
        display:flex !important;
        flex-wrap:nowrap !important;
        overflow-x:auto !important;
        overflow-y:hidden;
        gap:var(--gap);
        padding:4px 6px;
        width:100%;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        grid-template-columns:unset !important;
        scrollbar-width:none;
      }
      .dwk-extra4-wrapper::-webkit-scrollbar{ display:none; }

      .dwk-extra4-item{
        flex:0 0 calc((100% - (2 * var(--gap))) / 3) !important;
        max-width:calc((100% - (2 * var(--gap))) / 3) !important;
        scroll-snap-align:start;
        aspect-ratio:1 / 1;
      }

      .dwk-extra4-title{
        min-height:20px;
        font-size:11px;
        padding:0 6px;
      }
    }
/* Noktalar */
.dwk-extra4-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:6px;
}
.dwk-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:#9aa0a6;
  opacity:.75;
  border:0;
  padding:0;
  cursor:pointer;
}
.dwk-dot.is-active{ background:#111; opacity:1; }

/* Dots sadece mobilde gösterilsin */
@media (min-width: 541px){
  .dwk-extra4-dots{ display:none; }
}

/* Sürüklerken göstergesi */
.dwk-extra4-wrapper.is-dragging{ cursor: grabbing; }
/* === DESKTOP CAROUSEL: 6+ öğede devreye girer === */
.dwk-extra4-wrapper.is-carousel{
  --gap: 4px;
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden;
  gap:var(--gap);
  padding:4px 12px;
  width:100%;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  grid-template-columns:unset !important; /* grid'i iptal et */
  scrollbar-width:none;
}
.dwk-extra4-wrapper.is-carousel::-webkit-scrollbar{ display:none; }

/* 6 sütun görünüm */
.dwk-extra4-wrapper.is-carousel .dwk-extra4-item{
  flex:0 0 calc((100% - (5 * var(--gap))) / 6);
  max-width:calc((100% - (5 * var(--gap))) / 6);
  scroll-snap-align:start;
  aspect-ratio: 5 / 4;
}

/* Kırılımlar: 5 / 4 / 3 */
@media (max-width:1100px){
  .dwk-extra4-wrapper.is-carousel .dwk-extra4-item{
    flex-basis: calc((100% - (4 * var(--gap))) / 5);
    max-width: calc((100% - (4 * var(--gap))) / 5);
  }
}
@media (max-width:900px){
  .dwk-extra4-wrapper.is-carousel .dwk-extra4-item{
    flex-basis: calc((100% - (3 * var(--gap))) / 4);
    max-width: calc((100% - (3 * var(--gap))) / 4);
  }
}
@media (max-width:720px){
  .dwk-extra4-wrapper.is-carousel .dwk-extra4-item{
    flex-basis: calc((100% - (2 * var(--gap))) / 3);
    max-width: calc((100% - (2 * var(--gap))) / 3);
  }
}
/* 540px ve altı için mevcut mobil carousel bloğun zaten devrede */
/* Varsayılan gizli */
.dwk-extra4-dots{ display:none; }

/* Mobilde göster */
@media (max-width:540px){
  .dwk-extra4-dots{ display:flex; }
}

/* Desktop: wrapper .is-carousel ise (6+ öğe) göster */
.dwk-extra4-wrapper.is-carousel + .dwk-extra4-dots{
  display:flex;
}