/* =====================================================================
   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;
    /* KULLANICI İSTEĞİ: Sabit "4 sütun" yerine, ekrana/kenar çubuğuna göre
       kalan genişliğe KAÇ KART SIĞARSA o kadar yan yana dizilsin. Her kart
       en az 230px, mümkün olduğunca eşit paylaşılan genişlikte. Tarayıcı
       otomatik olarak (geniş masaüstünde 5-6, dar ekranda 2-3 gibi)
       uygun sütun sayısını hesaplar — elle breakpoint yönetmeye gerek
       kalmaz. */
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
    gap: 20px;
    margin: 28px 0;
    width: 100% !important;
}
@media (max-width: 760px) {
    .tmh-products-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 14px; }
}
@media (max-width: 420px) {
    .tmh-products-grid { gap: 10px; }
}

/* ===== "Çok Satan Ürünler" — SONSUZ DÖNGÜLÜ KAYAN SLIDER ==============
 * (kullanıcı isteği: masaüstünde ortalanmadan/"sola kayık" durmasın, fare
 * ve dokunmatikle sürüklenebilsin, sürükleme bitince otomatik dönmeye
 * kaldığı yerden devam etsin — TIPATIP .tmh-cat-slider mekanizması, bkz.
 * initCatDragSlider() artık iki şeritte de kullanılan ortak fonksiyon).
 *
 * GÖRSEL: örnek referans (Trendyol "Popüler Ürünler") gibi PEMBE bir bant
 * içinde — kart başlığı "Çok Satan Ürünler" de bu bandın İÇİNDE kalacak
 * şekilde sarmalayıcıyı genişlettik (önceden .tmblog-container/.tmh-section
 * içinde, bantsız, düz arka plandaydı).
 * ===================================================================== */
.tmh-products-band {
    /* KULLANICI İSTEĞİ: arka plan BEYAZ yapıldı (önceden var(--tm-pink-soft) idi). */
    background: #fff;
    padding: 22px 0 26px;
    margin: 8px 0 0;
    overflow: hidden;
}
.tmh-products-band .tmblog-section-head { margin-bottom: 14px; }
/* Zemin artık BEYAZ — başlık/link rengi VARSAYILAN (koyu metin) olarak bırakıldı.
   --tm-pink-dark kullanımı kaldırıldı; normal --tm-text ve --tm-pink yeterli. */
.tmh-products-band .tmblog-section-head h2 { color: var(--tm-text); }
.tmh-products-band .tmblog-section-head .tm-side { color: var(--tm-pink); opacity: 1; }
/* Başlık artık .tmblog-container (max-width:1240px) İÇİNDE DEĞİL — slider
   ile AYNI padding'i kullanıyor, böylece geniş ekranlarda başlık ile ilk
   kart aynı dikey çizgide hizalanıyor (biri ortada dar bir sütunda, diğeri
   ekran kenarına kadar geniş kalırsa hizasızlık oluşurdu). */
.tmh-products-head-wrap { padding: 0 40px; }
@media (max-width: 980px) {
    .tmh-products-head-wrap { padding: 0 24px; }
}
@media (max-width: 480px) {
    .tmh-products-head-wrap { padding: 0 16px; }
}
.tmh-products-slider {
    overflow: hidden;
    /* BULUNAN HATA (parmakla sağa/sola kaydırma çalışmıyordu): kategori
       şeridinde (.tmh-cat-slider) olan "touch-action: pan-y" kuralı bu
       slider'da HİÇ yoktu. Bu kural olmadan tarayıcı yatay parmak
       hareketini JS'e (initCatDragSlider, Pointer Events) bırakmak
       yerine kendi varsayılan jest yorumlamasına bırakabiliyor — sonuç
       olarak sürükleme/swipe çalışmıyordu. "pan-y": dikey kaydırma
       tarayıcıya bırakılır (sayfa normal kayar), YATAY hareket ise
       tamamen JS'imiz tarafından yönetilir. */
    touch-action: pan-y;
    cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
    width: 100%; padding: 0 40px;
    /* CLS DÜZELTMESİ (kategori şeridinde işe yarayan AYNI çözüm): Kartların
       kendisi (görsel oranı + başlık satır sınırı) zaten korunsa da,
       ŞERİDİN KENDİSİ hiç yükseklik ayırmıyordu — JS (initCatDragSlider,
       sayfa boşta kalınca ERTELENMİŞ şekilde çalışıyor) devreye girene
       kadar tarayıcı 0 yükseklik varsayıp, sonra birden büyüyüp altındaki
       içeriği aşağı itiyordu. Kart boyutuna göre (270px genişlik, 2:3 oran
       → 405px görsel + gövde/buton alanı) bol bir güvenlik payıyla
       hesaplanmış bir minimum yükseklik BAŞTAN ayrılıyor. */
    min-height: 540px;
}
.tmh-products-slider.is-dragging { cursor: grabbing; }
@media (max-width: 980px) {
    .tmh-products-slider { padding: 0 24px; }
}
@media (max-width: 760px) {
    .tmh-products-slider { min-height: 450px; } /* 210px genişlik, 2:3 oran → 315px görsel + gövde/buton */
}
@media (max-width: 480px) {
    .tmh-products-slider { padding: 0 16px; }
}
.tmh-products-track {
    display: flex; align-items: stretch;
    width: max-content;
    will-change: transform;
    animation: tmhProductsScroll linear infinite;
    animation-duration: calc(var(--tmh-products-count, 10) * 5s);
}
.tmh-products-slider:hover .tmh-products-track,
.tmh-products-slider:focus-within .tmh-products-track {
    animation-play-state: paused;
}
/* Sürükleme bitince otomatik dönüşü ZORLA devam ettirir, fare/parmak
   slider üzerinde kalsa bile (bkz. tmh-cat-slider'daki AYNI mekanizma,
   initCatDragSlider() JS'i bu class'ı ekler/kaldırır). */
