/* ============================================================
   Akıllı Yem Slayt — Genel Görünüm Stilleri
   ============================================================ */

.ays-hero {
    position: relative;
    width: 100%;
    /* 1.7: Yükseklik panelden (Genel Ayarlar → Slayt Yüksekliği) CSS
       değişkeni olarak geliyor. Değişken yoksa 1.6'daki 560px. */
    height: var(--ays-yukseklik, 560px);
    overflow: hidden;
    background: #1C1224; /* Geçiş anında arka plan hiç beyaz görünmesin */
    /* Geçiş süresi PHP'den buraya CSS değişkeni olarak geliyor
       (--ays-gecis-suresi); ayarlar panelindeki "ms" değeri. 600ms
       varsayılanı, değişken herhangi bir sebeple gelmezse devreye
       girer. */
    --ays-gecis-suresi: 600ms;
}

/* --- YENİ: Slaytlar artık display:none ile anında değil, üst üste
   yığılıp YATAYDA KAYARAK geçiyor.
   - .ays-slayt-aktif  → ekranda, translateX(0)
   - .ays-slayt-sonraki → henüz gösterilmemiş, sağda bekliyor
   - .ays-slayt-onceki  → gösterilmiş, sola doğru çıkmış
   JS bu üç class'ı slaytlar arasında dolaştırıyor; CSS transition
   geçişin kendisini (kaymayı) çiziyor. --- */
/* Oran seçenekleri (16:9, 21:9, 3:1): yükseklik genişliğe göre
   hesaplanır. Çok dar masaüstü pencerelerde yazı sığsın diye alt sınır. */
.ays-hero.ays-yukseklik-oran {
    height: auto;
    aspect-ratio: var(--ays-oran, 16 / 9);
    min-height: 320px;
}

/* ============================================================
   GEÇİŞ EFEKTLERİ (1.7)
   JS her slayta üç durumdan birini verir:
     .ays-slayt-aktif   → ekranda
     .ays-slayt-sonraki → girmeyi bekleyen / geri giderken çıkan
     .ays-slayt-onceki  → ileri giderken çıkan / geri giderken giren
   Her efekt yalnızca "sonraki" ve "onceki" durumlarının neye
   benzediğini tanımlar; aktife geçişi transition çizer.
   ============================================================ */
.ays-slayt {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    transition:
        transform var(--ays-gecis-suresi) ease,
        opacity var(--ays-gecis-suresi) ease,
        filter var(--ays-gecis-suresi) ease,
        clip-path var(--ays-gecis-suresi) ease;
    will-change: transform, opacity;
}
.ays-slayt-aktif   { z-index: 2; transform: none; opacity: 1; }
.ays-slayt-sonraki,
.ays-slayt-onceki  { z-index: 1; }

/* Yatay kayma (varsayılan; efekt sınıfı yoksa da bu çalışır) */
.ays-slayt-sonraki { transform: translateX(100%); }
.ays-slayt-onceki  { transform: translateX(-100%); }

/* Dikey kayma */
.ays-efekt-kayma-dikey .ays-slayt-sonraki { transform: translateY(100%); }
.ays-efekt-kayma-dikey .ays-slayt-onceki  { transform: translateY(-100%); }

/* Solma ailesi: bekleyen slaytlar görünmez, yerinde durur */
.ays-efekt-solma .ays-slayt-sonraki,
.ays-efekt-solma .ays-slayt-onceki,
.ays-efekt-yok .ays-slayt-sonraki,
.ays-efekt-yok .ays-slayt-onceki { transform: none; opacity: 0; }

.ays-efekt-yakinlasma .ays-slayt-sonraki,
.ays-efekt-yakinlasma .ays-slayt-onceki { transform: scale(1.15); opacity: 0; }

.ays-efekt-uzaklasma .ays-slayt-sonraki,
.ays-efekt-uzaklasma .ays-slayt-onceki { transform: scale(.85); opacity: 0; }

.ays-efekt-bulaniklasma .ays-slayt-sonraki,
.ays-efekt-bulaniklasma .ays-slayt-onceki { transform: scale(1.04); opacity: 0; filter: blur(14px); }

/* Perde: giren slaytın sol kenarı ile çıkanın sağ kenarı aynı hızda
   hareket eder — tek, keskin bir silme çizgisi oluşur. */
