/* ---------------------------------------------------------------------------
   Before / After - urun sayfasi surukle-karsilastir blogu
   (Niova_BeforeAfter::product/before-after.phtml)

   Bu temada Tailwind ONCEDEN derleniyor (JIT yok). Sablonda yazilan keyfi ya da
   az kullanilan bir sinif derlemede bulunmayabilir ve SESSIZCE hicbir sey yapmaz
   - o yuzden bilesenin butun stilleri burada, duz CSS. Hicbir Tailwind sinifina
   bagli degil.

   Zemin beyaz, golge yok: referans tasarim gorseli cerceveden cikariyor, kutu
   kenarligi/golgesi yok.
   --------------------------------------------------------------------------- */

.ba {
    background: #fff;

    /* Blogun ulasabilecegi en buyuk yukseklik. Genislik bundan turetiliyor
       (asagida .ba__stage), yani oran hicbir zaman bozulmuyor.

       OLCULDU: sinir 78vh iken 1440x900 ekranda blok 468x702 cikiyordu -
       ekranin %78'i tek bir bolume gidiyor, urun sayfasinin geri kalani
       goruntuden cikiyordu. 520px'de blok 347x520; galeriden sonra gelen
       bolumun basligi ayni ekranda kaliyor ve karsilastirma tek bakista
       goruluyor. Mobilde 420px, 393px'lik ekranda 280x420 demek - kart
       yuksekliginde, sayfayi domine etmiyor. */
    --ba-max-h: 420px;
    /* Urun sayfasindaki diger tam genislik bolumleriyle ayni dikey ritim. */
    margin: 48px 0;
}

@media (min-width: 768px) {
    .ba {
        margin: 64px 0;
        --ba-max-h: 520px;
    }
}

.ba__inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 16px;

    /* `.column.main` bir flex kabi; flex ogesinin varsayilan `min-width: auto`
       degeri onu ICERIGININ min-content genisligine kadar buyutur ve o noktadan
       sonra hicbir genislik siniri tutmaz. Taban sifirlanmadan blok sayfadan
       tasabiliyor. */
    min-width: 0;
    width: 100%;
}

@media (min-width: 1024px) {
    /* Sitenin geri kalaniyla ayni oluk: header, kategori basligi ve urun
       izgarasi da 80px. */
    .ba__inner { padding: 0 80px; }
}

.ba__sronly {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- sahne ----------------------------------------------------------------
   Yukseklik `aspect-ratio` ile sablondan geliyor (before gorselinin gercek
   olculeri). Boylece gorseller inmeden once de dogru yuksekligi aliyor -
   yerlesim ziplamasi (CLS) olmuyor. */
.ba__stage {
    position: relative;
    width: 100%;

    /* Genislik iki sinirin kucugu:
         760px            - masaustunde blogun makul olcusu
         78vh * oran      - yuksekligin ekrani asmamasi icin
       OLCULDU: 2:3 bir urun cekiminde blok 1440x900 ekranda 760x1140 cikiyordu;
       tutamak viewport'un 240px altinda kaliyor, karsilastirma tek bakista
       gorulemiyordu. `max-height` ile kirpmak yanlis olurdu - oran kutusu
       bozulunca gorsel `contain` ile yanlardan bosluklu durur ve ayirici
       gorselin degil kutunun yuzdesine oturur, kirpma cizgisiyle ayrisir.
       `--ba-ratio` sablondan, gorselin gercek olculerinden geliyor. */
    max-width: min(760px, calc(var(--ba-max-h) * var(--ba-ratio, 0.8)));

    margin: 0 auto;
    overflow: hidden;
    background: #fff;

    /* Dikey kaydirma tarayicida kalsin (mobilde blogun uzerinden sayfa
       kaydirilabilsin), yatay jest bize gelsin. `touch-action: none` verilseydi
       telefonda bu blogun uzerinde sayfa hic kaymazdi. */
    touch-action: pan-y;

    -webkit-user-select: none;
    user-select: none;
    cursor: ew-resize;
}

.ba__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    /* `contain`: iki gorselin orani birebir ayni degilse `cover` birini kirpar
       ve karsilastirma yalan soyler. Oran kutusu zaten before gorselinden
       geldigi icin dogru cift tam oturur. */
    object-fit: contain;
    object-position: center;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

/* Kirpilan taraf ustte; clip-path sablondan yuzde olarak veriliyor. */
.ba__img--before {
    clip-path: inset(0 50% 0 0);
}

/* --- ayirici cizgi --------------------------------------------------------
   Beyaz cizgi beyaz urun cekiminde kaybolur, siyah cizgi koyu gorselde
   kaybolur; tutamakla ayni acik gri ikisinde de ayirt ediliyor. */
.ba__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: #C9C9C9;
    pointer-events: none;
}

/* --- tutamak --------------------------------------------------------------
   44px: dokunmatik hedef alt siniri. Cizginin uzerinde ortali durur. */
