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

: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:  #5a5670;
    --tm-text-soft: #8480a0;
    --tm-line:      #e6e1ee;
    --tm-pink:      #e7195a;
    --tm-pink-dark: #c2154b;
    --tm-pink-soft: #fde2eb;
    --tm-yellow:    #f0b830;
    --tm-yellow-d:  #c98b15;
    --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; }

.tmblog-skip {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}
.tmblog-skip:focus {
    left: 16px; top: 12px; width: auto; height: auto;
    background: #fff; padding: 8px 14px; border-radius: 8px;
    box-shadow: var(--tm-shadow); z-index: 9999;
}

/* ===== Header ======================================================== */
.tmblog-site-header {
    position: sticky; top: 0; 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: 22px;
}
.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%;
    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: 22px;
    margin-left: 14px;
    flex-wrap: nowrap;
}
.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 {
    margin-left: auto;
    display: flex; align-items: center; gap: 8px;
    background: #f3eff7; border: 1px solid var(--tm-line);
    border-radius: 999px; padding: 9px 16px;
    width: 240px; height: 42px;
    box-sizing: border-box;
    transition: box-shadow .2s ease, border-color .2s ease, width .2s ease;
    flex-shrink: 0;
}
.tmblog-search:focus-within {
    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; 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: 1; }

.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-short { display: none; }

/* Hamburger toggle button — hidden on desktop */
button.tmblog-nav-toggle {
    display: none;
    width: 42px; height: 42px;
    align-items: center; justify-content: center;
    background: var(--tm-pink) !important; border: 1px solid var(--tm-pink) !important;
    border-radius: 12px; cursor: pointer; padding: 0;
    color: #fff !important; flex-shrink: 0;
    box-shadow: 0 6px 16px -8px rgba(231,25,90,.55);
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
button.tmblog-nav-toggle:hover { background: var(--tm-pink-dark) !important; border-color: var(--tm-pink-dark) !important; transform: translateY(-1px); }
button.tmblog-nav-toggle svg { width: 22px; height: 22px; stroke: #fff !important; color: #fff !important; }
button.tmblog-nav-toggle .tmico-close { display: none; }
button.tmblog-nav-toggle[aria-expanded="true"] .tmico-open { display: none; }
button.tmblog-nav-toggle[aria-expanded="true"] .tmico-close { display: block; }

@media (max-width: 1200px) {
    .tmblog-site-nav { gap: 16px; margin-left: 8px; }
    .tmblog-site-nav a { font-size: 14px; }
    .tmblog-search { width: 200px; }
}
@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-shop-btn { padding: 10px 16px; font-size: 13.5px; }
}
@media (max-width: 980px) {
    button.tmblog-nav-toggle { display: inline-flex; order: 5; margin-left: auto; }
    .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; }
    .tmblog-shop-btn { order: 3; }
    .tmblog-wishlist-link { order: 1; margin-left: auto; }
    .tmblog-cart-link { order: 2; margin-left: 6px; }
}
@media (max-width: 560px) {
    .tmblog-header-inner { padding: 10px 14px; gap: 8px; }
    .tmblog-brand-logo { width: 46px; height: 46px; }
    .tmblog-brand-text { font-size: 1.05rem; }
    .tmblog-brand-sub { font-size: 9px; letter-spacing: .18em; }
    .tmblog-shop-btn {
        padding: 9px 14px; font-size: 13px;
        gap: 6px;
    }
    .tmblog-shop-btn-full { display: none; }
    .tmblog-shop-btn-short { display: inline; }
    .tmblog-shop-btn svg { width: 16px; height: 16px; }
}

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

/* ===== Hero (index) ================================================== */
.tmblog-hero {
    position: relative;
    background:
        radial-gradient(1100px 360px at 96% -10%, #fde2eb 0%, transparent 60%),
        radial-gradient(900px 320px at -10% 110%, #fdf0d8 0%, transparent 55%),
        var(--tm-bg);
    padding: 64px 28px 60px;
    overflow: hidden;
}
.tmblog-hero-inner {
    max-width: 1240px; margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0,1.05fr) minmax(0,.9fr);
    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);
}
.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);
}

