/* ============================================================
   TEPRO iç sayfalar — kendi kodumuzla yazılan sayfaların stili.
   .ts kapsayıcısı yakalanan tema CSS'inden yalıtır (all:revert).
   :where() ile özgüllük sabit; SVG geometrisi hariç tutulur.
   ============================================================ */

/* Manrope variable font — self-hosted (GDPR + perf). Tek dosya weight 200-800. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/_tepro/fonts/manrope-variable.woff2") format("woff2-variations"),
       url("/_tepro/fonts/manrope-variable.woff2") format("woff2");
}

/* Yakalanan WP eklentilerinden gelen eski "back to top" düğmeleri (Smooth Back
   To Top plugin + vamtam tema). Kendi `.tt-top` butonumuzu kullandığımız için
   bunları görünmez kılıyoruz. */
.smooth-back-to-top-button,
#scroll-to-top,
.vamtam-scroll-to-top { display: none !important; }

html { scroll-behavior: smooth !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }


.ts, .ts *:where(:not(svg):not(svg *)) {
  all: revert !important;
  box-sizing: border-box !important;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ---- tema değişkenleri ---- */
.ts {
  --c-bg: #ffffff;
  --c-bg2: #f4f6f9;
  --c-fg: #141821;
  --c-muted: #5b6577;
  --c-soft: #f5f6f8;
  --c-accent: #d41f26;
  --c-accent-d: #aa161c;
  --c-border: #e7e9ee;
  --c-card: #ffffff;
  --c-shadow: 0 26px 60px -24px rgba(20, 24, 33, .26);
  --c-shadow-sm: 0 10px 26px -16px rgba(20, 24, 33, .3);
}
html.dark .ts {
  --c-bg: #0f1722;
  --c-bg2: #131d29;
  --c-fg: #eef1f6;
  --c-muted: #95a2b6;
  --c-soft: #18222f;
  --c-accent: #f5474d;
  --c-accent-d: #ff6b6f;
  --c-border: #25313f;
  --c-card: #18222f;
  --c-shadow: 0 26px 60px -22px rgba(0, 0, 0, .7);
  --c-shadow-sm: 0 10px 26px -14px rgba(0, 0, 0, .6);
}

.ts {
  display: block !important;
  background: var(--c-bg) !important;
  color: var(--c-fg) !important;
}
.ts-wrap {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 clamp(18px, 4vw, 40px) !important;
}
.ts-wrap-narrow { max-width: 760px !important; }
.ts-section { padding: clamp(44px, 7vw, 86px) 0 !important; }
.ts a { text-decoration: none !important; color: inherit !important; }

/* ---- ortak bölüm başlığı ---- */
.ts-eyebrow {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--c-accent) !important;
}
.ts-sec-head { margin-bottom: 26px !important; }
.ts-sec-title {
  margin: 10px 0 0 !important;
  font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -.5px !important;
  color: var(--c-fg) !important;
}
.ts-sec-desc {
  margin: 12px 0 0 !important;
  max-width: 460px !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--c-muted) !important;
}

/* ============================== HERO ============================== */
.ts-hero {
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(50px, 8vw, 96px) 0 clamp(118px, 13vw, 160px) !important;
  background:
    linear-gradient(180deg, var(--c-bg2), var(--c-bg)) !important;
}
.ts-hero-glow {
  position: absolute !important;
  top: -180px !important;
  right: -120px !important;
  width: 520px !important;
  height: 520px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, var(--c-accent), transparent 68%) !important;
  opacity: .14 !important;
  pointer-events: none !important;
}
.ts-hero-in { position: relative !important; z-index: 1 !important; }
.ts-hero-title {
  margin: 14px 0 0 !important;
  max-width: 16ch !important;
  font-size: clamp(2.1rem, 5vw, 3.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -1px !important;
  color: var(--c-fg) !important;
}
.ts-hero-desc {
  margin: 20px 0 0 !important;
  max-width: 60ch !important;
  font-size: clamp(15px, 1.6vw, 17px) !important;
  line-height: 1.75 !important;
  color: var(--c-muted) !important;
}

/* ---- Hero (yan form varyantı) ---- */
.ts-hero.has-aside {
  padding-bottom: clamp(50px, 7vw, 96px) !important;
}
.ts-hero.has-aside .ts-hero-in {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(32px, 5vw, 76px) !important;
  align-items: center !important;
}
.ts-hero-aside {
  width: 100% !important;
  max-width: 560px !important;
  justify-self: end !important;
}
.ts-hero.has-aside .ts-hero-title { max-width: 16ch !important; }

/* Hero içindeki form — kompakt */
.ts-hero-form { padding: 26px !important; }
.ts-hero-form .ts-field-grid { gap: 12px !important; }
.ts-hero-form .ts-input { padding: 10px 12px !important; font-size: 14px !important; }
.ts-hero-form textarea.ts-input { min-height: 90px !important; }
.ts-hero-form .ts-submit {
  margin-top: 16px !important;
  padding: 13px 24px !important;
}
.ts-sec-head-compact { margin-bottom: 16px !important; }
.ts-sec-title-sm {
  display: block !important;
  margin: 6px 0 0 !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  letter-spacing: -.3px !important;
  line-height: 1.25 !important;
  color: var(--c-fg) !important;
}

/* ---- Yan görselli 2-col düzen (foto + içerik) ---- */
.ts-side-photo {
  display: grid !important;
  grid-template-columns: 0.92fr 1.08fr !important;
  gap: clamp(28px, 5vw, 64px) !important;
  align-items: center !important;
}
.ts-side-photo.is-top { align-items: start !important; }
.ts-sp-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
}

/* ---- Hero (yan görselli varyant) ---- */
.ts-hero.has-img .ts-hero-in {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: clamp(32px, 5vw, 80px) !important;
  align-items: center !important;
}
.ts-hero-text { max-width: 620px !important; }
.ts-hero.has-img .ts-hero-title { max-width: 18ch !important; }
.ts-hero-img {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 460px !important;
  aspect-ratio: 4 / 5 !important;
  justify-self: end !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: var(--c-shadow) !important;
}
.ts-hero-img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* dekoratif aksan daireleri */
.ts-hero.has-img .ts-hero-glow {
  top: -180px !important;
  right: -120px !important;
  opacity: .18 !important;
}
.ts-hero.has-img::after {
  content: "" !important;
  position: absolute !important;
  width: 140px !important;
  height: 140px !important;
  right: clamp(20px, 4vw, 56px) !important;
  bottom: clamp(28px, 5vw, 56px) !important;
  background: var(--c-accent) !important;
  border-radius: 50% !important;
  opacity: .14 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* ---- Hero (tam genişlik video banner — anasayfa) ---- */
.ts-hero-video {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: clamp(440px, 70vh, 720px) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #050810 !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.ts-hero-video > .ts-hero-video-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
}
.ts-hero-video > .ts-hero-video-gradient {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to right,
    rgba(5, 8, 16, .88) 0%,
    rgba(5, 8, 16, .70) 28%,
    rgba(5, 8, 16, .35) 55%,
    rgba(5, 8, 16, .08) 78%,
    transparent 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.ts-hero-video-inner {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: clamp(56px, 9vw, 120px) clamp(20px, 5vw, 80px) !important;
  color: #ffffff !important;
}
.ts-hero-video-inner .ts-hero-video-eyebrow {
  color: #ffffff !important;
  opacity: .85 !important;
  letter-spacing: 2.6px !important;
}
.ts-hero-video-title {
  margin: 16px 0 18px !important;
  max-width: 22ch !important;
  font: 800 clamp(2rem, 5vw, 3.4rem)/1.1 Manrope, system-ui, sans-serif !important;
  letter-spacing: -1px !important;
  color: #ffffff !important;
}
.ts-hero-video-title-accent {
  display: block !important;
  margin-top: 10px !important;
  color: #f54903 !important;
  white-space: nowrap !important;
  font: 700 clamp(1.2rem, 2.5vw, 1.85rem)/1.2 Manrope, system-ui, sans-serif !important;
  letter-spacing: -.3px !important;
}
@media (max-width: 760px) {
  .ts-hero-video-title-accent { white-space: normal !important; }
}
.ts-hero-video-desc {
  margin: 0 !important;
  max-width: 56ch !important;
  font: 500 clamp(15px, 1.45vw, 17.5px)/1.65 Manrope, system-ui, sans-serif !important;
  color: #ffffff !important;
  opacity: .92 !important;
}

/* ─── Hero "Hakkımızda" badge — minimal monokrom ─────────────────── */
.ts-hero-about-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 26px !important;
  padding: 10px 16px 10px 14px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font: 700 12.5px/1 Manrope, system-ui, sans-serif !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}
.ts-hero-about-badge:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  transform: translateY(-1px) !important;
}
.ts-hero-about-ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 50% !important;
  color: #fff !important;
}
.ts-hero-about-ic svg { width: 14px !important; height: 14px !important; }
.ts-hero-about-label {
  color: #fff !important;
}
.ts-hero-about-arrow {
  display: inline-flex !important;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: transform .18s ease, color .18s ease !important;
}
.ts-hero-about-arrow svg { width: 14px !important; height: 14px !important; }
.ts-hero-about-badge:hover .ts-hero-about-arrow {
  color: #fff !important;
  transform: translateX(3px) !important;
}
@media (max-width: 560px) {
  .ts-hero-about-badge { padding: 8px 14px 8px 10px !important; gap: 10px !important; font-size: 11px !important; }
  .ts-hero-about-ic { width: 24px !important; height: 24px !important; }
}
@media (max-width: 760px) {
  .ts-hero-video { min-height: clamp(420px, 78vh, 620px) !important; }
  .ts-hero-video > .ts-hero-video-gradient {
    background: linear-gradient(
      to bottom,
      rgba(5, 8, 16, .35) 0%,
      rgba(5, 8, 16, .55) 35%,
      rgba(5, 8, 16, .85) 100%
    ) !important;
  }
  .ts-hero-video-inner { padding: clamp(40px, 10vw, 80px) 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-hero-video > .ts-hero-video-bg { display: none !important; }
  .ts-hero-video { background: linear-gradient(135deg, #050810, #1a2233) !important; }
}

/* ============================== İLETİŞİM KARTLARI ============================== */
.ts-pull-up { padding: 0 0 clamp(20px, 4vw, 40px) !important; }
.ts-pull-up .ts-wrap {
  margin-top: clamp(-96px, -10vw, -70px) !important;
  position: relative !important;
  z-index: 2 !important;
}
.ts-cards3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}
.ts-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 26px 24px !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--c-shadow) !important;
  transition: transform .18s, border-color .18s !important;
}
.ts-card:hover { transform: translateY(-4px) !important; border-color: var(--c-accent) !important; }
.ts-card-ic {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 8px !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--c-accent) 12%, transparent) !important;
  color: var(--c-accent) !important;
}
.ts-card-ic svg { width: 23px !important; height: 23px !important; }
.ts-card-k {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--c-muted) !important;
}
.ts-card-v {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: var(--c-fg) !important;
}
.ts-card-v a { color: var(--c-fg) !important; }
.ts-card-v a:hover { color: var(--c-accent) !important; }
.ts-card-mails {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}
.ts-card-mails a {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
.ts-card-mails b { font-size: 15px !important; font-weight: 700 !important; }
.ts-card-mails span {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
  color: var(--c-muted) !important;
}
.ts-card-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: auto !important;
  padding-top: 8px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: var(--c-accent) !important;
}
.ts-card-link svg { width: 16px !important; height: 16px !important; transition: transform .15s !important; }
.ts-card-link:hover svg { transform: translateX(4px) !important; }

/* ============================== HARİTA + FORM ============================== */
.ts-contact-grid {
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
  gap: clamp(24px, 4vw, 52px) !important;
  align-items: start !important;
}
.ts-contact-grid > * { min-width: 0 !important; }
.ts-map {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 13px !important;
  box-shadow: var(--c-shadow-sm) !important;
  height: 540px !important;
  min-height: 460px !important;
  width: 100% !important;
  max-width: 100% !important;
  background: var(--c-soft) !important;
}
/* MapLibre kanvasını köşelere uydur ve dış taşmayı engelle */
.ts-map .maplibregl-map { border-radius: 13px !important; width: 100% !important; height: 100% !important; }
.ts-map .maplibregl-canvas { max-width: 100% !important; }

/* ---- yaratıcı monokrom pin (özel marker) ---- */
.tepro-mappin {
  position: relative !important;
  width: 34px !important;
  height: 46px !important;
  cursor: pointer !important;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .35)) !important;
}
.tepro-mappin svg { display: block !important; width: 34px !important; height: 46px !important; }
.tepro-mappin::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 22px !important;
  height: 9px !important;
  margin-left: -11px !important;
  background: rgba(212, 31, 38, .45) !important;
  border-radius: 50% !important;
  transform-origin: center !important;
  animation: tepro-pulse 2.2s ease-out infinite !important;
  pointer-events: none !important;
}
@keyframes tepro-pulse {
  0% { opacity: .55; transform: scale(.3); }
  100% { opacity: 0; transform: scale(2.8); }
}

/* ---- harita altı bağlantı badge'leri (Apple / Google / Yandex) ---- */
.ts-map-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
}
.ts-map-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 16px 7px 7px !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 999px !important;
  box-shadow: var(--c-shadow-sm) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--c-fg) !important;
  transition: transform .15s, border-color .15s, color .15s !important;
}
.ts-map-link:hover { transform: translateY(-2px) !important; border-color: var(--c-accent) !important; }
.ts-map-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: var(--c-fg) !important;
  color: var(--c-bg) !important;
  transition: background .18s !important;
}
.ts-map-mark svg { width: 16px !important; height: 16px !important; }
.ts-map-mark-text {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
.ts-map-go {
  margin-left: 2px !important;
  font-style: normal !important;
  color: var(--c-muted) !important;
  transition: transform .15s, color .15s !important;
}
.ts-map-link:hover .ts-map-go { transform: translate(3px, -3px) !important; color: var(--c-accent) !important; }
/* marka rengi geçişi — hover'da servisin tonu */
.ts-map-link[data-svc="apple"]:hover .ts-map-mark { background: #000 !important; color: #fff !important; }
.ts-map-link[data-svc="google"]:hover .ts-map-mark { background: #4285f4 !important; color: #fff !important; }
.ts-map-link[data-svc="yandex"]:hover .ts-map-mark { background: #ffcc00 !important; color: #111 !important; }

/* ---- form ---- */
.ts-form {
  padding: 28px !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--c-shadow-sm) !important;
}
.ts-field-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}
.ts-field { display: flex !important; flex-direction: column !important; gap: 7px !important; }
.ts-field-wide { grid-column: 1 / -1 !important; }
.ts-field-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--c-fg) !important;
}
.ts-field-tag {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  color: var(--c-muted) !important;
  opacity: .8 !important;
}
.ts-input {
  width: 100% !important;
  padding: 12px 14px !important;
  background: var(--c-bg) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: 11px !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: var(--c-fg) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.ts-input::placeholder { color: var(--c-muted) !important; opacity: .7 !important; }
.ts-input:focus {
  outline: 0 !important;
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 16%, transparent) !important;
}
textarea.ts-input { resize: vertical !important; min-height: 120px !important; line-height: 1.6 !important; }
.ts-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6577' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  background-size: 16px !important;
  padding-right: 38px !important;
  cursor: pointer !important;
}
.ts-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

