/* Barq — tasarım sistemi
   Stitch çıktısı Tailwind CDN ile geliyordu; CDN derleyicisi tarayıcıda çalıştığı
   için üretimde her sayfa yüklemesinde stil hesaplanıyor ve ilk boyamada içerik
   biçimsiz görünüyor. Aynı tokenlar burada düz CSS olarak sabitlendi. */

:root {
  /* Yuzeyler — sayfa ASLA saf beyaz olmaz; sicak gri tuval beyaz kartlari kaldirir */
  --surface: #e5e5e5;          /* canvas  */
  --surface-lowest: #ffffff;   /* card    */
  --surface-low: #f3f3f3;      /* mist    */
  --surface-container: #f3f3f3;
  --surface-high: #c6c6c6;
  --surface-variant: #979797;

  --on-surface: #000000;            /* carbon black */
  --on-surface-variant: #444444;    /* slate        */
  --tertiary: #444444;
  --outline: #c6c6c6;               /* ash          */
  --outline-variant: #c6c6c6;
  --rule: #c6c6c6;
  --smoke: #979797;
  --graphite: #2f2f2f;

  /* Ayri bir CTA rengi yok: birincil eylem siyah bloktur */
  --primary: #000000;
  --primary-container: #2f2f2f;
  --on-primary: #ffffff;
  --primary-fixed: #d1ffca;    /* mint chip — yalnizca etiket ve baglanti zemini */

  --mint: #d1ffca;
  --voltage: #fff100;          /* yalnizca e-posta vurgusu ve mikro aksan */
  --secondary: #000000;
  --secondary-container: #2f2f2f;

  --font-display: Anton, "Arial Narrow", "Haettenschweiler", sans-serif;
  --serif: Anton, "Arial Narrow", sans-serif;   /* eski ad, geriye donuk */
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --max-width: 1200px;
  --gutter: 24px;
  --margin-desktop: 40px;
  --margin-mobile: 20px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--primary-container); color: #fffbff; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--margin-desktop);
}

/* ── Tipografi ───────────────────────────────────────────────────────────
   Serif = zeka (başlıklar), sans = arayüz (gövde, meta). */
.display-lg { font-family: var(--font-display); font-size: clamp(44px, 7vw, 80px); line-height: 0.9; font-weight: 400; letter-spacing: -0.03em; text-transform: uppercase; }
.headline-lg { font-family: var(--font-display); font-size: clamp(34px, 4.4vw, 48px); line-height: 0.9; font-weight: 400; letter-spacing: -0.03em; text-transform: uppercase; }
.headline-md { font-family: var(--sans); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; text-transform: uppercase; }
.headline-sm { font-family: var(--sans); font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; text-transform: uppercase; }
.body-lg { font-size: 20px; line-height: 1.35; letter-spacing: -0.01em; }
.body-md { font-size: 16px; line-height: 1.5; }
.label-md { font-family: var(--mono); font-size: 12px; line-height: 1.6; font-weight: 400; letter-spacing: -0.03em; text-transform: uppercase; }
.metadata-sm { font-family: var(--mono); font-size: 12px; line-height: 1.3; font-weight: 400; letter-spacing: -0.03em; }

.muted { color: var(--on-surface-variant); }
.tertiary { color: var(--tertiary); }
.accent { color: var(--primary); }

/* ── Üst yardımcı çubuk ──────────────────────────────────────────────────── */
.utility-bar {
  background: var(--on-surface);
  color: var(--on-primary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  padding: 6px var(--margin-desktop);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.utility-bar .left, .utility-bar .right { display: flex; align-items: center; gap: 16px; }
.utility-bar .live { display: flex; align-items: center; gap: 8px; color: var(--primary-fixed); }
.utility-bar .live strong { font-weight: 700; letter-spacing: 0.08em; }
.utility-bar .dim { color: var(--surface-variant); }
.utility-bar .lang-active { color: var(--primary-fixed); border-bottom: 1px solid var(--primary-fixed); padding-bottom: 2px; }

.dot-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary);
  animation: pulse 2s infinite;
  flex: none;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(177, 38, 1, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(177, 38, 1, 0); }
  100% { box-shadow: 0 0 0 0 rgba(177, 38, 1, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dot-pulse { animation: none; }
}

/* ── Başlık / gezinme ───────────────────────────────────────────────────── */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--outline-variant);
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
}
.brand {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav a {
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--on-surface-variant);
  transition: color .2s;
  padding-bottom: 4px;
}
.site-nav a:hover { color: var(--primary); }
.site-nav a.active { color: var(--primary); border-bottom: 2px solid var(--primary); }

/* ── Gezinme açılır menüsü (sektör dikeyleri) ────────────────────────────
   16 dikey üst çubuğa sığmıyor; "Categories" başlığı altında iki kolonlu
   bir panel açılıyor. JS yok — hover + focus-within yetiyor.
   Panelle başlık arasındaki boşluk ::before ile köprülenmiş, yoksa fare
   aradan geçerken menü kapanıyor. */
.nav-group { position: relative; display: inline-flex; align-items: center; gap: 5px; }
.nav-caret { font-size: 9px; color: var(--on-surface-variant); transition: transform .2s, color .2s; }
.nav-group:hover .nav-caret { transform: rotate(180deg); color: var(--primary); }

.nav-drop {
  position: absolute;
  top: calc(100% + 10px); left: -14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(148px, 1fr));
  gap: 0 24px;
  padding: 12px 18px;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 50;
}
.nav-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-group:hover .nav-drop,
.nav-group:focus-within .nav-drop { opacity: 1; visibility: visible; transform: none; }

.nav-drop a {
  font-size: 13px; font-weight: 500;
  padding: 6px 0;
  white-space: nowrap;
  border-bottom: 0;
}
.nav-drop a.active { border-bottom: 0; }

.header-actions { display: flex; align-items: center; gap: 16px; }
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 16px; font-weight: 500; letter-spacing: -0.01em;
  padding: 16px 24px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
}
.btn-primary { background: var(--on-surface); color: var(--on-primary); }
.btn-primary:hover { opacity: .85; }
.btn-outline { background: transparent; color: var(--on-surface); border-color: var(--on-surface); }
.icon-btn { background: none; border: 0; color: var(--on-surface-variant); cursor: pointer; padding: 4px; line-height: 0; }
.icon-btn:hover { color: var(--primary); }

/* Burger ve menü içindeki bülten düğmesi yalnızca mobilde görünüyor;
   perde de masaüstünde hiç çizilmiyor. */
.nav-toggle { display: none; }
.site-nav .nav-cta { display: none; }
.nav-backdrop { display: none; }
@media (max-width: 768px) { .nav-backdrop { display: block; } }

