/* =====================================================================
   Tuğra Medikal Hub — Ana Sayfa Modülü Stilleri
   Bu dosya tmblog.css'in ÜZERİNE eklenir (aynı --tm-* CSS değişkenlerini
   kullanır), böylece ana sayfa Blog ile birebir aynı renk/tipografi
   sistemini paylaşır. Burada SADECE ana sayfaya özel yeni bileşenler
   (Trendyol tarzı ürün kartı, bölüm boşlukları, kartvizit yerleşimi) yer alır.
   ===================================================================== */

.tmh-section { margin: 8px 0 0; }

/* ===== Ürün Kartları (Trendyol tarzı) =============================== */
.tmh-products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px;
    margin: 28px 0;
    width: 100% !important;
}
@media (max-width: 1080px) {
    .tmh-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
    .tmh-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px; }
}
@media (max-width: 420px) {
    .tmh-products-grid { gap: 10px; }
}

.tmh-pcard {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--tm-line);
    border-radius: 16px; overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    position: relative;
}
.tmh-pcard:hover {
    transform: translateY(-4px);
    box-shadow: var(--tm-shadow);
    border-color: var(--tm-pink-soft);
}

.tmh-pcard-imgwrap {
    position: relative !important; display: block !important;
    aspect-ratio: 2 / 3 !important; /* 1200x1800 piksel ürün görseli oranıyla eşleşir */
    background: linear-gradient(135deg, #f3eff7, #fde2eb);
    overflow: hidden !important;
    /* BULUNAN GERÇEK NEDEN: .tmh-pcard ÜST kapsayıcısı "display:flex;
       flex-direction:column" — bu, .tmh-pcard-imgwrap'i bir FLEX ÖĞESİ
       yapar. Flexbox'ın varsayılan "min-height: auto" davranışı, esnek
       öğelerin içerik/oran tabanlı bir minimum yükseklik altına
       sıkışmasını ÖNLER — bu da aspect-ratio ile istediğimiz tam yüksekliğe
       erişmesini bazı tarayıcı/içerik kombinasyonlarında engelleyebiliyordu
       (kartlar arası KARŞILAŞTIRMA — WooCommerce'in TEK görselli, flex
       OLMAYAN "İlgili Ürünler" kartlarında bu sorun YOKTU — bu da sorunu
       doğrudan buraya işaret etti). min-height:0 ile bu varsayılan minimum
       devre dışı bırakılıyor. */
    min-height: 0 !important;
}

/* Kaydırmalı görsel galerisi: parmak hareketiyle (native scroll-snap, JS
   gerektirmez) veya masaüstünde fare ile (oklar) sağa/sola gezilebilir. */
.tmh-pcard-gallery-track {
    display: flex !important; width: 100% !important; height: 100% !important;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-height: 0 !important;
}
.tmh-pcard-gallery-track::-webkit-scrollbar { display: none; }
.tmh-pcard-gallery-track img {
    flex: 0 0 100% !important; width: 100% !important; height: 100% !important;
    min-width: 0 !important; min-height: 0 !important;
    /* BULUNAN GÖRSEL UYUMSUZLUĞU: Bu sitenin ürün fotoğrafları genellikle
       üst kısımda marka/rozet alanı (açık pembe/lavanta tonlu boş bir şerit)
       İLE başlayıp, asıl ürün (çorap/bacak vb.) fotoğrafın ALT kısmında yer
       alacak şekilde çekiliyor. "object-position: center" bu durumda
       fotoğrafın ORTASINI gösterip üstteki boş alanı da kadraja dahil
       ediyordu — kullanıcının defalarca işaret ettiği "boşluk" tam olarak
       buydu (bir CSS hatası değil, kırpma alanının fotoğrafın boş kısmına
       denk gelmesiydi). Kırpma noktasını ALTA kaydırarak üstteki boş
       alanın kadraj dışında kalmasını ve ürünün asıl göründüğü kısmın
       kartı doldurmasını sağlıyoruz.
       EK GÜVENCE: Tüm değerlere !important eklendi — WoodMart temasının
       (veya başka bir eklentinin) ".product img" gibi geniş kapsamlı genel
       bir kuralı, BENİM kuralımla AYNI veya DAHA YÜKSEK özgüllükte olup
       benimkini eziyor olabilir ihtimaline karşı. !important ile bu artık
       imkansız hale geliyor — hangi başka kural olursa olsun bu kazanır. */
    object-fit: cover !important; object-position: center bottom !important;
    scroll-snap-align: start;
    display: block !important;
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.tmh-pcard:hover .tmh-pcard-gallery-track img { transform: scale(1.04); }

.tmh-pcard-dots {
    position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2;
    display: flex; justify-content: center; gap: 4px; pointer-events: none;
}
.tmh-pcard-dots span {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255,255,255,.55);
    transition: background .2s ease, transform .2s ease;
}
.tmh-pcard-dots span.is-active { background: #fff; transform: scale(1.3); }

.tmh-pcard-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,.88); border: none;
    color: var(--tm-text); font-size: 16px; line-height: 1;
    align-items: center; justify-content: center;
    cursor: pointer; z-index: 3; opacity: 0; transition: opacity .2s ease;
}
.tmh-pcard-imgwrap.has-gallery:hover .tmh-pcard-arrow { opacity: 1; }
.tmh-pcard-prev { left: 6px; }
.tmh-pcard-next { right: 6px; }
@media (hover: hover) and (pointer: fine) {
    .tmh-pcard-imgwrap.has-gallery .tmh-pcard-arrow { display: flex; }
}
@media not all and (hover: hover) {
    .tmh-pcard-arrow { display: none; } /* dokunmatik cihazlarda native kaydırma yeterli */
}