/* ---- Alan ipucu metni ---- */
.ts-field-hint {
  margin-top: 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--c-muted) !important;
}

/* ---- Dosya yükleme ---- */
input[type="file"].ts-file {
  padding: 0 !important;
  border: 1.5px dashed var(--c-border) !important;
  background: var(--c-soft) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--c-muted) !important;
  cursor: pointer !important;
  overflow: hidden !important;
}
input[type="file"].ts-file::file-selector-button {
  margin: 0 14px 0 0 !important;
  padding: 12px 18px !important;
  background: var(--c-fg) !important;
  color: var(--c-bg) !important;
  border: 0 !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .15s, color .15s !important;
}
input[type="file"].ts-file::file-selector-button:hover {
  background: var(--c-accent) !important;
  color: #fff !important;
}

/* ---- Onay kutusu (KVKK) ---- */
.ts-field-check { margin-top: 6px !important; }
.ts-check {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important;
  user-select: none !important;
  line-height: 1.55 !important;
}
.ts-check input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.ts-check-mark {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  margin-top: 1px !important;
  background: var(--c-bg) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: 5px !important;
  transition: background .15s, border-color .15s !important;
}
.ts-check-mark::after {
  content: "" !important;
  position: absolute !important;
  width: 10px !important;
  height: 5px !important;
  border-left: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  transform: rotate(-45deg) translateY(-1px) !important;
  opacity: 0 !important;
  transition: opacity .15s !important;
}
.ts-check input:checked + .ts-check-mark {
  background: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
}
.ts-check input:checked + .ts-check-mark::after { opacity: 1 !important; }
.ts-check:hover .ts-check-mark { border-color: var(--c-accent) !important; }
.ts-check-text {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--c-muted) !important;
}
.ts-check-text a {
  color: var(--c-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.ts-submit {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin-top: 20px !important;
  padding: 14px 28px !important;
  background: var(--c-accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .15s, transform .15s !important;
}
.ts-submit:hover { background: var(--c-accent-d) !important; transform: translateY(-2px) !important; }
.ts-submit:disabled { opacity: .6 !important; cursor: default !important; transform: none !important; }
.ts-submit svg { width: 18px !important; height: 18px !important; }
.ts-submit:hover svg { transform: translateX(3px) !important; }
.ts-form-msg {
  margin: 14px 0 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
}
/* Tek kolon dar form kapsayıcısı (KVKK gibi standalone formlar için) */
.ts-form-narrow {
  max-width: 760px !important;
  margin: 0 auto !important;
}
.ts-form-narrow .ts-sec-head { text-align: center !important; margin-bottom: 28px !important; }
.ts-form-narrow .ts-sec-desc { margin-left: auto !important; margin-right: auto !important; max-width: 60ch !important; }
.ts-form-msg.is-ok { color: #15803d !important; }
.ts-form-msg.is-err { color: var(--c-accent) !important; }
html.dark .ts-form-msg.is-ok { color: #4ade80 !important; }

/* Cloudflare Turnstile disclosure — invisible spam koruması notu */
.ts-turnstile-note {
  margin: 12px 0 0 !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: var(--c-text-muted, #5b6577) !important;
  letter-spacing: .1px !important;
}
.ts-turnstile-note a {
  color: var(--c-text-muted, #5b6577) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.ts-turnstile-note a:hover { color: var(--c-accent) !important; }
html.dark .ts-turnstile-note,
html.dark .ts-turnstile-note a { color: #95a2b6 !important; }
html.dark .ts-turnstile-note a:hover { color: var(--c-accent) !important; }

/* ============================== MARKA ŞERİDİ ============================== */
.ts-brands {
  padding: clamp(44px, 7vw, 80px) 0 !important;
  background: var(--c-bg2) !important;
  border-top: 1px solid var(--c-border) !important;
}
.ts-brands .ts-sec-head { text-align: center !important; margin-bottom: 34px !important; }
.ts-brand-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 16px !important;
}
.ts-brand {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 1 / 1 !important;
  padding: 18px !important;
  background: #ffffff !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 16px !important;
  transition: transform .16s, box-shadow .16s, background .2s, border-color .2s !important;
}
.ts-brand:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--c-shadow-sm) !important;
}
.ts-brand img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  object-fit: contain !important;
  /* logo boyutu kare hücrenin %92'si — önceki ~%60'a göre +30%+ büyüme */
  height: 92% !important;
}
/* Dark/light logo varyantları — html.dark sınıfına göre swap */
html:not(.dark) .ts-brand .ts-brand-dark { display: none !important; }
html.dark .ts-brand .ts-brand-light { display: none !important; }
/* Dark modda kart arka planı koyu */
html.dark .ts-brand {
  background: #1a2233 !important;
  border-color: #25313f !important;
}

/* yakalanan footer — .ts dışında, tema CSS'i ile çalışır */
.ts-captured-footer { display: block !important; }

/* ============================== ORTAK İÇ SAYFA BİLEŞENLERİ ============================== */

/* ---- Otomatik fit'li kart grid'i (değerler, pozisyonlar vb.) ---- */
.ts-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)) !important;
  gap: 18px !important;
}
.ts-card-tall { gap: 12px !important; min-height: 200px !important; }
.ts-card-link { position: relative !important; text-decoration: none !important; cursor: pointer !important; }
.ts-card-arrow {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--c-soft) !important;
  color: var(--c-muted) !important;
  transition: background .15s, color .15s, transform .15s !important;
}
.ts-card-link:hover .ts-card-arrow {
  background: var(--c-accent) !important;
  color: #fff !important;
  transform: translate(3px, -3px) !important;
}
.ts-card-arrow svg { width: 15px !important; height: 15px !important; }
.ts-card-title {
  margin: 4px 0 0 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -.2px !important;
  color: var(--c-fg) !important;
}
.ts-card-text {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--c-muted) !important;
}
.ts-sec-head-center { text-align: center !important; margin-bottom: 32px !important; }
.ts-sec-head-center .ts-sec-desc { margin-left: auto !important; margin-right: auto !important; }
.ts-section-alt { background: var(--c-bg2) !important; }

/* ---- Boş durum kutusu ---- */
.ts-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  padding: 44px 28px !important;
  background: var(--c-card) !important;
  border: 1.5px dashed var(--c-border) !important;
  border-radius: 18px !important;
  text-align: center !important;
}
.ts-empty[hidden] { display: none !important; }

/* Filtre ile gizlenen ürün kartları — class-based override
   (.ts-prod-card'in display: flex !important kuralını ezmek için) */
.ts-prod-card.is-hidden { display: none !important; }
.ts-empty-ic {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 15px !important;
  background: color-mix(in srgb, var(--c-accent) 12%, transparent) !important;
  color: var(--c-accent) !important;
}
.ts-empty-ic svg { width: 26px !important; height: 26px !important; }
.ts-empty-text {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--c-fg) !important;
  max-width: 500px !important;
}
.ts-empty-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 26px !important;
  background: var(--c-accent) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-radius: 11px !important;
  transition: background .15s, transform .15s !important;
}
.ts-empty-cta:hover { background: var(--c-accent-d) !important; transform: translateY(-2px) !important; }
.ts-empty-cta svg { width: 17px !important; height: 17px !important; transition: transform .15s !important; }
.ts-empty-cta:hover svg { transform: translateX(3px) !important; }

/* ---- Pozisyon kartları ---- */
.ts-pos-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}
.ts-pos-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 24px !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 16px !important;
  text-decoration: none !important;
  transition: transform .15s, border-color .15s !important;
}
.ts-pos-card:hover { transform: translateY(-3px) !important; border-color: var(--c-accent) !important; }

/* ---- İstatistik banner (4 sayı yan yana) ---- */
.ts-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--c-shadow) !important;
  overflow: hidden !important;
}
.ts-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 32px 18px !important;
  border-right: 1px solid var(--c-border) !important;
}
.ts-stat:last-child { border-right: 0 !important; }
.ts-stat-num {
  font-size: clamp(2rem, 3.6vw, 2.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important;
  line-height: 1 !important;
  color: var(--c-accent) !important;
}
.ts-stat-label {
  margin-top: 10px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--c-muted) !important;
}

/* ---- Düz metin prose (uzun şirket açıklaması) ---- */
.ts-prose p {
  margin: 0 0 1.2em !important;
  font-size: 15.5px !important;
  line-height: 1.85 !important;
  font-weight: 500 !important;
  color: var(--c-fg) !important;
}
.ts-prose p:last-child { margin-bottom: 0 !important; }

/* ---- CEO mesaj bölümü (portre + alıntı) ---- */
.ts-ceo {
  display: grid !important;
  grid-template-columns: 0.85fr 1.15fr !important;
  gap: clamp(28px, 4vw, 64px) !important;
  align-items: center !important;
}
.ts-ceo-quote {
  position: relative !important;
  margin: 0 !important;
  padding: 6px 0 0 28px !important;
  border-left: 4px solid var(--c-accent) !important;
}
.ts-quote-mark {
  position: absolute !important;
  top: -32px !important;
  left: 18px !important;
  font-size: 130px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  color: var(--c-accent) !important;
  opacity: .12 !important;
  pointer-events: none !important;
}
.ts-ceo-quote .ts-eyebrow {
  display: block !important;
  margin-bottom: 14px !important;
}
.ts-ceo-quote p {
  margin: 0 0 1em !important;
  font-size: 15.5px !important;
  line-height: 1.85 !important;
  font-weight: 500 !important;
  color: var(--c-fg) !important;
}
.ts-ceo-quote p:last-of-type { margin-bottom: 18px !important; }
.ts-quote-sig {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--c-border) !important;
}
.ts-quote-name {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -.2px !important;
  color: var(--c-accent) !important;
}
.ts-quote-role {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--c-muted) !important;
}