/* ── Son dakika şeridi ──────────────────────────────────────────────────── */
.ticker-wrap {
  width: 100%;
  overflow: hidden;
  background: var(--surface-low);
  border-bottom: 1px solid var(--surface-variant);
  padding: 6px 0;
}
.ticker { display: inline-block; white-space: nowrap; animation: ticker 60s linear infinite; }
.ticker:hover { animation-play-state: paused; }
.ticker-item { display: inline-block; padding: 0 2rem; font-size: 12px; font-weight: 500; color: var(--on-surface-variant); }
.ticker-item .tag { color: var(--primary); font-weight: 700; margin-right: 8px; }
.ticker-item::after { content: '•'; margin-left: 4rem; color: var(--outline); }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker { animation: none; }
  .ticker-wrap { overflow-x: auto; }
}

/* ── Sayfa gövdesi ──────────────────────────────────────────────────────── */
main { padding: 32px 0 var(--section-gap); }

.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.col-8 { grid-column: span 8; }
.col-4 { grid-column: span 4; }
.col-12 { grid-column: span 12; }

.story-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }

/* ── Ana sayfa: kademeli boyut düzeni ────────────────────────────────────
   Üç basamak — manşet, orta, satır. Amaç okuyucunun sayfaya bakınca
   hiyerarşiyi kart boyutundan görmesi. Signal 360'ta üstte dört eşit kart
   vardı ve hepsi aynı derecede önemli görünüyordu.

   Basamaklar arasındaki fark BÜYÜK tutuldu (40px / 20px / 16px başlık):
   iki basamak birbirine yakın boyutta olunca kademe okunmuyor, sayfa
   sadece dağınık görünüyor. */

/* 1. basamak — manşet */
.hero-story { border-bottom: 1px solid var(--rule); padding-bottom: 28px; margin-bottom: 28px; }
.hero-story > a { display: block; }
.hero-story .hs-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface-variant);
  margin-bottom: 18px;
}
.hero-story .hs-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.hero-story:hover .hs-thumb img { transform: scale(1.03); }
.hero-story .hs-body { display: block; }
.hero-story .hs-cat {
  display: inline-block;
  font-size: 11px; line-height: 16px; font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-bottom: 8px;
}
.hero-story h2 {
  font-family: var(--serif);
  font-size: 40px; line-height: 46px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  transition: color .2s;
}
.hero-story:hover h2 { color: var(--primary); }
.hero-story .hs-body p {
  font-size: 17px; line-height: 28px;
  color: var(--on-surface-variant);
  margin: 0 0 12px;
  max-width: 62ch;               /* uzun satır okumayı yavaşlatıyor */
}
.hero-story .hs-meta {
  display: block;
  font-size: 12px; line-height: 16px; font-weight: 500;
  color: var(--tertiary);
}
.hero-story .hs-meta .dot { margin: 0 6px; color: var(--outline); }
/* Görseli olmayan manşette başlık biraz küçülüyor: 40px başlık tek başına,
   üstünde görsel olmadan sayfanın en tepesinde çok ağır duruyor. */
.hero-story.no-image h2 { font-size: 34px; line-height: 40px; }

/* 2. basamak — orta ızgara. Kart biçimi bölüm sayfasındakiyle aynı
   (.grid-story), yalnızca iki kolona yerleşiyor. */
.medium-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px var(--gutter);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}

/* Blok başlığı */
.block-head {
  font-family: var(--sans);
  font-size: 12px; line-height: 16px; font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tertiary);
  margin: 28px 0 16px;
}

/* 3. basamak — satırlar */
.river { display: flex; flex-direction: column; }
.compact-story { border-bottom: 1px solid var(--rule); }
.compact-story:last-child { border-bottom: 0; }
.compact-story > a {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
}
.compact-story .cs-thumb {
  flex: 0 0 104px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface-variant);
}
.compact-story .cs-thumb img { width: 100%; height: 100%; object-fit: cover; }
.compact-story .cs-body { display: block; min-width: 0; }
.compact-story .cs-meta {
  display: block;
  font-size: 11px; line-height: 16px; font-weight: 600;
  color: var(--tertiary);
  margin-bottom: 4px;
}
.compact-story .cs-meta .cat { color: var(--primary); font-weight: 800; letter-spacing: 0.04em; }
.compact-story .cs-meta .dot { margin: 0 5px; color: var(--outline); }
.compact-story h3 {
  font-family: var(--serif);
  font-size: 16px; line-height: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  transition: color .2s;
}
.compact-story:hover h3 { color: var(--primary); }


/* Kart değil: arka plan ve gölge yok, ayırıcı 1px kural — baskı gazetesi mantığı */
.story {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 16px;
}
/* Kartın tamamı tek bağlantı, yani .story'nin tek çocuğu <a>. Boşluk aralığı
   onun içinde kurulmazsa görsel ile kategori satırı yapışık geliyor. */
.story > a {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.story .thumb {
  aspect-ratio: 16 / 9;
  background: var(--surface-variant);
  border-radius: 4px;
  overflow: hidden;
}
.story .thumb img { width: 100%; height: 100%; object-fit: cover; }
.story .meta { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 500; }
.story .meta .cat { color: var(--primary); font-weight: 700; text-transform: uppercase; }
.story .meta .time { color: var(--on-surface-variant); }
.story h2 {
  font-family: var(--serif); font-size: 20px; line-height: 28px; font-weight: 600;
  margin: 0; transition: color .2s;
}
.story a:hover h2 { color: var(--primary); }
.story p {
  margin: 0; color: var(--on-surface-variant); font-size: 16px; line-height: 26px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.story .source { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tertiary); }
.story .body { display: flex; flex-direction: column; gap: 8px; }

/* Görselsiz destek haberleri */

/* ── Flash akışı ────────────────────────────────────────────────────────── */
.flash-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px; padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.flash-head h2 {
  font-family: var(--serif); font-size: 20px; line-height: 28px; font-weight: 700;
  text-transform: uppercase; margin: 0;
}
/* Akış birincil içerik akışının üzerinde durduğunu belli etsin diye tek
   yumuşak gölge — sistemde gölge kullanılan tek yer burası. */
.flash-feed {
  background: var(--surface-lowest);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.flash-item { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.flash-item:last-child { border-bottom: 0; padding-bottom: 0; }
.flash-item > a { display: flex; flex-direction: column; gap: 4px; }
.flash-item .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.flash-item .time { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--on-surface-variant); }
.flash-item .badge {
  background: var(--primary-container); color: #fffbff;
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
  letter-spacing: .04em; flex: none;
}
.flash-item p { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.02em; }
.flash-item a:hover p { color: var(--primary); }
.flash-item .source { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tertiary); }
.flash-empty { color: var(--tertiary); font-size: 14px; }

/* ── Bölüm sayfası ──────────────────────────────────────────────────────
   Düz liste yerine bento düzen: manşet + ızgara + sağ ray. Etiket rengi
   ana sayfayla aynı (birincil kırmızı) tutuldu — aynı haber iki yüzeyde
   farklı renkte görünmesin. */

.section-head { border-bottom: 1px solid var(--rule); padding-bottom: 24px; margin-bottom: 32px; }
.section-head h1 { font-family: var(--serif); font-size: 48px; line-height: 56px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.section-head p { margin: 8px 0 0; color: var(--on-surface-variant); font-size: 18px; line-height: 30px; max-width: 48rem; }

/* Etiket çipleri — bölüm içindeki gerçek etiketlere göre süzme */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chips .chip {
  padding: 6px 16px; border-radius: 999px;
  border: 1px solid var(--outline-variant);
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
  color: var(--on-surface); background: transparent;
  transition: border-color .2s, background .2s, color .2s;
}
.chips .chip:hover { border-color: var(--on-surface); }
.chips .chip.active { background: var(--on-surface); border-color: var(--on-surface); color: var(--on-primary); }

.section-layout { display: grid; grid-template-columns: 2fr 1fr; gap: var(--section-gap); align-items: start; }
.section-main { min-width: 0; display: flex; flex-direction: column; gap: 32px; }

/* Manşet: solda görsel, sağda metin */
.lead-story { border-bottom: 1px solid var(--rule); padding-bottom: 32px; }
.lead-story > a { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: center; }
.lead-story.no-image > a { grid-template-columns: 1fr; }
.lead-story .ls-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; border-radius: 4px; background: var(--surface-variant); }
.lead-story .ls-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.lead-story:hover .ls-thumb img { transform: scale(1.04); }
.lead-story .ls-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lead-story .ls-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 500; }
.lead-story .ls-meta .cat { color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.lead-story .ls-meta .dot { color: var(--outline-variant); }
.lead-story .ls-meta .time { color: var(--on-surface-variant); }
.lead-story h2 {
  font-family: var(--serif); font-size: 32px; line-height: 40px; font-weight: 700;
  letter-spacing: -0.01em; margin: 0; transition: color .2s;
}
.lead-story:hover h2 { color: var(--primary); }
.lead-story p {
  margin: 0; color: var(--on-surface-variant); font-size: 16px; line-height: 26px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Izgara: üstte 3:2 görsel, altında etiket ve başlık */
.section-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px var(--gutter); }
.grid-story > a { display: flex; flex-direction: column; gap: 8px; }
.grid-story .gs-thumb { display: block; aspect-ratio: 3/2; overflow: hidden; border-radius: 4px; background: var(--surface-variant); margin-bottom: 4px; }
.grid-story .gs-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.grid-story:hover .gs-thumb img { transform: scale(1.04); }
.grid-story .gs-cat {
  font-size: 12px; line-height: 16px; font-weight: 700;
  color: var(--primary); text-transform: uppercase; letter-spacing: .06em;
}
.grid-story h3 {
  font-family: var(--serif); font-size: 20px; line-height: 28px; font-weight: 600;
  margin: 0; transition: color .2s;
}
.grid-story:hover h3 { color: var(--primary); }
.grid-story .gs-time { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tertiary); }