.ays-efekt-perde .ays-slayt-aktif   { clip-path: inset(0 0 0 0); }
.ays-efekt-perde .ays-slayt-sonraki { transform: none; clip-path: inset(0 0 0 100%); }
.ays-efekt-perde .ays-slayt-onceki  { transform: none; clip-path: inset(0 100% 0 0); }

/* Daire: yeni slayt ortadan büyüyen bir daireyle açılır */
.ays-efekt-daire .ays-slayt-aktif   { clip-path: circle(75% at 50% 50%); }
.ays-efekt-daire .ays-slayt-sonraki,
.ays-efekt-daire .ays-slayt-onceki  { transform: none; clip-path: circle(0% at 50% 50%); }
.ays-efekt-daire .ays-slayt-onceki  { z-index: 0; } /* Çıkan, girenin altında kalsın */

/* 3D döndürme */
.ays-efekt-donme-3d { perspective: 1600px; }
.ays-efekt-donme-3d .ays-slayt { backface-visibility: hidden; }
.ays-efekt-donme-3d .ays-slayt-sonraki { transform: rotateY(90deg); opacity: 0; }
.ays-efekt-donme-3d .ays-slayt-onceki  { transform: rotateY(-90deg); opacity: 0; }

/* Çıkan slayt (JS geçiş boyunca .ays-slayt-cikan verir): üst üste
   binen efektlerde çıkan slayt ALTTA tam görünür kalır, yeni slayt
   onun ÜSTÜNDE belirir — iki slayt arasında boşluk/kararma olmaz. */
.ays-efekt-solma .ays-slayt-cikan,
.ays-efekt-yakinlasma .ays-slayt-cikan,
.ays-efekt-uzaklasma .ays-slayt-cikan,
.ays-efekt-bulaniklasma .ays-slayt-cikan { transform: none; opacity: 1; filter: none; }
.ays-efekt-daire .ays-slayt-cikan { clip-path: circle(75% at 50% 50%); z-index: 1; }

/* Animasyonsuz */
.ays-efekt-yok .ays-slayt { transition: none; }

@media (prefers-reduced-motion: reduce) {
    .ays-slayt { transition: none; }
}

/* --- Medya katmanı: her türlü arka plan (görsel/video/YouTube)
   için ORTAK kapsayıcı; hepsi bunun içinde tam kaplayıp taşıyor,
   taşan kısım overflow:hidden ile kırpılıyor. --- */
.ays-medya-katmani {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden;
    background: #1C1224; /* Medya yokken/yüklenene kadar zemin */
}

.ays-gorsel-arkaplan {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translate(-50%, -50%);
    filter: var(--ays-filtre, none);
}

/* Video dosyası: object-fit:cover TAM olarak istenen davranış —
   video her zaman merkezden büyüyüp kutuyu kaplar, taşan kısım
   görünmez. */
.ays-video-arkaplan {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translate(-50%, -50%);
    filter: var(--ays-filtre, none);
}

/* YouTube: iframe'e object-fit ETKİSİZ olduğu için, iframe'i her
   zaman kutudan büyük çizip (min-width/min-height ile garanti
   altına alınmış) tam merkeze oturtuyoruz — sonuç, video dosyasıyla
   birebir aynı "merkezden kırp" davranışı. */
.ays-youtube-sarici {
    position: absolute;
    top: 50%; left: 50%;
    width: 100vw;
    height: 56.25vw; /* 16:9 oranı: yükseklik = genişlik * 9/16 */
    min-width: 177.78vh; /* Kutunun her zaman doldurulması için: yükseklik * 16/9 */
    min-height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* YouTube kontrolleri zaten kapalı; tıklamalar arkadaki içeriğe engel olmasın */
    filter: var(--ays-filtre, none);
}
.ays-youtube-sarici iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================================================
   KARARTMA KATMANI (1.7) — yazının okunması için görselin üstüne
   serilen koyu örtü. Türü ve yoğunluğu panelden seçilir. Görselleri
   "mat ve karanlık" gösteren şey budur; tamamen kapatılabilir.
   ============================================================ */
.ays-karartma {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(115deg, rgba(28,18,36,.72) 0%, rgba(28,18,36,.45) 55%, rgba(28,18,36,.2) 100%);
    opacity: var(--ays-karartma-yogunluk, 1);
    pointer-events: none;
}
.ays-karartma-alt .ays-karartma { background: linear-gradient(0deg, rgba(28,18,36,.78) 0%, rgba(28,18,36,.35) 45%, rgba(28,18,36,0) 80%); }
.ays-karartma-duz .ays-karartma { background: rgba(28,18,36,.45); }
.ays-karartma-yok .ays-karartma { display: none; }

