.gs-ayah-hadith-section{
    --gs-wine:#57002f;
    --gs-gold:#c5a23a;
    --gs-ink:#111827;
    --gs-muted:#777777;

    position:relative;
    isolation:isolate;
    overflow:hidden;
    width:100%;
    padding:88px 0 84px;
    background:#fff;
}

/*
   Dekoratif Kur'an + cami/minare + İslami desen görseli.
   Saydam tutulur; metinlerin önüne geçmez.
*/
.gs-ayah-hadith-section::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-3;
    pointer-events:none;
    background-image:url('../../images/ayat-hadith-bg.png');
    background-repeat:no-repeat;
    background-position:left bottom;
    background-size:cover;
    opacity:.26;
}

/* Sol tarafta okunurluğu koruyan yumuşak beyaz katman. */
.gs-ayah-hadith-section::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background:linear-gradient(
        90deg,
        rgba(255,255,255,.88) 0%,
        rgba(255,255,255,.80) 30%,
        rgba(255,255,255,.48) 49%,
        rgba(255,255,255,.12) 72%,
        rgba(255,255,255,0) 100%
    );
}

.gs-ayah-hadith-section .container{
    position:relative;
    z-index:2;
}

.gs-ayah-hadith-wrap{
    display:grid;
    grid-template-columns:minmax(0, 1.08fr) minmax(390px, .92fr);
    align-items:center;
    gap:56px;
    min-height:590px;
}

/* =========================================================
   SOL TARAF - SADE TASARIM
   ========================================================= */
.gs-ayah-hadith-content{
    position:relative;
    min-width:0;
    width:100%;
    max-width:820px;
    padding:12px 0 22px;
}

.gs-ayah-heading{
    max-width:680px;
    margin-bottom:64px;
}

.gs-ayah-title{
    margin:0;
    color:var(--gs-ink);
    font-family:'Poppins',sans-serif;
    font-size:32px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:-.9px;
}

.gs-ayah-subtitle{
    margin:12px 0 0;
    color:#7a7a7a;
    font-family:'Poppins',sans-serif;
    font-size:17px;
    line-height:1.7;
    font-weight:400;
}

/* =========================================================
   AYET / HADİS SLIDER
   ========================================================= */
.gs-ayah-slider{
    position:relative;
    width:100%;
    max-width:760px;
    padding:0 68px;
}

.gs-ayah-slides{
    position:relative;
    min-height:255px;
}

.gs-ayah-slide{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    opacity:0;
    visibility:hidden;
    transform:translateY(7px);
    transition:opacity .28s ease, visibility .28s ease, transform .28s ease;
    pointer-events:none;
}

.gs-ayah-slide.is-active{
    position:relative;
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
}

.gs-ayah-quote-mark{
    position:absolute;
    left:-14px;
    top:-5px;
    color:var(--gs-wine);
    font-family:Georgia,serif;
    font-size:48px;
    line-height:1;
    font-weight:700;
}

.gs-ayah-text{
    margin:0 auto;
    max-width:650px;
    color:#757575;
    font-family:'Poppins',sans-serif;
    font-size:16px;
    line-height:2.15;
    font-weight:400;
}

.gs-ayah-source{
    display:block;
    margin-top:30px;
    color:#262626;
    font-family:'Poppins',sans-serif;
    font-size:18px;
    line-height:1.5;
    font-weight:700;
}

.gs-ayah-nav{
    position:absolute;
    top:42%;
    z-index:5;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translateY(-50%);
    border:0;
    border-radius:0;
    padding:0;
    background:transparent;
    box-shadow:none;
    color:#8d8d8d;
    cursor:pointer;
    transition:color .22s ease, transform .22s ease;
}

.gs-ayah-nav:hover{
    color:var(--gs-wine);
    transform:translateY(-50%) scale(1.08);
}

.gs-ayah-nav span{
    display:block;
    font-size:36px;
    line-height:1;
    font-weight:400;
}

.gs-ayah-nav--prev{left:0;}
.gs-ayah-nav--next{
    right:0;
    color:#262626;
}

/* =========================================================
   SAĞ TARAF - SADE / DOĞAL KÂBE GÖRSELİ
   Arka katman, ekstra div, halo ve dekoratif çerçeve yok.
   Görsel kendi başına, hafif radius ve doğal gölgeyle durur.
   ========================================================= */
.gs-ayah-visual-wrap{
    position:relative;
    width:100%;
    max-width:560px;
    justify-self:end;
}

.gs-ayah-visual{
    position:relative;
    margin:0;
    width:100%;
}

.gs-ayah-visual-image{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    border-radius:28px;
    box-shadow:0 22px 48px rgba(38, 24, 31, .14);
}

/* Görseli bozmadan çok hafif derinlik verir. */
.gs-ayah-visual::after{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    bottom:-18px;
    height:28px;
    z-index:-1;
    border-radius:50%;
    background:rgba(87,0,47,.10);
    filter:blur(18px);
    pointer-events:none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1199px){
    .gs-ayah-hadith-section{
        padding:78px 0 72px;
    }

    .gs-ayah-hadith-wrap{
        grid-template-columns:minmax(0,1fr) minmax(350px,.82fr);
        gap:34px;
        min-height:540px;
    }

    .gs-ayah-heading{
        margin-bottom:54px;
    }

    .gs-ayah-slider{
        padding:0 56px;
    }

    .gs-ayah-title{
        font-size:30px;
    }

    .gs-ayah-visual-wrap{
        max-width:520px;
    }
}

