/* ==========================================================================
   TATAR MEDYA — TASARIM SİSTEMİ v3  ·  "OPERASYON"
   --------------------------------------------------------------------------
   Referans yön: koyu zemin, yüksek kontrast, kalın grotesk büyük harf
   başlıklar, doygun tek sinyal rengi, mono mikro etiketler, keskin köşeler,
   somut kanıt panelleri. Endüstriyel/operasyonel ton.
   VARSAYILAN TEMA KOYU. Açık tema isteğe bağlı (başlıktaki düğme).

   1 Token · 2 Reset · 3 Tipografi · 4 Izgara · 5 Bileşen
   6 İskelet · 7 Sayfa bloğu · 8 Hareket · 9 Yardımcı · 10 Mobil
   ========================================================================== */

/* ── 1. TOKEN ───────────────────────────────────────────────────────────── */
:root {
  /* Yüzeyler — saf siyah değil, hafif soğuk kömür. Göz yormaz, daha pahalı durur. */
  --bg:         #0A0A0B;
  --surface:    #121214;
  --surface-2:  #18181B;
  --surface-3:  #212125;
  --line:       #27272A;
  --line-2:     #3A3A40;

  --text:       #FAFAFA;
  --text-2:     #A6A6AE;
  /* #74747E ölçüldüğünde koyu yüzeylerde 4.05-4.28:1 veriyordu (WCAG AA'nın
     altında, gerek 4.5:1). #8C8C96 tüm koyu yüzeylerde (bg/surface/surface-2)
     ≥5.3:1 verir; küçük mikro etiket/altbilgi metinleri bunu kullanıyor. */
  --text-3:     #8C8C96;

  /* Sinyal — elektrik camgöbeği (cyan). Turuncudan geçildi: güvenlik/kimlik
     sektöründeki köklü markaların (PayPal, Coinbase, Bitwarden, Signal,
     NordVPN) çoğu mavi/lacivert kullanıyor — "güven" veriyor ama artık
     sıradan duruyor. Cyan hem bu "operasyon merkezi / terminal / HUD"
     anlatımıza organik oturuyor (gözetim ekranı, canlı veri akışı estetiği),
     hem rakiplerden (kırmızı, yeşil) tamamen ayrışıyor, hem de durum
     rengi yeşille (--ok, "çözüldü") çakışmıyor. */
  --signal:     #22D3EE;
  --signal-hi:  #7DE8F7;
  --signal-lo:  #0891B2;
  /* Cyan üzerine koyu metin ~10:1 verir (beyaz metin yalnızca ~2:1 verirdi) — */
  --on-signal:  #062024;

  --ok:         #00E08A;
  --warn:       #FFB020;
  --risk:       #FF3B4E;

  --on-dark:    #FAFAFA;

  /* Tipografi */
  --f-sans: 'TM Sans', 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'TM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Sıkıştırılmış başlık karakteri */
  --wdth-display: 80;
  --wdth-ui: 100;

  --fs-micro: .6875rem;
  --fs-xs:    .8125rem;
  --fs-sm:    .9375rem;
  --fs-base:  1.0625rem;
  --fs-lg:    clamp(1.125rem,.4vw + 1.05rem,1.3125rem);
  --fs-xl:    clamp(1.375rem,1vw + 1.1rem,1.75rem);
  --fs-2xl:   clamp(1.875rem,2.2vw + 1.2rem,2.75rem);
  --fs-3xl:   clamp(2.5rem,4vw + 1.2rem,4.25rem);
  /* ESKİ DEĞER clamp(3rem,7.5vw+.8rem,7.5rem) idi: 1024px genişlikte 89.6px'e
     çıkıyordu. Bu, TÜM sayfaların varsayılan h1'i için geçerli olduğundan
     /hizmetler, /blog, /basari-hikayeleri, /kvkk, /gizlilik-politikasi,
     /kullanim-sartlari, /iletisim — yedisi de sayfayı dolduran devasa,
     bazen 5 satıra bölünen başlıklarla açılıyordu. Yalnızca ana sayfa
     kahraman bölümü ayrı fark edilip küçültülmüştü; kök neden buradaymış. */
  --fs-4xl:   clamp(2rem,3.3vw + .6rem,3.75rem);
  --fs-5xl:   clamp(4rem,13vw,11rem);

  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:2.75rem; --s-8:3.5rem;
  --s-9:5rem;   --s-10:7rem;  --s-11:9rem;  --s-12:12rem;

  --section-y: clamp(4rem,8vw,7.5rem);
  --page: 1360px;
  --measure: 68ch;

  --r-xs:3px; --r-sm:4px; --r-md:6px; --r-lg:8px; --r-full:9999px;

  --t-fast:.14s cubic-bezier(.3,0,.1,1);
  --t-base:.28s cubic-bezier(.3,0,.1,1);
  --t-slow:.6s cubic-bezier(.16,1,.3,1);

  --header-h: 68px;

  /* Eski sürüm adlarıyla uyum — şablonlar kırılmasın */
  --paper:var(--bg); --ink:var(--text); --ink-2:var(--text-2); --ink-3:var(--text-3); --ink-4:var(--text-3);
  --rule:var(--line); --rule-strong:var(--line-2);
  --deep:var(--surface); --on-deep:var(--text); --on-deep-2:var(--text-2); --deep-rule:var(--line);
  --accent:var(--signal); --accent-hover:var(--signal-hi);
  --accent-soft:rgba(34,211,238,.12); --accent-ring:rgba(34,211,238,.45);
  --bg-subtle:var(--surface); --bg-card:var(--surface); --bg-hover:var(--surface-2); --bg-inverse:var(--text);
  --border:var(--line); --border-strong:var(--line-2);
  --text-primary:var(--text); --text-secondary:var(--text-2); --text-muted:var(--text-3);
  --text-inverse:var(--bg); --text-brand:var(--signal);
  --resolved:var(--ok); --pending:var(--warn); --signal-2:var(--signal-hi); --signal-ink:#140600;
  --ok-500:var(--ok); --ok-600:var(--ok); --ok-100:rgba(0,224,138,.12);
  --risk-500:var(--risk); --risk-600:var(--risk); --risk-100:rgba(255,59,78,.12);
  --warn-600:var(--warn); --warn-100:rgba(255,176,32,.12);
  --f-display:var(--f-sans); --f-body:var(--f-sans);
  --font:var(--f-sans); --font-display:var(--f-sans); --font-mono:var(--f-mono);
  --r-2xl:var(--r-lg); --r-xl:var(--r-lg);
  --shadow-xs:none; --shadow-sm:none; --shadow-md:none;
  --shadow-lg:0 30px 70px rgba(0,0,0,.65);
}

/* ── AÇIK TEMA (isteğe bağlı) ── */
:root[data-theme="light"] {
  --bg:         #FFFFFF;
  --surface:    #F5F5F7;
  --surface-2:  #EDEDF0;
  --surface-3:  #E4E4E9;
  --line:       #E0E0E5;
  --line-2:     #C3C3CB;
  --text:       #0A0A0B;
  --text-2:     #52525B;
  /* #71717A beyaza karşı 4.83:1 veriyordu ama --surface (#F5F5F7) gibi
     hafif tonlu yüzeylerde 4.44:1'e düşüyordu (footer/kart meta metni
     sıklıkla bu yüzeylerde). Güvenli marj için koyulaştırıldı. */
  --text-3:     #64646A;
  /* Cyan-700 tonu: beyaz metinle 5.36:1 (güvenli marj, gerek 4.5:1). */
  --signal:     #0E7490;
  --signal-hi:  #0891B2;
  --on-signal:  #FFFFFF;
  --ok:         #00764A;
  --warn:       #8A5A00;
  --risk:       #C6001B;
  --deep:       #0A0A0B;
  --on-deep:    #FAFAFA;
  --on-deep-2:  #A6A6AE;
  --deep-rule:  rgba(255,255,255,.14);
  --accent-soft:rgba(14,116,144,.08);
  --accent-ring:rgba(14,116,144,.4);
  --shadow-lg:0 30px 70px rgba(10,10,11,.14);
}

