@charset "utf-8";
/* Vitrin: üst duyuru bandı, ana sayfa bölümleri ve ürün kartı.
   Tema dosyasının (theme-07.css) üstüne yazılır. Bu dosya değişince _Layout.cshtml'deki v= değeri artırılmalıdır. */

:root {
    --sf-accent: #ad765d;
    --sf-accent-dark: #8f5c45;
    --sf-ink: #2b2523;
    --sf-muted: #7d726c;
    --sf-line: #ece4de;
    --sf-tint: #f8f3ee;
}

.sf-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Üst duyuru bandı ---------- */
.sf-announce { position: relative; z-index: 5; overflow: hidden; background: var(--sf-accent); color: #fff; font-family: "Hind", sans-serif; font-size: 13px; line-height: 1.35; letter-spacing: .3px; }
.sf-announce-track { display: grid; align-items: center; min-height: 38px; padding: 8px 16px; text-align: center; }
/* Sırayla değişen görünüm: duyurular üst üste durur, yalnız etkin olan görünür; bant en uzun duyuru kadar yer tutar. */
.sf-announce-item { grid-area: 1 / 1; color: #fff; font-weight: 500; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; }
.sf-announce-item.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .45s ease; }
a.sf-announce-item { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .55); text-underline-offset: 3px; }
a.sf-announce-item:hover, a.sf-announce-item:focus { color: #fff; text-decoration-color: #fff; }
/* Kayan yazı */
.sf-announce.is-marquee .sf-announce-track { display: flex; width: max-content; padding: 8px 0; text-align: left; animation: sf-marquee 30s linear infinite; }
.sf-announce.is-marquee .sf-announce-item { flex: none; padding: 0 28px; white-space: nowrap; opacity: 1; visibility: visible; transform: none; transition: none; position: relative; }
.sf-announce.is-marquee .sf-announce-item::after { content: ""; position: absolute; right: -3px; top: 50%; width: 5px; height: 5px; margin-top: -3px; border-radius: 50%; background: rgba(255, 255, 255, .6); }
.sf-announce.is-marquee:hover .sf-announce-track, .sf-announce.is-marquee:focus-within .sf-announce-track { animation-play-state: paused; }
@keyframes sf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 575px) {
    .sf-announce { font-size: 12px; }
    .sf-announce-track { min-height: 34px; padding: 7px 12px; }
    .sf-announce.is-marquee .sf-announce-item { padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .sf-announce-item, .sf-announce-item.is-active { transition: none; transform: none; }
}

/* ---------- Ana sayfa bölümleri ---------- */
.sf-home .sf-section { padding: 34px 0 6px; }
.sf-home .sf-section-tint { margin-top: 28px; padding-bottom: 20px; background: var(--sf-tint); }
.sf-section-head { position: relative; margin: 0; text-align: center; }
/* Temanın h2 kuralı (dört :not() ile) daha özgüldür; boyut ve iç boşluk bu yüzden !important ile verilir. */
.sf-home .sf-section .sf-section-head h2 { margin: 0; padding: 0 !important; font-family: "Hind", sans-serif; font-size: 26px !important; line-height: 1.2; font-weight: 600; letter-spacing: .4px; color: var(--sf-ink); }
.sf-home .sf-section .sf-section-head h2::after { content: ""; display: block; width: 44px; height: 2px; margin: 10px auto 0; background: var(--sf-accent); }
.sf-section-head p { margin: 10px 0 0; font-size: 14px; color: var(--sf-muted); }
.sf-more { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: .3px; color: var(--sf-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.sf-more:hover, .sf-more:focus { color: var(--sf-ink); }
@media (min-width: 768px) {
    .sf-more { position: absolute; right: 0; bottom: 2px; margin: 0; }
}
@media (max-width: 575px) {
    .sf-home .sf-section { padding-top: 26px; }
    .sf-home .sf-section .sf-section-head h2 { font-size: 21px !important; }
    .sf-section-head p { font-size: 13px; }
}

/* Bilgi şeridi: kargo, değişim, ödeme, destek */
.sf-features { border-bottom: 1px solid var(--sf-line); background: #fff; }
.sf-features-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.sf-features-list li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 14px 10px; }
.sf-feature-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sf-tint); color: var(--sf-accent-dark); }
.sf-feature-text { min-width: 0; }
.sf-feature-text strong { display: block; font-size: 13px; line-height: 1.25; font-weight: 600; color: var(--sf-ink); }
.sf-feature-text small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--sf-muted); }
.sf-features-1 { grid-template-columns: 1fr; }
.sf-features-1 li, .sf-features-3 li:last-child { justify-content: center; }
.sf-features-3 li:last-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
    .sf-features-list li { justify-content: center; padding: 18px 12px; }
    .sf-features-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-features-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sf-features-3 li:last-child { grid-column: auto; }
    .sf-features-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sf-features-list li + li { border-left: 1px solid var(--sf-line); }
    .sf-feature-text strong { font-size: 14px; }
}

