/* Batuvalve Hero Slider — Smart Slider 3 yerine. Kutuphane yok. */

.btvlv-hs {
    --btvlv-hs-h: 500px;
    --btvlv-hs-t: 800ms;
    --btvlv-hs-overlay: 0;
    position: relative;
    width: 100%;
}

/* --- Slaytlar ------------------------------------------------------- */

/* Varsayilan: Smart Slider'in "full width" davranisi — yukseklik genislige
   gore oranla buyur (1200x500 => 2.4). Sabit yukseklik ayri sinifla. */
.btvlv-hs-viewport {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--btvlv-hs-ar, 2.4);
    min-height: var(--btvlv-hs-minh, 0px);
}

.btvlv-hs--fixed-h .btvlv-hs-viewport {
    aspect-ratio: auto;
    height: var(--btvlv-hs-h, 500px);
}

.btvlv-hs-track {
    display: flex;
    height: 100%;
    /* JS yokken ilk slayt zaten gorunur; gecis JS hazir olunca acilir */
    transition: none;
    /* 🔴 `will-change: transform` KOYMA: ayri kompozit katman olusturuyor ve
       ilk slaytin gorseli yuklendigi halde ilk boyamada ekrana gelmiyor
       (tetikleyici bir repaint olana kadar bos duruyor). */
}

.btvlv-hs.is-ready .btvlv-hs-track {
    transition: transform var(--btvlv-hs-t) cubic-bezier(.4, 0, .2, 1);
}

.btvlv-hs-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.btvlv-hs-media {
    position: absolute;
    inset: 0;
}

.btvlv-hs-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: var(--btvlv-hs-overlay);
    pointer-events: none;
}

/* 🔴 Secici `.btvlv-hs` ile baslamali: Elementor'un `.elementor img{height:auto}`
   kurali tek sinifli seciciyi yener ve gorsel dogal boyunda kalir.
   🔴 Ayrica SINIFA degil YAPIYA bagla: Imagify gorseli <picture> ile sarinca
   `btvlv-hs-img` sinifi <img>'den kayboluyor ve kural tutmuyor. */
.btvlv-hs .btvlv-hs-media img,
.btvlv-hs .btvlv-hs-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    max-width: none;
}

/* Imagify <picture> ile sarmaladiginda da tam kapla */
.btvlv-hs .btvlv-hs-media picture,
.btvlv-hs .btvlv-hs-thumb picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- Metin karti ---------------------------------------------------- */

.btvlv-hs-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    max-width: var(--btvlv-hs-cw, 1320px);
    margin: 0 auto;
    /* Canlidaki yerlesim: kart ALTA hizali, alt kenardan ~50px iceride */
    padding: var(--btvlv-hs-pad, 50px) 20px;
    display: flex;
    align-items: var(--btvlv-hs-valign, flex-end);
}

.btvlv-hs-card {
    max-width: 480px;
    padding: 32px 36px;
    background: rgba(255, 255, 255, .86);
    border-left: 3px solid #2382C4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.btvlv-hs-title {
    margin: 0;
    font-size: 30px;
    line-height: 1.22;
    font-weight: 700;
    color: #1a1a1a;
    text-wrap: balance;
}

.btvlv-hs-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(0, 0, 0, .8);
}

.btvlv-hs-btn {
    display: inline-block;
    padding: 11px 22px;
    background: #2382C4;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
    transition: filter .2s ease;
}

.btvlv-hs-btn:hover,
.btvlv-hs-btn:focus-visible {
    filter: brightness(1.12);
    color: #fff;
}

/* --- Oklar ---------------------------------------------------------- */

.btvlv-hs-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    opacity: .75;
    transition: opacity .2s ease;
}

.btvlv-hs-nav:hover,
.btvlv-hs-nav:focus-visible { opacity: 1; }

.btvlv-hs-nav svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}

.btvlv-hs-prev { left: 6px; }
.btvlv-hs-next { right: 6px; }