/* ── 2. RESET ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 2rem);background:var(--bg)}
body{
  font-family:var(--f-sans);
  font-variation-settings:'wdth' var(--wdth-ui);
  font-size:var(--fs-base); line-height:1.6;
  color:var(--text); background:var(--bg);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
ul,ol{padding-left:1.15rem}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-color:var(--signal)}
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--signal);outline-offset:3px;border-radius:var(--r-xs)}
::selection{background:var(--signal);color:#fff}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--signal);color:var(--on-signal);
  padding:.85rem 1.4rem;font-weight:700;font-family:var(--f-mono);font-size:var(--fs-xs);
  letter-spacing:.1em;text-transform:uppercase}
.skip-link:focus{left:0;color:var(--on-signal)}

/* ── 3. TİPOGRAFİ ───────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6{
  font-family:var(--f-sans);
  font-variation-settings:'wdth' var(--wdth-display);
  font-weight:800; text-transform:uppercase;
  line-height:.92; letter-spacing:-.025em;
  color:var(--text); text-wrap:balance;
  overflow-wrap:break-word; word-break:normal; hyphens:none;
}
h1{font-size:var(--fs-4xl);line-height:.86;letter-spacing:-.035em}
h2{font-size:var(--fs-3xl);line-height:.9;letter-spacing:-.03em}
h3{font-size:var(--fs-2xl);line-height:.96;letter-spacing:-.022em}
h4{font-size:var(--fs-xl);line-height:1.06;letter-spacing:-.015em}
h5{font-size:var(--fs-lg);line-height:1.15}
h6{font-size:var(--fs-sm);letter-spacing:.02em}

p{text-wrap:pretty}
p + p,p + ul,p + ol,ul + p,ol + p{margin-top:var(--s-4)}

/* Mono mikro etiket — operasyon/konsol dili */
.tm-label{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
}
.tm-label::before{content:"";width:1.4rem;height:1px;background:var(--signal);flex:0 0 auto}
.tm-label--bare::before{display:none}
.tm-label--signal{color:var(--signal)}
.tm-mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

.tm-lede{font-size:var(--fs-lg);line-height:1.55;color:var(--text-2);max-width:54ch;text-wrap:pretty}
.tm-mark{color:var(--signal)}

blockquote{margin:var(--s-7) 0;padding:var(--s-5) 0 var(--s-5) var(--s-5);
  border-left:3px solid var(--signal);font-size:var(--fs-lg);line-height:1.4;color:var(--text)}
blockquote cite{display:block;margin-top:var(--s-3);font-family:var(--f-mono);font-size:var(--fs-micro);
  font-style:normal;color:var(--text-3);letter-spacing:.1em;text-transform:uppercase}

code,kbd{font-family:var(--f-mono);font-size:.9em;background:var(--surface-2);
  padding:.14em .4em;border:1px solid var(--line);border-radius:var(--r-xs)}

/* ── 4. IZGARA ──────────────────────────────────────────────────────────── */
.tm-container{width:100%;max-width:var(--page);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3.5rem)}
.tm-container--narrow{max-width:880px}
.tm-section{padding-block:var(--section-y)}
.tm-section--tight{padding-block:clamp(3rem,5.5vw,4.5rem)}
.tm-section--subtle{background:var(--surface)}
.tm-section--ink{background:var(--surface);color:var(--text)}

.tm-split{display:grid;gap:clamp(2rem,4vw,4rem);align-items:start;min-width:0}
@media (min-width:992px){.tm-split{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.tm-split>*{min-width:0}

.tm-dossier{display:grid;gap:var(--s-5) clamp(1.5rem,3vw,3rem)}
@media (min-width:900px){.tm-dossier{grid-template-columns:minmax(7rem,13%) minmax(0,1fr)}
  .tm-dossier__aside{position:sticky;top:calc(var(--header-h) + 2rem);align-self:start}}
.tm-dossier__body{min-width:0}

/* Izgara: kart kutuları. Referanslardaki gibi koyu yüzey + ince kenarlık. */
.tm-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;min-width:0}
.tm-grid>*{min-width:0;background:var(--bg);padding:clamp(1.5rem,2.5vw,2rem)}
@media (min-width:640px){.tm-grid--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){
  .tm-grid--3{grid-template-columns:repeat(3,1fr)}
  .tm-grid--4{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:640px) and (max-width:899px){
  .tm-grid--3,.tm-grid--4{grid-template-columns:repeat(2,1fr)}
}
/* Çizgisiz, açık ızgara gerekirse */
.tm-grid--plain{gap:clamp(1.5rem,3vw,2.5rem);background:none;border:0;border-radius:0}
.tm-grid--plain>*{background:none;padding:0}

.tm-stack>*+*{margin-top:var(--s-4)}
.tm-stack-lg>*+*{margin-top:var(--s-6)}

/* Bölüm başlığı */
.tm-section-head{margin-bottom:clamp(2.25rem,4vw,3.5rem);max-width:none}
.tm-section-head>h1{max-width:14ch}
.tm-section-head>h2{max-width:16ch}
.tm-section-head>h3{max-width:20ch}
.tm-section-head--wide>h1{max-width:17ch}
.tm-section-head--wide>h2{max-width:19ch}
.tm-section-head--center{text-align:center;margin-inline:auto}
.tm-section-head--center>h1,.tm-section-head--center>h2{margin-inline:auto}
.tm-section-head .tm-label{margin-bottom:var(--s-4)}
.tm-section-head p{margin-top:var(--s-5);font-size:var(--fs-lg);color:var(--text-2);max-width:48ch}
.tm-section-head--center p{margin-inline:auto}
.tm-eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-mono);
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal);margin-bottom:var(--s-4)}

/* ── 5. BİLEŞEN ─────────────────────────────────────────────────────────── */

/* 5.1 Buton */
.tm-btn{
  --btn-bg:var(--signal); --btn-fg:var(--on-signal); --btn-bd:var(--signal);
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1rem 1.75rem;
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;line-height:1;
  color:var(--btn-fg);background:var(--btn-bg);
  border:1.5px solid var(--btn-bd);border-radius:var(--r-sm);
  text-decoration:none;max-width:100%;
  transition:color var(--t-base),border-color var(--t-base),background var(--t-base);
}
.tm-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--text);
  transform:translateY(101%);transition:transform var(--t-base)}
.tm-btn:hover::before{transform:translateY(0)}
.tm-btn:hover{color:var(--bg);border-color:var(--text)}
.tm-btn:active{transform:translateY(1px)}
.tm-btn--lg{padding:1.2rem 2.2rem;font-size:var(--fs-sm)}
.tm-btn--sm{padding:.7rem 1.1rem;font-size:var(--fs-micro)}
.tm-btn--block{width:100%}

.tm-btn--ghost{--btn-bg:transparent;--btn-fg:var(--text);--btn-bd:var(--line-2)}
.tm-btn--ghost:hover{color:var(--bg);border-color:var(--text)}
.tm-btn--signal{--btn-bg:var(--signal);--btn-fg:var(--on-signal);--btn-bd:var(--signal)}
.tm-btn--whatsapp{--btn-bg:#00B368;--btn-fg:#02160D;--btn-bd:#00B368}
.tm-btn--whatsapp::before{background:var(--text)}
.tm-btn--whatsapp:hover{color:var(--bg)}
.tm-btn--onDark{--btn-bg:var(--text);--btn-fg:var(--bg);--btn-bd:var(--text)}
.tm-btn--onDark::before{background:var(--signal)}
.tm-btn--onDark:hover{color:var(--on-signal);border-color:var(--signal)}
.tm-btn--call{--btn-bg:transparent;--btn-fg:var(--text);--btn-bd:var(--line-2)}

.tm-link{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--signal);text-decoration:none;padding-bottom:.35rem;
  border-bottom:1.5px solid currentColor;transition:gap var(--t-fast),color var(--t-fast)}