/* Kategori kısayolları: telefonda yatay kaydırılır */
.sf-home .sf-cats { padding-bottom: 0; }
/* Şerit ekranın kenarına kadar kayar (kapsayıcının 10 piksellik iç boşluğu geri alınır); ilk öğe kenardan boşluklu başlar. */
.sf-cats-list { display: flex; gap: 18px; justify-content: flex-start; overflow-x: auto; margin: 0 -10px; padding: 4px 12px 12px; scroll-padding: 0 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sf-cats-list::-webkit-scrollbar { display: none; }
.sf-cat { flex: none; width: 84px; text-align: center; color: var(--sf-ink); scroll-snap-align: start; }
.sf-cat-img { display: block; width: 84px; height: 84px; overflow: hidden; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--sf-line); background: var(--sf-tint); transition: box-shadow .2s ease; }
.sf-cat-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.sf-cat-letter { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 30px; font-weight: 600; color: var(--sf-accent-dark); }
.sf-cat-name { display: block; margin-top: 8px; font-size: 13px; line-height: 1.25; font-weight: 500; }
.sf-cat:hover, .sf-cat:focus { color: var(--sf-accent-dark); text-decoration: none; }
.sf-cat:hover .sf-cat-img, .sf-cat:focus .sf-cat-img { box-shadow: 0 0 0 2px var(--sf-accent); }
/* Şerit ekrana sığıyorsa ortalanır; sığmıyorsa kenardan başlar ve kayar (taşınca otomatik kenar boşlukları sıfırlanır). */
.sf-cat:first-child { margin-left: auto; }
.sf-cat:last-child { margin-right: auto; }
@media (min-width: 768px) {
    .sf-cats-list { gap: 26px; }
    .sf-cat, .sf-cat-img { width: 104px; }
    .sf-cat-img { height: 104px; }
    .sf-cat-name { font-size: 14px; }
}
/* Fareli geniş ekranda yatay kaydırma zahmetli: kategoriler ortalanmış satırlara dizilir. */
@media (min-width: 1025px) {
    .sf-cats-list { justify-content: center; flex-wrap: wrap; overflow: visible; margin: 0; padding: 4px 0 8px; }
    .sf-cat:first-child, .sf-cat:last-child { margin-left: 0; margin-right: 0; }
}

