/* SweetAlert2 + form overlay — Nutraxin marka renkleri */
:root {
    --nutraxin-primary: #dc2626;
    --nutraxin-primary-dark: #b91c1c;
    --nutraxin-success: #16a34a;
    --nutraxin-error: #dc2626;
    --nutraxin-warning: #ca8a04;
    --nutraxin-text: #101828;
    --nutraxin-bg: #fff;
}

.swal2-nutraxin.popup-class {
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(220, 38, 38, 0.15);
    padding: 2rem;
    border: 1px solid rgba(220, 38, 38, 0.12);
}

.swal2-nutraxin .swal2-title {
    color: var(--nutraxin-text);
    font-size: 1.25rem;
    font-weight: 600;
}

.swal2-nutraxin .swal2-html-container {
    color: #4a5565;
    font-size: 1rem;
    line-height: 1.5;
}

.swal2-nutraxin .swal2-success-ring { border-color: var(--nutraxin-primary) !important; }
.swal2-nutraxin .swal2-success-line-tip,
.swal2-nutraxin .swal2-success-line-long { background-color: var(--nutraxin-primary) !important; }

.swal2-nutraxin .btn-confirm {
    background: var(--nutraxin-primary) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.swal2-nutraxin .btn-confirm:hover {
    background: var(--nutraxin-primary-dark) !important;
}

.contact-form-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(16, 24, 40, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-form-overlay-inner {
    background: #fff;
    border-radius: 12px;
    padding: 2rem 3rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.contact-form-spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    border: 3px solid #f3f4f6;
    border-top-color: var(--nutraxin-primary);
    border-radius: 50%;
    animation: nutraxin-spin 0.8s linear infinite;
}

@keyframes nutraxin-spin {
    to { transform: rotate(360deg); }
}

.cms-footer-blocks:empty {
    display: none;
}

/* —— Unified page hero (desenler standardı — tüm site) —— */

.ya-unified-hero--strip {
    display: block;
    width: 100%;
    overflow: hidden;
    margin-bottom: 0;
}

.ya-unified-hero__strip-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 22, 63, 0.72) 0%, rgba(11, 22, 63, 0.2) 45%, transparent 100%);
    pointer-events: none;
}

.ya-unified-hero__strip-content {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    padding-top: 2rem;
    padding-bottom: 1.25rem;
}

.ya-unified-hero__strip-title {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.ya-unified-hero__strip-content nav,
.ya-unified-hero__strip-content a,
.ya-unified-hero__strip-content span {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.ya-unified-hero__strip-img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 7.5rem;
    max-height: 14rem;
    object-fit: cover;
    object-position: center center;
}

@media (min-width: 640px) {
    .ya-unified-hero__strip-img {
        min-height: 9rem;
        max-height: 16rem;
    }
}

.ya-unified-hero__content--on-image nav,
.ya-unified-hero__content--on-image h1,
.ya-unified-hero__content--on-image p,
.ya-unified-hero__content--on-image span {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* —— Site search modal —— */

body.ya-search-modal-open {
    overflow: hidden;
}

.ya-search-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    padding-top: max(1rem, 10vh);
}

.ya-search-modal.hidden {
    display: none;
}

.ya-search-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, 0.62);
    backdrop-filter: blur(4px);
}

.ya-search-modal__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 42rem);
    border-radius: 1rem;
    background: #fff;
    padding: 1.5rem;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.22);
}

.ya-search-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.ya-search-modal__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--nutraxin-text);
}

.ya-search-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 999px;
    background: #f3f4f6;
    color: #364153;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ya-search-modal__close:hover {
    background: #e5e7eb;
}

.ya-search-modal__form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ya-search-modal__field,
.ya-search-results__field {
    position: relative;
}

.ya-search-modal__icon,
.ya-search-results__icon {
    pointer-events: none;
    position: absolute;
    left: 1rem;
    top: 50%;
    width: 1.25rem;
    height: 1.25rem;
    transform: translateY(-50%);
    color: #6a7282;
}

.ya-search-modal__input,
.ya-search-results__input {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f7faf8;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    font-size: 1rem;
    color: var(--nutraxin-text);
}

.ya-search-modal__input:focus,
.ya-search-results__input:focus {
    outline: none;
    border-color: var(--nutraxin-primary);
    box-shadow: 0 0 0 1px var(--nutraxin-primary);
}

