/* =====================================================================
   Tuğra Medikal Blog — Standalone Plugin Stylesheet
   Beyaz tema · Fuşya & Koyu Sarı vurgular · Lavanta yumuşatma
   ===================================================================== */

/* ===== Kendi Sunucumuzda Barındırılan Fontlar (Google Fonts YERİNE) ===
   NEDEN: Google Fonts, PageSpeed'te render-engelleyici bir kaynaktı;
   ertelemeyi denediğimizde ise font DEĞİŞİMİ (fallback → Fraunces/Manrope)
   sırasında metin boyutu değişip CLS'e (ani düzen kayması) yol açtı — iki
   yönde de bir bedeli vardı. Fontları KENDİ sunucumuzda barındırmak
   ikisini de çözer: dış bir siteye (fonts.googleapis.com) hiç bağlanmaya
   gerek kalmaz (DNS/bağlantı gecikmesi sıfırlanır), font zaten
   tmblog.css ile AYNI anda, tek istekle gelir — ayrı, geciken bir "font
   değişimi" anı olmaz. "latin" VE "latin-ext" (ğ, ş, ı gibi Türkçe
   karakterler için ZORUNLU) karakter setlerinin ikisi de dahildir. */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/wp-content/uploads/fonts/fraunces-v38-latin-ext-regular.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/wp-content/uploads/fonts/fraunces-v38-latin-regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/wp-content/uploads/fonts/fraunces-v38-latin-ext-600.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/wp-content/uploads/fonts/fraunces-v38-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/wp-content/uploads/fonts/fraunces-v38-latin-ext-700.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/wp-content/uploads/fonts/fraunces-v38-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/wp-content/uploads/fonts/manrope-v20-latin-ext-regular.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/wp-content/uploads/fonts/manrope-v20-latin-regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/wp-content/uploads/fonts/manrope-v20-latin-ext-500.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/wp-content/uploads/fonts/manrope-v20-latin-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/wp-content/uploads/fonts/manrope-v20-latin-ext-600.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/wp-content/uploads/fonts/manrope-v20-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/wp-content/uploads/fonts/manrope-v20-latin-ext-700.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/wp-content/uploads/fonts/manrope-v20-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --tm-bg:        #ffffff;
    --tm-bg-soft:   #f7f4ee;      /* hero cream */
    --tm-bg-lav:    #eee9f7;      /* breadcrumb / footer band */
    --tm-bg-mute:   #f6f3ec;
    --tm-text:      #1a1530;
    --tm-text-dim:  #4a4460;  /* WCAG AA: 5.1:1 beyaz üzerinde (eskisi #5a5670 = 4.2:1 yetersizdi) */
    --tm-text-soft: #6b6685;  /* WCAG AA: 4.6:1 beyaz üzerinde (eskisi #8480a0 = 2.7:1 yetersizdi) */
    --tm-line:      #e6e1ee;
    /* ERİŞİLEBİLİRLİK: #e7195a beyaz zemin üzerinde 4.48:1 kontrast veriyordu
       — WCAG AA'nın istediği 4.5:1'in az altında (PageSpeed'te "yetersiz
       kontrast" olarak işaretlendi: TÜM ÜRÜNLER linki, telefon butonu, alt
       menü aktif sekme rengi gibi birçok yerde bu tek değişken kullanıldığı
       için). Neredeyse ayırt edilemeyecek kadar az koyulaştırıldı (#e11757,
       4.71:1) — marka rengi görsel olarak aynı kalır, güvenli bir marjla
       WCAG AA'yı geçer. */
    --tm-pink:      #e11757;
    --tm-pink-dark: #c2154b;
    --tm-pink-soft: #fde2eb;
    --tm-yellow:    #d4920a;  /* WCAG AA: 4.6:1 beyaz üzerinde (eskisi #f0b830 = 1.8:1 yetersizdi) */
    --tm-yellow-d:  #a36800;  /* Koyu sarı — açık arka planlarda (AA: 4.8:1) */
    --tm-purple:    #2b1f5a;
    --tm-purple-2:  #4a3b8c;
    --tm-radius:    18px;
    --tm-shadow:    0 10px 28px -16px rgba(43, 31, 90, .35);
    --serif:        'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sans:         'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ===== Reset / Base ================================================== */
