/* ==========================================================================
   Azalea — azalea-2.html'e özel katman
   Amerce temasının styles.css'inden SONRA yüklenir.
   1) Marka renkleri
   2) Masthead slider (babarmimarlik.com yapısı)
   3) "Sizin İçin" e-hizmetler
   4) Ödem Suyu vitrini
   ========================================================================== */

/* ---------- 1. Marka renkleri -------------------------------------------- */
:root {
    --primary: #4EAAC8;
    /* Azalea turkuazı — temanın kırmızısının yerine */
    --az-brand: #4EAAC8;
    --az-brand-deep: #2E7D99;
    --az-taupe: #998E87;
    --az-taupe-deep: #7F7671;
    --az-ink: #131313;
    --az-cream: #F7F4F1;
    /* ödem suyu bölümü zemini */
    --az-detox: #998d87;
    --az-detox-2: #8A7E78;
}

/* ---------- 2. Masthead slider ------------------------------------------ */
.masthead {
    position: relative;
    height: 100vh;
    min-height: 560px;
    max-height: 1000px;
    background: var(--az-ink);
    overflow: hidden;
}

.masthead .swiper-wrapper {
    height: 100%;
}

.masthead .swiper-slide {
    position: relative;
    overflow: hidden;
    height: 100%;
}

/* görsel — swiper parallax ile kayar */
.masthead__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.masthead__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.masthead__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(10, 12, 13, .62) 0%, rgba(10, 12, 13, .34) 34%, rgba(10, 12, 13, .06) 62%, rgba(10, 12, 13, 0) 80%),
        linear-gradient(to top, rgba(10, 12, 13, .5) 0%, rgba(10, 12, 13, 0) 34%);
}

.masthead__body {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    /* header + duyuru şeridi hero'nun üstünde duruyor; içerik onların altından başlasın */
    padding-top: 165px;
    padding-bottom: 120px;
}

@media (max-width: 1199px) {
    .masthead__body {
        padding-top: 110px;
    }
}

.masthead__content {
    max-width: 780px;
}

/* üst etiket */
.masthead__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--az-brand);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s cubic-bezier(.22, 1, .36, 1) .15s, transform .8s cubic-bezier(.22, 1, .36, 1) .15s;
}

.masthead__eyebrow::before {
    content: "";
    width: 34px;
    height: 1px;
    background: currentColor;
    opacity: .6;
}

/* başlık — satır satır maskeli açılış */
.masthead__title {
    margin: 0;
    color: #fff;
    font-size: clamp(2.5rem, 5.4vw, 4.5rem);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -.02em;
}

/* maske: satır kutusu harflerin çıkıntılarını kırpmasın diye alttan pay verilir */
.mh-line {
    display: block;
    overflow: hidden;
    padding-bottom: .12em;
    margin-bottom: -.12em;
}

.mh-line>span {
    display: block;
    transform: translateY(105%);
    transition: transform 1s cubic-bezier(.22, 1, .36, 1);
}

.mh-line:nth-child(2)>span {
    transition-delay: .1s;
}

.mh-line:nth-child(3)>span {
    transition-delay: .2s;
}

.masthead__desc {
    max-width: 46ch;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, .74);
    font-size: 17px;
    line-height: 1.7;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1) .3s, transform .7s cubic-bezier(.22, 1, .36, 1) .3s;
}

.masthead__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1) .42s, transform .7s cubic-bezier(.22, 1, .36, 1) .42s;
}

/* aktif slaytta animasyonları tetikle */
.masthead .swiper-slide-active .mh-line>span {
    transform: none;
}

.masthead .swiper-slide-active .masthead__eyebrow,
.masthead .swiper-slide-active .masthead__desc,
.masthead .swiper-slide-active .masthead__actions {
    opacity: 1;
    transform: none;
}

/* buton — babar'daki "-simple" alt çizgili stil */
.mh-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 30px;
    border-radius: 999px;
    background: var(--az-brand);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .35s, color .35s, transform .35s cubic-bezier(.22, 1, .36, 1);
}

.mh-btn:hover {
    background: #fff;
    color: var(--az-ink);
    transform: translateY(-2px);
}

.mh-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .38);
    color: #fff;
}

.mh-btn--ghost:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}

.mh-btn i {
    font-size: 14px;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.mh-btn:hover i {
    transform: translateX(4px);
}

/* alt sayfalama — numara / başlık / ilerleme çizgisi */
.masthead-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 44px;
    z-index: 10;
    display: flex;
    gap: 26px;
    padding-inline: max(24px, 4vw);
    overflow-x: auto;
    scrollbar-width: none;
}

.masthead-pagination::-webkit-scrollbar {
    display: none;
}

.mh-pag {
    flex: 0 0 132px;
    display: flex;
    flex-direction: column;
    text-align: left;
    color: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: color .4s;
}

.mh-pag:hover,
.mh-pag.is-active {
    color: #fff;
}

.mh-pag__num {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
}

.mh-pag__title {
    margin: 10px 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    color: inherit;
    min-height: 34px;
}

.mh-pag__line {
    position: relative;
    display: block;
    height: 1px;
    margin-top: 8px;
    background: rgba(255, 255, 255, .28);
    overflow: hidden;
}

.mh-pag__line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    transform: scaleX(var(--p, 0));
    transform-origin: left;
}

.mh-pag.is-active .mh-pag__line::after {
    background: var(--az-brand);
}

/* aşağı kaydır ipucu */
.masthead__scroll {
    position: absolute;
    right: max(24px, 4vw);
    bottom: 52px;
    z-index: 11;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: color .3s;
}

.masthead__scroll:hover {
    color: #fff;
}

.masthead__scroll i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    font-size: 12px;
    animation: mhBounce 2s ease-in-out infinite;
}

@keyframes mhBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}

@media (max-width: 1199px) {
    .masthead__body {
        padding-bottom: 190px;
    }

    .masthead__scroll {
        display: none;
    }

    .mh-pag {
        flex-basis: 116px;
    }
}

