/* =====================================================
   Dijitasyon Manşet Slider v2 – Frontend CSS
   ===================================================== */

.dms-slider-wrap *,
.dms-slider-wrap *::before,
.dms-slider-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Ana sarmalayıcı ─────────────────────────────── */
.dms-slider-wrap {
    position: relative;
    width: 100%;
    background: #0d0d0d;
    border-radius: 6px;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    user-select: none;
}

/* ── Slide konteyneri ────────────────────────────── */
.dms-slides {
    position: relative;
    width: 100%;
    /* padding-top inline'dan gelir (oran) veya height sabit */
}

/* ── Tekil slide ──────────────────────────────────── */
.dms-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.55s ease, visibility 0.55s ease;
    pointer-events: none;
}
.dms-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ── Görsel (arka plan) ──────────────────────────── */
.dms-slide-link {
    display: block;
    position: absolute;
    inset: 0;
    text-decoration: none;
    color: inherit;
}
.dms-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 8s ease;
}
.dms-slide.active .dms-slide-bg {
    transform: scale(1.04);
}
.dms-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.40) 50%,
        rgba(0,0,0,.08) 100%
    );
}

/* ── İçerik alanı (başlık + reklam) ──────────────── */
.dms-slide-content {
    position: absolute;
    bottom: 50px;   /* nav'ın üstünde kalır */
    left: 0;
    right: 0;
    padding: 0 70px 0 20px;
    z-index: 5;
    pointer-events: none;
}
.dms-slide-content > * {
    pointer-events: auto;
}

.dms-slide-title-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.dms-slide-cat {
    display: inline-block;
    background: #cc0000;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    margin-bottom: 7px;
}
.dms-slide-title {
    color: #fff;
    font-size: clamp(14px, 2.2vw, 22px);
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 5px;
    text-shadow: 0 1px 6px rgba(0,0,0,.55);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dms-slide-date {
    color: rgba(255,255,255,.55);
    font-size: 11px;
}

/* ── Reklam alanı ────────────────────────────────── */
.dms-slide-ad {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.dms-slide-ad img,
.dms-slide-ad iframe,
.dms-slide-ad ins {
    max-width: 100%;
    border-radius: 4px;
}

/* ── Ok düğmeleri ────────────────────────────────── */
.dms-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .2s, transform .2s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 0;
}
.dms-arrow:hover { background: rgba(255,255,255,.30); transform: translateY(-50%) scale(1.09); }
.dms-arrow:focus { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }
.dms-arrow svg  { width: 18px; height: 18px; display: block; }
.dms-prev { left: 10px; }
.dms-next { right: 10px; }

/* ── Numaralı navigasyon ─────────────────────────── */
.dms-nav {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: calc(100% - 100px);
}
.dms-nav-dot {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,.80);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .22s, color .22s, transform .18s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 0;
    flex-shrink: 0;
}
.dms-nav-dot:hover  { background: rgba(255,255,255,.30); color:#fff; transform: scale(1.12); }
.dms-nav-dot.active { background: #cc0000; color:#fff; transform: scale(1.15); box-shadow: 0 2px 8px rgba(200,0,0,.45); }
.dms-nav-dot:focus  { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }

/* Reklam indikatörü (kırmızı nokta) */
.dms-dot-ad-indicator {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff9800;
    border: 1px solid rgba(0,0,0,.3);
}

/* ── Progress bar ────────────────────────────────── */
.dms-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255,255,255,.12);
    z-index: 4;
}
.dms-progress-bar {
    height: 100%;
    background: #cc0000;
    width: 0%;
    transition: width linear;
}

/* ── Marka ───────────────────────────────────────── */
.dms-brand {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 10;
    pointer-events: none;
}
.dms-brand span {
    display: inline-block;
    background: rgba(0,0,0,.45);
    color: rgba(255,255,255,.65);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    backdrop-filter: blur(4px);
}

/* ── Boş mesaj ───────────────────────────────────── */
.dms-no-posts {
    padding: 24px;
    text-align: center;
    color: #888;
    font-size: 14px;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 600px) {
    .dms-slide-content { bottom: 46px; padding: 0 50px 0 12px; }
    .dms-arrow { width: 34px; height: 34px; }
    .dms-arrow svg { width: 15px; height: 15px; }
    .dms-prev { left: 5px; }
    .dms-next { right: 5px; }
    .dms-nav-dot { width: 32px; height: 32px; font-size: 12px; }
    .dms-nav { gap: 3px; max-width: calc(100% - 76px); }
}
@media (max-width: 380px) {
    .dms-slide-title { font-size: 13px; }
    .dms-nav-dot { width: 28px; height: 28px; font-size: 11px; }
}