/* ── Sağ ray ────────────────────────────────────────────────────────────── */
.section-rail { display: flex; flex-direction: column; gap: 32px; position: sticky; top: 96px; }
.rail-title {
  font-family: var(--serif); font-size: 20px; line-height: 28px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  margin: 0 0 8px; padding-bottom: 12px; border-bottom: 2px solid var(--on-surface);
}

.most-read { display: flex; flex-direction: column; }
.most-read .mr-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
}
.most-read .mr-item:last-child { border-bottom: 0; }
/* Sıra numarası büyük ve soluk: hiyerarşiyi taşıyor ama başlığı bastırmıyor */
.most-read .mr-num {
  font-family: var(--serif); font-size: 40px; line-height: .9; font-weight: 700;
  color: var(--surface-variant); flex: none; transition: color .2s;
}
.most-read .mr-item:hover .mr-num { color: var(--primary); }
.most-read .mr-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.most-read .mr-cat { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--on-surface-variant); }
.most-read .mr-title { font-family: var(--serif); font-size: 18px; line-height: 24px; font-weight: 600; transition: color .2s; }
.most-read .mr-item:hover .mr-title { color: var(--primary); }

/* Radar — "veri" kutusu, haber akışından ayrışsın diye beyaz zemin */
.radar-box { background: var(--surface-lowest); border: 1px solid var(--outline-variant); border-radius: 4px; padding: 16px; }
.radar-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--rule);
}
.radar-head h3 {
  margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--secondary);
}
.radar-head span { font-size: 12px; font-weight: 500; color: var(--on-surface-variant); }
.radar-box ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.radar-item { display: flex; gap: 8px; align-items: flex-start; }
.radar-arrow { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--secondary); }
.radar-item.down .radar-arrow { color: var(--tertiary); }
.radar-item.flat .radar-arrow { color: var(--outline); }
.radar-arrow svg { width: 100%; height: 100%; display: block; }
.radar-name { display: block; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.radar-note { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--on-surface-variant); }


.pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 40px; }
.pager a, .pager span {
  font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 4px;
  border: 1px solid var(--rule); color: var(--on-surface-variant);
}
.pager a:hover { border-color: var(--on-surface); color: var(--on-surface); }
.pager .current { background: var(--on-surface); color: var(--on-primary); border-color: var(--on-surface); }

/* ── Haber sayfası ──────────────────────────────────────────────────────── */
.article-head { max-width: 760px; margin: 0 auto 32px; }
.article-head .meta { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; margin-bottom: 16px; }
.article-head .meta .cat { color: var(--primary); font-weight: 700; text-transform: uppercase; }
.article-head .meta .time { color: var(--on-surface-variant); }
.article-head h1 {
  font-family: var(--serif); font-size: 48px; line-height: 56px; font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 16px;
}
.article-head .summary { font-size: 18px; line-height: 30px; color: var(--on-surface-variant); margin: 0; }

.article-cover { max-width: 960px; margin: 0 auto 40px; border-radius: 4px; overflow: hidden; }
.article-cover img { width: 100%; height: auto; }

/* Uzun okuma için 1.6x satır yüksekliği ve dar ölçü */
.article-body { max-width: 680px; margin: 0 auto; font-size: 18px; line-height: 30px; }
.article-body p { margin: 0 0 24px; }
.article-body h2 { font-family: var(--serif); font-size: 24px; line-height: 32px; font-weight: 600; margin: 40px 0 16px; }
.article-body h3 { font-family: var(--serif); font-size: 20px; line-height: 28px; font-weight: 600; margin: 32px 0 12px; }
.article-body ul, .article-body ol { margin: 0 0 24px; padding-left: 24px; }
.article-body li { margin-bottom: 8px; }
.article-body blockquote {
  margin: 32px 0; padding-left: 24px;
  border-left: 3px solid var(--primary);
  font-family: var(--serif); font-size: 22px; line-height: 32px;
}
.article-body a { color: var(--secondary); text-decoration: underline; }

.article-foot {
  max-width: 680px; margin: 40px auto 0; padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 14px; color: var(--tertiary);
}
.article-foot a { color: var(--secondary); }

.related { margin-top: var(--section-gap); }
.related h2 {
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  border-bottom: 1px solid var(--rule); padding-bottom: 12px; margin: 0 0 24px;
}