@media (max-width: 767px) {
    .masthead {
        height: 88vh;
    }

    .masthead__desc {
        font-size: 15px;
    }

    .masthead-pagination {
        bottom: 28px;
        gap: 18px;
    }

    .mh-pag__title {
        display: none;
    }

    .mh-pag {
        flex-basis: 74px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .mh-line>span,
    .masthead__eyebrow,
    .masthead__desc,
    .masthead__actions {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }

    .masthead__scroll i {
        animation: none;
    }
}

/* ---------- 3. "Sizin İçin" e-hizmetler --------------------------------- */
.eservice {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.es-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 268px;
    padding: 28px 24px 26px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s cubic-bezier(.22, 1, .36, 1), border-color .4s;
}

.es-card:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: 0 22px 54px -26px rgba(19, 19, 19, .3);
}

.es-card__num {
    position: absolute;
    top: 22px;
    right: 24px;
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--text-3);
}

.es-card__ic {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(78, 170, 200, .12);
    color: var(--az-brand-deep);
    font-size: 22px;
    margin-bottom: 22px;
    transition: background-color .4s, color .4s;
}

.es-card:hover .es-card__ic {
    background: var(--az-brand);
    color: #fff;
}

.es-card__title {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 500;
    color: var(--text);
}

.es-card__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-2);
}

.es-card__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
    transition: color .3s;
}

.es-card:hover .es-card__go {
    color: var(--az-brand-deep);
}

.es-card__go i {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.es-card:hover .es-card__go i {
    transform: translateX(4px);
}

/* öne çıkan kart: Ödem Suyu */
.es-card--star {
    background: var(--az-ink);
    border-color: var(--az-ink);
    color: #fff;
}

.es-card--star .es-card__title {
    color: #fff;
}

.es-card--star .es-card__desc {
    color: rgba(255, 255, 255, .68);
}

.es-card--star .es-card__num {
    color: rgba(255, 255, 255, .4);
}

.es-card--star .es-card__go {
    color: #fff;
}

.es-card--star .es-card__ic {
    background: rgba(255, 255, 255, .1);
    color: var(--az-brand);
}

.es-card--star:hover .es-card__ic {
    background: var(--az-brand);
    color: #fff;
}

.es-badge {
    position: absolute;
    top: 18px;
    left: 24px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--az-brand);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.es-card--star .es-card__ic {
    margin-top: 18px;
}

@media (max-width: 1199px) {
    .eservice {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .eservice {
        grid-template-columns: repeat(2, 1fr);
    }

    .es-card {
        min-height: 232px;
        padding: 22px 18px 20px;
    }
}

@media (max-width: 479px) {
    .eservice {
        grid-template-columns: 1fr;
    }
}

/* ---------- 4. Ödem Suyu vitrini ---------------------------------------- */
.odem {
    position: relative;
    background: var(--az-detox);
    color: rgba(255, 255, 255, .76);
    overflow: hidden;
}

.odem::before,
.odem::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.odem::before {
    width: 620px;
    height: 620px;
    top: -240px;
    right: -180px;
    background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 68%);
}

.odem::after {
    width: 520px;
    height: 520px;
    bottom: -260px;
    left: -160px;
    background: radial-gradient(circle, rgba(255, 255, 255, .08), transparent 70%);
}

.odem__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

/* ürün görseli */
.odem__media {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 420px;
}

.odem__glow {
    position: absolute;
    width: min(420px, 78%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 66%);
}

.odem__bottle {
    position: relative;
    max-width: min(420px, 100%);
    border-radius: 20px;
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .35));
}

.odem__ribbon {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    color: var(--az-detox);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* metin */
.odem__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
}

.odem__eyebrow::before {
    content: "";
    width: 34px;
    height: 1px;
    background: currentColor;
    opacity: .6;
}

.odem__title {
    margin: 18px 0 6px;
    color: #fff;
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -.015em;
}

.odem__claim {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, .92);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.odem__text {
    margin: 0;
    max-width: 54ch;
    font-size: 16px;
    line-height: 1.75;
}

/* içerik rozetleri */
.odem__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
}

.odem__chips span {
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    font-size: 12px;
    color: rgba(255, 255, 255, .86);
}

/* kullanım + fiyat şeridi */
.odem__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.odem__meta-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.odem__meta-item i {
    color: rgba(255, 255, 255, .92);
    font-size: 20px;
}

.odem__meta-item small {
    display: block;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.odem__meta-item strong {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
}

.odem__price {
    margin-left: auto;
    text-align: right;
}

.odem__price small {
    display: block;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.odem__price b {
    font-size: 28px;
    font-weight: 500;
    color: #fff;
}

.odem__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.odem-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0 32px;
    border-radius: 999px;
    background: #fff;
    color: var(--az-detox);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), background-color .3s, color .3s;
}

.odem-btn:hover {
    background: var(--az-ink);
    color: #fff;
    transform: translateY(-2px);
}

.odem-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .34);
    color: #fff;
}

.odem-btn--ghost:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.odem-btn i {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.odem-btn:hover i {
    transform: translateX(4px);
}

@media (max-width: 991px) {
    .odem__inner {
        grid-template-columns: 1fr;
    }

    .odem__media {
        min-height: 320px;
    }

    .odem__price {
        margin-left: 0;
        text-align: left;
    }
}

/* ---------- 5. Ufak dokunuşlar ------------------------------------------ */
/* header arama: sadece ikon (form kaldırıldı) */
.nav-icon-item.search-only {
    display: inline-flex;
}

/* menüdeki yıldız ikonu */
.nav-category_link .icon-Star-3 {
    margin-left: 6px;
    font-size: 11px;
    color: var(--az-brand);
}

/* ==========================================================================
   6. Hizmetlerimiz — sekmeli uygulama listesi
   ========================================================================== */
.svct__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 44px;
}

.svct__tab {
    padding: 12px 24px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .35s, color .35s, border-color .35s;
}

.svct__tab:hover {
    border-color: var(--az-brand);
    color: var(--az-brand-deep);
}

.svct__tab.is-active {
    background: var(--az-ink);
    border-color: var(--az-ink);
    color: #fff;
}

.svct__panel {
    display: none;
}

.svct__panel.is-active {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    animation: svctIn .5s cubic-bezier(.22, 1, .36, 1);
}