.ba__handle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: #E5E5E5;
    color: #4A4A4A;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ew-resize;

    /* Tutamagin uzerinde dikey kaydirmaya da izin verilmiyor: parmak buradaysa
       niyet surukleme. */
    touch-action: none;
}

.ba__handle:focus-visible {
    outline: 2px solid #1B1B1B;
    outline-offset: 2px;
}

.ba__icon {
    width: 20px;
    height: 20px;
    display: block;
    pointer-events: none;
}

/* --- taraf adlari ("Disi" / "Ici") ------------------------------------------
   Alt kosede, kucuk ve sakin: asil vurgu ustteki buyuk etikette. Metin
   attribute'tan geliyor, sabit "Before"/"After" degil. */
.ba__side {
    position: absolute;
    bottom: 8px;
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.08em;
    /* BILEREK buyuk harfe cevrilmiyor. Etiketler magazacinin serbest
       metni ve CSS `uppercase` Turkce'de bozuyor: "İçi" -> "İÇI" (son harf
       noktasiz I). Dogru sonuc icin elemanin `lang="tr"` olmasi gerekir,
       ama metnin dilini bilmiyoruz - urun basina degisebilir.
       Ne yazilirsa o cikiyor; buyuk harf istiyorsa admin buyuk yazar. */
    text-transform: none;
    color: #4A4A4A;
    pointer-events: none;
}

.ba__side--before { left: 8px; }
.ba__side--after  { right: 8px; }

@media (min-width: 768px) {
    .ba__side { bottom: 12px; font-size: 13px; }
    .ba__side--before { left: 12px; }
    .ba__side--after  { right: 12px; }
}

/* --- etiket ("+10 CM") ----------------------------------------------------
   Sol ustte, buyuk ve koyu. `pointer-events: none` olmasa etiketin uzerinden
   baslayan surukleme metin secimine donusurdu. */
.ba__label {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 30px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #1B1B1B;
    pointer-events: none;
}

@media (min-width: 768px) {
    .ba__label {
        top: 12px;
        left: 12px;
        font-size: 40px;
    }
}

/* ---------------------------------------------------------------------------
   Isaretler (oklu etiketler)

   Her isaret gorselin uzerinde sabit bir koordinatta duruyor ve ayiricinin
   hangi tarafinda kaldiysa o metni gosteriyor: ayni nokta, iki cevap.
   Nokta sagdaysa etiket sola aciliyor (`--left`), degilse saga - kadraj
   disina tasmasin diye.

   `pointer-events: none`: isaretler suruklemeyi engellememeli, tiklama
   dogrudan sahneye gitsin.
   --------------------------------------------------------------------------- */
.ba__spots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

/* Nokta TAM capa koordinatinda durmali.
   `translate(-50%,-50%)` butun satiri (nokta + cizgi + metin) noktanin
   uzerine ortaliyordu, yani nokta satirin yarisi kadar kayiyordu - olculen
   sonuc: "goose down" isareti tuyun degil, botun disindaki bos alanin
   uzerine dusuyordu. Dikeyde ortalama dogru; yatayda satir noktanin
   yanindan BASLAMALI.
     saga acilan : nokta satirin basinda -> yalnizca nokta yaricapi kadar kaydir
     sola acilan : satir ters, nokta SONDA -> satir genisligi kadar geri kaydir */
.ba__spot {
    position: absolute;
    display: flex;
    align-items: center;
    transform: translate(-3.5px, -50%);
    white-space: nowrap;
}
.ba__spot--left {
    flex-direction: row-reverse;
    transform: translate(calc(-100% + 3.5px), -50%);
}

.ba__spot-dot {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: #1B1B1B;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .85);
}

.ba__spot-line {
    flex: 0 0 34px;
    height: 1px;
    background: #1B1B1B;
    opacity: .55;
}

.ba__spot-text {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1B1B1B;
    /* Gorsel acik ama her yeri degil; ince beyaz hale her zeminde okutuyor. */
    text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 9px #fff;
    padding: 0 2px;
}

@media (max-width: 767px) {
    .ba__spot-line { flex-basis: 20px; }
    .ba__spot-text { font-size: 10px; letter-spacing: .04em; }
    .ba__spot-dot { flex-basis: 6px; width: 6px; height: 6px; }
}

/* ---------------------------------------------------------------------------
   Sol sutun: alinti + ozellik listesi

   Liste ile gorsel ayni Alpine kapsamini paylasiyor: bir ozelligin uzerine
   gelince gorseldeki isaret buyuyup koyulasiyor, digerleri soluyor. Iliski
   tek yonlu degil - isaretin uzerine gelmek de listeyi vurguluyor.
   --------------------------------------------------------------------------- */
/* Uc sutun: DIS ozellikler | karsilastirma | IC ozellikler.
   Alinti ustte, uc sutunu birden kapsiyor. */