/* =========================================================================
 * "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;
    aspect-ratio: auto !important; max-height: none !important; align-self: stretch;
    display: flex; align-items: flex-end; justify-content: center;
    /* Figürün, sütun genişliğini biraz TAŞIp daha "iddialı" durmasını
       sağlar — referans sitedeki gibi kutuya hapsolmamış bir his verir. */
    margin: -10px -6% -28px;
}
.tmh-hero-art-floating img {
    width: 100%; height: auto; max-height: 78vh;
    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:auto/max-height:none HER ZAMAN kazanır. */
@media (max-width: 900px) {
    .tmh-hero-art-floating { margin: -10px 0 0; }
    .tmh-hero-art-floating img { max-height: 52vh; }
}

/* =========================================================================
 * 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;
}
.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: .55;
    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;
}
/* 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: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. */
@media (hover: none), (pointer: coarse) {
    .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; }
}

@media (max-width: 900px) {
    .tmblog-hero { padding: 36px 18px 40px; }
    .tmblog-hero-inner { grid-template-columns: 1fr; gap: 28px; }
    .tmblog-hero-art { order: -1; aspect-ratio: 4 / 5; max-height: 60vh; }
}

/* ===== Topic chips ================================================== */
.tmblog-topics {
    max-width: 1240px; margin: 0 auto; padding: 32px 28px 8px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    border-top: 1px solid var(--tm-line);
}
.tmblog-topics .tm-label {
    font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--tm-text-soft); font-weight: 700;
}
.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); }

/* ===== Main containers ============================================== */
.tmblog-main { background: var(--tm-bg); min-height: 60vh; padding-bottom: 60px; }
.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;
}
.tmblog-card-excerpt { color: var(--tm-text-dim); font-size: 14.5px; margin: 0; }
.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; color: var(--tm-pink);
    border: 1px solid var(--tm-pink); 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); }

/* ===== Article header (single) ====================================== */
.tmblog-article-top {
    background: var(--tm-bg-lav);
    padding: 18px 28px 0;
    border-bottom: 1px solid var(--tm-line);
}
.tmblog-breadcrumbs {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 13.5px; color: var(--tm-text-dim);
    padding: 10px 0;
}
.tmblog-breadcrumbs a { color: var(--tm-text-dim); transition: color .18s ease; }
.tmblog-breadcrumbs a:hover { color: var(--tm-pink); }
.tmblog-breadcrumbs .sep { color: var(--tm-text-soft); }
.tmblog-breadcrumbs .cur { color: var(--tm-text); font-weight: 600; }

.tmblog-article {
    max-width: 1100px; margin: 0 auto; padding: 32px 28px 60px;
}
.tmblog-article-head { margin-bottom: 32px; }
.tmblog-article-meta-top {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin: 0 0 24px; font-size: 12.5px; color: var(--tm-text-dim);
    letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
.tmblog-article-meta-top .dot { color: var(--tm-text-soft); }
.tmblog-article-meta-top .ico {
    display: inline-flex; align-items: center; gap: 6px;
}
.tmblog-article-meta-top svg { width: 14px; height: 14px; }
.tmblog-article-title {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.08;
    margin: 0 0 22px; color: var(--tm-purple);
    letter-spacing: -0.02em;
}
.tmblog-article-excerpt {
    font-size: 1.12rem; color: var(--tm-text-dim);
    max-width: 800px; margin: 0 0 28px;
}

.tmblog-author-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    padding: 18px 0; border-top: 1px solid var(--tm-line);
    border-bottom: 1px solid var(--tm-line);
}
.tmblog-author {
    display: flex; align-items: center; gap: 12px;
}
.tmblog-author-avatar {
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, var(--tm-pink), var(--tm-yellow));
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-family: var(--serif); font-size: 1.1rem;
    flex-shrink: 0;
}
.tmblog-author-avatar-photo {
    object-fit: cover; object-position: center; background: var(--tm-line);
}
.tmblog-author-name { font-weight: 700; color: var(--tm-text); font-size: 14.5px; }
.tmblog-author-role { font-size: 12.5px; color: var(--tm-text-soft); }