/* --- Kucuk resim seridi --------------------------------------------- */

.btvlv-hs-thumbs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
}

.btvlv-hs-thumb {
    width: 100px;
    height: 60px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: .45;
    transition: opacity .2s ease;
    line-height: 0;
}

.btvlv-hs-thumb:hover,
.btvlv-hs-thumb:focus-visible { opacity: .8; }
.btvlv-hs-thumb.is-active { opacity: 1; }

.btvlv-hs .btvlv-hs-thumb img,
.btvlv-hs .btvlv-hs-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: none;
}

.btvlv-hs-nav:focus-visible,
.btvlv-hs-thumb:focus-visible {
    outline: 2px solid #2382C4;
    outline-offset: 2px;
}

/* --- Duyarli -------------------------------------------------------- */

@media (max-width: 1024px) {
    .btvlv-hs-card { padding: 24px 26px; }
    .btvlv-hs-title { font-size: 24px; }
    .btvlv-hs-thumb { width: 76px; height: 46px; }
}

@media (max-width: 767px) {
    .btvlv-hs-inner { padding: 0 14px; }
    .btvlv-hs-card {
        max-width: 100%;
        padding: 18px 20px;
        gap: 10px;
    }
    .btvlv-hs-title { font-size: 19px; }
    .btvlv-hs-text  { font-size: 14px; }
    .btvlv-hs-nav   { width: 38px; height: 38px; }
    .btvlv-hs-nav svg { width: 26px; height: 26px; }
    /* Serit mobilde yatay kayar; sarma yapip sayfayi uzatmasin.
       🔴 `justify-content: center` TEK BASINA KULLANILAMAZ: serit tasarsa
       ilk kucuk resimler kaydirma alaninin disinda kalir ve ULASILAMAZ olur.
       `safe center` sigdiginda ortalar, tastiginda kendiliginden `start`a
       doner. Ustteki duz `center` yalnizca `safe`i tanimayan eski
       tarayicilar icin yedek. */
    .btvlv-hs-thumbs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: center;
        justify-content: safe center;
        scrollbar-width: none;
    }
    .btvlv-hs-thumbs::-webkit-scrollbar { display: none; }
    .btvlv-hs-thumb { flex: 0 0 auto; width: 64px; height: 40px; }
}

/* --- Giris animasyonu -----------------------------------------------
   Efekt CSS keyframe ile DEGIL, JS (Web Animations API) ile calisiyor.
   Sebep: tema `@media (prefers-reduced-motion: reduce)` altinda
   `* { animation: none !important }` yazip tum CSS animasyonlarini
   olduruyor. Ayrinti icin btvlv-hero-slider.js -> animateIn(). */

@media (prefers-reduced-motion: reduce) {
    .btvlv-hs.is-ready .btvlv-hs-track { transition: none; }
}

/* Mobilde kartta yalnizca baslik + buton kalsin (widget ayari: Hide text on mobile).
   Kural Elementor `selectors` ile degil burada tutuluyor: Elementor kaydedilmemis
   varsayilan deger icin secici CSS'ini basmiyor. */
@media (max-width: 767px) {
  .btvlv-hs--no-text-mobile .btvlv-hs-text { display: none; }
}

/* Mobile Title alani doluysa iki span basilir; hangisinin gorunecegini burasi secer. */
@media (max-width: 767px) { .btvlv-hs-title .btvlv-hs-only-desktop { display: none; } }
@media (min-width: 768px) { .btvlv-hs-title .btvlv-hs-only-mobile  { display: none; } }

/* 🔴 TASMA DUZELTMESI.
   .btvlv-hs-card bir column flex ve `align-items: flex-start` — bu, cocuklarini
   ICERIK genisliginde birakir, kart genisligiyle SINIRLAMAZ. Uzun bir baslik
   sarmadan tek satir kalip karttan (ve mobilde ekrandan) tasiyordu.
   Cozum: cocuklari karta sigdir + gerektiginde kelimeyi bol. */