/* ── Statik sayfa ───────────────────────────────────────────────────────── */
.page-body { max-width: 760px; margin: 0 auto; font-size: 18px; line-height: 30px; }
.page-body h1 { font-family: var(--serif); font-size: 48px; line-height: 56px; letter-spacing: -0.02em; margin: 0 0 24px; }
.page-body h2 { font-family: var(--serif); font-size: 24px; margin: 40px 0 16px; }
.page-body p { margin: 0 0 24px; }
.page-body a { color: var(--secondary); text-decoration: underline; }

/* ── Bülten ─────────────────────────────────────────────────────────────── */
.newsletter-box {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 24px;
  margin-top: 32px;
  background: var(--surface-lowest);
}
.newsletter-box h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.newsletter-box p { margin: 0 0 16px; font-size: 14px; color: var(--on-surface-variant); }
.newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter-form input {
  flex: 1 1 200px;
  border: 1px solid var(--rule); border-radius: 4px;
  padding: 10px 12px; font-family: var(--sans); font-size: 16px;
  background: var(--surface-lowest); color: var(--on-surface);
}
.newsletter-form input:focus { outline: none; border-color: var(--secondary-container); }
.newsletter-msg { margin-top: 12px; font-size: 14px; }
.newsletter-msg.ok { color: #1c6b2e; }
.newsletter-msg.err { color: #ba1a1a; }

/* ── Alt bilgi ──────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--surface-high);
  border-top: 1px solid var(--outline-variant);
  padding: var(--section-gap) 0;
  margin-top: var(--section-gap);
}
.site-footer .inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.site-footer .brand-col { grid-column: span 4; display: flex; flex-direction: column; gap: 8px; }
.site-footer .brand-col .brand { font-size: 24px; }
.site-footer .brand-col p { margin: 8px 0 0; color: var(--on-surface-variant); font-size: 16px; }
.site-footer .links {
  grid-column: span 8;
  display: flex; justify-content: flex-end; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.site-footer .links a { font-size: 14px; font-weight: 600; color: var(--on-surface-variant); transition: color .2s; }
.site-footer .links a:hover { color: var(--primary); }

/* ── Duyarlı ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .col-8, .col-4 { grid-column: span 12; }
  /* Ray altta tam genişlikte; yapışkanlık tek kolonda anlamsız */
  .section-layout { grid-template-columns: 1fr; gap: 40px; }
  .section-rail { position: static; }
}

@media (max-width: 768px) {
  :root { --margin-desktop: var(--margin-mobile); --section-gap: 40px; }

  .utility-bar { font-size: 11px; gap: 8px; }
  .utility-bar .dim.hide-sm { display: none; }

  .brand { font-size: 24px; }
  .site-header .bar { padding: 16px 0; }

  /* ── Mobil gezinme: başlığın altına inen overlay ──────────────────────
     Şerit düzeninde menü flex satırının içinde kaldığı için burger'ın yanına
     açılıyordu. Artık akıştan çıkarılıp (position:absolute) başlığın altına
     tam genişlikte iniyor; arkasındaki içerik karartılıyor. */
  .nav-toggle {
    display: block; background: none; border: 0; cursor: pointer;
    color: var(--on-surface); padding: 4px; line-height: 0;
  }
  .nav-toggle .icon-close { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-open  { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: block; }

  /* Perde başlığın altında (z-index 30 < .site-header 40) kalıyor ki
     kapatmak için burger'a basmak da mümkün olsun. */
  .nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(26, 28, 27, .45);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s;
    z-index: 30;
  }
  .nav-backdrop.open { opacity: 1; visibility: visible; }

  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--margin-mobile) 12px;
    background: var(--surface-lowest);
    border-top: 1px solid var(--outline-variant);
    border-bottom: 1px solid var(--outline-variant);
    /* Sistemde gölge yalnızca birincil akışın üstünde duran öğelerde var */
    box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }
  .site-nav.open { opacity: 1; visibility: visible; transform: none; }

  .site-nav a {
    padding: 14px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--rule);
    white-space: normal;
  }
  .site-nav a:last-of-type { border-bottom: 0; }

  /* Mobilde hover diye bir şey yok: panel akışın içine, girintili olarak
     iki kolon halinde açılıyor ve hep görünür duruyor. */
  .nav-group { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .nav-caret { display: none; }
  .nav-drop {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
    padding: 2px 0 10px 14px;
    background: transparent;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .nav-drop::before { display: none; }
  .nav-drop a { font-size: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
  .nav-drop a.active { box-shadow: inset 3px 0 0 var(--primary); padding-left: 10px; }
  /* Dikey listede alt çizgi "aktif" anlamı taşımıyor — sol şerit taşıyor. */
  .site-nav a.active {
    border-bottom: 1px solid var(--rule);
    box-shadow: inset 3px 0 0 var(--primary);
    padding-left: 12px;
  }

  /* Üstteki bülten düğmesi mobilde menünün içine taşınıyor */
  .header-actions .btn { display: none; }
  .site-nav .nav-cta {
    display: block;
    margin-top: 12px;
    padding: 12px 16px;
    text-align: center;
    border-bottom: 0;
    background: var(--on-surface);
    color: var(--on-primary);
    border-radius: 4px;
  }

  @media (prefers-reduced-motion: reduce) {
    .site-nav, .nav-backdrop { transition: none; }
  }

  /* Menü açıkken arka plan kaymasın */
  body.nav-open { overflow: hidden; }

  .story-grid { grid-template-columns: 1fr; }
  .story h2 { font-size: 20px; line-height: 28px; }

  .section-head h1 { font-size: 28px; line-height: 34px; }
  .section-head p { font-size: 16px; line-height: 26px; }
  .chips { gap: 6px; }
  .chips .chip { padding: 5px 12px; font-size: 13px; }

  .lead-story > a { grid-template-columns: 1fr; }
  .lead-story h2 { font-size: 24px; line-height: 32px; }
  .section-grid { grid-template-columns: 1fr; gap: 28px; }

  /* Kademeli düzen mobilde de korunuyor ama fark daralıyor: 40px başlık
     360px ekranda üç satıra taşıyor. Orta ızgara tek kolona iniyor.
     Satırların minik görseli küçülüyor, kaldırılmıyor — görselsiz satır
     dizisi hangi haberin nerede bittiğini okumayı zorlaştırıyor. */
  .hero-story h2 { font-size: 28px; line-height: 34px; }
  .hero-story.no-image h2 { font-size: 26px; line-height: 32px; }
  .hero-story .hs-body p { font-size: 16px; line-height: 26px; }
  .medium-grid { grid-template-columns: 1fr; gap: 24px; }
  .compact-story .cs-thumb { flex-basis: 84px; }
  .compact-story h3 { font-size: 15px; line-height: 21px; }
  .most-read .mr-num { font-size: 32px; }

  .article-head h1 { font-size: 28px; line-height: 34px; }
  .article-body { font-size: 17px; line-height: 28px; }

  .site-footer .brand-col, .site-footer .links { grid-column: span 12; }
  .site-footer .links { justify-content: flex-start; gap: 16px; }
}

/* ── Kim Nereye Gitti (İnsanlar) ─────────────────────────────────────────
   Haber kartlarından bilerek farklı: burada kutu var. Bir hareket kaydı
   tek başına okunan yapılandırılmış bir veri; akıştaki haber gibi sırayla
   okunmuyor, o yüzden 1px çerçeveyle kendi alanını tanımlıyor. */

.people-intro { border-bottom: 1px solid var(--outline-variant); padding-bottom: 32px; margin-bottom: 32px; }
.people-intro h1 {
  font-family: var(--serif); font-size: 48px; line-height: 56px; font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px;
}
.people-intro p { margin: 0; font-size: 18px; line-height: 30px; color: var(--on-surface-variant); max-width: 42rem; }

.people-filters {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  background: var(--surface-low);
  border: 1px solid var(--outline-variant);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 32px;
}
.people-filters .group { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.people-filters select, .people-filters input {
  border: 1px solid var(--outline-variant); border-radius: 4px;
  padding: 8px 12px; font-family: var(--sans); font-size: 16px;
  background: var(--surface); color: var(--on-surface); min-width: 180px;
}
.people-filters select:focus, .people-filters input:focus { outline: none; border-color: var(--secondary-container); }
.people-filters .btn { padding: 8px 16px; }

.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }

.move-card {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 4px;
  padding: 16px;
  display: flex; flex-direction: column;
  transition: border-color .2s;
}
.move-card:hover { border-color: var(--on-surface); }

.move-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.move-head .avatar {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--outline-variant); flex: none; background: var(--surface-variant);
}
/* Fotoğraf yoksa baş harfler — gri daire boş durmasın */
.move-head .initials {
  width: 64px; height: 64px; border-radius: 50%; flex: none;
  background: var(--surface-container); color: var(--tertiary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 22px; font-weight: 700;
  border: 1px solid var(--outline-variant);
}
.move-head h3 { font-family: var(--serif); font-size: 20px; line-height: 28px; font-weight: 600; margin: 0; transition: color .2s; }
.move-card:hover .move-head h3 { color: var(--primary); }
.move-head .label {
  font-size: 12px; line-height: 16px; font-weight: 500;
  color: var(--tertiary); text-transform: uppercase; letter-spacing: .08em;
}

/* Eski → yeni görev zaman çizgisi */
.move-track { position: relative; padding-left: 24px; border-left: 2px solid var(--surface-variant); margin-bottom: 16px; }
.move-step { position: relative; }
.move-step + .move-step { margin-top: 8px; }
.move-step .dot {
  position: absolute; left: -31px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface-variant);
  border: 2px solid var(--surface-lowest);
}
.move-step.new .dot { background: var(--primary); }
.move-step .cap { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tertiary); margin: 0 0 4px; }
.move-step.new .cap { color: var(--primary); }
.move-step .role { font-size: 16px; line-height: 26px; margin: 0; }
.move-step.new .role { font-weight: 600; }
.move-step .org { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .02em; color: var(--on-surface-variant); margin: 0; }
.move-step.new .org { color: var(--on-surface); }