/* Ken Burns: aktif slaytın görseli çok yavaşça yakınlaşır (canlılık) */
@keyframes ays-ken-burns {
    from { transform: translate(-50%, -50%) scale(1); }
    to   { transform: translate(-50%, -50%) scale(1.08); }
}
.ays-ken-burns .ays-slayt-aktif .ays-gorsel-arkaplan {
    animation: ays-ken-burns 9s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
    .ays-ken-burns .ays-slayt-aktif .ays-gorsel-arkaplan { animation: none; }
}

/* --- İçerik katmanı --- */
.ays-icerik {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 90px 32px;
    display: flex;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    /* DÜZELTME (RTL): Arapça/Farsça gibi sağdan-sola dillerde sayfanın
       <html> etiketi dir="rtl" oluyor (Polylang bunu otomatik ekliyor).
       Bu kutu düz bir flex kapsayıcı olduğu için, hizalama özellikle
       belirtilmezse tarayıcı varsayılanı (flex-start) sayfa yönüne göre
       değişiyor — yani RTL'de metin kutusu SAĞA kayıyor, ama arka
       plandaki görsel yerinde durduğu için metin görselin üzerine
       biniyor ve solda boşluk kalıyordu. "direction:ltr" ile bu kutunun
       kendi iç hizalamasını sayfa yönünden BAĞIMSIZ, hep fiziksel SOLA
       sabitliyoruz; metnin kendisi aşağıdaki .ays-icerik-ic kuralıyla
       yine doğru yönde (sağdan sola) akıyor. */
    direction: ltr;
}
.ays-icerik-ic {
    max-width: 640px;
}
/* Sayfa RTL olduğunda (Arapça, Farsça vb.) yalnızca YAZININ AKIŞ YÖNÜNÜ
   geri veriyoruz — kutunun kendisi yukarıdaki kuralla solda sabit
   kalmaya devam ediyor, sadece içindeki harfler/satırlar doğru
   (sağdan sola) sırayla okunuyor ve sağa yaslanıyor. */
html[dir="rtl"] .ays-icerik-ic {
    direction: rtl;
    text-align: right;
}

/* 1.7.1: Yazı boyutu ve konum kaydırması CSS değişkeniyle geliyor —
   mobilde ayrı değer kullanılabilsin diye (aşağıdaki @media). */
.ays-hero .ays-fs { font-size: var(--ays-fs); }
.ays-hero .ays-konum {
    position: relative;
    left: var(--ays-kx, 0);
    top: var(--ays-ky, 0);
}
/* Uzun kelimeler dar ekranda taşmasın */
.ays-baslik, .ays-metin { overflow-wrap: break-word; }

/* Mobilde "Sığdır" modunun bulanık dolgusu — masaüstünde gizli */
.ays-gorsel-dolgu { display: none; }
/* 1.9: Mobildeki buğulu zemin (başlık/yazı alanlarının arkası) — masaüstünde gizli */
.ays-bugu { display: none; }

.ays-baslik {
    margin: 0 0 20px;
    line-height: 1.18;
    color: #ffffff;
}
.ays-metin {
    margin: 0 0 30px;
    line-height: 1.65;
    color: #E4D7E2;
}