.tmh-products-slider.is-released .tmh-products-track,
.tmh-products-slider.is-released:hover .tmh-products-track,
.tmh-products-slider.is-released:focus-within .tmh-products-track {
    animation-play-state: running !important;
}
@keyframes tmhProductsScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.tmh-products-track .tmh-pcard {
    flex: 0 0 270px !important;
    width: 270px !important;
    max-width: 270px !important;
    margin-right: 18px;
}
@media (max-width: 760px) {
    .tmh-products-track .tmh-pcard { flex: 0 0 210px !important; width: 210px !important; max-width: 210px !important; margin-right: 12px; }
}
/* KULLANICI İSTEĞİ: mobilde "Hareketi Azalt" erişilebilirlik ayarı açık
   olan cihazlarda dahi otomatik dönme HER ZAMAN çalışsın — bu yüzden bu
   kural artık SADECE masaüstü genişliğinde (min-width:981px) geçerli;
   mobilde reduced-motion tercihi ne olursa olsun otomatik dönme aktif
   kalır. Masaüstünde ise hareket hassasiyeti olan kullanıcılar için
   erişilebilirlik desteği KORUNDU. */
@media (prefers-reduced-motion: reduce) and (min-width: 981px) {
    .tmh-products-track { animation: none; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tmh-products-slider { touch-action: auto; }
}

.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;
    /* GERİ ALINDI: "pan-y" denemesi TÜM ürün kartlarındaki galeri
       kaydırmasını bozdu (kullanıcı geri bildirdi), buna karşılık
       eklediğim "görsel üzerinde kaydır = ürünler arası geçiş" JS
       çözümü de güvenilir çalışmadı. "auto"ya dönülüyor — bu, modern
       tarayıcılarda yatay/dikey jesti kendi native algoritmasıyla
       ayırt eder (çoğu e-ticaret sitesinde kullanılan standart
       yaklaşım); galeri kaydırması TEKRAR çalışır, dikey sayfa
       kaydırması da BÜYÜK ÖLÇÜDE çalışır (mükemmel değil ama "auto"
       tarayıcının EN İYİ native ayrımı, özel bir CSS değeriyle bunun
       önüne geçilemiyor). */
    touch-action: auto;
}
.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 {
    /* WCAG AA: #1a9e52 üzerinde #fff = 3.47:1 (başarısız)
       → #0d7a40 = 5.42:1 (✓) */
    background: #0d7a40 !important; color: #fff !important;
}
.tmh-pcard-cta-green:hover { background: #0a6234 !important; }
.tmh-pcard-cta-green.tmh-is-adding { pointer-events: none; opacity: .75; }
.tmh-pcard-cta-green.tmh-just-added { background: #085228 !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;
    /* KULLANICI İSTEĞİ: Görsel artık tam genişlik değil (mobilde %75,
       masaüstünde sütun payı küçültüldü), bu yüzden ETRAFINDA bu
       arka plan rengi GÖRÜNÜR hale geldi — eski gri/bej ton (#f7f4ee)
       sayfanın beyaz zeminiyle UYUŞMUYORDU, ayrı bir "kutu" gibi
       görünüyordu. GÜVENLİ DEĞİŞİKLİK: SADECE renk değişti — bu kural
       boyut/konum/oran BELİRLEMİYOR, sıcak noktalar (.tmh-hotspot)
       KENDİ kapsayıcıları olan .tmblog-hero-art'a göre (yüzde ile)
       konumlanıyor, bu kapsayıcının dışındaki arka plan rengiyle
       HİÇBİR matematiksel bağlantısı yok — hotspot hizalaması bu
       değişiklikten ETKİLENMEZ. */
    background: #fff;
    margin-bottom: 8px;
    /* BULUNAN HATA: Bu slider'da "touch-action" hiç tanımlı değildi —
       tarayıcı varsayılan ("auto") davranışa güveniyordu, bu da bazı
       cihazlarda dikey kaydırmayı (sayfa scroll) JS'in yatay kaydırma
       (slayt değiştirme) tespitiyle YARIŞTIRIYOR, sonuçta dikey kaydırma
       GÖRSEL ÜZERİNDE çalışmıyor gibi görünebiliyordu. Bu kod tabanındaki
       BENZER kaydırılabilir şeritlerde (.tmh-cat-slider gibi) zaten
       kullanılan AYNI çözüm: "pan-y" ile dikey kaydırmayı tarayıcıya
       BIRAKIP GARANTİ EDİYORUZ, yatay hareketi ise biz JS ile ele
       alıyoruz (preventDefault KULLANMADAN, passive dinleyicilerle). */
    touch-action: pan-y;
    /* GÜVENCE: Header "position: sticky" + yarı şeffaf/blur zemine sahip
       (bkz. tmblog.css .tmblog-site-header). Slider'ın İÇİNDEKİ herhangi
       bir öğe (örn. floating manken görseli) negatif üst margin kullanırsa,
       bu boşluk olmadan görsel header'ın zeminin altından "sızıp" header'ın
       üzerine binmiş gibi görünebilir (kullanıcının işaretlediği sorun).
       Küçük bir üst padding, header ile slider içeriği arasında HER ZAMAN
       gerçek/görünür bir ayrım/boşluk garantiler. */
    /* DÜZELTME: Önceden "padding-top: 12px" vardı — mobilde bu 12px
       beyaz boşluk, arama çubuğu ile hero görseli arasında gri bant
       gibi görünüyordu. Header ve arama çubuğu artık ikisi de
       "position: fixed" olduğu için slider'ın kendi padding'ine
       gerek yok — body padding-top zaten doğru boşluğu veriyor. */
    padding-top: 0;
}

.tmh-slider-track { position: relative; }
.tmh-slide {
    display: none !important;
}
.tmh-slide.is-active { display: block !important; }
/* PERFORMANS DÜZELTMESİ: Bu animasyon ÖNCEDEN her ".tmh-slide" öğesine
   (ilk sayfa yüklemesindeki AKTİF slayt dahil) koşulsuz uygulanıyordu.
   İlk yüklemede LCP (En Büyük İçerikli Boyama) adayı olan bu görsel
   opacity:0'dan başladığı için, tarayıcı görseli gerçekten "boyandı"
   saymadan önce animasyonun ilerlemesini bekliyor — bu da LCP ölçümünde
   "öğe oluşturma gecikmesi" olarak binlerce milisaniyelik bir kayıp
   olarak görünüyordu. Artık bu animasyon SADECE JS'in ".tmh-slide-fade"
   sınıfını eklediği durumlarda (yani kullanıcı etkileşimiyle/otomatik
   geçişte slayt DEĞİŞTİĞİNDE) çalışıyor — ilk sayfa yüklemesinde hiç
   devreye girmiyor, görsel anında tam opaklıkla boyanabiliyor. */
.tmh-slide.tmh-slide-fade { animation: tmhFadeIn .5s ease; }
@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; }
}