@keyframes svctIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

.svct-card {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s cubic-bezier(.22, 1, .36, 1), border-color .4s;
}

.svct-card:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: 0 24px 56px -28px rgba(19, 19, 19, .32);
}

.svct-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--bg-2);
}

.svct-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(.22, 1, .36, 1);
}

.svct-card:hover .svct-card__media img {
    transform: scale(1.07);
}

.svct-card__tag {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(6px);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--az-brand-deep);
}

.svct-card__tag--fda {
    background: var(--az-brand);
    color: #fff;
}

.svct-card__body {
    display: block;
    padding: 22px 22px 24px;
}

.svct-card__title {
    display: block;
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
    transition: color .3s;
}

.svct-card:hover .svct-card__title {
    color: var(--az-brand-deep);
}

.svct-card__desc {
    display: block;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-2);
    min-height: 44px;
}

.svct-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.svct-card__foot i {
    color: var(--az-brand);
    margin-right: 6px;
}

.svct-card__foot strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--text);
}

@media (max-width: 1199px) {
    .svct__panel.is-active {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .svct__panel.is-active {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 575px) {
    .svct__panel.is-active {
        grid-template-columns: 1fr;
    }

    .svct__tab {
        padding: 10px 18px;
        font-size: 13px;
    }
}

/* ==========================================================================
   8. Markalarımız
   ========================================================================== */
.brands {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.brand-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    padding: 30px 28px;
    border-radius: 16px;
    background: var(--bg-2);
    overflow: hidden;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s cubic-bezier(.22, 1, .36, 1);
}

.brand-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 56px -28px rgba(19, 19, 19, .3);
}

.brand-card__name {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--text);
}

.brand-card__origin {
    display: block;
    margin-bottom: 16px;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--az-brand-deep);
}

.brand-card__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-2);
}

.brand-card__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 22px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
}

.brand-card__go i {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.brand-card:hover .brand-card__go i {
    transform: translateX(4px);
}

.brand-card--dark {
    background: var(--az-ink);
}

.brand-card--dark .brand-card__name,
.brand-card--dark .brand-card__go {
    color: #fff;
}

.brand-card--dark .brand-card__text {
    color: rgba(255, 255, 255, .68);
}

.brand-card--dark .brand-card__origin {
    color: var(--az-brand);
}

@media (max-width: 991px) {
    .brands {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .brands {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   9. Öne çıkan uygulama — Alma DermaClear
   ========================================================================== */
.feat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.feat__media {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4/5;
}

.feat__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feat__stamp {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: grid;
    place-items: center;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: var(--az-brand);
    color: #fff;
    text-align: center;
    box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .55);
}

.feat__stamp b {
    display: block;
    font-size: 21px;
    font-weight: 600;
    line-height: 1;
}

.feat__stamp span {
    display: block;
    margin-top: 5px;
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .9;
}

.feat__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--az-brand-deep);
}

.feat__eyebrow::before {
    content: "";
    width: 34px;
    height: 1px;
    background: currentColor;
    opacity: .6;
}

.feat__title {
    margin: 16px 0 8px;
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -.015em;
    color: var(--text);
}

.feat__sub {
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--az-brand-deep);
}

.feat__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-2);
}

.feat__steps {
    margin: 28px 0 0;
    padding: 0;
    counter-reset: fs;
}

.feat__steps li {
    position: relative;
    padding: 0 0 20px 62px;
}

.feat__steps li:last-child {
    padding-bottom: 0;
}

.feat__steps li::before {
    counter-increment: fs;
    content: counter(fs);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(78, 170, 200, .12);
    color: var(--az-brand-deep);
    font-size: 14px;
    font-weight: 600;
}

.feat__steps li::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 46px;
    bottom: 8px;
    width: 1px;
    background: var(--line);
}

.feat__steps li:last-child::after {
    display: none;
}

.feat__steps strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
}

.feat__steps span {
    display: block;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-2);
}

.feat__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

@media (max-width: 991px) {
    .feat {
        grid-template-columns: 1fr;
    }

    .feat__media {
        aspect-ratio: 4/3;
    }
}

/* ==========================================================================
   10. Yorumlar
   ========================================================================== */
.tst {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.tst-card {
    display: flex;
    flex-direction: column;
    padding: 30px 28px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s cubic-bezier(.22, 1, .36, 1), border-color .4s;
}

.tst-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 22px 50px -26px rgba(19, 19, 19, .28);
}

.tst-card__stars {
    display: flex;
    gap: 3px;
    margin-bottom: 18px;
    color: var(--az-brand);
    font-size: 14px;
}

.tst-card__text {
    flex: 1;
    margin: 0;
    font-size: 16px;
    line-height: 1.72;
    color: var(--text);
}

.tst-card__who {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.tst-card__mono {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(78, 170, 200, .12);
    color: var(--az-brand-deep);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    flex-shrink: 0;
}

.tst-card__who strong {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
}

.tst-card__who span {
    display: block;
    font-size: 13px;
    color: var(--text-3);
}

@media (max-width: 991px) {
    .tst {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   11. Blog
   ========================================================================== */
.blg {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 30px;
}

.blg__side {
    display: grid;
    gap: 20px;
    align-content: start;
}

.blg-card {
    display: block;
}

.blg-card__media {
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16/11;
    background: var(--bg-2);
}

.blg-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(.22, 1, .36, 1);
}

.blg-card:hover .blg-card__media img {
    transform: scale(1.06);
}

.blg-card__cat {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--az-brand-deep);
}

.blg-card__body {
    display: block;
    padding-top: 18px;
}

.blg-card__date {
    display: block;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-3);
}

.blg-card__title {
    display: block;
    margin: 8px 0 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--text);
    transition: color .3s;
}

.blg-card:hover .blg-card__title {
    color: var(--az-brand-deep);
}

.blg-card__desc {
    display: block;
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-2);
}

.blg-card--row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 18px;
    align-items: center;
}

.blg-card--row .blg-card__media {
    aspect-ratio: 1;
}

.blg-card--row .blg-card__body {
    padding-top: 0;
}