.move-foot {
  margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--outline-variant);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.move-foot .when { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tertiary); }
.move-foot a { font-size: 14px; font-weight: 600; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 4px; }
.move-card:hover .move-foot a { color: var(--primary); }

.people-more { display: flex; justify-content: center; margin-top: 40px; }
.people-more .btn { padding: 12px 24px; }

.people-empty { color: var(--tertiary); padding: 40px 0; text-align: center; }

/* Kişi sayfası */
.person-head { display: flex; align-items: center; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.person-head .avatar, .person-head .initials { width: 96px; height: 96px; font-size: 32px; }
.person-head h1 { font-family: var(--serif); font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
.person-head .label { font-size: 12px; font-weight: 500; color: var(--tertiary); text-transform: uppercase; letter-spacing: .08em; }
.person-body { max-width: 680px; }
.person-body .move-track { margin: 24px 0 32px; }

@media (max-width: 1024px) {
  .people-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .people-grid { grid-template-columns: 1fr; }
  .people-intro h1 { font-size: 28px; line-height: 34px; }
  .people-filters select, .people-filters input { min-width: 0; width: 100%; }
  .people-filters .group { width: 100%; }
  .person-head h1 { font-size: 28px; line-height: 34px; }
}

/* ── Ajans & Müşteri Hareketleri ─────────────────────────────────────────
   İnsan kartlarıyla aynı kutu mantığı, farklı iskelet: burada özne bir kişi
   değil (marka + disiplin) çifti ve alt satır üç varyanta göre renk/ikon
   değiştiriyor. */

.agency-head { border-bottom: 1px solid var(--outline-variant); padding-bottom: 24px; margin-bottom: 32px; }
.agency-head .row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
}
.agency-head h1 {
  font-family: var(--serif); font-size: 48px; line-height: 56px; font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px;
}
.agency-head p { margin: 0; color: var(--on-surface-variant); font-size: 16px; }

.agency-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.agency-filters input, .agency-filters select {
  border: 1px solid var(--outline-variant); border-radius: 4px;
  padding: 9px 12px; font-family: var(--sans); font-size: 16px;
  background: var(--surface-lowest); color: var(--on-surface); min-width: 170px;
}
.agency-filters input:focus, .agency-filters select:focus { outline: none; border-color: var(--secondary-container); }

.agency-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }

.agency-card {
  border: 1px solid var(--outline-variant);
  background: var(--surface-lowest);
  padding: 16px;
  display: flex; flex-direction: column;
  border-radius: 4px;
  transition: box-shadow .2s, border-color .2s;
}
.agency-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.05); border-color: var(--on-surface); }

.agency-card .ac-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.agency-card .ac-mark {
  width: 48px; height: 48px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-variant); border: 1px solid var(--outline-variant);
  border-radius: 4px;
  font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--on-surface-variant);
}
/* Rozet tipin rengini taşıyor: atama birincil, konkur ikincil, ayrılık nötr. */
.agency-card .ac-badge {
  font-size: 12px; line-height: 16px; font-weight: 500;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.agency-card.type-atama   .ac-badge { color: var(--primary);             background: rgba(177,38,1,.08);  border: 1px solid rgba(177,38,1,.2); }
.agency-card.type-konkur  .ac-badge { color: var(--secondary-container); background: rgba(46,91,255,.08); border: 1px solid rgba(46,91,255,.2); }
.agency-card.type-ayrilik .ac-badge { color: var(--tertiary);            background: rgba(93,92,91,.08);  border: 1px solid rgba(93,92,91,.2); }

.agency-card h3 {
  font-family: var(--serif); font-size: 24px; line-height: 32px; font-weight: 600;
  margin: 0 0 8px;
}
.agency-card .ac-discipline {
  margin: 0 0 16px;
  font-size: 12px; line-height: 16px; font-weight: 500;
  color: var(--on-surface-variant);
  text-transform: uppercase; letter-spacing: .08em;
}

.agency-card .ac-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--outline-variant); }
.agency-card .ac-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.agency-card .ac-side { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agency-card .ac-side.right { text-align: right; }
.agency-card .ac-label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--on-surface-variant); }
.agency-card .ac-value { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .02em; word-break: break-word; }
.agency-card .ac-value.struck { text-decoration: line-through; color: var(--tertiary); }
.agency-card .ac-value.dim { color: var(--tertiary); }
.agency-card .ac-value.strong { font-weight: 700; }