/* ---- Portreli foto varyantı (Hakkımızda) ---- */
.ts-portrait { aspect-ratio: 4 / 5 !important; }
.ts-portrait-cap {
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 18px 22px !important;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8)) !important;
}
.ts-portrait-name {
  color: #fff !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  letter-spacing: -.2px !important;
}
.ts-portrait-role {
  color: rgba(255, 255, 255, .85) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* ---- Numaralı süreç adımları ---- */
.ts-steps {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.ts-step {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 18px !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 13px !important;
  box-shadow: var(--c-shadow-sm) !important;
}
.ts-step-n {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--c-accent) 14%, transparent) !important;
  color: var(--c-accent) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  flex: 0 0 auto !important;
  letter-spacing: .5px !important;
}
.ts-step-text {
  font-size: 14.5px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  color: var(--c-fg) !important;
}
.ts-steps-cols {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

/* ---- CTA banner (kırmızı gradient, talep yönlendirme) ---- */
.ts-cta-banner {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: clamp(20px, 4vw, 50px) !important;
  align-items: center !important;
  padding: clamp(36px, 5vw, 60px) clamp(28px, 5vw, 64px) !important;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-d)) !important;
  border-radius: 22px !important;
  color: #fff !important;
  box-shadow: var(--c-shadow) !important;
  position: relative !important;
  overflow: hidden !important;
}
.ts-cta-banner::after {
  content: "" !important;
  position: absolute !important;
  right: -60px !important;
  top: -60px !important;
  width: 220px !important;
  height: 220px !important;
  background: rgba(255, 255, 255, .1) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
.ts-cta-text { position: relative !important; z-index: 1 !important; }
.ts-cta-banner .ts-eyebrow {
  color: rgba(255, 255, 255, .85) !important;
}
.ts-cta-title {
  display: block !important;
  margin: 10px 0 0 !important;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.4px !important;
  line-height: 1.25 !important;
  color: #fff !important;
}
.ts-cta-desc {
  margin: 12px 0 0 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, .92) !important;
  max-width: 560px !important;
}
.ts-cta-btn,
.ts-cta-btn > span,
.ts-cta-banner .ts-cta-btn {
  color: var(--c-accent) !important;
}
.ts-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 16px 30px !important;
  background: #fff !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  position: relative !important;
  z-index: 1 !important;
  transition: transform .15s, box-shadow .15s !important;
}
.ts-cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .35) !important;
}
.ts-cta-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke: var(--c-accent) !important;
}
html.dark .ts-cta-btn,
html.dark .ts-cta-btn > span,
html.dark .ts-cta-btn svg {
  color: #d41f26 !important;
  stroke: #d41f26 !important;
}
html.dark .ts-cta-btn { background: #ffffff !important; }

/* CTA varyantları — banner dışında düz sayfa zemininde kullanım için.
   "Kare çerçeve" hatası: > span'a background veya box-shadow VERME — sadece
   button'a uygula. > span yalnızca color devralmalı, çerçeve çizmemeli. */
.ts-cta-btn.is-solid { background: var(--c-accent) !important; color: #fff !important; }
.ts-cta-btn.is-solid > span { background: transparent !important; color: inherit !important; }
.ts-cta-btn.is-solid svg { stroke: #fff !important; }
.ts-cta-btn.is-solid:hover {
  box-shadow: 0 18px 36px -10px rgba(212, 31, 38, .55) !important;
}
html.dark .ts-cta-btn.is-solid { background: #f5474d !important; color: #fff !important; }
html.dark .ts-cta-btn.is-solid > span { background: transparent !important; color: inherit !important; }
html.dark .ts-cta-btn.is-solid svg { stroke: #fff !important; }

.ts-cta-btn.is-ghost {
  background: transparent !important;
  color: var(--c-fg) !important;
  box-shadow: inset 0 0 0 1.5px rgba(20, 24, 33, .15) !important;
}
.ts-cta-btn.is-ghost > span { background: transparent !important; box-shadow: none !important; color: inherit !important; }
.ts-cta-btn.is-ghost svg { stroke: var(--c-fg) !important; }
.ts-cta-btn.is-ghost:hover {
  background: var(--c-accent) !important;
  box-shadow: 0 14px 28px -10px rgba(212, 31, 38, .45) !important;
  color: #fff !important;
}
.ts-cta-btn.is-ghost:hover > span { color: inherit !important; }
.ts-cta-btn.is-ghost:hover svg { stroke: #fff !important; }
html.dark .ts-cta-btn.is-ghost {
  color: #eef1f6 !important;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14) !important;
}
html.dark .ts-cta-btn.is-ghost > span { background: transparent !important; box-shadow: none !important; color: inherit !important; }
html.dark .ts-cta-btn.is-ghost svg { stroke: #eef1f6 !important; }

/* Hero altı küçük CTA bar (anasayfa) */
.ts-hero-cta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: -28px !important;
}

/* ---- KraussMaffei stratejik ortak banner — anasayfa ---- */
.ts-km-banner {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: 0 !important;
  background: linear-gradient(135deg, #0c111d 0%, #1a2233 100%) !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: #fff !important;
  box-shadow: 0 24px 60px -24px rgba(20, 24, 33, .35) !important;
  transition: transform .35s ease, box-shadow .35s ease !important;
  min-height: 440px !important;
  isolation: isolate !important;
}
.ts-km-banner:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 30px 70px -22px rgba(212, 31, 38, .35),
    0 24px 60px -24px rgba(20, 24, 33, .45) !important;
}
.ts-km-banner-img {
  position: relative !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.ts-km-banner-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1) !important;
}
.ts-km-banner:hover .ts-km-banner-img img { transform: scale(1.04) !important; }
.ts-km-banner-img::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(12, 17, 29, 0) 55%, rgba(12, 17, 29, .55) 100%) !important;
  pointer-events: none !important;
}
.ts-km-banner-text {
  padding: 52px clamp(28px, 4vw, 56px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
  position: relative !important;
  z-index: 2 !important;
}
.ts-km-banner-eyebrow {
  color: #f5474d !important;
  letter-spacing: 2.2px !important;
}
.ts-km-banner-title {
  font: 800 clamp(38px, 5.5vw, 64px)/.95 Manrope, system-ui, sans-serif !important;
  letter-spacing: -1.5px !important;
  color: #fff !important;
  margin: 6px 0 4px !important;
}
.ts-km-banner-tagline {
  font: 400 clamp(20px, 2.3vw, 28px)/1.2 Manrope, system-ui, sans-serif !important;
  color: rgba(255, 255, 255, .72) !important;
  margin: 0 0 14px !important;
}
.ts-km-banner-tagline em { font-style: italic !important; font-weight: 300 !important; }
.ts-km-banner-desc {
  font: 500 15px/1.65 Manrope, system-ui, sans-serif !important;
  color: rgba(255, 255, 255, .82) !important;
  margin: 0 0 18px !important;
  max-width: 44ch !important;
}
.ts-km-banner-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  font: 800 13px/1 Manrope, system-ui, sans-serif !important;
  letter-spacing: 1.3px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, .15) !important;
  align-self: flex-start !important;
  transition: gap .25s ease !important;
}
.ts-km-banner-cta svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #f5474d !important;
  transition: transform .25s ease !important;
}
.ts-km-banner:hover .ts-km-banner-cta { gap: 14px !important; }
.ts-km-banner:hover .ts-km-banner-cta svg { transform: translateX(4px) !important; }
.ts-km-banner-mark {
  position: absolute !important;
  top: 18px !important;
  right: 80px !important;  /* toggle butonu için yer aç */
  font: 800 11px/1 Manrope, system-ui, sans-serif !important;
  letter-spacing: 4px !important;
  color: rgba(255, 255, 255, .25) !important;
  z-index: 2 !important;
}
/* KM banner kulakçık wrap — toggle butonu için relative parent */
.ts-km-banner-wrap { position: relative !important; }
/* KM banner içindeki toggle butonu — kulakçık varyantı */
.ts-video-toggle-km {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 6 !important;
}
html.dark .ts-km-banner {
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, .65) !important;
}
@media (max-width: 768px) {
  .ts-km-banner {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .ts-km-banner-img { aspect-ratio: 16 / 10 !important; }
  .ts-km-banner-text { padding: 34px 24px 38px !important; gap: 6px !important; }
}

/* ---- Editorial 3-col foto özellik bölümü (kreatif düzen) ---- */
.ts-photo-feature {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 0.92fr 1.35fr 0.92fr !important;
  gap: clamp(24px, 4vw, 56px) !important;
  align-items: stretch !important;
  padding: 18px 0 !important;
}
.ts-photo-feature > * { position: relative !important; z-index: 1 !important; }
/* dekoratif arka aksan dairesi */
.ts-photo-feature::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  width: 220px !important;
  height: 220px !important;
  right: clamp(60px, 10vw, 140px) !important;
  top: -50px !important;
  background: var(--c-accent) !important;
  border-radius: 50% !important;
  opacity: .1 !important;
  pointer-events: none !important;
}
.ts-photo-feature::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  width: 130px !important;
  height: 130px !important;
  left: clamp(120px, 12vw, 200px) !important;
  bottom: -30px !important;
  background: var(--c-accent) !important;
  border-radius: 50% !important;
  opacity: .08 !important;
  pointer-events: none !important;
}
.ts-pf-photo {
  position: relative !important;
  margin: 0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: var(--c-shadow) !important;
  aspect-ratio: 3 / 4 !important;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1) !important;
}
.ts-pf-photo:hover { transform: translateY(-8px) !important; }
.ts-pf-photo.is-landscape { aspect-ratio: 4 / 3 !important; }
.ts-pf-photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.ts-pf-photo-1 { align-self: start !important; }
.ts-pf-photo-2 { align-self: end !important; }
.ts-pf-tag {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background: rgba(255, 255, 255, .96) !important;
  color: #141821 !important;
  border-radius: 50% !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: .4px !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(8px) !important;
}
html.dark .ts-pf-tag { color: #141821 !important; }
html.dark .ts-pf-photo-2 .ts-pf-tag { color: #ffffff !important; }
.ts-pf-photo-2 .ts-pf-tag {
  background: var(--c-accent) !important;
  color: #fff !important;
}
.ts-pf-content {
  align-self: center !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
}
/* eski 4×56 dikey kırmızı bar kaldırıldı — yerine .ts-eyebrow tek başına aksent
   olarak kullanılır; tüm iç sayfalarda tekrar eden çizgi izlenimi engellenir. */

/* ---- Tikli madde listesi ---- */
.ts-bullets {
  list-style: none !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 13px !important;
}
.ts-bullet {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: var(--c-fg) !important;
  font-weight: 500 !important;
}
.ts-bullet-ic {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  margin-top: 1px !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--c-accent) 15%, transparent) !important;
  color: var(--c-accent) !important;
}
.ts-bullet-ic svg { width: 13px !important; height: 13px !important; }

/* ============================== SEKTÖRLER ============================== */
/* Faaliyet alanları sayfası ve iç sektör sayfalarında ortak kullanılan
   kreatif kart grid'i + iç sayfa bileşenleri. Foto + numara + ikon overlay,
   hover'da kırmızı bant, dark mode dahil. */

/* --- 8-sektör kreatif kart grid'i (parent + iç sayfada "diğer sektörler") --- */
.ts-sector-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  margin-top: 36px !important;
}
.ts-sector-grid.is-compact { gap: 16px !important; }

.ts-sector-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
  isolation: isolate !important;
}
.ts-sector-card::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 4px !important;
  background: var(--c-accent) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform .4s ease !important;
  z-index: 3 !important;
}
.ts-sector-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--c-shadow) !important;
  border-color: color-mix(in srgb, var(--c-accent) 35%, var(--c-border)) !important;
}
.ts-sector-card:hover::after { transform: scaleX(1) !important; }

/* foto bölgesi — kart üst yarısı, sektör görseli + monokrom overlay */
.ts-sector-img {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 11 !important;
  overflow: hidden !important;
  background: var(--c-bg2) !important;
}
.ts-sector-img img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  filter: saturate(.55) contrast(1.05) brightness(.78) !important;
  transition: transform .55s ease, filter .35s ease !important;
}
.ts-sector-card:hover .ts-sector-img img {
  transform: scale(1.06) !important;
  filter: saturate(.85) contrast(1.08) brightness(.86) !important;
}
.ts-sector-img::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 34, .15) 0%, rgba(15, 23, 34, .55) 65%, rgba(15, 23, 34, .85) 100%) !important;
  z-index: 1 !important;
}
.ts-sector-img::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, .03) 0 1px,
      transparent 1px 18px
    ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* numara — sol üst kreatif rozet */
.ts-sector-num {
  position: absolute !important;
  top: 16px !important;
  left: 18px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  color: #fff !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.ts-sector-num::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important; height: 2px !important;
  background: var(--c-accent) !important;
}

/* ikon — sağ üst monokrom çember */
.ts-sector-ic {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  width: 46px !important; height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #141821 !important;
  z-index: 2 !important;
  transition: background .3s ease, color .3s ease, transform .3s ease !important;
  backdrop-filter: blur(8px) !important;
}
.ts-sector-ic svg { width: 22px !important; height: 22px !important; }
.ts-sector-card:hover .ts-sector-ic {
  background: var(--c-accent) !important;
  color: #fff !important;
  transform: rotate(-8deg) scale(1.06) !important;
}

/* başlık + tagline — kart alt yarısı, beyaz tabaka */
.ts-sector-body {
  padding: 22px 22px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
}
.ts-sector-name {
  margin: 0 !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -.3px !important;
  color: var(--c-fg) !important;
  line-height: 1.2 !important;
}
h3.ts-sector-name { all: revert !important; margin: 0 !important; font-family: inherit !important; font-size: 19px !important; font-weight: 800 !important; letter-spacing: -.3px !important; color: var(--c-fg) !important; line-height: 1.2 !important; }
.ts-sector-tagline {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--c-muted) !important;
  line-height: 1.55 !important;
}
.ts-sector-cta {
  margin-top: auto !important;
  padding-top: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--c-accent) !important;
}
.ts-sector-cta svg {
  width: 14px !important; height: 14px !important;
  transition: transform .25s ease !important;
}
.ts-sector-card:hover .ts-sector-cta svg { transform: translateX(4px) !important; }

/* "Tüm Hizmetlerimiz" özel kart — foto yerine gradient, kart genişletilmiş */
.ts-sector-card.is-all {
  background:
    radial-gradient(120% 130% at 0% 0%, #1b2231 0%, #0e1320 60%, #0a0d18 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.ts-sector-card.is-all .ts-sector-img {
  background:
    radial-gradient(120% 130% at 0% 0%, #1b2231 0%, #0e1320 60%, #0a0d18 100%) !important;
}
.ts-sector-card.is-all .ts-sector-img::before {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.04) 0 1px, transparent 1px 14px
    ),
    radial-gradient(60% 80% at 50% 50%, rgba(212,31,38,.16) 0%, transparent 70%) !important;
}
.ts-sector-card.is-all .ts-sector-img::after { background: none !important; }
.ts-sector-card.is-all .ts-sector-name { color: #fff !important; }
.ts-sector-card.is-all .ts-sector-tagline { color: rgba(255,255,255,.7) !important; }
.ts-sector-card.is-all .ts-sector-ic { background: var(--c-accent) !important; color: #fff !important; }
.ts-sector-card.is-all .ts-sector-cta { color: var(--c-accent) !important; }
.ts-sector-card.is-all .ts-sector-body { background: transparent !important; }

/* --- İç sektör sayfasında "lead" bölümü (büyük başlık + 3 paragraf body) --- */
.ts-sec-lead {
  display: grid !important;
  grid-template-columns: 1fr 1.2fr !important;
  gap: clamp(28px, 5vw, 70px) !important;
  align-items: start !important;
}
.ts-sec-lead .ts-sec-head { margin-bottom: 0 !important; }
.ts-sec-lead .ts-sec-title { max-width: 14ch !important; }
.ts-sec-lead-prose {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  font-size: 15.5px !important;
  line-height: 1.78 !important;
  color: var(--c-fg) !important;
}
.ts-sec-lead-prose p {
  margin: 0 !important;
}
.ts-sec-lead-prose p:first-child::first-line {
  font-weight: 700 !important;
}

/* --- "İnovasyon & Teknoloji" — full-bleed koyu banner (kırmızı aksanlı) --- */
.ts-innov {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  padding: clamp(54px, 8vw, 96px) 0 !important;
  background:
    linear-gradient(180deg, #11192a 0%, #0c111d 100%) !important;
  color: #fff !important;
  border-radius: 22px !important;
  margin: clamp(24px, 4vw, 40px) 0 !important;
}
.ts-innov::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  background:
    radial-gradient(60% 80% at 90% 10%, rgba(212, 31, 38, .25) 0%, transparent 60%),
    radial-gradient(50% 70% at 10% 100%, rgba(31, 90, 212, .15) 0%, transparent 60%) !important;
  z-index: -1 !important;
}
.ts-innov::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, .03) 0 1px,
      transparent 1px 22px
    ) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
.ts-innov .ts-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1.4fr !important;
  gap: clamp(28px, 5vw, 60px) !important;
  align-items: center !important;
}
.ts-innov-head { max-width: 22ch !important; }
.ts-innov-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--c-accent) !important;
}
.ts-innov-eyebrow::before {
  content: "" !important;
  width: 32px !important; height: 2px !important;
  background: var(--c-accent) !important;
}
.ts-innov-title {
  margin: 14px 0 0 !important;
  font-size: clamp(1.45rem, 2.6vw, 1.95rem) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -.5px !important;
  color: #fff !important;
}
.ts-innov-prose {
  font-size: 15px !important;
  line-height: 1.78 !important;
  color: rgba(255, 255, 255, .82) !important;
  margin: 0 !important;
}
.ts-innov-stats {
  margin-top: 22px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}
.ts-innov-stat {
  padding: 18px 0 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .14) !important;
}
.ts-innov-stat-n {
  display: block !important;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem) !important;
  font-weight: 800 !important;
  color: var(--c-accent) !important;
  letter-spacing: -.5px !important;
}
.ts-innov-stat-l {
  display: block !important;
  margin-top: 6px !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  color: rgba(255, 255, 255, .65) !important;
  font-weight: 600 !important;
}

/* --- Sektör hero — yan görselli düzen (mevcut .ts-hero.has-img + tag farkı) --- */
.ts-hero.has-img .ts-pf-tag.is-sector {
  background: var(--c-accent) !important;
  color: #fff !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  padding: 9px 14px !important;
}

