/*
 |----------------------------------------------------------------------
 | Vitrin: yönetici tarafından girilen zengin metin (rich-text)
 |----------------------------------------------------------------------
 | Sayfalar ve Hakkımızda içeriği admin panelindeki editörden serbest HTML
 | olarak geliyor; bu HTML'e Tailwind sınıfı yazılamadığı için biçimlendirme
 | burada tanımlanıyor.
 */

.rich-text {
    color: #45423c;
    line-height: 1.75;
    font-size: 0.975rem;
}

.rich-text > * + * {
    margin-top: 1rem;
}

.rich-text h1,
.rich-text h2,
.rich-text h3,
.rich-text h4 {
    color: #1B1916;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 2rem;
}

.rich-text h1 { font-size: 1.6rem; }
.rich-text h2 { font-size: 1.35rem; }
.rich-text h3 { font-size: 1.15rem; }
.rich-text h4 { font-size: 1rem; }

.rich-text p {
    margin: 0;
}

.rich-text strong {
    color: #1B1916;
    font-weight: 600;
}

.rich-text a {
    color: #7A2230;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rich-text a:hover {
    color: #4F1620;
}

.rich-text ul,
.rich-text ol {
    padding-left: 1.25rem;
}

.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }

.rich-text li + li {
    margin-top: 0.35rem;
}

.rich-text blockquote {
    border-left: 2px solid #CFCABD;
    padding-left: 1rem;
    color: #8C8A82;
    font-style: italic;
}

.rich-text img {
    max-width: 100%;
    height: auto;
}

.rich-text hr {
    border: 0;
    border-top: 1px solid #CFCABD;
    margin: 2rem 0;
}

.rich-text table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.rich-text th,
.rich-text td {
    border: 1px solid #CFCABD;
    padding: 0.5rem 0.75rem;
    text-align: left;
}

/*
 |----------------------------------------------------------------------
 | Vitrin: footer (Cartier düzeni)
 |----------------------------------------------------------------------
 | Beyaz ana alan, ortalanmış bülten, büyük harf başlıklı sütunlar
 | (mobilde akordeon) ve koyu alt şerit. Tailwind derlemesi sunucuda
 | yeniden yapılmadığı için stiller burada.
 */

.lx-footer {
    background: #fff;
    color: #1B1916;
    border-top: 1px solid #E7E4DC;
    font-size: 0.875rem;
}