.tmh-wishlist-btn {
    position: absolute !important; top: 8px !important; right: 8px !important; left: auto !important; z-index: 4 !important;
    width: 36px !important; height: 36px !important;
    /* KULLANICI İSTEĞİYLE: yuvarlak beyaz arka plan/buton görünümü
       kaldırıldı — artık sadece kalp ikonu görünüyor, etrafında bir
       "kapsül" yok. İkonun kendisi beyaz/koyu zeminde görünür olsun diye
       hafif bir gölge (drop-shadow) bırakıldı. */
    background: none !important; border: none !important; box-shadow: none !important;
    color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer;
    /* BULUNAN HATA: "color .15s ease" geçişi, tıklanınca rengin (ve ona
       bağlı fill'in) ANINDA değil, 150ms boyunca YAVAŞÇA pembeye dönmesine
       yol açıyordu — kullanıcı bunu "hemen olmuyor" olarak fark etti.
       Renk geçişi kaldırıldı, sadece hover büyütme animasyonu kaldı. */
    transition: transform .15s ease;
    padding: 0 !important; margin: 0 !important;
}
.tmh-wishlist-btn svg { width: 24px !important; height: 24px !important; }
.tmh-wishlist-btn:hover { transform: scale(1.1); }
.tmh-wishlist-btn.is-active { color: var(--tm-pink); }
/* BULUNAN HATA: Kalbin "dolu" görünmesi (SVG'nin fill özelliği) SADECE
   sayfa ilk yüklendiğinde sunucu tarafında ayarlanıyordu. JS ile tıklayıp
   ".is-active" sınıfı eklendiğinde, SVG'nin kendi "fill" özniteliği
   GÜNCELLENMİYORDU (CSS sınıfları SVG attribute'larını otomatik
   değiştirmez) — sonuç: kontur pembe oluyordu ama içi BOŞ kalıyordu.
   Çözüm: fill'i doğrudan CSS'ten zorluyoruz — bu, SVG'nin kendi fill
   özniteliğini ezer ve anında (sayfa yenilenmeden) dolu kalp gösterir. */
.tmh-wishlist-btn.is-active svg path { fill: currentColor !important; }

.tmh-pcard-badge-new { background: var(--tm-purple); box-shadow: 0 4px 10px -4px rgba(91,71,153,.55); }

.tmh-pcard-imgwrap img {
    width: 100%; height: 100%; object-fit: cover; object-position: center bottom;
    display: block;
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.tmh-pcard:hover .tmh-pcard-imgwrap img { transform: scale(1.06); }

.tmh-pcard-badge {
    position: absolute !important; top: 10px !important; left: 10px !important; right: auto !important; z-index: 2 !important;
    background: var(--tm-pink); color: #fff !important;
    font-size: 11px !important; font-weight: 800 !important; letter-spacing: .01em;
    padding: 4px 10px !important; border-radius: 999px !important;
    box-shadow: 0 4px 10px -4px rgba(231,25,90,.55);
    margin: 0 !important; width: auto !important; height: auto !important;
    display: inline-block !important; line-height: 1.4 !important;
}
.tmh-pcard-oos {
    position: absolute; inset: 0; z-index: 3;
    background: rgba(10,10,10,.55); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; text-align: center; padding: 10px;
}

.tmh-pcard-body {
    padding: 14px 16px 6px;
    display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.tmh-pcard-cat {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em;
    color: var(--tm-text-soft); font-weight: 700;
}
.tmh-pcard-title {
    font-family: var(--sans); font-weight: 700;
    font-size: 14.5px; line-height: 1.35; color: var(--tm-text);
    margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.7em;
}
.tmh-pcard-title a { color: inherit; text-decoration: none; }

.tmh-pcard-rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tm-text-soft); }
.tmh-stars { color: var(--tm-yellow-d); font-size: 12px; letter-spacing: 1px; }

