/* ==================== DUA DETAY SAYFASI ÖZELLEŞTİRMELERİ ==================== */

/* Başlık Bölümü */
.display-4 {
    background: linear-gradient(135deg, var(--color-text), var(--color-text-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

    .display-4::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 4px;
        background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
        border-radius: 2px;
    }

@media (max-width: 768px) {
    .display-4 {
        font-size: 2rem;
    }
}

/* Kategori ve Kaynak Bilgisi */
.lead.text-muted {
    color: var(--color-text-light) !important;
    font-size: 1rem;
    font-weight: 500;
}

    .lead.text-muted span {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        background: rgba(var(--color-primary-rgb), 0.15);
        border-radius: var(--radius-lg);
        margin: 0.25rem;
        transition: all 0.3s ease;
    }

        .lead.text-muted span:hover {
            background: rgba(var(--color-primary-rgb), 0.25);
            transform: scale(1.05);
        }

@media (max-width: 768px) {
    .lead.text-muted {
        font-size: 0.9rem;
    }
}

/* Horizontal Rule (Ayırıcı Çizgi) */
hr.my-4 {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    margin: 2.5rem 0;
    opacity: 0.5;
}

/* Dua Detay Kartları - Genel */
.my-4.card {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 2px solid rgba(var(--color-primary-rgb), 0.15);
    background: var(--color-bg-secondary);
    animation: cardLoad 0.6s ease-out backwards;
}

    .my-4.card:hover {
        border-color: rgba(var(--color-primary-rgb), 0.5);
    }

    /* Kart Header'ları */
    .my-4.card .card-header {
        background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
        padding: 1.25rem 1.75rem;
        font-size: 1.2rem;
        letter-spacing: 0.5px;
        position: relative;
        overflow: hidden;
        color: var(--color-primary);
        font-weight: 600;
        text-align: center;
    }

        .my-4.card .card-header::before {
            content: '✦';
            margin-right: 0.75rem;
            color: var(--color-primary);
        }

        .my-4.card .card-header::after {
            content: '✦';
            margin-left: 0.75rem;
            color: var(--color-primary);
        }

    /* Kart İçeriklerini Ortala */
    .my-4.card .card-body {
        text-align: center;
    }

    /* Arapça Metin Kartı - Özel Stiller */
    .my-4.card:first-of-type {
        background: linear-gradient(to bottom, var(--color-bg-secondary) 0%, rgba(var(--color-primary-rgb), 0.03) 100%);
    }

        .my-4.card:first-of-type .card-body {
            background: linear-gradient(to bottom, rgba(var(--color-primary-rgb), 0.1) 0%, rgba(var(--color-primary-rgb), 0.03) 100%);
            padding: 2.5rem;
            font-size: 1.8rem !important;
            line-height: 2.5 !important;
            text-shadow: 0 1px 2px rgba(var(--color-black-rgb), 0.05);
            font-family: var(--font-family-arabic);
        }

            .my-4.card:first-of-type .card-body p {
                margin: 0;
                letter-spacing: 1px;
            }

@media (max-width: 768px) {
    .my-4.card:first-of-type .card-body {
        font-size: 1.4rem !important;
        padding: 1.5rem;
    }
}

/* Türkçe Okunuş Kartı */
.my-4.card:nth-of-type(2) {
    background: linear-gradient(135deg, var(--color-bg-secondary) 0%, rgba(var(--color-accent-rgb), 0.02) 100%);
}

    .my-4.card:nth-of-type(2) .card-body {
        padding: 2rem;
        font-size: 1.15rem;
        color: var(--color-text);
        line-height: 2;
        font-style: italic;
    }

/* Anlam Kartı */
.my-4.card:nth-of-type(3) {
    background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg) 100%);
}

    .my-4.card:nth-of-type(3) .card-body {
        padding: 2rem;
        font-size: 1.05rem;
        color: var(--color-text);
        line-height: 1.9;
    }

/* Ana Sayfaya Dön Butonu - Özel Stil */
.text-center.mt-4 {
    margin-top: 3rem !important;
    margin-bottom: 2rem;
}

    .text-center.mt-4 .btn-primary {
        padding: 1rem 3rem;
        font-size: 1.1rem;
        box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.35);
        position: relative;
        overflow: hidden;
    }

        .text-center.mt-4 .btn-primary::after {
            content: '←';
            position: absolute;
            right: 2rem;
            opacity: 0;
            transition: all 0.3s ease;
        }

        .text-center.mt-4 .btn-primary:hover::after {
            opacity: 1;
            right: 1.5rem;
        }

        .text-center.mt-4 .btn-primary:hover {
            padding-right: 4rem;
        }

@media (max-width: 768px) {
    .text-center.mt-4 .btn-primary {
        padding: 0.85rem 2rem;
        font-size: 1rem;
    }
}

/* Kart Yükleme Animasyonu */
@keyframes cardLoad {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.my-4.card:nth-child(1) {
    animation-delay: 0.1s;
}

.my-4.card:nth-child(2) {
    animation-delay: 0.15s;
}

.my-4.card:nth-child(3) {
    animation-delay: 0.2s;
}

.my-4.card:nth-child(4) {
    animation-delay: 0.25s;
}