.blg-card--row .blg-card__title {
    font-size: 17px;
}

.blg-card--row .blg-card__desc {
    font-size: 13px;
    margin-top: 6px;
}

@media (max-width: 991px) {
    .blg {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 479px) {
    .blg-card--row {
        grid-template-columns: 1fr;
    }

    .blg-card--row .blg-card__media {
        aspect-ratio: 16/10;
    }
}

/* ==========================================================================
   12. Öncesi / Sonrası — sürüklenebilir karşılaştırma
   ========================================================================== */
.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.cmp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--az-brand-deep);
}

.cmp-eyebrow::before {
    content: "";
    width: 34px;
    height: 1px;
    background: currentColor;
    opacity: .6;
}

.cmp-title {
    margin: 16px 0 14px;
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -.015em;
    color: var(--text);
}

.cmp-text {
    margin: 0;
    max-width: 52ch;
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-2);
}

.cmp-list {
    display: grid;
    gap: 14px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.cmp-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-2);
}

.cmp-list i {
    margin-top: 3px;
    color: var(--az-brand);
    font-size: 17px;
    flex-shrink: 0;
}

.cmp-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

/* karşılaştırma kutusu */
.compare {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16/9;
    user-select: none;
    touch-action: pan-y;
    cursor: ew-resize;
    background: var(--bg-2);
}

.compare img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.compare__after {
    clip-path: inset(0 0 0 var(--pos, 50%));
}

.compare__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos, 50%);
    width: 2px;
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, .28);
    pointer-events: none;
}

.compare__grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    color: var(--az-ink);
    font-size: 17px;
    box-shadow: 0 14px 40px -18px rgba(19, 19, 19, .5);
}

.compare__tag {
    position: absolute;
    bottom: 20px;
    padding: 7px 15px;
    border-radius: 999px;
    background: rgba(19, 19, 19, .62);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    pointer-events: none;
}

.compare__tag--l {
    left: 20px;
}

.compare__tag--r {
    right: 20px;
}

@media (max-width: 991px) {
    .compare-grid {
        grid-template-columns: 1fr;
    }

    .compare {
        aspect-ratio: 4/3;
    }
}

/* ==========================================================================
   13. Dört ana başlık — bento ızgara
   ========================================================================== */
.bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(.75rem, 1.4vw, 1.25rem);
}

.svc {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 380px;
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
}

.svc--tall {
    grid-row: span 2;
    min-height: 520px;
}

.svc--wide {
    grid-column: span 2;
}

.svc--wide-3 {
    grid-column: span 3;
}

.svc>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

.svc::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(15, 21, 24, .88) 0%, rgba(15, 21, 24, .42) 42%, rgba(15, 21, 24, .06) 78%);
}

.svc:hover>img {
    transform: scale(1.07);
}

.svc__body {
    position: relative;
    display: block;
    width: 100%;
    padding: clamp(1.5rem, 2.4vw, 2.25rem);
}

.svc__num {
    position: absolute;
    top: clamp(1.25rem, 2.4vw, 2rem);
    right: clamp(1.25rem, 2.4vw, 2rem);
    font-size: 14px;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .6);
}

.svc__title {
    display: block;
    font-size: clamp(1.5rem, 2.1vw, 2.125rem);
    font-weight: 500;
    line-height: 1.15;
    color: #fff;
}

.svc__desc {
    display: block;
    margin-top: .625rem;
    max-width: 34ch;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .55s cubic-bezier(.22, 1, .36, 1), opacity .45s ease;
}

.svc:hover .svc__desc,
.svc:focus-within .svc__desc {
    max-height: 8rem;
    opacity: 1;
}

.svc__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1.125rem;
}

.svc__tags span {
    padding: .3rem .7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(4px);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.svc__go {
    position: absolute;
    top: clamp(1.25rem, 2.4vw, 2rem);
    left: clamp(1.5rem, 2.4vw, 2.25rem);
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .45s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.22, 1, .36, 1), background-color .3s;
}

.svc:hover .svc__go {
    opacity: 1;
    transform: none;
}

.svc__go:hover {
    background: var(--az-brand);
    border-color: var(--az-brand);
}

@media (max-width: 991px) {
    .bento {
        grid-template-columns: repeat(2, 1fr);
    }

    .svc--tall {
        grid-row: auto;
        min-height: 380px;
    }

    .svc--wide,
    .svc--wide-3 {
        grid-column: span 2;
    }

    .svc__desc {
        max-height: 8rem;
        opacity: 1;
    }
}

@media (max-width: 575px) {
    .bento {
        grid-template-columns: 1fr;
    }

    .svc--wide,
    .svc--wide-3 {
        grid-column: auto;
    }

    .svc {
        min-height: 320px;
    }
}

/* ==========================================================================
   14. Footer — ek dokunuşlar
   ========================================================================== */
.az-fpills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.az-fpill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 12px;
    color: var(--text-2);
    transition: background-color .3s, border-color .3s, color .3s;
}

.az-fpill i {
    color: var(--az-brand);
    font-size: 14px;
    transition: color .3s;
}

.az-fpill:hover {
    background: var(--az-brand);
    border-color: var(--az-brand);
    color: #fff;
}

.az-fpill:hover i {
    color: #fff;
}

/* ==========================================================================
   15. index.html — tam genişlik slider ve header düzeltmeleri
   ========================================================================== */

/* hero yüksekliği — referans sitelerdeki gibi ekranı doldursun */
.az-slideshow .slideshow-wrap,
.az-slideshow .sld_image,
.az-slideshow .sld_image img {
    height: min(86vh, 860px);
    min-height: 520px;
}

.az-slideshow .sld_image img {
    width: 100%;
    object-fit: cover;
    object-position: center 28%;
}

.az-slideshow .slideshow-wrap {
    position: relative;
}

/* okunabilirlik perdesi — beyaz yazı açık görselde kaybolmasın */
.az-slideshow .sld_image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to bottom, rgba(8, 10, 11, .48) 0%, rgba(8, 10, 11, .30) 34%, rgba(8, 10, 11, .58) 100%),
        radial-gradient(76% 60% at 50% 50%, rgba(8, 10, 11, .46), rgba(8, 10, 11, 0) 78%);
    pointer-events: none;
}