.agency-card .ac-icon { flex: none; width: 22px; height: 22px; }
.agency-card .ac-icon svg { width: 100%; height: 100%; display: block; }
.agency-card.type-atama   .ac-icon { color: var(--primary); }
.agency-card.type-konkur  .ac-icon { color: var(--secondary-container); }
.agency-card.type-ayrilik .ac-icon { color: var(--tertiary); }

.agency-card .ac-source {
  margin-top: 12px; font-size: 12px; font-weight: 500; color: var(--tertiary);
}
.agency-card .ac-source:hover { color: var(--secondary); }

.agency-empty { color: var(--tertiary); padding: 40px 0; text-align: center; }

@media (max-width: 1024px) {
  .agency-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .agency-grid { grid-template-columns: 1fr; }
  .agency-head h1 { font-size: 28px; line-height: 34px; }
  .agency-filters { width: 100%; }
  .agency-filters input, .agency-filters select { min-width: 0; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   uaedesirket.com — brutalist editorial
   Kurallar: golge YOK, sayfa zemini saf beyaz DEGIL (#e5e5e5 tuval),
   kartlarda gri cerceve yerine yuzey kontrasti, baslikta hep BUYUK HARF,
   nane ve sari yalnizca kucuk ogelerde.
   `lang="tr"` sayesinde uppercase "i" harfini "İ" yapiyor — header.html'de var.
   ══════════════════════════════════════════════════════════════════════ */

body { background: var(--surface); color: var(--on-surface); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
.wrap { max-width: var(--max-width); }

/* ── Butonlar ─────────────────────────────────────────────────────── */
.btn-primary { background: var(--on-surface); color: var(--on-primary); border-color: var(--on-surface); }
.btn-primary:hover { background: var(--graphite); border-color: var(--graphite); }
.btn-outline { background: transparent; color: var(--on-surface-variant); border: 1.5px solid var(--on-surface-variant); border-radius: 4px; }
.btn-outline:hover { background: var(--on-surface-variant); color: var(--surface-lowest); }

/* ── Ust cubuk: yuzen beyaz hap ───────────────────────────────────── */
.site-header { background: var(--surface); border-bottom: 0; padding: 20px 0; }
.site-header .bar { background: var(--surface-lowest); border-radius: 48px; padding: 12px 12px 12px 28px; gap: 24px; }
.site-header .brand { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--on-surface); white-space: nowrap; }
.site-header .site-nav > a { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--on-surface-variant); white-space: nowrap; }
.site-header .site-nav > a:hover { color: var(--on-surface); }
.site-header .header-actions .btn { padding: 12px 20px; font-size: 15px; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero { background: var(--surface); border-bottom: 0; padding: 72px 0 88px; }
.hero-inner { max-width: 15ch; }
.hero-inner h1 { font-size: clamp(48px, 9vw, 130px); line-height: 0.9; letter-spacing: -0.03em; margin: 0; }
.hero-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: -0.03em; text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: 20px; }
.hero .body-lg { margin-top: 24px; max-width: 58ch; color: var(--on-surface-variant); }
.hero-actions { margin-top: 40px; gap: 16px; }

/* ── Bolumler ─────────────────────────────────────────────────────── */
.band { padding: 80px 0; }
.band-alt { background: var(--surface); }
.band .section-head { margin-bottom: 40px; }
.band .section-head .body-md { color: var(--on-surface-variant); }
.page-head { padding: 64px 0 24px; max-width: 22ch; }
.page-head .body-lg { margin-top: 24px; color: var(--on-surface-variant); max-width: 62ch; }

/* ── Kartlar: duz beyaz, cerceve yok, golge yok ───────────────────── */
.why-item, .type-card, .post-card, .zone-card, .faq, .contact-form-wrap, .value-card {
  background: var(--surface-lowest);
  border: 0;
  border-radius: 24px;
  box-shadow: none;
}

/* ── Rakamlar ─────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { border-left: 0; padding: 24px; background: var(--surface-lowest); border-radius: 24px; }
.stat-no { display: block; font-family: var(--font-display); font-size: 64px; line-height: 0.9; letter-spacing: -0.03em; color: var(--on-surface); margin-bottom: 12px; }
.stat p { margin: 0; color: var(--on-surface-variant); font-size: 14px; line-height: 1.4; }

/* ── Kurulum tipi kartlari ────────────────────────────────────────── */
.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.type-card { padding: 24px; display: flex; flex-direction: column; }
.type-card h3 { margin: 0 0 16px; }
.type-who { display: inline-block; background: var(--mint); color: var(--on-surface); border-radius: 64px; padding: 6px 14px; font-family: var(--mono); font-size: 12px; letter-spacing: -0.03em; margin: 0 0 16px; align-self: flex-start; }
.type-card .body-md { margin: 0 0 16px; color: var(--on-surface-variant); }
.type-limit { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: -0.03em; color: var(--smoke); }

/* ── Adimlar ──────────────────────────────────────────────────────── */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { position: relative; padding: 24px; background: var(--surface-lowest); border-radius: 24px; }
.step-no { position: static; display: flex; width: 40px; height: 40px; border-radius: 8px; background: var(--on-surface); color: var(--on-primary); align-items: center; justify-content: center; font-family: var(--mono); font-size: 14px; margin-bottom: 16px; }
.step h3 { margin: 0 0 8px; }
.step p { margin: 0; color: var(--on-surface-variant); font-size: 14px; line-height: 1.45; }

/* ── Icerik sayfalari ─────────────────────────────────────────────── */
.why-group { padding: 56px 0; border-top: 1px solid var(--rule); }
.why-group > h2 { margin: 0 0 32px; }
.why-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.why-item { padding: 24px; }
.why-item h3 { margin: 0 0 12px; }
.why-item p { margin: 0; color: var(--on-surface-variant); font-size: 15px; line-height: 1.5; }

.type-detail { padding: 48px 0; border-top: 1px solid var(--rule); }
.type-detail > h2 { margin: 0 0 24px; }
.detail-list { margin: 0; display: grid; grid-template-columns: 220px 1fr; gap: 16px 32px; }
.detail-list dt { font-family: var(--mono); font-size: 12px; letter-spacing: -0.03em; text-transform: uppercase; color: var(--smoke); padding-top: 4px; }
.detail-list dd { margin: 0; color: var(--on-surface-variant); }

/* ── Karsilastirma tablosu ────────────────────────────────────────── */
.compare-section { padding: 56px 0; border-top: 1px solid var(--rule); }
.compare-section > h2 { margin: 0 0 28px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 24px; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 680px; background: var(--surface-lowest); }
.compare-table th, .compare-table td { padding: 18px 20px; text-align: left; vertical-align: top; font-size: 15px; line-height: 1.45; border-bottom: 1px solid var(--rule); }
.compare-table thead th { background: var(--on-surface); color: var(--surface-lowest); font-family: var(--mono); font-size: 12px; letter-spacing: -0.03em; text-transform: uppercase; border-bottom: 0; }
.compare-table tbody th { font-weight: 500; width: 200px; color: var(--on-surface); background: var(--surface-low); }
.compare-table tbody td { color: var(--on-surface-variant); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }

/* ── Adim detaylari ───────────────────────────────────────────────── */
.step-detail { display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.step-detail:last-child { border-bottom: 0; }
.step-detail h3 { margin: 0 0 12px; }
.step-detail p { margin: 0 0 10px; color: var(--on-surface-variant); }
.step-detail p:last-child { margin-bottom: 0; }

/* ── Uyari ────────────────────────────────────────────────────────── */
.notice { background: var(--mint); border-left: 0; border-radius: 24px; padding: 20px 24px; margin: 32px 0 40px; font-size: 15px; line-height: 1.5; }

/* ── Serbest bolge kartlari ───────────────────────────────────────── */
.zone-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.zone-card { padding: 24px; }
.zone-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.zone-head h2 { margin: 0; }
.zone-abbr { font-family: var(--mono); font-size: 12px; letter-spacing: -0.03em; color: var(--smoke); }
.zone-price { font-family: var(--font-display); font-size: 32px; line-height: 0.9; letter-spacing: -0.03em; color: var(--on-surface); margin: 0 0 16px; }
.zone-card .body-md { color: var(--on-surface-variant); margin: 0 0 20px; }
.zone-meta { margin: 0; display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; font-size: 14px; padding-top: 16px; border-top: 1px solid var(--rule); }
.zone-meta dt { font-family: var(--mono); font-size: 12px; letter-spacing: -0.03em; text-transform: uppercase; color: var(--smoke); }
.zone-meta dd { margin: 0; color: var(--on-surface-variant); }

/* ── Hizmetler ────────────────────────────────────────────────────── */
.svc { padding: 40px 0; border-top: 1px solid var(--rule); }
.svc > h2 { margin: 0 0 20px; }
.svc-points { margin: 0; padding-left: 0; list-style: none; }
.svc-points li { margin-bottom: 14px; color: var(--on-surface-variant); line-height: 1.55; padding-left: 20px; position: relative; }
.svc-points li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.svc-points li strong { color: var(--on-surface); font-weight: 500; }

/* ── SSS ──────────────────────────────────────────────────────────── */
.faq-group { padding: 40px 0; border-top: 1px solid var(--rule); }
.faq-group > h2 { margin: 0 0 24px; }
.faq { margin-bottom: 12px; border-radius: 16px; }
.faq summary { padding: 20px 56px 20px 24px; cursor: pointer; font-weight: 500; font-size: 17px; letter-spacing: -0.01em; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--on-surface); line-height: 1; }
.faq[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--on-surface); text-decoration: underline; }
.faq p { margin: 0; padding: 0 24px 22px; color: var(--on-surface-variant); }

/* ── Ters blok cagrilari ──────────────────────────────────────────── */
.cta-band { padding: 80px 0; background: var(--on-surface); color: var(--surface-lowest); text-align: left; border-radius: 64px 64px 0 0; }
.cta-band h2 { margin: 0 0 16px; color: var(--surface-lowest); }
.cta-band .body-lg { margin: 0 0 32px; max-width: 62ch; color: var(--smoke); }
.cta-band .btn-primary { background: var(--surface-lowest); color: var(--on-surface); border-color: var(--surface-lowest); }
.cta-band .btn-primary:hover { background: var(--mint); border-color: var(--mint); }

.inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--surface-lowest); border-radius: 32px; padding: 32px 40px; margin: 56px 0 80px; }
.inline-cta h2 { margin: 0 0 8px; }
.inline-cta p { margin: 0; color: var(--on-surface-variant); }