/* MASAÜSTÜ GRİ SÜTUN SORUNU DÜZELTMESİ:
   WoodMart teması, bazı kapsayıcılara kendi CSS katmanından arka plan rengi
   atıyor; bu nedenle .tmh-slider içindeki .tmblog-hero-art, tmblog.css'in
   varsayımına rağmen gri/koyu bir kutu olarak görünebiliyordu.
   SADECE "floating" modundaki (şeffaf figür PNG/JPG kullanan) slaytlara
   uygulanıyor — ".tmblog-hero-art.tmh-hero-art-floating" çift sınıfı sayesinde
   non-floating (kutu içinde fotoğraf) slaytlar BU KURALDAN ETKİLENMEZ:
   onlar için border-radius, overflow:hidden ve box-shadow AYNEN çalışmaya
   devam eder. ".tmh-slider" kapsamı ise blog ve hakkımızda sayfalarını
   TAMAMEN dışarıda bırakır. */
.tmh-slider .tmblog-hero-art.tmh-hero-art-floating {
    background: transparent !important;
}
/* Hero ara katmanı (.tmblog-hero) da şeffaf olsun — .tmh-slider'ın
   background'u (#fff veya ileride başka bir renk) bütün hero boyunca
   tutarlı görünsün. Non-floating slaytlarda bu kural zararsız: art
   container'ın kendi background/border'ı hâlâ .tmblog-hero-art üzerinde
   tanımlı, bu kural yalnızca ARA KATMANI şeffaf ediyor. */
.tmh-slider .tmblog-hero {
    background: transparent !important;
}

/* KULLANICI İSTEĞİYLE: mobilde hero'nun METİN sütunu (üst etiket, başlık,
   alt yazı, "Mağazayı Gez"/"Bize Ulaşın" butonları) TAMAMEN gizlenir —
   sadece manken görseli + üzerindeki tıklanabilir kategori noktaları
   kalır (zaten tek dokunuşla doğrudan kategoriye gidiyorlar, bkz.
   tmh-home.js). Masaüstünde (900px üstü) hiçbir şey değişmez, metin
   olduğu gibi görünür. Aynı 900px kırılma noktası, hero'nun tek sütuna
   indiği nokta ile birebir aynı (bkz. tmblog.css .tmblog-hero-inner). */
@media (max-width: 900px) {
    .tmh-slider .tmh-hero-text { display: none !important; }
    /* KULLANICI İSTEĞİ GÜNCELLENDİ: Rozet ("Bu hafta öne çıkanlar") artık
       gerçek bir bağlantı olduğu için mobilde de GÖSTERİLİYOR ve aktif —
       önceden burada gizleniyordu, kullanıcı isteğiyle bu kısıtlama
       kaldırıldı. */
}

/* ===== 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%;
    overflow: hidden;
    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-img img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}
.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;
    /* CLS DÜZELTMESİ (KESİN ÇÖZÜM): Bazı kategori isimleri ("YARA BAKIM ve
       SARF MALZEMELER", "Kanedyen-Asa-Baston-Değnek", "Klozet yükselteci -
       Komot" gibi) 170px'lik kart genişliğinde 2 satırdan FAZLA yer
       kaplıyordu — bu da yukarıda ayırdığımız min-height'ı aşıp kutunun
       büyümesine, dolayısıyla sayfanın kaymasına (CLS) yol açıyordu.
       Tahmin etmek yerine, etiketi KESİN olarak 2 satırla sınırlıyoruz —
       daha uzun isimler "..." ile kesilir. Böylece yükseklik, kategori
       isminin uzunluğundan TAMAMEN bağımsız, her zaman garanti altında. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.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;
    /* (2026-07-05) CLS DÜZELTMESİ: PageSpeed'de 0.100'lük düzen kaymasının
       kaynağı bu bölümdü — web fontları geç yüklenince kategori adları
       yeniden akıp bölümün yüksekliği değişiyor, altındaki her şey
       zıplıyordu. Bölüme yaklaşık gerçek yüksekliği kadar min-height
       AYIRARAK font değişimi içeride emilir, sayfa zıplamaz. */
    min-height: 205px;
}
@media (max-width: 760px) { .tmh-cat-slider-wrap { min-height: 168px; } }
/* (2026-07-05) PERFORMANS: sonsuz döngülü şeritler her karede JS ile
   translateX alıyor — will-change ile tarayıcı bunları kendi katmanına
   (compositor) taşır; "birleştirilmemiş animasyon" ve ana iş parçacığı
   Style&Layout maliyeti belirgin düşer. */