.tm-link:hover{gap:.9rem;color:var(--text)}
.tm-link::after{content:"→"}

/* 5.2 Kart / kayıt */
.tm-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(1.5rem,2.5vw,2rem)}
.tm-card--hover{transition:border-color var(--t-base),background var(--t-base)}
.tm-card--hover:hover{border-color:var(--line-2);background:var(--surface-2)}

/* Fotoğraf yerine kullanılan baş harf rozeti (Hakkımızda — kurucu/ekip).
   Sitenin geri kalanı gibi görsel yok, marka rengiyle tutarlı bir baş harf.
   NOT: .tm-avatar zaten .tm-quote bileşeninde kullanılıyor (display:none) —
   isim çakışmasın diye bu bileşen .tm-initials adını kullanır. */
.tm-initials{display:inline-grid;place-items:center;width:5rem;height:5rem;flex:0 0 auto;
  border-radius:var(--r-md);background:var(--signal);color:var(--on-signal);
  font-family:var(--f-mono);font-weight:800;font-size:1.5rem;letter-spacing:.02em}

.tm-entry{display:flex;flex-direction:column;gap:var(--s-3);padding-block:var(--s-6);
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;position:relative}
.tm-entry__no{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.14em;color:var(--signal)}
.tm-entry__title{font-size:var(--fs-xl);font-weight:800;text-transform:uppercase;
  font-variation-settings:'wdth' var(--wdth-display);line-height:1.02;letter-spacing:-.02em}

/* Hizmet kartı */
.tm-service-card{display:flex;flex-direction:column;gap:var(--s-3);height:100%;
  text-decoration:none;color:inherit;position:relative;transition:background var(--t-base)}
.tm-grid>a.tm-service-card:hover{background:var(--surface-2)}
.tm-service-card__title{font-size:var(--fs-xl);font-weight:800;text-transform:uppercase;
  font-variation-settings:'wdth' var(--wdth-display);line-height:1.02;letter-spacing:-.02em;
  color:var(--text);transition:color var(--t-fast)}
.tm-service-card:hover .tm-service-card__title{color:var(--signal)}
.tm-service-card__desc{color:var(--text-2);font-size:var(--fs-sm)}
.tm-service-card__more{margin-top:auto;padding-top:var(--s-5);font-family:var(--f-mono);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);display:inline-flex;align-items:center;gap:.5rem;
  transition:color var(--t-fast),gap var(--t-fast)}
.tm-service-card:hover .tm-service-card__more{color:var(--signal);gap:.9rem}
.tm-service-card__more i{display:none}
.tm-service-card__more::after{content:"→"}

/* 5.3 İkon */
.tm-icon{display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;flex:0 0 auto;
  font-size:1rem;color:var(--signal);background:var(--accent-soft);
  border:1px solid rgba(34,211,238,.25);border-radius:var(--r-sm)}
.tm-icon--sm{width:1.75rem;height:1.75rem;font-size:.8rem}
.tm-icon--lg{width:2.75rem;height:2.75rem;font-size:1.2rem}
.tm-icon--ok{color:var(--ok);background:rgba(0,224,138,.1);border-color:rgba(0,224,138,.25)}
.tm-icon--warn{color:var(--warn);background:rgba(255,176,32,.1);border-color:rgba(255,176,32,.25)}
.tm-icon--soft{color:var(--text);background:var(--surface-2);border-color:var(--line-2)}

/* Platform markaları — hizmet menüsünde ve kartlarda anında tanınsın diye
   gerçek marka rengi kullanılır (nötr gri kutu = "hangi platform bu?"
   sorusuna cevap vermiyordu, kullanıcı şikayet etti). Sitenin geri kalanı
   tek sinyal rengini korur; bu yalnızca küçük ikon rozetlerine özgü bir istisna. */