/* ── Blog kartlari ────────────────────────────────────────────────── */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card a { display: block; padding: 24px; color: inherit; text-decoration: none; }
.post-card a:hover h3 { text-decoration: underline; }
.post-tag { display: inline-block; background: var(--mint); color: var(--on-surface); border-radius: 64px; padding: 6px 14px; font-family: var(--mono); font-size: 12px; letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 14px; }
.post-card h3 { margin: 0 0 12px; }
.post-card p { margin: 0; color: var(--on-surface-variant); font-size: 15px; }
.post-more { margin-top: 32px; }
.post-grid:empty { display: none; }
.post-grid:empty + .post-more { margin-top: 0; }

/* ── Iletisim ─────────────────────────────────────────────────────── */
.contact-layout { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; padding: 64px 0 80px; align-items: start; }
.contact-intro .body-lg { color: var(--on-surface-variant); margin-top: 20px; }
.contact-intro .body-lg strong { color: var(--on-surface); font-weight: 500; }
.how-list { list-style: none; margin: 32px 0; padding: 0; }
.how-list li { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font-size: 15px; color: var(--on-surface-variant); }
.how-no { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: var(--mint); color: var(--on-surface); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; }
.contact-details { margin: 32px 0; }
.contact-details dt { font-family: var(--mono); font-size: 12px; letter-spacing: -0.03em; text-transform: uppercase; color: var(--smoke); margin-bottom: 6px; }
.contact-details dd { margin: 0 0 16px; font-size: 18px; }
.contact-details dd a { background: var(--voltage); color: var(--on-surface); padding: 2px 8px; border-radius: 4px; text-decoration: none; }

.contact-form-wrap { padding: 32px; border-radius: 32px; }
.field { margin-bottom: 20px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field label { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: -0.03em; text-transform: uppercase; color: var(--on-surface-variant); }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px; font-family: var(--sans); font-size: 16px;
  color: var(--on-surface); background: var(--surface-low);
  border: 0; border-radius: 8px;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--on-surface); outline-offset: 1px; }