.az-slideshow .sld_content {
    z-index: 2;
}

.az-slideshow .sub-text_sld {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .88) !important;
}

.az-slideshow .title_sld {
    letter-spacing: -.02em;
    text-shadow: 0 2px 40px rgba(0, 0, 0, .45);
}

.az-slideshow .tf-btn.btn-white {
    border-radius: 0;
}

.az-slideshow .group-nav-action {
    z-index: 3;
}

.az-slideshow .sw-line-default {
    z-index: 3;
}

@media (max-width: 767px) {

    .az-slideshow .slideshow-wrap,
    .az-slideshow .sld_image,
    .az-slideshow .sld_image img {
        height: min(78vh, 620px);
    }

    .az-slideshow .sld_image img {
        object-position: center 22%;
    }
}

/* --- header: menü logonun iki yanına bölündü --- */
.header-s2 .box-nav-menu>.menu-item>.item-link {
    white-space: nowrap;
}

.header-s2 .box-nav-menu {
    gap: clamp(14px, 1.4vw, 26px);
}

/* sağ blok: menü logoya yaslansın, ikonlar en sağda kalsın */
.header-s2 .header-right {
    justify-content: space-between;
    gap: clamp(14px, 1.6vw, 24px);
}

.header-s2 .header-right .nav-right {
    margin-right: auto;
}

/* logonun iki yanında eşit hava boşluğu */
.header-s2 .header-center {
    padding-inline: clamp(24px, 3vw, 56px);
    flex-shrink: 0;
}

/* sağdaki açılır menüler ekranın dışına taşmasın */
.header-s2 .nav-right .menu-item:last-child .sub-menu,
.header-s2 .nav-right .menu-item:nth-last-child(2) .sub-menu {
    left: auto;
    right: 0;
}

@media (min-width: 1200px) and (max-width: 1599px) {
    .header-s2 .header-right .list-currenci,
    .header-s2 .header-right .br-line {
        display: none !important;
    }
}

/* ==========================================================================
   16. home-fashion-2.html — sola hizalı koyu metinli slider
   ========================================================================== */
.az-slideshow2 .slideshow-wrap,
.az-slideshow2 .sld_image,
.az-slideshow2 .sld_image img {
    height: min(84vh, 820px);
    min-height: 500px;
}

.az-slideshow2 .sld_image img {
    width: 100%;
    object-fit: cover;
    object-position: 68% 26%;
}

.az-slideshow2 .slideshow-wrap {
    position: relative;
}

/* metin sol tarafta koyu okunuyor: sola doğru açık bir perde */
.az-slideshow2 .sld_image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg,
            rgba(252, 250, 249, .94) 0%,
            rgba(252, 250, 249, .82) 22%,
            rgba(252, 250, 249, .32) 46%,
            rgba(252, 250, 249, 0) 64%);
    pointer-events: none;
}

.az-slideshow2 .sld_content {
    z-index: 2;
}

.az-slideshow2 .content-sld_wrap {
    max-width: 620px;
}

.az-slideshow2 .sub-text_sld {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--az-brand-deep);
}

.az-slideshow2 .title_sld {
    letter-spacing: -.02em;
}

.az-slideshow2 .group-nav-action,
.az-slideshow2 .sw-line-default {
    z-index: 3;
}

@media (max-width: 991px) {

    .az-slideshow2 .slideshow-wrap,
    .az-slideshow2 .sld_image,
    .az-slideshow2 .sld_image img {
        height: min(76vh, 620px);
    }

    .az-slideshow2 .sld_image::after {
        background: linear-gradient(170deg,
                rgba(252, 250, 249, .95) 0%,
                rgba(252, 250, 249, .8) 34%,
                rgba(252, 250, 249, .2) 62%,
                rgba(252, 250, 249, 0) 84%);
    }

    .az-slideshow2 .sld_image img {
        object-position: 62% 22%;
    }
}

/* ==========================================================================
   17. Footer — gri zemin + beyaz yazı + Azalea sembolü
   ========================================================================== */
.tf-footer.footer-s6 {
    background: #998d87 !important;
    /* tema .cl-text-2 gibi sınıfları !important ile kuruyor;
       değişkeni footer içinde yeniden tanımlamak en temiz çözüm */
    --text: #ffffff;
    --text-2: rgba(255, 255, 255, .86);
    --text-3: rgba(255, 255, 255, .72);
    --line: rgba(255, 255, 255, .3);
    color: rgba(255, 255, 255, .86);
}

.tf-footer.footer-s6 .footer-heading,
.tf-footer.footer-s6 .h4,
.tf-footer.footer-s6 h1,
.tf-footer.footer-s6 h2,
.tf-footer.footer-s6 h3,
.tf-footer.footer-s6 h4,
.tf-footer.footer-s6 h5,
.tf-footer.footer-s6 h6,
.tf-footer.footer-s6 a,
.tf-footer.footer-s6 .link,
.tf-footer.footer-s6 i {
    color: #ffffff;
}

.tf-footer.footer-s6 p,
.tf-footer.footer-s6 span,
.tf-footer.footer-s6 li {
    color: rgba(255, 255, 255, .86);
}

/* Tema `.link:hover { color: var(--primary) !important }` diyor; bu sitede
   --primary footer zemini ile aynı renk (#998d87) olduğu için linkler hover'da
   kayboluyordu. Bu yüzden burada da !important gerekiyor. */
.tf-footer.footer-s6 a:hover,
.tf-footer.footer-s6 .link:hover {
    color: #ffffff !important;
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tf-footer.footer-s6 .br-line {
    background: rgba(255, 255, 255, .3);
}

/* Para birimi / dil açılır listeleri BEYAZ zeminli açılıyor; footer'ın beyaz yazı
   kuralları bu panelin içine de sızdığı için seçenekler beyaz-üstüne-beyaz kalıp
   okunmuyordu. Panel içindeki yazıyı koyuya sabitliyoruz (hover'daki marka rengi
   temanın !important kuralından geldiği için korunuyor). */
.tf-footer.footer-s6 .dropdown-menu,
.tf-footer.footer-s6 .dropdown-menu a,
.tf-footer.footer-s6 .dropdown-menu a span,
.tf-footer.footer-s6 .dropdown-menu li,
.tf-footer.footer-s6 .dropdown-menu p {
    color: #101010;
}

.tf-footer.footer-s6 .form-sub input {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .38);
    color: #ffffff;
}