/* ============================== DUYARLI (SEKTÖR) ============================== */
@media (max-width: 1080px) {
  .ts-sector-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 880px) {
  .ts-sector-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ts-sec-lead { grid-template-columns: 1fr !important; gap: 22px !important; }
  .ts-sec-lead .ts-sec-title { max-width: none !important; }
  .ts-innov .ts-wrap { grid-template-columns: 1fr !important; }
  .ts-innov-stats { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 520px) {
  .ts-sector-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .ts-sector-img { aspect-ratio: 16 / 10 !important; }
  .ts-innov-stats { grid-template-columns: 1fr !important; gap: 12px !important; }
  .ts-innov-stat { padding: 14px 0 0 !important; }
}

/* Hero yanına yerleşen son haber kartı (blog index sayfası) */
.ts-feat-post {
  display: grid !important;
  grid-template-columns: 1fr !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
  position: relative !important;
  max-width: 420px !important;
  width: 100% !important;
  margin-left: auto !important;
}
.ts-feat-post:hover {
  transform: translateY(-5px) !important;
  border-color: color-mix(in srgb, var(--c-accent) 30%, var(--c-border)) !important;
  box-shadow: var(--c-shadow) !important;
}
.ts-feat-post-img {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  background: var(--c-bg2) !important;
  overflow: hidden !important;
}
.ts-feat-post-img img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
  transition: transform .55s ease !important;
}
.ts-feat-post:hover .ts-feat-post-img img { transform: scale(1.06) !important; }
.ts-feat-post-noimg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--c-accent) 12%, var(--c-bg2)) 0%, var(--c-bg2) 60%, var(--c-soft) 100%) !important;
  color: var(--c-accent) !important;
}
.ts-feat-post-img.is-broken img { display: none !important; }
.ts-feat-post-noimg svg { width: 90px !important; height: 64px !important; opacity: .5 !important; }
.ts-feat-post-tag {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 12px !important;
  background: var(--c-accent) !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
}
.ts-feat-post-body {
  padding: 18px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.ts-feat-post-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--c-muted) !important;
}
.ts-feat-post-title {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: -.3px !important;
  color: var(--c-fg) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.ts-feat-post:hover .ts-feat-post-title { color: var(--c-accent) !important; }
.ts-feat-post-ex {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--c-muted) !important;
  line-height: 1.55 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.ts-feat-post-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 4px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--c-accent) !important;
}
.ts-feat-post-cta svg { width: 14px !important; height: 14px !important; transition: transform .2s ease !important; }
.ts-feat-post:hover .ts-feat-post-cta svg { transform: translateX(4px) !important; }

/* ============================== TEPRO FOOTER ============================== */
/* Light: tam kurumsal kırmızı (#d41f26) zemin, beyaz metin.
   Dark : derin lacivert (#0c111d) zemin, soluk beyaz + kırmızı vurgu. */
.tepro-footer {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #d41f26 0%, #b21a20 100%) !important;
  color: #fff !important;
  font-family: "Manrope", system-ui, -apple-system, sans-serif !important;
  margin-top: 0 !important;
}
html.dark .tepro-footer {
  background: linear-gradient(180deg, #131d29 0%, #0a0d18 100%) !important;
  color: #eef1f6 !important;
}
.tepro-footer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.tepro-footer::after {
  content: "" !important;
  position: absolute !important;
  top: -200px !important;
  right: -120px !important;
  width: 460px !important; height: 460px !important;
  background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 65%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
html.dark .tepro-footer::after {
  background: radial-gradient(circle, rgba(212,31,38,.22) 0%, transparent 65%) !important;
}
.tepro-footer .tf-wrap {
  position: relative !important;
  z-index: 1 !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: clamp(48px, 7vw, 80px) clamp(18px, 4vw, 40px) 0 !important;
}

/* ---- üst bölüm: marka + iletişim ---- */
.tf-top {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: clamp(28px, 5vw, 60px) !important;
  padding-bottom: clamp(36px, 5vw, 52px) !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
}
html.dark .tf-top { border-bottom-color: rgba(255,255,255,.08) !important; }
.tf-brand .tf-logo {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.tf-brand .tf-logo img {
  display: block !important;
  height: 56px !important;
  width: auto !important;
  /* Light kırmızı zeminde logo beyaz → PNG'yi filter ile beyaza çevir */
  filter: brightness(0) invert(1) !important;
}
html.dark .tf-brand .tf-logo img {
  /* Dark zeminde logo orijinal (kırmızı) */
  filter: none !important;
}
.tf-slogan {
  margin: 18px 0 22px !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,.92) !important;
  max-width: 38ch !important;
}
html.dark .tf-slogan { color: rgba(255,255,255,.78) !important; }
.tf-socials { display: inline-flex !important; gap: 10px !important; }
.tf-social {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  transition: background .2s ease, transform .2s ease, color .2s ease !important;
  text-decoration: none !important;
}
.tf-social:hover {
  background: #fff !important;
  color: #d41f26 !important;
  transform: translateY(-2px) !important;
}
html.dark .tf-social { background: rgba(245,71,77,.14) !important; color: #f5474d !important; }
html.dark .tf-social:hover { background: #f5474d !important; color: #fff !important; }
.tf-social svg { width: 18px !important; height: 18px !important; }

.tf-contact { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.tf-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.85) !important;
  margin-bottom: 4px !important;
}
.tf-eyebrow::before {
  content: "" !important;
  width: 22px !important; height: 2px !important;
  background: #fff !important;
}
html.dark .tf-eyebrow { color: #f5474d !important; }
html.dark .tf-eyebrow::before { background: #f5474d !important; }
.tf-contact-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  background: rgba(255,255,255,.08) !important;
  border-radius: 11px !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  transition: background .2s ease, transform .2s ease !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}
.tf-contact-row:hover {
  background: rgba(255,255,255,.14) !important;
  transform: translateX(2px) !important;
}
html.dark .tf-contact-row { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.06) !important; }
html.dark .tf-contact-row:hover { background: rgba(245,71,77,.08) !important; border-color: rgba(245,71,77,.2) !important; }
.tf-contact-row small {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.7) !important;
  margin-bottom: 4px !important;
}
html.dark .tf-contact-row small { color: rgba(255,255,255,.55) !important; }
.tf-contact-ic {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}
.tf-contact-ic svg { width: 18px !important; height: 18px !important; }
html.dark .tf-contact-ic { background: rgba(245,71,77,.18) !important; color: #f5474d !important; }

/* ---- 4 sütun link grid ---- */
.tf-cols {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(20px, 3vw, 40px) !important;
  padding: clamp(36px, 5vw, 52px) 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
}
html.dark .tf-cols { border-bottom-color: rgba(255,255,255,.08) !important; }
.tf-col-h {
  margin: 0 0 16px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  position: relative !important;
  padding-left: 14px !important;
}
.tf-col-h::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 6px !important; height: 6px !important;
  background: #fff !important;
  border-radius: 50% !important;
}
html.dark .tf-col-h { color: #f5474d !important; }
html.dark .tf-col-h::before { background: #f5474d !important; }
.tf-col-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.tf-col-list li { margin: 0 0 8px !important; }
.tf-col-item-h {
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  letter-spacing: 0 !important;
  line-height: inherit !important;
  text-transform: none !important;
}
.tf-col-list a {
  color: rgba(255,255,255,.88) !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  transition: color .15s ease, padding-left .2s ease !important;
  display: inline-block !important;
  padding-left: 0 !important;
}
.tf-col-list a:hover {
  color: #fff !important;
  padding-left: 6px !important;
}
html.dark .tf-col-list a { color: rgba(255,255,255,.72) !important; }
html.dark .tf-col-list a:hover { color: #f5474d !important; }

/* ---- subfooter ---- */
.tf-sub {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 22px 0 26px !important;
  font-size: 12.5px !important;
  color: rgba(255,255,255,.85) !important;
}
html.dark .tf-sub { color: rgba(255,255,255,.6) !important; }
.tf-copy { letter-spacing: .2px !important; }
.tf-legal { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 6px 22px !important; }
.tf-legal a {
  color: rgba(255,255,255,.85) !important;
  text-decoration: none !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  position: relative !important;
  transition: color .15s ease !important;
}
.tf-legal a:hover { color: #fff !important; }
.tf-legal a::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important;
  bottom: -3px !important;
  height: 1px !important;
  background: currentColor !important;
  transform: scaleX(0) !important;
  transition: transform .2s ease !important;
  transform-origin: left !important;
}
.tf-legal a:hover::after { transform: scaleX(1) !important; }
html.dark .tf-legal a { color: rgba(255,255,255,.65) !important; }
html.dark .tf-legal a:hover { color: #f5474d !important; }

@media (max-width: 900px) {
  .tf-top { grid-template-columns: 1fr !important; }
  .tf-cols { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px) {
  .tf-cols { grid-template-columns: 1fr !important; }
  .tf-sub { justify-content: flex-start !important; }
}

/* ============================== BLOG (HABERLER) ============================== */
/* Liste, kategori, etiket ve tek post sayfalarında ortak bileşenler. */

/* Breadcrumb */
.ts-breadcrumb {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 22px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--c-muted) !important;
}
.ts-breadcrumb a { color: var(--c-muted) !important; text-decoration: none !important; transition: color .15s ease !important; }
.ts-breadcrumb a:hover { color: var(--c-accent) !important; }
.ts-breadcrumb span[aria-hidden] { color: var(--c-border) !important; }
.ts-breadcrumb-current { color: var(--c-accent) !important; }

/* Kategori kart grid (blog liste sayfası) */
.ts-cat-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
  margin-top: 28px !important;
}
.ts-cat-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 22px !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 13px !important;
  text-decoration: none !important;
  color: inherit !important;
  position: relative !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
  overflow: hidden !important;
}
.ts-cat-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: var(--c-accent) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform .35s ease !important;
}
.ts-cat-card:hover {
  transform: translateY(-4px) !important;
  border-color: color-mix(in srgb, var(--c-accent) 30%, var(--c-border)) !important;
  box-shadow: var(--c-shadow) !important;
}
.ts-cat-card:hover::before { transform: scaleX(1) !important; }
.ts-cat-ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important; height: 46px !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--c-accent) 12%, transparent) !important;
  color: var(--c-accent) !important;
}
.ts-cat-ic svg { width: 22px !important; height: 22px !important; }
.ts-cat-body { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.ts-cat-name { font-size: 17px !important; font-weight: 800 !important; letter-spacing: -.2px !important; color: var(--c-fg) !important; }
.ts-cat-desc { font-size: 13px !important; color: var(--c-muted) !important; line-height: 1.55 !important; }
.ts-cat-count {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--c-accent) !important;
}
.ts-cat-count svg { width: 14px !important; height: 14px !important; transition: transform .2s ease !important; }
.ts-cat-card:hover .ts-cat-count svg { transform: translateX(3px) !important; }

/* Kategori chip'leri (filtre barı) */
.ts-cat-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 32px !important;
}
.ts-cat-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 14px !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
  color: var(--c-fg) !important;
  text-decoration: none !important;
  background: var(--c-card) !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease !important;
}
.ts-cat-chip:hover { border-color: var(--c-accent) !important; color: var(--c-accent) !important; }
.ts-cat-chip.is-active { background: var(--c-accent) !important; color: #fff !important; border-color: var(--c-accent) !important; }
.ts-cat-chip.is-pill { background: color-mix(in srgb, var(--c-accent) 10%, transparent) !important; color: var(--c-accent) !important; border-color: transparent !important; }

/* Post kart grid */
.ts-post-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-top: 28px !important;
}
.ts-post-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 13px !important;
  text-decoration: none !important;
  color: inherit !important;
  overflow: hidden !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
  position: relative !important;
}
.ts-post-card:hover {
  transform: translateY(-5px) !important;
  border-color: color-mix(in srgb, var(--c-accent) 30%, var(--c-border)) !important;
  box-shadow: var(--c-shadow) !important;
}
.ts-post-card-media {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  background: var(--c-bg2) !important;
  overflow: hidden !important;
}
.ts-post-card-media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  transition: transform .5s ease !important;
}
.ts-post-card:hover .ts-post-card-media img { transform: scale(1.06) !important; }
.ts-post-card-noimg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important; /* img'in altında; broken olunca üstüne çıkar */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--c-accent) 8%, var(--c-bg2)) 0%, var(--c-bg2) 60%, var(--c-soft) 100%) !important;
  color: var(--c-accent) !important;
}
.ts-post-card-noimg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(135deg, rgba(212,31,38,.04) 0 1px, transparent 1px 14px) !important;
  pointer-events: none !important;
}
.ts-post-card-noimg svg {
  position: relative !important;
  z-index: 1 !important;
  width: 80px !important; height: 60px !important;
  opacity: .5 !important;
}
/* img varlığında üste çıkar, placeholder gizli kalır */
.ts-post-card-media img { z-index: 1 !important; }
.ts-post-card-media.is-broken img { display: none !important; }
.ts-post-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 20px 22px 22px !important;
  flex: 1 !important;
}
.ts-post-card-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--c-muted) !important;
  letter-spacing: .3px !important;
}
.ts-post-card-meta time { letter-spacing: .2px !important; }
.ts-post-card-cat {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--c-accent) 12%, transparent) !important;
  color: var(--c-accent) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
}
.ts-post-card-time { display: inline-flex !important; align-items: center !important; gap: 5px !important; }
.ts-post-card-time svg { width: 12px !important; height: 12px !important; }
.ts-post-card-title {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.32 !important;
  letter-spacing: -.3px !important;
  color: var(--c-fg) !important;
}
.ts-post-card:hover .ts-post-card-title { color: var(--c-accent) !important; }
.ts-post-card-ex {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--c-muted) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.ts-post-card-cta {
  margin-top: auto !important;
  padding-top: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--c-accent) !important;
}
.ts-post-card-cta svg { width: 14px !important; height: 14px !important; transition: transform .2s ease !important; }
.ts-post-card:hover .ts-post-card-cta svg { transform: translateX(4px) !important; }