@media (min-width: 1024px) {
    .ba__inner--listeli {
        display: grid;
        grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 260px);
        grid-template-areas:
            "alinti alinti alinti"
            "dis    sahne  ic";
        column-gap: 36px;
        row-gap: 8px;
        align-items: center;
        max-width: 1360px;
        margin-inline: auto;
    }
    .ba__inner--listeli > .ba__alinti { grid-area: alinti; }
    .ba__inner--listeli > .ba__yan--dis { grid-area: dis; }
    .ba__inner--listeli > .ba__stage { grid-area: sahne; }
    .ba__inner--listeli > .ba__yan--ic { grid-area: ic; }

    /* Dis sutun saga dayali: metin gorsele bakar, sayfa ortaya toplanir. */
    .ba__yan--dis { text-align: right; }
    .ba__yan--dis .ba__oge { flex-direction: row-reverse; margin-left: 0; margin-right: -12px; }
    .ba__yan--dis .ba__oge-metin { text-align: right; }
}

.ba__yan-baslik {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E3DED8;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8A8178;
}

.ba__yan { min-width: 0; }

.ba__alinti {
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}
.ba__alinti-metin {
    margin: 0 0 10px;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.25;
    color: #1B1B1B;
    font-weight: 400;
}
.ba__alinti-kaynak {
    font-size: 13px;
    font-style: normal;
    color: #6B6B6B;
    letter-spacing: .02em;
}

.ba__liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ba__oge {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 12px;
    margin-left: -12px;
    border-radius: 6px;
    cursor: default;
    transition: background-color .18s ease, opacity .18s ease;
}
.ba__oge:focus { outline: 2px solid #1B1B1B; outline-offset: 2px; }
.ba__oge--aktif { background: #F4F1ED; }

.ba__oge-ikon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: transform .18s ease;
}
.ba__oge--aktif .ba__oge-ikon { transform: scale(1.12); }
.ba__oge-ikon--bos { background: #EFEBE6; border-radius: 9999px; }

.ba__oge-metin { min-width: 0; }

.ba__oge-baslik {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1B1B1B;
}
.ba__oge-aciklama {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #5A524B;
}

/* --- gorseldeki isaretin vurgusu --- */
.ba__spot {
    transition: opacity .18s ease;
}
.ba__spot--soluk { opacity: .25; }
.ba__spot--aktif .ba__spot-dot {
    transform: scale(1.6);
    background: #1B1B1B;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .95);
}
.ba__spot--aktif .ba__spot-text {
    font-weight: 700;
}
.ba__spot--aktif .ba__spot-line { opacity: 1; }
.ba__spot-dot { transition: transform .18s ease, box-shadow .18s ease; }

@media (max-width: 1023px) {
    /* Dar ekranda: alinti, karsilastirma, sonra iki liste alt alta.
       Karsilastirma once gorulsun, listeler onu aciklasin. */
    .ba__inner--listeli { display: flex; flex-direction: column; gap: 22px; }
    .ba__inner--listeli > .ba__alinti { order: 1; }
    .ba__inner--listeli > .ba__stage  { order: 2; }
    .ba__inner--listeli > .ba__yan--dis { order: 3; }
    .ba__inner--listeli > .ba__yan--ic  { order: 4; }
    .ba__alinti { margin-bottom: 20px; }
    .ba__alinti-metin { font-size: 20px; }
    .ba__oge { padding: 12px 10px; margin-left: -10px; gap: 12px; }
    .ba__oge-ikon { flex-basis: 34px; width: 34px; height: 34px; }
}

/* Listeden tetiklenen konum degisimi yumusak olsun; surukleme sirasinda
   `--yumusak` sinifi dusuyor, cunku gecis orada cizgiyi parmagin gerisinde
   birakiyor. */
.ba__stage--yumusak .ba__img--before,
.ba__stage--yumusak .ba__divider,
.ba__stage--yumusak .ba__handle {
    transition: clip-path .38s cubic-bezier(.22,.61,.36,1), left .38s cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------------------
   Mobil: gorsel kenardan kenara

   Blogun olugu (`.ba__inner` padding'i) telefonda gorseli iki yandan 16'sar px
   kisitliyordu; 393px'lik bir ekranda sahne 361px kaliyor, bot kucuk duruyordu.
   Karsilastirma jesti de daralan alanda daha az yol buluyor.

   Oluk sifirlaniyor ama METINDEN kaldirilmiyor: alinti ve iki ozellik sutunu
   kendi 16px'ini aliyor, yoksa yazi ekranin kenarina yapisir. Yalnizca sahne
   tam genislige aciliyor.
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .ba__inner { padding: 0; }
    .ba__alinti,
    .ba__yan { padding-left: 16px; padding-right: 16px; }

    /* Sahnenin ust siniri masaustu icindi (min(760px, yukseklik*oran)); telefonda
       ekran zaten bundan dar, ama tabletde 768-1023 arasi sinir devreye girip
       gorseli yine ortalar - orada oluksuz tam genislik istemiyoruz, cunku
       gorsel devasa olur. Bu yuzden sinir yalnizca <768'de kaldiriliyor. */
}

@media (max-width: 767px) {
    .ba__stage { max-width: 100%; }
}