/* Share bar — her ikon kendi marka renginde, her zaman dolgun (sadece hover'da değil) */
.tmblog-share {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.tmblog-share-label {
    font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
    color: var(--tm-text-soft); font-weight: 700; margin-right: 4px;
}
.tmblog-share-btn {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex !important; align-items: center; justify-content: center;
    background: #f4f1f8 !important; border: 1px solid transparent;
    color: var(--tm-text-dim) !important; cursor: pointer;
    transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, opacity .2s ease;
    text-decoration: none !important;
    flex-shrink: 0;
}
.tmblog-share-btn svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }
.tmblog-share-btn:hover { transform: translateY(-3px) scale(1.06); box-shadow: var(--tm-shadow); opacity: .92; }
.tmblog-share-btn:active { transform: translateY(-1px) scale(.97); }

.tmblog-share-btn.tw   { background: #000 !important;     color: #fff !important; }
.tmblog-share-btn.fb   { background: #1877F2 !important;  color: #fff !important; }
.tmblog-share-btn.li   { background: #0A66C2 !important;  color: #fff !important; }
.tmblog-share-btn.wa   { background: #25D366 !important;  color: #fff !important; }
.tmblog-share-btn.tg   { background: #229ED9 !important;  color: #fff !important; }
.tmblog-share-btn.pin  { background: #E60023 !important;  color: #fff !important; }
.tmblog-share-btn.yt   { background: #FF0000 !important;  color: #fff !important; }
.tmblog-share-btn.ig   {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
    color: #fff !important;
}
.tmblog-share-btn.em   { background: var(--tm-purple) !important; color: #fff !important; }
.tmblog-share-btn.cp   { background: #fff !important; color: var(--tm-text-dim) !important; border-color: var(--tm-line); }
.tmblog-share-btn.cp:hover { background: var(--tm-pink) !important; color: #fff !important; }
.tmblog-share-btn.cp.copied { background: #15803d !important; color: #fff !important; }

@media (max-width: 480px) {
    .tmblog-share-btn { width: 36px; height: 36px; }
}

/* Cover */
.tmblog-article-cover {
    margin: 32px 0 36px;
    border-radius: 22px; overflow: hidden;
    box-shadow: 0 30px 70px -40px rgba(43,31,90,.45);
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #f3eff7, #fde2eb);
}
.tmblog-article-cover img {
    width: 100% !important; height: 100% !important;
    object-fit: cover; object-position: center;
    display: block; max-width: 100%;
}

@media (max-width: 600px) {
    .tmblog-article-cover { aspect-ratio: 4 / 3; }
}

/* Article body typography */
.tmblog-article-body { font-size: 1.06rem; line-height: 1.85; color: var(--tm-text); max-width: 760px; margin: 0 auto; }
.tmblog-article-body h2 {
    font-family: var(--serif); font-weight: 600;
    font-size: 1.85rem; margin: 48px 0 16px; color: var(--tm-purple);
    line-height: 1.2; letter-spacing: -0.01em;
}
.tmblog-article-body h3 {
    font-family: var(--serif); font-weight: 600;
    font-size: 1.4rem; margin: 32px 0 12px; color: var(--tm-purple);
}
.tmblog-article-body p { margin: 0 0 18px; }
.tmblog-article-body ul, .tmblog-article-body ol { margin: 0 0 18px; padding-left: 22px; }
.tmblog-article-body li { margin-bottom: 8px; }
.tmblog-article-body a { color: var(--tm-pink); text-decoration: underline; text-underline-offset: 3px; }
.tmblog-article-body a:hover { color: var(--tm-pink-dark); }
.tmblog-article-body blockquote {
    margin: 28px 0; padding: 18px 26px;
    border-left: 4px solid var(--tm-pink);
    background: var(--tm-bg-mute); border-radius: 10px;
    font-style: italic; color: var(--tm-text-dim);
}
.tmblog-article-body img {
    border-radius: 14px; margin: 18px auto;
    display: block;
    max-width: 100%; width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
}
.tmblog-article-body figure { margin: 18px 0; }
.tmblog-article-body figure img { margin: 0 auto; }
.tmblog-article-body figcaption {
    text-align: center; font-size: .85rem; color: var(--tm-text-soft);
    margin-top: 8px;
}
.tmblog-article-body strong { color: var(--tm-purple); }

/* FAQ */
.tmblog-faq {
    max-width: 800px; margin: 48px auto 0;
    padding: 28px; background: var(--tm-bg-mute);
    border-radius: 18px; border: 1px solid var(--tm-line);
}
.tmblog-faq h2 {
    font-family: var(--serif); font-size: 1.6rem;
    margin: 0 0 18px; color: var(--tm-purple);
}
.tmblog-faq-item {
    border-bottom: 1px solid var(--tm-line); padding: 14px 0;
}
.tmblog-faq-item:last-child { border-bottom: 0; }
.tmblog-faq-item summary {
    cursor: pointer; font-weight: 700; color: var(--tm-text);
    list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tmblog-faq-item summary::after {
    content: "+"; font-size: 1.3rem; color: var(--tm-pink); font-weight: 700;
}
.tmblog-faq-item[open] summary::after { content: "−"; }
.tmblog-faq-item div { margin-top: 10px; color: var(--tm-text-dim); }

/* Share bottom CTA */
.tmblog-share-cta {
    max-width: 760px; margin: 56px auto 0;
    padding: 28px; border-radius: 18px;
    background: linear-gradient(135deg, var(--tm-bg-lav), #fff);
    border: 1px solid var(--tm-line);
    display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.tmblog-share-cta h3 {
    font-family: var(--serif); margin: 0; font-size: 1.4rem; color: var(--tm-purple);
}
.tmblog-share-cta p { margin: 0; color: var(--tm-text-dim); font-size: .98rem; }
.tmblog-share-cta .tmblog-share { justify-content: center; }

.tmblog-related {
    max-width: 1100px; margin: 64px auto 0; padding: 0 28px;
}
.tmblog-related h3 {
    font-family: var(--serif); font-size: 1.6rem; color: var(--tm-purple);
    margin: 0 0 22px;
}

/* Search results */
.tmblog-search-hero {
    background: var(--tm-bg-lav); padding: 40px 28px;
    border-bottom: 1px solid var(--tm-line);
}
.tmblog-search-hero .inner { max-width: 1100px; margin: 0 auto; }
.tmblog-search-hero h1 {
    font-family: var(--serif); font-size: 2.2rem; margin: 6px 0 0;
    color: var(--tm-purple);
}

/* ===== Footer ======================================================= */
.tmblog-site-footer {
    margin-top: 80px;
    background: var(--tm-bg-lav);
    border-top: 1px solid var(--tm-line);
    padding: 56px 28px 22px;
}
.tmblog-footer-inner {
    max-width: 1240px; margin: 0 auto;
    display: grid; gap: 36px;
    grid-template-columns: 1.4fr 1fr 1fr;
    align-items: start;
}
.tmblog-footer-brand .tmblog-brand-text { font-size: 1.4rem; }
.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: var(--tm-text-soft); font-weight: 700; margin-top: 4px;
}
.tmblog-footer-brand p {
    color: var(--tm-text-dim); 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: .26em; text-transform: uppercase;
    color: var(--tm-text-soft); font-weight: 800;
    margin: 6px 0 16px;
}
.tmblog-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tmblog-footer-col li a, .tmblog-footer-col li {
    color: var(--tm-text); font-size: 14.5px;
    transition: color .2s ease;
}
.tmblog-footer-col li a:hover { color: var(--tm-pink); }
.tmblog-footer-bottom {
    max-width: 1240px; margin: 40px auto 0;
    padding-top: 22px; border-top: 1px solid var(--tm-line);
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    color: var(--tm-text-soft); font-size: 13px;
}
@media (max-width: 900px) {
    .tmblog-footer-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ===== Floating actions ============================================= */
.tmblog-fab-wa {
    position: fixed; right: 22px; bottom: 22px; z-index: 70;
    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;
}
.tmblog-fab-wa:hover { transform: scale(1.05); }
.tmblog-fab-wa svg { width: 26px; height: 26px; }

/* ===== Article 3-col Layout (TOC + content + sidebar) ================== */
.tmblog-article-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 280px;
    gap: 40px;
    margin: 0 auto;
    align-items: start;
}
.tmblog-article-layout .tmblog-article-body { margin: 0; max-width: none; }
.tmblog-article-aside { display: flex; flex-direction: column; gap: 22px; }
.tmblog-article-aside-left { position: sticky; top: 96px; }
.tmblog-article-aside-right { position: sticky; top: 96px; }
@media (max-width: 1100px) {
    .tmblog-article-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
    .tmblog-article-aside-left { display: none; }
}
@media (max-width: 900px) {
    .tmblog-article-layout { grid-template-columns: 1fr; }
    .tmblog-article-aside-right { position: static; }
}

/* TOC */
.tmblog-toc {
    background: #fff; border: 1px solid var(--tm-line);
    border-radius: 16px; padding: 16px 18px;
    font-size: 14px;
}
.tmblog-toc-head {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
    color: var(--tm-text-soft); font-weight: 800;
    margin-bottom: 10px;
}
.tmblog-toc-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
    max-height: 60vh; overflow-y: auto; padding-right: 6px;
}
.tmblog-toc-list li a {
    color: var(--tm-text); padding: 6px 10px; border-radius: 8px;
    display: block; line-height: 1.35;
    border-left: 3px solid transparent;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tmblog-toc-list li.lvl-3 a { padding-left: 22px; font-size: 13px; color: var(--tm-text-dim); }
.tmblog-toc-list li a:hover { background: var(--tm-bg-mute); color: var(--tm-pink); border-left-color: var(--tm-pink); }
.tmblog-toc-list li a.active { background: var(--tm-bg-mute); color: var(--tm-pink); border-left-color: var(--tm-pink); font-weight: 700; }

/* Newsletter widget — soft yellow/orange tone matching reference */
.tmblog-newsletter {
    border-radius: 18px;
    padding: 22px 22px 20px;
    background: linear-gradient(160deg, #fceabb 0%, #f8b88b 100%);
    color: var(--tm-purple);
    box-shadow: 0 10px 30px -18px rgba(248, 184, 139, .65);
}
.tmblog-newsletter .tm-eyebrow-small {
    display: inline-block; font-size: 10.5px; letter-spacing: .24em;
    text-transform: uppercase; color: var(--tm-purple); font-weight: 800;
    background: rgba(255,255,255,.4); padding: 4px 10px; border-radius: 999px;
}
.tmblog-newsletter h4 {
    font-family: var(--serif); font-weight: 600;
    font-size: 1.3rem; margin: 10px 0 8px; line-height: 1.2;
}
.tmblog-newsletter p { font-size: 14px; margin: 0 0 14px; color: rgba(43,31,90,.85); }
.tmblog-newsletter-form {
    display: flex; flex-direction: column; gap: 10px; margin: 0;
}
.tmblog-newsletter-form input[type="email"] {
    border: 1px solid rgba(43,31,90,.18);
    background: #fff;
    border-radius: 999px;
    padding: 11px 16px;
    font: inherit; color: var(--tm-text); outline: 0;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.tmblog-newsletter-form input[type="email"]:focus {
    border-color: var(--tm-purple);
    box-shadow: 0 0 0 4px rgba(43,31,90,.12);
}
.tmblog-newsletter-form .tm-btn {
    background: var(--tm-purple) !important; padding: 11px 18px;
    box-shadow: 0 8px 22px -10px rgba(43,31,90,.6);
}
.tmblog-newsletter-form .tm-btn:hover { background: #1d1542 !important; }
.tm-form-note { display: block; margin-top: 8px; font-size: 11.5px; color: rgba(43,31,90,.7); }
.tm-form-msg { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; }
.tm-form-success { background: rgba(21, 128, 61, .12); color: #15803d; }
.tm-form-error   { background: rgba(220, 38, 38, .12); color: #b91c1c; }

/* Footer newsletter variant */
.tmblog-footer-newsletter .tmblog-newsletter-form {
    flex-direction: row; flex-wrap: wrap;
}
.tmblog-footer-newsletter .tmblog-newsletter-form input[type="email"] {
    flex: 1; min-width: 180px; border-color: var(--tm-line);
}
.tmblog-footer-newsletter .tmblog-newsletter-form .tm-btn {
    background: var(--tm-pink) !important; padding: 11px 18px;
    box-shadow: 0 8px 22px -10px rgba(231,25,90,.6);
}
.tmblog-footer-newsletter .tmblog-newsletter-form .tm-btn:hover { background: var(--tm-pink-dark) !important; }

/* Sidebar related list */
.tmblog-side-list h5 {
    font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
    color: var(--tm-text-soft); font-weight: 800;
    margin: 0 0 14px;
}
.tmblog-side-item {
    display: block; padding: 12px 14px; border-radius: 12px;
    background: #fff; border: 1px solid var(--tm-line);
    margin-bottom: 10px;
    transition: border-color .2s ease, transform .15s ease;
}
.tmblog-side-item:hover { border-color: var(--tm-pink-soft); transform: translateY(-1px); }
.tmblog-side-item .tmblog-tag-mini {
    display: inline-block;
    font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--tm-pink); font-weight: 700; margin-bottom: 6px;
}
.tmblog-side-item .t {
    display: block; color: var(--tm-purple); font-family: var(--serif);
    font-size: 15px; font-weight: 600; line-height: 1.3; margin-bottom: 6px;
}
.tmblog-side-item .m { color: var(--tm-text-soft); font-size: 12px; }

/* ===== Footer kolonları (Sayfalarımız / Müşteri Paneli / Politikalarımız / İletişim) === */
.tmblog-footer-inner { grid-template-columns: 1.15fr .85fr .85fr .85fr 1.05fr; }
@media (max-width: 1300px) {
    .tmblog-footer-inner { grid-template-columns: 1.2fr 1fr 1fr; }
}
@media (max-width: 1100px) {
    .tmblog-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    /* GÜZELLEŞTİRME: Önceden tüm bloklar (Marka + Sayfalarımız + Müşteri
       Paneli + Politikalarımız + İletişim) tek tek alt alta diziliyordu —
       dağınık görünüyordu. Artık Marka bloğu (logo+açıklama) tam genişlikte,
       altındaki 4 sütun ise 2'şerli (2x2) düzenli bir ızgarada gösteriliyor. */
    .tmblog-footer-inner { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
    .tmblog-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
    /* Çok dar ekranlarda (örn. küçük telefonlar) 2 sütun bile sıkışık
       kalabilir — bu boyutta tek sütuna geri dönülür. */
    .tmblog-footer-inner { grid-template-columns: 1fr; }
}
.tmblog-footer-contact-line {
    margin: 0 0 6px; font-size: 14.5px; color: var(--tm-text);
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.tmblog-footer-contact-note {
    margin: 0 0 12px; font-size: 13px; color: var(--tm-text-soft); line-height: 1.5;
}
.tmblog-footer-call {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--tm-pink); color: #fff !important;
    padding: 6px 14px; border-radius: 999px;
    font-weight: 700; font-size: 13px; white-space: nowrap;
    transition: background .2s ease, transform .15s ease;
}
.tmblog-footer-call:hover { background: var(--tm-pink-dark); transform: translateY(-1px); }
@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: 56px; }
    .tmblog-search-hero { padding: 28px 18px; }
    .tmblog-search-hero h1 { font-size: 1.7rem; }
}

/* 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: 28px 16px 32px; }
    .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; }

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

    /* Topics chips */
    .tmblog-topics { padding: 22px 16px 6px; gap: 10px; }
    .tmblog-topics .tm-label { display: block; flex-basis: 100%; margin-bottom: -4px; }
    .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: 14px; margin: 14px 0; }
    .tmblog-footer-col h4 { font-size: 10.5px; margin: 4px 0 12px; }
    .tmblog-footer-col li a, .tmblog-footer-col li { font-size: 14px; }
    .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) {
    .tmblog-header-inner { padding: 10px 12px; gap: 6px; }
    .tmblog-brand { gap: 8px; }
    .tmblog-brand-logo { width: 40px; height: 40px; }
    .tmblog-brand-text { font-size: 1rem; }
    .tmblog-brand-sub { display: none; }
    .tmblog-shop-btn { padding: 9px 12px; }
    .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;
}
.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; }
}