/* Tek post sayfası */
.ts-post-head { margin: 0 0 26px !important; text-align: left !important; }
.ts-post-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--c-muted) !important;
}
.ts-post-time { display: inline-flex !important; align-items: center !important; gap: 5px !important; }
.ts-post-time svg { width: 13px !important; height: 13px !important; }
.ts-post-title {
  margin: 0 0 14px !important;
  font-size: clamp(1.8rem, 4vw, 2.7rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.6px !important;
  line-height: 1.15 !important;
  color: var(--c-fg) !important;
}
.ts-post-excerpt {
  margin: 0 0 20px !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--c-muted) !important;
  max-width: 60ch !important;
}
.ts-post-author {
  margin: 0 0 14px !important;
  font-size: 13.5px !important;
  color: var(--c-muted) !important;
}
.ts-post-author small {
  display: inline-block !important;
  margin-right: 6px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--c-accent) !important;
}
.ts-post-hero-img {
  margin: 0 0 32px !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  box-shadow: var(--c-shadow) !important;
  aspect-ratio: 16 / 9 !important;
}
.ts-post-hero-img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.ts-post-body {
  margin: 0 0 32px !important;
  font-size: 17px !important;
  line-height: 1.82 !important;
  color: var(--c-fg) !important;
  max-width: 68ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.ts-post-body p {
  margin: 0 0 1.15em !important;
  font-weight: 400 !important;
}
/* Lead paragraph — ilk paragrafa yumuşak ağırlık + sol kırmızı bar */
.ts-post-body > p:first-of-type {
  position: relative !important;
  margin-bottom: 1.4em !important;
  padding: 4px 0 4px 18px !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: var(--c-fg) !important;
  font-weight: 500 !important;
  border-left: 3px solid var(--c-accent) !important;
}
/* Vurgulu cümleler (paragrafın başındaki <strong> / <b>) */
.ts-post-body p > strong:first-child,
.ts-post-body p > b:first-child {
  display: inline !important;
  color: var(--c-fg) !important;
  font-weight: 700 !important;
  letter-spacing: -.1px !important;
}
.ts-post-body p > strong:first-child::after,
.ts-post-body p > b:first-child::after {
  content: " — " !important;
  color: var(--c-accent) !important;
  font-weight: 800 !important;
}
.ts-post-body h2 {
  margin: 1.6em 0 .55em !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -.4px !important;
  color: var(--c-fg) !important;
  line-height: 1.25 !important;
}
.ts-post-body h3 {
  margin: 1.4em 0 .5em !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  letter-spacing: -.3px !important;
  color: var(--c-fg) !important;
  line-height: 1.3 !important;
}
.ts-post-body a {
  color: var(--c-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.ts-post-body ul,
.ts-post-body ol { margin: 0 0 1em 1.2em !important; padding: 0 !important; }
.ts-post-body li { margin: 0 0 .35em !important; }
.ts-post-body blockquote {
  position: relative !important;
  margin: 2em 0 !important;
  padding: 22px 28px 22px 60px !important;
  border-left: 4px solid var(--c-accent) !important;
  background: color-mix(in srgb, var(--c-accent) 6%, transparent) !important;
  border-radius: 0 13px 13px 0 !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  font-style: italic !important;
  color: var(--c-fg) !important;
}
.ts-post-body blockquote::before {
  content: "“" !important;
  position: absolute !important;
  top: -4px !important;
  left: 14px !important;
  font-size: 64px !important;
  line-height: 1 !important;
  color: var(--c-accent) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-style: normal !important;
  opacity: .6 !important;
}
.ts-post-body img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 13px !important;
  margin: 2em auto !important;
  box-shadow: var(--c-shadow-sm) !important;
}
/* Yatay ayırıcı — kreatif kısa kırmızı çizgi (her 3 paragrafta bir kullanılabilir,
   şu an manuel hr / sub-section için) */
.ts-post-body hr {
  border: 0 !important;
  margin: 2.4em auto !important;
  width: 64px !important;
  height: 3px !important;
  background: var(--c-accent) !important;
  border-radius: 2px !important;
  opacity: .8 !important;
}

/* Yakalanan post içeriğindeki WP/Elementor wrapper'ları flatten — sıkışıklık çözümü.
   sanitize class attribute'larını çıkardığı için class selektörü çoğunlukla iş görmez,
   yine sızıntı kalanlar için + tüm child div'leri block tam genişliğe alıyoruz. */
.ts-post-body > div,
.ts-post-body > div > div,
.ts-post-body > section,
.ts-post-body > section > div,
.ts-post-body .elementor-widget-wrap,
.ts-post-body .elementor-column-wrap,
.ts-post-body .elementor-section,
.ts-post-body .elementor-row,
.ts-post-body .elementor-container,
.ts-post-body .elementor-widget-container,
.ts-post-body .elementor-column,
.ts-post-body [data-element_type] {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  flex: none !important;
  position: static !important;
}
/* Elementor başlık widget — sade h2/h3 */
.ts-post-body .elementor-heading-title {
  margin: 1.6em 0 .55em !important;
  font-weight: 800 !important;
  letter-spacing: -.4px !important;
  line-height: 1.25 !important;
  color: var(--c-fg) !important;
}
.ts-post-body h2.elementor-heading-title { font-size: 1.45rem !important; }
.ts-post-body h3.elementor-heading-title { font-size: 1.2rem !important; }
/* WP attachment görselleri */
.ts-post-body .attachment-large,
.ts-post-body .attachment-full,
.ts-post-body .attachment-medium,
.ts-post-body .attachment-thumbnail,
.ts-post-body .wp-image,
.ts-post-body img[class*="wp-image"] {
  border-radius: 13px !important;
  margin: 2em auto !important;
}
.ts-post-body p.p1, .ts-post-body p.p2 { margin: 0 0 1.15em !important; }
.ts-post-body span.s1, .ts-post-body span.s2 { font-weight: inherit !important; }
.ts-post-body figure {
  margin: 2em auto !important;
  text-align: center !important;
}
.ts-post-body figure figcaption {
  margin-top: 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--c-muted) !important;
}
/* Listeler */
.ts-post-body ul,
.ts-post-body ol {
  margin: 1.2em 0 1.4em !important;
  padding-left: 1.4em !important;
}
.ts-post-body ul li,
.ts-post-body ol li {
  margin: 0 0 .55em !important;
  padding-left: 4px !important;
}
.ts-post-body ul li::marker { color: var(--c-accent) !important; font-size: 1.1em !important; }

/* Etiket listesi */
.ts-tag-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid var(--c-border) !important;
  margin: 24px 0 0 !important;
}
.ts-tag-list .ts-eyebrow { margin-right: 6px !important; }
.ts-tag-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 12px !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--c-muted) !important;
  text-decoration: none !important;
  background: var(--c-card) !important;
  transition: color .15s ease, border-color .15s ease, background .15s ease !important;
}
.ts-tag-chip:hover { color: var(--c-accent) !important; border-color: var(--c-accent) !important; background: color-mix(in srgb, var(--c-accent) 6%, transparent) !important; }

/* Etiket sayfa başlığı */
.ts-tag-head { margin: 0 0 32px !important; }
.ts-tag-head h1 { margin: 8px 0 0 !important; }

/* Geri dön linki */
.ts-post-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  margin: 12px 0 !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 13px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  color: var(--c-fg) !important;
  text-decoration: none !important;
  background: var(--c-card) !important;
  transition: border-color .15s ease, color .15s ease !important;
}
.ts-post-back:hover { color: var(--c-accent) !important; border-color: var(--c-accent) !important; }
.ts-post-back svg {
  width: 14px !important; height: 14px !important;
  transform: rotate(180deg) !important;
  transition: transform .2s ease !important;
}
.ts-post-back:hover svg { transform: rotate(180deg) translateX(4px) !important; }

@media (max-width: 1200px) {
  .ts-cat-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 1080px) {
  .ts-cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ts-post-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .ts-cat-grid { grid-template-columns: 1fr !important; }
  .ts-post-grid { grid-template-columns: 1fr !important; }
}

/* ============================== DUYARLI ============================== */
@media (max-width: 900px) {
  .ts-contact-grid { grid-template-columns: 1fr !important; }
  .ts-cards3 { grid-template-columns: 1fr !important; }
  .ts-brand-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .ts-photo-feature { grid-template-columns: 1fr !important; }
  .ts-pf-photo { aspect-ratio: 4 / 5 !important; max-height: 440px !important; }
  .ts-photo-feature::before,
  .ts-photo-feature::after { display: none !important; }
  .ts-hero.has-img .ts-hero-in { grid-template-columns: 1fr !important; }
  .ts-hero-img { justify-self: center !important; max-width: 340px !important; }
  .ts-hero.has-img::after { display: none !important; }
  .ts-hero.has-aside .ts-hero-in { grid-template-columns: 1fr !important; }
  .ts-hero-aside { justify-self: stretch !important; max-width: none !important; }
  .ts-side-photo { grid-template-columns: 1fr !important; }
}
@media (max-width: 920px) {
  .ts-cta-banner { grid-template-columns: 1fr !important; text-align: center !important; }
  .ts-cta-btn { justify-self: center !important; }
  .ts-cta-desc { margin-left: auto !important; margin-right: auto !important; }
  .ts-steps-cols { grid-template-columns: 1fr !important; }
  .ts-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .ts-stat { border-right: 0 !important; border-bottom: 1px solid var(--c-border) !important; padding: 24px 14px !important; }
  .ts-stat:nth-child(odd) { border-right: 1px solid var(--c-border) !important; }
  .ts-stat:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .ts-ceo { grid-template-columns: 1fr !important; }
  .ts-ceo .ts-portrait { max-width: 360px !important; margin: 0 auto !important; }
}
@media (max-width: 560px) {
  .ts-field-grid { grid-template-columns: 1fr !important; }
  .ts-brand-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ts-form { padding: 20px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   ÜRÜN MODÜLÜ — markalar, ürünler, katalog, ürün detay
   ════════════════════════════════════════════════════════════════════ */

/* ─── Ürün kartı (grid item — marka sayfası + katalog + related) ─── */
.ts-prod-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 24px !important;
}
.ts-prod-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: var(--c-fg) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  box-shadow: var(--c-shadow-sm) !important;
}
.ts-prod-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--c-accent) !important;
  box-shadow: 0 18px 38px -16px rgba(212, 31, 38, .25), var(--c-shadow-md) !important;
}
.ts-prod-card-media {
  position: relative !important;
  aspect-ratio: 4/3 !important;
  background: var(--c-soft) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 18px !important;
}
.ts-prod-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1) !important;
  mix-blend-mode: multiply !important;
}
/* JPG ürün görselleri beyaz arka planlı olduğundan dark mode'da kart media zemini sabit açık tutulur
   (Apple/Bosch pratiği). Multiply, beyazı kart rengine "çarpıp" görünmez yapar — her iki modda da temiz. */
html.dark .ts-prod-card-media { background: #f5f5f5 !important; }
html.dark .ts-prod-card-noimg { color: #6b7585 !important; }
.ts-prod-card:hover .ts-prod-card-media img { transform: scale(1.03) !important; }
.ts-prod-card-noimg {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font: 800 36px/1 Manrope, system-ui, sans-serif !important;
  letter-spacing: 2px !important;
  color: var(--c-muted) !important;
  opacity: .35 !important;
  z-index: 0 !important;
}
.ts-prod-card-media img + .ts-prod-card-noimg { display: none !important; }
.ts-prod-card-media.is-broken .ts-prod-card-noimg { display: flex !important; }

/* Cover altı kategori rozeti — tıklanır, kategori filtreli kataloğa gider */
.ts-prod-card-cat {
  display: inline-flex !important;
  align-self: flex-start !important;
  margin: 14px 20px 0 !important;
  padding: 6px 12px !important;
  background: var(--c-soft) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 999px !important;
  font: 700 10.5px/1 Manrope, system-ui, sans-serif !important;
  letter-spacing: 1.1px !important;
  text-transform: uppercase !important;
  color: var(--c-muted) !important;
  cursor: pointer !important;
  transition: background .15s, color .15s, border-color .15s !important;
}
.ts-prod-card-cat:hover,
.ts-prod-card-cat:focus-visible {
  background: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  color: #ffffff !important;
  outline: none !important;
}
html.dark .ts-prod-card-cat { background: #1a2233 !important; }

/* Marka sayfası kategori chip filtresi — modern UX */
.ts-bp-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 0 28px !important;
}
.ts-bp-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  background: var(--c-card) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: 999px !important;
  font: 700 13px/1 Manrope, system-ui, sans-serif !important;
  letter-spacing: .3px !important;
  color: var(--c-fg) !important;
  cursor: pointer !important;
  transition: background .2s, border-color .2s, color .2s, transform .15s !important;
}
.ts-bp-chip em {
  font-style: normal !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  background: var(--c-soft) !important;
  border-radius: 999px !important;
  color: var(--c-muted) !important;
  transition: background .2s, color .2s !important;
}
.ts-bp-chip:hover {
  border-color: var(--c-accent) !important;
  transform: translateY(-1px) !important;
}
.ts-bp-chip.is-active {
  background: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  color: #ffffff !important;
}
.ts-bp-chip.is-active em {
  background: rgba(255, 255, 255, .22) !important;
  color: #ffffff !important;
}
html.dark .ts-bp-chip em { background: #1a2233 !important; }
.ts-prod-card-body {
  padding: 18px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
}
.ts-prod-card-tag {
  display: inline-flex !important;
  align-self: flex-start !important;
  padding: 4px 9px !important;
  background: var(--c-soft) !important;
  border-radius: 6px !important;
  font: 700 10.5px/1 Manrope, system-ui, sans-serif !important;
  letter-spacing: 1.3px !important;
  text-transform: uppercase !important;
  color: var(--c-accent) !important;
}
.ts-prod-card-title {
  margin: 0 !important;
  font: 800 17px/1.3 Manrope, system-ui, sans-serif !important;
  letter-spacing: -.3px !important;
  color: var(--c-fg) !important;
}
.ts-prod-card-ex {
  margin: 0 !important;
  font: 500 13.5px/1.55 Manrope, system-ui, sans-serif !important;
  color: var(--c-muted) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.ts-prod-card-cta {
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--c-border) !important;
  font: 800 12px/1 Manrope, system-ui, sans-serif !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--c-accent) !important;
}

/* ─── Markalar index grid ─────────────────────────────────────────── */
.ts-brand-grid-rich {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 22px !important;
}
.ts-brand-card {
  display: grid !important;
  grid-template-columns: 110px 1fr !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 22px !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 13px !important;
  text-decoration: none !important;
  color: var(--c-fg) !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
  box-shadow: var(--c-shadow-sm) !important;
}
.ts-brand-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--c-accent) !important;
  box-shadow: 0 16px 34px -14px rgba(212, 31, 38, .25), var(--c-shadow-md) !important;
}
.ts-brand-card-logo {
  width: 110px !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--c-soft) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  overflow: hidden !important;
}
.ts-brand-card-logo img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
html.dark .ts-brand-card-logo { background: #1a2233 !important; }
.ts-brand-card-body { display: flex !important; flex-direction: column !important; gap: 6px !important; min-width: 0 !important; }
.ts-brand-card-name {
  margin: 0 !important;
  font: 800 16px/1.25 Manrope, system-ui, sans-serif !important;
  letter-spacing: -.3px !important;
  color: var(--c-fg) !important;
}
.ts-brand-card-desc {
  margin: 0 !important;
  font: 500 12.5px/1.5 Manrope, system-ui, sans-serif !important;
  color: var(--c-muted) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.ts-brand-card-meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font: 800 11px/1 Manrope, system-ui, sans-serif !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--c-accent) !important;
  margin-top: 4px !important;
}
.ts-brand-card-meta svg { width: 14px !important; height: 14px !important; stroke: var(--c-accent) !important; }