.ya-search-modal__submit,
.ya-search-results__submit {
    border: 0;
    border-radius: 999px;
    background: var(--nutraxin-primary);
    color: #fff;
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ya-search-modal__submit:hover,
.ya-search-results__submit:hover {
    background: var(--nutraxin-primary-dark);
}

.ya-search-modal__popular {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f3f4f6;
}

.ya-search-modal__popular-label {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6a7282;
}

.ya-search-modal__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ya-search-modal__tag {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--nutraxin-text);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.ya-search-modal__tag:hover {
    border-color: var(--nutraxin-primary);
    color: var(--nutraxin-primary);
}

/* —— Search results page —— */

.ya-search-results {
    padding: 2.5rem 0 4rem;
}

.ya-search-results__inner {
    width: min(100%, 48rem);
    margin: 0 auto;
    padding: 0 1rem;
}

.ya-search-results__head {
    margin-bottom: 1.5rem;
}

.ya-search-results__title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--nutraxin-text);
}

.ya-search-results__count {
    margin: 0;
    color: #6a7282;
}

.ya-search-results__form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.ya-search-results__empty {
    margin: 0;
    padding: 1.25rem 1rem;
    border-radius: 0.75rem;
    background: #f7faf8;
    color: #4a5565;
}

.ya-search-results__section + .ya-search-results__section {
    margin-top: 2rem;
}

.ya-search-results__section-title {
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--nutraxin-text);
}

.ya-search-results__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #eef2f7;
    border-radius: 0.75rem;
    overflow: hidden;
}

.ya-search-results__list li + li {
    border-top: 1px solid #eef2f7;
}

.ya-search-results__link {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.875rem 1rem;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.ya-search-results__link:hover {
    background: #f7faf8;
}

.ya-search-results__link-title {
    font-weight: 500;
    color: var(--nutraxin-text);
}

.ya-search-results__link-meta {
    font-size: 0.875rem;
    color: #6a7282;
}

@media (min-width: 640px) {
    .ya-search-modal__form,
    .ya-search-results__form {
        flex-direction: row;
        align-items: stretch;
    }

    .ya-search-modal__field,
    .ya-search-results__field {
        flex: 1 1 auto;
    }

    .ya-search-modal__submit,
    .ya-search-results__submit {
        flex: 0 0 auto;
        align-self: stretch;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* —— Third-party float widget ([item] bubble, e.g. chat / WhatsApp) —— */

#o34q38draces1780474032503[item],
div[item][id^="o"][id*="races"],
#tawk-bubble-container,
.tawk-min-container {
    outline: none !important;
    visibility: visible !important;
    resize: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    background: none !important;
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
    -moz-opacity: 1 !important;
    -khtml-opacity: 1 !important;
    top: auto !important;
    right: auto !important;
    bottom: 80px !important;
    left: 10px !important;
    position: fixed !important;
    border: 0 !important;
    min-height: 60px !important;
    min-width: 64px !important;
    max-height: 60px !important;
    max-width: 64px !important;
    padding: 0 !important;
    margin: 0 !important;
    -moz-transition-property: none !important;
    -webkit-transition-property: none !important;
    -o-transition-property: none !important;
    transition-property: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    width: 64px !important;
    height: 60px !important;
    display: block !important;
    z-index: 1000003 !important;
    background-color: transparent !important;
    cursor: none !important;
    float: none !important;
    border-radius: unset !important;
    pointer-events: auto !important;
    clip: auto !important;
    color-scheme: light !important;
}

/* ── Mega Menu ─────────────────────────────────────────────────── */
.ya-megamenu {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-height, 73px);
  z-index: 49;
  background: #eae6dc;
  border-top: 2px solid #e4ded2;
  border-bottom: 1px solid #e4ded2;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .13);
  transition: opacity .2s ease, visibility .2s ease;
}
.ya-megamenu__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem;
  padding: 2.5rem 1.25rem;
  align-items: start;
}

/* Link column: 3 of the 4 grid columns, pills laid out 3-across */
.ya-megamenu__links {
  grid-column: span 3 / span 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 1.5rem;
}
.ya-megamenu__item {
  display: flex;
  align-items: center;
  padding: .25rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: #1d1d1d;
  background: #ebe8e2;
  border: 1px solid #fff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  text-decoration: none;
  transition: color .2s, background .2s;
}
.ya-megamenu__item:hover,
.ya-megamenu__item.is-active {
  color: #fff;
  background: #062B5F;
}

/* Image panel */
.ya-megamenu__panel {
  grid-column: span 1 / span 1;
  position: relative;
  overflow: hidden;
}
.ya-megamenu__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .14s ease;
}
.ya-megamenu__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  color: #d1d5db;
}