@media (max-width:991px){
    .gs-ayah-hadith-section::before{
        background-position:left bottom;
        background-size:cover;
        opacity:.22;
    }

    .gs-ayah-hadith-section::after{
        background:rgba(255,255,255,.66);
    }

    .gs-ayah-hadith-wrap{
        grid-template-columns:1fr;
        gap:46px;
        min-height:0;
    }

    .gs-ayah-hadith-content{
        max-width:none;
    }

    .gs-ayah-heading,
    .gs-ayah-slider{
        max-width:none;
    }

    .gs-ayah-heading{
        margin-bottom:42px;
    }

    .gs-ayah-visual-wrap{
        width:min(100%, 620px);
        max-width:620px;
        justify-self:center;
    }

    .gs-ayah-visual-image{
        border-radius:24px;
    }
}

@media (max-width:767px){
    .gs-ayah-hadith-section{
        padding:58px 0 52px;
    }

    .gs-ayah-hadith-section::before{
        opacity:.18;
    }

    .gs-ayah-heading{
        margin-bottom:32px;
    }

    .gs-ayah-title{
        font-size:29px;
        letter-spacing:-.7px;
    }

    .gs-ayah-subtitle{
        font-size:14px;
    }

    .gs-ayah-slider{
        padding:0 42px;
    }

    .gs-ayah-slides{
        min-height:300px;
    }

    .gs-ayah-quote-mark{
        left:-2px;
        top:5px;
        font-size:42px;
    }

    .gs-ayah-text{
        font-size:14px;
        line-height:1.95;
    }

    .gs-ayah-source{
        margin-top:24px;
        font-size:14px;
    }

    .gs-ayah-nav{
        width:34px;
        height:34px;
    }

    .gs-ayah-nav span{
        font-size:29px;
    }

    .gs-ayah-visual-wrap{
        max-width:100%;
    }

    .gs-ayah-visual-image{
        border-radius:20px;
        box-shadow:0 16px 34px rgba(38, 24, 31, .12);
    }
}

@media (max-width:575px){
    .gs-ayah-hadith-section{
        padding:50px 0 44px;
    }

    .gs-ayah-title{
        font-size:27px;
    }

    .gs-ayah-slider{
        padding:0 34px;
    }

    .gs-ayah-slides{
        min-height:335px;
    }

    .gs-ayah-text{
        font-size:13px;
        line-height:1.85;
    }

    .gs-ayah-source{
        font-size:13px;
    }

    .gs-ayah-hadith-wrap{
        gap:28px;
    }

    .gs-ayah-visual-image{
        border-radius:16px;
    }

    .gs-ayah-visual::after{
        bottom:-12px;
        height:20px;
    }
}

/* =========================================================
   AYET & HADİS - TABLET / MOBİL MESAFE DÜZELTMESİ
========================================================= */

/* TABLET */
@media (min-width: 576px) and (max-width: 991px) {

    .gs-ayah-hadith-section {
        padding: 55px 0 50px;
    }

    .gs-ayah-hadith-wrap {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .gs-ayah-heading {
        margin-bottom: 26px;
    }

    .gs-ayah-slider {
        padding: 0 48px;
    }

    .gs-ayah-slides {
        min-height: 220px;
    }

    .gs-ayah-source {
        margin-top: 20px;
    }

    .gs-ayah-visual-wrap {
        margin-top: 0;
        width: min(100%, 580px);
        max-width: 580px;
        justify-self: center;
    }
}


/* MOBİL */
@media (max-width: 575px) {

    .gs-ayah-hadith-section {
        padding: 42px 0 38px;
    }

    .gs-ayah-hadith-wrap {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .gs-ayah-heading {
        margin-bottom: 22px;
    }

    .gs-ayah-title {
        font-size: 26px;
        line-height: 1.25;
    }

    .gs-ayah-subtitle {
        margin-top: 8px;
        font-size: 13px;
        line-height: 1.6;
    }

    .gs-ayah-slider {
        padding: 0 30px;
    }

    .gs-ayah-slides {
        min-height: 215px;
    }

    .gs-ayah-text {
        font-size: 13px;
        line-height: 1.75;
    }

    .gs-ayah-source {
        margin-top: 18px;
        font-size: 12px;
    }

    .gs-ayah-quote-mark {
        top: 0;
        left: 0;
        font-size: 38px;
    }

    .gs-ayah-nav {
        top: 45%;
        width: 30px;
        height: 30px;
    }

    .gs-ayah-nav span {
        font-size: 25px;
    }

    .gs-ayah-visual-wrap {
        width: 100%;
        max-width: 100%;
        margin-top: 0;
        justify-self: center;
    }

    .gs-ayah-visual {
        margin: 0;
    }

    .gs-ayah-visual-image {
        width: 100%;
        height: auto;
        border-radius: 16px;
    }
}