/* ════════════════════════════════════════════════════════════════════
   MARKALAR INDEX (/markalarimiz/) — Kreatif kart grid
   ════════════════════════════════════════════════════════════════════ */
/* Hero başlık bloğu — büyük tipografi + dekoratif sayaç */
.ts-bi-hero { padding-top: clamp(48px, 8vw, 96px) !important; padding-bottom: 0 !important; }
.ts-bi-head {
  position: relative !important;
  max-width: 900px !important;
  padding-right: 200px !important;
}
.ts-bi-eyebrow {
  color: var(--c-accent) !important;
  font-size: 12px !important;
  letter-spacing: 2.5px !important;
}
.ts-bi-title {
  margin: 14px 0 16px !important;
  font: 800 clamp(2.4rem, 6vw, 4.2rem)/1.02 Manrope, system-ui, sans-serif !important;
  letter-spacing: -1.6px !important;
  color: var(--c-fg) !important;
}
.ts-bi-sub {
  margin: 0 !important;
  font: 500 clamp(15px, 1.6vw, 18px)/1.65 Manrope, system-ui, sans-serif !important;
  color: var(--c-muted) !important;
  max-width: 56ch !important;
}
.ts-bi-count {
  position: absolute !important;
  top: 10px !important;
  right: 0 !important;
  font: 800 clamp(64px, 10vw, 140px)/.9 Manrope, system-ui, sans-serif !important;
  letter-spacing: -4px !important;
  color: var(--c-accent) !important;
  opacity: .12 !important;
  pointer-events: none !important;
}
@media (max-width: 720px) {
  .ts-bi-head { padding-right: 0 !important; }
  .ts-bi-count { display: none !important; }
}

/* Grid — kreatif tall cards, logo başrolde */
.ts-bi-section { padding-top: clamp(36px, 6vw, 60px) !important; }
.ts-bi-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  gap: 22px !important;
}
.ts-bi-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 16px !important;
  text-decoration: none !important;
  color: var(--c-fg) !important;
  isolation: isolate !important;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .25s ease, box-shadow .3s ease !important;
}
.ts-bi-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-accent) 10%, transparent) 0%, transparent 55%) !important;
  opacity: 0 !important;
  transition: opacity .3s ease !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.ts-bi-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--c-accent) !important;
  box-shadow: 0 26px 50px -22px rgba(212, 31, 38, .35), 0 8px 18px -8px rgba(20, 24, 33, .15) !important;
}
.ts-bi-card:hover::before { opacity: 1 !important; }

/* Numerik badge — sol-üst köşede ince accent kontur */
.ts-bi-num {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 22px !important;
  padding: 0 8px !important;
  background: transparent !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: 999px !important;
  font: 800 10.5px/1 Manrope, system-ui, sans-serif !important;
  letter-spacing: 1.5px !important;
  color: var(--c-muted) !important;
  transition: border-color .25s, color .25s !important;
}
.ts-bi-card:hover .ts-bi-num { border-color: var(--c-accent) !important; color: var(--c-accent) !important; }

/* Featured (örn. KraussMaffei) — sol köşede accent dot */
.ts-bi-card.is-featured .ts-bi-num::after {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  margin-left: 6px !important;
  background: var(--c-accent) !important;
  border-radius: 999px !important;
}

/* Logo bölgesi — büyük, modern container */
.ts-bi-logo {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  aspect-ratio: 16 / 11 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--c-soft) !important;
  padding: 28px 36px !important;
  border-bottom: 1px solid var(--c-border) !important;
  overflow: hidden !important;
  transition: background .3s ease !important;
}
html.dark .ts-bi-logo { background: #1a2233 !important; }
.ts-bi-logo img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1) !important;
  filter: saturate(.92) !important;
}
.ts-bi-card:hover .ts-bi-logo img { transform: scale(1.06) !important; filter: saturate(1) !important; }
.ts-bi-logo-fallback {
  font: 800 48px/1 Manrope, system-ui, sans-serif !important;
  letter-spacing: 4px !important;
  color: var(--c-muted) !important;
  opacity: .35 !important;
}