.ays-butonlar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 36px;
}
.ays-buton {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 12px;
    text-decoration: none;
    /* --- DÜZELTME: Artık renk/arkaplan/kenarlık PHP'den DOĞRUDAN
       gelmiyor, yalnızca CSS değişkeni (--ays-renk vb.) olarak
       geliyor ve burada var() ile okunuyor. Neden: satır-içi
       "color:" yazılsaydı özgüllüğü aşağıdaki :hover kuralından
       HER ZAMAN yüksek olur ve hover asla görünmezdi. Varsayılan
       (fallback) değerler eski/marka renklerimiz — hiç renk
       ayarlanmamışsa görünüm öncekiyle birebir aynı kalır. --- */
    background-color: var( --ays-arkaplan, #F5A524 );
    color: var( --ays-renk, #3A2404 );
    box-sizing: border-box;
    border: 2px solid var( --ays-cizgi, transparent );
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
/* Hover'da metin ve çizgi rengi. Hiçbiri ayarlanmamışsa var()
   zinciri normal renge (--ays-renk / --ays-cizgi) geri düşer —
   yani görünüm hover'da da değişmeden kalır. */
.ays-buton:hover {
    color: var( --ays-hover-renk, var( --ays-renk, #3A2404 ) );
    background-color: var( --ays-hover-arkaplan, var( --ays-arkaplan, #F5A524 ) );
    border-color: var( --ays-hover-cizgi, var( --ays-cizgi, transparent ) );
}
@media (prefers-reduced-motion: reduce) {
    .ays-buton { transition: none; }
}

.ays-etiketler {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
}
.ays-etiket {
    display: flex;
    align-items: center;
    color: #ffffff;
}
.ays-etiket::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .6;
    /* "margin-right" yerine mantıksal "margin-inline-end" — LTR'de sağda,
       RTL'de otomatik olarak solda (yani noktanın hep YAZIYA yakın
       kenarda kalmasını) sağlıyor; iki ayrı kural yazmaya gerek kalmıyor. */
    margin-inline-end: 8px;
    flex: 0 0 auto;
}

/* --- Ok butonları ve noktalar --- */
.ays-ok {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 42px; height: 42px;
    /* --- YENİ: renk/arkaplan artık panelden gelen CSS değişkenleri
       üzerinden; hiçbiri ayarlanmamışsa eski (varsayılan) görünüm
       aynen korunuyor. --- */
    background: var( --ays-ok-arkaplan, rgba(255,255,255,.12) );
    border: 1px solid rgba(255,255,255,.35);
    color: var( --ays-ok-renk, #fff );
    font-size: 16px;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}
.ays-ok-sol { left: 18px; }
.ays-ok-sag { right: 18px; }

/* --- YENİ: Ok hover durumu. Normal renk zaten değişken üzerinden
   geldiği için (yukarıda), burası da AYNI özgüllük seviyesinden
   devreye giriyor — butonlardaki hover sorununun aynısı burada
   yaşanmıyor. Boş bırakılırsa normal renkte kalır. --- */
.ays-ok:hover {
    color: var( --ays-ok-hover-renk, var( --ays-ok-renk, #fff ) );
    background: var( --ays-ok-hover-arkaplan, var( --ays-ok-arkaplan, rgba(255,255,255,.12) ) );
}

/* --- Ok şekli — panelden seçilen 3 seçenek --- */
.ays-ok-daire { border-radius: 50%; }
.ays-ok-yuvarlak-kare { border-radius: 10px; }
.ays-ok-kare { border-radius: 0; }

.ays-noktalar {
    position: absolute;
    bottom: 20px;
    left: 0; right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.ays-nokta {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: none;
    background: #fff;
    opacity: .45;
    cursor: pointer;
    padding: 0;
}
.ays-nokta.ays-aktif { opacity: 1; }

@media (max-width: 680px) {
    .ays-hero,
    .ays-hero.ays-yukseklik-oran {
        height: var(--ays-yukseklik-mobil, 460px);
        aspect-ratio: auto;
        min-height: 0;
    }
    .ays-icerik { padding: 44px 20px; }

    /* --- Yazılar: masaüstü boyutunun mobil karşılığı (PHP hesaplar) --- */
    .ays-hero .ays-fs { font-size: var(--ays-fs-m, var(--ays-fs)); }
    .ays-baslik { margin-bottom: 14px; }
    .ays-metin  { margin-bottom: 20px; }
    .ays-butonlar { gap: 10px; margin-bottom: 22px; }
    .ays-buton { padding: 11px 20px; }
    .ays-etiketler { gap: 8px 18px; }

    /* --- Konum kaydırmaları --- */
    .ays-mobil-konum-sifirla .ays-konum { left: 0; top: 0; }
    .ays-mobil-konum-yari .ays-konum {
        left: calc(var(--ays-kx, 0px) * .5);
        top: calc(var(--ays-ky, 0px) * .5);
    }

    /* --- Görsel odağı (Kapla modunda hangi taraf görünsün) --- */
    .ays-mobil-odak-sol .ays-gorsel-arkaplan, .ays-mobil-odak-sol .ays-video-arkaplan { object-position: left center; }
    .ays-mobil-odak-sag .ays-gorsel-arkaplan, .ays-mobil-odak-sag .ays-video-arkaplan { object-position: right center; }
    .ays-mobil-odak-ust .ays-gorsel-arkaplan, .ays-mobil-odak-ust .ays-video-arkaplan { object-position: center top; }
    .ays-mobil-odak-alt .ays-gorsel-arkaplan, .ays-mobil-odak-alt .ays-video-arkaplan { object-position: center bottom; }

    /* --- Sığdır: görselin tamamı görünür, boşluk bulanık kopyayla dolar --- */
    .ays-mobil-sigdir .ays-gorsel-arkaplan,
    .ays-mobil-sigdir .ays-video-arkaplan { object-fit: contain; object-position: center; }
    .ays-mobil-sigdir .ays-gorsel-dolgu {
        display: block;
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        filter: blur(22px) brightness(.8);
        transform: scale(1.15); /* Bulanıklığın kenardaki açık halesini gizler */
    }
    .ays-mobil-sigdir .ays-youtube-sarici {
        width: 100%;
        height: auto;
        min-width: 0;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
    /* Sığdır modunda Ken Burns, görseli yeniden kırpacağı için kapalı */
    .ays-mobil-sigdir.ays-ken-burns .ays-slayt-aktif .ays-gorsel-arkaplan { animation: none; }

    /* --- Oklar --- */
    .ays-mobil-ok-alt .ays-ok,
    .ays-mobil-ok-kucuk .ays-ok {
        width: 32px; height: 32px;
        font-size: 13px;
    }
    .ays-mobil-ok-kucuk .ays-ok-sol { left: 8px; }
    .ays-mobil-ok-kucuk .ays-ok-sag { right: 8px; }
    .ays-mobil-ok-alt .ays-ok {
        top: auto;
        bottom: 12px;
        transform: none;
    }
    .ays-mobil-ok-alt .ays-ok-sol { left: 14px; }
    .ays-mobil-ok-alt .ays-ok-sag { right: 14px; }
    .ays-mobil-ok-alt .ays-noktalar { bottom: 23px; }
    .ays-mobil-ok-alt .ays-icerik { padding-bottom: 64px; }
    .ays-mobil-ok-gizle .ays-ok { display: none; }

    /* Noktalar: parmakla daha rahat basılsın (görünüm aynı, dokunma alanı büyük) */
    .ays-nokta { position: relative; }
    .ays-nokta::after { content: ""; position: absolute; inset: -8px; }

    /* "Bu slaytı mobilde gösterme" işaretlenmiş slaytlar ve onlara ait
       gösterge noktaları — JS de aynı eşiği (getComputedStyle üzerinden)
       kullanarak bu slaytları geçiş/otomatik oynatma sırasında atlıyor,
       yani burada sadece görselini değil, kaydırma sırasındaki YERİNİ de
       devre dışı bırakmış oluyoruz. */
    .ays-slayt-mobilde-gizli,
    .ays-nokta-mobilde-gizli {
        display: none !important;
    }

    /* ========================================================
       1.9: MOBİL ÜÇ KATLI YERLEŞİM
       Üstte buğulu alan → başlık
       Ortada görsel     → NET, üzerinde hiç yazı/karartma yok
       Altta buğulu alan → açıklama, butonlar, etiketler (+ oklar/noktalar)
       Slayt bir flex sütununa dönüşür; .ays-icerik ve .ays-icerik-ic
       "display:contents" ile aradan çekilir, böylece başlık kutusu
       görselin üstüne, diğer kutu altına yerleşebilir.
       ======================================================== */
    /* Slayt tek ekrana sığar: yükseklik = telefon ekranının, sayfa
       başlığının (menü/logo) altında kalan kısmı. --ays-ekran-h değerini
       frontend.js ölçüp verir (JS yoksa ekranın tamamı). Yazılar sığmazsa
       JS, o slayttaki yazıları --ays-olcek ile makul ölçüde küçültür. */
    .ays-hero,
    .ays-hero.ays-yukseklik-oran {
        display: grid;
        grid-template-rows: minmax(0, 1fr);    /* Slayt, alan yüksekliğini asla aşmasın */
        grid-template-columns: minmax(0, 1fr);
        height: var(--ays-ekran-h, 100svh);
        min-height: 0;
    }
    .ays-slayt {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        grid-area: 1 / 1;
        display: flex;
        flex-direction: column;
    }

    /* Buğulu zemin: slaytın tamamını kaplayan bulanık görsel kopyası */
    .ays-bugu {
        display: block;
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        overflow: hidden;
        z-index: 0;
        background: linear-gradient(180deg, #2A1D33 0%, #1C1224 100%); /* Video/YouTube slaytlarında ya da görsel yüklenene kadar */
    }
    .ays-gorsel-bugu {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        filter: blur(24px) brightness(.62) saturate(1.15);
        transform: scale(1.2); /* Bulanıklığın kenardaki açık halesini gizler */
    }
    .ays-bugu::after {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(28,18,36,.28); /* Yazının her görselde okunması için hafif ton */
    }

    /* Görsel: üst ve alt alanın ARASINDA kalan yeri doldurur */
    .ays-medya-katmani {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        order: 2;
        flex: 1 1 auto;
        min-height: 110px; /* Görsel hiçbir zaman tamamen ezilmesin */
        z-index: 1;
        background: transparent; /* Sığdır modunda boşluklarda buğulu zemin görünsün */
        container-type: size;
    }
    .ays-karartma { display: none; } /* Görsel net kalsın */
    .ays-mobil-sigdir .ays-gorsel-dolgu { display: none; } /* Yerini buğulu zemin aldı */

    /* YouTube: kapla davranışı artık ekrana göre değil görsel alanına göre */
    .ays-youtube-sarici {
        width: max(100cqw, 177.78cqh);
        height: max(56.25cqw, 100cqh);
        min-width: 0;
        min-height: 0;
    }

    .ays-icerik,
    .ays-icerik-ic { display: contents; }

    .ays-ust-alan,
    .ays-alt-alan {
        position: relative;
        z-index: 2;
        flex: 0 0 auto;
        padding: 12px 18px;
    }
    .ays-ust-alan { order: 1; }
    .ays-alt-alan { order: 3; }

    /* Yazılar bulundukları buğulu alanın içinde yatay ve dikey ortalı */
    .ays-ust-alan,
    .ays-alt-alan {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    html[dir="rtl"] .ays-ust-alan,
    html[dir="rtl"] .ays-alt-alan { text-align: center; }
    .ays-ust-alan { min-height: 72px; box-sizing: border-box; }

    /* "Sığdır" modunda görsel alanı görselin KENDİ oranında (JS ölçüp
       --ays-gorsel-oran verir); böylece görselin üstünde/altında boş
       bulanık şerit kalmaz. Artan yer üst ve alt buğulu alanlara eşit
       paylaştırılır, yazılar da bu alanların tam ortasında durur. */
    .ays-mobil-sigdir .ays-oranli .ays-medya-katmani {
        flex: 0 1 auto;
        width: 100%;
        height: auto;
        aspect-ratio: var(--ays-gorsel-oran);
    }
    .ays-mobil-sigdir .ays-oranli .ays-ust-alan,
    .ays-mobil-sigdir .ays-oranli .ays-alt-alan { flex: 1 0 auto; } /* Büyür ama içeriğinden küçülmez */

    /* Tema stilleri (ör. h1/p için sola hizalama, kenar boşluğu) ortalamayı
       bozmasın: mobilde buğulu alandaki her öğe zorunlu olarak ortalı */
    .ays-hero .ays-ust-alan > *,
    .ays-hero .ays-alt-alan > * {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: 0 !important;
        top: 0 !important;
        align-self: center !important;
    }
    .ays-hero .ays-alt-alan .ays-butonlar,
    .ays-hero .ays-alt-alan .ays-etiketler { justify-content: center !important; }

    /* Sığdırma ölçeği (JS slayt başına verir; 1 = küçültme yok) */
    .ays-ust-alan > *,
    .ays-alt-alan > * { zoom: var(--ays-olcek, 1); }
    .ays-alt-alan .ays-butonlar,
    .ays-alt-alan .ays-etiketler { justify-content: center; }
    .ays-ust-alan .ays-baslik { margin: 0; }
    .ays-alt-alan > :last-child { margin-bottom: 0; }
    .ays-alt-alan:not(:has(*)) { padding: 0; } /* Alt alanda içerik yoksa yer kaplamasın */

    /* Konum kaydırmaları yazıyı buğulu alandan görselin üstüne taşımasın */
    .ays-hero .ays-konum { left: 0; top: 0; }

    /* Noktalar ve (alta taşınmış) oklar alt buğulu alanın en altında,
       yazıların altında kendi şeritlerinde dursun */
    .ays-coklu .ays-alt-alan { padding-bottom: 42px; }
    .ays-coklu.ays-mobil-ok-alt .ays-alt-alan { padding-bottom: 54px; }
    .ays-coklu.ays-mobil-ok-alt .ays-icerik { padding-bottom: 0; }

    /* Nokta şeridi tam genişlikte olduğu için alttaki okların ortasına
       binip dokunuşu yutuyordu; artık yalnızca noktaların kendisi tıklanır */
    .ays-noktalar { pointer-events: none; }
    .ays-nokta { pointer-events: auto; }
}