.tf-footer.footer-s6 .form-sub input::placeholder {
    color: rgba(255, 255, 255, .72);
}

.tf-footer.footer-s6 .form-sub .btn-action {
    background: #ffffff;
    color: var(--az-ink);
}

.tf-footer.footer-s6 .form-sub .btn-action i {
    color: var(--az-ink);
}

/* açılır seçiciler (para birimi / dil) */
.tf-footer.footer-s6 .tf-dropdown-select,
.tf-footer.footer-s6 .tf-dropdown-select .filter-option-inner-inner,
.tf-footer.footer-s6 .dropdown-toggle {
    color: #ffffff !important;
}

/* sembol bloğu — SVG zaten beyaz, olduğu gibi kalıyor */
.footer-symbol {
    text-align: center;
    padding-bottom: clamp(28px, 4vw, 48px);
}

.footer-symbol img {
    width: clamp(64px, 7vw, 92px);
    height: auto;
    margin-inline: auto;
    opacity: .95;
}

.footer-symbol p {
    margin: 14px 0 0;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #ffffff !important;
}

/* ==========================================================================
   18. home-fashion-2.html — menü ortalandı (logo sol, ikonlar sağ)
   ========================================================================== */
@media (min-width: 1200px) {
    .header-s7 .header-inner {
        position: relative;
        /* menü mutlak konumlandığı için akıştan çıkıyor;
           başlık çubuğu çökmesin diye orijinal yüksekliği korunur */
        min-height: 80px;
    }

    .header-s7 .header-left {
        flex: 0 0 auto;
    }

    /* menü, logo ve ikonlardan bağımsız olarak tam ortada dursun */
    .header-s7 .header-left .box-navigation {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .header-s7 .header-right {
        margin-left: auto;
    }

    .header-s7 .box-nav-menu {
        gap: clamp(20px, 2.2vw, 36px);
    }

    .header-s7 .box-nav-menu>.menu-item>.item-link {
        white-space: nowrap;
    }
}

/* index.html menüsü de aynı ferahlıkta olsun */
@media (min-width: 1200px) {
    .header-s2 .box-nav-menu {
        gap: clamp(18px, 1.9vw, 32px);
    }
}

/* ==========================================================================
   19. home-fashion.html — hero üstü beyaz header + yeni bölümler
   ========================================================================== */

/* hero üzerindeki şeffaf header: logo ve tüm ikonlar beyaz */
.hds7-type-2 .logo-site img {
    filter: brightness(0) invert(1);
}

.hds7-type-2 .nav-icon-item,
.hds7-type-2 .nav-icon-item i,
.hds7-type-2 .btn-open-menu,
.hds7-type-2 .btn-open-menu i {
    color: #fff;
}

.hds7-type-2 .nav-icon-item:hover i {
    opacity: .75;
}

.hds7-type-2 .header-inner {
    min-height: 80px;
}

.hds7-type-2 .box-nav-menu {
    gap: clamp(18px, 1.9vw, 32px);
}

.hds7-type-2 .box-nav-menu>.menu-item>.item-link {
    white-space: nowrap;
}

/* slider — makul yükseklik */
.az-slideshow3 .slideshow-wrap,
.az-slideshow3 .sld_image,
.az-slideshow3 .sld_image img {
    height: min(90vh, 910px) !important;
    min-height: 600px;
}

.az-slideshow3 .sld_image img {
    width: 100%;
    object-fit: cover;
    object-position: center 30%;
    opacity: 1;
}

.az-slideshow3 .slideshow-wrap {
    position: relative;
}

.az-slideshow3 .sld_image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to bottom, rgba(8, 10, 11, .52) 0%, rgba(8, 10, 11, .22) 40%, rgba(8, 10, 11, .5) 100%),
        radial-gradient(70% 56% at 50% 52%, rgba(8, 10, 11, .38), rgba(8, 10, 11, 0) 78%);
    pointer-events: none;
}

.az-slideshow3 .sld_content {
    z-index: 2;
}

.az-slideshow3 .sub-text_sld {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.az-slideshow3 .title_sld {
    font-size: clamp(2.2rem, 4.6vw, 3.75rem);
    letter-spacing: -.02em;
    text-shadow: 0 2px 40px rgba(0, 0, 0, .4);
}

/* dört sütunlu basit kart ızgarası */
.az-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 1199px) {
    .az-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .az-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* süreç kartları */
.stepcard {
    position: relative;
    padding: 34px 26px 30px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s cubic-bezier(.22, 1, .36, 1);
}

.stepcard:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px -26px rgba(19, 19, 19, .28);
}

.stepcard__num {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--az-brand-deep);
}

.stepcard__title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
}

.stepcard__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-2);
}

/* Bizi ziyaret edin */
.visit {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: rgba(255, 255, 255, .8);
}

.visit__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.visit::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, rgba(15, 17, 18, .92) 0%, rgba(15, 17, 18, .78) 48%, rgba(15, 17, 18, .45) 100%);
}