/* Gövde: isim + kısa açıklama + arrow */
.ts-bi-body {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 22px 24px 24px !important;
  flex: 1 1 auto !important;
}
.ts-bi-name {
  margin: 0 !important;
  font: 800 18px/1.25 Manrope, system-ui, sans-serif !important;
  letter-spacing: -.4px !important;
  color: var(--c-fg) !important;
}
.ts-bi-desc {
  margin: 0 !important;
  font: 500 13.5px/1.55 Manrope, system-ui, sans-serif !important;
  color: var(--c-muted) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.ts-bi-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  margin-top: auto !important;
  align-self: flex-end !important;
  background: var(--c-soft) !important;
  border-radius: 999px !important;
  transition: background .25s, transform .25s !important;
}
html.dark .ts-bi-cta { background: #1a2233 !important; }
.ts-bi-cta svg { width: 16px !important; height: 16px !important; stroke: var(--c-fg) !important; transition: stroke .25s, transform .25s !important; }
.ts-bi-card:hover .ts-bi-cta { background: var(--c-accent) !important; transform: translateX(4px) !important; }
.ts-bi-card:hover .ts-bi-cta svg { stroke: #ffffff !important; }

@media (max-width: 560px) {
  .ts-bi-grid { gap: 16px !important; }
  .ts-bi-logo { aspect-ratio: 16 / 9 !important; padding: 24px 30px !important; }
  .ts-bi-body { padding: 18px 20px 20px !important; }
}

/* ─── Marka sayfası: tanıtım hero ─────────────────────────────────── */
.ts-brand-hero {
  display: grid !important;
  grid-template-columns: 315px 1fr !important;
  gap: 40px !important;
  align-items: center !important;
  padding: 36px !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 13px !important;
  box-shadow: var(--c-shadow-sm) !important;
}
.ts-brand-hero-logo {
  width: 315px !important;
  height: 210px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--c-soft) !important;
  border-radius: 13px !important;
  padding: 26px !important;
}
.ts-brand-hero-logo img { max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; }
html.dark .ts-brand-hero-logo { background: #1a2233 !important; }
.ts-brand-hero-text { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.ts-brand-hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 10px !important;
}
.ts-brand-ext, .ts-brand-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 11px 18px !important;
  border-radius: 11px !important;
  text-decoration: none !important;
  font: 700 13px/1 Manrope, system-ui, sans-serif !important;
  letter-spacing: .4px !important;
  transition: border-color .15s, background .15s, color .15s, transform .15s !important;
}
.ts-brand-ext {
  background: transparent !important;
  border: 1.5px solid var(--c-border) !important;
  color: var(--c-fg) !important;
}
.ts-brand-ext:hover {
  border-color: var(--c-accent) !important;
  background: color-mix(in srgb, var(--c-accent) 8%, transparent) !important;
}
.ts a.ts-brand-cta {
  background: var(--c-accent) !important;
  border: 1.5px solid var(--c-accent) !important;
  color: #ffffff !important;
}
.ts a.ts-brand-cta:hover {
  transform: translateY(-1px) !important;
  background: color-mix(in srgb, var(--c-accent) 88%, #000) !important;
  color: #ffffff !important;
}
.ts a.ts-brand-cta span { color: #ffffff !important; }
.ts-brand-ext svg, .ts-brand-cta svg { width: 15px !important; height: 15px !important; }

/* ─── Marka sayfası: ödüller / takdir bloğu ──────────────────────── */
.ts-brand-honors {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 26px 28px !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 13px !important;
  box-shadow: var(--c-shadow-sm) !important;
}
.ts-brand-honors-head {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.ts-brand-honors-img {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  background: var(--c-soft) !important;
  border-radius: 11px !important;
}
html.dark .ts-brand-honors-img { background: #1a2233 !important; }
.ts-brand-honors-img img { max-width: 100% !important; height: auto !important; max-height: 130px !important; object-fit: contain !important; }

/* ─── Marka sayfası: tanıtım videosu (bodyMd başında) ─────────────── */
.ts-brand-intro-video {
  display: block !important;
  margin: 0 0 28px !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  background: #000 !important;
  box-shadow: var(--c-shadow-sm) !important;
}
.ts-brand-intro-video video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ─── Video oynat/duraklat kulakçık butonu ─── */
/* Safari iOS + macOS native play overlay'ini öldür.
   - video'ya pointer-events: none (Safari etkileşim yoksa overlay çizmez)
   - tüm webkit shadow DOM pseudo'larını dev gibi gizle
   - -webkit-appearance: none start-playback-button için kritik */
.ts-video-host video {
  pointer-events: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
.ts-video-host video::-webkit-media-controls,
.ts-video-host video::-webkit-media-controls-panel,
.ts-video-host video::-webkit-media-controls-panel-container,
.ts-video-host video::-webkit-media-controls-overlay-enclosure,
.ts-video-host video::-webkit-media-controls-enclosure,
.ts-video-host video::-webkit-media-controls-overlay-play-button,
.ts-video-host video::-webkit-media-controls-start-playback-button,
.ts-video-host video::-webkit-media-controls-start-playback-glyph,
.ts-video-host video::-webkit-media-controls-play-button,
.ts-video-host video::-webkit-media-controls-fullscreen-button,
.ts-video-host video::-webkit-media-controls-mute-button,
.ts-video-host video::-webkit-media-controls-current-time-display,
.ts-video-host video::-webkit-media-controls-time-remaining-display,
.ts-video-host video::-webkit-media-controls-timeline,
.ts-video-host video::-webkit-media-controls-volume-slider,
.ts-video-host video::-webkit-media-controls-toggle-closed-captions-button,
.ts-video-host video::-internal-media-controls-overlay-cast-button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  pointer-events: none !important;
}
/* Safari iOS shadow DOM tüm kontrol gövdesi */
.ts-video-host video[controls] { -webkit-media-controls-overlay: none !important; }

.ts-video-toggle {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  background: rgba(8, 12, 20, .68) !important;
  border: 0 !important;
  /* Asimetrik kulakçık: sağ-üst kavisi 0, sol-alt yumuşak yuvarlak */
  border-radius: 0 0 0 22px !important;
  color: #ffffff !important;
  cursor: pointer !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  transition: background .2s ease, transform .2s ease, color .2s ease !important;
}
.ts-video-toggle::before {
  /* İnce monokrom kontur (kulakçık vurgusu) */
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, .18) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}
.ts-video-toggle:hover {
  background: rgba(245, 73, 3, .92) !important;
  color: #ffffff !important;
}
.ts-video-toggle:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: -4px !important;
}
.ts-video-toggle svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.ts-video-toggle .tvt-pause { display: none !important; }
.ts-video-toggle[data-state="playing"] .tvt-play { display: none !important; }
.ts-video-toggle[data-state="playing"] .tvt-pause { display: inline-block !important; }
@media (max-width: 560px) {
  .ts-video-toggle { width: 48px !important; height: 48px !important; border-radius: 0 0 0 18px !important; }
  .ts-video-toggle svg { width: 18px !important; height: 18px !important; }
}

/* ─── Marka sayfası: kategori-bazlı ürün grupları ─────────────────── */
.ts-brand-prod-group + .ts-brand-prod-group { margin-top: 40px !important; }
.ts-brand-prod-group-title {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--c-border) !important;
  font: 800 18px/1.2 Manrope, system-ui, sans-serif !important;
  letter-spacing: -.3px !important;
  color: var(--c-fg) !important;
}
.ts-brand-prod-group-title em {
  font: 700 11px/1 Manrope, system-ui, sans-serif !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  color: var(--c-muted) !important;
}

/* ─── Ürün sayfası: özel hero ─────────────────────────────────────── */
.ts-prod-hero {
  padding: 28px 0 16px !important;
  background: var(--c-bg2) !important;
}
.ts-prod-hero-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.05fr !important;
  gap: clamp(28px, 4vw, 56px) !important;
  align-items: center !important;
  margin-top: 18px !important;
}
.ts-prod-hero-text { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.ts-prod-hero-title {
  margin: 4px 0 0 !important;
  font: 800 clamp(32px, 4.6vw, 52px)/1.05 Manrope, system-ui, sans-serif !important;
  letter-spacing: -1.2px !important;
  color: var(--c-fg) !important;
}
.ts-prod-hero-tagline {
  margin: 0 !important;
  font: 500 19px/1.4 Manrope, system-ui, sans-serif !important;
  color: var(--c-accent) !important;
}
.ts-prod-hero-summary {
  margin: 0 !important;
  font: 500 15.5px/1.65 Manrope, system-ui, sans-serif !important;
  color: var(--c-muted) !important;
  max-width: 56ch !important;
}
.ts-prod-hero-cta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 10px !important;
}

/* ─── Hero altı yatay bilgi talep formu — sade, kartsız, çerçevesiz ── */
.ts-prod-inquiry-section {
  padding: 0 !important;
  background: var(--c-soft) !important;
  border-top: 1px solid var(--c-border) !important;
  border-bottom: 1px solid var(--c-border) !important;
}
html.dark .ts-prod-inquiry-section { background: #131d29 !important; }
.ts-prod-inquiry-section > .ts-wrap { padding-top: 26px !important; padding-bottom: 26px !important; }
.ts-prod-inquiry {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) 3fr !important;
  gap: 22px 36px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ts-prod-inquiry-head { display: flex !important; flex-direction: column !important; gap: 4px !important; min-width: 0 !important; }
.ts-prod-inquiry-title {
  margin: 0 !important;
  font: 800 19px/1.25 Manrope, system-ui, sans-serif !important;
  letter-spacing: -.3px !important;
  color: var(--c-fg) !important;
}
.ts-prod-inquiry-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr auto !important;
  gap: 12px !important;
  align-items: end !important;
}
.ts-prod-inquiry-field { display: flex !important; flex-direction: column !important; gap: 5px !important; min-width: 0 !important; }
.ts-prod-inquiry-field > span {
  font: 700 11px/1.2 Manrope, system-ui, sans-serif !important;
  letter-spacing: .9px !important;
  text-transform: uppercase !important;
  color: var(--c-muted) !important;
}
.ts-prod-inquiry-field input {
  width: 100% !important;
  height: 46px !important;
  padding: 0 14px !important;
  background: var(--c-bg) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: 10px !important;
  font: 500 14.5px/1 Manrope, system-ui, sans-serif !important;
  color: var(--c-fg) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.ts-prod-inquiry-field input:focus {
  outline: none !important;
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent) !important;
}
.ts-prod-inquiry-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 0 24px !important;
  height: 46px !important;
  background: var(--c-accent) !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font: 800 13.5px/1 Manrope, system-ui, sans-serif !important;
  letter-spacing: .4px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background .15s, transform .15s !important;
}
.ts-prod-inquiry-submit > span { color: #ffffff !important; }
.ts-prod-inquiry-submit:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c-accent) 88%, #000) !important;
  transform: translateY(-1px) !important;
}
.ts-prod-inquiry-submit:disabled { opacity: .65 !important; cursor: progress !important; }
.ts-prod-inquiry-submit svg { width: 16px !important; height: 16px !important; stroke: #ffffff !important; }

.ts-prod-inquiry-brochure {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 11px 16px !important;
  background: transparent !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: 11px !important;
  color: var(--c-fg) !important;
  font: 700 13px/1 Manrope, system-ui, sans-serif !important;
  text-decoration: none !important;
  transition: border-color .15s, color .15s, background .15s !important;
}
.ts-prod-inquiry-brochure:hover { border-color: var(--c-accent) !important; color: var(--c-accent) !important; }
.ts-prod-inquiry-brochure svg { width: 14px !important; height: 14px !important; stroke: currentColor !important; }

/* Sade alt çubuk — empty msg div koşullu, yer kaplamaz */
.ts-prod-inquiry-foot-bar { display: contents !important; }
.ts-prod-inquiry-privacy {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  font: 500 11.5px/1.5 Manrope, system-ui, sans-serif !important;
  color: var(--c-muted) !important;
}
.ts-prod-inquiry-msg {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  font: 600 13px/1.4 Manrope, system-ui, sans-serif !important;
}
.ts-prod-inquiry-msg:empty { display: none !important; }
.ts-prod-inquiry-msg.is-ok { color: #16a34a !important; }
.ts-prod-inquiry-msg.is-err { color: #ef4444 !important; }

@media (max-width: 900px) {
  .ts-prod-inquiry { grid-template-columns: 1fr !important; gap: 16px !important; }
  .ts-prod-inquiry-grid { grid-template-columns: 1fr 1fr !important; }
  .ts-prod-inquiry-submit { grid-column: 1 / -1 !important; width: 100% !important; }
}
@media (max-width: 520px) {
  .ts-prod-inquiry-grid { grid-template-columns: 1fr !important; }
}
.ts-prod-hero-img {
  position: relative !important;
  margin: 0 !important;
  aspect-ratio: 5/4 !important;
  background: var(--c-soft) !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  box-shadow: var(--c-shadow-md) !important;
  padding: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html.dark .ts-prod-hero-img { background: #f5f5f5 !important; }
.ts-prod-hero-img img { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; display: block !important; mix-blend-mode: multiply !important; }

/* Hero görsel altında marka + kategori badge'leri */
.ts-prod-hero-img-wrap { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.ts-prod-hero-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.ts-prod-hero-badge {
  display: inline-flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 10px 16px !important;
  background: var(--c-card) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: var(--c-fg) !important;
  transition: border-color .2s, transform .2s, box-shadow .2s !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
}
.ts-prod-hero-badge:hover {
  border-color: var(--c-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 22px -10px rgba(212, 31, 38, .25) !important;
}
.ts-prod-hero-badge-label {
  font: 700 9.5px/1.1 Manrope, system-ui, sans-serif !important;
  letter-spacing: 1.3px !important;
  text-transform: uppercase !important;
  color: var(--c-muted) !important;
  transition: color .2s !important;
}
.ts-prod-hero-badge:hover .ts-prod-hero-badge-label { color: var(--c-accent) !important; }
.ts-prod-hero-badge-value {
  font: 700 13px/1.3 Manrope, system-ui, sans-serif !important;
  letter-spacing: -.1px !important;
  color: var(--c-fg) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
@media (max-width: 560px) {
  .ts-prod-hero-badges { gap: 8px !important; }
  .ts-prod-hero-badge { padding: 9px 13px !important; }
}
.ts-prod-hero-noimg {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--c-muted) !important;
  opacity: .25 !important;
}
.ts-prod-hero-noimg svg { width: 80px !important; height: 80px !important; }
.ts-prod-hero-brandmark {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 80px !important;
  height: 50px !important;
  padding: 8px 12px !important;
  background: rgba(255, 255, 255, .92) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 16px -6px rgba(20, 24, 33, .25) !important;
}
.ts-prod-hero-brandmark img { max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; }

/* renderSitePage default hero'sunu ürün sayfasında gizle (custom hero kullanıyoruz) */
body:has(.ts-prod-hero) > main > section.ts-hero:first-child { display: none !important; }

/* ─── Spec tablosu ────────────────────────────────────────────────── */
.ts-spec-stack { display: flex !important; flex-direction: column !important; gap: 28px !important; }
.ts-spec-group {
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 13px !important;
  overflow: hidden !important;
}
.ts-spec-group-title {
  margin: 0 !important;
  padding: 14px 22px !important;
  background: var(--c-soft) !important;
  font: 800 13px/1.2 Manrope, system-ui, sans-serif !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--c-accent) !important;
  border-bottom: 1px solid var(--c-border) !important;
}
.ts-spec-table { width: 100% !important; border-collapse: collapse !important; }
.ts-spec-table th, .ts-spec-table td {
  padding: 14px 22px !important;
  font: 500 14.5px/1.5 Manrope, system-ui, sans-serif !important;
  border-bottom: 1px solid var(--c-border) !important;
  vertical-align: top !important;
  text-align: left !important;
}
.ts-spec-table tr:last-child th, .ts-spec-table tr:last-child td { border-bottom: 0 !important; }
.ts-spec-table th {
  width: 40% !important;
  font-weight: 700 !important;
  color: var(--c-muted) !important;
  background: color-mix(in srgb, var(--c-soft) 50%, transparent) !important;
}
.ts-spec-table td { color: var(--c-fg) !important; font-weight: 600 !important; }

/* ─── Galeri ──────────────────────────────────────────────────────── */
.ts-prod-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 16px !important;
}
.ts-prod-gal-item {
  margin: 0 !important;
  aspect-ratio: 4/3 !important;
  overflow: hidden !important;
  border-radius: 11px !important;
  background: var(--c-soft) !important;
}
.ts-prod-gal-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1) !important;
}
.ts-prod-gal-item:hover img { transform: scale(1.05) !important; }

/* ─── Video container ─────────────────────────────────────────────── */
.ts-prod-video {
  position: relative !important;
  aspect-ratio: 16/9 !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  background: #000 !important;
  box-shadow: var(--c-shadow-md) !important;
}
.ts-prod-video iframe, .ts-prod-video video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}

/* ─── Ürün altında marka kartı ────────────────────────────────────── */
a.ts-prod-brand-card,
.ts-prod-brand-card {
  display: grid !important;
  grid-template-columns: 280px 1fr auto !important;
  gap: 32px !important;
  align-items: center !important;
  padding: 28px 32px !important;
  background: linear-gradient(135deg, var(--c-card) 0%, var(--c-soft) 100%) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 16px !important;
  text-decoration: none !important;
  color: var(--c-fg) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
a.ts-prod-brand-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--c-accent) !important;
  box-shadow: 0 18px 38px -16px rgba(212, 31, 38, .25), var(--c-shadow-sm) !important;
}
.ts-prod-brand-card-logo {
  width: 280px !important;
  height: 180px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border-radius: 13px !important;
  padding: 22px !important;
}
.ts-prod-brand-card-logo img { max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; }
.ts-prod-brand-card-text { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.ts-prod-brand-card-name {
  margin: 0 !important;
  font: 800 26px/1.2 Manrope, system-ui, sans-serif !important;
  letter-spacing: -.4px !important;
  color: var(--c-fg) !important;
}
.ts-prod-brand-card-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font: 700 13px/1 Manrope, system-ui, sans-serif !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--c-accent) !important;
}
.ts-prod-brand-card-link svg { width: 14px !important; height: 14px !important; stroke: currentColor !important; }
a.ts-prod-brand-card:hover .ts-prod-brand-card-link svg { transform: translateX(4px) !important; transition: transform .2s ease !important; }
.ts-prod-brand-card-ext {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 18px !important;
  background: transparent !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: 11px !important;
  font: 700 13px/1 Manrope, system-ui, sans-serif !important;
  letter-spacing: .3px !important;
  color: var(--c-fg) !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s, color .15s !important;
}
.ts-prod-brand-card-ext:hover {
  border-color: var(--c-accent) !important;
  background: var(--c-accent) !important;
  color: #fff !important;
}
.ts-prod-brand-card-ext:hover svg { stroke: #fff !important; }
.ts-prod-brand-card-ext svg { width: 14px !important; height: 14px !important; stroke: currentColor !important; }
@media (max-width: 880px) {
  a.ts-prod-brand-card, .ts-prod-brand-card {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 20px !important;
  }
  .ts-prod-brand-card-logo { margin: 0 auto !important; }
  .ts-prod-brand-card-text { align-items: center !important; }
  .ts-prod-brand-card-ext { justify-self: center !important; }
}
@media (max-width: 560px) {
  .ts-prod-brand-card-logo { width: 100% !important; max-width: 240px !important; height: 150px !important; padding: 18px !important; }
  .ts-prod-brand-card-name { font-size: 22px !important; }
}

/* ─── Katalog filtreleri — kreatif monokrom dropdown ────────────── */
.ts-pc-bar {
  display: grid !important;
  grid-template-columns: 1fr 1fr auto !important;
  gap: 14px !important;
  align-items: stretch !important;
  margin-bottom: 32px !important;
}
@media (max-width: 760px) {
  .ts-pc-bar { grid-template-columns: 1fr !important; }
}

/* Dropdown trigger */
.ts-pc-drop { position: relative !important; }
.ts-pc-drop-btn {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  background: var(--c-card) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  text-align: left !important;
  color: var(--c-fg) !important;
  transition: border-color .18s ease, transform .18s ease !important;
}
.ts-pc-drop-btn:hover { border-color: var(--c-accent) !important; }
.ts-pc-drop.is-open .ts-pc-drop-btn { border-color: var(--c-accent) !important; }
.ts-pc-drop-ic {
  flex: 0 0 auto !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: 10px !important;
  color: var(--c-accent) !important;
  background: var(--c-bg) !important;
}
.ts-pc-drop-ic svg { width: 20px !important; height: 20px !important; display: block !important; }
.ts-pc-drop-meta {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}
.ts-pc-drop-label {
  font: 800 10.5px/1 Manrope, system-ui, sans-serif !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: var(--c-muted) !important;
}
.ts-pc-drop-value {
  font: 700 15px/1.25 Manrope, system-ui, sans-serif !important;
  color: var(--c-fg) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ts-pc-drop-chev {
  flex: 0 0 auto !important;
  color: var(--c-muted) !important;
  display: inline-flex !important;
  transition: transform .2s ease !important;
}
.ts-pc-drop-chev svg { width: 18px !important; height: 18px !important; display: block !important; }
.ts-pc-drop.is-open .ts-pc-drop-chev { transform: rotate(180deg) !important; color: var(--c-accent) !important; }

/* Dropdown list paneli */
.ts-pc-drop-list {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 30 !important;
  margin: 0 !important;
  padding: 6px !important;
  list-style: none !important;
  background: var(--c-card) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 48px -18px rgba(0, 0, 0, .25) !important;
  max-height: 360px !important;
  overflow-y: auto !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-6px) !important;
  transition: opacity .16s ease, transform .16s ease, visibility .16s !important;
}
.ts-pc-drop.is-open .ts-pc-drop-list {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}
.ts-pc-opt {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  color: var(--c-fg) !important;
  transition: background .12s ease !important;
}
.ts-pc-opt:hover { background: var(--c-soft) !important; }
.ts-pc-opt.is-active { background: var(--c-soft) !important; }
.ts-pc-opt-mark {
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--c-muted) !important;
}
.ts-pc-opt.is-active .ts-pc-opt-mark { color: var(--c-accent) !important; }
.ts-pc-opt-mark svg { width: 14px !important; height: 14px !important; display: block !important; }
.ts-pc-opt-name {
  flex: 1 1 auto !important;
  font: 600 14px/1.3 Manrope, system-ui, sans-serif !important;
  min-width: 0 !important;
}
.ts-pc-opt-count {
  flex: 0 0 auto !important;
  font: 700 11.5px/1 Manrope, system-ui, sans-serif !important;
  letter-spacing: .4px !important;
  color: var(--c-muted) !important;
  padding: 4px 8px !important;
  background: var(--c-bg) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 999px !important;
}
.ts-pc-opt.is-active .ts-pc-opt-count {
  color: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
}

/* Sayım rozeti */
.ts-pc-count {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 16px 22px !important;
  background: var(--c-card) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: 14px !important;
  min-width: 110px !important;
}
.ts-pc-count-num {
  font: 800 26px/1 Manrope, system-ui, sans-serif !important;
  color: var(--c-accent) !important;
  letter-spacing: -.5px !important;
  font-variant-numeric: tabular-nums !important;
}
.ts-pc-count-lbl {
  font: 700 10.5px/1 Manrope, system-ui, sans-serif !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: var(--c-muted) !important;
}

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .ts-brand-hero { grid-template-columns: 1fr !important; text-align: center !important; }
  .ts-brand-hero-logo { margin: 0 auto !important; width: min(280px, 88%) !important; height: 190px !important; }
  .ts-brand-hero-text { align-items: center !important; }
  .ts-brand-hero-actions { justify-content: center !important; }
  .ts-prod-hero-grid { grid-template-columns: 1fr !important; }
  .ts-prod-brand-card { grid-template-columns: 1fr !important; text-align: center !important; }
  .ts-prod-brand-card-logo { margin: 0 auto !important; }
  .ts-prod-brand-card-cta { justify-content: center !important; }
}
@media (max-width: 560px) {
  .ts-brand-card { grid-template-columns: 80px 1fr !important; padding: 16px !important; gap: 12px !important; }
  .ts-brand-card-logo { width: 80px !important; height: 60px !important; padding: 6px !important; }
  .ts-brand-hero-logo { width: 100% !important; height: 160px !important; padding: 18px !important; }
  .ts-spec-table th, .ts-spec-table td { padding: 12px 16px !important; font-size: 13.5px !important; }
  .ts-prod-card-media { aspect-ratio: 16/10 !important; }
}

/* ════════════════════════════════════════════════════════════════════
   GLOBAL LIGHT/DARK LOGO VARYANT TOGGLE
   Brand kartları, brand hero, ürün hero brandmark, ürün sayfası marka
   kartı — hepsi <img class="ts-logo-light"> + <img class="ts-logo-dark">
   render eder; CSS html.dark sınıfına göre swap eder.
   ════════════════════════════════════════════════════════════════════ */