.field textarea { resize: vertical; min-height: 130px; line-height: 1.5; }
.req { color: var(--on-surface); }
.field-check { display: flex; gap: 12px; align-items: flex-start; }
.field-check input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.field-check label { font-family: var(--sans); font-size: 14px; line-height: 1.5; text-transform: none; letter-spacing: 0; color: var(--on-surface-variant); margin: 0; }
.field-check label strong { color: var(--on-surface); font-weight: 500; }
.dz-website { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-msg { margin: 20px 0 0; font-size: 15px; }
.contact-msg.is-ok { background: var(--mint); color: var(--on-surface); padding: 12px 16px; border-radius: 8px; }
.contact-msg.is-error { background: var(--on-surface); color: var(--surface-lowest); padding: 12px 16px; border-radius: 8px; }

/* ── Alt bilgi ────────────────────────────────────────────────────── */
.site-footer { background: var(--on-surface); color: var(--smoke); padding: 64px 0 40px; }
.site-footer .brand { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; letter-spacing: -0.02em; color: var(--surface-lowest); }
.site-footer p { color: var(--smoke); font-size: 14px; }
.site-footer a { color: var(--surface-lowest); }
.foot-contact h3 { margin: 0 0 12px; font-family: var(--mono); font-size: 12px; letter-spacing: -0.03em; text-transform: uppercase; color: var(--smoke); }
.foot-contact p { margin: 0 0 14px; }
.foot-contact a[href^="mailto"] { background: var(--voltage); color: var(--on-surface); padding: 2px 8px; border-radius: 4px; text-decoration: none; }
.site-footer .btn-outline { color: var(--surface-lowest); border-color: var(--smoke); }
.site-footer .btn-outline:hover { background: var(--surface-lowest); color: var(--on-surface); }

/* ── Dar ekran ────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .site-header .site-nav { gap: 16px; }
  .site-header .site-nav > a { font-size: 14px; }
}
@media (max-width: 1024px) {
  .why-list, .stat-grid, .steps { grid-template-columns: repeat(2, 1fr); }
  .type-grid, .zone-grid, .post-grid { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .detail-list { grid-template-columns: 1fr; gap: 6px 0; }
  .detail-list dd { margin-bottom: 16px; }
  .hero-inner { max-width: none; }
}
@media (max-width: 640px) {
  .why-list, .stat-grid, .steps, .field-row { grid-template-columns: 1fr; }
  .band { padding: 56px 0; }
  .hero { padding: 48px 0 56px; }
  .inline-cta, .cta-band { padding: 28px 24px; border-radius: 24px 24px 0 0; }
  .inline-cta { border-radius: 24px; }
  .contact-form-wrap { padding: 24px; }
  .step-detail { grid-template-columns: 1fr; gap: 14px; }
  .hero-actions .btn { width: 100%; text-align: center; }
}

/* Hero genisligi: Anton dar bir yuz oldugu icin `ch` birimi yaniltiyor —
   sabit genislik ve daha olculu bir baslik boyutu 3-4 satira oturtuyor. */
.hero-inner { max-width: 920px; }
.hero-inner h1 { font-size: clamp(42px, 7.2vw, 100px); }
.hero-eyebrow { white-space: nowrap; }
.hero .body-lg { max-width: 56ch; }
@media (max-width: 1024px) { .hero-inner { max-width: 100%; } }

/* ── Maliyet hesaplayici ──────────────────────────────────────────── */
.calc-layout { display: grid; grid-template-columns: 4fr 6fr; gap: 32px; align-items: start; margin: 8px 0 24px; }
.calc-form { background: var(--surface-lowest); border-radius: 32px; padding: 28px; }
.calc-note { margin: 4px 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: -0.03em; color: var(--smoke); }

.calc-result { background: var(--on-surface); color: var(--surface-lowest); border-radius: 32px; padding: 28px; }
.calc-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.calc-total { display: flex; flex-direction: column; gap: 6px; }
.calc-total .label-md { color: var(--smoke); }
.calc-no { font-family: var(--font-display); font-size: clamp(36px, 4.6vw, 56px); line-height: 0.9; letter-spacing: -0.03em; color: var(--surface-lowest); }
.calc-cur { font-family: var(--mono); font-size: 12px; letter-spacing: -0.03em; color: var(--mint); }

.calc-table { width: 100%; border-collapse: collapse; }
.calc-table th, .calc-table td { padding: 12px 0; text-align: left; font-size: 14px; border-bottom: 1px solid var(--graphite); }
.calc-table thead th { font-family: var(--mono); font-size: 12px; letter-spacing: -0.03em; text-transform: uppercase; color: var(--smoke); border-bottom-color: var(--smoke); }
.calc-table tbody th { font-weight: 400; color: var(--surface-lowest); }
.calc-table tbody td { text-align: right; font-variant-numeric: tabular-nums; color: var(--smoke); }
.calc-table tbody td:nth-child(2) { color: var(--surface-lowest); }
.calc-table tbody tr:last-child th, .calc-table tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 1024px) {
  .calc-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .calc-totals { grid-template-columns: 1fr; gap: 20px; }
  .calc-form, .calc-result { padding: 22px; border-radius: 24px; }
}

/* ── Blog bolum sayfasi ───────────────────────────────────────────── */
.section-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; padding-bottom: 80px; align-items: start; }
/* Yazi yokken ray bos kalir; tek kolona dus, yanda bosluk birakma */
.section-rail:empty { display: none; }
.section-layout:has(.section-rail:empty) { grid-template-columns: 1fr; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 32px; }
.chips .chip { display: inline-block; background: var(--surface-lowest); color: var(--on-surface-variant); border-radius: 64px; padding: 8px 16px; font-family: var(--mono); font-size: 12px; letter-spacing: -0.03em; text-decoration: none; }
.chips .chip:hover { background: var(--mint); color: var(--on-surface); }
.chips .chip.active { background: var(--on-surface); color: var(--surface-lowest); }

.section-main > .muted { background: var(--surface-lowest); border-radius: 24px; text-align: center; color: var(--smoke); }
.section-rail > div { background: var(--surface-lowest); border-radius: 24px; padding: 24px; margin-bottom: 24px; }
.rail-title, .radar-head h3, .most-read h3 { font-family: var(--mono); font-size: 12px; letter-spacing: -0.03em; text-transform: uppercase; color: var(--smoke); margin: 0 0 16px; }

.story, .grid-story, .lead-story { background: var(--surface-lowest); border-radius: 24px; padding: 24px; margin-bottom: 24px; box-shadow: none; border: 0; }
.story-grid, .section-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.pager { margin-top: 32px; }

@media (max-width: 1024px) {
  .section-layout { grid-template-columns: 1fr; }
  .story-grid, .section-grid { grid-template-columns: 1fr; }
}

/* ── Hero skyline gorseli ─────────────────────────────────────────────
   Dosya /uploads/hero-skyline.jpg olarak konur. Yoksa arka plan bos kalir
   ve hero eskisi gibi calisir — kirik gorsel ikonu cikmaz (img degil,
   background kullaniliyor).
   Maske SOLA dogru soner: metnin oldugu tarafta gorsel yok, sagda tam. */
.hero { position: relative; overflow: hidden; }
.hero-media {
  position: absolute; inset: 0 0 0 auto;
  width: 68%;
  background-image: url("/uploads/hero-skyline.jpg");
  background-size: cover;
  background-position: center right;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 38%, #000 72%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 38%, #000 72%);
  pointer-events: none;
}
/* Tuval renginden soldan saga ince bir perde: koyu bir gorselde bile
   baslik kontrasti korunur. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--surface) 0%, rgba(229,229,229,.65) 30%, rgba(229,229,229,0) 62%);
}
.hero .wrap { position: relative; z-index: 1; }

@media (max-width: 1024px) {
  /* Dar ekranda metin tam genislige yayiliyor; gorsel arkada kalirsa
     okunurlugu bozar — cok sesiz bir doku olarak birakiliyor. */
  .hero-media { width: 100%; opacity: .18; }
  .hero-media::after { background: none; }
}


/* page-head'e verilen 22ch paragrafi da daraltiyordu — Anton dar bir yuz
   oldugu icin `ch` burada yaniltici. Blok tam genislik, paragraf kendi
   olcusunu kullanir. */
.page-head { max-width: none; }
.page-head h1 { max-width: 24ch; }
.page-head .body-lg { max-width: 64ch; }