.tmh-cat-track, .tmh-products-track, .tmh-blog-track { will-change: transform; }
.tmh-cat-slider {
    overflow: hidden;
    margin-top: 24px;
    cursor: grab;
    /* PERFORMANS (CLS düzeltmesi): Bu şerit önceden hiçbir yükseklik
       ayırmıyordu — görseller/JS yüklenip kartların gerçek boyutu
       belirlenene kadar tarayıcı 0 yükseklik varsayıyor, sonra birden
       genişleyip ALTINDAKİ TÜM içeriği aşağı itiyordu (PageSpeed'te
       CLS 0.496 gibi çok yüksek bir "ani düzen kayması" puanına yol
       açıyordu — sayfadaki TEK EN BÜYÜK sorun buydu). Kart genişliğine
       (bkz. .tmh-cat-slide) göre bilinen dairesel görsel yüksekliği +
       iki satırlık etiket alanı kadar bir minimum yükseklik BAŞTAN
       ayrılıyor — böylece içerik yüklenmeden önce de sonra da AYNI
       yer kaplanıyor, hiçbir kayma olmuyor.
       170px (görsel) + 10px (boşluk) + ~34px (2 satır etiket) = 214px. */
    min-height: 260px;
    /* "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;
}
/* BULUNAN HATA (kullanıcı: "sürükledikten sonra tekrar dönmeye devam
   etmiyor"): Yukarıdaki ":hover { paused }" kuralı, fare/parmak sürükleme
   BİTTİKTEN SONRA da slider'ın ÜZERİNDE kalırsa (mobilde dokunma sonrası
   parmak slider üzerindeyken kalkması, masaüstünde fareyi hareket
   ettirmeden bırakması gibi durumlarda) devreye girip animasyonu
   DURDURMAYA devam ediyordu — JS (onPointerUp, tmh-home.js) animasyonu
   doğru şekilde yeniden başlatsa bile, bu CSS kuralı onu HEMEN tekrar
   "paused" yapıyordu. ÇÖZÜM: JS, sürükleme/dokunma bittiği anda kısa bir
   süreliğine ".is-released" class'ı ekliyor; bu class, ":hover" kuralını
   geçersiz kılacak ÖZGÜLLÜKTE "running" zorluyor — kullanıcı fareyi
   GERÇEKTEN slider dışına çıkarmadan da otomatik kayma görünür şekilde
   devam eder. Class, kısa bir süre sonra JS tarafından kaldırılır; o
   noktada fare hâlâ üzerideyse normal ":hover { paused }" davranışı
   (kullanıcı isterse durdurabilsin) tekrar devreye girer. */
.tmh-cat-slider.is-released .tmh-cat-track,
.tmh-cat-slider.is-released:hover .tmh-cat-track,
.tmh-cat-slider.is-released:focus-within .tmh-cat-track {
    animation-play-state: running !important;
}
/* 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; }
    .tmh-cat-slider { min-height: 225px; } /* 140px görsel + geniş güvenlik payı */
}
@media (max-width: 640px) {
    .tmh-cat-slide { flex: 0 0 110px; width: 110px; max-width: 110px; margin-right: 14px; }
    .tmh-cat-slider { min-height: 190px; } /* 110px görsel + geniş güvenlik payı */
}
/* Aynı düzeltme kategori şeridi için de — bkz. yukarıdaki ürünler
   bölümündeki yorum (kullanıcı isteği: mobilde her zaman otomatik dön). */
@media (prefers-reduced-motion: reduce) and (min-width: 981px) {
    .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);
    /* touch-action: pan-y — yatay parmak hareketi JS'e, dikey sayfa scroll'a */
    touch-action: pan-y;
    /* CLS DÜZELTMESİ (kategori/ürün şeritlerinde işe yarayan AYNI çözüm):
       300px kart genişliği, 16:10 görsel oranı (~188px) + gövde metni
       (başlık+özet artık 2'şer satırla sınırlı) + alt bilgi satırı için
       bol paylı bir minimum yükseklik. */
    min-height: 420px;
}
@media (max-width: 640px) {
    .tmh-blog-slider { min-height: 380px; }
}
.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);
    /* touch-action:pan-y — track ve içindeki tüm elementlerin
       yatay hareketi pointer events API'ye bırakması için */
    touch-action: pan-y;
}
.tmh-blog-slider:hover .tmh-blog-track,
.tmh-blog-slider:focus-within .tmh-blog-track {
    animation-play-state: paused;
}
/* Sürükleme/dokunma bitince dönmeyi zorla (initCatDragSlider ekler/kaldırır) */
.tmh-blog-slider.is-released .tmh-blog-track,
.tmh-blog-slider.is-released:hover .tmh-blog-track,
.tmh-blog-slider.is-released:focus-within .tmh-blog-track {
    animation-play-state: running !important;
}
@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;
    /* <a> tag olduğu için touch-action belirtilmezse tarayıcı yatay
       harekette pointercancel fırlatır ve sürükleme anında biter */
    touch-action: pan-y;
}
@media (max-width: 640px) {
    .tmh-blog-slide.tmblog-card { flex: 0 0 240px !important; width: 240px !important; max-width: 240px !important; margin-right: 14px; }
}
/* Aynı düzeltme blog şeridi için de — tutarlılık (bkz. yukarıdaki yorum). */
@media (prefers-reduced-motion: reduce) and (min-width: 981px) {
    .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; }
}

/* NOT (2026-07-07): Eski .tmh-shop-toolbar / .tmh-shop-count / .tmh-shop-sort
 * kuralları buradan kaldırıldı — mağaza araç çubuğu artık kart tabanlı yeni
 * tasarımıyla assets/css/tmh-shop-filters.css dosyasında yönetiliyor. Burada
 * bırakılan eski bir "flex-direction:column" kuralı (aşağıdaki eski
 * max-width:600px bloğunda), aynı sınıfı hedeflediği için yeni tasarımın
 * mobildeki TEK SATIR düzenini sessizce eziyordu (iki dosya da aynı
 * özgüllükte olduğu için "hangi kural son yazılırsa o kazanır" tuzağı) —
 * bu yüzden kaynağında tamamen temizlendi.
 */

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

/* ===== Mağaza/Kategori: Filtre Kenar Çubuğu + İki Sütunlu Düzen ========
 * Kullanıcı isteği: kategori + marka + stok durumu filtreleri eklensin.
 * Bonus: bu, geniş ekranlarda sağda boş kalan alanı da GERÇEK, kullanışlı
 * içerikle dolduruyor. Mağaza/kategori sayfaları için konteyneri biraz
 * daha geniş yapıyoruz (1240px yerine 1400px) — daha fazla ekran alanını
 * anlamlı şekilde kullanmak için. ":has()" desteklemeyen çok eski
 * tarayıcılarda konteyner sadece normal 1240px kalır, hiçbir şey bozulmaz. */