@media (max-width: 1279px) {
  .ya-megamenu__panel { flex: 0 0 280px; }
}
@media (max-width: 1023px) {
  .ya-megamenu { display: none !important; }
}

/* ── Header (referans nutraxin.testmagna.com ile birebir) ─────────── */
.header-sticky { position: sticky; top: 0; z-index: 50; min-height: 85px; box-sizing: border-box; }
html { scrollbar-gutter: stable; }

/*
 * Referans derlenmiş CSS (app--wNcUPqh.css) ile birebir:
 * 640 / 768 / 1024 / 1400. Tailwind CDN varsayılan 1280/1536 burada ezilir.
 */
.container {
  width: 100% !important;
  margin-right: auto;
  margin-left: auto;
}
/*
 * Yatay boşluk sıfırlaması yalnızca masaüstünde. Bu dosya tailwind.css'ten SONRA yüklendiği için sıfırlama
 * px-5 / px-4 gibi yardımcı sınıfları eziyordu: mobilde "container px-5 lg:px-0" bölümleri ("Sağlığınız İçin,
 * Nutraxin", altbilgi, ürün karuselleri…) ekran kenarına yapışıyordu. Twill'in derlenmiş CSS'inde (.container
 * yalnızca width + margin) bu sıfırlama yok; mobilde sınıflar artık canlıdaki gibi çalışır, masaüstü değişmez.
 */