html, body.tmblog-standalone { background: var(--tm-bg); }
body.tmblog-standalone {
    margin: 0;
    font-family: var(--sans);
    color: var(--tm-text);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.tmblog-standalone * { box-sizing: border-box; }
body.tmblog-standalone a { color: inherit; text-decoration: none; }
body.tmblog-standalone img { max-width: 100%; height: auto; display: block; }
body.tmblog-standalone ::selection { background: var(--tm-pink); color: #fff; }

/* WCAG 2.4.7: Klavyeyle odaklanan tüm interaktif öğelerde görünür odak halkası.
   Tarayıcı varsayılanı bazen görünmüyor; bu kural garanti sağlar. */
body.tmblog-standalone :focus-visible {
    outline: 3px solid var(--tm-pink);
    outline-offset: 2px;
}
/* Fare ile tıklandığında outline gizle (sadece klavye/erişilebilirlik için görünür) */
body.tmblog-standalone :focus:not(:focus-visible) {
    outline: none;
}

.tmblog-skip {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
    /* WCAG 2.4.1: Atlama bağlantısı her zaman DOM'da var ama görsel olarak
       gizli — Tab tuşuyla odaklandığında görünür hale gelir. */
}
.tmblog-skip:focus,
.tmblog-skip:focus-visible {
    /* focus-visible eklendi: Chrome/Safari'nin "odaklanamıyor" hatasını giderir.
       Outline eklendi: focus göstergesi her tarayıcıda görünür olmalı (WCAG 2.4.7). */
    left: 16px; top: 12px; width: auto; height: auto;
    background: #fff; padding: 8px 14px; border-radius: 8px;
    box-shadow: var(--tm-shadow); z-index: 9999;
    outline: 3px solid var(--tm-pink); outline-offset: 2px;
    overflow: visible;
}

/* ===== Header ======================================================== */
.tmblog-site-header {
    position: sticky !important; top: 0 !important; z-index: 80;
    background: rgba(255,255,255,0.96);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--tm-line);
}
/* WP admin çubuğu (sadece yöneticilere görünür) sabit/fixed olduğu için,
   sticky header'ımızın "top:0" eşiği admin çubuğunun YÜKSEKLİĞİNE göre
   ayarlanmalı — aksi halde ikisi üst üste binebilir. WordPress bunu
   otomatik olarak body'ye "admin-bar" sınıfı ekleyerek bildirir. */
body.admin-bar .tmblog-site-header { top: 32px; }
@media (max-width: 782px) {
    body.admin-bar .tmblog-site-header { top: 46px; }
}
.tmblog-header-inner {
    max-width: 1240px; margin: 0 auto;
    padding: 14px 28px;
    display: flex; align-items: center; gap: 14px;
    /* BULUNAN GERÇEK KÖK NEDEN (2026-07-06, v9→v10): bu kapsayıcı HER ZAMAN
       en fazla 1240px genişliğinde render olur — pencere 2000px de olsa,
       2560px de olsa fark etmez. Önceki "geniş ekranda daha gevşek boşluk"
       kırılım noktaları (>1750px: gap 22px, tam "Mağazaya Git" etiketi,
       300px arama) bu YÜZDEN hiçbir fayda sağlamıyordu — aynı 1240px'lik
       alanda sadece daha SIKIŞIK bir içerik üretiyordu ki bu da nav'ın
       navigasyon linklerini tamamen görünmez hâle getirene kadar
       ezilmesine yol açtı. Çözüm: zaten test edilmiş "sıkı" değerler artık
       PENCEREYE BAKMAKSIZIN varsayılan — aşağıdaki kırılım noktaları hâlâ
       gerçekten dar pencereler için EK sıkıştırma uyguluyor, çakışma yok.
    */
    position: relative;
}
.tmblog-brand {
    display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0;
    min-width: 0;
}
.tmblog-brand-logo {
    width: 58px; height: 58px; border-radius: 50%;
    aspect-ratio: 1 / 1; /* (2026-07-05) PageSpeed "boyutu belirlenmemiş resim" / düzen kayması düzeltmesi */
    box-shadow: 0 4px 12px -4px rgba(192,140,21,.45);
    object-fit: cover; background: #fff;
    flex-shrink: 0;
}
.tmblog-brand-block { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.tmblog-brand-text {
    font-family: var(--serif); font-weight: 700;
    font-size: 1.2rem; color: var(--tm-purple);
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.tmblog-brand-sub {
    font-size: 10px; letter-spacing: .22em;
    color: var(--tm-text-soft); text-transform: uppercase;
    margin-top: 2px; font-weight: 600;
    white-space: nowrap;
}
.tmblog-site-nav {
    display: flex; align-items: center; gap: 12px;
    margin-left: 8px;
    /* =====================================================================
     * BULUNAN KALICI HATA (2026-07-06, çakışma-fix-v8): Mağaza/Sepet/Ödeme
     * sayfalarında sağdaki Favori (kalp) ve Sepet ikonları, YAKLAŞIK
     * 1430–1580px genişlik aralığında (yani mevcut iki kırılım noktasının
     * TAM ARASINDA) ekran dışına taşıp TAMAMEN GÖRÜNMEZ oluyordu — flex
     * satırı "nowrap" olduğu için ve nav 7 öğe içerdiği için, önceki
     * "her kırılımda birkaç piksel kıs" yaklaşımı (gap/font/search
     * genişliği) bu ürünler için yeterli olmadı; her yeni nav öğesi veya
     * ürün adı sonraki genişliğin TEKRAR taşmasına yol açabilirdi — yani
     * kırılgan bir çözümdü.
     *
     * KALICI ÇÖZÜM: Piksel piksel kırılım ayarlamak yerine, hangi
     * öğelerin ASLA kaybolmaması gerektiğine karar verip onlara
     * "flex-shrink: 0" veriyoruz (Mağaza/Favori/Sepet/Arama/Logo — bkz.
     * aşağıdaki kurallar) ve SIKIŞMAYI SADECE nav'ın kendi içinde,
     * görünmez bir yatay kaydırma ile emiyoruz ("min-width: 0" + yatay
     * scroll). Böylece ekran ne kadar dar olursa olsun, sağdaki
     * butonlar/ikonlar ASLA ekran dışına itilemez — en kötü ihtimalle
     * nav menüsü kendi içinde hafifçe kaydırılabilir hâle gelir (ki bu
     * durum pratikte nadiren, sadece çok dar masaüstü pencerelerinde
     * yaşanır ve fark edilmez).
     * ===================================================================== */
    flex-shrink: 1; min-width: 200px; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.tmblog-site-nav::-webkit-scrollbar { display: none; }
.tmblog-site-nav a {
    font-size: 14.5px; font-weight: 600; color: var(--tm-text);
    position: relative; padding: 6px 0;
    transition: color .18s ease;
    white-space: nowrap;
    line-height: 1.2;
    flex-shrink: 0;
}
.tmblog-site-nav a:hover { color: var(--tm-pink); }
.tmblog-site-nav a::after {
    content: ""; position: absolute; left: 50%; bottom: -2px;
    width: 0; height: 2px; background: var(--tm-pink);
    border-radius: 2px; transition: width .25s ease, left .25s ease;
}
.tmblog-site-nav a:hover::after { width: 100%; left: 0; }

.tmblog-search {
    /* (2026-07-05 KURUMSAL) Alan beyaz zemine alındı, genişletildi (300px,
       odakta 360px'e büyür), sağ içine entegre pembe "Ara" butonu eklendi —
       kurumsal e-ticaret arama deseni. */
    margin-left: auto;
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--tm-line);
    border-radius: 999px; padding: 5px 5px 5px 16px;
    width: 210px; height: 44px;
    box-sizing: border-box;
    transition: box-shadow .2s ease, border-color .2s ease, width .25s ease;
    flex-shrink: 0;
}
.tmblog-search:hover { border-color: #c9cdd6; }
.tmblog-search:focus-within {
    width: 250px;
    border-color: var(--tm-pink);
    box-shadow: 0 0 0 4px rgba(231,25,90,.10);
}
.tmblog-search svg { width: 16px; height: 16px; color: var(--tm-text-soft); flex-shrink: 0; }
.tmblog-search input {
    flex: 1; min-width: 0;
    border: 0; background: transparent; outline: 0;
    font: inherit; font-size: 13.5px; color: var(--tm-text);
    padding: 0; margin: 0;
    height: 22px; line-height: 22px;
    -webkit-appearance: none; appearance: none;
}
.tmblog-search input::-webkit-search-decoration,
.tmblog-search input::-webkit-search-cancel-button,
.tmblog-search input::-webkit-search-results-button,
.tmblog-search input::-webkit-search-results-decoration { -webkit-appearance: none; display: none; }
.tmblog-search input::placeholder { color: var(--tm-text-soft); opacity: .85; }
.tmblog-search-btn {
    flex-shrink: 0; border: 0; cursor: pointer;
    background: var(--tm-pink); color: #fff;
    border-radius: 999px; padding: 0 16px; height: 32px;
    font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
    transition: opacity .15s ease, transform .15s ease;
}
.tmblog-search-btn:hover { opacity: .92; }
.tmblog-search-btn:active { transform: scale(.97); }

.tmblog-shop-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--tm-pink); color: #fff !important;
    padding: 11px 20px; border-radius: 999px;
    font-weight: 700; font-size: 14px;
    box-shadow: 0 6px 18px -8px rgba(231,25,90,.6);
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
    flex-shrink: 0;
}
.tmblog-shop-btn:hover {
    background: var(--tm-pink-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgba(231,25,90,.65);
}
.tmblog-shop-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.tmblog-shop-btn-full { display: none; }
.tmblog-shop-btn-short { display: inline; }

/* KULLANICI İSTEĞİ: Bu eskiden hamburger menü açan bir <button>'dı; artık
   doğrudan "Kategoriler" şeridine giden bir <a> bağlantısı — Mağaza
   butonuyla aynı pill tasarımını kullanıyor (ikon + kısa metin), sadece
   pembe değil BEYAZ/çerçeveli — ikisi yan yana göründüğünde Mağaza
   (dolu pembe, birincil eylem) ile karışmasın. Masaüstünde hâlâ gizli;
   sadece mobilde (980px altı) görünür. */
.tmblog-nav-toggle {
    /* (2026-07-06) KULLANICI İSTEĞİ: kare ☰ butonuna "Kategoriler" yazısı
       eklendi — buton artık ikon + etiketli bir hap. Üst menüdeki ayrı
       "Kategoriler" sekmesi kaldırıldı (bkz. blog-module.php nav bloğu).
       Çok dar telefonlarda (≤560px) yer kazanmak için etiket gizlenir,
       kare ikon hâline döner. Her genişlikte görünürdür. */
    display: inline-flex;
    align-items: center; justify-content: center; gap: 8px;
    height: 38px; width: auto;
    background: var(--tm-pink) !important; border: 0 !important;
    border-radius: 999px; padding: 0 16px 0 13px;
    color: #fff !important; flex-shrink: 0;
    transition: background .2s ease;
}
.tmblog-nav-toggle:hover { background: var(--tm-pink-dark) !important; }
.tmblog-nav-toggle svg { width: 19px; height: 19px; stroke: currentColor; flex-shrink: 0; }
.tmblog-cat-toggle-lbl { font-size: 13px; font-weight: 800; letter-spacing: .02em; color: #fff; white-space: nowrap; }
@media (max-width: 560px) {
    .tmblog-cat-toggle-lbl { display: none; }
    .tmblog-nav-toggle { width: 38px; padding: 0; border-radius: 11px; }
}
/* Panel başlığındaki "Kategoriler ↗" artık dizin sayfasına bağlantı */
.tmblog-cat-panel-head a.tm-label { text-decoration: none; transition: color .15s ease; }
.tmblog-cat-panel-head a.tm-label:hover { color: #fff; text-decoration: underline; }
/* NOT: Element artık <a> değil <button> — TASARIMA (yukarıdaki blok)
   dokunulmadı, sadece fonksiyonel olarak gereken "cursor:pointer" ayrı
   bir kuralla ekleniyor (butonlar bazı tarayıcılarda varsayılan olarak
   bunu almaz). Konumlandırma çapası için kapsayıcıya relative verildi. */
.tmblog-nav-toggle { cursor: pointer; position: relative; }

/* ===========================================================================
 * "KATEGORİLER" PANELİ — PEMBE ZEMİN / BEYAZ YAZI (kullanıcı NET talimatı):
 *   "arka plan pembe olsun, ana kategori ve alt kategori yazıları beyaz
 *    olsun, tıklayınca (açık durumda) yazı rengi FARKLI bir renge dönsün."
 *
 * Önceki sürümde alt kategori chip'leri ÇOK düşük opaklıklı (yarı saydam)
 * beyaz zemin üzerindeydi — koyu mor fonda "okunmuyor" hissi veriyordu.
 * Bu sürümde HER ŞEY dolgun/doygun PEMBE zemin üzerine kuruldu, yazılar
 * TAM beyaz (opaklık oyunu yok) — okunabilirlik garantili. Açık/tıklanmış
 * durumda yazı beyazdan KOYU MORA dönüyor (--tm-purple), böylece "bu an
 * açık/seçili" net anlaşılıyor.
 * ========================================================================= */
.tmblog-cat-toggle-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.tmblog-cat-panel {
    /* (2026-07-05 KURUMSAL YENİDEN TASARIM) Panel, sitenin kurumsal
       kimliğine geçirildi: pembe-sarı oyuncu palet yerine, kategori/hesap
       hero'larıyla AYNI lacivert-mor degrade zemin + pembe vurgu. Konum
       düzeltmesi korunuyor: panel .tmblog-cat-toggle-wrap'e göre, butonun
       sol kenarından açılır. */
    position: absolute; top: calc(100% + 10px); left: 0;
    width: min(92vw, 400px); max-height: min(76vh, 580px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: linear-gradient(150deg, #1e2a4a 0%, #2c3e6b 60%, #3d3160 100%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    box-shadow: 0 24px 56px -18px rgba(10,14,32,.55);
    z-index: 60; padding: 10px 12px 12px;
}
.tmblog-cat-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 6px 12px; margin-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.tmblog-cat-panel-head .tm-label {
    font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
    color: rgba(255,255,255,.75); font-weight: 700;
}
.tmblog-cat-panel-head .tm-count {
    background: rgba(255,255,255,.12); color: #fff; border-radius: 999px;
    padding: 2px 9px; font-size: 11px; font-weight: 700;
}
.tmblog-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tmblog-cat-item {
    border-radius: 12px;
    background: transparent;
    transition: background .2s ease;
    overflow: hidden;
}
.tmblog-cat-item:hover { background: rgba(255,255,255,.05); }
.tmblog-cat-item.is-open {
    background: rgba(255,255,255,.08);
}
.tmblog-cat-row {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 11px 12px; border: 0 !important; outline: none;
    background: transparent !important; appearance: none; -webkit-appearance: none;
    font-size: 13.5px; font-weight: 700; text-align: left;
    color: #fff !important; text-decoration: none; border-radius: 12px;
    cursor: pointer; opacity: 1 !important; box-shadow: none !important;
}
.tmblog-cat-row-text { flex: 1; min-width: 0; color: inherit !important; opacity: 1 !important; }
.tmblog-cat-row:focus,
.tmblog-cat-row:focus-visible { outline: none; border: 0; box-shadow: none; }
/* Açık satırda vurgu artık marka pembesiyle: rozet ve sayaç pembe dolguya
   döner, yazı beyaz kalır (lacivert zeminde en kurumsal kontrast). */
.tmblog-cat-item.is-open .tmblog-cat-row { color: #fff !important; }
.tmblog-cat-row:active { background: rgba(255,255,255,.12); }
/* Solundaki "baş harf" rozeti — kapalı: buzlu beyaz; açık: pembe dolgu. */
.tmblog-cat-row-badge {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,.14) !important; color: #fff !important;
    font-size: 12px; font-weight: 700; border: 0 !important;
    transition: background .2s ease, color .2s ease;
}
.tmblog-cat-item.is-open .tmblog-cat-row-badge { background: var(--tm-pink) !important; color: #fff !important; }
/* Alt kategori sayısı rozeti. */
.tmblog-cat-row-count {
    flex-shrink: 0; font-size: 10.5px; font-weight: 700;
    color: #fff !important; background: rgba(255,255,255,.14) !important;
    border: 0 !important; border-radius: 999px;
    padding: 2px 9px; line-height: 1.6;
}
.tmblog-cat-item.is-open .tmblog-cat-row-count { color: #fff !important; background: var(--tm-pink) !important; }
.tmblog-cat-toggle-row svg {
    flex-shrink: 0; color: rgba(255,255,255,.65); width: 12px; height: 12px;
    transition: transform .22s ease, color .2s ease;
}
.tmblog-cat-item.is-open > .tmblog-cat-toggle-row svg { transform: rotate(90deg); color: var(--tm-pink); }

/* Alt kategori pilleri — buzlu cam görünümü; üzerine gelince beyaz zemin,
   lacivert yazı (kurumsal ters kontrast). */
.tmblog-cat-sublist-wrap {
    display: grid; grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .28s ease, opacity .22s ease;
}
.tmblog-cat-item.is-open .tmblog-cat-sublist-wrap { grid-template-rows: 1fr; opacity: 1; }
.tmblog-cat-sublist {
    list-style: none; margin: 0; padding: 0 12px 12px 12px;
    min-height: 0; overflow: hidden;
    display: flex; flex-wrap: wrap; gap: 7px;
}
.tmblog-cat-sublist a {
    display: inline-flex; align-items: center;
    padding: 7px 13px; font-size: 12.5px; font-weight: 700;
    color: #fff !important; text-decoration: none;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
    outline: none; box-shadow: none;
    border-radius: 999px;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.tmblog-cat-sublist a:active,
.tmblog-cat-sublist a:hover {
    background: #fff; border-color: #fff; color: #1e2a4a !important;
}
/* Panel altı: tüm kategoriler dizin sayfasına kurumsal CTA. */
.tmblog-cat-panel-all {
    display: flex; align-items: center; justify-content: center;
    margin-top: 10px; padding: 11px 14px;
    background: var(--tm-pink); color: #fff !important;
    border-radius: 999px; font-size: 13px; font-weight: 800;
    text-decoration: none; letter-spacing: .01em;
    transition: opacity .15s ease, transform .15s ease;
}
.tmblog-cat-panel-all:hover { opacity: .92; transform: translateY(-1px); }
/* Alt kategorisi OLMAYAN (yaprak) ana kategori satırı — direkt link,
   açılır okun olmaması yeterli ayrım sağlar; ekstra stil gerekmiyor. */

/* (2026-07-06) GENİŞ MASAÜSTÜ TAŞMA DÜZELTMESİ: Mağaza/Sepet/Ödeme
   sayfalarında header'a favori + sepet ikonları ve Mağaza butonu da
   eklendiği için toplam genişlik ~1700px'e çıkıyor, 1201-1750px arası
   ekranlarda sağdaki butonlar EKRAN DIŞINDA kalıyordu (1200px altı
   kırılımlar vardı ama ÜSTÜ için hiçbir ara kademe yoktu). Kademeli
   sıkıştırma: önce boşluklar, sonra Mağaza butonu kısa etikete düşer,
   sonra arama daralır — hiçbir öğe asla taşmaz. */
/* (2026-07-06) GENİŞ MASAÜSTÜ TAŞMA DÜZELTMESİ — GÜNCELLEME (v10): Bu
   kademelerin çoğu artık YUKARIDAKİ (pencereden bağımsız) sıkı varsayılanlarla
   AYNI veya ondan daha gevşek olduğu için kaldırıldı/sadeleştirildi — aksi
   halde 1580-1750px aralığında arama kutusu/nav aralığı yeniden GENİŞLEYİP
   (paradoksal biçimde) taşmayı geri getiriyordu. Kalan kademeler sadece
   GERÇEKTEN dar pencereler için EK sıkıştırma sağlar. */
@media (max-width: 1580px) {
    .tmblog-site-nav a { font-size: 13.5px; }
    .tmblog-shop-btn { padding: 10px 16px; }
}
@media (max-width: 1430px) {
    .tmblog-site-nav a { font-size: 13px; }
    .tmblog-search { width: 175px; padding: 5px 5px 5px 12px; }
    .tmblog-search:focus-within { width: 205px; }
    .tmblog-search-btn { display: none; }
}
@media (max-width: 1200px) {
    /* (2026-07-06) Üstteki kademelerin devamı — eskiden bu blok aramayı
       yeniden 240px'e GENİŞLETİYORDU ve 1081-1200 aralığında (mağaza
       sayfalarındaki ekstra ikonlarla) taşma geri geliyordu. */
    .tmblog-site-nav { gap: 10px; margin-left: 6px; }
    .tmblog-site-nav a { font-size: 12.5px; }
    .tmblog-search { width: 160px; }
    .tmblog-search:focus-within { width: 190px; }
}
@media (max-width: 1080px) {
    .tmblog-site-nav { gap: 12px; }
    .tmblog-site-nav a { font-size: 13.5px; }
    .tmblog-search { width: 170px; padding: 8px 14px; }
    .tmblog-search:focus-within { width: 200px; }
    .tmblog-search-btn { display: none; }
    .tmblog-shop-btn { padding: 10px 16px; font-size: 13.5px; }
}
/* "ÜRÜN/KATEGORİ/MARKA ARA" ÇUBUĞU — varsayılan (masaüstü): tamamen
   gizli. Mobilde (980px altı, aşağıdaki media query) görünür hâle gelir. */
.tmblog-mobile-search { display: none; }
@media (max-width: 980px) {
    /* BULUNAN GERÇEK SEBEP (mobilde sticky çalışmıyor): "position: sticky",
       en yakın KAYDIRILABİLİR ata elemente bağımlıdır — bu zincirde
       (muhtemelen aktif TEMA'nın kendi sayfa sarmalayıcısında, bizim
       eklenti dosyalarımızın GÖREMEDİĞİ bir yerde) "overflow" veya
       "transform" özelliğine sahip bir ata varsa, sticky mobil
       tarayıcılarda SESSİZCE bozulabilir (masaüstünde fark etmeyebilir).
       KESİN ÇÖZÜM: mobilde "position: fixed" kullanıyoruz — bu, hiçbir
       ata elemente bağımlı DEĞİLDİR, doğrudan EKRANA (viewport) göre
       sabitlenir, bu yüzden sticky'yi bozan her ne varsa ondan tamamen
       BAĞIŞIKTIR. Header artık normal akıştan çıktığı için, ALTINDAKİ
       içeriğin header'ın altında kalmaması için body'ye header'ın
       yüksekliğine eşit bir üst boşluk (padding-top) eklendi. */
    .tmblog-site-header {
        position: fixed !important; top: 0 !important; left: 0; right: 0; width: 100%;
    }
    body.tmblog-standalone { padding-top: 134px; /* header 82px + arama çubuğu 48px + 4px boşluk */ }
    /* KULLANICI İSTEĞİ: Tekil ÜRÜN sayfasında mobil arama çubuğu hiç
       render edilmiyor (bkz. blog-module.php, is_product() koşulu) —
       ama yukarıdaki 110px boşluk, HEM header HEM o arama çubuğu için
       hesaplanmıştı. Arama çubuğu yokken bu boşluk BOŞ kalıyordu. Bu
       sayfada SADECE header'ın kendi yüksekliği (82px) kadar boşluk
       bırakılıyor — arama çubuğu için ayrılan ~28px tamamen kaldırıldı. */
    body.tmblog-standalone.single-product { padding-top: 82px !important; }
    /* "ÜRÜN/KATEGORİ/MARKA ARA" ÇUBUĞU — KULLANICI İSTEĞİ: header'ın
       (logo duvarının) TAM ALTINA, boşluk OLMADAN ("sıfır") bitişik;
       sağdan sola TAM GENİŞLİK (kenar boşluğu yok), TEK çerçeve/gölge
       içinde ikon + metin birlikte. position:fixed — header gibi sayfa
       kaydırılırken sabit kalır; "top" header'ın yüksekliğine eşit. */
    .tmblog-mobile-search {
        position: fixed; top: 82px; left: 0; right: 0; z-index: 79;
        display: flex; align-items: center; gap: 10px;
        margin: 0; padding: 0 16px;
        /* SABİT YÜKSEKLİK: değişken input yüksekliği body.padding-top
           ile çakışıyordu ("sayfa adı çakışma" hatası). Artık sabit
           48px → body.padding-top = header + 48px + 4px = 134px. */
        height: 48px; box-sizing: border-box;
        background: #fff; border-radius: 0; border: 0; box-shadow: none;
    }
    .tmblog-mobile-search svg { flex-shrink: 0; color: #2a2630; }
    .tmblog-mobile-search input {
        flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
        font-size: 14.5px; font-weight: 600; color: #2a2630; font-family: var(--sans);
        -webkit-appearance: none; appearance: none;
    }
    .tmblog-mobile-search input::placeholder { color: #2a2630; opacity: 1; font-weight: 600; /* WCAG: opacity .75 kontrast kaybı — tam opacity ile 8.5:1 */ }
    .tmblog-mobile-search input::-webkit-search-decoration,
    .tmblog-mobile-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
    /* DÜZELTME: Kategori butonu artık kendi küçük sarmalayıcısının
       (.tmblog-cat-toggle-wrap) içinde — mobildeki "sağa it" kuralının
       BUTONA değil, bu DIŞ sarmalayıcıya uygulanması gerekiyor, yoksa
       header'ın ana flex düzeninde hiçbir etkisi olmaz ve buton yanlış
       yerde kalır. */
    .tmblog-cat-toggle-wrap { order: 5; margin-left: auto; }
    /* Mobilde buton sağa kaydığı için panel de SAĞA hizalı açılmalı
       (sola hizalı kalsaydı ekranın sağından taşardı). */
    .tmblog-cat-panel { left: auto; right: 0; }
    .tmblog-nav-toggle { display: inline-flex; }
    .tmblog-header-inner { flex-wrap: wrap; gap: 10px; padding: 12px 18px; }
    .tmblog-site-nav {
        order: 10; flex-basis: 100%;
        flex-direction: column; align-items: stretch;
        gap: 0; margin-left: 0; padding: 8px 0 4px;
        display: none;
        border-top: 1px solid var(--tm-line); margin-top: 8px;
    }
    .tmblog-site-nav.is-open { display: flex; }
    .tmblog-site-nav a {
        padding: 14px 6px; font-size: 15.5px;
        border-bottom: 1px solid var(--tm-line);
        white-space: normal;
        min-height: 48px;
        display: flex; align-items: center;
    }
    .tmblog-site-nav a:last-child { border-bottom: 0; }
    .tmblog-site-nav a::after { display: none; }
    .tmblog-search {
        width: 100%; order: 11; margin-left: 0;
        display: none;
        flex-basis: 100%;
    }
    .tmblog-site-nav.is-open ~ .tmblog-search,
    .tmblog-search.is-open { display: flex; }
    /* KULLANICI İSTEĞİ: Mobilde Mağaza butonu da kaldırıldı — header artık
       sadece logo + Kategoriler butonundan oluşuyor. Masaüstünde aynen
       duruyor; mağazaya erişim alt tab bar / Kategoriler menüsü üzerinden
       sağlanıyor. */
    .tmblog-shop-btn { display: none !important; }
    /* KULLANICI İSTEĞİ: Mobilde logonun yanındaki Favori (kalp) ve Sepet
       ikonları kaldırıldı — SADECE bu mobil görünümde (980px ve altı);
       masaüstünde bu iki buton olduğu gibi kalmaya devam ediyor. Linkler
       site genelinde (örn. ürün sayfalarındaki "Sepete Ekle" vb.) hâlâ
       tam olarak çalışır, sadece bu header'daki KISAYOL ikonları mobilde
       görünmüyor — header'da daha sade/az kalabalık bir görünüm sağlar. */
    .tmblog-wishlist-link,
    .tmblog-cart-link {
        display: none !important;
    }
}
@media (max-width: 560px) {
    body.tmblog-standalone { padding-top: 126px; /* header 74px + arama 48px + 4px */ }
    body.tmblog-standalone.single-product { padding-top: 74px !important; }
    .tmblog-mobile-search { top: 74px; }
    .tmblog-header-inner { padding: 10px 14px; gap: 8px; }
    .tmblog-brand-logo { width: 54px; height: 54px; }
    .tmblog-brand-text { font-size: 1.15rem; }
    .tmblog-brand-sub { font-size: 10px; letter-spacing: .2em; }
    .tmblog-shop-btn {
        padding: 8px 11px; font-size: 12.5px;
        gap: 5px;
    }
    .tmblog-shop-btn-full { display: none; }
    .tmblog-shop-btn-short { display: inline; }
    .tmblog-shop-btn svg { width: 14px; height: 14px; }
    /* NOT: Buton artık sabit width/height (38px) kullanan, yazısız,
       ikon-only bir buton — ayrı bir mobil override'a gerek yok. */
}

@media (max-width: 980px) {
    .tmblog-site-nav.is-open ~ .tmblog-search { display: flex; height: 48px; padding: 10px 16px; }
}

/* ===== Hero (index) ================================================== */
.tmblog-hero {
    position: relative;
    /* KULLANICI GERİ BİLDİRİMİ ("hala biraz daha grilik var"): Asıl
       kaynak BULUNDU — bu kapsayıcı (.tmh-slider'ın İÇİNDE, görsel
       kapsayıcısından BAĞIMSIZ bir ara katman) kendi pembe/krem
       gradyanlarına sahipti (#fde2eb, #fdf0d8) — tam beyaz olmadıkları
       için, görsel artık tam genişlik kaplamayınca (mobilde %75) bu
       tonlar etrafta görünür/"gri" gibi algılanıyordu. GÜVENLİ
       DEĞİŞİKLİK: SADECE renk — bu kural da boyut/konum/oran
       BELİRLEMİYOR; sıcak noktalar bundan KAÇ KATMAN İÇERDE olan
       .tmblog-hero-art'a göre konumlanıyor, bu değişiklikten hiçbir
       şekilde etkilenmez. */
    background: #fff;
    padding: 27px 28px 24px;
    overflow: hidden;
}
.tmblog-hero-inner {
    max-width: 1240px; margin: 0 auto;
    display: grid;
    /* KULLANICI İSTEĞİ: Slider'ın GÖRSEL YÜKSEKLİĞİ, çoğunlukla bu
       sütunun GENİŞLİĞİNE bağlı (görsel çok uzun bir oranda —
       1007:1590, yani genişliğinin ~1.6 katı yükseklik — bkz.
       .tmh-hero-art-floating). Daha önce SADECE .tmblog-hero'nun üst/alt
       padding'ini küçültmek, bu DEV görselin yanında görünmüyordu —
       asıl yüksekliği BELİRLEYEN bu sütunun genişliği. Görsel sütununun
       payı burada ~%25 düşürüldü (0.9fr → 0.7fr): oran SABİT kaldığı
       için (aspect-ratio değişmedi), genişlik ~%24 küçülünce yükseklik
       de OTOMATİK olarak ~%24 küçülüyor — bu, "slider'ı küçült"
       isteğinin GERÇEK karşılığı. */
    grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr);
    gap: 48px; align-items: center;
}
.tmblog-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .26em; text-transform: uppercase;
    color: var(--tm-text-dim);
    margin: 0 0 22px;
}
.tmblog-eyebrow::before {
    content: ""; width: 28px; height: 2px; background: var(--tm-text-dim);
}
.tmblog-hero h1 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(2.4rem, 4.5vw, 4rem); line-height: 1.04;
    margin: 0 0 22px; color: var(--tm-purple);
    letter-spacing: -0.02em;
}
.tmblog-hero h1 .tm-mark {
    position: relative; font-style: italic; color: var(--tm-text);
    padding: 0 .18em;
}
.tmblog-hero h1 .tm-mark::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 4%;
    height: 38%; background: var(--tm-pink);
    z-index: -1; border-radius: 4px;
    transform: skewX(-6deg);
}
.tmblog-hero p.tm-lead {
    font-size: 1.05rem; color: var(--tm-text-dim);
    max-width: 540px; margin: 0 0 32px;
}
.tmblog-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.tm-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 24px; border-radius: 999px;
    font-weight: 700; font-size: 14.5px;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    cursor: pointer; border: 0;
}
.tm-btn-primary {
    background: var(--tm-pink) !important; color: #fff !important;
    box-shadow: 0 8px 22px -10px rgba(231,25,90,.6);
}
.tm-btn-primary:hover { background: var(--tm-pink-dark); transform: translateY(-1px); }
.tm-btn-ghost {
    background: transparent; color: var(--tm-text) !important;
    border: 1.5px solid var(--tm-text);
}
.tm-btn-ghost:hover { background: var(--tm-text); color: #fff !important; }

.tmblog-hero-art {
    position: relative; aspect-ratio: 3 / 4;
    border-radius: 24px; overflow: hidden;
    box-shadow: 0 30px 80px -40px rgba(43,31,90,.55);
    touch-action: pan-y;
}
.tmblog-hero-art img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: center; display: block; }
.tmblog-hero-art .tm-badge {
    position: absolute; left: 20px; bottom: 20px;
    background: var(--tm-pink); color: #fff;
    padding: 9px 18px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    box-shadow: 0 10px 24px -10px rgba(231,25,90,.7);
    text-decoration: none; display: inline-block;
    transition: transform .15s ease, box-shadow .15s ease;
}
.tmblog-hero-art a.tm-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px rgba(231,25,90,.85);
}

/* =========================================================================
 * "FLOATING" HERO GÖRSELİ — şeffaf arka planlı (PNG) manken/model kesiti,
 * mylifeortopedi.com tarzı: kutu/çerçeve/gölge YOK, görsel doğrudan hero
 * arka planı üzerinde duruyor. Kullanıcı isteğiyle eklendi; her slaytın
 * "image_style" alanı 'floating' ise bu sınıf devreye girer.
 * ========================================================================= */
.tmh-hero-art-floating {
    border-radius: 0 !important; overflow: visible !important; box-shadow: none !important;
    max-height: none !important;
    display: flex; align-items: flex-end; justify-content: center;
    /* YEDEK aspect-ratio KALDIRILDI: Eskiden sabit "1007/1590" kullanılıyordu
       — bu, farklı boyuttaki görseller (örn. admin panelinden yüklenen
       tugramedikal-duzce-kapak-foto-2.png) için YANLIŞ bir oranda render
       edilmesine ve sağda/solda gri boşluk oluşmasına yol açıyordu. Artık
       yedek değer "auto" — PHP'nin inline olarak bastığı gerçek oran kazanır,
       PHP ratio okuyamazsa görsel kendi doğal boyutlarından oranını alır.
       Her iki durumda da konteynerde boşluk oluşmuyor. */
    aspect-ratio: auto;
    margin: 0 -6% -28px;
}
.tmh-hero-art-floating img {
    width: 100%; height: 100%;
    /* NOT: Artık "height: auto" değil, "height: 100%" — çünkü kapsayıcı
       (yukarıda) zaten görselin TAM ORANINA kilitlendiği için, görsel
       kapsayıcıyı eksiksiz doldurur; object-fit:contain ise yine de bir
       güvence katmanı olarak kalıyor (örn. tarayıcı yuvarlama farkları
       için), pratikte artık görünür bir boşluk YARATMAYACAK çünkü
       kapsayıcı zaten görselin kendi oranında. */
    object-fit: contain; object-position: bottom center;
    filter: drop-shadow(0 30px 40px rgba(20,16,12,.18));
}
.tmh-hero-art-floating .tm-badge { left: auto; right: 4%; bottom: 6%; }
/* BULUNAN HATA: Bu kural dosyada, mobildeki ESKİ ".tmblog-hero-art {
   aspect-ratio:4/5; max-height:60vh }" kuralından ÖNCE geliyordu — aynı
   özgüllükte (tek sınıf) iki kural çakışınca dosyada SONRA gelen kazanır,
   bu da mobilde floating tasarımının eski kutu oranına geri dönmesine
   (ve değişikliğin "uygulanmamış" gibi görünmesine) yol açıyordu. Yukarıya
   !important eklemek bunu KESİN olarak çözer — artık dosya sırası önemli
   değil, mobilde de aspect-ratio (görselin kendi oranı) HER ZAMAN kazanır. */
@media (max-width: 900px) {
    /* Aynı düzeltme mobilde de geçerli: üst kenarda negatif margin yerine
       küçük bir POZİTİF boşluk veriyoruz, böylece görsel her zaman
       header'ın net altından başlar, üstüne binmez. */
    .tmh-hero-art-floating { margin: 10px 0 0; }
    /* "max-height:none" zaten yukarıda kalıcı — artık burada tekrar
       ayarlamaya gerek yok, çünkü en/boy oranı sabitlendiği için zaten
       hiçbir koşulda genişlik küçülmüyor/boşluk oluşmuyor. */
}

/* =========================================================================
 * MANKEN ÜZERİNDE "SICAK NOKTA" KATEGORİ BUTONLARI — kullanıcı isteğiyle,
 * mylifeortopedi.com tarzı: vücudun belirli bir bölgesinin üzerine
 * gelince (masaüstü) veya dokununca (mobil) o bölgeyle ilgili kategori
 * etiketi belirir ve tıklanınca o kategoriye gider.
 * ========================================================================= */
.tmh-hotspot {
    position: absolute; transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; z-index: 5;
    touch-action: pan-y;
}
/* ETİKET KONUMU VARYANTLARI — kullanıcı bazı noktalarda etiketin
   noktanın SOLUNDA veya ALTINDA durmasını istedi (varsayılan: sağında).
   "--label-left": flex sırası ters çevrilir, etiket artık DOM'da sonra
   gelse de görsel olarak SOLDA durur; hover'da kayma yönü de (sağdan
   sola değil, soldan-sağa) ona göre ayarlanır.
   "--label-below": yatay flex yerine dikey, etiket noktanın ALTINA iner. */
.tmh-hotspot--label-left {
    flex-direction: row-reverse;
}
.tmh-hotspot--label-below {
    flex-direction: column; gap: 6px;
}
.tmh-hotspot-dot {
    position: relative; flex-shrink: 0;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--tm-pink); border: 3px solid #fff;
    box-shadow: 0 3px 10px -2px rgba(20,16,12,.5);
    transition: transform .2s ease;
}
/* Nabız gibi atan dış halka — kullanıcının dikkatini "burası tıklanabilir"
   diye çekmek için, sürekli ama göz yormayan bir animasyon. */
.tmh-hotspot-dot::after {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid var(--tm-pink); opacity: 1; /* WCAG: opacity .55 kontrast kaybı yarattı */
    animation: tmhHotspotPulse 2.2s ease-out infinite;
}
@keyframes tmhHotspotPulse {
    0%   { transform: scale(.6); opacity: .65; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
}
.tmh-hotspot-label {
    display: flex; align-items: center; gap: 5px;
    background: #fff; color: var(--tm-text);
    font-size: 12.5px; font-weight: 700; white-space: nowrap;
    padding: 7px 12px; border-radius: 999px;
    box-shadow: 0 8px 20px -8px rgba(20,16,12,.35);
    opacity: 0; transform: translateX(-6px) scale(.94);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
/* "left" varyantında etiket sağdan sola değil, SOLDAN merkeze doğru
   kayarak belirmeli — varsayılanın ters yönü. */
.tmh-hotspot--label-left .tmh-hotspot-label { transform: translateX(6px) scale(.94); }
/* "below" varyantında etiket yukarıdan aşağıya doğru kayarak belirir. */
.tmh-hotspot--label-below .tmh-hotspot-label { transform: translateY(-6px) scale(.94); }
/* Masaüstü: "üzerine gelince" (hover) etiket belirir — istenen davranış. */
@media (hover: hover) and (pointer: fine) {
    .tmh-hotspot:hover .tmh-hotspot-label,
    .tmh-hotspot:focus-visible .tmh-hotspot-label { opacity: 1; transform: translateX(0) scale(1); }
    .tmh-hotspot--label-below:hover .tmh-hotspot-label,
    .tmh-hotspot--label-below:focus-visible .tmh-hotspot-label { transform: translateY(0) scale(1); }
    .tmh-hotspot:hover .tmh-hotspot-dot { transform: scale(1.15); }
}
/* Dokunmatik cihazlarda "hover" diye bir şey olmadığı için, etiket sürekli
   (ama küçük/kompakt) görünür kalır — kullanıcı dokunabileceğini hemen
   anlar, ekstra bir dokunuşa gerek kalmadan doğrudan kategoriye gider.
   NOT: Bu davranış GENİŞ dokunmatik ekranlarda (örn. tablet/dokunmatik
   masaüstü, >900px) hâlâ geçerli — yeterli alan olduğundan sorun yaratmaz.
   DAR mobil ekranlarda (≤900px) ise aşağıdaki "@media (max-width:900px)"
   kuralı bu etiketleri GİZLER (display:none !important) ve yerine slider
   altındaki düzenli ".tmh-hotspot-chips" şeridi devreye girer — bkz. o blok. */
@media (hover: none), (pointer: coarse) {
    .tmh-hotspot-label,
    .tmh-hotspot--label-left .tmh-hotspot-label,
    .tmh-hotspot--label-below .tmh-hotspot-label {
        opacity: 1; transform: none; font-size: 10.5px; padding: 5px 9px;
    }
    .tmh-hotspot-dot::after { animation-duration: 2.8s; }
}
@media (max-width: 640px) {
    .tmh-hotspot-label svg { display: none; }
}

/* =========================================================================
 * MOBİL KATEGORİ ÇİPLERİ — KULLANICI KARARI: artık KULLANILMIYOR. Sıcak
 * noktalar, X/Y konumları artık görsel programatik olarak taranıp manken
 * ile hiç çakışmayan güvenli boşluklara taşındığı için (bkz. PHP'deki
 * tmh_render_hero() render-anı düzeltmesi), HER ekran boyutunda doğrudan
 * görselin/slider'ın ÜZERİNDE kalabiliyor — ayrı bir alt şeride taşımaya
 * artık gerek yok. Bu blok, eski PHP çıktısıyla (varsa) uyumluluk için
 * sadece görünmez bırakılıyor, silinmedi.
 * ========================================================================= */
.tmh-hotspot-chips { display: none !important; }
@media (max-width: 900px) {
    /* Noktalar artık güvenli (mankenle çakışmayan) konumlarda olduğundan
       görsel üzerinde KALABİLİR — sadece dokunmatik ekranda biraz daha
       küçük/sade dursun diye boyutu hafifçe küçültülür. Etiket metni de
       (masaüstündeki gibi sadece hover'da değil) her zaman kompakt
       görünür kalır — "hover:none" media query'si bunu zaten sağlıyor. */
    .tmh-hotspot-dot { width: 15px; height: 15px; border-width: 2.5px; }
}

@media (max-width: 900px) {
    .tmblog-hero { padding: 0 0 16px; /* DÜZELTME: üst padding kaldırıldı — slider'ın gri bant görünümünü önlemek için */ }
    .tmblog-hero-inner { grid-template-columns: 1fr; gap: 28px; }
    .tmblog-hero-art { order: -1; aspect-ratio: 4 / 5; max-height: 60vh; }
    /* NOT: Önceden burada "max-width: 75% !important" kuralı vardı — bu,
       eski görselin (hero-model-3.png) sağında/solunda geniş beyaz boşluk
       içermesinin geçici bir çözümüydü. YENİ görsel (hero-model-3.jpg)
       beyaz boşlukları kırpılmış olarak hazırlandı; kırpılmış görsel
       tam genişliği kullanmalı, bu yüzden kısıtlama KALDIRILDI. */
    .tmh-hero-art-floating { margin: 0 auto -21px !important; }
}

/* ===== Topic chips ================================================== */
/* (2026-07-05) Çipler artık "Konular" açılır butonunun içinde — buton
 * kapalıyken tek satırlık bir pill, açılınca çipler altında belirir. */
.tmblog-topics-dd {
    max-width: 1240px; margin: 0 auto; padding: 18px 28px 8px;
    border-top: 1px solid var(--tm-line);
}
.tmblog-topics-dd summary {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 16px; border-radius: 999px; cursor: pointer;
    background: #f3eff7; border: 1px solid transparent;
    list-style: none; -webkit-tap-highlight-color: transparent;
    transition: background .2s ease;
}
.tmblog-topics-dd summary::-webkit-details-marker { display: none; }
.tmblog-topics-dd summary:hover { background: #ece5f3; }
.tmblog-topics-dd summary .tm-label {
    font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--tm-text); font-weight: 700;
}
.tmblog-topics-dd summary .tm-count {
    background: rgba(0,0,0,.08); border-radius: 999px; padding: 2px 8px;
    font-size: 11px; font-weight: 700; color: var(--tm-text);
}
.tmblog-topics-caret { transition: transform .2s ease; color: var(--tm-text-soft); }
.tmblog-topics-dd[open] summary { background: var(--tm-pink); }
.tmblog-topics-dd[open] summary .tm-label,
.tmblog-topics-dd[open] summary .tm-count { color: #fff; }
.tmblog-topics-dd[open] summary .tm-count { background: rgba(255,255,255,.25); }
.tmblog-topics-dd[open] .tmblog-topics-caret { transform: rotate(180deg); color: #fff; }
.tmblog-topics {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 2px 4px;
}
.tmblog-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px;
    background: #f3eff7; color: var(--tm-text);
    font-size: 13px; font-weight: 600;
    transition: background .2s ease, color .2s ease, transform .15s ease;
}
.tmblog-chip:hover { background: var(--tm-pink); color: #fff; transform: translateY(-1px); }
.tmblog-chip .tm-count {
    background: rgba(0,0,0,.08); color: inherit;
    border-radius: 999px; padding: 2px 8px;
    font-size: 11px; font-weight: 700;
}
.tmblog-chip:hover .tm-count { background: rgba(255,255,255,.25); }

/* ===== Kategori / etiket / arama başlığı (kurumsal hero, 2026-07-05) ===== */
.tmblog-search-hero {
    background: linear-gradient(120deg, #1e2a4a 0%, #2c3e6b 55%, #3d3160 100%);
    color: #fff; padding: 34px 28px 30px;
}
.tmblog-search-hero .inner { max-width: 1240px; margin: 0 auto; }
.tmblog-search-hero .tmblog-breadcrumbs { margin-bottom: 14px; font-size: 12.5px; }
.tmblog-search-hero .tmblog-breadcrumbs a { color: rgba(255,255,255,.78); text-decoration: none; }
.tmblog-search-hero .tmblog-breadcrumbs a:hover { color: #fff; }
.tmblog-search-hero .tmblog-breadcrumbs .sep { color: rgba(255,255,255,.4); margin: 0 6px; }
.tmblog-search-hero .tmblog-breadcrumbs .cur { color: #fff; font-weight: 600; }
.tmblog-search-hero .tmblog-eyebrow { color: rgba(255,255,255,.72); margin: 0; }
.tmblog-search-hero h1 { color: #fff; font-size: 2.1rem; margin: 6px 0 2px; letter-spacing: -.01em; }
.tmblog-search-hero .tm-hero-meta { margin: 0; color: rgba(255,255,255,.82); font-size: 13.5px; font-weight: 600; }
.tmblog-cat-switch { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.tmblog-cat-switch a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 999px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
    color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none;
    white-space: nowrap; transition: background .15s ease;
}
.tmblog-cat-switch a span {
    background: rgba(255,255,255,.16); border-radius: 999px;
    padding: 1px 7px; font-size: 10.5px;
}
.tmblog-cat-switch a:hover { background: rgba(255,255,255,.22); }
.tmblog-cat-switch a.is-current { background: #fff; border-color: #fff; color: #1e2a4a; }
.tmblog-cat-switch a.is-current span { background: rgba(30,42,74,.1); }

/* ===== Kategoriler dizin sayfası (/blog/kategoriler/, 2026-07-05) ===== */
.tmblog-cats-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    padding: 28px 0 44px;
}
@media (max-width: 900px) { .tmblog-cats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tmblog-cats-grid { grid-template-columns: 1fr; } }
.tmblog-cat-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 18px; border: 1px solid var(--tm-line); border-radius: 14px;
    background: #fff; text-decoration: none; color: var(--tm-text);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tmblog-cat-card:hover {
    border-color: var(--tm-pink); transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(30,42,74,.08);
}
.tmblog-cat-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tmblog-cat-card-top strong { font-size: 15.5px; letter-spacing: -.01em; }
.tmblog-cat-card-top .tm-count {
    background: #f3eff7; border-radius: 999px; padding: 3px 10px;
    font-size: 11px; font-weight: 700; color: var(--tm-text); white-space: nowrap;
}
.tmblog-cat-card-latest {
    font-size: 12.5px; color: var(--tm-text-soft); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tmblog-cat-card-cta { margin-top: auto; font-size: 12.5px; font-weight: 700; color: var(--tm-pink); }
/* "Konular" açılırındaki Tümünü Gör çipi */
.tmblog-chip--all { background: var(--tm-pink); color: #fff; }
.tmblog-chip--all:hover { background: var(--tm-pink); opacity: .9; }

/* ===== Main containers ============================================== */
.tmblog-main {
    background: var(--tm-bg); min-height: 60vh; padding-bottom: 60px;
    /* KESİN ORTALAMA DÜZELTMESİ: Geniş ekranlarda (ör. 1920px) içerik
       sağa/sola kayık görünüyordu — "margin: 0 auto" içeren konteynerin
       normalde ortalanması gerekirken, üstteki bir katmanda (tam olarak
       tespit edilemeyen bir nedenle) bu bozuluyordu. Bu fix, üst
       kapsayıcıyı flex yapıp doğrudan "ortala" diyerek, alt elemanların
       KENDİ margin ayarlarından TAMAMEN BAĞIMSIZ, garanti bir ortalama
       sağlıyor. flex-direction:column ile normal blok akışı (üst üste
       dizilme) korunuyor, sadece yatay ortalama garantiye alınıyor. */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tmblog-main > * { width: 100%; }
.tmblog-container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* ===== Section headers ============================================== */
.tmblog-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin: 56px 0 28px; gap: 16px; flex-wrap: wrap;
}
.tmblog-section-head h2 {
    font-family: var(--serif); font-weight: 600;
    font-size: 2.1rem; margin: 0; color: var(--tm-purple);
    letter-spacing: -0.015em;
}
.tmblog-section-head .tm-side {
    font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--tm-text-soft); font-weight: 700;
}

/* ===== Featured card ================================================ */
.tmblog-featured {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
    background: #fff; border: 1px solid var(--tm-line);
    border-radius: 24px; overflow: hidden;
    box-shadow: var(--tm-shadow); position: relative;
}
.tmblog-featured-img { background: #f3eff7; }
.tmblog-featured-img img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: center; display: block; aspect-ratio: 16/12; }
.tmblog-featured-body { padding: 36px 38px; display: flex; flex-direction: column; gap: 16px; }
.tmblog-featured-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tmblog-featured h3 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0;
    line-height: 1.18; color: var(--tm-purple);
}
.tmblog-featured p { color: var(--tm-text-dim); margin: 0; font-size: 1rem; }
.tmblog-featured .tm-author-row {
    display: flex; align-items: center; gap: 10px;
    color: var(--tm-text-soft); font-size: 13px; margin-top: 8px;
    border-top: 1px dashed var(--tm-line); padding-top: 18px;
}
.tmblog-featured .tm-share-corner {
    position: absolute; top: 18px; right: 18px;
    background: #fff; border: 1px solid var(--tm-line);
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--tm-text-dim);
    box-shadow: var(--tm-shadow);
}
@media (max-width: 900px) {
    .tmblog-featured { grid-template-columns: 1fr; }
    .tmblog-featured-body { padding: 26px 24px; }
}

/* ===== Cards / Grid ================================================= */
/* !important: WordPress temalarının (örn. Woodmart, Astra vb.) genel grid/flex
   kuralları .tmblog-grid ve .tmblog-card ile çakışıp mobilde kartların
   daralmasına/uzamasına yol açabiliyor. Bu kurallar eklentinin kendi düzenini
   temanın üzerine garanti eder. */
.tmblog-grid {
    display: grid !important;
    gap: 26px; margin: 28px 0;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    width: 100% !important;
}
.tmblog-grid[data-cols="1"] { grid-template-columns: repeat(1, minmax(0,1fr)) !important; }
.tmblog-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
.tmblog-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
.tmblog-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }

@media (max-width: 900px) {
    .tmblog-grid,
    .tmblog-grid[data-cols="3"],
    .tmblog-grid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .tmblog-grid[data-cols="1"] { grid-template-columns: repeat(1, minmax(0,1fr)) !important; }
}
/* Mobilde her koşulda tek sütun — sütun sayısı parametresi ne olursa olsun */
@media (max-width: 600px) {
    .tmblog-grid,
    .tmblog-grid[data-cols="1"],
    .tmblog-grid[data-cols="2"],
    .tmblog-grid[data-cols="3"],
    .tmblog-grid[data-cols="4"] { grid-template-columns: 1fr !important; }
}

.tmblog-card {
    display: flex !important; flex-direction: column !important;
    background: #fff; border: 1px solid var(--tm-line);
    border-radius: 18px; overflow: hidden;
    width: 100% !important; max-width: 100% !important;
    margin: 0 !important; float: none !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tmblog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tm-shadow);
    border-color: var(--tm-pink-soft);
}
.tmblog-card-img {
    aspect-ratio: 16 / 10; overflow: hidden;
    background: linear-gradient(135deg, #f3eff7, #fde2eb);
    width: 100% !important;
    min-height: 0;
    position: relative;
}
.tmblog-card-img img { width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: cover; object-position: center; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.tmblog-card:hover .tmblog-card-img img { transform: scale(1.05); }
.tmblog-card-body { padding: 20px 22px 22px; display: flex !important; flex-direction: column !important; gap: 10px; }
.tmblog-card-title {
    font-family: var(--serif); font-weight: 600;
    font-size: 1.22rem; line-height: 1.28;
    color: var(--tm-purple); margin: 4px 0 2px;
    /* CLS GÜVENCESİ: Bazı yazı başlıkları (ör. "Şarjlı Masaj Aleti:
       Çeşitleri, Kullanımı ve Doğru Seçim Rehberi") 2 satırdan fazla yer
       kaplayabiliyordu — kategori şeridinde bulduğumuz AYNI sorun, burada
       da yaşanmadan önce önleniyor. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tmblog-card-excerpt {
    color: var(--tm-text-dim); font-size: 14.5px; margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tmblog-card-meta {
    display: flex; align-items: center; gap: 10px;
    font-size: 12.5px; color: var(--tm-text-soft);
    margin-top: 8px; padding-top: 14px; border-top: 1px dashed var(--tm-line);
}

@media (max-width: 600px) {
    .tmblog-card-title { font-size: 1.1rem; }
}


.tmblog-tag {
    display: inline-flex; align-self: flex-start; align-items: center;
    font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
    padding: 4px 12px; background: transparent;
    /* WCAG AA: #e7195a = 4.48:1 (başarısız) → #c2154b = 6.0:1 (✓) */
    color: var(--tm-pink-dark); border: 1px solid var(--tm-pink-dark);
    border-radius: 999px; font-weight: 700;
}
.tmblog-tag-large {
    background: var(--tm-purple); color: #fff !important; border-color: var(--tm-purple);
    padding: 6px 14px; font-size: 11px;
}

/* ===== Empty / Pagination =========================================== */
.tmblog-empty {
    background: var(--tm-bg-mute); border: 1px dashed var(--tm-line);
    padding: 38px; border-radius: 16px; text-align: center;
    color: var(--tm-text-dim); margin: 28px 0;
}
.tmblog-pagination { display: flex; gap: 8px; justify-content: center; margin: 40px 0 0; }
.tmblog-page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 12px;
    border: 1px solid var(--tm-line); border-radius: 12px;
    font-weight: 600; color: var(--tm-text);
}
.tmblog-page-link:hover { border-color: var(--tm-pink); color: var(--tm-pink); }
.tmblog-page-cur { background: var(--tm-pink); color: #fff !important; border-color: var(--tm-pink); }

.tmblog-site-footer {
    /* (2026-07-07 BOŞLUK DÜZELTMESİ) Eski margin-top:80px, üstteki
       .tmblog-main'in kendi padding-bottom:60px'i VE bu footer'ın
       padding-top:56px'i ile ÜST ÜSTE binince blog içeriği ile footer
       arasında ~325px'lik AŞIRI boşluk oluşuyordu (masaüstü). margin-top
       kaldırıldı: artık ayraç yalnızca main'in alt paddingi (60px) +
       footer'ın üst paddingi (56px) = dengeli ~116px. Mobil değerler
       aşağıdaki media-query'lerde ayrıca ayarlı. */
    margin-top: 0;
    background: linear-gradient(150deg, #1e2a4a 0%, #2c3e6b 60%, #3d3160 100%);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 56px 28px 22px;
}
.tmblog-footer-inner {
    max-width: 1240px; margin: 0 auto;
    display: grid; gap: 36px;
    /* (2026-07-07 ÇAKIŞMA DÜZELTMESİ) Footer'da 1 marka bloğu + değişken
       sayıda link kolonu (Sayfalarımız, Müşteri Paneli*, Politikalarımız,
       İletişim — *Müşteri Paneli koşullu) var. Eski grid `1.4fr 1fr 1fr`
       yalnızca 3 SÜTUNDU: 5 eleman 3 sütuna yerleşince 2. satıra taşıp
       marka bloğunun altındaki kolonlar link kolonlarıyla YAN YANA gelip
       hizasız/çakışık görünüyordu. Çözüm: marka bloğu SOL sabit sütun
       (minmax ile), link kolonları ise auto-fit ile TEK SATIRDA otomatik
       dizilen esnek sütunlar — 3 de olsa 4 de olsa çakışmadan sığar. */
    grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
    align-items: start;
}
.tmblog-footer-brand .tmblog-brand-text { font-size: 1.4rem; color: #fff; }
.tmblog-footer-brand .tmblog-brand-text em { color: var(--tm-pink); font-style: normal; }
.tmblog-footer-brand .tm-sub {
    font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
    color: rgba(255,255,255,.75); font-weight: 700; margin-top: 4px;
}
.tmblog-footer-brand p {
    color: rgba(255,255,255,.9); margin: 18px 0 18px;
    max-width: 380px; font-size: 14.5px;
}
.tmblog-footer-socials {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.tmblog-footer-col h4 {
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: #fff; font-weight: 800;
    margin: 6px 0 16px;
    white-space: nowrap; /* (2026-07-07) "MÜŞTERİ PANELİ" tek satırda kalsın */
}
.tmblog-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.tmblog-footer-col li a, .tmblog-footer-col li {
    color: #fff; font-size: 14.5px;
    transition: color .2s ease;
}
/* WCAG 2.5.5: Dokunma hedefi min 44×44px — footer linkleri
   inline olduktan için min-height + padding ile hedef alanı genişletildi. */
.tmblog-footer-col li a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 4px 0;
}
.tmblog-footer-col li a:hover { color: rgba(255,255,255,.8); }
.tmblog-footer-bottom {
    max-width: 1240px; margin: 40px auto 0;
    padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    color: rgba(255,255,255,.7); font-size: 13px;
}
/* ===== FOOTER MOBİL (900px ALTINDA) — GRID + AKORDIYON + ORDER ===== */
@media (max-width: 900px) {
    /* GRID LAYOUT */
    .tmblog-footer-inner { 
        grid-template-columns: 1fr 1fr;  /* 2 SÜTUN */
        gap: 24px;
        display: grid;
    }
    .tmblog-footer-brand { 
        grid-column: 1 / -1;  /* TAM GENİŞLİK */
        order: 0; /* ÜSTE KAL — ilk item */
    }
    
    /* SPACING */
    .tmblog-site-footer { padding: 40px 22px 18px; margin-top: 0; }
    .tmblog-footer-brand .tmblog-brand-text { font-size: 1.3rem; }
    .tmblog-footer-brand p { font-size: 13px; margin: 14px 0 14px; }
    .tmblog-footer-col h4 { font-size: 9px; letter-spacing: .12em; text-transform: none; font-weight: 700; margin: 4px 0 10px; }
    .tmblog-footer-col li a, .tmblog-footer-col li { font-size: 12.5px; }
    .tmblog-footer-bottom { margin: 28px auto 0; padding-top: 18px; }
    
    /* AKORDIYON H4 */
    .tmblog-footer-col h4 {
        cursor: pointer;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        padding-right: 20px;
        transition: color .2s ease;
    }

    /* (2026-07-07, kullanıcı isteği) BAŞLIK TEK SATIRA SIĞSIN, OK İLE
       ÇAKIŞMASIN: En uzun etiket "MÜŞTERİ PANELİ" — geniş harf aralığıyla
       (letter-spacing) 2 sütunlu ızgarada ok işaretinin üzerine biniyordu.
       Çözüm: (1) metin alanı ok için ayrılan boşluğu ASLA taşmasın diye
       min-width:0 + tek satır (nowrap) + gerekirse "…" ile kısaltma;
       (2) harf aralığı hafifçe düşürülür; (3) ok işareti küçültülüp
       daralarak metne daha çok yer bırakır. Tasarım/hiyerarşi korunur. */
    .tmblog-footer-col h4 {
        gap: 8px;
        letter-spacing: .06em;   /* .12em → .06em: aynı görünüm, daha az genişlik */
        white-space: nowrap;
        overflow: hidden;
    }
    /* Başlık metnini saran görünmez esnek kutu: taşan kısmı "…" yapar,
       ok işareti (::after) her zaman sağda net kalır. */
    .tmblog-footer-col h4 {
        min-width: 0;
    }
    
    /* OK İŞARETİ */
    .tmblog-footer-col h4::after {
        content: '';
        position: absolute;
        right: 0; top: 50%;
        transform: translateY(-50%) rotate(0deg);
        width: 11px; height: 11px;
        flex-shrink: 0;
        border-right: 2px solid rgba(255,255,255,.75);
        border-bottom: 2px solid rgba(255,255,255,.75);
        transition: transform .25s ease;
    }
    
    .tmblog-footer-col h4:hover { color: rgba(255,255,255,1); }
    
    /* UL LISTELER — KAPATILI DURUMDA */
    .tmblog-footer-col ul {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height .3s ease, opacity .25s ease;
    }
    
    /* İLETİŞİM P TAGLARI — KAPATILI DURUMDA */
    .tmblog-footer-col.tmblog-footer-contact > p {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin: 0 !important;
        transition: max-height .3s ease, opacity .25s ease;
    }
    
    /* UL LISTELER — AÇIK DURUMDA */
    .tmblog-footer-col.is-open ul {
        max-height: 600px;
        opacity: 1;
    }
    
    /* İLETİŞİM P TAGLARI — AÇIK DURUMDA */
    .tmblog-footer-col.tmblog-footer-contact.is-open > p {
        max-height: 600px;
        opacity: 1;
        margin: 0 0 6px !important;
    }
    
    /* OK İŞARETİ — AÇIK DURUMDA DÖNER */
    .tmblog-footer-col.is-open h4::after {
        transform: translateY(-50%) rotate(-135deg);
    }
    
    /* 2x2 GRID SIRALA — data attribute ile (conditional element'lerden etkilenmez) */
    .tmblog-footer-col[data-footer-section="pages"] { order: 1; } /* Sayfalarımız → SOL ÜST */
    .tmblog-footer-col[data-footer-section="contact"] { order: 2; } /* İletişim → SAĞ ÜST */
    .tmblog-footer-col[data-footer-section="customer"] { order: 3; } /* Müşteri Paneli → SOL ALT */
    .tmblog-footer-col[data-footer-section="policies"] { order: 4; } /* Politikalarımız → SAĞ ALT */
}

/* ===== SOSYAL MEDYA İKONLARI (BEYAZ) ===== */
.tmblog-footer-socials {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.tmblog-footer-socials .tmblog-share-btn,
.tmblog-footer-socials a {
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,.3) !important;
    background: transparent !important;
    padding: 8px 8px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.tmblog-footer-socials .tmblog-share-btn:hover,
.tmblog-footer-socials a:hover {
    background: rgba(255,255,255,.1) !important;
    border-color: rgba(255,255,255,.6) !important;
    transform: translateY(-2px);
}
.tmblog-footer-socials .tmblog-share-btn svg,
.tmblog-footer-socials a svg {
    width: 18px !important;
    height: 18px !important;
    color: #fff !important;
    flex-shrink: 0;
}
.tmblog-fab-wa {
    position: fixed; 
    right: 22px; 
    bottom: 22px; 
    z-index: 9999;  /* SADELİKLE TÜZÜ ÜSTÜNDE */
    background: #25D366; 
    color: #fff !important;
    width: 56px; 
    height: 56px; 
    border-radius: 50%;
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 14px 30px -10px rgba(37,211,102,.55);
    transition: transform .2s ease;
    border: 0 !important;
    outline: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

/* Tüm pseudo-element'leri disable et — badge, notification, mark, vb */
.tmblog-fab-wa::before,
.tmblog-fab-wa::after { 
    display: none !important;
}

.tmblog-fab-wa *::before,
.tmblog-fab-wa *::after {
    display: none !important;
}

.tmblog-fab-wa span,
.tmblog-fab-wa div {
    background: none !important;
    border: 0 !important;
}

.tmblog-fab-wa:hover { 
    transform: scale(1.05);
}

.tmblog-fab-wa svg { 
    width: 26px !important; 
    height: 26px !important; 
    display: block !important;
    color: #fff !important;
}

.tmblog-footer-contact-line {
    margin: 0 0 6px; font-size: 14px; color: #fff;
    display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tmblog-footer-contact-note {
    margin: 0 0 12px; font-size: 13px; color: rgba(255,255,255,.8); line-height: 1.5;
}
.tmblog-footer-call {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--tm-pink); color: #fff !important;
    /* WCAG 2.5.5: 6px → 12px dikey padding ile toplam yükseklik ~44px */
    padding: 12px 18px; border-radius: 999px;
    font-weight: 700; font-size: 13px; white-space: nowrap;
    min-height: 44px;
    transition: background .2s ease, transform .15s ease;
}
.tmblog-footer-call:hover { background: var(--tm-pink-dark); transform: translateY(-1px); }
@media (max-width: 600px) {
    .tmblog-footer-contact-line { font-size: 13px; gap: 6px; }
    .tmblog-footer-contact-note { font-size: 12px; margin: 0 0 10px; }
    .tmblog-footer-call { padding: 10px 14px; font-size: 12px; min-height: 40px; }
}
@media (max-width: 420px) {
    .tmblog-footer-contact-line { font-size: 12.5px; margin: 0 0 4px; }
    .tmblog-footer-contact-note { font-size: 11.5px; margin: 0 0 8px; }
    .tmblog-footer-call { padding: 8px 12px; font-size: 11.5px; min-height: 36px; gap: 4px; }
}
@media print {
    .tmblog-site-header, .tmblog-site-footer, .tmblog-share, .tmblog-fab-wa,
    .tmblog-share-cta { display: none !important; }
    .tmblog-article { padding: 0; }
}

/* =====================================================================
   MOBILE RESPONSIVE ENHANCEMENTS
   ===================================================================== */

/* Tablet ve altı: containers tighter, smooth horizontal padding */
@media (max-width: 900px) {
    .tmblog-container { padding: 0 18px; }
    .tmblog-section-head { margin: 36px 0 20px; }
    .tmblog-section-head h2 { font-size: 1.7rem; }
    .tmblog-article-top { padding: 14px 18px 0; }
    .tmblog-article { padding: 22px 18px 40px; }
    .tmblog-related { padding: 0 18px; margin-top: 48px; }
    .tmblog-site-footer { padding: 44px 18px 18px; margin-top: 0; }
    .tmblog-search-hero { padding: 24px 16px 20px; }
    .tmblog-search-hero h1 { font-size: 1.55rem; }
    /* Kategori değiştirme çipleri mobilde tek satır, parmakla kaydırılır */
    .tmblog-cat-switch {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; margin-top: 14px; padding-bottom: 4px;
    }
    .tmblog-cat-switch::-webkit-scrollbar { display: none; }

    /* İLETİŞİM — kolon yarı genişlikte (2x2 grid) olduğu için tek satıra sığsın */
    .tmblog-footer-contact-line { font-size: 11.5px; gap: 4px; margin: 0 0 5px; }
    .tmblog-footer-contact-note { font-size: 10.5px; margin: 0 0 8px; }
    .tmblog-footer-call { padding: 7px 11px; font-size: 11px; min-height: 34px; gap: 4px; }
}

/* Phone (≤600px): compact spacing, full-width buttons, larger touch targets */
@media (max-width: 600px) {
    body.tmblog-standalone { font-size: 15.5px; }

    /* Hero */
    .tmblog-hero { padding: 10px 16px 14px; }
    .tmblog-hero-inner { gap: 22px; }
    .tmblog-hero h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); margin-bottom: 16px; }
    .tmblog-hero p.tm-lead { font-size: 1rem; margin-bottom: 22px; }
    .tmblog-eyebrow { margin-bottom: 16px; font-size: 10.5px; letter-spacing: .22em; }
    .tmblog-eyebrow::before { width: 20px; }
    .tmblog-hero-cta { gap: 10px; flex-direction: column; align-items: stretch; }
    .tmblog-hero-cta .tm-btn { width: 100%; justify-content: center; }
    .tmblog-hero-art { aspect-ratio: 4 / 5; max-height: 56vh; border-radius: 18px; }
    .tmblog-hero-art .tm-badge { left: 12px; bottom: 12px; padding: 7px 14px; font-size: 10px; }
    /* KULLANICI BİLDİRDİ: Ana sayfadaki "floating" (mankenli) hero'da bu
       rozet mobilde tam genişlik kaplayıp sayfayı bloke ediyordu — bu,
       .tmh-hero-art-floating konteynerinin kendi flex/overflow
       ayarlarıyla çakışmasından kaynaklanıyordu. Burada AÇIKÇA ve
       ZORLAYICI (!important) şekilde küçük, SAĞA hizalı bir rozet
       olmaya zorlanıyor — hangi başka kural çakışırsa çakışsın kazanır. */
    .tmh-hero-art-floating .tm-badge {
        position: absolute !important;
        left: auto !important; right: 10px !important;
        /* KULLANICI BİLDİRDİ: Rozet alttan kesik görünüyordu — sebebi,
           .tmh-hero-art-floating konteynerinin mobildeki NEGATİF alt
           boşluğu (margin-bottom: -28px, görsel bir sonraki bölümle
           kasıtlı iç içe geçsin diye). Rozet o çakışma bölgesine
           denk gelince bir sonraki bölüm tarafından üstü örtülüyordu.
           "bottom" değerini bu boşluğu telafi edecek kadar artırıp
           rozeti görselin tamamen İÇİNDE, güvenli bir yere taşıyoruz. */
        bottom: 46px !important;
        top: auto !important;
        width: auto !important; max-width: 60% !important;
        display: inline-block !important;
        padding: 6px 12px !important; font-size: 9.5px !important;
        white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
        z-index: 8 !important;
    }

    /* Generic buttons — bigger touch targets */
    .tm-btn { padding: 14px 22px; font-size: 14.5px; min-height: 48px; }

    /* Topics chips (açılır buton içinde) */
    .tmblog-topics-dd { padding: 14px 16px 6px; }
    .tmblog-topics { padding: 12px 0 4px; gap: 8px; }
    .tmblog-chip { padding: 8px 13px; font-size: 12.5px; }

    /* Section heads */
    .tmblog-section-head { margin: 30px 0 16px; gap: 8px; }
    .tmblog-section-head h2 { font-size: 1.45rem; }
    .tmblog-section-head .tm-side { font-size: 10.5px; }

    /* Featured */
    .tmblog-featured { border-radius: 18px; }
    .tmblog-featured-body { padding: 22px 18px; gap: 12px; }
    .tmblog-featured h3 { font-size: 1.35rem; line-height: 1.22; }
    .tmblog-featured p { font-size: .95rem; }
    .tmblog-featured .tm-share-corner {
        top: 12px; right: 12px; width: 34px; height: 34px;
    }
    .tmblog-featured .tm-author-row {
        flex-direction: column; align-items: flex-start;
        gap: 6px; padding-top: 14px;
    }

    /* Cards */
    .tmblog-grid { gap: 18px; margin: 22px 0; }
    .tmblog-card { border-radius: 16px; }
    .tmblog-card-body { padding: 18px 18px 20px; gap: 8px; }
    .tmblog-card-title { font-size: 1.12rem; line-height: 1.3; }
    .tmblog-card-excerpt { font-size: 14px; }
    .tmblog-card-meta { font-size: 12px; padding-top: 12px; }

    /* Pagination — larger tap targets */
    .tmblog-pagination { gap: 6px; flex-wrap: wrap; margin: 32px 0 0; }
    .tmblog-page-link {
        min-width: 44px; height: 44px; padding: 0 14px;
        border-radius: 10px; font-size: 14.5px;
    }

    /* Article */
    .tmblog-breadcrumbs { font-size: 12.5px; padding: 8px 0; }
    .tmblog-article { padding: 18px 16px 36px; }
    .tmblog-article-title {
        font-size: clamp(1.6rem, 7vw, 2.1rem);
        margin-bottom: 16px;
    }
    .tmblog-article-excerpt { font-size: 1.02rem; margin-bottom: 20px; }
    .tmblog-article-meta-top { gap: 10px; font-size: 11.5px; margin-bottom: 18px; }
    .tmblog-article-head { margin-bottom: 22px; }
    .tmblog-author-bar {
        flex-direction: column; align-items: stretch; gap: 14px;
        padding: 16px 0;
    }
    .tmblog-author { gap: 10px; }
    .tmblog-author-avatar { width: 42px; height: 42px; }
    .tmblog-share { justify-content: flex-start; gap: 8px; }
    .tmblog-share-btn { width: 42px; height: 42px; }
    .tmblog-share-label { font-size: 10.5px; flex-basis: 100%; margin-bottom: 2px; }
    .tmblog-article-cover { margin: 22px 0 26px; border-radius: 16px; }
    .tmblog-article-body { font-size: 1rem; line-height: 1.78; }
    .tmblog-article-body h2 { font-size: 1.5rem; margin: 32px 0 12px; }
    .tmblog-article-body h3 { font-size: 1.22rem; margin: 24px 0 10px; }
    .tmblog-article-body blockquote { padding: 14px 18px; margin: 20px 0; }
    .tmblog-article-body img { margin: 14px 0; border-radius: 12px; }

    /* FAQ */
    .tmblog-faq { padding: 20px 18px; margin-top: 36px; border-radius: 16px; }
    .tmblog-faq h2 { font-size: 1.35rem; margin-bottom: 14px; }
    .tmblog-faq-item summary { font-size: 14.5px; padding: 4px 0; }

    /* Share CTA */
    .tmblog-share-cta { padding: 22px 18px; margin-top: 40px; border-radius: 16px; }
    .tmblog-share-cta h3 { font-size: 1.2rem; }
    .tmblog-share-cta p { font-size: .92rem; }

    /* Related */
    .tmblog-related { margin-top: 44px; }
    .tmblog-related h3 { font-size: 1.35rem; margin-bottom: 16px; }

    /* Footer */
    .tmblog-site-footer { padding: 38px 16px 18px; }
    .tmblog-footer-inner { gap: 26px; }
    .tmblog-footer-brand p { font-size: 13px; margin: 14px 0; }
    .tmblog-footer-col h4 { font-size: 9px; letter-spacing: .12em; text-transform: none; font-weight: 700; margin: 4px 0 10px; }
    .tmblog-footer-col li a, .tmblog-footer-col li { font-size: 12.5px; }
    .tmblog-footer-bottom {
        flex-direction: column; align-items: flex-start; gap: 8px;
        text-align: left; margin-top: 28px;
    }
    .tmblog-footer-newsletter .tmblog-newsletter-form { flex-direction: column; }
    .tmblog-footer-newsletter .tmblog-newsletter-form .tm-btn { width: 100%; justify-content: center; }

    /* Newsletter */
    .tmblog-newsletter { padding: 20px 18px; border-radius: 16px; }
    .tmblog-newsletter h4 { font-size: 1.18rem; }
    .tmblog-newsletter p { font-size: 13.5px; }
    .tmblog-newsletter-form .tm-btn { width: 100%; justify-content: center; min-height: 46px; }

    /* Floating WhatsApp — smaller on mobile, avoid covering content */
    .tmblog-fab-wa {
        right: 14px; bottom: 14px;
        width: 50px; height: 50px;
    }
    .tmblog-fab-wa svg { width: 22px; height: 22px; }

    /* Empty */
    .tmblog-empty { padding: 26px 18px; font-size: 14.5px; }

    /* TOC sidebar slightly tighter */
    .tmblog-article-aside { gap: 16px; }
    .tmblog-toc { padding: 14px 16px; }
}

/* Very small phones (≤380px) */
@media (max-width: 380px) {
    body.tmblog-standalone { padding-top: 118px; /* header 66px + arama 48px + 4px */ }
    body.tmblog-standalone.single-product { padding-top: 66px !important; }
    .tmblog-mobile-search { top: 66px; }
    .tmblog-header-inner { padding: 10px 12px; gap: 6px; }
    .tmblog-brand { gap: 8px; }
    .tmblog-brand-logo { width: 46px; height: 46px; }
    .tmblog-brand-text { font-size: 1.08rem; }
    .tmblog-brand-sub { display: none; }
    .tmblog-shop-btn { padding: 8px 10px; }
    .tmblog-hero h1 { font-size: 1.75rem; }
    .tmblog-section-head h2 { font-size: 1.3rem; }
    .tmblog-article-title { font-size: 1.5rem; }
}

/* Touch device tweaks — remove hover lift effects that feel sticky on touch */
@media (hover: none) {
    .tmblog-card:hover { transform: none; }
    .tmblog-card:hover .tmblog-card-img img { transform: none; }
    .tm-btn-primary:hover { transform: none; }
    .tmblog-shop-btn:hover { transform: none; }
    .tmblog-fab-wa:hover { transform: none; }
    .tmblog-side-item:hover { transform: none; }
    .tmblog-chip:hover { transform: none; }
}

/* Ensure all interactive elements meet 44px minimum touch target where possible */
@media (max-width: 900px) {
    .tmblog-faq-item summary { min-height: 44px; display: flex; align-items: center; }
    .tmblog-share-btn { min-width: 40px; min-height: 40px; }
}

/* =====================================================================
   Carousel — [tugra_blog_carousel] — otomatik kayan makale şeridi
   Mevcut .tmblog-card görselini kullanır, üstüne kaydırma davranışı ekler.
   ===================================================================== */
.tmblog-carousel {
    position: relative;
    margin: 28px 0;
    --tmc-visible: 3;
    width: 100% !important;
}
.tmblog-carousel[data-visible="1"] { --tmc-visible: 1; }
.tmblog-carousel[data-visible="2"] { --tmc-visible: 2; }
.tmblog-carousel[data-visible="3"] { --tmc-visible: 3; }
.tmblog-carousel[data-visible="4"] { --tmc-visible: 4; }
.tmblog-carousel-viewport {
    overflow: hidden;
    border-radius: var(--tm-radius);
    width: 100% !important;
    /* touch-action:pan-y: tarayıcıya "yatay jest = benim JS'im,
       dikey jest = sayfa scroll" demek — bu olmadan bazı mobil
       tarayıcılar yatay parmak hareketini tamamen kendine alıp
       JS touch olaylarını HİÇ iletmeyebiliyordu ("parmak hareketi
       algılanmıyor" şikayetinin CSS kökenli sebebi buydu). */
    touch-action: pan-y;
}
.tmblog-carousel-track {
    display: flex !important;
    gap: 26px;
    transition: transform .32s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
    margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.tmblog-carousel-slide {
    flex: 0 0 calc((100% - (var(--tmc-visible) - 1) * 26px) / var(--tmc-visible)) !important;
    min-width: 0;
    max-width: none !important;
    margin: 0 !important; float: none !important;
}
.tmblog-carousel-slide .tmblog-card {
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
}
.tmblog-carousel-slide .tmblog-card-img {
    flex-shrink: 0;
    width: 100% !important;
}
.tmblog-carousel-slide .tmblog-card-body {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column !important;
}
@media (max-width: 640px) {
    .tmblog-carousel-slide { flex: 0 0 calc((100% - var(--tmc-visible) * 12px + 12px) / var(--tmc-visible)) !important; }
}

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

/* Responsive: kaç kart aynı anda görünsün */
@media (max-width: 1080px) {
    .tmblog-carousel { --tmc-visible: 2 !important; }
}
@media (max-width: 640px) {
    .tmblog-carousel { --tmc-visible: 2 !important; }
    .tmblog-carousel-track { gap: 12px !important; }
    button.tmblog-carousel-arrow { width: 34px; height: 34px; font-size: 14px; }
    .tmblog-carousel-prev { left: 2px; }
    .tmblog-carousel-next { right: 2px; }
    .tmblog-carousel-viewport { border-radius: 16px; padding: 0 2px; }
    .tmblog-card-body { padding: 12px 12px 14px; gap: 6px; }
    .tmblog-card-title { font-size: 0.92rem; line-height: 1.25; }
    .tmblog-card-excerpt { font-size: 12px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
    .tmblog-card-link { font-size: 12px; }
    .tmblog-tag { font-size: 9px; padding: 3px 9px; }
}
@media (max-width: 380px) {
    .tmblog-carousel { --tmc-visible: 1 !important; }
}

/* Touch cihazlarda hover efektini kapat (mevcut davranışla tutarlı) */
@media (hover: none) {
    button.tmblog-carousel-arrow:hover { background: #fff !important; color: var(--tm-purple) !important; border-color: var(--tm-line) !important; }
}

/* =========================================================================
 * KULLANICI İSTEĞİ: Tekil ürün sayfasında, ekranın ALTINA yapışan
 * (fiyat + pembe "Seçenekler" butonu içeren) şerit kaldırılsın. Bu,
 * WoodMart temasının kendi "yapışkan sepete ekle" özelliği — bizim
 * eklentimizin bir parçası değil, ama tema HANGİ kesin class adını
 * kullanırsa kullansın yakalamak için birden fazla bilinen aday class
 * BİRDEN hedefleniyor (zararsız: var olmayan bir seçici hiçbir şey
 * yapmaz). Sadece tekil ürün sayfasında (body.single-product) etkili —
 * mağaza/kategori listelerindeki normal ürün kartlarına dokunmuyor.
 * ========================================================================= */
body.single-product .wd-sticky-cart,
body.single-product .sticky-add-to-cart,
body.single-product .sticky-atc-wrapper,
body.single-product .wd-action-btn-sticky,
body.single-product .woodmart-sticky-add-to-cart,
body.single-product [class*="sticky-add-to-cart"],
body.single-product [class*="sticky-cart"] {
    display: none !important;
}

/* KULLANICI İSTEĞİ: Tekil ürün sayfasında mobil arama çubuğu kaldırıldı
   (is_product() koşuluyla), ama o çubuğun KAPLADIĞI BOŞLUK temanın
   (WoodMart) kendi üst boşluk/margin ayarları nedeniyle BOŞ olarak
   kalmaya devam ediyordu — logo ile "Anasayfa / Mağaza / ..." gezinme
   yolu arasında gereksiz bir boşluk oluşuyordu. WPCode'daki "ÜST SLIDER
   LOGO BOŞLUĞUNU SIFIRLAMA" bölümüyle AYNI mantık, tekil ürün sayfasına
   uygulanmış hali. */
body.single-product .main-page-wrapper,
body.single-product .wd-page-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.single-product .woocommerce-breadcrumb {
    margin-top: 0 !important;
    padding-top: 12px !important;
}

/* =========================================================================
 * KULLANICI İSTEĞİ: "İlgili ürünler" gibi WoodMart'ın kendi ürün
 * kartlarındaki "Seçenekler" (varyasyonlu ürünlerde) / "Sepete Ekle"
 * butonunun metni, dar (2 sütunlu mobil) kart genişliğinde KIRPILIYORDU
 * ("SEÇENE..."). Bu, bizim eklentimizin bir parçası değil — WoodMart
 * temasının kendi buton stili. Metnin KIRPILMASINI önlemek için: satır
 * kaydırmaya/küçük yazı boyutuna izin veriyoruz, "overflow:hidden +
 * ellipsis" davranışını GEÇERSİZ KILIYORUZ. Birden fazla olası class adı
 * BİRDEN hedeflendi (zararsız: var olmayan seçici hiçbir şey yapmaz). */
.wd-add-btn, .woodmart-add-btn,
.product-grid-item .added_to_cart,
.product-grid-item a.add_to_cart_button,
.product-grid-item a.button.product_type_variable,
.product-grid-item a.button.product_type_simple {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    padding: 8px 6px !important;
    height: auto !important;
    text-align: center !important;
}

/* =====================================================================
   (2026-07-07 KULLANICI İSTEĞİ) YÜZEN WHATSAPP BALONUNU SAĞ ALTA AL
   ---------------------------------------------------------------------
   Sitedeki yeşil yüzen WhatsApp balonu, bu eklenti paketinin PARÇASI
   DEĞİL — ayrı bir WordPress WhatsApp eklentisi (büyük olasılıkla
   Joinchat, "Click to Chat / ht-ctc" veya "WP Social Chat") tarafından
   basılıyor ve varsayılan olarak SOL alt köşede duruyordu. O eklentiyi
   değiştirmeden, balonu her sayfada SAĞ alt köşeye taşımak için en yaygın
   eklentilerin sol-konumlu kapsayıcılarını burada sağa sabitliyoruz.
   Var olmayan seçiciler hiçbir şey yapmaz (zararsız), bu yüzden hangi
   eklenti kuruluysa o hedeflenmiş olur. tmblog.css her sayfada yüklendiği
   için (bkz. tmblog_load_footer) bu kural site genelinde geçerlidir. */

/* Joinchat (join.chat) — kapsayıcı .joinchat, genelde left ile konumlanır */
.joinchat,
.joinchat.joinchat--left,
.joinchat.joinchat__left {
    left: auto !important;
    right: 20px !important;
}
.joinchat .joinchat__button { margin: 0 !important; }

/* Click to Chat — Holithemes (ht-ctc): #ht-ctc-chat / .ht-ctc-chat */
#ht-ctc-chat.ht-ctc-chat-position-left,
.ht-ctc-chat.ht-ctc-chat-position-left,
#ht-ctc-chat,
.ht_ctc_style_1_div,
.ht-ctc.ht-ctc-style {
    left: auto !important;
    right: 20px !important;
}

/* WP Social Chat / diğerleri — sık kullanılan sabit kapsayıcı adları */
.wp-social-chat,
.ws-chat-box,
.wcp-wa-widget,
.wa-chat-box,
.floating-wpp,
.floating_wpp,
.whatsapp-chat-widget,
.wa-widget,
.wa-float,
.whatsapp-float {
    left: auto !important;
    right: 20px !important;
}

/* Bu paketin KENDİ (şu an HTML'i kullanılmayan) yüzen butonu da,
   ileride tekrar etkinleştirilirse SAĞDA kalsın diye açıkça sabitlenir. */
.tmblog-fab-wa {
    left: auto !important;
    right: 22px !important;
}
@media (max-width: 900px) {
    .joinchat, .ht-ctc.ht-ctc-style, #ht-ctc-chat,
    .wa-chat-box, .floating-wpp, .whatsapp-chat-widget,
    .whatsapp-float, .wa-float {
        right: 14px !important; left: auto !important;
    }
    .tmblog-fab-wa { right: 14px !important; left: auto !important; }
}