.tmblog-container:has(.tmh-shop-layout) { max-width: 1400px; }
.tmh-shop-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}
/* KALICI ÇÖZÜM (2026-07-06): "1fr" tek başına min-width:auto alır — yani
 * içindeki bir öğe (ör. uzun bir filtre etiketi, kırılmayan bir metin)
 * SIĞMAK yerine bu sütunu ZORLA genişletebilir; bu da TÜM SAYFANIN
 * (header'daki favori/sepet ikonları dahil) yatayda taşıp sağ kenarın
 * ekran dışında kalmasına yol açar — Sepet/Ödeme sayfalarında yaşanan
 * TAM OLARAK AYNI hata sınıfı. "minmax(0, 1fr)" + aşağıdaki min-width:0
 * bunu kalıcı olarak engeller; bir şey gerçekten sığmazsa artık sayfa
 * değil, sadece o öğenin kendisi (varsa) yatay kayar. */
.tmh-shop-main { min-width: 0; }
/* NOT: eski kenar çubuğu stilleri (arka plan/sticky/eski <details> aç-kapa
 * mekanizması, .tmh-filter-block/.tmh-filter-count vb.) buradan tamamen
 * kaldırıldı — filtre paneli artık kart tabanlı yeni tasarımıyla birlikte
 * assets/css/tmh-shop-filters.css dosyasında yönetiliyor (bkz. o dosya).
 * Burada bırakılmaları, mobilde "position:static" gibi eski kuralların
 * yeni tasarımın "position:fixed" çekmece (drawer) davranışıyla aynı
 * media query'de ÇAKIŞMASINA yol açabilirdi — bu yüzden kaynağında
 * temizlendi, "hangi dosya kazanacak" şansına bırakılmadı. */

.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-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; }
}
/* --- Hesabım MOBİL: iki satırlı (ikon üstte, etiket altta) çip menü ------
 * (2026-07-05) Menü tek satırlık, parmakla kaydırılabilir bir şerit;
 * her uçta üstte küçük yuvarlak ikon, altında etiket. İçerik şeridin HEMEN
 * altında açılır. Aktif sekmenin ikonu pembe dolgulu daire, etiketi pembe.
 * (Masaüstü: solda 220px kenar menüsü, ikon + etiket yan yana.) */