html:not(.dark) .ts-logo-dark { display: none !important; }
html.dark .ts-logo-light { display: none !important; }

/* Dark modda marka logo container'larında koyu zemin */
html.dark .ts-prod-hero-brandmark {
  background: #1a2233 !important;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45) !important;
}
html.dark .ts-prod-brand-card-logo { background: #1a2233 !important; }

/* ════════════════════════════════════════════════════════════════════
   TEKNİK SERVİS ANA SAYFASI — özel bileşenler
   /teknik-servis/ — h1 hero + h2 sections + h3 cards (light + dark)
   ════════════════════════════════════════════════════════════════════ */

/* Tek prose paragrafı doğrudan p.ts-prose olarak da kullanılabilsin */
p.ts-prose {
  margin: 0 0 1.2em !important;
  font-size: 15.5px !important;
  line-height: 1.85 !important;
  font-weight: 500 !important;
  color: var(--c-fg) !important;
}
p.ts-prose:last-child { margin-bottom: 0 !important; }
.ts-prose-center { text-align: center !important; max-width: 880px !important; margin-left: auto !important; margin-right: auto !important; }

/* ---- Marka chip blok (Section 2 altı: "Servis ettiğimiz markalar") ---- */
.ts-tag-block {
  margin-top: 22px !important;
  padding: 18px 20px !important;
  background: var(--c-soft) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 14px !important;
}
html.dark .ts-tag-block {
  background: rgba(245, 71, 77, .08) !important;
  border-color: rgba(245, 71, 77, .22) !important;
}
.ts-tag-block-label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.3px !important;
  text-transform: uppercase !important;
  color: var(--c-muted) !important;
  margin-bottom: 10px !important;
}
html.dark .ts-tag-block-label { color: rgba(255,255,255,.65) !important; }
.ts-tag-block .ts-tag-list { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }

/* ---- Lokasyon kartları (3 ofis: HQ / Bursa / T-MAX) ---- */
.ts-loc-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-top: clamp(28px, 4vw, 48px) !important;
}
.ts-loc {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 20px 22px !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 14px !important;
  transition: transform .15s, border-color .15s, box-shadow .15s !important;
}
.ts-loc:hover {
  transform: translateY(-2px) !important;
  border-color: var(--c-accent) !important;
  box-shadow: var(--c-shadow-sm) !important;
}
.ts-loc-ic {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--c-accent) 14%, transparent) !important;
  color: var(--c-accent) !important;
}
.ts-loc-ic svg { width: 18px !important; height: 18px !important; }
.ts-loc-body { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
.ts-loc-label {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--c-accent) !important;
}
.ts-loc-text {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--c-fg) !important;
  line-height: 1.4 !important;
}

/* ---- Servis süreç kartları (3 adım: Tespit / Müdahale / Bakım) ---- */
.ts-step-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}
.ts-step {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 28px 26px 30px !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  transition: transform .15s, border-color .15s, box-shadow .15s !important;
}
.ts-step:hover {
  transform: translateY(-3px) !important;
  border-color: var(--c-accent) !important;
  box-shadow: var(--c-shadow) !important;
}
.ts-step-num {
  position: absolute !important;
  top: 16px !important;
  right: 22px !important;
  font-size: 56px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -2px !important;
  color: color-mix(in srgb, var(--c-accent) 12%, transparent) !important;
  pointer-events: none !important;
}
html.dark .ts-step-num { color: rgba(245,71,77,.18) !important; }
.ts-step-ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--c-accent) 14%, transparent) !important;
  color: var(--c-accent) !important;
}
.ts-step-ic svg { width: 22px !important; height: 22px !important; }
.ts-step-title {
  margin: 4px 0 0 !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  letter-spacing: -.3px !important;
  color: var(--c-fg) !important;
  line-height: 1.3 !important;
}
.ts-step-text {
  margin: 0 !important;
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  color: var(--c-muted) !important;
  font-weight: 500 !important;
}
html.dark .ts-step-text { color: rgba(255,255,255,.78) !important; }

/* ---- Mobil ---- */
@media (max-width: 980px) {
  .ts-loc-grid { grid-template-columns: 1fr 1fr !important; }
  .ts-step-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .ts-loc-grid { grid-template-columns: 1fr !important; }
  .ts-step-num { font-size: 44px !important; top: 12px !important; right: 18px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   HABER POST GALERİSİ + LIGHTBOX
   .ts-post-gallery — body içinde 2+ image link'ten oluşan WP galerisi
   .tepro-lightbox  — overlay modal (data-tepro-lightbox click → opener)
   ════════════════════════════════════════════════════════════════════ */
.ts-post-gallery {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin: 1.6em 0 1.8em !important;
  padding: 0 !important;
  list-style: none !important;
}
.ts-post-gallery-item {
  position: relative !important;
  display: block !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: var(--c-bg2) !important;
  border: 1px solid var(--c-border) !important;
  cursor: zoom-in !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.ts-post-gallery-item:hover {
  transform: translateY(-2px) !important;
  border-color: var(--c-accent) !important;
  box-shadow: var(--c-shadow-sm) !important;
}
.ts-post-gallery-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .25s ease !important;
}
.ts-post-gallery-item:hover img { transform: scale(1.04) !important; }
html.dark .ts-post-gallery-item { background: #1a2233 !important; border-color: #25313f !important; }
@media (max-width: 720px) { .ts-post-gallery { grid-template-columns: repeat(2, 1fr) !important; } }

/* ---- Lightbox modal ---- */
.tepro-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(16px, 4vw, 56px) !important;
  background: rgba(8, 10, 18, .88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .2s ease !important;
}
.tepro-lightbox.is-open { opacity: 1 !important; pointer-events: auto !important; }
.tepro-lightbox-img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6) !important;
  object-fit: contain !important;
  background: #0c111d !important;
}
.tepro-lightbox-btn {
  position: absolute !important;
  width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: background .15s, transform .15s !important;
  font: inherit !important;
  padding: 0 !important;
}
.tepro-lightbox-btn:hover { background: rgba(255,255,255,.22) !important; transform: scale(1.06) !important; }
.tepro-lightbox-btn svg { width: 22px !important; height: 22px !important; }
.tepro-lightbox-close { top: 18px !important; right: 18px !important; }
.tepro-lightbox-prev  { left: clamp(8px, 2vw, 28px) !important; top: 50% !important; transform: translateY(-50%) !important; }
.tepro-lightbox-next  { right: clamp(8px, 2vw, 28px) !important; top: 50% !important; transform: translateY(-50%) !important; }
.tepro-lightbox-prev:hover, .tepro-lightbox-next:hover { transform: translateY(-50%) scale(1.06) !important; }
.tepro-lightbox-counter {
  position: absolute !important;
  bottom: 22px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .5px !important;
  color: rgba(255,255,255,.78) !important;
  background: rgba(0,0,0,.45) !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
}
@media (max-width: 640px) {
  .tepro-lightbox-btn { width: 40px !important; height: 40px !important; }
}

/* ─── Marka Teknoloji Showcase ────────────────────────────────────
   .ts-card pattern'ini takip eder; site standartı tokens kullanır. */
.ts-brand-tech-head { margin-bottom: 28px !important; }

.ts-brand-tech-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
}
@media (max-width: 1100px) { .ts-brand-tech-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .ts-brand-tech-grid { grid-template-columns: 1fr !important; } }

.ts-brand-tech-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--c-shadow-sm) !important;
  overflow: hidden !important;
  color: inherit !important;
}

.ts-brand-tech-media {
  position: relative !important;
  aspect-ratio: 4 / 3 !important;
  background: var(--c-soft) !important;
  overflow: hidden !important;
  border-bottom: 1px solid var(--c-border) !important;
}
.ts-brand-tech-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  mix-blend-mode: multiply !important;
}
html.dark .ts-brand-tech-media { background: #f5f5f5 !important; }

.ts-brand-tech-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 22px 22px 22px !important;
}
.ts-brand-tech-eyebrow {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--c-accent) !important;
}
.ts-brand-tech-title {
  font: 800 18px/1.25 Manrope, system-ui, sans-serif !important;
  margin: 0 !important;
  color: inherit !important;
}
.ts-brand-tech-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 10px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--c-accent) !important;
}
.ts-brand-tech-cta svg { width: 16px !important; height: 16px !important; }

/* ─── Bilgi İstek Formu ─────────────────────────────────────────
   .ts-card pattern + iki sütun (head + form). */
.ts-brand-tech-form {
  margin-top: 40px !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--c-shadow-sm) !important;
  padding: 36px !important;
  display: grid !important;
  grid-template-columns: 1fr 1.4fr !important;
  gap: 40px !important;
  align-items: start !important;
}
@media (max-width: 900px) {
  .ts-brand-tech-form {
    grid-template-columns: 1fr !important;
    padding: 26px !important;
    gap: 26px !important;
  }
}

.ts-brand-tech-form-head .ts-eyebrow { color: var(--c-accent) !important; }
.ts-brand-tech-form-title {
  font: 800 24px/1.2 Manrope, system-ui, sans-serif !important;
  margin: 10px 0 12px !important;
}
.ts-brand-tech-form-desc { margin: 0 !important; line-height: 1.6 !important; }

.ts-bp-form { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.ts-bp-form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
@media (max-width: 560px) { .ts-bp-form-row { grid-template-columns: 1fr !important; } }

.ts-bp-form-field { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.ts-bp-form-field > span {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--c-accent) !important;
}
.ts-bp-form-field input,
.ts-bp-form-field select,
.ts-bp-form-field textarea {
  border: 1px solid var(--c-border) !important;
  border-radius: 13px !important;
  padding: 12px 14px !important;
  font: inherit !important;
  background: var(--c-soft) !important;
  color: inherit !important;
  outline: none !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.ts-bp-form-field textarea { resize: vertical !important; min-height: 96px !important; }
.ts-bp-form-field input:focus,
.ts-bp-form-field select:focus,
.ts-bp-form-field textarea:focus {
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent) !important;
}

.ts-bp-form-submit {
  margin-top: 6px !important;
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: none !important;
  cursor: pointer !important;
  padding: 14px 24px !important;
  border-radius: 13px !important;
  background: var(--c-accent) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: .02em !important;
  transition: transform .15s ease, background .15s ease !important;
}
.ts-bp-form-submit svg { width: 18px !important; height: 18px !important; }
.ts-bp-form-submit:hover { transform: translateY(-1px) !important; background: var(--c-accent-d) !important; }
.ts-bp-form-note {
  margin: 8px 0 0 !important;
  font-size: 12.5px !important;
  opacity: .7 !important;
}

/* ─── Stratejik Ortak Slider ─────────────────────────────────────
   KM + 4 ek partner banner. CSS grid hile: tüm slaytlar aynı hücrede,
   üst üste; sadece aktif slayt opacity 1. Track yüksekliği en uzun
   slayt'tan otomatik gelir. Oklar slayt'ın iki yanında dışta. */
.ts-partner-slider {
  position: relative !important;
}

.ts-partner-track {
  position: relative !important;
}

.ts-partner-slide {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .5s ease !important;
}
/* İlk slayt (KM) HEP yükseklik kaynağı — opacity 0 ile gizlense bile yer
   kaplar. Bu sayede tüm slaytlar KM'nin yüksekliğinde gözükür. */
.ts-partner-slide:first-child {
  position: relative !important;
}
/* Diğer 4 slayt KM'nin üstüne absolute oturur (aynı boyut) */
.ts-partner-slide:not(:first-child) {
  position: absolute !important;
  inset: 0 !important;
}
.ts-partner-slide.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 1 !important;
}
/* Slaytlar absolute olduğunda banner kendi yüksekliğini hücreye doldursun */
.ts-partner-slide:not(:first-child) .ts-km-banner {
  height: 100% !important;
}

/* Slide içindeki banner — kapak görsel slot'a sığsın */
.ts-partner-slide .ts-km-banner-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Dış oklar — slayt'ın iki yanında, dışta, dikey ortada */
.ts-partner-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-fg, #0f172a) !important;
  cursor: pointer !important;
  z-index: 10 !important;
  box-shadow: var(--c-shadow-sm) !important;
  transition: border-color .15s ease, transform .15s ease, color .15s ease !important;
}
.ts-partner-nav:hover {
  border-color: var(--c-accent) !important;
  color: var(--c-accent) !important;
  transform: translateY(-50%) scale(1.08) !important;
}
.ts-partner-nav-prev { left: -22px !important; }
.ts-partner-nav-next { right: -22px !important; }
.ts-partner-nav svg { width: 18px !important; height: 18px !important; }

html.dark .ts-partner-nav { color: #e8eef5 !important; }
html.dark .ts-partner-nav:hover { color: var(--c-accent) !important; }

@media (max-width: 900px) {
  .ts-partner-nav-prev { left: 6px !important; }
  .ts-partner-nav-next { right: 6px !important; }
}
@media (max-width: 560px) {
  .ts-partner-nav {
    width: 36px !important;
    height: 36px !important;
    top: auto !important;
    bottom: -18px !important;
    transform: none !important;
  }
  .ts-partner-nav:hover { transform: scale(1.08) !important; }
  .ts-partner-nav-prev { left: 50% !important; margin-left: -44px !important; }
  .ts-partner-nav-next { right: 50% !important; margin-right: -44px !important; }
  .ts-partner-slider-section { padding-bottom: 32px !important; }
}

/* ─── Header: hero video play/pause toggle (theme switch ile aynı şekil) ─
   .tx-themesw stilini paylaşır; sadece knob içindeki ikonlar ve knob'un
   pozisyonu state'e (data-state) göre değişir. Tema durumundan BAĞIMSIZ. */

/* Tema değişimi video knob'ını ETKİLEMESİN — pozisyon yalnızca data-state'e bağlı */
.tx-videosw .tx-sw-knob,
html.dark .tx-videosw .tx-sw-knob {
  transform: none !important;
}
.tx-videosw[data-state="paused"] .tx-sw-knob,
html.dark .tx-videosw[data-state="paused"] .tx-sw-knob {
  transform: translateX(24px) !important;
}

/* Knob içindeki ikonlar — playing iken pause, paused iken play */
.tx-i-play, .tx-i-pause {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.tx-i-play { fill: currentColor !important; stroke: none !important; }

/* Default state: playing → pause ikonu görünür (durdurma davranışı) */
.tx-videosw .tx-i-play { display: none !important; }
.tx-videosw .tx-i-pause { display: block !important; }
/* Paused state: play ikonu görünür */
.tx-videosw[data-state="paused"] .tx-i-play { display: block !important; }
.tx-videosw[data-state="paused"] .tx-i-pause { display: none !important; }