.tm-icon--instagram{color:#fff;border-color:transparent;
  background:radial-gradient(circle at 30% 110%,#ffdb73 0%,#fd5 5%,#ff543e 45%,#c837ab 60%,#7038c7 90%)}
.tm-icon--facebook{color:#fff;background:#1877F2;border-color:transparent}
.tm-icon--twitter{color:#fff;background:#000;border-color:var(--line-2)}
/* Saf marka yeşili #25D366 üzerinde beyaz ikon 1.98:1 veriyordu (WCAG'ın
   çok altında). Sitenin geri kalanında WhatsApp için zaten kullanılan
   erişilebilir çift (#00B368 + koyu metin, bkz. .tm-btn--whatsapp) burada da. */
.tm-icon--whatsapp{color:#02160D;background:#00B368;border-color:transparent}
.tm-icon--youtube{color:#fff;background:#FF0000;border-color:transparent}
.tm-icon--google{color:#fff;background:#4285F4;border-color:transparent}
.tm-icon--tiktok{color:#fff;background:#000;border-color:var(--line-2)}
/* Bizim kendi yönettiğimiz hizmet katmanı (platform değil) — sinyal rengiyle
   tutarlı kalır; ayrı bir sınıf gerekmez, .tm-icon temel stili zaten bu. */
.tm-icon--ads{color:var(--signal);background:var(--accent-soft);border-color:rgba(34,211,238,.25)}

/* 5.4 Rozet */
.tm-badge{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-mono);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  line-height:1;padding:.4rem .65rem;border-radius:var(--r-xs);
  background:var(--signal);color:var(--on-signal);border:1px solid var(--signal)}
.tm-badge--ok{background:var(--ok);color:#02160D;border-color:var(--ok)}
/* Koyu temada --ok parlak yeşil (#00E08A) olduğu için koyu metin doğruydu;
   açık temada --ok çok daha koyu bir yeşile (#00764A) döner ve aynı koyu
   metin 3.29:1'e düşüyordu. Açık temada beyaz metin doğru çift. */
:root[data-theme="light"] .tm-badge--ok{color:#fff}
.tm-badge--risk{background:var(--risk);color:#fff;border-color:var(--risk)}
.tm-badge--warn{background:var(--warn);color:#1A1200;border-color:var(--warn)}
.tm-badge--accent{background:var(--signal);color:var(--on-signal);border-color:var(--signal)}
.tm-badge--quiet{background:transparent;color:var(--text-2);border-color:var(--line-2)}
/* Filtre olarak kullanılan <a class="tm-badge"> etiketleri tıklanabilir —
   mobilde dokunma hedefi olarak varsayılan .tm-badge yüksekliği (~26px) çok
   dar kalıyordu; burada ~44px'e yaklaştırıyoruz. Metin içindeki <span> rozetler
   bundan etkilenmiyor. */
a.tm-badge{text-decoration:none;padding:.85rem 1rem;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
a.tm-badge.tm-badge--quiet:hover{background:var(--surface-2);color:var(--text);border-color:var(--text-3)}
a.tm-badge.tm-badge--quiet[aria-current]{background:var(--signal);color:var(--on-signal);border-color:var(--signal)}

.tm-live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 rgba(0,224,138,.6);animation:tmPulse 2.2s infinite}
@keyframes tmPulse{0%{box-shadow:0 0 0 0 rgba(0,224,138,.55)}70%{box-shadow:0 0 0 8px rgba(0,224,138,0)}100%{box-shadow:0 0 0 0 rgba(0,224,138,0)}}

/* 5.5 Sayılar */
.tm-stat{display:block}
.tm-stat__num{font-size:var(--fs-3xl);font-weight:800;text-transform:uppercase;
  font-variation-settings:'wdth' var(--wdth-display);line-height:.85;letter-spacing:-.04em;
  color:var(--text);font-variant-numeric:tabular-nums;display:block}
.tm-stat__label{margin-top:var(--s-3);font-family:var(--f-mono);font-size:var(--fs-micro);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);display:block;max-width:24ch}
.tm-stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.tm-stats-row>*{background:var(--bg);padding:clamp(1.25rem,2.5vw,1.75rem)}

/* 5.6 Tikli liste */
.tm-check-list{list-style:none;padding:0;display:grid;gap:0}
.tm-check-list li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;
  padding-block:var(--s-3);border-bottom:1px solid var(--line);color:var(--text-2);font-size:var(--fs-sm)}
.tm-check-list li::before{content:"✓";font-family:var(--f-mono);color:var(--ok);font-weight:700;font-size:.9em;line-height:1.5}

/* 5.7 SSS */
.tm-faq{border-top:1px solid var(--line)}
.tm-faq__item{border-bottom:1px solid var(--line);background:none;border-radius:0}
.tm-faq__q{display:grid;grid-template-columns:1fr auto;gap:var(--s-5);align-items:center;
  padding:var(--s-5) 0;cursor:pointer;list-style:none;font-size:var(--fs-lg);font-weight:700;
  text-transform:uppercase;font-variation-settings:'wdth' 90;line-height:1.15;letter-spacing:-.015em;
  color:var(--text);transition:color var(--t-fast)}
.tm-faq__q::-webkit-details-marker{display:none}
.tm-faq__q::after{content:"+";font-family:var(--f-mono);font-size:1.3rem;font-weight:400;
  color:var(--text-3);line-height:1;transition:color var(--t-base),transform var(--t-base)}
.tm-faq__item[open] .tm-faq__q::after{content:"−";color:var(--signal)}
.tm-faq__q:hover{color:var(--signal)}
.tm-faq__a{padding:0 0 var(--s-6);color:var(--text-2);max-width:64ch;font-size:var(--fs-sm)}

/* 5.8 Referans */
.tm-quote{display:flex;flex-direction:column;gap:var(--s-4);height:100%}
.tm-quote__stars{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.25em;color:var(--warn)}
.tm-quote__text{font-size:var(--fs-base);line-height:1.55;color:var(--text)}
.tm-quote__who{display:flex;align-items:baseline;gap:.6rem;margin-top:auto;padding-top:var(--s-4);
  border-top:1px solid var(--line);font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.1em}
.tm-quote__name{color:var(--text);font-weight:700;text-transform:uppercase}
.tm-quote__role{color:var(--text-3)}
.tm-avatar{display:none}

/* 5.9 Not */
.tm-note{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);
  padding:var(--s-5);background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--text-3);border-radius:var(--r-sm);
  color:var(--text-2);font-size:var(--fs-sm);margin-block:var(--s-6)}
.tm-note>i{color:var(--text-3);font-size:1rem;margin-top:.15rem}
.tm-note>*:not(i){min-width:0}
.tm-note strong{display:block;color:var(--text);margin-bottom:.4rem;font-family:var(--f-mono);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.tm-note--ok{border-left-color:var(--ok)}   .tm-note--ok>i{color:var(--ok)}
.tm-note--warn{border-left-color:var(--warn)} .tm-note--warn>i{color:var(--warn)}
.tm-note--risk{border-left-color:var(--risk)} .tm-note--risk>i{color:var(--risk)}
.tm-note-strong{font-size:var(--fs-lg);font-weight:700;margin-bottom:0}

/* 5.10 Breadcrumb */
.tm-breadcrumb{padding-block:var(--s-5) 0;font-family:var(--f-mono);font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase}
.tm-breadcrumb ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.tm-breadcrumb li+li::before{content:"/";color:var(--text-3);margin-right:.5rem}
.tm-breadcrumb a{color:var(--text-3);text-decoration:none}
.tm-breadcrumb a:hover{color:var(--signal)}
.tm-breadcrumb [aria-current]{color:var(--text)}

/* 5.11 Form */
.tm-field{display:grid;gap:.5rem;margin-bottom:var(--s-5)}
.tm-field .tm-label{color:var(--text-2)}
.tm-field .tm-label::before{display:none}
.tm-input,.tm-select,.tm-textarea{width:100%;padding:.9rem 1rem;background:var(--surface);
  color:var(--text);border:1.5px solid var(--line);border-radius:var(--r-sm);
  transition:border-color var(--t-fast),background var(--t-fast)}
.tm-input:focus,.tm-select:focus,.tm-textarea:focus{outline:none;border-color:var(--signal);background:var(--surface-2)}
.tm-input::placeholder,.tm-textarea::placeholder{color:var(--text-3)}
.tm-textarea{min-height:150px;resize:vertical}
.tm-help{font-family:var(--f-mono);font-size:var(--fs-micro);color:var(--text-3);letter-spacing:.06em}
.tm-error{font-family:var(--f-mono);font-size:var(--fs-micro);color:var(--risk);letter-spacing:.1em;text-transform:uppercase}
.tm-consent{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;
  margin-block:var(--s-6) var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--line)}
.tm-consent input[type=checkbox]{width:18px;height:18px;margin-top:.15rem;accent-color:var(--signal)}
.tm-consent label{font-size:var(--fs-xs);color:var(--text-2);line-height:1.5}

/* 5.12 Tablo */
.tm-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.tm-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tm-table th,.tm-table td{padding:.9rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
.tm-table th{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);font-weight:700;background:var(--surface)}
.tm-table tr:last-child td{border-bottom:0}

/* ── 6. İSKELET ─────────────────────────────────────────────────────────── */

/* 6.1 Üst şerit */
.tm-topbar{background:var(--signal);color:var(--on-signal);font-family:var(--f-mono);
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:.55rem 0}
.tm-topbar__inner{display:flex;flex-wrap:wrap;gap:var(--s-5);align-items:center;justify-content:space-between}
.tm-topbar a{color:var(--on-signal);text-decoration:none;border-bottom:1px solid rgba(0,0,0,.35)}
.tm-topbar a:hover{border-color:currentColor}
.tm-topbar__item{display:inline-flex;align-items:center;gap:.5rem}
.tm-topbar .tm-live-dot{background:#0B3D28;box-shadow:none;animation:none}

/* 6.2 Başlık */
.tm-header{position:sticky;top:0;z-index:900;background:rgba(10,10,11,.86);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line)}
:root[data-theme="light"] .tm-header{background:rgba(255,255,255,.88)}
@supports not (backdrop-filter:blur(1px)){.tm-header{background:var(--bg)}}
.tm-nav{display:flex;align-items:center;gap:var(--s-5);height:var(--header-h)}

.tm-logo{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;margin-right:auto}
.tm-logo__mark{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;
  background:var(--signal);color:var(--on-signal);border-radius:var(--r-xs);font-size:.85rem}
.tm-logo__text{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.tm-logo__name{font-weight:800;text-transform:uppercase;font-variation-settings:'wdth' 85;
  font-size:1.15rem;letter-spacing:-.02em;color:var(--text);line-height:1}
.tm-logo__sub{font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);line-height:1;padding-left:.6rem;border-left:1px solid var(--line-2)}

.tm-nav__links{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,1.6rem);list-style:none;padding:0;margin:0}
.tm-nav__link{position:relative;display:inline-flex;align-items:center;gap:.4rem;padding:.4rem 0;
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-2);text-decoration:none;background:none;
  transition:color var(--t-fast)}
.tm-nav__link::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform var(--t-base)}
.tm-nav__link:hover{color:var(--text)}
.tm-nav__link:hover::after{transform:scaleX(1)}
.tm-nav__link[aria-current=page]{color:var(--text)}
.tm-nav__link[aria-current=page]::after{transform:scaleX(1)}

.tm-dropdown{position:static}
.tm-dropdown__panel{position:absolute;left:0;right:0;top:100%;width:100%;max-width:none;
  max-height:calc(100vh - var(--header-h) - 12px);overflow-y:auto;
  background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-lg);border-radius:0;padding:var(--s-7) clamp(1.25rem,4vw,3.5rem) var(--s-7);
  opacity:0;visibility:hidden;z-index:50;transition:opacity var(--t-base),visibility var(--t-base)}
.tm-dropdown.is-open .tm-dropdown__panel{opacity:1;visibility:visible}

/* Mega menü: solda gruplanmış hizmetler, sağda sabit "yardım" paneli */
.tm-dropdown__layout{max-width:var(--page);margin-inline:auto;
  display:grid;gap:var(--s-8);align-items:start}
@media (min-width:1100px){.tm-dropdown__layout{grid-template-columns:minmax(0,1fr) 272px}}
.tm-dropdown__main{min-width:0}

.tm-dropdown__title{font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--signal);margin-bottom:var(--s-4);
  padding-bottom:var(--s-2);border-bottom:1px solid var(--line)}
.tm-dropdown__title:not(:first-child){margin-top:var(--s-6)}
.tm-dropdown__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.2rem var(--s-6)}
.tm-dropdown__item{display:flex;gap:.9rem;align-items:flex-start;padding:.7rem .65rem;text-decoration:none;
  color:inherit;border-radius:var(--r-sm);transition:background var(--t-fast)}
.tm-dropdown__item:hover{background:var(--surface-2)}
.tm-dropdown__item .tm-icon{margin-top:.05rem}
.tm-dropdown__name{display:block;font-weight:700;text-transform:uppercase;
  font-variation-settings:'wdth' 92;font-size:var(--fs-sm);letter-spacing:-.01em;color:var(--text)}
.tm-dropdown__item:hover .tm-dropdown__name{color:var(--signal)}
.tm-dropdown__desc{display:block;font-size:var(--fs-xs);color:var(--text-3);margin-top:.2rem;line-height:1.4}
.tm-dropdown__main > .tm-btn{margin-top:var(--s-6)}

/* Sağ "yardım" paneli — mega menüye derinlik katan, tıklanabilir tek öğe */
.tm-dropdown__assist{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-5);display:grid;gap:var(--s-3);align-content:start}
.tm-dropdown__assist-title{font-family:var(--f-sans);font-weight:700;text-transform:uppercase;
  font-variation-settings:'wdth' 88;font-size:var(--fs-base);line-height:1.15;letter-spacing:-.01em;color:var(--text)}