/* ---------- Ürün kartı (ana sayfa, kategori, arama, benzer ürünler) ---------- */
/* Tema, üzerine gelinen karta betikle sabit yükseklik ve kaydırma verir; yeni kartta bunlar kapatılır. */
.tt-product.sf-card { height: auto !important; margin: 0; padding: 0; text-align: center; background: transparent; }
.sf-products > .tt-col-item { margin-top: 24px; }
.tt-product.sf-card .tt-image-box { position: relative; overflow: hidden; border-radius: 10px; background: var(--sf-tint); }
/* Bütün görseller aynı oranda (3:4) durur; farklı boyda fotoğraflar listeyi dağıtmaz. */
.tt-product.sf-card .sf-card-media { display: block; position: relative; padding-top: 133.333%; }
.tt-product.sf-card .tt-img, .tt-product.sf-card .tt-img-roll-over { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.tt-product.sf-card .tt-img img, .tt-product.sf-card .tt-img-roll-over img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.tt-product.sf-card .tt-img-roll-over { opacity: 0; transition: opacity .35s ease; }
.tt-product.sf-card:hover .tt-img-roll-over { opacity: 1; }
.tt-product.sf-card .tt-img img { transition: transform .5s ease; }
.tt-product.sf-card:hover .tt-img img { transform: scale(1.03); }
.sf-badge { position: absolute; z-index: 3; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; background: var(--sf-ink); color: #fff; font-size: 12px; line-height: 1.2; font-weight: 600; letter-spacing: .3px; pointer-events: none; }
/* Favori düğmesi: tema bunu telefonda hiç göstermiyor, bilgisayarda yalnız üzerine gelince gösteriyordu.
   Yeni kartta her ekranda fotoğrafın sağ üst köşesinde durur; simge temanın yazı tipine bağlı değildir. */
.tt-product.sf-card .tt-btn-wishlist { position: absolute !important; z-index: 4; top: 8px !important; right: 8px !important; left: auto !important; display: block !important; width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important; border-radius: 50%; opacity: 1 !important; visibility: visible !important; cursor: pointer; font-size: 0;
    background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2523' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7.6a4.3 4.3 0 0 1 7.5 2.7c0 5.6-7.5 10.2-7.5 10.2z'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important; }
.tt-product.sf-card .tt-btn-wishlist::before, .tt-product.sf-card .tt-btn-wishlist::after { display: none !important; content: none !important; }
.tt-product.sf-card .tt-btn-wishlist:hover, .tt-product.sf-card .tt-btn-wishlist:focus { background-color: #fff !important; box-shadow: 0 0 0 1px var(--sf-accent); }
.tt-product.sf-card .tt-btn-wishlist.active { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ad765d' stroke='%23ad765d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7.6a4.3 4.3 0 0 1 7.5 2.7c0 5.6-7.5 10.2-7.5 10.2z'/%3E%3C/svg%3E") !important; }
.tt-product.sf-card .tt-description { position: static; top: auto !important; margin: 0; padding: 12px 4px 0; background: transparent; }
.tt-product.sf-card .tt-description .tt-title { margin: 0; padding: 0; font-family: "Hind", sans-serif; font-size: 14px; line-height: 1.35; font-weight: 500; color: var(--sf-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.tt-product.sf-card .tt-description .tt-title a { color: inherit; }
.tt-product.sf-card .tt-description .tt-title a:hover { color: var(--sf-accent-dark); }
.tt-product.sf-card .tt-description .tt-price { margin: 6px 0 0; font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--sf-ink); }
.tt-product.sf-card .tt-description .tt-price .new-price { color: var(--sf-accent-dark) !important; }
.tt-product.sf-card .tt-description .tt-price .old-price { margin-left: 6px; font-size: 13px; font-weight: 400; color: #9a908a; text-decoration: line-through; }
/* Görsel sayısı: fotoğrafın sağ alt köşesinde küçük bir etiket. Küçük önizleme resimleri bu kartta gösterilmez. */
.tt-product.sf-card .store-gallery-preview { position: absolute; z-index: 3; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; min-height: 0; margin: 0; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--sf-ink); font-size: 12px; line-height: 1.3; font-weight: 600; }
.tt-product.sf-card .store-gallery-preview img, .tt-product.sf-card .store-gallery-preview span { display: none; }
.tt-product.sf-card .store-gallery-preview::before { content: ""; width: 13px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2523' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E") center / contain no-repeat; }
.tt-product.sf-card .store-gallery-preview::after { content: attr(data-count); }
/* Kartın görseli ve adı ürün sayfasına gider; ayrı "İncele" düğmesi gösterilmez. */
.tt-product.sf-card .tt-product-inside-hover { display: none !important; }
/* Tükenen ürün: görsel hafifçe solar, ortasında yumuşak bir "Tükendi" damgası (filigran) durur. */
.tt-product.sf-card.is-soldout .tt-img img, .tt-product.sf-card.is-soldout .tt-img-roll-over img { filter: grayscale(35%); opacity: .7; }
.sf-soldout-mark { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-8deg); padding: 8px 22px; border: 1px solid rgba(173, 118, 93, .35); border-radius: 999px; background: rgba(255, 255, 255, .86); box-shadow: 0 6px 18px rgba(43, 37, 35, .1); color: var(--sf-accent-dark); font-family: "Hind", sans-serif; font-size: 15px; line-height: 1.2; font-weight: 600; letter-spacing: .14em; white-space: nowrap; pointer-events: none; }
@media (max-width: 575px) {
    .sf-products > .tt-col-item { margin-top: 18px; }
    .tt-product.sf-card .tt-description { padding-top: 9px; }
    .tt-product.sf-card .tt-description .tt-title { font-size: 13px; }
    .tt-product.sf-card .tt-description .tt-price { font-size: 14px; }
    .sf-badge { top: 8px; left: 8px; padding: 3px 8px; font-size: 11px; }
    .sf-soldout-mark { padding: 6px 14px; font-size: 12px; letter-spacing: .1em; }
}

/* ---------- Yana kaydırılan ürün şeridi (ana sayfa) ---------- */
.sf-carousel { position: relative; }
.sf-home .sf-products-row { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sf-home .sf-products-row::-webkit-scrollbar { display: none; }
/* Telefonda iki kart ve üçüncünün kenarı görünür: şeridin kaydığı anlaşılır. */
.sf-home .sf-products-row > .tt-col-item { flex: 0 0 44%; max-width: 44%; scroll-snap-align: start; }
@media (min-width: 576px) { .sf-home .sf-products-row > .tt-col-item { flex-basis: 31%; max-width: 31%; } }
@media (min-width: 768px) { .sf-home .sf-products-row > .tt-col-item { flex-basis: 25%; max-width: 25%; } }
.sf-carousel-btn { position: absolute; z-index: 6; top: 36%; display: none; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0 0 3px; border: 1px solid var(--sf-line); border-radius: 50%; background: #fff; color: var(--sf-ink); font-size: 26px; line-height: 1; box-shadow: 0 4px 14px rgba(43, 37, 35, .12); cursor: pointer; }
.sf-carousel-prev { left: -6px; }
.sf-carousel-next { right: -6px; }
.sf-carousel-btn:hover, .sf-carousel-btn:focus { border-color: var(--sf-accent); color: var(--sf-accent-dark); outline: none; }
/* Oklar yalnız fareyle kullanılan geniş ekranda; dokunmatik ekranda şerit parmakla kayar. */
@media (min-width: 1025px) and (hover: hover) {
    .sf-carousel-btn:not([hidden]) { display: flex; }
}

/* ---------- Telefon/tablet üst çubuğu ---------- */
/* Logo yalnız telefonda/tablette, sayfa kaydırılınca çıkan sabit çubukta görünür. */
.sf-stuck-logo { display: none; }
@media (max-width: 1024px) {
    /* Kullanıcı düğmesi yan menünün en altına taşındı: üst çubukta gösterilmez. */
    #tt-header .tt-mobile-parent-account, #tt-header .tt-stuck-parent-account { display: none !important; }
    /* Menü ve arama solda, sepet sağda; iki çubukta da simgeler aynı yerde durur (kenar boşlukları eşit). */
    #tt-header .tt-mobile-header > .container-fluid:first-child, #js-tt-stuck-nav > .container { padding-right: 16px; padding-left: 16px; }
    #tt-header .tt-mobile-header .tt-header-row, #js-tt-stuck-nav .tt-header-row { position: relative; justify-content: flex-start; padding-right: 0; padding-left: 0; }
    /* Tema tablette menü kutusunu genişletir; arama simgesi menünün yanında kalsın. */
    #tt-header .tt-mobile-parent-menu, #js-tt-stuck-nav .tt-stuck-parent-menu { flex: 0 0 auto; }
    #tt-header .tt-mobile-parent-search, #js-tt-stuck-nav .tt-stuck-parent-search { margin-left: 12px; }
    /* Sepet sayısı rozeti kutunun dışına taşar: ekran kenarına yapışmasın. */
    #tt-header .tt-mobile-parent-cart, #js-tt-stuck-nav .tt-stuck-parent-cart { margin-right: 6px; margin-left: auto; }
    #js-tt-stuck-nav .sf-stuck-logo { position: absolute; top: 50%; left: 50%; display: block; transform: translate(-50%, -50%); }
    #js-tt-stuck-nav .sf-stuck-logo img { display: block; width: auto; height: 42px; }
}

/* ---------- Yan menüde hesap bağlantıları (telefon/tablet) ---------- */
.mobile-main-menu .sf-mm-account > a, .mobile-main-menu a.sf-mm-account-link, .mobile-main-menu .sf-mm-logout button { display: flex; align-items: center; gap: 10px; }
/* Tema menüdeki simgeleri soldan mutlak konumlar; burada yazının önünde, akış içinde durur. */
.mobile-main-menu .mmpanel .sf-mm-account i, .mobile-main-menu .mmpanel a.sf-mm-account-link i { position: static !important; flex: none; width: 18px; font-size: 17px; text-align: center; color: var(--sf-accent) !important; }
/* Ana menüde kategorilerden sonraki ilk hesap satırı ince bir çizgiyle ayrılır (#mm0: temanın ilk menü paneli). */
.mobile-main-menu #mm0 li:not(.sf-mm-account) + li.sf-mm-account { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sf-line); }
.mobile-main-menu .sf-mm-logout { margin: 0; }
/* Çıkış bir form düğmesidir (güvenlik için POST); menüdeki bağlantılarla aynı görünür. */
.mobile-main-menu .sf-mm-logout button { width: 100%; padding: 9px 30px; border: 0; background: none; color: #191919; font-family: inherit; font-size: 14px; line-height: 22px; text-align: left; cursor: pointer; }
.mobile-main-menu .sf-mm-logout button:hover, .mobile-main-menu .sf-mm-logout button:focus { color: var(--sf-accent); outline: none; }