.tmh-pcard-lowstock {
    font-size: 11.5px; font-weight: 700; color: var(--tm-red, #c2154b);
}

.tmh-pcard-price { margin-top: auto; padding-top: 4px; font-size: 15px; }
.tmh-pcard-price .woocommerce-Price-amount {
    color: var(--tm-purple); font-weight: 800; font-size: 16px;
}
.tmh-pcard-price del {
    text-decoration: line-through; margin-right: 6px;
}
.tmh-pcard-price del .woocommerce-Price-amount {
    color: var(--tm-text-soft); font-weight: 500; font-size: 12.5px;
}
.tmh-pcard-price ins {
    text-decoration: none;
}
.tmh-pcard-price ins .woocommerce-Price-amount {
    color: var(--tm-pink-dark); font-weight: 800;
}

.tmh-pcard-cta {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 10px 14px 14px; padding: 9px 0;
    border-radius: 10px; background: var(--tm-bg-mute);
    color: var(--tm-text); font-weight: 700; font-size: 13px;
    text-decoration: none; position: relative; overflow: hidden;
    transition: background .2s ease, color .2s ease;
}
.tmh-pcard-cta:hover { background: var(--tm-pink); color: #fff !important; }

/* Kullanıcı isteğiyle: kart üzerindeki CTA butonu artık her zaman yeşil
   "Sepete Ekle" — basit ürünlerde gerçekten AJAX ile ekler, varyasyonlu
   ürünlerde (beden/renk seçimi gerektiğinden) ürün sayfasına yönlendirir. */
.tmh-pcard-cta-green {
    background: #1a9e52 !important; color: #fff !important;
}
.tmh-pcard-cta-green:hover { background: #15803f !important; }
.tmh-pcard-cta-green.tmh-is-adding { pointer-events: none; opacity: .75; }
.tmh-pcard-cta-green.tmh-just-added { background: #0f6e3a !important; }
.tmh-pcard-cta-green.tmh-just-added .tmh-pcard-cta-label::after { content: ' ✓'; }

@media (max-width: 600px) {
    .tmh-pcard-title { font-size: 13.5px; }
    .tmh-pcard-body { padding: 10px 12px 4px; }
    .tmh-pcard-cta { margin: 8px 10px 12px; font-size: 12.5px; }
}

/* ===== Hero Slider ==================================================== */
.tmh-slider {
    position: relative; overflow: hidden;
    background: var(--tm-bg-mute, #f7f4ee);
    margin-bottom: 8px;
}
.tmh-slider-track { position: relative; }
.tmh-slide {
    display: none !important;
    animation: tmhFadeIn .5s ease;
}
.tmh-slide.is-active { display: block !important; }
@keyframes tmhFadeIn { from { opacity: 0; } to { opacity: 1; } }

.tmh-slider-arrow {
    position: absolute !important; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.9); border: 1px solid var(--tm-line);
    color: var(--tm-text); font-size: 22px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 5; transition: background .2s ease, transform .2s ease;
    box-shadow: var(--tm-shadow);
}
.tmh-slider-arrow:hover { background: var(--tm-pink); color: #fff; }
.tmh-slider-prev { left: 18px !important; right: auto !important; }
.tmh-slider-next { right: 18px !important; left: auto !important; }

.tmh-slider-dots {
    position: absolute !important; left: 0; right: 0; bottom: 16px; z-index: 5;
    display: flex; justify-content: center; gap: 8px;
}
.tmh-slider-dot {
    width: 9px; height: 9px; border-radius: 50%; padding: 0;
    background: rgba(20,20,20,.25); border: none; cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.tmh-slider-dot.is-active { background: var(--tm-pink); transform: scale(1.25); }

@media (max-width: 760px) {
    .tmh-slider-arrow { width: 36px; height: 36px; font-size: 18px; }
    .tmh-slider-prev { left: 8px !important; }
    .tmh-slider-next { right: 8px !important; }
}
/* BULUNAN SORUN: "max-width:480px" gibi sadece EKRAN GENİŞLİĞİNE bakan bir
   kuralla okları gizlemek, geniş ekranlı dokunmatik telefon/tabletlerde
   (480px'den daha geniş CSS piksel genişliğine sahip cihazlarda) okların
   GÖRÜNÜP normal akışa düşmesine (position:absolute'ün başka bir nedenle
   uygulanamadığı durumda) yol açabiliyordu. Artık ekran genişliği DEĞİL,
   cihazın gerçekten fare/hassas işaretçiye (hover desteğine) sahip olup
   olmadığına bakılıyor — dokunmatik cihazlarda (telefon/tablet, ekran
   genişliği ne olursa olsun) oklar HİÇBİR ZAMAN render edilmez; parmakla
   kaydırma zaten native olarak çalışır (bkz. tmh-home.js touchstart/touchend).
   Aynı sağlam yöntem ürün kartı galerisi oklarında da kullanılıyor. */
@media not all and (hover: hover) and (pointer: fine) {
    .tmh-slider-arrow { display: none !important; }
}

/* ===== Kategori Banner ================================================ */
.tmh-cat-banner {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin: 24px 0 8px;
}
.tmh-cat-card {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    text-decoration: none; color: var(--tm-text);
}
.tmh-cat-card-img {
    width: 100%; aspect-ratio: 1/1; border-radius: 50%;
    background-size: cover; background-position: center; background-color: var(--tm-bg-mute);
    border: 3px solid #fff; box-shadow: var(--tm-shadow);
    transition: transform .25s ease;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--tm-purple);
}
.tmh-cat-card:hover .tmh-cat-card-img { transform: scale(1.06); }
.tmh-cat-card-label {
    font-size: 13px; font-weight: 700; text-align: center;
    line-height: 1.3;
}
.tmh-cat-card-label small { font-weight: 600; color: var(--tm-text-soft); text-transform: none; letter-spacing: 0; }
@media (max-width: 980px) {
    .tmh-cat-banner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .tmh-cat-banner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .tmh-cat-card-label { font-size: 12px; }
}
@media (max-width: 420px) {
    .tmh-cat-banner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Kategori Banner — ANA SAYFA: Sonsuz Döngülü Yana Kayan Şerit ===
   ÖNEMLİ: Bu blok SADECE ana sayfadaki "Kategorilere Göz At" şeridini
   (tmh_render_category_banner, class-tmh-homepage.php) ilgilendirir.
   Kategori sayfasındaki ALT KATEGORİ ızgarası (.tmh-cat-banner,
   class-tmh-shop.php) bundan ETKİLENMEZ — o hâlâ yukarıdaki sabit grid
   kurallarını kullanır. Teknik, aşağıdaki blog şeridiyle (.tmh-blog-*)
   BİREBİR aynıdır: kartlar tek satırda yan yana dizilir, CSS animasyonu
   ile sürekli sola kayar, kart sayısı azsa listenin kendisi PHP
   tarafında çoğaltılıp döngü kesintisiz hale getirilir (bkz.
   tmh_render_category_banner). EK OLARAK (kullanıcı talebiyle): elle
   sürükleme desteği var — masaüstünde fareyle, mobilde dokunarak sağa/
   sola "çevrilebilir"; otomatik kayma mobilde KESİNTİSİZ devam eder,
   sürükleme bitince de (zıplama yapmadan) tam bırakıldığı noktadan
   otomatik kaymaya geri döner. Sürükleme mantığı assets/js/tmh-home.js
   içindeki initCatDragSlider() fonksiyonunda — bkz. orada Pointer Events
   (fare+dokunma birleşik) kullanımı. */
.tmh-cat-slider-wrap { overflow: hidden; }
.tmh-cat-slider {
    overflow: hidden;
    margin-top: 24px;
    cursor: grab;
    /* "pan-y": dikey sayfa kaydırması TARAYICIYA bırakılır (kullanıcı
       parmağını yukarı/aşağı kaydırırsa sayfa normal kayar), YATAY
       hareket ise tarayıcının kendi jest yorumlamasına (örn. "geri git"
       kenar kaydırması) BIRAKILMAZ — tamamen bizim JS'imiz yönetir. */
    touch-action: pan-y;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.tmh-cat-slider.is-dragging { cursor: grabbing; }
.tmh-cat-track {
    display: flex;
    align-items: flex-start;
    width: max-content;
    will-change: transform;
    user-select: none; /* sürüklerken kart etiketi metni seçilmesin */
    animation: tmhCatScroll linear infinite;
    animation-duration: calc(var(--tmh-cat-count, 10) * 3.2s);
}
.tmh-cat-slider:hover .tmh-cat-track,
.tmh-cat-slider:focus-within .tmh-cat-track {
    animation-play-state: paused;
}
/* NOT: Aktif sürükleme (.is-dragging) sırasında animasyon zaten JS
   tarafından TAMAMEN devre dışı bırakılıyor (bkz. initCatDragSlider) —
   yukarıdaki duraklatma kuralı sadece sürükleme OLMADAN üzerine
   gelinen/odaklanılan durum içindir. */
.tmh-cat-card { -webkit-user-drag: none; } /* tarayıcının yerleşik "linki sürükle" davranışı bizim sürüklememizle karışmasın */
@keyframes tmhCatScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* .tmh-cat-card (yuvarlak görsel + etiket) yukarıdaki grid bloğunda zaten
   tanımlı ve burada da AYNEN tekrar kullanılıyor; sadece genişliği artık
   grid sütunu değil, aşağıdaki sabit piksel kart genişliği belirliyor. */
.tmh-cat-slide {
    flex: 0 0 170px;
    width: 170px;
    max-width: 170px;
    margin-right: 28px;
}
@media (max-width: 980px) {
    .tmh-cat-slide { flex: 0 0 140px; width: 140px; max-width: 140px; margin-right: 20px; }
}
@media (max-width: 640px) {
    .tmh-cat-slide { flex: 0 0 110px; width: 110px; max-width: 110px; margin-right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .tmh-cat-track { animation: none; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tmh-cat-slider { touch-action: auto; } /* azaltılmış hareket tercihinde JS sürüklemesi yerine native kaydırma */
}


/* ===== Blog — Sonsuz Döngülü Kayan Şerit ============================= */
.tmh-blog-slider-wrap { overflow: hidden; }
.tmh-blog-slider {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.tmh-blog-track {
    display: flex;
    align-items: stretch;
    width: max-content;
    will-change: transform;
    animation: tmhBlogScroll linear infinite;
    animation-duration: calc(var(--tmh-blog-count, 10) * 6s);
}
.tmh-blog-slider:hover .tmh-blog-track,
.tmh-blog-slider:focus-within .tmh-blog-track {
    animation-play-state: paused;
}
@keyframes tmhBlogScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* BULUNAN HATA: .tmblog-card kuralı (tmblog.css) ızgara (grid) bağlamı için
   "width: 100% !important; max-width: 100% !important;" tanımlıyor. Bu
   şeritteki (.tmh-blog-track, width:max-content) kartlara da miras kaldığı
   için, kart genişliği flex-basis (300px) yerine "üst kapsayıcının %100'ü"
   olmaya çalışıyordu — kapsayıcının genişliği de KENDİSİ kartların
   toplamından (max-content) belirlendiği için bu dairesel bir bağımlılık
   oluşturup tarayıcıya göre değişen, bozuk bir görünüme yol açıyordu.
   Çözüm: bu bağlamda SABİT piksel genişlik ile (kendi !important'ımızla)
   açıkça geçersiz kılıyoruz. */
.tmh-blog-slide.tmblog-card {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    margin-right: 20px;
}
@media (max-width: 640px) {
    .tmh-blog-slide.tmblog-card { flex: 0 0 240px !important; width: 240px !important; max-width: 240px !important; margin-right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .tmh-blog-track { animation: none; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ===== Genel duyarlılık (tablet/mobil) ek düzeltmeler ================= */
@media (max-width: 980px) {
    /* BULUNAN SORUN: 4px gibi çok dar bir üst boşluk, slider'ın alt
       kısmındaki noktalarla (dots) hemen ardından gelen bölümün (kategori
       banner/ürünler) başlığının görsel olarak birbirine "karışmasına" yol
       açıyordu. Mobilde slider'dan sonra gelen HER bölüme yeterli boşluk
       veriyoruz. */
    .tmh-slider + .tmh-section,
    .tmh-slider ~ .tmblog-container.tmh-section {
        margin-top: 28px;
    }
    .tmh-section { margin-top: 20px; }
}
/* NOT: .tmh-pcard-imgwrap için mobilde farklı bir aspect-ratio ARTIK
   uygulanmıyor — 1200x1800 (2:3) oranı tüm ekran boyutlarında tutarlı
   kalmalı, aksi halde görsel mobilde farklı kırpılır/bozuk görünürdü. */

/* ===== Mağaza / Kategori sayfaları ==================================== */
.tmh-shop-banner {
    background-size: cover; background-position: center;
    padding: 60px 0; margin-bottom: 8px; position: relative;
}
.tmh-shop-banner::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20,16,12,.15), rgba(20,16,12,.55));
}
.tmh-shop-banner .tmblog-container { position: relative; z-index: 1; }
.tmh-shop-banner h1 { color: #fff; margin: 0; font-size: clamp(28px, 4vw, 44px); }

.tmh-page-title { font-size: clamp(26px, 4vw, 38px); margin: 24px 0 0; }

/* Kategori sayfası başlığı: yuvarlak görsel + başlık (ana sayfadaki
   kategori kartlarıyla AYNI biçim — geniş/kısa bir banner'a gerilmiş,
   bozulmuş görsel yerine). */
.tmh-cat-page-header {
    display: flex; align-items: center; gap: 18px;
    margin-top: 24px; flex-wrap: wrap;
}
.tmh-cat-page-thumb {
    width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0;
    background-size: cover; background-position: center;
    border: 3px solid #fff; box-shadow: var(--tm-shadow);
}
.tmh-cat-page-header .tmh-page-title { margin: 0; }
@media (max-width: 560px) {
    .tmh-cat-page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .tmh-cat-page-thumb { width: 64px; height: 64px; }
}

.tmh-shop-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin: 18px 0;
    padding-bottom: 14px; border-bottom: 1px solid var(--tm-line);
}
.tmh-shop-count { font-size: 13.5px; color: var(--tm-text-soft); font-weight: 600; }
.tmh-shop-sort select {
    border: 1px solid var(--tm-line); border-radius: 8px; padding: 7px 12px;
    font-size: 13.5px; background: #fff; color: var(--tm-text);
}

.tmh-shop-grid { margin: 8px 0 32px; }

.tmh-empty-state {
    text-align: center; padding: 60px 20px; color: var(--tm-text-soft);
}

.tmh-pagination {
    display: flex; align-items: center; justify-content: center; gap: 18px;
    margin: 20px 0 40px;
}
.tmh-page-btn {
    padding: 9px 18px; border-radius: 999px; background: var(--tm-bg-mute);
    color: var(--tm-text); font-weight: 700; font-size: 13.5px; text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.tmh-page-btn:hover { background: var(--tm-pink); color: #fff; }
.tmh-page-info { font-size: 13px; color: var(--tm-text-soft); font-weight: 600; }

.tmh-cat-description { color: var(--tm-text-soft); margin: 10px 0 0; max-width: 760px; }

@media (max-width: 600px) {
    .tmh-shop-banner { padding: 36px 0; }
    .tmh-shop-toolbar { flex-direction: column; align-items: flex-start; }
    .tmh-pagination { gap: 10px; }
}

/* ===== Hakkımızda sayfası ============================================= */
.tmh-about-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px;
    margin: 28px 0;
}
.tmh-stat-box {
    background: #fff; border: 1px solid var(--tm-line); border-radius: 16px;
    padding: 22px 14px; text-align: center; display: flex; flex-direction: column; gap: 6px;
}
.tmh-stat-box strong { font-family: var(--serif); font-size: clamp(22px, 3vw, 30px); color: var(--tm-purple); }
.tmh-stat-box span { font-size: 12.5px; color: var(--tm-text-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.tmh-about-content {
    max-width: 760px; font-size: 16px; line-height: 1.75; color: var(--tm-text);
}
.tmh-about-content p { margin: 0 0 16px; }

.tmh-about-cta { text-align: center; margin: 30px 0 50px; }

@media (max-width: 760px) {
    .tmh-about-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px) {
    .tmh-about-content { font-size: 15px; }
}

/* ===== Fiyat filtresi ================================================= */
.tmh-shop-filters { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tmh-price-filter { display: flex; align-items: center; gap: 6px; }
.tmh-price-filter input[type="number"] {
    width: 90px; border: 1px solid var(--tm-line); border-radius: 8px;
    padding: 7px 10px; font-size: 13.5px;
}
.tmh-price-filter span { color: var(--tm-text-soft); }
.tmh-price-filter-go {
    border: 1px solid var(--tm-line); background: var(--tm-bg-mute);
    border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 700;
    cursor: pointer; color: var(--tm-text);
}
.tmh-price-filter-go:hover { background: var(--tm-pink); color: #fff; border-color: var(--tm-pink); }

/* ===== Breadcrumb (gezinme izi) ======================================= */
.tmh-breadcrumb {
    font-size: 12.5px; color: var(--tm-text-soft); margin: 16px auto 0;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.tmh-breadcrumb a { color: var(--tm-text-soft); text-decoration: none; }
.tmh-breadcrumb a:hover { color: var(--tm-pink); text-decoration: underline; }
.tmh-breadcrumb-sep { opacity: .5; }
.tmh-breadcrumb span[aria-current] { color: var(--tm-text); font-weight: 600; }

/* ===== Header sepet rozeti ============================================= */
.tmblog-cart-link {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    color: inherit; margin-left: 8px; padding: 6px; flex-shrink: 0;
}
.tmblog-cart-count {
    position: absolute; top: -2px; right: -4px;
    background: var(--tm-pink); color: #fff;
    font-size: 10.5px; font-weight: 800; line-height: 1;
    min-width: 16px; height: 16px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
}

@media (max-width: 560px) {
    .tmblog-cart-link, .tmblog-wishlist-link { padding: 5px; }
    .tmblog-cart-link svg, .tmblog-wishlist-link svg { width: 18px; height: 18px; }
}

@media (max-width: 600px) {
    .tmh-shop-filters { width: 100%; justify-content: space-between; }
    .tmh-price-filter input[type="number"] { width: 70px; }
}

/* ===== WooCommerce Sepet / Ürün sayfaları — marka uyumu ================
   NOT: WooCommerce'in kendi şablon/markup yapısı (tablo, form, sekmeler)
   olduğu gibi korunur (test edilmiş işlevsellik); burada sadece görsel
   marka uyumu (renk, yuvarlak köşe, boşluk) sağlanır. */
.tmh-wc-wrap { padding-bottom: 50px; }
.tmh-wc-wrap .woocommerce-message,
.tmh-wc-wrap .woocommerce-info,
.tmh-wc-wrap .woocommerce-error {
    border-top-color: var(--tm-pink) !important;
    border-radius: 10px; background: #fff;
}
.tmh-wc-wrap .woocommerce-message::before,
.tmh-wc-wrap .woocommerce-info::before { color: var(--tm-pink) !important; }

.tmh-wc-wrap .button,
.tmh-wc-wrap button.button,
.tmh-wc-wrap input.button,
.tmh-wc-wrap a.button {
    background: var(--tm-pink) !important; color: #fff !important;
    border-radius: 999px !important; border: none !important;
    font-weight: 700 !important; padding: 12px 26px !important;
    transition: background .2s ease, transform .15s ease;
}
.tmh-wc-wrap .button:hover,
.tmh-wc-wrap button.button:hover,
.tmh-wc-wrap input.button:hover,
.tmh-wc-wrap a.button:hover {
    background: var(--tm-pink-dark) !important; transform: translateY(-1px);
}
.tmh-wc-wrap .button.alt { background: var(--tm-purple) !important; }

.tmh-wc-wrap table.shop_table {
    border-radius: 14px; border: 1px solid var(--tm-line) !important;
    overflow: hidden;
}
.tmh-wc-wrap table.shop_table th { background: var(--tm-bg-mute); }
.tmh-wc-wrap .cart_totals,
.tmh-wc-wrap .cart-collaterals {
    background: #fff; border: 1px solid var(--tm-line);
    border-radius: 14px; padding: 4px 18px;
}
.tmh-wc-wrap .quantity .qty {
    border-radius: 8px; border: 1px solid var(--tm-line); padding: 8px;
}

/* Ürün detay sayfası */
.tmh-wc-wrap .product .summary .price {
    color: var(--tm-purple); font-weight: 800;
}
.tmh-wc-wrap .product .summary .price ins { color: var(--tm-pink-dark); text-decoration: none; }
.tmh-wc-wrap .woocommerce-tabs ul.tabs li a { color: var(--tm-text); font-weight: 700; }
.tmh-wc-wrap .woocommerce-tabs ul.tabs li.active a { color: var(--tm-pink); }
.tmh-wc-wrap .related.products h2 { font-family: var(--serif); color: var(--tm-purple); }

@media (max-width: 600px) {
    .tmh-wc-wrap .button,
    .tmh-wc-wrap button.button,
    .tmh-wc-wrap input.button,
    .tmh-wc-wrap a.button { width: 100%; text-align: center; }
}

/* ===== Header favori (♡) ikonu ========================================= */
.tmblog-wishlist-link {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    color: inherit; margin-left: 4px; padding: 6px; flex-shrink: 0;
}

/* ===== Sık Sorulan Sorular (akordeon) ================================= */
.tmh-faq-list { max-width: 760px; margin-top: 24px; }
.tmh-faq-item {
    border: 1px solid var(--tm-line); border-radius: 14px;
    margin-bottom: 12px; overflow: hidden; background: #fff;
}
.tmh-faq-question {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 16px 20px; background: none; border: none; cursor: pointer;
    font-size: 15.5px; font-weight: 700; color: var(--tm-text); text-align: left;
}
.tmh-faq-icon {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    background: var(--tm-bg-mute); display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 700; color: var(--tm-pink);
    transition: transform .2s ease, background .2s ease;
}
.tmh-faq-item.is-open .tmh-faq-icon { transform: rotate(45deg); background: var(--tm-pink); color: #fff; }
.tmh-faq-answer {
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
}
.tmh-faq-item.is-open .tmh-faq-answer { max-height: 600px; }
.tmh-faq-answer p { margin: 0; padding: 0 20px 18px; color: var(--tm-text-soft); line-height: 1.7; font-size: 14.5px; }

/* ===== Hesabım sayfası — WooCommerce my-account marka uyumu ============ */
.tmh-account-wrap .woocommerce-MyAccount-navigation {
    background: #fff; border: 1px solid var(--tm-line); border-radius: 14px;
    padding: 10px; margin-bottom: 20px;
}
.tmh-account-wrap .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.tmh-account-wrap .woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid var(--tm-line);
}
.tmh-account-wrap .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.tmh-account-wrap .woocommerce-MyAccount-navigation a {
    display: block; padding: 12px 14px; color: var(--tm-text); font-weight: 600; text-decoration: none; font-size: 14px;
}
.tmh-account-wrap .woocommerce-MyAccount-navigation li.is-active a { color: var(--tm-pink); }
.tmh-account-wrap .woocommerce-MyAccount-navigation a:hover { color: var(--tm-pink); }
.tmh-account-wrap .woocommerce-MyAccount-content { background: #fff; border: 1px solid var(--tm-line); border-radius: 14px; padding: 24px; }
@media (min-width: 768px) {
    .tmh-account-wrap .woocommerce-MyAccount-navigation { float: left; width: 220px; margin-right: 24px; }
    .tmh-account-wrap .woocommerce-MyAccount-content { overflow: hidden; }
}

/* ===== Karşılaştır butonu (ürün kartı) ================================= */
.tmh-compare-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: none; padding: 4px 0; margin: 4px 0 0;
    color: var(--tm-text-soft); font-size: 12px; font-weight: 700;
    cursor: pointer; transition: color .15s ease, transform .15s ease;
}
.tmh-compare-btn:hover { color: var(--tm-pink); }
.tmh-compare-btn.is-active { color: var(--tm-purple); }
.tmh-compare-btn.is-active span::after { content: ' ✓'; }
/* Favori butonuyla AYNI "pop" animasyonu (büyüt-küçült) — net geri bildirim. */
.tmh-compare-btn.tmh-pop { animation: tmhPop .42s ease; }
.tmh-compare-btn.tmh-just-added { color: #1a9e52 !important; }
.tmh-compare-btn.tmh-just-added span::after { content: ' ✓ Eklendi'; }

/* ===== Karşılaştır sayfası ============================================= */
.tmh-compare-table-wrap { overflow-x: auto; margin-top: 20px; }
table.tmh-compare-table {
    width: 100%; min-width: 640px; border-collapse: collapse; background: #fff;
    border: 1px solid var(--tm-line); border-radius: 14px; overflow: hidden;
}
table.tmh-compare-table th, table.tmh-compare-table td {
    border: 1px solid var(--tm-line); padding: 14px 16px; text-align: left;
    vertical-align: top; font-size: 13.5px;
}
table.tmh-compare-table th.tmh-compare-row-label {
    background: var(--tm-bg-mute); font-weight: 700; white-space: nowrap; width: 160px;
}
table.tmh-compare-table .tmh-compare-product-img {
    width: 100%; max-width: 140px; aspect-ratio: 2/3; object-fit: cover;
    border-radius: 10px; display: block; margin-bottom: 10px;
}
table.tmh-compare-table .tmh-compare-product-title {
    font-weight: 700; color: var(--tm-text); text-decoration: none; display: block; margin-bottom: 4px;
}
table.tmh-compare-table .tmh-compare-remove {
    display: inline-block; margin-top: 8px; font-size: 12px; color: var(--tm-text-soft);
    text-decoration: underline; cursor: pointer; border: none; background: none; padding: 0;
}

/* ===== Ürün sayfası ek bölümleri ======================================= */
.tmh-pp-banner {
    display: flex; align-items: center; gap: 10px;
    background: #eafaf1; color: #1a7e3c; border-radius: 12px;
    padding: 13px 16px; margin: 14px 0; font-weight: 700; font-size: 14px;
}
.tmh-pp-banner-icon { font-size: 18px; }

.tmh-pp-brand-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 0; border-top: 1px solid var(--tm-line); border-bottom: 1px solid var(--tm-line);
    margin: 16px 0;
}
.tmh-pp-brand-name { font-weight: 800; font-size: 15px; color: var(--tm-text); }
.tmh-pp-verified { color: #1a7e3c; font-size: 13px; }
.tmh-ask-question-btn {
    border: 1.5px solid var(--tm-pink); color: var(--tm-pink); background: #fff;
    border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 13px; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.tmh-ask-question-btn:hover { background: var(--tm-pink); color: #fff; }

.tmh-pp-cargo-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 13.5px; color: var(--tm-text-soft); margin: 12px 0;
}
.tmh-pp-cargo-icon { font-size: 16px; }
.tmh-pp-cargo-carriers { color: var(--tm-text-dim); font-size: 12px; }

.tmh-pp-coupons { margin: 22px 0; }
.tmh-pp-coupons h3 { font-size: 16px; margin: 0 0 12px; }
.tmh-pp-coupon-card {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    background: #fdf1ea; border: 1px dashed #e0a572; border-radius: 12px;
    padding: 12px 16px; margin-bottom: 10px;
}
.tmh-pp-coupon-min { display: block; font-size: 12px; color: var(--tm-text-soft); font-weight: 600; }
.tmh-pp-coupon-copy {
    border: 1px solid #e0a572; background: #fff; border-radius: 999px;
    padding: 7px 14px; font-size: 12.5px; font-weight: 700; color: #a85d1f; cursor: pointer;
    white-space: nowrap;
}

/* "Soru Sor" modalı */
.tmh-modal {
    position: fixed; inset: 0; background: rgba(20,16,12,.5); z-index: 9999;
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
/* BULUNAN KRİTİK HATA: ".tmh-modal { display:flex }" kuralı ile tarayıcının
   varsayılan "[hidden] { display:none }" kuralı AYNI CSS önceliğine
   (specificity) sahip — ve bu dosya tarayıcının kendi stil sayfasından
   SONRA yüklendiği için HER ZAMAN kazanıyordu. Sonuç: "hidden" özelliği
   eklenmiş olsa bile modal HER ZAMAN görünür kalıyordu; JS'in
   "modal.hidden = true" ile kapatma kodu çalışıyordu ama HİÇBİR GÖRSEL
   ETKİSİ olmuyordu — bu yüzden hiçbir kullanıcı modalı kapatamıyordu.
   Çözüm: ".tmh-modal[hidden]" (sınıf+özellik = daha yüksek öncelik) ile
   gizli durumu !important ile KESİN olarak zorluyoruz. */
.tmh-modal[hidden] { display: none !important; }
.tmh-modal-box {
    background: #fff; border-radius: 16px; padding: 26px; max-width: 420px; width: 100%;
    position: relative; max-height: 90vh; overflow-y: auto;
}
.tmh-modal-close {
    position: absolute; top: 12px; right: 14px; border: none; background: none;
    font-size: 24px; line-height: 1; cursor: pointer; color: var(--tm-text-soft);
}
.tmh-modal-box h3 { margin: 0 0 4px; font-family: var(--serif); }
.tmh-modal-product-name { color: var(--tm-text-soft); font-size: 13px; margin: 0 0 16px; }
.tmh-modal-box label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.tmh-modal-box input, .tmh-modal-box textarea {
    width: 100%; border: 1px solid var(--tm-line); border-radius: 8px;
    padding: 9px 12px; font-size: 14px; margin-bottom: 12px; box-sizing: border-box;
    font-family: inherit;
}
.tmh-modal-status { font-size: 13px; text-align: center; min-height: 18px; color: var(--tm-text-soft); }

/* Mobil yapışkan sepete ekle çubuğu */
.tmh-sticky-cart-bar {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
    background: #fff; border-top: 1px solid var(--tm-line);
    box-shadow: 0 -8px 24px -8px rgba(20,16,12,.18);
    padding: 12px 16px; align-items: center; justify-content: space-between; gap: 14px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.tmh-sticky-cart-price { font-weight: 800; color: var(--tm-purple); font-size: 16px; flex-shrink: 0; }
.tmh-sticky-cart-bar .tm-btn { flex: 1; text-align: center; justify-content: center; }
.tmh-sticky-cart-oos { color: var(--tm-text-soft); font-weight: 700; }
@media (max-width: 760px) {
    .tmh-sticky-cart-bar { display: flex; }
}

/* ===== Mobil Alt Menü (Bottom Nav) ===================================== */
.tmh-bottom-nav {
    display: none; /* sadece mobilde (aşağıdaki media query) görünür */
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 700;
    background: #fff; border-top: 1px solid var(--tm-line);
    box-shadow: 0 -6px 20px -10px rgba(20,16,12,.18);
    height: 60px;
    padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 760px) {
    .tmh-bottom-nav { display: grid; grid-template-columns: repeat(6, 1fr); }
    /* Sabit alt menü içeriğin üzerine binmesin diye sayfanın en altına boşluk bırakılır. */
    body { padding-bottom: 60px; }
}
.tmh-bn-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; text-decoration: none; color: var(--tm-text-soft);
    font-size: 10.5px; font-weight: 700; padding: 6px 2px;
}
.tmh-bn-icon { position: relative; display: flex; }
.tmh-bn-item.is-active { color: var(--tm-pink); }
.tmh-bn-badge {
    position: absolute; top: -5px; right: -8px;
    background: var(--tm-pink); color: #fff;
    font-size: 9.5px; font-weight: 800; line-height: 1;
    min-width: 15px; height: 15px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* BULUNAN ÇAKIŞMA: Ürün sayfasında İKİ sabit (fixed) çubuk aynı anda var —
   yapışkan "Sepete Ekle" çubuğu VE alt menü. İkisi de bottom:0'da olursa
   üst üste biner. Çözüm: alt menü en altta (bottom:0) kalır, sepete ekle
   çubuğu onun TAM ÜZERİNE (bottom: alt menü yüksekliği) oturur; sayfa
   içeriğine de İKİSİNİN TOPLAM yüksekliği kadar boşluk (padding) verilir
   ki son ürün/metin bu çubukların altında SAKLI kalmasın. */
@media (max-width: 760px) {
    .tmh-sticky-cart-bar { bottom: 60px; } /* alt menünün yüksekliği */
    .tmh-product-page { padding-bottom: 140px; } /* sepete-ekle çubuğu (~76px) + alt menü (60px) */
}

/* ===== Yönetici tanı şeridi (sadece manage_options'a görünür) ========== */
.tmh-debug-banner {
    background: #1a7e3c; color: #fff; font-size: 12.5px; font-weight: 600;
    text-align: center; padding: 8px 36px; position: relative;
    line-height: 1.4;
}
.tmh-debug-banner button {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #fff; font-size: 18px;
    cursor: pointer; line-height: 1; padding: 4px;
}

/* ===== Sağ alt köşe sabit giriş butonu (FAB) =========================== */
.tmh-fab-login {
    position: fixed; right: 18px; bottom: 18px; z-index: 650;
    width: 52px; height: 52px; border-radius: 50%; border: none;
    background: var(--tm-pink); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px -6px rgba(231,25,90,.55);
    transition: transform .15s ease, background .2s ease;
}
.tmh-fab-login:hover { background: var(--tm-pink-dark); transform: scale(1.06); }
@media (max-width: 760px) {
    /* BULUNAN ÇAKIŞMA RİSKİ: Mobilde alt menü (60px) VE ürün sayfasında
       ayrıca yapışkan sepete-ekle çubuğu (~76px) olabiliyor. FAB'ı, İKİSİ
       BİRDEN olduğu en "kalabalık" duruma göre (60+76px) sabit
       konumlandırıyoruz — bu sayede hangi sayfada olunduğuna bakılmaksızın
       FAB hiçbir zaman diğer sabit elemanların altında/üzerinde kalmaz.
       Bu, ürün sayfası DIŞINDAKİ sayfalarda FAB'ın biraz daha yukarıda
       durmasına yol açar ama bu küçük bir görsel tercih, çakışmaya değer. */
    .tmh-fab-login { bottom: 142px; right: 16px; width: 48px; height: 48px; }
}

/* ===== Favori/Sepet animasyonları ====================================== */
@keyframes tmhPop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.45); }
    60%  { transform: scale(.92); }
    100% { transform: scale(1); }
}
.tmh-wishlist-btn.tmh-pop { animation: tmhPop .42s ease; }
.tmh-wishlist-btn.is-active svg { animation: tmhPop .42s ease; }

@keyframes tmhCartBump {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.35) rotate(-8deg); }
    55%  { transform: scale(1.35) rotate(6deg); }
    100% { transform: scale(1) rotate(0); }
}
.tmh-cart-bump { animation: tmhCartBump .5s ease; }

/* "Uçan" sepete ekleme noktası: butondan sepet ikonuna doğru kısa bir
   yörünge çizip kaybolan küçük bir daire — kullanıcıya "eklendi" geri
   bildirimi verir. JS ile dinamik konumlandırılır.
   NOT: Kullanıcı isteğiyle yavaşlatıldı (önceden .55s — çok hızlı, ürünün
   gittiği fark edilmiyordu). Ayrıca biraz büyütüldü, daha görünür olsun. */
.tmh-fly-dot {
    position: fixed; z-index: 9998; width: 18px; height: 18px; border-radius: 50%;
    background: #1a9e52; pointer-events: none;
    box-shadow: 0 2px 8px -2px rgba(0,0,0,.4);
    transition: transform 1.1s cubic-bezier(.3,.7,.2,1), opacity .3s ease .85s;
    opacity: 1;
}
.tmh-fly-dot.tmh-fly-end { opacity: 0; }