.btvlv-hs-card > * { max-width: 100%; min-width: 0; }
.btvlv-hs-title,
.btvlv-hs-text { overflow-wrap: break-word; }

/* 🔴 ASIL TASMA SEBEBI.
   `.btvlv-hs-inner` bir ROW flex; `.btvlv-hs-card` onun flex ogesi. Flex ogelerinin
   varsayilani `min-width: auto` -> oge, icerigin min-content genisliginden DAHA DAR
   olamaz. Uzun bir baslik bu yuzden sarmiyor, kart ekrandan tasiyordu.
   Onceki duzeltme yalnizca kartin COCUKLARINA min-width:0 vermisti; asil gereken
   kartin KENDISINDE. */
.btvlv-hs-card { min-width: 0; }

/* 🔴 SAFARI: baslik tek satirda kalip sarmiyor.
   .btvlv-hs-card column flex + `align-items: flex-start` -> cocuklar SHRINK-TO-FIT,
   yani max-content genisliginde. `max-width:100%` Chrome'da yetiyor, Safari'de
   yetmiyor. Belirsizligi kaldirmak icin basliga ACIKCA `width:100%` veriyoruz;
   boylece sarmak zorunda kalir. `width` yalnizca BASLIGA verilir - tum cocuklara
   verilirse READ MORE butonu da kart genisligine yayilir.
   `text-wrap: balance` da mobilde sifirlaniyor (Safari uygulamasi farkli). */
@media (max-width: 767px) {
  .btvlv-hs-card  { width: 100%; }
  .btvlv-hs-title {
    width: 100%;
    max-width: 100%;
    text-wrap: wrap;
    overflow-wrap: break-word;
  }
}

/* ⚠️ 3.9.8'deki `.btvlv-hs-card { width:100% }` GERI ALINDI: tasmayi coziyordu
   ama kart tum alani kapliyordu, tasarim degisiyordu. Kartin daralabilmesi
   `min-width:0` + `max-width:min(...,100%)` ile saglaniyor. Basliktaki
   `width:100%` KALIYOR - o kartin genisligini degistirmez, yalnizca basligin
   kart icinde sarmasini garanti eder (Safari icin gerekli). */
@media (max-width: 767px) {
  .btvlv-hs-card { width: auto; }
}

/* Tablette de aciklama metnini gizle (widget ayari: Hide text on tablet). */
@media (min-width: 768px) and (max-width: 1024px) {
  .btvlv-hs--no-text-tablet .btvlv-hs-text { display: none; }
}

/* 🔑 Ekranda görünmez, ekran okuyucu ve arama motoru için okunur metin.
   `clip-path` ile gizlenen metin innerText'e DAHİLDİR — Lighthouse `link-text`
   denetimi bu sayede "READ MORE" yerine benzersiz bağlantı metni görür.
   `display:none` veya `visibility:hidden` KULLANILMAZ; o ikisi metni yok eder. */
.btvlv-sr-only{
	position:absolute !important;
	width:1px; height:1px;
	margin:-1px; padding:0; border:0;
	overflow:hidden;
	clip-path:inset(50%);
	white-space:nowrap;
}

/* --- Tam ekran kipi (4.29.2) -----------------------------------------
   Masaustunde slayt + kucuk resim seridi BIRLIKTE pencere yuksekligini
   doldurur; gorsel kalan alani alir. Tablet ve mobilde oran kipi surer
   (yukseklik yine --btvlv-hs-ar ile hesaplanir). */
@media (min-width: 1025px) {
    .btvlv-hs--full {
        display: flex;
        flex-direction: column;
        height: 100vh;
        min-height: 480px;
    }
    .admin-bar .btvlv-hs--full { height: calc(100vh - 32px); }
    .btvlv-hs--full .btvlv-hs-viewport {
        flex: 1 1 auto;
        min-height: 0;
        aspect-ratio: auto;
    }
    .btvlv-hs--full .btvlv-hs-thumbs { flex: none; }
}