.tmh-acc-nav .tmh-acc-nav-ico {
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--tm-bg-mute, #f6f7f9); color: var(--tm-text-soft);
    transition: background .15s ease, color .15s ease;
}
.tmh-acc-nav .tmh-acc-nav-ico svg { width: 16px; height: 16px; }
.tmh-acc-nav li.is-active .tmh-acc-nav-ico { background: var(--tm-pink); color: #fff; }
@media (max-width: 767px) {
    .tmh-account-wrap .woocommerce-MyAccount-navigation { padding: 8px 6px; margin-bottom: 14px; }
    .tmh-account-wrap .woocommerce-MyAccount-navigation ul {
        display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; padding: 2px;
    }
    .tmh-account-wrap .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
    .tmh-account-wrap .woocommerce-MyAccount-navigation li { border-bottom: 0; flex: 0 0 auto; }
    .tmh-account-wrap .woocommerce-MyAccount-navigation a {
        display: flex; flex-direction: column; align-items: center; gap: 5px;
        padding: 6px 10px; font-size: 11px; white-space: nowrap; border-radius: 10px;
    }
    .tmh-acc-nav .tmh-acc-nav-ico { width: 34px; height: 34px; }
    .tmh-account-wrap .woocommerce-MyAccount-navigation li.is-active a { color: var(--tm-pink); }
    .tmh-account-wrap .woocommerce-MyAccount-content { padding: 16px; }
}
@media (min-width: 768px) {
    .tmh-acc-nav a { display: flex; align-items: center; gap: 10px; }
    .tmh-acc-nav .tmh-acc-nav-ico { width: 30px; height: 30px; flex: 0 0 auto; }
}
/* --- Mağaza kategori sayfası kurumsal hero (2026-07-05) -----------------
 * Taban stiller (.tmblog-search-hero, .tmblog-cat-switch) blog CSS'inden
 * gelir — burada sadece mağazaya özgü parçalar var. */
.tmh-cat-hero-row { display: flex; align-items: center; gap: 16px; margin-top: 2px; }
.tmh-cat-hero-thumb {
    flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%;
    background-size: cover; background-position: center; background-color: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,.28);
}
.tmh-cat-hero .tm-hero-desc {
    margin: 12px 0 0; max-width: 760px;
    color: rgba(255,255,255,.85); font-size: 13.5px; line-height: 1.65;
}
@media (max-width: 767px) {
    .tmh-cat-hero-row { gap: 12px; }
    .tmh-cat-hero-thumb { width: 54px; height: 54px; }
    .tmh-cat-hero .tm-hero-desc {
        font-size: 12.5px;
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
}

/* --- Hesabım PANO: kurumsal tasarım (2026-07-05) ----------------------- */
.tmh-acc-hero {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(120deg, #1e2a4a 0%, #2c3e6b 55%, #3d3160 100%);
    border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; color: #fff;
}
.tmh-acc-hero-avatar {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
    background: var(--tm-pink); color: #fff; font-size: 22px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}
.tmh-acc-hero-name { font-size: 17px; font-weight: 800; letter-spacing: .2px; }
.tmh-acc-hero-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; font-size: 12.5px; opacity: .92; }
.tmh-acc-verified { color: #7ef0b2; font-weight: 700; }
.tmh-acc-hello { margin: 0 0 4px; font-size: 15px; }
.tmh-acc-sub { margin: 0; color: var(--tm-text-soft); font-size: 13.5px; }
.tmh-acc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 0; }
.tmh-acc-stat {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 14px 8px; border: 1px solid var(--tm-line); border-radius: 12px;
    text-decoration: none; background: var(--tm-bg-mute, #f6f7f9);
    transition: border-color .15s ease;
}
.tmh-acc-stat:hover { border-color: var(--tm-pink); }
.tmh-acc-stat-num { font-size: 22px; font-weight: 800; color: var(--tm-pink); line-height: 1; }
.tmh-acc-stat-label { font-size: 12px; color: var(--tm-text-soft); font-weight: 600; }
.tmh-acc-section { margin-top: 22px; }
.tmh-acc-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tmh-acc-section-head h3 { margin: 0; font-size: 15px; letter-spacing: .2px; }
.tmh-acc-seeall { font-size: 12.5px; font-weight: 700; color: var(--tm-pink); text-decoration: none; white-space: nowrap; }
.tmh-acc-orders { display: flex; flex-direction: column; gap: 8px; }
.tmh-acc-order {
    display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px;
    padding: 12px 14px; border: 1px solid var(--tm-line); border-radius: 12px;
    text-decoration: none; color: var(--tm-text); background: #fff;
    transition: border-color .15s ease;
}
.tmh-acc-order:hover { border-color: var(--tm-pink); }
.tmh-acc-order-no { font-weight: 800; font-size: 13.5px; }
.tmh-acc-order-date { font-size: 12.5px; color: var(--tm-text-soft); }
.tmh-acc-order-total { font-weight: 800; font-size: 13.5px; white-space: nowrap; }
.tmh-acc-badge {
    font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
    white-space: nowrap; background: #eef0f3; color: #4b5563;
}
.tmh-acc-badge--completed  { background: #e7f7ee; color: #0e8a4d; }
.tmh-acc-badge--processing { background: #e8f0fe; color: #1d4ed8; }
.tmh-acc-badge--on-hold    { background: #fdf3e0; color: #b45309; }
.tmh-acc-badge--pending    { background: #f3f4f6; color: #6b7280; }
.tmh-acc-badge--cancelled,
.tmh-acc-badge--failed     { background: #fdeaea; color: #d63638; }
.tmh-acc-badge--refunded   { background: #f3e8ff; color: #7c3aed; }
.tmh-acc-empty { text-align: center; padding: 22px 14px; border: 1px dashed var(--tm-line); border-radius: 12px; color: var(--tm-text-soft); }
.tmh-acc-empty p { margin: 0 0 12px; }
.tmh-acc-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px;
    background: var(--tm-pink); color: #fff !important; border-radius: 999px;
    font-size: 13px; font-weight: 800; text-decoration: none;
    transition: transform .15s ease, opacity .15s ease;
}
.tmh-acc-btn:hover { transform: translateY(-1px); opacity: .93; }
.tmh-acc-btn--ghost { background: #fff; color: var(--tm-text) !important; border: 1px solid var(--tm-line); }
.tmh-acc-dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; }
@media (min-width: 600px) { .tmh-acc-dash-grid { grid-template-columns: repeat(3, 1fr); } }
.tmh-acc-dash-card {
    display: flex; flex-direction: column; gap: 4px; padding: 14px;
    border: 1px solid var(--tm-line); border-radius: 12px; text-decoration: none;
    color: var(--tm-text); background: #fff;
    transition: border-color .15s ease, transform .15s ease;
}
.tmh-acc-dash-card:hover { border-color: var(--tm-pink); transform: translateY(-1px); }
.tmh-acc-dash-ico {
    width: 28px; height: 28px; border-radius: 8px; margin-bottom: 4px;
    background: var(--tm-bg-mute, #f6f7f9); color: var(--tm-pink);
    display: flex; align-items: center; justify-content: center;
}
.tmh-acc-dash-ico svg { width: 15px; height: 15px; }
.tmh-acc-dash-card strong { font-size: 14px; }
.tmh-acc-dash-card span:not(.tmh-acc-dash-ico) { font-size: 12px; color: var(--tm-text-soft); line-height: 1.45; }
.tmh-acc-support {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin-top: 22px; padding: 16px 18px; border-radius: 14px;
    background: var(--tm-bg-mute, #f6f7f9); border: 1px solid var(--tm-line);
}
.tmh-acc-support-txt { display: flex; flex-direction: column; gap: 2px; }
.tmh-acc-support-txt strong { font-size: 14px; }
.tmh-acc-support-txt span { font-size: 12.5px; color: var(--tm-text-soft); }
.tmh-acc-support-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tmh-acc-logout { margin: 18px 0 0; text-align: right; }
.tmh-acc-logout a { color: #d63638; font-size: 13px; font-weight: 700; text-decoration: none; }
.tmh-acc-logout a:hover { text-decoration: underline; }
/* Masaüstü kenar menüsü: kurumsal rötuş — aktif sekmeye sol vurgu çizgisi */
@media (min-width: 768px) {
    .tmh-account-wrap .woocommerce-MyAccount-navigation a { border-left: 3px solid transparent; border-radius: 0 8px 8px 0; transition: background .15s ease; }
    .tmh-account-wrap .woocommerce-MyAccount-navigation a:hover { background: var(--tm-bg-mute, #f6f7f9); }
    .tmh-account-wrap .woocommerce-MyAccount-navigation li.is-active a { border-left-color: var(--tm-pink); background: var(--tm-bg-mute, #f6f7f9); }
}
/* Hesap içeriğindeki WooCommerce tablo/butonları marka ile hizala */
.tmh-account-wrap .woocommerce-MyAccount-content table.shop_table { border: 1px solid var(--tm-line); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.tmh-account-wrap .woocommerce-MyAccount-content table.shop_table th { background: var(--tm-bg-mute, #f6f7f9); font-size: 12.5px; }
.tmh-account-wrap .woocommerce-MyAccount-content .woocommerce-button,
.tmh-account-wrap .woocommerce-MyAccount-content .button {
    background: var(--tm-pink); color: #fff; border-radius: 999px; font-weight: 700; font-size: 12.5px;
}

/* ===== 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 .28s 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-pp-brand-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tmh-ask-question-btn, .tmh-spec-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; white-space: nowrap;
}
.tmh-ask-question-btn:hover, .tmh-spec-btn:hover { background: var(--tm-pink); color: #fff; }
/* KULLANICI İSTEĞİ: "Ürün Özellikleri" modalının içine taşınan
   WooCommerce varyasyon açıklaması — orijinal stilini büyük ölçüde
   korur, sadece modal içinde okunabilir bir üst boşluk eklenir. */
#tmh-spec-modal-content { font-size: 14px; line-height: 1.6; color: var(--tm-text); }
#tmh-spec-modal-content p:first-child { margin-top: 0; }

.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 {
    /* (2026-07-05 KURUMSAL) Buzlu cam çubuk + aktif öğede yumuşak pembe
       "pil" vurgusu ve üst gösterge çizgisi — modern kurumsal uygulama
       alt-menü deseni. 7 öğe eşit ızgarada. */
    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: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(30,42,74,.08);
    box-shadow: 0 -10px 30px -12px rgba(30,42,74,.22);
    border-radius: 16px 16px 0 0;
    height: 62px;
    padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 760px) {
    .tmh-bottom-nav { display: grid; grid-template-columns: repeat(7, 1fr); }
    /* Sabit alt menü içeriğin üzerine binmesin diye sayfanın en altına boşluk bırakılır. */
    body { padding-bottom: 62px; }
}
.tmh-bn-item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; text-decoration: none; color: #6b7280;
    font-size: 10px; font-weight: 700; letter-spacing: .01em;
    padding: 7px 2px 6px;
    /* WCAG 2.5.5: Dokunma hedefi min 44×44px olmalı */
    min-height: 44px; min-width: 44px;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease;
}
.tmh-bn-item:active .tmh-bn-icon { transform: scale(.9); }
.tmh-bn-icon {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 26px; border-radius: 999px;
    transition: background .2s ease, transform .15s ease;
}
.tmh-bn-icon svg { width: 21px; height: 21px; }
.tmh-bn-item.is-active { color: var(--tm-pink); font-weight: 800; }
.tmh-bn-item.is-active .tmh-bn-icon { background: rgba(231,25,90,.12); }
/* Aktif öğede üstte kısa gösterge çizgisi */
.tmh-bn-item.is-active::before {
    content: ''; position: absolute; top: 0; left: 50%;
    transform: translateX(-50%);
    width: 22px; height: 3px; border-radius: 0 0 4px 4px;
    background: var(--tm-pink);
}
.tmh-bn-label { line-height: 1; }
.tmh-bn-badge {
    position: absolute; top: -4px; right: 1px;
    background: var(--tm-pink); color: #fff;
    font-size: 9.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;
    box-shadow: 0 0 0 2px #fff;
}

/* 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: 62px; } /* alt menünün yüksekliği */
    .tmh-product-page { padding-bottom: 142px; } /* sepete-ekle çubuğu (~76px) + alt menü (62px) */
}

/* ===== 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;
}

/* ===== (2026-07-07 KALDIRILDI) Sağ alt köşe sabit giriş butonu (FAB) =====
 * .tmh-fab-login artık HİÇBİR YERDEN render edilmiyor (bkz.
 * modules/blog/blog-module.php → tmh_render_bottom_nav). Kullanıcı bildirdi:
 * bazı mobil sayfalarda --tm-pink değişkeni erişilemez kalınca buton
 * PEMBE değil GRİ (tarayıcı varsayılan buton rengi) görünüyordu ve
 * WhatsApp balonunun üzerine biniyordu; açtığı mini giriş penceresi de
 * bazı ekranlarda yarım/kırpılmış görünüyordu. Kural kasıtlı olarak
 * SİLİNMEDİ, yorum satırına alındı — ileride FAB tekrar istenirse önceki
 * hâliyle geri açılabilir:
.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, #e11757); 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, #c2154b); transform: scale(1.06); }
@media (max-width: 760px) {
    .tmh-fab-login { bottom: 142px; right: 16px; width: 48px; height: 48px; }
}
 * ========================================================================= */

/* ===== Favori/Sepet animasyonları ====================================== */
/* KULLANICI ŞİKAYETİ ("biraz gecikmeli oluyor") ÜZERİNE: süre 420ms'den
   280ms'ye, büyüme oranı 1.45'ten 1.3'e çekildi — animasyon artık daha
   KISA ve KESKİN, "kalbin yerine oturması" gözle fark edilir şekilde
   uzun sürmüyor. Renk/fill değişimi (CSS'te ayrı bir kural) bu
   animasyondan tamamen bağımsız ve HER ZAMAN anında gerçekleşiyor. */
@keyframes tmhPop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.3); }
    60%  { transform: scale(.95); }
    100% { transform: scale(1); }
}
/* BULUNAN HATA ("kalbin dolması/silinmesi biraz gecikmeli oluyor"):
   Burada İKİ AYRI animasyon kuralı aynı anda tanımlıydı — biri JS'in
   tetikledği ".tmh-pop" (butonun kendisine), diğeri ise ".is-active"
   class'ı her DOM'da bulunduğunda SVG'ye otomatik uygulanan SÜREKLİ bir
   animasyon kuralıydı. İkisi çakışınca, kalp önce küçülüp sonra
   büyüyen bir "gecikme" hissi veriyordu. Çözüm: SVG'ye sürekli bağlı
   olan ikinci kural KALDIRILDI — artık zıplama animasyonu SADECE JS'in
   tek seferlik, kontrollü ".tmh-pop" tetiklemesinden geliyor; renk/fill
   değişimi ise (yukarıdaki ".is-active svg path { fill }") hiçbir
   animasyona bağlı değil, anında değişiyor. */
.tmh-wishlist-btn.tmh-pop { animation: tmhPop .28s 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; }

/* ===== İlgili Kategoriler kutusu (blog/kategori/ürün sayfaları altı) === */
.tmh-related-categories {
    margin-top: 32px;
    padding: 20px 22px;
    background: var(--tm-bg-lav, #f6f4fb);
    border-radius: 14px;
}
.tmh-related-categories-title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tm-text-soft, #6b6685);
}
.tmh-related-categories-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tmh-related-cat-link {
    display: inline-block;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid var(--tm-line, #e4e0ee);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tm-text, #211b34);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}
.tmh-related-cat-link:hover {
    border-color: var(--tm-pink, #e11757);
    color: var(--tm-pink, #e11757);
}


/* --- Mağaza kategorileri dizin sayfası kart görseli (2026-07-05) ------- */
.tmh-catsx-row { display: flex; align-items: center; gap: 12px; }
.tmh-catsx-img {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
    background: #f3eff7 center/cover no-repeat;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 17px; color: var(--tm-pink);
    box-shadow: inset 0 0 0 1px var(--tm-line);
}

/* --- Ürün değerlendirmeleri: kurumsal bölüm (2026-07-05) ---------------- */
.tmh-reviews { margin-top: 10px; }
.tmh-rv-title { font-size: 20px; margin: 0 0 14px; }
.tmh-rv-summary {
    display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
    padding: 18px 20px; border: 1px solid var(--tm-line); border-radius: 14px;
    background: var(--tm-bg-mute, #f6f7f9); margin-bottom: 18px;
}
.tmh-rv-avg { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 120px; }
.tmh-rv-avg strong { font-size: 40px; line-height: 1; color: var(--tm-text); font-weight: 800; }
.tmh-rv-total { font-size: 12px; color: var(--tm-text-soft); font-weight: 600; }
.tmh-rv-stars { color: #d1d5db; font-size: 15px; letter-spacing: 2px; white-space: nowrap; }
.tmh-rv-stars .is-on { color: #f5a623; }
.tmh-rv-bars { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 5px; }
.tmh-rv-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--tm-text-soft); }
.tmh-rv-bar-star { width: 32px; white-space: nowrap; font-weight: 700; }
.tmh-rv-bar { flex: 1; height: 8px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.tmh-rv-bar span { display: block; height: 100%; border-radius: 999px; background: #f5a623; }
.tmh-rv-bar-n { width: 26px; text-align: right; font-weight: 700; }
.tmh-rv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tmh-rv-card { border: 1px solid var(--tm-line); border-radius: 14px; padding: 16px 18px; background: #fff; }
.tmh-rv-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tmh-rv-avatar {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(120deg, #1e2a4a, #3d3160); color: #fff;
    font-weight: 800; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
}
.tmh-rv-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tmh-rv-name { font-weight: 800; font-size: 14px; color: var(--tm-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tmh-rv-verified { background: #e7f7ee; color: #0e8a4d; font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.tmh-rv-date { font-size: 12px; color: var(--tm-text-soft); }
.tmh-rv-text { margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--tm-text); }
.tmh-rv-text p { margin: 0 0 8px; }
.tmh-rv-pending { color: var(--tm-text-soft); font-style: italic; }
.tmh-rv-empty { padding: 22px; border: 1px dashed var(--tm-line); border-radius: 14px; text-align: center; color: var(--tm-text-soft); }
.tmh-rv-pagination { margin: 16px 0; display: flex; justify-content: center; gap: 8px; }
.tmh-rv-form { margin-top: 24px; padding: 20px 22px; border: 1px solid var(--tm-line); border-radius: 14px; background: #fff; }
.tmh-rv-form-title { margin: 0 0 12px; font-size: 16px; }
.tmh-rv-form label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 5px; color: var(--tm-text); }
.tmh-rv-form input[type="text"], .tmh-rv-form input[type="email"],
.tmh-rv-form textarea, .tmh-rv-form select {
    width: 100%; box-sizing: border-box; border: 1px solid var(--tm-line);
    border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px;
    background: #fff; margin-bottom: 4px;
}
.tmh-rv-form textarea:focus, .tmh-rv-form input:focus, .tmh-rv-form select:focus {
    outline: none; border-color: var(--tm-pink); box-shadow: 0 0 0 3px rgba(231,25,90,.1);
}
.comment-form-rating { margin-bottom: 12px; }
@media (max-width: 600px) {
    .tmh-rv-summary { gap: 16px; padding: 14px; }
    .tmh-rv-avg strong { font-size: 32px; }
    .tmh-rv-card { padding: 13px 14px; }
}

/* --- Soru-Cevap (ürün sayfası "Soru Sor" panelinin cevaplanmış çıktısı) -- */
.tmh-qna-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tmh-qna-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tmh-qna-item { border: 1px solid var(--tm-line); border-radius: 14px; padding: 16px 18px; background: #fff; }
.tmh-qna-q { display: flex; gap: 12px; align-items: flex-start; }
.tmh-qna-q-body { flex: 1; min-width: 0; }
.tmh-qna-q-name { font-weight: 800; font-size: 13.5px; color: var(--tm-text); }
.tmh-qna-q-date { font-weight: 500; font-size: 12px; color: var(--tm-text-soft); margin-left: 6px; }
.tmh-qna-q-text { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--tm-text); font-style: italic; }
.tmh-qna-a { margin: 12px 0 0 52px; padding: 12px 14px; border-radius: 10px; background: var(--tm-bg-mute, #f6f7f9); border-left: 3px solid var(--tm-pink); }
.tmh-qna-a-badge { display: block; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--tm-pink); text-transform: uppercase; margin-bottom: 4px; }
.tmh-qna-a-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tm-text); }
@media (max-width: 600px) {
    .tmh-qna-a { margin-left: 0; }
}

/* --- Ekran dışı bölümler için ertelenmiş yerleşim (2026-07-06) ----------
 * PageSpeed TBT/Style&Layout düzeltmesi: ana sayfadaki alt şeritler
 * (Wibtex + Blog) yüzlerce kart içeriyor; content-visibility:auto ile
 * tarayıcı bu bölümlerin yerleşim/boyama işini görünürlüğe yaklaşana
 * kadar ERTELER — ilk yüklemede ana iş parçacığı yükü ciddi düşer.
 * contain-intrinsic-size, kaydırma çubuğunun zıplamaması için bölümün
 * yaklaşık yüksekliğini önceden ayırır (CLS'i korur). */
.tmh-cv-auto { content-visibility: auto; contain-intrinsic-size: auto 560px; }