/* Nova Pet Kuaför - Hero Slider (Bootstrap 5 carousel tabanlı) */
.nova-slider { position: relative; overflow: hidden; background: #0b0b0b; }
.nova-slider .carousel,
.nova-slider .carousel-inner { height: 100%; }
.nova-slider .carousel-item { height: 100%; }

.nova-slider--small  { height: 44vh; min-height: 340px; }
.nova-slider--medium { height: 64vh; min-height: 440px; }
.nova-slider--large  { height: 82vh; min-height: 520px; }
.nova-slider--full   { height: 100vh; min-height: 560px; }

.nova-slide { position: relative; height: 100%; width: 100%; overflow: hidden; }

.nova-slide__media {
    position: absolute; inset: 0; width: 100%; height: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
/* cover: alanı doldurur, gerekirse kırpar | contain: görseli bozmadan tam gösterir | fill: alana esnetir */
.nova-slide__media--cover   { background-size: cover; }
.nova-slide__media--contain { background-size: contain; background-color: #0b0b0b; }
.nova-slide__media--fill    { background-size: 100% 100%; }

.nova-slide__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.nova-slide__content {
    position: relative; z-index: 2; height: 100%;
    display: flex; flex-direction: column;
    padding-block: 2.5rem;
    overflow-y: auto;
}
.nova-slide__content.v-start  { justify-content: flex-start; }
.nova-slide__content.v-center { justify-content: center; }
.nova-slide__content.v-end    { justify-content: flex-end; }

.nova-slide__inner { width: 100%; }
.nova-slide__inner.w-narrow { max-width: 520px; }
.nova-slide__inner.w-normal { max-width: 720px; }
.nova-slide__inner.w-wide   { max-width: 960px; }
.nova-slide__inner.w-full   { max-width: 100%; }

.nova-slide__inner.t-start  { text-align: left; margin-right: auto; }
.nova-slide__inner.t-center { text-align: center; margin-left: auto; margin-right: auto; }
.nova-slide__inner.t-end    { text-align: right; margin-left: auto; }

/* Metin teması: başlık/alt başlık/açıklama elemanlarının kendi renkleri (site h2 stilleri vb.)
   kalıtımı ezdiği için renkleri doğrudan bu elemanlara da uyguluyoruz. */
.nova-slide__content.theme-light,
.nova-slide__content.theme-light .nova-slide__title,
.nova-slide__content.theme-light .nova-slide__subtitle,
.nova-slide__content.theme-light .nova-slide__desc { color: #fff; }
.nova-slide__content.theme-light { text-shadow: 0 2px 12px rgba(0,0,0,.35); }

.nova-slide__content.theme-dark,
.nova-slide__content.theme-dark .nova-slide__title,
.nova-slide__content.theme-dark .nova-slide__subtitle,
.nova-slide__content.theme-dark .nova-slide__desc { color: #111; text-shadow: none; }

.nova-slide__title    { font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 3.2rem); line-height: 1.15; margin-bottom: .5rem; }
.nova-slide__subtitle { font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 500; margin-bottom: .75rem; }
.nova-slide__desc     { font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.5; opacity: .95; margin-bottom: 1.25rem; }
.nova-slide__actions  { display: flex; flex-wrap: wrap; gap: .75rem; }
.nova-slide__inner.t-center .nova-slide__actions { justify-content: center; }
.nova-slide__inner.t-end    .nova-slide__actions { justify-content: flex-end; }

/* Animasyonlar (aktif slide'a .nova-animate eklenince tetiklenir) */
.nova-anim { opacity: 0; }
.nova-anim--fade    { transition: opacity .8s ease; }
.nova-anim--fade-up { transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.nova-anim--zoom    { transform: scale(.92); transition: opacity .8s ease, transform .8s ease; }
.carousel-item.active .nova-animate .nova-anim { opacity: 1; transform: none; }

/* Dokunma hedefleri: Bootstrap indicator'ları 3px yüksekliğinde; tıklanabilir alanı büyütüyoruz.
   Görünen çizgi ::after ile çiziliyor, buton kendisi 24px+ şeffaf hedef alan. */
.nova-slider .carousel-indicators { gap: 4px; }
.nova-slider .carousel-indicators [data-bs-target] {
    width: 32px; height: 24px; background: transparent; border: 0;
    position: relative; opacity: 1;
}
.nova-slider .carousel-indicators [data-bs-target]::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    height: 3px; transform: translateY(-50%);
    background-color: #fff; opacity: .5; transition: opacity .3s ease;
}
.nova-slider .carousel-indicators .active::after { opacity: 1; }

/* Fade geçiş modu */
.nova-slider--fade .carousel-item { transition: opacity .9s ease !important; }

/* Tablet ve altı: sabit yükseklik yerine içeriğe göre büyüsün, metin kırpılmasın.
   Neden: masaüstünde yükseklik zinciri yüzde (%) ile kuruluyor (.carousel / .carousel-inner
   / .carousel-item / .nova-slide hepsi height:100%). Mobilde bu zincir "height:auto"ya
   düşünce yüzde-yükseklikler 0'a çöküyordu: (1) mutlak konumlu .nova-slide__media yüksekliğini
   kaybedip içerik kadar kalıyor, (2) .nova-slider'ın min-height'ı ile çöken içerik arasında
   koca bir siyah bant (.nova-slider arka planı #0b0b0b) oluşuyor, (3) v-center içerik
   dikeyde ortalanırken üstten kırpılmış gibi görünüyordu.
   Çözüm: mobilde yükseklik zincirini yüzde yerine somut min-height ile kuruyoruz. */
@media (max-width: 991.98px) {
    .nova-slider,
    .nova-slider--small,
    .nova-slider--medium,
    .nova-slider--large,
    .nova-slider--full { height: auto; min-height: 0; }

    .nova-slider .carousel,
    .nova-slider .carousel-inner,
    .nova-slider .carousel-item { height: auto; }

    .nova-slide { height: auto; }

    .nova-slider--small  .carousel-item,
    .nova-slider--small  .nova-slide,
    .nova-slider--small  .nova-slide__content { min-height: 60vh; }
    .nova-slider--medium .carousel-item,
    .nova-slider--medium .nova-slide,
    .nova-slider--medium .nova-slide__content { min-height: 66vh; }
    .nova-slider--large  .carousel-item,
    .nova-slider--large  .nova-slide,
    .nova-slider--large  .nova-slide__content { min-height: 74vh; }
    .nova-slider--full   .carousel-item,
    .nova-slider--full   .nova-slide,
    .nova-slider--full   .nova-slide__content { min-height: 88vh; }

    .nova-slide__content { overflow: visible; padding-block: 3rem; }
}

@media (max-width: 575.98px) {
    .nova-slide__content { padding-block: 2.25rem; }
    .nova-slide__title    { font-size: clamp(1.4rem, 7vw, 2rem); }
    .nova-slide__subtitle { font-size: 1rem; }
    .nova-slide__desc     { font-size: .92rem; }
    .nova-slide__actions .btn { flex: 1 1 auto; }
    /* Mobilde okları kenara taşımayıp görünür tut */
    .nova-slider .carousel-control-prev,
    .nova-slider .carousel-control-next { opacity: .85; }
}

/* ------- Admin canlı önizleme: kartın içine sığacak küçük ölçek ------- */
.nova-slider--preview,
.nova-slider--preview .carousel-item { height: 320px !important; min-height: 0 !important; }
.nova-slider--preview .nova-slide,
.nova-slider--preview .nova-slide__content { min-height: 0 !important; }
.nova-slider--preview .nova-slide__content { padding-block: 1.25rem; overflow: hidden; }
.nova-slider--preview .container { padding-inline: 1.25rem; }
.nova-slider--preview .nova-slide__title    { font-size: 1.4rem; }
.nova-slider--preview .nova-slide__subtitle { font-size: 1rem; }
.nova-slider--preview .nova-slide__desc     { font-size: .88rem; margin-bottom: .75rem; }
.nova-slider--preview .btn { padding: .35rem .9rem; font-size: .85rem; }