.tm-dropdown__assist-text{font-size:var(--fs-xs);color:var(--text-2);line-height:1.5}
.tm-dropdown__assist .tm-btn{margin-top:var(--s-2)}
.tm-dropdown__stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-top:var(--s-4);
  padding-top:var(--s-4);border-top:1px solid var(--line)}
.tm-dropdown__stats dt{font-family:var(--f-mono);font-weight:700;font-size:var(--fs-base);color:var(--text);
  font-variant-numeric:tabular-nums}
.tm-dropdown__stats dd{margin:.2rem 0 0;font-size:var(--fs-micro);color:var(--text-3);
  letter-spacing:.04em;line-height:1.3}

.tm-nav__cta{display:flex;align-items:center;gap:.7rem}
/* 44px: mobil dokunma hedefi için önerilen asgari boyut (önceden 34/40px). */
.tm-theme-toggle{width:44px;height:44px;display:grid;place-items:center;color:var(--text-3);
  border:1px solid var(--line);border-radius:var(--r-xs);font-size:.85rem;
  transition:color var(--t-fast),border-color var(--t-fast)}
.tm-theme-toggle:hover{color:var(--text);border-color:var(--line-2)}
.tm-burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-xs);
  color:var(--text);place-items:center}

.tm-mobile-menu{position:fixed;inset:var(--header-h) 0 0;z-index:890;background:var(--bg);
  overflow-y:auto;padding:var(--s-6) 0 8rem;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-base),visibility var(--t-base)}
.tm-mobile-menu.is-open{opacity:1;visibility:visible;pointer-events:auto}
.tm-mobile-menu__label{font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--signal);margin:var(--s-6) 0 var(--s-3);
  padding-bottom:var(--s-2);border-bottom:1px solid var(--line)}
.tm-mobile-menu__item{display:flex;align-items:flex-start;gap:.9rem;padding:.85rem 0;text-decoration:none;
  color:var(--text);border-bottom:1px solid var(--line);font-weight:700;text-transform:uppercase;
  font-variation-settings:'wdth' 88;font-size:var(--fs-lg);letter-spacing:-.015em}
.tm-mobile-menu__item:hover{color:var(--signal)}
.tm-mobile-menu__item .tm-icon{margin-top:.1rem}
.tm-mobile-menu__name{display:block}
.tm-mobile-menu__desc{display:block;text-transform:none;font-weight:500;font-size:var(--fs-xs);
  letter-spacing:0;color:var(--text-3);margin-top:.3rem;font-variation-settings:'wdth' 100;line-height:1.4}
.tm-mobile-menu__cta{position:fixed;left:0;right:0;bottom:0;z-index:895;display:none;gap:.7rem;
  padding:var(--s-4) clamp(1.25rem,4vw,3.5rem);background:var(--surface);border-top:1px solid var(--line)}
.tm-mobile-menu.is-open ~ .tm-mobile-menu__cta{display:flex}
body.tm-menu-open{overflow:hidden}

/* 6.3 Footer */
.tm-footer{background:var(--surface);color:var(--text-2);border-top:1px solid var(--line);
  padding-block:var(--s-9) var(--s-6)}
.tm-footer a{color:var(--text);text-decoration:none}
.tm-footer a:hover{color:var(--signal)}
.tm-footer__grid{display:grid;gap:var(--s-7) clamp(1.5rem,3vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.tm-footer__brand{grid-column:1/-1;max-width:46ch}
@media (min-width:900px){.tm-footer__brand{grid-column:span 2}}
.tm-footer__brand .tm-logo__name{font-size:1.5rem}
.tm-footer__brand p{margin-top:var(--s-5);font-size:var(--fs-sm);color:var(--text-2);line-height:1.6}
.tm-footer h3{font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal);margin-bottom:var(--s-4);padding-bottom:var(--s-2);
  border-bottom:1px solid var(--line)}
.tm-footer ul{list-style:none;padding:0;display:grid;gap:.7rem;font-size:var(--fs-sm)}
.tm-footer__social{display:flex;gap:var(--s-4);margin-top:var(--s-5);font-family:var(--f-mono);
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.tm-footer__social a{border-bottom:1px solid var(--line-2);padding-bottom:.15rem}
.tm-footer__social a:hover{border-color:var(--signal)}
.tm-footer__social a i{display:none}
.tm-footer__bottom{margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-6);justify-content:space-between;
  font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.08em;color:var(--text-3)}
.tm-footer__legal{display:flex;flex-wrap:wrap;gap:var(--s-5)}
.tm-footer__disclaimer{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--text-3);line-height:1.65;max-width:94ch}
.tm-footer__disclaimer strong{color:var(--text-2)}

