/* =========================================================
   YENİ ETİKETİ - ORTAK KURDELE SİSTEMİ
   ---------------------------------------------------------
   Kullanıldığı yerler:
   - Kitaplarım kartı: .galeri-card içinde
   - Duyurular kartı: .duyuru-card içinde
   - Kitap detay bölüm listesi: .bolum-item içinde

   HTML kullanımı:
   <div class="... ribbon-holder">
     <span class="ribbon-badge">Yeni Kitap</span>
   </div>
   ========================================================= */


/* Kurdele kullanılan kartların pozisyon referansı */
.ribbon-holder,
.galeri-card,
.duyuru-card,
.bolum-item {
    position: relative;
}


/* Taşan kurdelenin görünmesi gereken alanlar */
.bolumler-kart,
.bolum-listesi,
.bolum-item {
    overflow: visible;
}


/* Ana kurdele */
.ribbon-badge {
    position: absolute;
    top: 16px;
    left: -8px;
    z-index: 20;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 92px;
    padding: 8px 18px 8px 22px;

    background: linear-gradient(135deg, #f6b6c1, #e97996);
    color: #fff;

    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.3px;
    white-space: nowrap;

    border-radius: 0 999px 999px 0;

    box-shadow: 0 8px 20px rgba(233, 121, 150, 0.35);

    overflow: hidden;
    pointer-events: none;
}


/* Kurdele sol alt kıvrım efekti */
.ribbon-badge::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;

    width: 8px;
    height: 8px;

    background: #b94f68;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}


/* Kurdele üstünden geçen parlama efekti */
.ribbon-badge::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.42),
            transparent);

    transform: skewX(-20deg);
    transition: left 0.55s ease;
}


/* Hover olunca parlama */
.ribbon-holder:hover .ribbon-badge::before,
.galeri-card:hover .ribbon-badge::before,
.duyuru-card:hover .ribbon-badge::before,
.bolum-item:hover .ribbon-badge::before {
    left: 135%;
}


/* =========================================================
   KİTAPLARIM SAYFASI
   ---------------------------------------------------------
   .galeri-card içinde görünen "Yeni Kitap"
   ========================================================= */

.galeri-card .ribbon-badge {
    top: 14px;
    left: -8px;
}


/* Kitap kartında resim/overlay altında kalmasın */
.galeri-card .ribbon-badge {
    z-index: 30;
}


/* =========================================================
   DUYURULAR SAYFASI
   ---------------------------------------------------------
   .duyuru-card içinde görünen "Yeni Duyuru"
   ========================================================= */

.duyuru-card {
    overflow: hidden;
}

.duyuru-card .ribbon-badge {
    top: 18px;
    left: -8px;
}


/* Duyuru kartında yazı kurdelenin altına girmesin */
.duyuru-card .satin-al-content {
    padding-top: 18px;
}


/* =========================================================
   KİTAP DETAY / BÖLÜM LİSTESİ
   ---------------------------------------------------------
   .bolum-item içinde görünen "Yeni Bölüm"
   ========================================================= */

.bolum-item .ribbon-badge,
.bolum-ribbon {
    top: -12px;
    left: 18px;

    min-width: auto;
    padding: 6px 15px 6px 18px;

    font-size: 12px;
}


/* Bölüm satırında kurdele metne binmesin */
.bolum-item:has(.ribbon-badge) {
    padding-top: 28px;
}


/* :has desteklemeyen eski tarayıcılar için yedek.
   Eğer bölüm satırında üst boşluk her zaman olsun istersen aşağıdaki değer yeterlidir. */
.bolum-item {
    min-height: 58px;
}


/* =========================================================
   DARK MODE
   ========================================================= */

body.dark-mode .ribbon-badge {
    background: #fff;
    color: #000;
    box-shadow: none;
}

body.dark-mode .ribbon-badge::after {
    background: #777;
}

body.dark-mode .ribbon-badge::before {
    background: linear-gradient(120deg,
            transparent,
            rgba(0, 0, 0, 0.20),
            transparent);
}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 768px) {
    .ribbon-badge {
        top: 12px;
        left: -6px;

        min-width: 78px;
        padding: 6px 13px 6px 17px;

        font-size: 11px;
    }

    .galeri-card .ribbon-badge {
        top: 12px;
        left: -6px;
    }

    .duyuru-card .ribbon-badge {
        top: 14px;
        left: -6px;
    }

    .duyuru-card .duyuru-content {
        padding-top: 22px;
    }

    .bolum-item .ribbon-badge,
    .bolum-ribbon {
        top: -10px;
        left: 12px;

        padding: 5px 12px 5px 15px;

        font-size: 11px;
    }

    .bolum-item:has(.ribbon-badge) {
        padding-top: 30px;
    }
}

/* =========================================================
   BÖLÜM KURDELESİ TAŞMA DÜZELTME
   ========================================================= */

.bolum-listesi {
    gap: 18px;
}

.bolum-item {
    overflow: hidden;
    padding-top: 34px;
}

.bolum-item .ribbon-badge,
.bolum-ribbon {
    top: 0;
    left: 18px;
    border-radius: 0 0 12px 12px;
}

.bolum-item .ribbon-badge::after,
.bolum-ribbon::after {
    display: none;
}


/* =========================================================
   DUYURU KARTI BEYAZ KALSIN
   ========================================================= */

.duyuru-card {
    background: #fff !important;
}

/* =========================================================
   DUYURU KURDELESİ
   ========================================================= */

.duyuru-card {
    position: relative;
    overflow: hidden;
}

.duyuru-card .ribbon-badge,
.duyuru-ribbon {
    top: 18px;
    left: -8px;
}

.duyuru-card .duyuru-content {
    padding-top: 18px;
}

body.dark-mode .duyuru-date {
    color: #aaa !important;
}

.card-ribbon-stack {
    position: absolute;
    top: 14px;
    left: -8px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 7px;
    pointer-events: none;
}

.card-ribbon-stack .ribbon-badge {
    position: relative;
    top: auto;
    left: auto;
}

.kitap-ribbon {
    background: linear-gradient(135deg, #f6b6c1, #e97996);
}

.yeni-bolum-card-ribbon {
    background: linear-gradient(135deg, #e97996, #c94d6f);
}

.yeni-bolum-card-ribbon::after {
    background: #96384f;
}