.lx-footer a { color: inherit; text-decoration: none; transition: color .2s; }
.lx-footer a:hover { color: #7A2230; }

/* Bülten */
.lx-footer__news {
    max-width: 34rem;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 3rem;
    text-align: center;
}
.lx-footer__news-title {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: .01em;
    margin: 0 0 1.75rem;
}
.lx-footer__news-form { text-align: left; }
.lx-footer__news-label {
    display: block;
    font-size: .75rem;
    color: #8C8A82;
    margin-bottom: .375rem;
}
.lx-footer__news-row { display: flex; }
.lx-footer__news-input {
    flex: 1;
    min-width: 0;
    height: 3rem;
    padding: 0 1rem;
    border: 1px solid #1B1916;
    border-right: 0;
    border-radius: 0;
    background: #fff;
    color: #1B1916;
    font-size: .875rem;
}
.lx-footer__news-input:focus { outline: none; border-color: #7A2230; }
.lx-footer__news-btn {
    height: 3rem;
    padding: 0 2rem;
    background: #7A2230;
    color: #fff;
    border: 1px solid #7A2230;
    border-radius: 0;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.lx-footer__news-btn:hover { background: #fff; color: #7A2230; }
.lx-footer__news-status { margin-top: .75rem; font-size: .8125rem; color: #047857; }

/* Sütunlar */
.lx-footer__main {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem 3.5rem;
}
.lx-footer__cols {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid #E7E4DC;
}
.lx-footer__heading {
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 1.25rem;
    display: none;
}
.lx-footer__heading--always { display: block; }
.lx-footer__list { list-style: none; margin: 0; padding: 0; }
.lx-footer__list li { margin-bottom: .75rem; line-height: 1.5; }
.lx-footer__muted { color: #8C8A82; }

.lx-footer__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}
.lx-footer__arrow {
    width: .5rem;
    height: .5rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s;
}
.lx-footer__arrow.is-open { transform: rotate(-135deg) translateY(-2px); }

/* Mobil: akordeon */
.lx-footer__col { border-bottom: 1px solid #E7E4DC; }
.lx-footer__col .lx-footer__list { display: none; padding-bottom: .75rem; }
.lx-footer__col .lx-footer__list.is-open { display: block; }
.lx-footer__col--social { border-bottom: 0; text-align: center; padding-top: 1.75rem; }
.lx-footer__sep { display: none; }

.lx-footer__social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.25rem;
    justify-content: center;
}
.lx-footer__social svg { width: 1.25rem; height: 1.25rem; display: block; }

/* Alt şerit */
.lx-footer__bar { background: #fff; color: #1B1916; border-top: 1px solid #E7E4DC; }
.lx-footer__bar-inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.lx-footer__bar-left { display: flex; align-items: center; gap: 1rem; }
.lx-footer__logo { height: 2rem; width: auto; }
.lx-footer__bar-right { color: #8C8A82; }

@media (min-width: 768px) {
    .lx-footer__cols {
        grid-template-columns: repeat(4, 1fr);
        gap: 2.5rem;
        border-top: 0;
        padding-top: 1rem;
    }
    .lx-footer__heading { display: block; }
    .lx-footer__toggle { display: none; }
    .lx-footer__col { border-bottom: 0; }
    .lx-footer__col .lx-footer__list { display: block; padding-bottom: 0; }
    .lx-footer__col--social { text-align: left; padding-top: 0; }
    .lx-footer__social { justify-content: flex-start; }
    .lx-footer__bar-inner { flex-direction: row; justify-content: space-between; }
}

/*
 |----------------------------------------------------------------------
 | Vitrin: ana menü satırı + mega panel (Cartier düzeni)
 |----------------------------------------------------------------------
 | Menü logonun altında ortalı ayrı satırda; açık/aktif öğenin altında
 | garnet çizgi. Otomatik kategori panelinde kare görselli kartlar,
 | yatay kaydırma, oklar ve "Tümünü Gör".
 */

.lx-nav { border-top: 1px solid #ECE9E2; }
.lx-nav__list {
    list-style: none;
    margin: 0 auto;
    padding: 0 1.5rem;
    max-width: 80rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 2.75rem;
}
.lx-nav__link {
    position: relative;
    display: block;
    padding: .95rem 0;
    background: none;
    border: 0;
    color: #1B1916;
    font: inherit;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}
.lx-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #7A2230;
    transform: scaleX(0);
    transition: transform .2s ease;
}
.lx-nav__link:hover::after,
.lx-nav__link.is-open::after,
.lx-nav__link.is-current::after { transform: scaleX(1); }
.lx-nav__link.is-open,
.lx-nav__link.is-current { font-weight: 600; }

.lx-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border-top: 1px solid #ECE9E2;
    border-bottom: 1px solid #ECE9E2;
    box-shadow: 0 18px 30px -24px rgba(27, 25, 22, .35);
    padding: 2rem 0 1.75rem;
}
.lx-mega__inner {
    position: relative;
    max-width: 76rem;
    margin: 0 auto;
    padding: 0 3.5rem;
}
.lx-mega__track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.lx-mega__track::-webkit-scrollbar { display: none; }

.lx-mega__tile {
    flex: 0 0 calc((100% - 5 * 1.5rem) / 6);
    min-width: 9.5rem;
    scroll-snap-align: start;
    text-align: center;
    color: #1B1916;
    text-decoration: none;
}
.lx-mega__img {
    display: block;
    aspect-ratio: 1 / 1;
    background: #F2F2F2;
    overflow: hidden;
}
.lx-mega__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.lx-mega__tile:hover .lx-mega__img img { transform: scale(1.05); }
.lx-mega__name {
    display: block;
    margin-top: 1rem;
    font-size: .8125rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.6;
    transition: color .2s;
}
.lx-mega__tile:hover .lx-mega__name { color: #7A2230; }

.lx-mega__arrow {
    position: absolute;
    top: 0;
    height: calc(100% - 3rem);
    width: 2.5rem;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    color: #1B1916;
    cursor: pointer;
}
.lx-mega__arrow svg { width: 1.5rem; height: 1.5rem; }
.lx-mega__arrow:hover { color: #7A2230; }
.lx-mega__arrow--prev { left: .5rem; }
.lx-mega__arrow--next { right: .5rem; }

.lx-mega__all { text-align: center; margin-top: 1.75rem; }
.lx-mega__all a {
    display: inline-block;
    padding-bottom: .2rem;
    border-bottom: 1px solid #1B1916;
    color: #1B1916;
    font-size: .9375rem;
    text-decoration: none;
    transition: color .2s, border-color .2s;
}
.lx-mega__all a:hover { color: #7A2230; border-color: #7A2230; }

/* Elle girilen alt öğeler için panel */
.lx-mega__inner--manual { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem; }
.lx-mega__inner--manual .lx-mega__tile { flex: 0 0 11rem; }
.lx-mega__col-title {
    font-size: .6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8C8A82;
    margin: 0 0 1rem;
}
.lx-mega__col ul { list-style: none; margin: 0; padding: 0; }
.lx-mega__col li { margin-bottom: .6rem; font-size: .875rem; }
.lx-mega__col a { color: inherit; text-decoration: none; }
.lx-mega__col a:hover { color: #7A2230; }

/*
 |----------------------------------------------------------------------
 | Ana buton: bordo (marka rengi), hover'da beyaz zemin + bordo yazı
 |----------------------------------------------------------------------
 | .btn-primary Tailwind derlemesinde graphite; derleme sunucuda yeniden
 | yapılmadığı için burada eziliyor. Çerçeve inset gölgeyle verildi ki
 | hover'da beyaza dönünce buton kaybolmasın ve boyut değişmesin.
 */
.btn-primary {
    background-color: #7A2230;
    color: #fff;
    box-shadow: inset 0 0 0 1px #7A2230;
}
.btn-primary:hover {
    background-color: #fff;
    color: #7A2230;
}
.btn-primary:disabled,
.btn-primary[disabled] {
    background-color: #7A2230;
    color: #fff;
    opacity: .5;
}

/*
 |----------------------------------------------------------------------
 | Vitrin: kategori sayfası (Cartier koleksiyon düzeni)
 |----------------------------------------------------------------------
 | Tam genişlik hero, solda dar filtre sütunu, sağda kare görselli
 | ürün ızgarası (.lx-card) ve "Daha Fazla Yükle".
 */

.lx-cat-hero {
    position: relative;
    height: clamp(300px, 42vw, 560px);
    background: #1B1916;
    overflow: hidden;
}
.lx-cat-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
}
.lx-cat-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(27, 25, 22, .6) 0%, rgba(27, 25, 22, 0) 45%);
}
.lx-cat-hero__text {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.75rem;
    z-index: 1;
    text-align: center;
    color: #fff;
}
.lx-cat-hero__title {
    font-family: inherit;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 600;
    font-style: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0;
}
.lx-cat-hero__desc {
    margin: .5rem auto 0;
    max-width: 40rem;
    font-size: .9rem;
    color: rgba(255, 255, 255, .85);
}
.lx-cat-hero--plain { height: auto; padding: 4rem 0 2rem; background: #fff; }
.lx-cat-hero--plain::after { display: none; }
.lx-cat-hero--plain .lx-cat-hero__text { position: static; color: #1B1916; }
.lx-cat-hero--plain .lx-cat-hero__desc { color: #8C8A82; }

.lx-cat-wrap { max-width: 80rem; margin: 0 auto; padding: 2rem 1.5rem 5rem; }

.lx-cat { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) {
    .lx-cat { grid-template-columns: 13.5rem 1fr; gap: 3rem; }
}

/* Filtre sütunu */
.lx-cat__mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 0;
    border: 0;
    border-top: 1px solid #E7E4DC;
    border-bottom: 1px solid #E7E4DC;
    background: none;
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #1B1916;
    cursor: pointer;
}
.lx-cat__side { display: none; }
.lx-cat__side.is-open { display: block; }
@media (min-width: 900px) {
    .lx-cat__mobile-toggle { display: none; }
    .lx-cat__side { display: block; }
}

.lx-cat__crumbs {
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8C8A82;
    line-height: 1.7;
    margin-bottom: 2rem;
}
.lx-cat__crumbs a { color: inherit; text-decoration: none; }
.lx-cat__crumbs a:hover { color: #7A2230; }
.lx-cat__crumbs span { margin: 0 .25rem; }
.lx-cat__crumbs .is-current { margin: 0; color: #1B1916; }

.lx-cat__group { margin-bottom: 1.75rem; }
.lx-cat__group-title,
.lx-cat__group-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 .9rem;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #1B1916;
    text-align: left;
    cursor: pointer;
}
.lx-cat__filters-head { display: flex; align-items: baseline; justify-content: space-between; }
.lx-cat__clear {
    background: none;
    border: 0;
    padding: 0;
    font-size: .6875rem;
    color: #7A2230;
    text-decoration: underline;
    cursor: pointer;
}
.lx-cat__filters-head + .lx-cat__options { margin-bottom: 1.75rem; }

.lx-cat__chev {
    width: .45rem;
    height: .45rem;
    border-right: 1.3px solid currentColor;
    border-bottom: 1.3px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s;
}
.lx-cat__chev.is-open { transform: rotate(-135deg); }

.lx-cat__options { display: flex; flex-direction: column; gap: .7rem; }
.lx-cat__opt {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #1B1916;
    cursor: pointer;
}
.lx-cat__opt:hover { color: #7A2230; }
.lx-cat__radio,
.lx-cat__check {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: .8rem;
    height: .8rem;
    margin: 0;
    border: 1px solid #8C8A82;
    background: #fff;
    cursor: pointer;
}
.lx-cat__radio { border-radius: 50%; }
.lx-cat__radio:checked { border-color: #7A2230; box-shadow: inset 0 0 0 2.5px #fff; background: #7A2230; }
.lx-cat__check:checked { border-color: #7A2230; background: #7A2230; box-shadow: inset 0 0 0 2px #fff; }
.lx-cat__swatch { width: .8rem; height: .8rem; border-radius: 50%; border: 1px solid #E7E4DC; }

.lx-cat__price { display: flex; align-items: center; gap: .5rem; color: #8C8A82; }
.lx-cat__price input {
    width: 100%;
    min-width: 0;
    padding: .45rem .5rem;
    border: 1px solid #E7E4DC;
    border-radius: 0;
    font-size: .75rem;
    background: #fff;
}
.lx-cat__price input:focus { outline: none; border-color: #7A2230; }

/* Üst çubuk */
.lx-cat__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}
.lx-cat__count { font-size: .8125rem; color: #1B1916; margin: 0; }
.lx-cat__views { display: flex; gap: 1.25rem; }
.lx-cat__views button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: 0;
    padding: 0;
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8C8A82;
    cursor: pointer;
}
.lx-cat__views button.is-active { color: #1B1916; }
.lx-cat__views svg { width: .75rem; height: .75rem; }

/* Izgara */
.lx-cat__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.75rem 1rem;
}
@media (min-width: 1100px) {
    .lx-cat__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.25rem 1.5rem; }
}
.lx-cat__grid--feed { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) {
    .lx-cat__grid--feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem 1.5rem; }
}

/* Ürün kartı */
.lx-card { position: relative; text-align: center; }
.lx-card__link { display: block; color: #1B1916; text-decoration: none; }
.lx-card__img {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #F2F2F2;
    overflow: hidden;
}
.lx-card__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .6s ease, transform .8s ease;
}
.lx-card__photo--alt { opacity: 0; }
.lx-card:hover .lx-card__photo.has-alt { opacity: 0; }
.lx-card:hover .lx-card__photo--alt { opacity: 1; }
.lx-card:hover .lx-card__photo:not(.has-alt):not(.lx-card__photo--alt) { transform: scale(1.04); }
.lx-card__img.is-out .lx-card__photo { filter: grayscale(1); opacity: .8; }

.lx-card__badge {
    position: absolute;
    top: .6rem;
    left: .6rem;
    padding: .2rem .45rem;
    background: #fff;
    border: 1px solid #1B1916;
    font-size: .5625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.lx-card__badge--sale { border-color: #7A2230; color: #7A2230; }

.lx-card__fav {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    color: #1B1916;
    opacity: 0;
    transition: opacity .2s, color .2s;
    cursor: pointer;
}
.lx-card__fav svg { width: 1rem; height: 1rem; }
.lx-card:hover .lx-card__fav,
.lx-card__fav:focus,
.lx-card__fav.is-active { opacity: 1; }
.lx-card__fav.is-active,
.lx-card__fav:hover { color: #7A2230; }
@media (hover: none) { .lx-card__fav { opacity: 1; } }

.lx-card__name {
    margin: 1.25rem .5rem 0;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.6;
    text-transform: uppercase;
}
.lx-card__desc {
    margin: .45rem .75rem 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: #45423C;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lx-card__price {
    margin: .6rem 0 0;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
}
.lx-card__price s { margin-left: .4rem; font-weight: 400; color: #8C8A82; }
.lx-card__link:hover .lx-card__name { color: #7A2230; }

/* Daha fazla yükle */
.lx-cat__more { text-align: center; margin-top: 4rem; }
.lx-cat__more p { font-size: .8125rem; color: #45423C; margin: 0 0 1rem; }
.lx-cat__more-btn {
    padding: .7rem 1.6rem;
    background: #fff;
    border: 1px solid #1B1916;
    font: inherit;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #1B1916;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.lx-cat__more-btn:hover { background: #7A2230; border-color: #7A2230; color: #fff; }
.lx-cat__more-btn:disabled { opacity: .6; cursor: wait; }

/*
 | Mega panel yazıları: Jost (Cartier'in ince, geniş aralıklı harflerine yakın).
 | Font layout'taki Google Fonts isteğiyle yükleniyor.
 */
.lx-mega,
.lx-mega__name,
.lx-mega__all a,
.lx-mega__col-title {
    font-family: "Jost", "Montserrat", sans-serif;
}
.lx-mega__name {
    font-size: .875rem;
    font-weight: 400;
    letter-spacing: .14em;
}
.lx-mega__all a { font-size: 1rem; font-weight: 400; letter-spacing: .02em; }

/* Sonsuz kaydırma yükleniyor göstergesi */
.lx-cat__loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-bottom: 1rem;
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8C8A82;
}
.lx-cat__spinner {
    width: 1rem;
    height: 1rem;
    border: 1.5px solid #E7E4DC;
    border-top-color: #7A2230;
    border-radius: 50%;
    animation: lx-spin .8s linear infinite;
}
@keyframes lx-spin { to { transform: rotate(360deg); } }

/* Görselsiz kategori başlığı */
.lx-cat-hero--plain { padding: 3.5rem 0 1.5rem; border-bottom: 1px solid #ECE9E2; }
.lx-cat-hero--plain .lx-cat-hero__title { font-size: clamp(1.4rem, 2.4vw, 2rem); }

/* Header logosu (önceki: 44px / masaüstü 56px, kaydırınca 44px) */
.lx-header-logo { height: 3rem; }
@media (min-width: 768px) {
    .lx-header-logo { height: 4.25rem; }
    .lx-header-logo.is-scrolled { height: 3.25rem; }
}

/* EMILA fit (3 Ekim 2026): urun karti gorseli kirpilmaz; beyaz zeminli gorsel kutuyla butunlesir. */
.lx-card__img { background: #FFFFFF; }
.lx-card__photo { object-fit: contain; }

/* EMILA bordo bant (4 Ekim 2026): logonun durdugu serit acilis animasyonunun zeminiyle ayni bordo; gumus/altin logo
   ve acik renk simgeler. Altindaki menu satiri beyaz kalir. Masaustu ve mobilde ayni. */
.emila-band { background: #3a0d19; background: linear-gradient(180deg, #44111f 0%, #2f0b15 100%); }
.emila-band button, .emila-band a { color: #ead7ad !important; }
.emila-band button:hover, .emila-band a:hover { color: #fff3d9 !important; }
.emila-band .bg-garnet { background-color: #ead7ad !important; color: #3a0d19 !important; }

/* EMILA oran / ortalama (4 Ekim 2026): ana sayfada hicbir sey yarim gorunmesin. */
/* 1) Ust gorsel kendi oraninda; sabit yukseklik gorseli (ve icindeki yaziyi) kirpiyordu. */
.emila-hero { height: auto; min-height: 0; }
/* 2) Seritler: satira TAM sayida kart. Kart genisligi = (serit - araliklar) / adet. */
.emila-rail { scroll-padding-left: 1.5rem; }
.emila-rail > * { flex: 0 0 auto !important; width: calc((100% - 1.25rem) / 2) !important; }
@media (min-width: 768px)  { .emila-rail > * { width: calc((100% - 2 * 1.25rem) / 3) !important; } }
@media (min-width: 1100px) { .emila-rail > * { width: calc((100% - 4 * 1.25rem) / 5) !important; } }
/* 3) Menu tek satir: aralik ve yazi ekran genisligine gore. */
@media (min-width: 768px) {
  .lx-nav__list { flex-wrap: nowrap; column-gap: clamp(.8rem, 1.9vw, 2.6rem); padding: 0 1rem; }
  .lx-nav__link { font-size: clamp(.66rem, .86vw, .8125rem); letter-spacing: .1em; }
}
/* 4) Telefonda logo tam ortada: iki yan esit pay alsin diye simge araliklari daraltildi. */
@media (max-width: 767px) {
  .emila-band > div { gap: .75rem; padding-left: 1rem; padding-right: 1rem; }
  .emila-band > div > div:last-child { gap: .9rem; }
}

/* EMILA serit tasma payi (4 Ekim 2026): sonraki kartin kenari sag bosluktan gorunmesin. */
.emila-rail { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; scroll-padding-left: 0; }

/* EMILA tek dokunus (4 Ekim 2026): dokunmatik ekranda "uzerine gelince" etkileri ilk dokunusu yutuyordu. */
@media (hover: none) {
  /* kategori / arama izgarasi karti */
  .lx-card:hover .lx-card__photo.has-alt { opacity: 1 !important; }
  .lx-card:hover .lx-card__photo--alt { opacity: 0 !important; }
  .lx-card:hover .lx-card__photo:not(.has-alt):not(.lx-card__photo--alt) { transform: none !important; }
  .lx-card__link:hover .lx-card__name { color: inherit; }
  /* ana sayfa / favoriler karti: gorsel degismesin, buyumesin; gizli "Sepete Ekle" dugmesi dokunusu kapmasin */
  .group:hover img.group-hover\:opacity-0 { opacity: 1 !important; }
  .group:hover img.group-hover\:opacity-100 { opacity: 0 !important; }
  .group:hover .group-hover\:scale-105, .group:hover .group-hover\:scale-110 { transform: none !important; }
  .group .group-hover\:translate-y-0 { display: none !important; }
  /* urun sayfasi galeri oklari: dokunmatikte hep gorunur */
  .group button.group-hover\:opacity-100 { opacity: 1 !important; }
}

/* EMILA dokunma geri bildirimi (4 Ekim 2026): basilan oge hafifce kuculur, dokunulan noktadan halka yayilir. */
a, button, .lx-card { -webkit-tap-highlight-color: transparent; }
.emila-pressed { scale: .965; transition: scale .12s ease-out; }
.lx-card.emila-pressed, .emila-rail > .emila-pressed { scale: .98; }
.emila-ripple {
    position: fixed; z-index: 9999; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
    background: rgba(122, 34, 48, .30); pointer-events: none; animation: emila-ripple .45s ease-out forwards;
}
.emila-ripple--light { background: rgba(234, 215, 173, .42); }
@keyframes emila-ripple { from { transform: scale(.5); opacity: 1; } to { transform: scale(6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .emila-ripple { display: none; } .emila-pressed { scale: none; } }

/* EMILA halka kapali (4 Ekim 2026): tiklamada yuvarlak isaret cikmaz; yalniz ice basilma kalir. */
.emila-ripple { display: none !important; }

/* EMILA sabit bant (4 Ekim 2026): baslik sayfa kaydirilinca ustte kalir. Yapiskanlik basligi saran kutuda olmali;
   kutu yalniz baslik kadar yuksek oldugu icin <header> uzerindeki sticky ise yaramiyordu. */
.emila-sticky { position: sticky; top: 0; z-index: 40; }

/* EMILA sabit bant galeri (4 Ekim 2026): yapiskan urun galerisi sabit basligin altinda baslar. */
@media (min-width: 768px) { .md\:sticky.md\:top-24 { top: 9rem !important; } }

/* EMILA magazalar (4 Ekim 2026): ana sayfadaki "Magazalarimiz" bolumu. Iki kutu yan yana, telefonda alt alta. */
.emila-stores { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .emila-stores { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.emila-store { border: 1px solid #ECE9E2; border-radius: 1rem; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.emila-store__img { aspect-ratio: 16 / 10; background: #2f0b15; overflow: hidden; }
.emila-store__img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.emila-store__ph { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 45%, #58182a 0%, #3a0d19 45%, #210810 100%); }
.emila-store__ph img { width: min(46%, 230px); height: auto; }
.emila-store__body { padding: 1.4rem 1.5rem 1.6rem; text-align: center; }
.emila-store__title { font-size: 1.15rem; font-weight: 600; color: #1B1916; letter-spacing: .01em; }
.emila-store__line { margin-top: .4rem; font-size: .9rem; color: #6B655C; }
.emila-store__line a { color: inherit; text-decoration: none; }
.emila-store__actions { margin-top: 1.1rem; display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; }
.emila-store__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 8.5rem; padding: .7rem 1.25rem; border: 1px solid #7A2230; border-radius: 999px; color: #7A2230; font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: background-color .2s, color .2s; }
.emila-store__btn:hover { background: #7A2230; color: #fff; }
.emila-store__btn--fill { background: #7A2230; color: #fff; }
.emila-store__btn--fill:hover { background: #5c1823; border-color: #5c1823; }

/* EMILA konum ikonu (4 Ekim 2026): Hakkimizda'daki magaza kutusunun sag altinda; tiklaninca yol tarifi acilir. */
.emila-branch { position: relative; padding-bottom: 4.25rem !important; }
.emila-pin { position: absolute; right: 1.25rem; bottom: 1.25rem; width: 2.9rem; height: 2.9rem; border-radius: 999px; display: grid; place-items: center; background: #7A2230; color: #fff; box-shadow: 0 6px 16px rgba(122, 34, 48, .25); transition: background-color .2s, transform .15s; }
.emila-pin:hover { background: #5c1823; }
.emila-pin:active { transform: scale(.94); }

/* EMILA tasarim1 (4 Ekim 2026) */
/* Cerez kutusu: telefonda tek satirlik ince serit. */
@media (max-width: 767px) {
  .emila-cookie { left: .5rem !important; right: 4.6rem !important; bottom: .6rem !important; padding: .55rem .8rem !important; border-radius: .9rem !important; display: flex; align-items: center; gap: .6rem; }
  .emila-cookie[style*="display: none"] { display: none !important; }
  .emila-cookie > p { font-size: .72rem !important; line-height: 1.3 !important; margin: 0; flex: 1; }
  .emila-cookie > div { margin-top: 0 !important; gap: .5rem !important; flex-shrink: 0; }
  .emila-cookie > div > a { display: none; }
  .emila-cookie > div > button { padding: .4rem .8rem !important; font-size: .72rem !important; }
}
/* Sabit WhatsApp dugmesi. */
.emila-wa { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; width: 3.25rem; height: 3.25rem; border-radius: 999px; display: grid; place-items: center; background: #25D366; color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .22); transition: transform .15s; }
.emila-wa:hover { transform: scale(1.06); }
@media (max-width: 767px) { .emila-wa { right: .6rem; bottom: .6rem; width: 3rem; height: 3rem; } }
@media (min-width: 768px) { .emila-cookie { right: 5.5rem !important; } }

/* EMILA telefon acilis (4 Ekim 2026): masaustunde yazi gorselin icinde -> HTML yazi ve koyu gecis gizli.
   Telefonda kutu dikey, gorselin urun tarafi gorunur, baslik HTML olarak altta. */
@media (min-width: 768px) { .emila-hero__text { display: none !important; } }
@media (max-width: 767px) {
  .emila-hero { aspect-ratio: 4 / 5 !important; }
  .emila-hero img { object-position: 74% 50%; }
  .emila-hero__shade { background: linear-gradient(to top, rgba(33, 8, 16, .82) 0%, rgba(33, 8, 16, .35) 38%, rgba(33, 8, 16, 0) 62%) !important; }
  .emila-hero__text > div { padding-bottom: 3.4rem !important; }
  .emila-hero__text .max-w-xl { display: flex; flex-direction: column-reverse; }
  .emila-hero__text h2 { font-size: 2.35rem !important; line-height: 1.05 !important; color: #fff; }
  .emila-hero__text .eyebrow { color: #f1e6d8 !important; margin: .7rem 0 0 !important; letter-spacing: .04em !important; text-transform: none !important; font-size: .9rem !important; }
}

/* EMILA tasarim4 (4 Ekim 2026) */
/* Duyuru bandi: telefonda tek/iki satir. */
@media (max-width: 767px) { .emila-duyuru { font-size: .62rem !important; letter-spacing: .08em !important; padding: .55rem .75rem !important; line-height: 1.5; } }
/* Tek kart tasarimi: kategori karti ana sayfa karti gibi. */
.lx-card { text-align: left; }
.lx-card__img { border-radius: 1rem; }
.lx-card__name { margin: .75rem 0 0; font-size: .875rem; font-weight: 500; letter-spacing: 0; line-height: 1.45; text-transform: none; }
.lx-card .emila-kod { margin-top: .2rem !important; }
.lx-card__desc { display: none; }
.lx-card__price { margin: .3rem 0 0; font-size: .875rem; font-weight: 500; letter-spacing: 0; color: #7A2230; }
.lx-card__price s { font-size: .75rem; margin-left: .5rem; }
.lx-card__badge { top: .75rem; left: .75rem; padding: .25rem .5rem; border-radius: .25rem; font-size: .625rem; letter-spacing: .14em; }
.lx-card__badge--sale { background: #7A2230; border-color: #7A2230; color: #F4F1EA; }
/* Yuzuk olcu rehberi. */
.emila-olcu { margin-top: 1rem; font-size: .85rem; color: #45423C; display: flex; flex-direction: column; gap: .5rem; }
.emila-olcu summary { cursor: pointer; color: #7A2230; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.emila-olcu summary::-webkit-details-marker { display: none; }
.emila-olcu details p { margin: .6rem 0; line-height: 1.55; }
.emila-olcu table { width: 100%; max-width: 22rem; border-collapse: collapse; font-size: .8rem; }
.emila-olcu th, .emila-olcu td { padding: .3rem .5rem; border-bottom: 1px solid #ECE9E2; text-align: left; }
.emila-olcu th { font-weight: 600; color: #1B1916; }
.emila-olcu > a { color: #7A2230; text-decoration: underline; text-underline-offset: 3px; }

/* EMILA tasarim5 (4 Ekim 2026) */
@media (max-width: 767px) {
  body:has([x-show="showBar"]) .emila-wa { bottom: 5rem; }
  body:has([x-show="showBar"]) .emila-cookie { bottom: 5rem !important; }
}
.lx-cat__options:has(input[wire\:model\.live="diamondOnly"]) { margin-bottom: 1.4rem; }

/* EMILA yatay alt menu (4 Ekim 2026): acilir paneldeki alt ogeler yan yana. */
.lx-mega__inner--manual .lx-mega__col { flex: 1 1 100%; width: 100%; max-width: none; text-align: center; }
.lx-mega__inner--manual .lx-mega__col-title { display: none; }
.lx-mega__inner--manual .lx-mega__col ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .9rem 2.4rem; margin: 0; padding: 0; list-style: none; }
.lx-mega__inner--manual .lx-mega__col li { margin: 0; padding: 0; }
.lx-mega__inner--manual .lx-mega__col a { white-space: nowrap; }

/* EMILA beyaz ikon (4 Ekim 2026): ust bordo banttaki ikonlar bej degil beyaz. */
.emila-band button, .emila-band a { color: #ffffff !important; }
.emila-band button:hover, .emila-band a:hover { color: rgba(255, 255, 255, .78) !important; }
.emila-band .bg-garnet { background-color: #ffffff !important; color: #3a0d19 !important; }

/* EMILA sifre goz (4 Ekim 2026): kayit formunda sifreyi goster dugmesi + sifre gucu cubugu. */
.emila-pw { position: relative; }
.emila-pw input { padding-right: 3.1rem !important; }
.emila-pw__eye { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: none; border: 0; color: #6B655C; cursor: pointer; }
.emila-pw__eye:hover, .emila-pw__eye[aria-pressed="true"] { color: #7A2230; }
.emila-pw__meter { margin-top: .55rem; }
.emila-pw__bar { display: flex; gap: .3rem; }
.emila-pw__bar span { flex: 1; height: .3rem; border-radius: 999px; background: #E4E0D8; transition: background-color .2s; }
.emila-pw__meter.is-1 .emila-pw__bar span:nth-child(1) { background: #B3261E; }
.emila-pw__meter.is-2 .emila-pw__bar span:nth-child(-n+2) { background: #C98A1B; }
.emila-pw__meter.is-3 .emila-pw__bar span { background: #2E7D4F; }
.emila-pw__label { margin-top: .4rem; font-size: .75rem; color: #6B655C; line-height: 1.45; }
.emila-pw__meter.is-1 strong { color: #B3261E; } .emila-pw__meter.is-2 strong { color: #A8710F; } .emila-pw__meter.is-3 strong { color: #2E7D4F; }

/* EMILA siparis iptal (4 Ekim 2026): musteri siparis sayfasindaki iptal kutusu ve bildirimler. */
.emila-order-cancel { margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px solid #ECE9E2; border-radius: 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 1.25rem; }
.emila-order-cancel p { flex: 1 1 16rem; font-size: .85rem; color: #6B655C; line-height: 1.5; margin: 0; }
.emila-order-cancel__btn { padding: .65rem 1.3rem; border: 1px solid #7A2230; border-radius: 999px; background: #fff; color: #7A2230; font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, color .2s; }
.emila-order-cancel__btn:hover { background: #7A2230; color: #fff; }
.emila-order-note { margin-top: 1.5rem; padding: .85rem 1.1rem; border-radius: .8rem; font-size: .9rem; }
.emila-order-note--ok { background: #EAF4EE; color: #256B45; }
.emila-order-note--err { background: #FBEAEA; color: #9B1C1C; }

/* EMILA siparis sekmeleri + T.C. notu (4 Ekim 2026) */
.emila-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.emila-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border: 1px solid #ECE9E2; border-radius: 999px; font-size: .82rem; color: #45423C; text-decoration: none; background: #fff; transition: border-color .2s, color .2s, background-color .2s; }
.emila-tab:hover { border-color: #7A2230; color: #7A2230; }
.emila-tab.is-active { background: #7A2230; border-color: #7A2230; color: #fff; }
.emila-tab__count { min-width: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: rgba(27, 25, 22, .08); font-size: .7rem; line-height: 1.35rem; text-align: center; }
.emila-tab.is-active .emila-tab__count { background: rgba(255, 255, 255, .22); }
.emila-tc-note { margin-top: .4rem; font-size: .75rem; line-height: 1.5; color: #6B655C; }

/* EMILA kart kaydirma (4 Ekim 2026): urun kartinda gorseli kaydirarak / oklarla degistirme. */
[data-emila-images] { touch-action: pan-y; }
.emila-cs__track { position: absolute; inset: 0; z-index: 1; display: flex; background: #fff; will-change: transform; }
.emila-cs__track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.emila-cs__dots { position: absolute; left: 0; right: 0; bottom: .45rem; z-index: 3; display: flex; justify-content: center; gap: .28rem; pointer-events: none; }
.emila-cs__dots i { width: .32rem; height: .32rem; border-radius: 999px; background: rgba(27, 25, 22, .2); transition: background-color .2s; }
.emila-cs__dots i.on { background: #7A2230; }
.emila-cs__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 1.9rem; height: 1.9rem; display: none; place-items: center; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #1B1916; box-shadow: 0 2px 8px rgba(27, 25, 22, .16); cursor: pointer; }
.emila-cs__arrow--prev { left: .4rem; } .emila-cs__arrow--next { right: .4rem; }
@media (hover: hover) { [data-emila-images]:hover > .emila-cs__arrow { display: grid; } }
/* Etiket, favori ve "Sepete Ekle" kaydirilan gorsellerin ustunde kalir. */
[data-emila-images] > .lx-card__badge, [data-emila-images] > div.absolute, [data-emila-images] > button:not(.emila-cs__arrow), [data-emila-images] > span.absolute { z-index: 3; }

/* EMILA kart nokta (4 Ekim 2026): noktalar acik ve koyu gorselde de secilsin. */
.emila-cs__dots i { background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(27, 25, 22, .28); }
.emila-cs__dots i.on { background: #7A2230; box-shadow: 0 0 0 1px rgba(255, 255, 255, .85); }

/* EMILA banner kaydirma (4 Ekim 2026): slayt parmakla / fareyle suruklenir; dikey kaydirma sayfaya kalir. */
.emila-hero { touch-action: pan-y; cursor: grab; }
.emila-hero:active { cursor: grabbing; }
.emila-hero img { -webkit-user-drag: none; user-select: none; pointer-events: none; }

/* EMILA banner ok (4 Ekim 2026): slayt oklari, yalniz masaustu. */
.emila-hero__ok { display: none; }
@media (min-width: 768px) {
  .emila-hero__ok { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 3rem; height: 3rem; display: grid; place-items: center; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .82); color: #3a0d19; box-shadow: 0 4px 14px rgba(27, 25, 22, .18); cursor: pointer; transition: background-color .2s, transform .15s; }
  .emila-hero__ok:hover { background: #fff; }
  .emila-hero__ok:active { transform: translateY(-50%) scale(.94); }
  .emila-hero__ok--prev { left: 1.25rem; } .emila-hero__ok--next { right: 1.25rem; }
}

/* EMILA banner ok soluk (4 Ekim 2026): oklar kisik bekler, ustune gelince aktiflesir. */
@media (min-width: 768px) {
  .emila-hero__ok { opacity: .35; transition: opacity .2s, background-color .2s, transform .15s; }
  .emila-hero__ok:hover, .emila-hero__ok:focus-visible { opacity: 1; }
}

/* EMILA kaydirma animasyonu (4 Ekim 2026): ekrana giren icerik hafifce asagidan yukselerek belirir. Sinifi yalniz
   emila-reveal.js ekler; betik yoksa hicbir sey gizlenmez. */
.emila-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; }
.emila-reveal.is-in { opacity: 1; transform: none; }

/* EMILA kaydirma animasyonu hizi (4 Ekim 2026): yari sure, daha kisa yukselme -- hizli kaydirmada gec gelme hissi olmasin. */
.emila-reveal { transform: translateY(14px); transition: opacity .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1); }