/* 6.4 Sabit WhatsApp */
.tm-float{position:fixed;right:clamp(1rem,2.5vw,1.75rem);bottom:clamp(1rem,2.5vw,1.75rem);z-index:880;
  display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.15rem;border-radius:var(--r-sm);
  background:#00B368;color:#02160D;text-decoration:none;font-family:var(--f-mono);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 12px 30px rgba(0,0,0,.45);transition:transform var(--t-base),background var(--t-base)}
.tm-float::after{display:none}
.tm-float:hover{transform:translateY(-2px);background:#00D07A;color:#02160D}
.tm-float i{font-size:1rem}

/* ── 7. SAYFA BLOKLARI ──────────────────────────────────────────────────── */

/* 7.1 Hero */
.tm-hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden;
  padding-block:clamp(3rem,6vw,5.5rem) clamp(3rem,5vw,4.5rem);background:var(--bg)}
/* İnce blueprint ızgarası — "operasyon merkezi" hissini sabit katmanda verir. */
.tm-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(70ch 40ch at 78% -20%,rgba(34,211,238,.14),transparent 65%),
    repeating-linear-gradient(90deg,rgba(34,211,238,.05) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(0deg,rgba(34,211,238,.05) 0 1px,transparent 1px 56px)}
:root[data-theme="light"] .tm-hero::before{background-image:
    radial-gradient(70ch 40ch at 78% -20%,rgba(14,116,144,.08),transparent 65%),
    repeating-linear-gradient(90deg,rgba(14,116,144,.05) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(0deg,rgba(14,116,144,.05) 0 1px,transparent 1px 56px)}
/* Video yerine: yavaşça aşağı-yukarı süzülen tarama bandı (radar/HUD efekti).
   Saf CSS, GPU dostu; prefers-reduced-motion global kill-switch'i (§2) otomatik durdurur. */
.tm-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(34,211,238,.14) 46%,rgba(34,211,238,.03) 56%,transparent 100%);
  background-repeat:no-repeat;background-size:100% 320px;background-position:0 -320px;
  mask-image:radial-gradient(75ch 50ch at 78% 10%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(75ch 50ch at 78% 10%,#000,transparent 72%);
  animation:tmScan 9s ease-in-out infinite}
:root[data-theme="light"] .tm-hero::after{background:linear-gradient(180deg,transparent 0%,rgba(14,116,144,.16) 46%,rgba(14,116,144,.03) 56%,transparent 100%);
  background-repeat:no-repeat;background-size:100% 320px}
@keyframes tmScan{0%,100%{background-position:0 -320px}50%{background-position:0 calc(100% + 320px)}}
.tm-hero__inner{position:relative;display:grid;gap:clamp(2.5rem,4vw,4rem);align-items:center}
@media (min-width:992px){.tm-hero__inner{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
/* Boyut artık --fs-4xl'den (yukarıda düzeltildi) geliyor; burada ayrıca
   tekrar tanımlamaya gerek yok — tek kaynak korunuyor. */
.tm-hero h1{margin-bottom:var(--s-5)}
.tm-hero__lead{font-size:var(--fs-lg);line-height:1.55;color:var(--text-2);max-width:50ch}
.tm-hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.tm-hero__trust{margin-top:var(--s-7)}
.tm-hero h1 .line{display:block;overflow:hidden;padding-block:.04em .16em;margin-block:-.04em -.16em}
.tm-hero h1 .line>span{display:block}
.tm-hero h1 em{font-style:normal;color:var(--signal)}

/* 7.2 CANLI SOHBET ÖNİZLEMESİ — sitenin imza öğesi.
   Gerçek bir WhatsApp ekranı gibi görünmesi amaçlanan, sabit renkli bir mockup
   (site temasından bağımsız — bir ekran görüntüsü taklit ediyor, koyu/açık
   tema geçişiyle değişmemeli). JS birkaç örnek konuşma arasında "yazıyor..."
   efektiyle döner — bkz. tatarmedya.js. */
.tm-chat{border-radius:var(--r-md);overflow:hidden;font-family:var(--f-sans);
  border:1px solid var(--line);box-shadow:0 20px 40px -20px rgba(0,0,0,.4)}
.tm-chat__head{display:flex;align-items:center;gap:.75rem;padding:.85rem 1.1rem;
  background:#075E54;color:#fff}
/* Tatar Medya'nın gerçek marka rozeti (bkz. .tm-logo__mark, header) — sohbetin
   gerçekten bizden geldiğini belli etsin diye jenerik bir simge yerine bu kullanılır. */
.tm-chat__avatar{width:2.5rem;height:2.5rem;border-radius:var(--r-xs);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;background:var(--signal);
  color:var(--on-signal);font-size:1.05rem}
.tm-chat__who{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.tm-chat__name{font-weight:700;font-size:var(--fs-sm)}
.tm-chat__sub{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-micro);
  color:rgba(255,255,255,.75)}
.tm-chat__sub .tm-live-dot{background:#25D366}
.tm-chat__brand{margin-left:auto;color:rgba(255,255,255,.5);font-size:1.15rem}
.tm-chat__body{background:#ECE5DD;padding:1.1rem;min-height:17.5rem;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.55rem}
.tm-chat__bubble{max-width:82%;padding:.6rem .8rem;border-radius:.6rem;
  animation:tmChatIn .25s ease both;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.tm-chat__bubble--in{align-self:flex-start;background:#fff;border-top-left-radius:.15rem}
.tm-chat__bubble--out{align-self:flex-end;background:#D9FDD3;border-top-right-radius:.15rem}
.tm-chat__bubble p{color:#111B21;font-size:var(--fs-sm);line-height:1.4;margin:0}
.tm-chat__time{display:block;text-align:right;margin-top:.2rem;font-size:.68rem;
  color:rgba(0,0,0,.6);letter-spacing:.02em}
.tm-chat__time i{margin-left:.25rem;color:#53BDEB}
@keyframes tmChatIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.tm-chat__bubble--typing{display:flex;align-items:center;gap:4px;padding:.75rem .9rem}
.tm-chat__bubble--typing span{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.35);
  animation:tmTypingDot 1.1s ease-in-out infinite}
.tm-chat__bubble--typing span:nth-child(2){animation-delay:.15s}
.tm-chat__bubble--typing span:nth-child(3){animation-delay:.3s}
@keyframes tmTypingDot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* 7.2b Kanıt satırları (hizmet hero'su) */
.tm-proof{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden}
.tm-proof__row{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:center;
  padding:clamp(1.1rem,2vw,1.5rem);background:var(--bg)}
.tm-proof__row .tm-icon{grid-row:span 2}
.tm-proof__val{font-size:var(--fs-2xl);font-weight:800;text-transform:uppercase;
  font-variation-settings:'wdth' var(--wdth-display);line-height:.9;letter-spacing:-.035em;
  color:var(--text);font-variant-numeric:tabular-nums}
.tm-proof__cap{font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);margin-top:.35rem}

/* 7.3 Büyük sayı bloğu */
.tm-figures{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.tm-figure{background:var(--bg);padding:clamp(1.25rem,2.5vw,1.75rem)}
.tm-figure__num{font-size:var(--fs-3xl);font-weight:800;text-transform:uppercase;
  font-variation-settings:'wdth' var(--wdth-display);line-height:.85;letter-spacing:-.04em;display:block}
.tm-figure__label{margin-top:var(--s-3);font-family:var(--f-mono);font-size:var(--fs-micro);
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);max-width:26ch}

/* 7.4 Adımlar */
.tm-steps{list-style:none;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;counter-reset:tmstep}
.tm-step{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);background:var(--bg);
  padding:clamp(1.5rem,2.5vw,2rem);align-items:start;border:0;border-radius:0}
@media (min-width:768px){.tm-step{grid-template-columns:4rem 1fr;gap:var(--s-6)}}
.tm-step__n{counter-increment:tmstep;display:block;width:auto;height:auto;background:none;
  font-family:var(--f-mono);font-size:var(--fs-2xl);font-weight:700;line-height:.9;
  color:var(--signal);letter-spacing:-.02em}
.tm-step__n::before{content:counter(tmstep,decimal-leading-zero)}
.tm-step h3,.tm-step h4{font-size:var(--fs-xl);margin-bottom:var(--s-3)}
.tm-step p{font-size:var(--fs-sm);color:var(--text-2);max-width:56ch;margin-top:0}

/* 7.5 CTA */
.tm-cta{position:relative;overflow:hidden;background:var(--signal);color:var(--on-signal);
  border-radius:var(--r-md);padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,4vw,3.5rem);
  display:grid;gap:var(--s-6);align-items:center}
@media (min-width:900px){.tm-cta{grid-template-columns:minmax(0,1fr) auto;gap:var(--s-8)}}
/* CTA bandındaki metin sütunu dar (grid: 1fr + buton sütunu); tam H2
   boyutu (60px) burada 4-6 satıra bölünüyordu. Banner başlığına uygun,
   daha ölçülü bir boyut. */
.tm-cta h2{color:var(--on-signal);font-size:clamp(1.5rem,2.6vw + .6rem,2.5rem);line-height:1.05}
/* Koyu temada zemin parlak cyan (#22D3EE); --on-signal (#062024) tonunda
   %78 opaklık 5.69:1 veriyor (gerek 4.5:1). */
.tm-cta p{color:rgba(6,32,36,.78);margin-top:var(--s-4);max-width:52ch;font-size:var(--fs-base)}
/* Açık temada --signal daha koyu bir camgöbeği (#0E7490) olduğundan, koyu
   metin okunmaz hale geliyor — beyaz metne dönülür (%92 opaklıkta 4.8:1,
   gerek 4.5:1'in üzerinde). */
:root[data-theme="light"] .tm-cta p{color:rgba(255,255,255,.92)}
.tm-cta__actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.tm-cta .tm-btn{--btn-bg:var(--on-signal);--btn-fg:var(--signal);--btn-bd:var(--on-signal)}
.tm-cta .tm-btn::before{background:#fff}
.tm-cta .tm-btn:hover{color:var(--signal);border-color:#fff}
.tm-cta .tm-btn--ghost{--btn-bg:transparent;--btn-fg:var(--on-signal);--btn-bd:rgba(6,32,36,.45)}
.tm-cta .tm-btn--ghost::before{background:var(--on-signal)}
.tm-cta .tm-btn--ghost:hover{color:var(--signal);border-color:var(--on-signal)}
.tm-cta .tm-btn--onDark{--btn-bg:var(--on-signal);--btn-fg:var(--signal);--btn-bd:var(--on-signal)}
.tm-section--ink .tm-btn--ghost{--btn-fg:var(--text);--btn-bd:var(--line-2)}

/* 7.6 Yan panel */
.tm-aside{position:sticky;top:calc(var(--header-h) + 1.5rem);display:grid;gap:var(--s-5);align-self:start}
.tm-aside__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.tm-aside__head{background:var(--surface-2);color:var(--signal);padding:.85rem 1.1rem;
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.5rem}
.tm-aside__head i{display:none}
.tm-aside__body{padding:1.1rem;display:grid;gap:var(--s-4);font-size:var(--fs-sm);color:var(--text-2)}

/* 7.7 Makale */
.tm-prose{max-width:min(var(--measure),100%);overflow-wrap:break-word;font-size:var(--fs-base)}
.tm-prose>*{max-width:100%}
.tm-prose>*+*{margin-top:var(--s-5)}
.tm-prose h2{margin-top:var(--s-9);font-size:var(--fs-2xl)}
.tm-prose h3{margin-top:var(--s-7);font-size:var(--fs-xl)}
.tm-prose h4{margin-top:var(--s-6);font-size:var(--fs-lg)}
.tm-prose h2+*,.tm-prose h3+*,.tm-prose h4+*{margin-top:var(--s-4)}
.tm-prose p{color:var(--text-2)}
.tm-prose ul,.tm-prose ol{display:grid;gap:.6rem;color:var(--text-2);padding-left:1.15rem}
.tm-prose li::marker{color:var(--signal)}
.tm-prose a{color:var(--text);font-weight:600;text-decoration-color:var(--signal)}
.tm-prose a:hover{color:var(--signal)}
.tm-prose a.tm-btn{color:var(--btn-fg);text-decoration:none}
.tm-prose a.tm-btn:hover{color:var(--bg)}
.tm-prose a.tm-btn--whatsapp:hover{color:var(--bg)}
.tm-prose img{margin-block:var(--s-7);border:1px solid var(--line);border-radius:var(--r-sm)}
.tm-prose table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tm-prose th,.tm-prose td{padding:.85rem 1rem;border:1px solid var(--line);text-align:left}
.tm-prose th{background:var(--surface);font-family:var(--f-mono);font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.tm-prose strong{color:var(--text);font-weight:700}

/* 7.7b Eski hizmet içeriği uyum katmanı — data/services.php'deki 'content'
   alanları eski Bootstrap sınıflarıyla (row/col-md-*, alert, btn, text-*)
   yazılmış. İçeriği yeniden yazmak yerine bu sınıfları, yalnızca .tm-prose
   içinde, mevcut tasarım diliyle karşılıyoruz — 10 hizmet sayfasını tek
   noktadan düzeltir. */
.tm-prose .content-section+.content-section{margin-top:var(--s-9)}
.tm-prose .content-section>p,
.tm-prose .content-section>.alert,
.tm-prose .content-section>.row,
.tm-prose .content-section>.process-details,
.tm-prose .content-section>.cta-section{margin-top:var(--s-5)}
.tm-prose .content-section>p:first-child{margin-top:0}
.tm-prose .lead{font-size:var(--fs-lg)}

/* yardımcı sınıflar */
.tm-prose .mb-0{margin-bottom:0}
.tm-prose .mb-2{margin-bottom:var(--s-2)}
.tm-prose .mb-3{margin-bottom:var(--s-3)}
.tm-prose .mb-4{margin-bottom:var(--s-4)}
.tm-prose .mb-5{margin-bottom:var(--s-6)}
.tm-prose .mt-5{margin-top:var(--s-6)}
.tm-prose .me-2{margin-right:.5rem}
.tm-prose .text-center{text-align:center}
.tm-prose .d-flex{display:flex}
.tm-prose .gap-3{gap:var(--s-3)}
.tm-prose .justify-content-center{justify-content:center}
.tm-prose .flex-wrap{flex-wrap:wrap}

/* eski durum renkleri -> mevcut token'lar */
.tm-prose .text-danger{color:var(--risk)}
.tm-prose .text-warning{color:var(--warn)}
.tm-prose .text-info{color:var(--signal)}
.tm-prose .text-success{color:var(--ok)}
.tm-prose .text-secondary{color:var(--text-3)}

/* row/col-md-*: iki-üç sütunlu özellik/istatistik blokları */
.tm-prose .row{display:flex;flex-wrap:wrap;gap:var(--s-4)}
.tm-prose .col-md-6{flex:1 1 260px;min-width:0}
.tm-prose .col-md-4{flex:1 1 200px;min-width:0}

/* özellik listesi (ikon + başlık + açıklama) */
.tm-prose .feature-list{display:grid;gap:var(--s-4);padding-left:0;list-style:none}
.tm-prose .feature-list li{display:flex;align-items:flex-start;gap:.65rem}
.tm-prose .feature-list li::marker{content:none}
.tm-prose .feature-list i{margin-top:.3em;flex-shrink:0}
.tm-prose .feature-list strong{margin-right:.3em}

/* uyarı / bilgi kutuları */
.tm-prose .alert{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--signal);
  border-radius:var(--r-sm);padding:var(--s-5)}
.tm-prose .alert-success{border-left-color:var(--ok)}
.tm-prose .alert-info{border-left-color:var(--signal)}
.tm-prose .alert h3{margin-top:0;font-size:var(--fs-lg);text-transform:none;letter-spacing:0}
.tm-prose .alert p:last-child{margin-bottom:0}

/* durum kartı / istatistik kartı */
.tm-prose .situation-card,.tm-prose .stat-card{height:100%;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s-5)}
.tm-prose .situation-card h3{margin-top:0;font-size:var(--fs-base);text-transform:none;
  letter-spacing:0;font-weight:700;display:flex;align-items:center}
.tm-prose .situation-card p{margin-top:var(--s-2);font-size:var(--fs-sm)}
.tm-prose .stat-card{text-align:center}
.tm-prose .stat-number{font-family:var(--f-mono);font-size:var(--fs-2xl);font-weight:800;color:var(--text)}
.tm-prose .stat-label{margin-top:var(--s-2);font-weight:700;color:var(--text)}
.tm-prose .stat-description{margin-top:var(--s-1);font-size:var(--fs-sm);color:var(--text-3)}

/* süreç adımları */
.tm-prose .process-details{display:grid;gap:var(--s-5)}
.tm-prose .process-detail-item{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:start}
.tm-prose .process-icon{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;
  border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);color:var(--signal);flex-shrink:0}
.tm-prose .process-content h3{margin-top:0;font-size:var(--fs-base);text-transform:none;letter-spacing:0}
.tm-prose .process-content p{margin-top:var(--s-2)}

/* sayfa içi CTA bloğu */
.tm-prose .cta-section{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(1.75rem,3vw,2.5rem)}
.tm-prose .cta-section h3{margin-top:0;font-size:var(--fs-xl)}

/* eski .btn sınıfları -> .tm-btn görünümü */
.tm-prose .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1rem 1.75rem;font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;line-height:1;border-radius:var(--r-sm);
  text-decoration:none;border:1.5px solid transparent;transition:filter var(--t-base)}
.tm-prose .btn:hover{filter:brightness(1.08)}
.tm-prose .btn-lg{padding:1.2rem 2.2rem;font-size:var(--fs-sm)}
.tm-prose .btn-success{background:#00B368;color:#02160D;border-color:#00B368}
.tm-prose .btn-outline-primary{background:transparent;color:var(--text);border-color:var(--line-2)}
.tm-prose .btn-outline-primary:hover{border-color:var(--text)}

.tm-article-head{padding-block:var(--s-7) var(--s-6);border-bottom:1px solid var(--line);margin-bottom:var(--s-8)}
.tm-article-head h1{font-size:var(--fs-2xl);max-width:24ch}
.tm-article-meta{display:flex;flex-wrap:wrap;gap:var(--s-5);margin-top:var(--s-5);
  font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.tm-article-meta span{display:inline-flex;align-items:center;gap:.4rem}
.tm-article-meta i{display:none}

/* 7.8 Yazı kartı */
.tm-post-card{display:flex;flex-direction:column;gap:var(--s-3);height:100%;overflow:hidden;
  text-decoration:none;color:inherit;position:relative;transition:background var(--t-base)}
.tm-grid>a.tm-post-card:hover{background:var(--surface-2)}
.tm-post-card__body{display:contents}
.tm-post-card__title{font-size:var(--fs-lg);font-weight:700;text-transform:uppercase;
  font-variation-settings:'wdth' 90;line-height:1.08;letter-spacing:-.015em;color:var(--text);
  transition:color var(--t-fast)}
.tm-post-card:hover .tm-post-card__title{color:var(--signal)}
.tm-post-card__excerpt{font-size:var(--fs-sm);color:var(--text-2)}
.tm-post-card__foot{margin-top:auto;padding-top:var(--s-4);font-family:var(--f-mono);
  font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
  display:flex;justify-content:space-between;gap:var(--s-4)}
.tm-post-card__foot i{display:none}

/* 7.9 Paket */
.tm-plan{display:flex;flex-direction:column;gap:var(--s-4);height:100%;position:relative}
.tm-plan--featured{outline:2px solid var(--signal);outline-offset:-1px}
.tm-plan--featured::before{content:"EN ÇOK TERCİH EDİLEN";display:block;position:static;transform:none;
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:700;letter-spacing:.13em;
  color:var(--signal);background:none;padding:0;border-radius:0}
.tm-plan__name{font-size:var(--fs-xl);font-weight:800;text-transform:uppercase;font-variation-settings:'wdth' 90}
.tm-plan__price{font-size:var(--fs-3xl);font-weight:800;line-height:.88;letter-spacing:-.04em;
  font-variation-settings:'wdth' var(--wdth-display)}
.tm-plan__period{font-family:var(--f-mono);font-size:var(--fs-micro);color:var(--text-3);letter-spacing:.1em}

/* 7.10 404 */
.tm-404{min-height:58vh;display:grid;align-content:center;padding-block:var(--s-10)}
.tm-404__code{font-size:var(--fs-5xl);font-weight:800;line-height:.78;letter-spacing:-.055em;
  font-variation-settings:'wdth' 78;color:var(--signal)}
.tm-404 h1{margin-top:var(--s-5);font-size:var(--fs-2xl)}
.tm-404__links{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-7)}

/* ── 8. HAREKET ─────────────────────────────────────────────────────────── */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .tm-reveal{animation:tmReveal linear both;animation-timeline:view();animation-range:entry 6% cover 24%}
    @keyframes tmReveal{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
    .tm-hero h1 .line>span{animation:tmLine .9s cubic-bezier(.16,1,.3,1) both}
    .tm-hero h1 .line:nth-child(2)>span{animation-delay:.07s}
    .tm-hero h1 .line:nth-child(3)>span{animation-delay:.14s}
    @keyframes tmLine{from{transform:translateY(105%)}to{transform:translateY(0)}}
  }
}
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:tmFadeOut .16s ease both}
  ::view-transition-new(root){animation:tmFadeIn .26s cubic-bezier(.16,1,.3,1) both}
  @keyframes tmFadeOut{to{opacity:0}}
  @keyframes tmFadeIn{from{opacity:0;transform:translateY(8px)}}
}

/* ── 9. YARDIMCI ────────────────────────────────────────────────────────── */
.tm-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tm-center{text-align:center}
.tm-mt-0{margin-top:0!important}
.tm-mt-5{margin-top:var(--s-5)}
.tm-mt-7{margin-top:var(--s-7)}
.tm-flex{display:flex;gap:var(--s-4);align-items:center;flex-wrap:wrap}
.tm-full{width:100%}
.tm-rule{height:1px;background:var(--line);border:0;margin-block:var(--s-7)}

/* ── 10. MOBİL ──────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .tm-nav__links,.tm-nav__cta .tm-btn{display:none}
  .tm-burger{display:grid}
}
@media (min-width:1025px){.tm-mobile-menu,.tm-mobile-menu__cta{display:none!important}}
@media (max-width:640px){
  :root{--header-h:60px}
  .tm-topbar__more{display:none}
  .tm-logo__sub{display:none}
  .tm-hero__actions .tm-btn{width:100%}
  .tm-btn{white-space:normal;text-align:center}
  .tm-float{padding:.75rem .95rem;font-size:10px}
}
@media (max-width:360px){.tm-container{padding-inline:1rem}}

/* ── 11. YAZDIRMA ───────────────────────────────────────────────────────── */
@media print{
  .tm-header,.tm-topbar,.tm-footer,.tm-float,.tm-mobile-menu,.tm-cta{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}