/* =====================================================================
   Tuşhan UI — Çerez Yönetimi + İletişim / Teklif Widget'ı + İçindekiler
   Kendi içinde kapalıdır; tüm sınıflar "tsh-" ön eki ile başlar,
   mevcut tema CSS'i ile çakışmaz.
   ===================================================================== */

.tsh {
    --tsh-accent: #ed212c;
    --tsh-accent-dark: #c4141e;
    --tsh-ink: #141637;
    --tsh-ink-soft: #4a4f6b;
    --tsh-muted: #898da9;
    --tsh-line: #e7e9f0;
    --tsh-surface: #fff;
    --tsh-radius: 14px;
    --tsh-shadow: 0 18px 48px rgba(20, 22, 55, .18);
    --tsh-wa: #25d366;

    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--tsh-ink);
    line-height: 1.55;
    box-sizing: border-box;
}
.tsh *, .tsh *::before, .tsh *::after { box-sizing: inherit; }
.tsh button { font-family: inherit; cursor: pointer; }

.tsh-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   1) ÇEREZ PANELİ — sol alt, ayarlar panel içinde açılır
   ===================================================================== */
.tsh-cookie {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 99990;
    width: 380px;
    max-width: calc(100vw - 40px);
    background: var(--tsh-surface);
    border: 1px solid var(--tsh-line);
    border-radius: var(--tsh-radius);
    box-shadow: var(--tsh-shadow);
    padding: 22px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: none;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
.tsh-cookie.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.tsh-cookie-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tsh-cookie-head svg { flex: 0 0 auto; color: var(--tsh-accent); }
.tsh-cookie-title { font-size: 16px; font-weight: 600; margin: 0; }
.tsh-cookie-text { font-size: 13.5px; color: var(--tsh-ink-soft); margin: 0 0 14px; }
.tsh-cookie-text a { color: var(--tsh-accent); text-decoration: underline; }

/* "Ayarları aç" — düz metin link değil, belirgin buton */
.tsh-cookie-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; margin-bottom: 14px;
    padding: 11px 15px;
    background: #f6f7fa;
    border: 1px solid var(--tsh-line);
    border-radius: 10px;
    font-size: 13.5px; font-weight: 500; color: var(--tsh-ink);
    transition: background-color .18s ease, border-color .18s ease;
}
.tsh-cookie-toggle:hover { background: #eef0f6; border-color: var(--tsh-muted); }
.tsh-cookie-toggle-ico {
    width: 8px; height: 8px; flex: 0 0 auto;
    border-right: 2px solid var(--tsh-muted); border-bottom: 2px solid var(--tsh-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}
.tsh-cookie.is-expanded .tsh-cookie-toggle-ico { transform: rotate(-135deg) translate(-2px, -2px); }

.tsh-cookie-cats { display: none; margin: 0 0 16px; padding: 0; list-style: none; }
.tsh-cookie.is-expanded .tsh-cookie-cats { display: block; }

.tsh-cat {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--tsh-line);
}
.tsh-cat:first-child { border-top: 1px solid var(--tsh-line); }
.tsh-cat-name { font-size: 14px; font-weight: 600; margin: 0 0 3px; }
.tsh-cat-desc { font-size: 12.5px; color: var(--tsh-muted); margin: 0; }
.tsh-cat-locked { font-size: 11.5px; color: var(--tsh-muted); white-space: nowrap; margin-top: 4px; }

.tsh-switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; margin-top: 2px; }
.tsh-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tsh-switch-track {
    display: block; width: 100%; height: 100%;
    background: #d3d6e2; border-radius: 999px;
    transition: background-color .2s ease; pointer-events: none;
}
.tsh-switch-track::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; background: #fff; border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s ease;
}
.tsh-switch input:checked ~ .tsh-switch-track { background: var(--tsh-accent); }
.tsh-switch input:checked ~ .tsh-switch-track::after { transform: translateX(20px); }
.tsh-switch input:focus-visible ~ .tsh-switch-track { outline: 2px solid var(--tsh-ink); outline-offset: 2px; }