@media (min-width: 1024px) {
  .container {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 640px) { .container { max-width: 640px !important; } }
@media (min-width: 768px) { .container { max-width: 768px !important; } }
@media (min-width: 1024px) { .container { max-width: 1024px !important; } }
@media (min-width: 1400px) { .container { max-width: 1400px !important; } }

.wrap {
  z-index: 99999;
  width: 100%;
  height: 40px;
  color: #fff !important;
  padding-top: 4px;
}

.all-menu {
  display: flex;
  justify-content: end;
  margin: 2.5px 5%;
}

.all-menu li a { color: #fff; }
.all-menu .flex { align-items: center; }

.border-srch {
  border-bottom: solid 1px #052c5f;
  top: -3px;
}

.srch-input { padding: 0; }
.srch-input:focus { outline: none; box-shadow: none; }

@media only screen and (max-width: 600px) {
  .all-menu { margin: 2.5px 5px; }
}

/* ── Hero slider metin katmanı (referans slider bloğu ile birebir) ── */
.nu_padding {
  /* Referansta bu kurallar satır içi <style> ile Tailwind utility'lerini yener;
     harici dosyada aynı sonucu almak için !important gerekiyor. */
  text-align: left !important;
  width: 100%;
  left: 5% !important;
  top: 30% !important;
}

/* Referansta bu kural slider bileşeninin satır içi <style>'ında, yani Tailwind'den
   sonra geldiği için utility sınıflarını (text-[40px] font-bold) yener. Harici
   dosyada aynı sonucu almak için eleman+sınıf özgüllüğü kullanılıyor. */
h2.title-font,
.title-font {
  font-weight: 500;
  font-size: 72px;
  font-family: 'Montserrat';
  line-height: 1.1;
}

@media only screen and (max-width: 600px) {
  .nu_padding { padding: 10px !important; }
  .title-font { font-size: 40px !important; }
  .mobile-banner-hidden { display: none !important; }
}

.zoom {
  -webkit-animation: zoomin 1.5s ease;
  animation: zoomin 1.5s ease;
  animation-delay: -50ms;
  animation-fill-mode: forwards;
}

@-webkit-keyframes zoomin {
  0% { transform: scale(0.5); }
  100% { transform: scale(1); }
}

.splide__arrow--next:hover+.splide__track .is-active .zoom,
.splide__arrow--prev:hover+.splide__track .is-active .zoom {
  -webkit-animation: zoomin 1.5s ease;
  animation: zoomin 1.5s ease;
  animation-delay: -50ms;
  animation-fill-mode: forwards;
}

.zoom-img img {
  --f: 1.15;
  clip-path: inset(0);
  transition: .4s;
}
.zoom-img img:hover {
  clip-path: inset(calc((1 - 1/var(--f)) * 50%));
  scale: var(--f);
}

.back-to-top {
  width: 50px;
  height: 50px;
  background-color: #f9f9f9;
  border: 2px solid #ccc;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.back-to-top:hover {
  background-color: #eaeaea;
  transform: translateY(-5px);
}

.mobile-slider-container {
  width: 100%;
  height: 500px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-slider {
  top: 10px;
  left: -10px;
}
.mobile-slider-img {
  width: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

/* ── Mobil çekmece navigasyonu (referans .navbar ile birebir) ─────── */
.navbar .navbar-item { position: relative; z-index: 2; }

.navbar .navbar-item.has-dropdown:after {
  content: '';
  width: 32px;
  height: 49px;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="16" viewBox="0 0 9 16" fill="none"><path d="M6.04115 7.68398C5.9401 7.60385 5.85184 7.54881 5.7811 7.47566C3.98969 5.62722 2.20098 3.7767 0.410919 1.92757C0.1064 1.61265 -0.00880503 1.24199 0.111116 0.808621C0.227669 0.387098 0.503892 0.125127 0.91351 0.0296745C1.30494 -0.0615969 1.64314 0.0610275 1.92543 0.352959C2.48461 0.93055 3.04312 1.50814 3.60231 2.08643C5.12423 3.65965 6.64682 5.23287 8.16807 6.80679C8.76566 7.42479 8.76835 8.02886 8.17616 8.64129C6.09573 10.7914 4.0126 12.9408 1.93621 15.0958C1.60474 15.44 1.23016 15.5989 0.773378 15.4665C0.00601724 15.2442 -0.255384 14.2618 0.28763 13.6417C0.541621 13.3519 0.819191 13.0851 1.08666 12.8084C2.66315 11.1809 4.24031 9.55401 5.81748 7.92644C5.87609 7.86583 5.93201 7.80242 6.04115 7.68328L6.04115 7.68398Z" fill="white"/></svg>');
  background-repeat: no-repeat;
  background-size: 0.5rem;
  background-position: right 0.75rem center;
  z-index: -1;
  transition: transform 0.3s;
}

.navbar .navbar-item.has-dropdown.active:after {
  transform: rotate(90deg);
  transition: transform 0.3s;
}

.navbar .navbar-item .navbar-link { color: #fff; display: block; }

/* Footer kolon başlığı altın rengi (referans .text-gold). */
.text-gold { color: #cdac6e; }

/* Header / footer tipografi — referans text-[16px] / text-[18px] / font-[400|700] */
header.header-sticky {
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
}
header.header-sticky ul.lg\:flex {
  font-size: 16px;
  font-weight: 400;
}
header.header-sticky .all-menu a.bg-white {
  font-size: 12px;
  line-height: 1.25;
  font-weight: 500;
}
@media (min-width: 1024px) {
  header.header-sticky .all-menu a.bg-white {
    font-size: 18px;
    line-height: 1.75;
  }
}
/* Mobil: "Orijinallik Sorgulama" 15 px yüksekliğinde ince bir şeritti (dikey boşluk yok, yanlarda 20 px).
   Simgelerle (20 px) aynı hizada, tek satırlık bir düğme olarak çizilir. */
@media (max-width: 1023px) {
  header.header-sticky .all-menu a.bg-white {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    line-height: 16px;
    white-space: nowrap;
  }
}

.nx-site-footer {
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
  font-size: 16px;
}
.nx-site-footer h4 {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 0.75rem !important;
  /* Eski sitede (Twill) 27 px = 1.5; 1.75 her sütun başlığını 5 px uzatıyordu (mobilde altbilgi 14 px uzundu). */
  line-height: 1.5;
}
.nx-site-footer li a {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

/* ===== Footer — nutraxin.testmagna.com layout'undan birebir ===== */
.footer {
    color: white;
    text-align: center;
    padding: 8px 0;
    background-color: #052C5F;
}
.footer-container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.footer-links {
    display: flex; justify-content: center; align-items: center;
    gap: 16px; margin-top: 8px; font-size: 14px; flex-wrap: wrap;
}
.footer-links a { color: white; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-links .footer-sep { color: rgba(255,255,255,.55); font-size: 14px; line-height: 1; }
.nx-footer-mid { background: #fff; color: #052C5F; }

@media (max-width: 1023px) {
    .nx-site-footer .nx-footer-grid {
        display: grid !important; grid-template-columns: 1fr !important; gap: 2rem !important;
    }
    .nx-site-footer .nx-footer-grid > .nx-footer-col {
        grid-column: 1 / -1 !important; width: 100% !important;
        max-width: 100% !important; min-width: 0 !important;
    }
    .nx-site-footer .nx-footer-spacer { display: none !important; }
    .nx-site-footer .nx-footer-products {
        display: flex !important; flex-direction: column !important; gap: 0.5rem !important;
    }
    .footer { padding: 14px 0 18px; }
    .footer-links { flex-direction: column; gap: 10px; align-items: center; }
    .footer-links .footer-sep { display: none !important; }
    .nx-footer-mid {
        display: grid !important; grid-template-columns: 1fr !important;
        justify-items: center; text-align: center;
        gap: 12px;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
    .nx-footer-mid a,
    .nx-footer-mid span {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        width: 100%;
        text-align: center;
    }
}

@media (min-width: 1024px) {
    .nx-site-footer .nx-footer-products {
        flex-direction: row !important;
    }
}

/* ===== Slider — referans slider bloğunun blok-içi stilinden birebir ===== */
.mar-none { margin-right: 0rem !important; }

@keyframes slideText {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
@-webkit-keyframes slideText {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.splide__slide {
    -webkit-animation: slideText 0.5s ease;
    animation: slideText 0.5s ease;
}
.splide__track .splide__slide h2,
.splide__track .splide__slide p,
.splide__track .splide__slide a {
    -webkit-animation: slideText 0.5s ease;
    animation: slideText 0.5s ease;
}

@media (max-width: 1023px) {
  /*
   * Mobil vitrin. Eskiden kapsayıcı 500 px sabit yükseklikteydi; 648×815 görsel 398 px'ten geniş ekranlarda
   * (425 px, iPhone Plus/Max) daralıyor, slayt da görsel kadar daralıp bir sonraki slayt sağdan görünüyordu.
   * Artık slayt her zaman tam genişlik (Twill şablonundaki .splide__slide { width: 100% } kuralı), yükseklik
   * görselin oranından gelir (yer önceden ayrılır, kayma olmaz); tablette 600 px'te durur ve görsel ortalanır.
   */
  .nx-mobile-hero {
    position: relative;
    padding-bottom: 2.75rem; /* sayfalama noktaları görselin altında */
    box-sizing: border-box;
  }
  .nx-mobile-hero .splide__slide {
    width: 100%;
  }
  .nx-mobile-hero .mobile-slider-container {
    width: 100%;
    height: auto;
    aspect-ratio: 648 / 815;
    max-height: 600px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .nx-mobile-hero .mobile-slider-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
  }
  .nx-mobile-hero .splide__pagination {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0.35rem;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2;
  }
}

.desktop-slider-img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
}
.desktop-slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}
/* .hidden varken display:flex uygulanmamalı; yoksa mobil+masaüstü görseli birlikte çıkar. */
@media (min-width: 1024px) {
    .desktop-slider-container { display: block; }
    .mobile-slider-container.lg\:hidden { display: none !important; }
}
@media (max-width: 1023px) {
    .desktop-slider-container.hidden { display: none !important; }
}

/*
 * Splide init öncesi: ilk slayt görünsün, kalanlar yığılmasın.
 *
 * DİKKAT — yalnızca Splide öğeye HİÇ dokunmadan önce geçerli olmalı (:not(.is-active)). Splide v4 is-initialized
 * sınıfını mounted olayından SONRA ekler; başlangıç konumu ise tam o olayda (Move → reposition) ölçülür. Kurallar
 * :not(.is-initialized) ile sınırlıyken ölçüm anında baştaki klon tek görünen slayttı, gerçek slaytlar display:none
 * olduğu için konum 0 çıkıyor ve "loop" kaydırıcılar klon slaytla açılıyordu (mobil vitrinde sonraki slayt yandan
 * görünüyordu, blog karuseli kaymıştı). is-active / splide--loop sınıflarını Splide kurulum aşamasında, klonlardan
 * ve ölçümden önce ekler.
 */
.splide:not(.is-active):not(.is-initialized) {
    visibility: visible !important;
    overflow: hidden !important;
}
.splide:not(.is-active):not(.is-initialized) .splide__track,
.splide:not(.is-active):not(.is-initialized) .splide__list {
    visibility: visible !important;
}
.splide:not(.is-active):not(.is-initialized) .splide__list {
    display: block !important;
    overflow: hidden !important;
    width: 100% !important;
    transform: none !important;
}
.splide:not(.is-active):not(.is-initialized) .splide__list > .splide__slide {
    display: none !important;
}
.splide:not(.is-active):not(.is-initialized) .splide__list > .splide__slide:first-child {
    display: block !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.splide:not(.is-active):not(.is-initialized) .splide__pagination,
.splide:not(.is-active):not(.is-initialized) .splide__arrows,
.splide:not(.is-active):not(.is-initialized) .splide__arrow {
    display: none !important;
}