.visit__inner {
    display: grid;
    grid-template-columns: 1fr .9fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.visit__title {
    margin: 16px 0 14px;
    color: #fff;
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -.015em;
}

.visit__text {
    margin: 0;
    max-width: 46ch;
    font-size: 16px;
    line-height: 1.75;
}

.visit__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.visit__card {
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-radius: 18px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.visit__row+.visit__row {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.visit__lbl {
    display: block;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 6px;
}

.visit__val {
    display: block;
    font-size: 15px;
    line-height: 1.6;
    color: #fff;
}

.visit__val a:hover {
    opacity: .75;
}

@media (max-width: 991px) {
    .visit__inner {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   20. Yapışkan cam header — tüm sayfalarda
   ========================================================================== */
.az-stuck header.tf-header {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: 0 !important;
    background: rgba(255, 255, 255, .62) !important;
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 8px 32px rgba(15, 17, 18, .1);
}

/* cam zemin açık: yazılar ve ikonlar koyulaşır */
.az-stuck header.tf-header .item-link,
.az-stuck header.tf-header .item-link .cus-text,
.az-stuck header.tf-header .nav-icon-item,
.az-stuck header.tf-header .nav-icon-item i,
.az-stuck header.tf-header .btn-open-menu,
.az-stuck header.tf-header .btn-open-menu i,
.az-stuck header.tf-header .name-category {
    color: var(--az-ink) !important;
}

.az-stuck header.tf-header .logo-site img {
    filter: none !important;
}

/* duyuru şeridi yapışkan halde gizlensin */
.az-stuck header.tf-header .swip-text {
    display: none;
}

.az-stuck header.tf-header .header-inner {
    box-shadow: none !important;
    min-height: 68px;
}

@media (prefers-reduced-motion: no-preference) {
    header.tf-header {
        transition: background-color .35s ease, box-shadow .35s ease, top .35s ease;
    }
}

/* backdrop-filter desteklemeyen tarayıcılarda okunur kalsın */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .az-stuck header.tf-header {
        background: rgba(255, 255, 255, .96) !important;
    }
}

/* ── Detay sayfası başlık bandı (blog / haber / etkinlik / galeri / hizmet) ──
   Tema `.link:hover` ve `.cl-text-*` renklerini `!important` ile kuruyor;
   koyu zeminde okunur kalması için buradaki kurallar da `!important`. */
.section-page-title-single {
    background: #998d87 !important;
    padding-bottom: 32px;
}

.section-page-title-single,
.section-page-title-single h1,
.section-page-title-single h2,
.section-page-title-single h3,
.section-page-title-single p,
.section-page-title-single a,
.section-page-title-single strong,
.section-page-title-single .icon,
.section-page-title-single i {
    color: #ffffff !important;
}

.section-page-title-single a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Önceki / tümü / sonraki gezinme düğmeleri */
.section-page-title-single .nav-post-list .nav-post-item,
.section-page-title-single .nav-post-list .nav-post-link {
    border-color: rgba(255, 255, 255, .4) !important;
}

.section-page-title-single .nav-post-list .nav-post-item:hover,
.section-page-title-single .nav-post-list .nav-post-link:hover {
    background: rgba(255, 255, 255, .16);
    border-color: #ffffff !important;
}

/* Detay başlığı (blog-heading) — breadcrumb bandının hemen altında, bir ton
   daha koyu tam genişlik şerit. Markup col-lg-8 içinde olduğu için tam genişlik
   efekti yayılan gölge + dikey kırpma ile veriliyor (layout'a dokunmadan). */
.section-blog-single .blog-heading {
    position: relative;
    background: #897e79;
    box-shadow: 0 0 0 100vmax #897e79;
    clip-path: inset(0 -100vmax);
    padding: 36px 0 40px;
    margin-bottom: 16px;
}

.section-blog-single .blog-heading,
.section-blog-single .blog-heading h1,
.section-blog-single .blog-heading h2,
.section-blog-single .blog-heading h3,
.section-blog-single .blog-heading p,
.section-blog-single .blog-heading span,
.section-blog-single .blog-heading time,
.section-blog-single .blog-heading a,
.section-blog-single .blog-heading .icon,
.section-blog-single .blog-heading i {
    color: #ffffff !important;
}

.section-blog-single .blog-heading a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Tema `.blog-heading`'i grid + place-items:center yapıyor; içindeki `.entry-meta`
   ise sarmayan bir flex. Dört meta öğesi olan sayfalarda (süre + sunum + seans +
   fiyat) satır dar ekrana sığmayıp grid'i şişiriyor ve sayfa yatay kayıyordu. */
.section-blog-single .blog-heading { max-width: 100%; }

.section-blog-single .blog-heading .entry-meta {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
}

/* Kategori etiketi ve meta ayraçları koyu zeminde okunur kalsın */
.section-blog-single .blog-heading .entry-tag {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .3);
}

.section-blog-single .blog-heading .br-line {
    background: rgba(255, 255, 255, .4);
}

/* ── Yorum kartı: baş harf dairesi ────────────────────────────────────
   `.tst-card__who span` kuralı (0,1,1) daire olan `.tst-card__mono`yu (0,1,0)
   eziyordu: display:grid → block'a düşüyor, place-items iptal oluyor, üstelik
   13px/gri renk uygulanıyordu. Bu yüzden "EK" dairenin sol üstünde soluk
   duruyordu. Daha yüksek özgüllükle geri alıyoruz. */
.tst-card__who .tst-card__mono {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: var(--az-brand-deep);
}

/* Mobil menü alt barındaki para birimi / dil seçicileri.
   Sabit <div class="d-flex justify-content-center border-end"> sarmalayıcıları
   partial'a taşınırken kaldırıldı; hizalama burada veriliyor. */
.canvas-mb .az-canvas-switchers > * {
    display: flex;
    justify-content: center;
}
.canvas-mb .az-canvas-switchers > *:not(:last-child) {
    border-right: 1px solid var(--line);
}

/* Footer'daki para birimi artık seçici değil, sabit etiket.
   Yanındaki dil seçicisiyle aynı hizada dursun diye select'in
   iç boşluk/satır yüksekliği taklit ediliyor. */
.az-currency-static {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    font-size: 14px;
    line-height: 22px;
    white-space: nowrap;
}

/* ─── Ürünlerimiz (shop-full-width teması) ─────────────────────────── */

/* Tema demosunda tüm ürün görselleri 330x440 (3:4) olduğu için ızgara düzgün
   hizalanıyor. Yüklenen görsellerin oranı değişken olduğundan kart görsel
   alanına aynı oran veriliyor; object-fit: cover zaten temada tanımlı. */
#gridLayout .card-product_wrapper .product-img,
.tf-list-layout .card-product_wrapper .product-img {
    aspect-ratio: 330 / 440;
}

/* Görseli olmayan ürün için nötr yer tutucu */
.card-product .az-prd-empty {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #efeae7;
}


/* Fiyat aralığı — tema noUiSlider yerine iki sayı alanı kullanılıyor */
.canvas-filter .az-price-input {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--text);
}
.canvas-filter .az-price-input:focus { outline: none; }
.canvas-filter .price-val_wrap { display: flex; align-items: center; gap: 4px; }

/* Kategori facet'i: alt kategori girintisi + seçili olan vurgusu */
.canvas-filter .group-category .az-sub .label { padding-left: 16px; }
.canvas-filter .group-category .az-current > .label { color: #998d87; font-weight: 600; }

/* Favorideki ürünün kalp ikonu dolu görünsün */
.card-product .js-wishlist.is-fav .icon-heart { color: #c0392b; }

/* ─── Ürün detay (product-together teması) ─────────────────────────── */

/* Zengin metin alanları — panelden gelen HTML tema tipografisine uysun */
.az-rich-text h5 { margin: 24px 0 8px; }
.az-rich-text h5:first-child { margin-top: 0; }
.az-rich-text p { margin-bottom: 12px; }
.az-rich-text ul { margin: 0 0 12px; padding-left: 18px; list-style: disc; }
.az-rich-text li { margin-bottom: 4px; }

/* Teknik özellikler tablosu */
.az-spec-table { width: 100%; border-collapse: collapse; }
.az-spec-table th,
.az-spec-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.az-spec-table th { width: 38%; font-weight: 500; }
.az-spec-table tr:last-child th,
.az-spec-table tr:last-child td { border-bottom: 0; }

/* Ön yazı kutusu */
.az-pre-text { padding: 12px 16px; border-left: 3px solid #998d87; background: #f7f4f2; border-radius: 4px; }
.az-pre-text p:last-child { margin-bottom: 0; }

/* Ürüne uygulanan kampanyalar */
.az-campaign-list { display: grid; gap: 12px; }
.az-campaign-item { display: flex; align-items: flex-start; gap: 10px; }
.az-campaign-item .badge-sale { margin-right: 6px; }

/* Favori butonu — eklendiğinde kalp dolu görünsün */
.product-extra-icon.js-fav-btn { background: none; border: 0; padding: 0; }
.product-extra-icon.js-fav-btn.is-fav,
.product-extra-icon.js-fav-btn.is-fav .icon { color: #c0392b; }

/* Paylaş penceresi */
.modal-share .tf-social-icon { display: flex; gap: 12px; justify-content: center; margin: 20px 0; }
.modal-share .az-share-input { width: 100%; }

/* Tema ızgarası 7 sütuna kadar tanımlı; galeri bloğunda 10'a kadar seçilebildiği
   için eksik basamaklar aynı kalıpla tamamlanıyor (breakpoint'ler styles.css ile aynı). */
.tf-grid-layout.tf-col-8  { grid-template-columns: repeat(8, 1fr); }
.tf-grid-layout.tf-col-9  { grid-template-columns: repeat(9, 1fr); }
.tf-grid-layout.tf-col-10 { grid-template-columns: repeat(10, 1fr); }

@media (min-width: 576px) {
    .tf-grid-layout.sm-col-8  { grid-template-columns: repeat(8, 1fr); }
    .tf-grid-layout.sm-col-9  { grid-template-columns: repeat(9, 1fr); }
    .tf-grid-layout.sm-col-10 { grid-template-columns: repeat(10, 1fr); }
}
@media (min-width: 768px) {
    .tf-grid-layout.md-col-8  { grid-template-columns: repeat(8, 1fr); }
    .tf-grid-layout.md-col-9  { grid-template-columns: repeat(9, 1fr); }
    .tf-grid-layout.md-col-10 { grid-template-columns: repeat(10, 1fr); }
}
@media (min-width: 1200px) {
    .tf-grid-layout.xl-col-8  { grid-template-columns: repeat(8, 1fr); }
    .tf-grid-layout.xl-col-9  { grid-template-columns: repeat(9, 1fr); }
    .tf-grid-layout.xl-col-10 { grid-template-columns: repeat(10, 1fr); }
}

/* ─── Sepet (view-cart teması) ─────────────────────────────────────── */

/* Uygulanmış kupon / hediye çeki / puan kutusu */
.az-cart-code-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f7f4f2;
}

/* Özetin altındaki hediye çeki / para puan panelleri */
.fl-sidebar-cart .az-cart-extra {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
}
.fl-sidebar-cart .az-cart-extra .ip-discount-code { margin-top: 0; }

/* Sipariş özeti satırları — Bootstrap'in .d-flex kuralı "!important" olduğu için
   koşullu gösterilen satırlarda Alpine'ın inline display:none'ını eziyordu. */
.box-order-summary .az-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ─── Ödeme sayfası seçim kartları ─────────────────────────────────
   Temanın .ship-item stilleri yalnızca .box-order-summary altında tanımlı.
   Ödeme sayfasındaki kargo / fatura tipi / adres seçimleri bu yüzden
   .payment_accordion bileşenini kullanıyor; sağa yaslı fiyat ve çok
   satırlı adres için gereken iki küçük ekleme burada. */
.payment_check .az-option-price {
    margin-left: auto;
    white-space: nowrap;
}
.payment_check.align-items-start { align-items: flex-start; }
.payment_check .pay-title .d-block { font-weight: 400; }

/* ─── Sipariş sonucu (onay / ret) ──────────────────────────────────── */
.az-order-result__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.az-order-result__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 26px;
    flex-shrink: 0;
    background: #eef7f0;
    color: #2e7d4f;
}
.az-order-result.is-error .az-order-result__icon {
    background: #fbeeee;
    color: #b3261e;
}
.az-order-note {
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 8px;
    background: #f6f4f3;
    font-size: 14px;
    line-height: 22px;
}
.az-order-note.is-error {
    background: #fbeeee;
    color: #b3261e;
}
.az-order-result .list-ver { display: grid; gap: 12px; }

/* Havale hesapları */
.az-bank-list .order-item { align-items: flex-start; }
.az-bank-list .az-iban { font-family: monospace; letter-spacing: .02em; word-break: break-all; }