.tsh-cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.tsh-btn {
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 11px 18px;
    font-size: 13.5px;
    font-weight: 500;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
    white-space: nowrap;
    text-align: center;
}
.tsh-btn-primary { background: var(--tsh-accent); color: #fff; flex: 1 1 auto; }
.tsh-btn-primary:hover { background: var(--tsh-accent-dark); }
.tsh-btn-ghost { background: transparent; color: var(--tsh-ink-soft); border-color: var(--tsh-line); flex: 1 1 auto; }
.tsh-btn-ghost:hover { border-color: var(--tsh-muted); color: var(--tsh-ink); }

/* Footer'daki "Çerez Yönetimi" bağlantısının solundaki ayraç.
   Tema, ayracı ".footer-link-7 a:first-child::before" ile basıyor;
   aynı görünümü yakalamak için aynı biçim kullanılır. */
.footer-link-7 a[data-tsh="open-prefs"] { position: relative; }
.footer-link-7 a[data-tsh="open-prefs"]::before {
    content: "/";
    position: absolute;
    top: 50%;
    left: -14px;
    transform: translateY(-50%);
    font-size: 11px;
}

/* =====================================================================
   2) SAĞ ALT EYLEM BUTONLARI — Teklif İste + İletişim
   ===================================================================== */
/* Tema, yukarı-çık butonunu 60x60 basıyordu ama kapsayıcısı 44x44'tü;
   buton kapsayıcıdan taşıyor ve dikey eksen kayıyordu. İkisi de
   48x48'e sabitlenip aynı sağ kenara hizalanır. */
:root {
    --tsh-dock-right: 40px;   /* sütundaki her öğenin sağ kenarı */
    --tsh-dock-size: 46px;    /* yuvarlak butonların çapı / pill yüksekliği */
    --tsh-dock-gap: 10px;
    /* Aşağıdan yukarı: Mesaj Yazın → İletişim → Teklif İste */
    --tsh-dock-kodes: 20px;
    --tsh-dock-alt: 76px;
}

/* --- Ajans form widget'i: bizim butonlarla ayni dile getirilir --- */
/* Kendi <style> bloğunu sayfaya sonradan enjekte ettiği için !important şart. */
button.kodes-widget-button {
    position: fixed !important;
    right: var(--tsh-dock-right) !important;
    bottom: var(--tsh-dock-kodes) !important;
    left: auto !important;
    width: auto !important;
    height: var(--tsh-dock-size) !important;
    min-width: 0 !important;
    padding: 0 20px 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    background: #fff !important;
    color: var(--tsh-ink) !important;
    border: 1px solid var(--tsh-line) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 22px rgba(20, 22, 55, .16) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0 !important;             /* "BİZE ULAŞIN" metnini gizler */
    font-weight: 500 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    transition: transform .18s ease, border-color .18s ease !important;
}
button.kodes-widget-button:hover {
    transform: translateY(-2px) !important;
    border-color: var(--tsh-muted) !important;
    background: #fff !important;
}
/* Gizlenen metnin yerine kendi etiketimiz */
button.kodes-widget-button::after {
    content: 'Mesaj Yazın';
    font-size: 14px;
    font-weight: 500;
    color: var(--tsh-ink);
}
button.kodes-widget-button svg {
    width: 17px !important; height: 17px !important;
    flex: 0 0 auto !important;
    color: var(--tsh-ink) !important;
}
/* Widget'in kendi baloncuk ipucu sütun düzeninde yer kaplamasin */
button.kodes-widget-button .kodes-bubble-tooltip { display: none !important; }

.tsh-dock {
    position: fixed;
    right: var(--tsh-dock-right);
    bottom: var(--tsh-dock-alt);
    z-index: 99980;
    display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}

.tsh-dock-btn {
    display: inline-flex; align-items: center; gap: 9px;
    height: var(--tsh-dock-size); padding: 0 20px 0 14px;
    border: 1px solid transparent; border-radius: 999px;
    font-family: inherit; font-size: 14px; font-weight: 500;
    white-space: nowrap; text-decoration: none;
    box-shadow: 0 8px 22px rgba(20, 22, 55, .16);
    transition: background-color .18s ease, transform .18s ease, border-color .18s ease;
}
.tsh-dock-btn:hover { transform: translateY(-2px); }

.tsh-dock-btn--teklif { background: var(--tsh-accent); color: #fff; }
.tsh-dock-btn--teklif:hover { background: var(--tsh-accent-dark); color: #fff; }

.tsh-dock-btn--iletisim { background: #fff; color: var(--tsh-ink); border-color: var(--tsh-line); }
.tsh-dock-btn--iletisim:hover { border-color: var(--tsh-muted); color: var(--tsh-ink); }

.tsh-dock-ico { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; }
.tsh-dock-btn--teklif .tsh-dock-ico { background: rgba(255,255,255,.18); border-radius: 50%; }
.tsh-dock-btn--iletisim .tsh-dock-ico { background: #f4f5f9; border-radius: 50%; color: var(--tsh-ink); }

/* Kapalı/açık simge değişimi */
.tsh-fab .tsh-fab-x { display: none; }
.tsh-fab.is-open .tsh-fab-x { display: block; }
.tsh-fab.is-open .tsh-fab-icon { display: none; }

.tsh-fab { position: relative; }

/* İletişim kanalları — butonun üstünde açılır */
.tsh-fab-menu {
    position: absolute; right: 0; bottom: calc(100% + 12px);
    display: flex; flex-direction: column; align-items: flex-end; gap: 9px;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.tsh-fab.is-open .tsh-fab-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.tsh-fab-item {
    display: flex; align-items: center; gap: 11px;
    background: #fff; color: var(--tsh-ink);
    border: 1px solid var(--tsh-line); border-radius: 999px;
    padding: 8px 17px 8px 9px;
    font-size: 13.5px; font-weight: 500; text-decoration: none;
    box-shadow: 0 8px 22px rgba(20, 22, 55, .14);
    white-space: nowrap;
    transition: transform .18s ease, border-color .18s ease;
}
.tsh-fab-item:hover { transform: translateX(-3px); border-color: var(--tsh-muted); color: var(--tsh-ink); }

.tsh-fab-ico {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: #f4f5f9; color: var(--tsh-ink); flex: 0 0 auto;
}
.tsh-fab-item--wa .tsh-fab-ico { background: rgba(37, 211, 102, .12); color: var(--tsh-wa); }

/* =====================================================================
   3) MODAL (teklif formu)
   ===================================================================== */
.tsh-modal {
    position: fixed; inset: 0; z-index: 99995;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(20, 22, 55, .55);
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.tsh-modal.is-open { opacity: 1; visibility: visible; }

.tsh-modal-box {
    background: var(--tsh-surface);
    border-radius: 18px;
    width: 100%; max-width: 580px;
    max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
    box-shadow: var(--tsh-shadow);
    transform: translateY(18px) scale(.98);
    transition: transform .25s ease;
    overflow: hidden;
}
.tsh-modal.is-open .tsh-modal-box { transform: translateY(0) scale(1); }

.tsh-modal-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 22px 24px;
    background: var(--tsh-ink); color: #fff;
}
/* Tema, h2 ve p için kendi koyu metin rengini dayatıyor; koyu zeminli
   başlıkta metin okunmaz hâle geliyordu. Renk burada açıkça verilir. */
.tsh-modal-head .tsh-modal-title,
.tsh-modal-head .tsh-modal-sub { color: #fff; }
.tsh-modal-title { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.tsh-modal-sub { font-size: 13px; margin: 0; opacity: .8; }
.tsh-modal-body { padding: 4px 24px 20px; overflow-y: auto; }
.tsh-modal-foot {
    padding: 16px 24px 22px;
    border-top: 1px solid var(--tsh-line);
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
}
.tsh-close {
    background: none; border: 0; padding: 4px; line-height: 0;
    color: currentColor; opacity: .7; border-radius: 8px; flex: 0 0 auto;
}
.tsh-close:hover { opacity: 1; }

/* =====================================================================
   4) TEKLİF FORMU
   ===================================================================== */
.tsh-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 18px; }
.tsh-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tsh-field--full { grid-column: 1 / -1; }
.tsh-label { font-size: 12.5px; font-weight: 500; color: var(--tsh-ink-soft); }
.tsh-label span { color: var(--tsh-accent); }

/* Tüm alanlar aynı yükseklikte olsun diye ortak ölçü.
   Tema, genel "input" kuralıyla 54px yükseklik / 2px kenarlık / 29px iç
   boşluk dayatıyordu; seçici ağırlığı bilerek yükseltildi. */
.tsh input.tsh-input, .tsh select.tsh-select, .tsh textarea.tsh-textarea {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--tsh-line); border-radius: 10px;
    font-family: inherit; font-size: 14px; color: var(--tsh-ink);
    background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease;
    appearance: none; -webkit-appearance: none;
}
.tsh textarea.tsh-textarea { height: auto; min-height: 104px; padding: 12px 14px; resize: vertical; line-height: 1.5; }

.tsh .tsh-input::placeholder, .tsh .tsh-textarea::placeholder { color: #a8adc4; }

.tsh input.tsh-input:focus, .tsh select.tsh-select:focus, .tsh textarea.tsh-textarea:focus {
    outline: 0; border-color: var(--tsh-accent);
    box-shadow: 0 0 0 3px rgba(237, 33, 44, .12);
}

/* Select: yerleşik ok yerine markaya uygun çift renkli ikon */
.tsh select.tsh-select {
    padding-right: 42px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5l6-6' stroke='%23898da9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    cursor: pointer;
}
.tsh select.tsh-select:focus {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5l6-6' stroke='%23ed212c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tsh-select optgroup { font-weight: 600; color: var(--tsh-muted); font-style: normal; }
.tsh-select option { color: var(--tsh-ink); font-weight: 400; }

/* =====================================================================
   Özel açılır liste — yerleşik select'in açılan kısmı biçimlendirilemiyor
   ===================================================================== */
.tsh-cs { position: relative; }
/* JS devreye girince gerçek select gizlenir ama formda kalır */
.tsh-cs.is-ready > select { position: absolute; opacity: 0; pointer-events: none; width: 100%; height: 46px; }

.tsh-cs-btn {
    display: flex; align-items: center; gap: 11px;
    width: 100%; height: 46px; padding: 0 14px;
    background: #fff; border: 1px solid var(--tsh-line); border-radius: 10px;
    font-family: inherit; font-size: 14px; color: var(--tsh-ink); text-align: left;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.tsh-cs-btn:hover { border-color: var(--tsh-muted); }
.tsh-cs.is-open .tsh-cs-btn,
.tsh-cs-btn:focus-visible {
    outline: 0; border-color: var(--tsh-accent);
    box-shadow: 0 0 0 3px rgba(237, 33, 44, .12);
}
.tsh-cs-btn.is-empty .tsh-cs-label { color: #a8adc4; }
.tsh-cs-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsh-cs-chev {
    flex: 0 0 auto; width: 9px; height: 9px;
    border-right: 2px solid var(--tsh-muted); border-bottom: 2px solid var(--tsh-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease, border-color .16s ease;
}
.tsh-cs.is-open .tsh-cs-chev { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--tsh-accent); }

/* Seçili/opsiyon ikonu */
.tsh-cs-ico {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px;
    background: #f4f5f9; color: var(--tsh-ink-soft);
}
.tsh-cs-btn.is-empty .tsh-cs-ico { color: var(--tsh-muted); }

/* Açılan panel: modal gövdesi kaydığı için sabit konumlandırılır,
   böylece hiçbir kapsayıcı tarafından kırpılmaz. */
.tsh-cs-panel {
    position: fixed; z-index: 100000;
    background: #fff; border: 1px solid var(--tsh-line); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(20, 22, 55, .18);
    padding: 6px; max-height: 268px; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.tsh-cs-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.tsh-cs-grup {
    font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--tsh-muted); padding: 10px 12px 6px;
}
.tsh-cs-opt {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; border-radius: 9px; cursor: pointer;
    font-size: 14px; color: var(--tsh-ink);
}
.tsh-cs-opt:hover, .tsh-cs-opt.is-active { background: #f4f5f9; }
.tsh-cs-opt[aria-selected="true"] { color: var(--tsh-accent); font-weight: 500; }
.tsh-cs-opt[aria-selected="true"] .tsh-cs-ico { background: rgba(237,33,44,.1); color: var(--tsh-accent); }
.tsh-cs-opt-txt { flex: 1 1 auto; }
.tsh-cs-tick { flex: 0 0 auto; opacity: 0; color: var(--tsh-accent); }
.tsh-cs-opt[aria-selected="true"] .tsh-cs-tick { opacity: 1; }

.tsh-field.has-error .tsh-cs-btn { border-color: var(--tsh-accent); background-color: #fff7f7; }

/* --- Doğrulama durumları (tarayıcı balonu yerine kendi uyarımız) --- */
.tsh-field.has-error .tsh-input,
.tsh-field.has-error .tsh-select,
.tsh-field.has-error .tsh-textarea {
    border-color: var(--tsh-accent);
    background-color: #fff7f7;
}
.tsh-field.has-error .tsh-label { color: var(--tsh-accent); }
.tsh-error {
    display: none;
    font-size: 12px; line-height: 1.4; color: var(--tsh-accent);
    align-items: center; gap: 5px;
}
.tsh-field.has-error .tsh-error { display: flex; }
.tsh-error::before {
    content: '!';
    flex: 0 0 auto;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--tsh-accent); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 14px; text-align: center;
}
.tsh-consent.has-error { border-color: var(--tsh-accent); background: #fff7f7; }

/* Onay kutusu: tema 13px'e düşürüyordu, tıklaması zordu.
   Kutu büyütüldü ve tüm satır tıklanabilir hâle getirildi. */
.tsh-consent {
    display: flex; align-items: flex-start; gap: 11px;
    font-size: 13px; line-height: 1.5; color: var(--tsh-ink-soft);
    background: #f8f9fc; border: 1px solid var(--tsh-line);
    border-radius: 10px; padding: 13px 15px;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}
.tsh-consent:hover { border-color: var(--tsh-muted); background: #f4f5f9; }
.tsh-consent input {
    width: 20px; height: 20px; min-width: 20px; min-height: 20px;
    margin: 1px 0 0; flex: 0 0 auto; cursor: pointer;
    accent-color: var(--tsh-accent);
}
.tsh-consent input:focus-visible { outline: 2px solid var(--tsh-ink); outline-offset: 2px; }
.tsh-consent a { color: var(--tsh-accent); text-decoration: underline; font-weight: 500; }

/* Bot tuzağı — kullanıcıya ve ekran okuyucuya görünmez */
.tsh-hp { position: absolute !important; left: -9999px !important; opacity: 0 !important; height: 0 !important; }

.tsh-note { border-radius: 9px; padding: 11px 14px; font-size: 13.5px; margin-top: 16px; }
.tsh-note--ok { background: #e8f7ee; color: #14663a; }
.tsh-note--err { background: #fdecec; color: #9c1620; }

/* =====================================================================
   5) İÇİNDEKİLER — içerik solda, liste sağda sabit
   ===================================================================== */
.tsh-toc {
    --tsh-accent: #ed212c;
    --tsh-ink: #141637;
    --tsh-muted: #898da9;
    --tsh-line: #e7e9f0;

    position: sticky;
    top: 110px;
    background: #fff;
    border: 1px solid var(--tsh-line);
    border-radius: 14px;
    padding: 22px 20px;
    font-family: 'Poppins', sans-serif;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}
.tsh-toc-title {
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 600; color: var(--tsh-ink);
    margin: 0 0 14px; padding-bottom: 12px;
    border-bottom: 1px solid var(--tsh-line);
}
.tsh-toc-title svg { color: var(--tsh-accent); flex: 0 0 auto; }

.tsh-toc ul { list-style: none; margin: 0; padding: 0; }
.tsh-toc ul ul { margin: 4px 0 4px 14px; padding-left: 10px; border-left: 1px solid var(--tsh-line); }
.tsh-toc li { margin: 0 0 3px; }
.tsh-toc a {
    display: block;
    font-size: 13.5px; line-height: 1.45;
    color: #4a4f6b; text-decoration: none;
    padding: 5px 8px; border-radius: 7px;
    transition: background-color .15s ease, color .15s ease;
}
.tsh-toc a:hover { background: #f4f5f9; color: var(--tsh-ink); }
.tsh-toc a.is-active { background: rgba(237,33,44,.08); color: var(--tsh-accent); font-weight: 500; }
.tsh-toc ul ul a { font-size: 13px; color: var(--tsh-muted); }

.tsh-anchor-offset :is(h2,h3,h4)[id] { scroll-margin-top: 100px; }

/* Tema, main elementine "overflow: hidden" veriyor. Bu, içindeki hiçbir
   öğenin position:sticky ile yapışmasına izin vermez — kutu kaydırmada
   takip etmiyordu. overflow-x:clip yatay taşma korumasını sürdürür ama
   dikeyde kırpma yapmaz, böylece yapışkanlık çalışır. */
main.tsh-main,
main:has(.tsh-row-toc) {
    overflow-x: clip;
    overflow-y: visible;
}

/* Tema ".block-center" ile satıra flex-direction:column veriyor; iki sütunlu
   içindekiler düzeninde kutuyu içeriğin altına düşürüyordu. */
.row.tsh-row-toc {
    flex-direction: row;
    flex-wrap: wrap;
    /* stretch: içindekiler sütunu metin sütunu kadar uzasın ki yapışkan
       kutunun kayacak mesafesi olsun. flex-start olduğunda sütun kutu
       boyunda kalıyor ve yapışkanlık hiç görünmüyordu. */
    align-items: stretch;
}
.row.tsh-row-toc > .tsh-icerik-sutun { align-self: flex-start; }
/* Geniş tablo/kod içeriği sütunu şişirip yan sütunu alta itmesin */
.row.tsh-row-toc > [class*="col-"] { min-width: 0; }

/* =====================================================================
   Kompakt bilgi metni — alt kategori kartlarının altında, kapalı gelir
   ===================================================================== */
.tsh-ozet {
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid var(--tsh-line);
}

/* Kapalıyken yükseklik sınırlı; metin DOM'da tam durur, sadece kırpılır.
   Böylece arama motoru içeriğin tamamını görür. */
.tsh-ozet-govde {
    position: relative;
    max-height: 190px;
    overflow: hidden;
    transition: max-height .32s ease;
}
.tsh-ozet-govde::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 88%);
    pointer-events: none;
    transition: opacity .2s ease;
}
.tsh-ozet.is-open .tsh-ozet-govde { max-height: none; }
.tsh-ozet.is-open .tsh-ozet-govde::after { opacity: 0; }

/* Minimal tipografi: ana içerikten belirgin biçimde daha sakin.
   Tema ".text-d-style p" kuralında font-size ve line-height'i !important
   ile dayatıyor; !important yalnızca !important ile geçilebildiği için
   burada bilinçli olarak kullanılıyor. Kapsam yalnızca .tsh-ozet içidir,
   sayfanın geri kalanındaki tipografi etkilenmez. */
.tsh-ozet .tsh-ozet-govde .text-d-style,
.tsh-ozet .tsh-ozet-govde .text-d-style p,
.tsh-ozet .tsh-ozet-govde .text-d-style li {
    font-size: 14px !important;
    line-height: 1.75 !important;
    /* tema bu üçünü de !important ile dayatıyor */
    color: var(--tsh-ink-soft) !important;
}
/* Tamamlayıcı bilgi olduğu için ana içerikten bir tık geride dursun.
   Perde (::after) kapsayıcıda kaldığı için saydamlıktan etkilenmez. */
.tsh-ozet .tsh-ozet-govde .text-d-style { opacity: .88; }
.tsh-ozet .tsh-ozet-govde .text-d-style :is(p, ul, ol) { margin: 0 0 14px; }
.tsh-ozet .tsh-ozet-govde .text-d-style :is(h2, h3, h4) {
    font-size: 15px !important; font-weight: 600; color: var(--tsh-ink);
    margin: 20px 0 8px; line-height: 1.45 !important;
}
.tsh-ozet .tsh-ozet-govde .text-d-style > :first-child { margin-top: 0; }
.tsh-ozet .tsh-ozet-govde .text-d-style li { margin-bottom: 5px; }
.tsh-ozet .tsh-ozet-govde .text-d-style table { font-size: 13px !important; }
.tsh-ozet .tsh-ozet-govde .text-d-style :is(td, th) { padding: 8px 10px; }

.tsh-ozet-btn {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px; padding: 9px 18px;
    background: transparent;
    border: 1px solid var(--tsh-line); border-radius: 999px;
    font-size: 13.5px; font-weight: 500; color: var(--tsh-ink);
    transition: border-color .16s ease, background-color .16s ease;
}
.tsh-ozet-btn:hover { border-color: var(--tsh-muted); background: #f6f7fa; }
.tsh-ozet-ok {
    width: 7px; height: 7px;
    border-right: 2px solid var(--tsh-accent); border-bottom: 2px solid var(--tsh-accent);
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .22s ease;
}
.tsh-ozet.is-open .tsh-ozet-ok { transform: rotate(-135deg) translate(-1px, -1px); }

@media (max-width: 767px) {
    .tsh-ozet { margin-top: 26px; padding-top: 22px; }
    .tsh-ozet-govde { max-height: 150px; }
    .tsh-ozet .tsh-ozet-govde .text-d-style,
    .tsh-ozet .tsh-ozet-govde .text-d-style p,
    .tsh-ozet .tsh-ozet-govde .text-d-style li { font-size: 13.5px !important; }
}

/* Teknik spesifikasyon tabloları dar ekranda sayfayı yatayda taşırıyordu.
   tushan-ui.js her tabloyu bu kutuya sarar; taşma sayfada değil kutuda olur. */
.tsh-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 18px;
}
.tsh-table-scroll > table { margin-bottom: 0; }
.tsh-anchor-offset table { max-width: 100%; }

/* Dar ekranda içindekiler kutusu gösterilmiyor: sabit sütun mümkün değil,
   içeriğin üstünde duran kapalı kutu da yer kaplamaktan başka iş görmüyor.
   Geri istenirse bu blok kaldırılıp sıralama kuralları açılabilir. */
@media (max-width: 991px) {
    .tsh-toc-sutun { display: none; }
}

@media (max-width: 1199px) {
    .tsh-toc {
        position: static; max-height: none; margin-bottom: 28px;
        padding: 0; border-radius: 12px; overflow: hidden;
    }
    .tsh-toc-title {
        margin: 0; padding: 15px 18px; cursor: pointer;
        border-bottom: 0; justify-content: space-between;
    }
    .tsh-toc-title::after {
        content: ''; width: 8px; height: 8px; flex: 0 0 auto;
        border-right: 2px solid var(--tsh-muted); border-bottom: 2px solid var(--tsh-muted);
        transform: rotate(45deg) translateY(-2px); transition: transform .2s ease;
    }
    .tsh-toc.is-open .tsh-toc-title::after { transform: rotate(-135deg) translateY(-2px); }
    .tsh-toc-body { display: none; padding: 0 18px 16px; }
    .tsh-toc.is-open .tsh-toc-body { display: block; }
    .tsh-toc-title > span { display: flex; align-items: center; gap: 9px; }
}

/* =====================================================================
   6) MOBİL
   ===================================================================== */
@media (max-width: 767px) {
    .tsh-cookie { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; padding: 16px; }
    .tsh-cookie-text { font-size: 12.5px; }
    .tsh-cookie-actions .tsh-btn { flex: 1 1 100%; }

    :root { --tsh-dock-right: 14px; --tsh-dock-size: 44px; --tsh-dock-kodes: 16px; --tsh-dock-alt: 70px; }
    button.kodes-widget-button { padding: 0 !important; width: var(--tsh-dock-size) !important; }
    button.kodes-widget-button::after { display: none; }
    /* Dar ekranda yazılar gizlenir, butonlar daireye döner */
    .tsh-dock { gap: 9px; }
    .tsh-dock-btn { height: var(--tsh-dock-size); width: var(--tsh-dock-size); padding: 0; justify-content: center; }
    .tsh-dock-yazi { display: none; }
    .tsh-dock-ico { width: 22px; height: 22px; background: transparent !important; }
    .tsh-dock-btn--iletisim .tsh-dock-ico { color: var(--tsh-ink); }
    .tsh-fab-menu { bottom: calc(100% + 10px); gap: 8px; }
    .tsh-fab-item { font-size: 13.5px; padding: 8px 15px 8px 8px; }
    .tsh-fab-ico { width: 30px; height: 30px; }

    .tsh-modal { padding: 0; align-items: flex-end; }
    .tsh-modal-box { max-width: none; border-radius: 18px 18px 0 0; max-height: 92vh; }
    .tsh-form-grid { grid-template-columns: 1fr; }
    .tsh-modal-foot .tsh-btn { flex: 1 1 100%; }
}

/* Çerez paneli açıkken dar ekranda buton onunla çakışmasın */

@media (max-width: 991px) {
    body.tsh-cookie-open .tsh-dock { opacity: 0; visibility: hidden; pointer-events: none; }
}
.tsh-dock { transition: opacity .25s ease, visibility .25s ease; }

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
    .tsh-cookie, .tsh-modal, .tsh-modal-box, .tsh-fab-menu, .tsh-fab,
    .tsh-fab-toggle, .tsh-fab-item, .tsh-fab-tip,
    .tsh-switch-track, .tsh-switch-track::after, .tsh-cookie-toggle-ico {
        transition: none !important;
    }
    .tsh-fab-toggle::before { animation: none; display: none; }
}

/* ============================================================
   İşlerimiz galerisi
   ============================================================ */
.tsh-galeri-kare {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #e9edf2;
    aspect-ratio: 4 / 3;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .07);
}

.tsh-galeri-kare img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.tsh-galeri-kare:hover img,
.tsh-galeri-kare:focus-visible img { transform: scale(1.06); }

.tsh-galeri-buyutec {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    background: rgba(16, 24, 40, .42);
    opacity: 0;
    transition: opacity .3s ease;
}

.tsh-galeri-kare:hover .tsh-galeri-buyutec,
.tsh-galeri-kare:focus-visible .tsh-galeri-buyutec { opacity: 1; }

.tsh-galeri-kare:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 3px;
}

/* aspect-ratio desteklemeyen eski tarayıcılar için yedek */
@supports not (aspect-ratio: 4 / 3) {
    .tsh-galeri-kare { height: 0; padding-bottom: 75%; }
    .tsh-galeri-kare img { position: absolute; inset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tsh-galeri-kare img, .tsh-galeri-buyutec { transition: none !important; }
    .tsh-galeri-kare:hover img { transform: none; }
}

/* ============================================================
   Kullanım alanları kartları: özet + "İncele" CTA butonu
   Eşit yükseklikli kartlarda buton, alt kısımda ince bir ayraçla
   ayrılmış "kart alt eylemi" olarak durur; boşta yüzmez.
   ============================================================ */
/* Kartlar içeriğe göre doğal yükseklikte; buton her zaman özetin
   hemen altında durur, boşta yüzmez. */
.blog-item-7.tsh-kart .blog-content-7 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 26px;
}

.tsh-kart-ozet {
    margin: 2px 22px 16px;
    font-size: 14px;
    line-height: 1.62;
    color: #5b6678;
    text-align: center;
}

.tsh-kart-link {
    /* Buton özetin hemen altında durur; boşta kalmaz.
       Renkler site geneliyle aynı siyah tonda (mavi değil). */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border: 1px solid #cfd3d6;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13.5px;
    color: #231f20;
    background: #fff;
    transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.tsh-kart-link i { font-size: 12px; transition: transform .25s ease; }
.tsh-kart-link:hover {
    background: #231f20;
    border-color: #231f20;
    color: #fff;
}
.tsh-kart-link:hover i { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .tsh-kart-link, .tsh-kart-link i { transition: none !important; }
    .tsh-kart-link:hover i { transform: none; }
}


/* ============================================================
   İlgili Yazılar (ürün sayfasından bloglara köprü)
   ============================================================ */
.tsh-ilgili { margin-top: 46px; padding-top: 30px; border-top: 1px solid #e7e9f0; }
.tsh-ilgili-baslik { font-size: 20px; font-weight: 600; margin: 0 0 18px; color: #231f20; }
.tsh-ilgili-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.tsh-ilgili-kart {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px;
    border: 1px solid #e7e9f0;
    border-radius: 12px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tsh-ilgili-kart:hover {
    border-color: #cfd3d6;
    box-shadow: 0 8px 22px rgba(20, 22, 55, .09);
    transform: translateY(-2px);
}
.tsh-ilgili-foto { flex: 0 0 64px; }
.tsh-ilgili-foto img {
    width: 64px; height: 64px;
    object-fit: cover;
    border-radius: 9px;
    display: block;
}
.tsh-ilgili-ad {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.42;
    color: #231f20;
}
@media (max-width: 575px) {
    .tsh-ilgili-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .tsh-ilgili-kart { transition: none !important; }
    .tsh-ilgili-kart:hover { transform: none; }
}

/* ============================================================
   Lightbox (magnific-popup) başlığı: sola yapışmasın
   ============================================================ */
.mfp-title {
    padding-left: 14px;
    padding-bottom: 4px;
}